How to use the @teleporthq/teleport-plugin-common.ASTUtils.addDynamicAttributeToJSXTag 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-plugin-css-modules / src / index.ts View on Github external
cssClasses.push(
            StyleBuilders.createCSSClass(
              className,
              StyleUtils.getContentOfStyleObject(staticStyles)
            )
          )

          // When the className is equal to the jsFriendlyClassName, it can be safely addressed with `styles.`
          const classNameIsJSFriendly = className === jsFriendlyClassName
          const classReferenceIdentifier =
            camelCaseClassNames || classNameIsJSFriendly
              ? `styles.${jsFriendlyClassName}`
              : `styles['${className}']`

          ASTUtils.addDynamicAttributeToJSXTag(root, classAttributeName, classReferenceIdentifier)
        }

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

          const inlineStyles = UIDLUtils.transformDynamicStyles(rootStyles, (styleValue) =>
            StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix)
          )

          // If dynamic styles are on nested-styles they are unfortunately lost, since inline style does not support that
          if (Object.keys(inlineStyles).length > 0) {
            ASTUtils.addAttributeToJSXTag(root, 'style', inlineStyles)
          }
        }
      }
    })
github teleporthq / teleport-code-generators / packages / teleport-plugin-css-modules / src / index.ts View on Github external
cssClasses.push(
            StyleBuilders.createCSSClass(
              className,
              StyleUtils.getContentOfStyleObject(staticStyles)
            )
          )

          // When the className is equal to the jsFriendlyClassName, it can be safely addressed with `styles.`
          const classNameIsJSFriendly = className === jsFriendlyClassName
          const classReferenceIdentifier =
            camelCaseClassNames || classNameIsJSFriendly
              ? `styles.${jsFriendlyClassName}`
              : `styles['${className}']`

          ASTUtils.addDynamicAttributeToJSXTag(root, classAttributeName, classReferenceIdentifier)
        }

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

          const inlineStyles = UIDLUtils.transformDynamicStyles(rootStyles, (styleValue) =>
            StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix)
          )

          // If dynamic styles are on nested-styles they are unfortunately lost, since inline style does not support that
          if (Object.keys(inlineStyles).length > 0) {
            ASTUtils.addAttributeToJSXTag(root, 'style', inlineStyles)
          }
        }
      }
    })
github teleporthq / teleport-code-generators / packages / teleport-plugin-react-app-routing / src / utils.ts View on Github external
export const constructRouteJSX = (flavour: string, componentName: string, path: string) => {
  let JSXRoutePrefix: string
  let route: types.JSXElement

  if (flavour === 'preact') {
    JSXRoutePrefix = componentName
    route = ASTBuilders.createSelfClosingJSXTag(JSXRoutePrefix)
  } else {
    JSXRoutePrefix = 'Route'
    route = ASTBuilders.createSelfClosingJSXTag(JSXRoutePrefix)
    ASTUtils.addAttributeToJSXTag(route, 'exact')
    ASTUtils.addDynamicAttributeToJSXTag(route, 'component', componentName)
  }

  ASTUtils.addAttributeToJSXTag(route, 'path', path)

  return route
}
github teleporthq / teleport-code-generators / packages / teleport-plugin-react-jss / src / index.ts View on Github external
UIDLUtils.traverseElements(node, (element) => {
      const { style, key } = element
      if (style && Object.keys(style).length > 0) {
        const root = jsxNodesLookup[key]
        const className = StringUtils.camelCaseToDashCase(key)
        jssStyleMap[className] = UIDLUtils.transformDynamicStyles(style, (styleValue) => {
          if (styleValue.content.referenceType === 'prop') {
            return new ParsedASTNode(
              ASTBuilders.createArrowFunctionWithMemberExpression('props', styleValue.content.id)
            )
          }
          throw new Error(
            `Error running transformDynamicStyles in reactJSSComponentStyleChunksPlugin. Unsupported styleValue.content.referenceType value ${styleValue.content.referenceType}`
          )
        })
        ASTUtils.addDynamicAttributeToJSXTag(
          root,
          classAttributeName,
          `classes['${className}']`,
          propsPrefix
        )
      }
    })
github teleporthq / teleport-code-generators / packages / teleport-plugin-react-styled-components / src / index.ts View on Github external
(styleValue, attribute) => {
            if (styleValue.content.referenceType === 'prop') {
              const dashCaseAttribute = StringUtils.dashCaseToCamelCase(attribute)
              switch (timesReferred) {
                case 1:
                  ASTUtils.addDynamicAttributeToJSXTag(
                    root,
                    dashCaseAttribute,
                    styleValue.content.id,
                    propsPrefix
                  )
                  return `\$\{props => props.${dashCaseAttribute}\}`
                default:
                  return `\$\{props => props.${styleValue.content.id}\}`
              }
            }
            throw new Error(
              `Error running transformDynamicStyles in reactStyledComponentsPlugin. Unsupported styleValue.content.referenceType value ${styleValue.content.referenceType}`
            )
          }
        )

@teleporthq/teleport-plugin-common

Common building and modelating functions for ASTs and HASTs

MIT
Latest version published 3 days ago

Package Health Score

82 / 100
Full package analysis

Similar packages