How to use the @teleporthq/teleport-plugin-common.HASTUtils.addAttributeToNode function in @teleporthq/teleport-plugin-common

To help you get started, we’ve selected a few @teleporthq/teleport-plugin-common examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github teleporthq / teleport-code-generators / packages / teleport-project-generator / src / file-handlers.ts View on Github external
HASTUtils.addBooleanAttributeToNode(scriptTag, 'async')
        }
      } else if (asset.content) {
        HASTUtils.addTextNode(scriptTag, asset.content)
      }
      if (scriptInBody) {
        HASTUtils.addChildNode(bodyNode, scriptTag)
      } else {
        HASTUtils.addChildNode(headNode, scriptTag)
      }
    }

    // icon
    if (asset.type === 'icon' && assetPath) {
      const iconTag = HASTBuilers.createHTMLNode('link')
      HASTUtils.addAttributeToNode(iconTag, 'rel', 'shortcut icon')
      HASTUtils.addAttributeToNode(iconTag, 'href', assetPath)

      if (asset.options && asset.options.iconType) {
        HASTUtils.addAttributeToNode(iconTag, 'type', asset.options.iconType)
      }
      if (asset.options && asset.options.iconSizes) {
        HASTUtils.addAttributeToNode(iconTag, 'sizes', asset.options.iconSizes)
      }
      HASTUtils.addChildNode(headNode, iconTag)
    }
  })
github teleporthq / teleport-code-generators / packages / teleport-project-generator / src / file-handlers.ts View on Github external
}
      if (scriptInBody) {
        HASTUtils.addChildNode(bodyNode, scriptTag)
      } else {
        HASTUtils.addChildNode(headNode, scriptTag)
      }
    }

    // icon
    if (asset.type === 'icon' && assetPath) {
      const iconTag = HASTBuilers.createHTMLNode('link')
      HASTUtils.addAttributeToNode(iconTag, 'rel', 'shortcut icon')
      HASTUtils.addAttributeToNode(iconTag, 'href', assetPath)

      if (asset.options && asset.options.iconType) {
        HASTUtils.addAttributeToNode(iconTag, 'type', asset.options.iconType)
      }
      if (asset.options && asset.options.iconSizes) {
        HASTUtils.addAttributeToNode(iconTag, 'sizes', asset.options.iconSizes)
      }
      HASTUtils.addChildNode(headNode, iconTag)
    }
  })
github teleporthq / teleport-code-generators / packages / teleport-project-generator / src / file-handlers.ts View on Github external
assets.forEach((asset) => {
    const assetPath = UIDLUtils.prefixAssetsPath(assetsPrefix, asset.path)

    // link canonical for SEO
    if (asset.type === 'canonical' && assetPath) {
      const linkTag = HASTBuilers.createHTMLNode('link')
      HASTUtils.addAttributeToNode(linkTag, 'rel', 'canonical')
      HASTUtils.addAttributeToNode(linkTag, 'href', assetPath)
      HASTUtils.addChildNode(headNode, linkTag)
    }

    // link stylesheet (external css, font)
    if ((asset.type === 'style' || asset.type === 'font') && assetPath) {
      const linkTag = HASTBuilers.createHTMLNode('link')
      HASTUtils.addAttributeToNode(linkTag, 'rel', 'stylesheet')
      HASTUtils.addAttributeToNode(linkTag, 'href', assetPath)
      HASTUtils.addChildNode(headNode, linkTag)
    }

    // inline style
    if (asset.type === 'style' && asset.content) {
      const styleTag = HASTBuilers.createHTMLNode('style')
      HASTUtils.addTextNode(styleTag, asset.content)
      HASTUtils.addChildNode(headNode, styleTag)
    }

    // script (external or inline)
    if (asset.type === 'script') {
      const scriptInBody = (asset.options && asset.options.target === 'body') || false
      const scriptTag = HASTBuilers.createHTMLNode('script')
      HASTUtils.addAttributeToNode(scriptTag, 'type', 'text/javascript')
github teleporthq / teleport-code-generators / packages / teleport-project-generator / src / file-handlers.ts View on Github external
if (attributeValue) {
            HASTUtils.addAttributeToNode(createdNode, attributeKey, attributeValue)
          } else {
            HASTUtils.addBooleanAttributeToNode(createdNode, attributeKey)
          }
        })
      }

      HASTUtils.addChildNode(targetNode, createdNode)
    })
  }

  if (manifest) {
    const linkTag = HASTBuilers.createHTMLNode('link')
    HASTUtils.addAttributeToNode(linkTag, 'rel', 'manifest')
    HASTUtils.addAttributeToNode(linkTag, 'href', `${options.assetsPrefix}/manifest.json`)
    HASTUtils.addChildNode(headNode, linkTag)
  }

  meta.forEach((metaItem) => {
    const metaTag = HASTBuilers.createHTMLNode('meta')
    Object.keys(metaItem).forEach((key) => {
      const prefixedURL = UIDLUtils.prefixAssetsPath(assetsPrefix, metaItem[key])
      HASTUtils.addAttributeToNode(metaTag, key, prefixedURL)
    })
    HASTUtils.addChildNode(headNode, metaTag)
  })

  assets.forEach((asset) => {
    const assetPath = UIDLUtils.prefixAssetsPath(assetsPrefix, asset.path)

    // link canonical for SEO
github teleporthq / teleport-code-generators / packages / teleport-plugin-css / src / index.ts View on Github external
if (templateStyle === 'html') {
          HASTUtils.addClassToNode(root, className)
        } else {
          ASTUtils.addClassStringOnJSXTag(root, className, classAttributeName)
        }
      }

      if (Object.keys(dynamicStyles).length > 0) {
        const rootStyles = UIDLUtils.cleanupNestedStyles(dynamicStyles)

        // If dynamic styles are on nested-styles they are unfortunately lost, since inline style does not support that
        if (Object.keys(rootStyles).length > 0) {
          if (templateStyle === 'html') {
            // simple string expression
            const inlineStyles = createDynamicInlineStyle(rootStyles)
            HASTUtils.addAttributeToNode(root, inlineStyleAttributeKey, `{${inlineStyles}}`)
          } else {
            // jsx object expression
            const inlineStyles = UIDLUtils.transformDynamicStyles(rootStyles, (styleValue) =>
              StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix)
            )
            ASTUtils.addAttributeToJSXTag(root, inlineStyleAttributeKey, inlineStyles)
          }
        }
      }
    })
github teleporthq / teleport-code-generators / packages / teleport-project-generator / src / file-handlers.ts View on Github external
HASTUtils.addAttributeToNode(linkTag, 'href', assetPath)
      HASTUtils.addChildNode(headNode, linkTag)
    }

    // inline style
    if (asset.type === 'style' && asset.content) {
      const styleTag = HASTBuilers.createHTMLNode('style')
      HASTUtils.addTextNode(styleTag, asset.content)
      HASTUtils.addChildNode(headNode, styleTag)
    }

    // script (external or inline)
    if (asset.type === 'script') {
      const scriptInBody = (asset.options && asset.options.target === 'body') || false
      const scriptTag = HASTBuilers.createHTMLNode('script')
      HASTUtils.addAttributeToNode(scriptTag, 'type', 'text/javascript')
      if (assetPath) {
        HASTUtils.addAttributeToNode(scriptTag, 'src', assetPath)
        if (asset.options && asset.options.defer) {
          HASTUtils.addBooleanAttributeToNode(scriptTag, 'defer')
        }
        if (asset.options && asset.options.async) {
          HASTUtils.addBooleanAttributeToNode(scriptTag, 'async')
        }
      } else if (asset.content) {
        HASTUtils.addTextNode(scriptTag, asset.content)
      }
      if (scriptInBody) {
        HASTUtils.addChildNode(bodyNode, scriptTag)
      } else {
        HASTUtils.addChildNode(headNode, scriptTag)
      }
github teleporthq / teleport-code-generators / packages / teleport-project-generator / src / file-handlers.ts View on Github external
HASTUtils.addChildNode(htmlNode, headNode)
  HASTUtils.addChildNode(htmlNode, bodyNode)

  // Vue and React use a standard <div id="app"> in the body tag.
  // Nuxt has an internal templating so requires an override
  if (appRootOverride) {
    HASTUtils.addTextNode(bodyNode, appRootOverride)
  } else {
    const appRootNode = HASTBuilers.createHTMLNode('div')
    HASTUtils.addAttributeToNode(appRootNode, 'id', 'app')
    HASTUtils.addChildNode(bodyNode, appRootNode)
  }

  if (settings.language) {
    HASTUtils.addAttributeToNode(htmlNode, 'lang', settings.language)
  }

  if (settings.title) {
    const titleTag = HASTBuilers.createHTMLNode('title')
    HASTUtils.addTextNode(titleTag, settings.title)
    HASTUtils.addChildNode(headNode, titleTag)
  }

  /* For frameworks that need to inject and point out the generated build files
  or adding some script tags in head or body */
  if (customTags.length &gt; 0) {
    customTags.forEach((tag: CustomTag) =&gt; {
      const { targetTag, tagName, attributes, content } = tag
      const targetNode = targetTag === 'head' ? headNode : bodyNode
      const createdNode = HASTBuilers.createHTMLNode(tagName)
</div>
github teleporthq / teleport-code-generators / packages / teleport-project-generator / src / file-handlers.ts View on Github external
} else {
        HASTUtils.addChildNode(headNode, scriptTag)
      }
    }

    // icon
    if (asset.type === 'icon' && assetPath) {
      const iconTag = HASTBuilers.createHTMLNode('link')
      HASTUtils.addAttributeToNode(iconTag, 'rel', 'shortcut icon')
      HASTUtils.addAttributeToNode(iconTag, 'href', assetPath)

      if (asset.options && asset.options.iconType) {
        HASTUtils.addAttributeToNode(iconTag, 'type', asset.options.iconType)
      }
      if (asset.options && asset.options.iconSizes) {
        HASTUtils.addAttributeToNode(iconTag, 'sizes', asset.options.iconSizes)
      }
      HASTUtils.addChildNode(headNode, iconTag)
    }
  })
github teleporthq / teleport-code-generators / packages / teleport-project-generator / src / file-handlers.ts View on Github external
attributes.forEach((attribute: Attribute) => {
          const { attributeKey, attributeValue } = attribute
          if (attributeValue) {
            HASTUtils.addAttributeToNode(createdNode, attributeKey, attributeValue)
          } else {
            HASTUtils.addBooleanAttributeToNode(createdNode, attributeKey)
          }
        })
      }
github teleporthq / teleport-code-generators / packages / teleport-project-generator / src / file-handlers.ts View on Github external
const { attributeKey, attributeValue } = attribute
          if (attributeValue) {
            HASTUtils.addAttributeToNode(createdNode, attributeKey, attributeValue)
          } else {
            HASTUtils.addBooleanAttributeToNode(createdNode, attributeKey)
          }
        })
      }

      HASTUtils.addChildNode(targetNode, createdNode)
    })
  }

  if (manifest) {
    const linkTag = HASTBuilers.createHTMLNode('link')
    HASTUtils.addAttributeToNode(linkTag, 'rel', 'manifest')
    HASTUtils.addAttributeToNode(linkTag, 'href', `${options.assetsPrefix}/manifest.json`)
    HASTUtils.addChildNode(headNode, linkTag)
  }

  meta.forEach((metaItem) => {
    const metaTag = HASTBuilers.createHTMLNode('meta')
    Object.keys(metaItem).forEach((key) => {
      const prefixedURL = UIDLUtils.prefixAssetsPath(assetsPrefix, metaItem[key])
      HASTUtils.addAttributeToNode(metaTag, key, prefixedURL)
    })
    HASTUtils.addChildNode(headNode, metaTag)
  })

  assets.forEach((asset) => {
    const assetPath = UIDLUtils.prefixAssetsPath(assetsPrefix, asset.path)

@teleporthq/teleport-plugin-common

Common building and modelating functions for ASTs and HASTs

MIT
Latest version published 2 days ago

Package Health Score

82 / 100
Full package analysis

Similar packages