TypeScript babel-types.isJSXElement函数代码示例

 .reduce((str, child) => {
   if (t.isJSXText(child)) {
     return str + child.value
   }
   if (t.isJSXElement(child)) {
     return str + parseJSXElement(child)
   }
   if (t.isJSXExpressionContainer(child)) {
     if (t.isJSXElement(child.expression)) {
       return str + parseJSXElement(child.expression)
     }
     return str + `{${
       decodeUnicode(
         generate(child, {
           quotes: 'single',
           jsonCompatibleStrings: true
         })
         .code
       )
       .replace(/(this\.props\.)|(this\.state\.)/g, '')
       .replace(/(props\.)|(state\.)/g, '')
       .replace(/this\./, '')
     }}`
   }
   return str
 }, '')

 .reduce((str, child) => {
   if (t.isJSXText(child)) {
     const strings: string[] = []
     child.value.split(/(\r?\n\s*)/).forEach((val) => {
       const value = val.replace(/\u00a0/g, ' ')
       if (!value) {
         return
       }
       if (value.startsWith('\n')) {
         return
       }
       strings.push(value)
     })
     return str + strings.join('')
   }
   if (t.isJSXElement(child)) {
     return str + parseJSXElement(child)
   }
   if (t.isJSXExpressionContainer(child)) {
     if (t.isJSXElement(child.expression)) {
       return str + parseJSXElement(child.expression)
     }
     return str + `{${generateJSXAttr(child)}}`
   }
   return str
 }, '')

 .reduce((str, child) => {
   if (t.isJSXText(child)) {
     return str + child.value
   }
   if (t.isJSXElement(child)) {
     return str + parseJSXElement(child)
   }
   if (t.isJSXExpressionContainer(child)) {
     if (t.isJSXElement(child.expression)) {
       return str + parseJSXElement(child.expression)
     }
     return str + `{${
       generate(child)
       .code
       .replace(/(this\.props\.)|(this\.state\.)/, '')
       .replace(/this\./, '')
     }}`
   }
   return str
 }, '')

 .reduce((str, child) => {
   if (t.isJSXText(child)) {
     const strings: string[] = []
     child.value.split(/(\r?\n\s*)/).forEach((val) => {
       const value = val.replace(/\u00a0/g, ' ').trimLeft()
       if (!value) {
         return
       }
       if (value.startsWith('\n')) {
         return
       }
       strings.push(value)
     })
     return str + strings.join('')
   }
   if (t.isJSXElement(child)) {
     return str + parseJSXElement(child)
   }
   if (t.isJSXExpressionContainer(child)) {
     if (t.isJSXElement(child.expression)) {
       return str + parseJSXElement(child.expression)
     }
     return str + `{${
       decodeUnicode(
         generate(child, {
           quotes: 'single',
           jsonCompatibleStrings: true
         })
         .code
       )
       .replace(/(this\.props\.)|(this\.data\.)/g, '')
       .replace(/(props\.)|(data\.)/g, '')
       .replace(/this\./g, '')
       .replace(/</g, lessThanSignPlacehold)
     }}`
   }
   return str
 }, '')

function hydrate (file: t.File) {
  const ast = file.program.body[0]
  if (ast && t.isExpressionStatement(ast) && t.isJSXElement(ast.expression)) {
    const jsx = ast.expression
    if (jsx.children.length === 1) {
      const children = jsx.children[0]
      return t.isJSXExpressionContainer(children)
        ? children.expression
        : children
    } else {
      return jsx
    }
  }
}

export function parseLoopBody (
  body: NodePath<t.BlockStatement>,
  jsxDeclarations: Set<NodePath<t.Node>>,
  // @TODO
  // 把 templates 换成 Map 可以支持 shalow variables declared
  // 现在先用 ESLint 的 no-shalow 顶着
  templates: Map<string, t.JSXElement>,
  loopScopes: Set<string>,
  finalReturnElement: t.JSXElement,
  returnedPaths: NodePath<t.Node>[]
) {
  const bodyScope = body.scope
  body.traverse({
    JSXElement (jsxElementPath) {
      const parentNode = jsxElementPath.parent
      const parentPath = jsxElementPath.parentPath
      const isFinalReturn = jsxElementPath.getFunctionParent().isClassMethod()
      const isJSXChildren = t.isJSXElement(parentNode)
      if (!isJSXChildren) {
        let statementParent = jsxElementPath.getStatementParent()
        if (
          !(
            statementParent.isVariableDeclaration() ||
            statementParent.isExpressionStatement()
          )
        ) {
          statementParent = statementParent.findParent(
            s => s.isVariableDeclaration() || s.isExpressionStatement()
          ) as NodePath<t.Statement>
        }
        jsxDeclarations.add(statementParent)
        if (t.isVariableDeclarator(parentNode)) {
          if (statementParent) {
            const name = findIdentifierFromStatement(statementParent.node as t.VariableDeclaration)
            // setTemplate(name, path, templates)
            name && templates.set(name, jsxElementPath.node)
          }
        } else if (t.isLogicalExpression(parentNode)) {
          const { left, operator } = parentNode
          if (operator === '&&') {
            if (t.isExpression(left)) {
              newJSXIfAttr(jsxElementPath.node, left)
              parentPath.replaceWith(jsxElementPath.node)
              if (statementParent) {
                const name = findIdentifierFromStatement(statementParent.node as t.VariableDeclaration)
                setTemplate(name, jsxElementPath, templates)
                // name && templates.set(name, path.node)
              }
            }
          }
        } else if (t.isConditionalExpression(parentNode)) {
          const { test, consequent, alternate } = parentNode
          const block = buildBlockElement()
          if (t.isJSXElement(consequent) && t.isLiteral(alternate)) {
            const { value, confident } = parentPath.get('alternate').evaluate()
            if (confident && !value) {
              newJSXIfAttr(block, test)
              block.children = [ jsxElementPath.node ]
              // newJSXIfAttr(jsxElementPath.node, test)
              parentPath.replaceWith(block)
              if (statementParent) {
                const name = findIdentifierFromStatement(
                  statementParent.node as t.VariableDeclaration
                )
                setTemplate(name, jsxElementPath, templates)
                // name && templates.set(name, path.node)
              }
            }
          } else if (t.isLiteral(consequent) && t.isJSXElement(consequent)) {
            if (t.isNullLiteral(consequent)) {
              newJSXIfAttr(block, reverseBoolean(test))
              // newJSXIfAttr(jsxElementPath.node, reverseBoolean(test))
              parentPath.replaceWith(block)
              if (statementParent) {
                const name = findIdentifierFromStatement(
                  statementParent.node as t.VariableDeclaration
                )
                setTemplate(name, jsxElementPath, templates)
                // name && templates.set(name, path.node)
              }
            }
          } else if (t.isJSXElement(consequent) && t.isJSXElement(alternate)) {
            const block2 = buildBlockElement()
            block.children = [consequent]
            newJSXIfAttr(block, test)
            setJSXAttr(block2, Adapter.else)
            block2.children = [alternate]
            const parentBlock = buildBlockElement()
            parentBlock.children = [block, block2]
            parentPath.replaceWith(parentBlock)
            if (statementParent) {
              const name = findIdentifierFromStatement(
                statementParent.node as t.VariableDeclaration
              )
              setTemplate(name, jsxElementPath, templates)
            }
          } else {
            // console.log('todo')
          }
        } else if (t.isReturnStatement(parentNode)) {
//.........这里部分代码省略.........

//.........这里部分代码省略.........
    JSXOpeningElement (path) {
      const { name } = path.node.name as t.JSXIdentifier
      if (name === 'Provider') {
        const modules = path.scope.getAllBindings('module')
        const providerBinding = Object.values(modules).some((m: Binding) => m.identifier.name === 'Provider')
        if (providerBinding) {
          path.node.name = t.jSXIdentifier('View')
          const store = path.node.attributes.find(attr => attr.name.name === 'store')
          if (store && t.isJSXExpressionContainer(store.value) && t.isIdentifier(store.value.expression)) {
            storeName = store.value.expression.name
          }
          path.node.attributes = []
        }
      }

      if (IMAGE_COMPONENTS.has(name)) {
        for (const attr of path.node.attributes) {
          if (
            attr.name.name === 'src'
          ) {
            if (t.isStringLiteral(attr.value)) {
              imageSource.add(attr.value.value)
            } else if (t.isJSXExpressionContainer(attr.value)) {
              if (t.isStringLiteral(attr.value.expression)) {
                imageSource.add(attr.value.expression.value)
              }
            }
          }
        }
      }
    },
    JSXAttribute (path) {
      const { name, value } = path.node
      if (!t.isJSXIdentifier(name) || value === null || t.isStringLiteral(value) || t.isJSXElement(value)) {
        return
      }

      const expr = value.expression as any
      const exprPath = path.get('value.expression')
      if (!t.isBinaryExpression(expr, { operator: '+' }) && !t.isLiteral(expr) && name.name === 'style') {
        const jsxID = path.findParent(p => p.isJSXOpeningElement()).get('name')
        if (jsxID && jsxID.isJSXIdentifier() && DEFAULT_Component_SET.has(jsxID.node.name)) {
          exprPath.replaceWith(
            t.callExpression(t.identifier(INTERNAL_INLINE_STYLE), [expr])
          )
        }
      }

      if (name.name.startsWith('on')) {
        if (exprPath.isReferencedIdentifier()) {
          const ids = [expr.name]
          const fullPath = buildFullPathThisPropsRef(expr, ids, path)
          if (fullPath) {
            exprPath.replaceWith(fullPath)
          }
        }

        if (exprPath.isReferencedMemberExpression()) {
          const id = findFirstIdentifierFromMemberExpression(expr)
          const ids = getIdsFromMemberProps(expr)
          if (t.isIdentifier(id)) {
            const fullPath = buildFullPathThisPropsRef(id, ids, path)
            if (fullPath) {
              exprPath.replaceWith(fullPath)
            }
          }

//.........这里部分代码省略.........
      const { name } = path.node.name as t.JSXIdentifier
      if (name === 'Provider') {
        const modules = path.scope.getAllBindings('module')
        const providerBinding = Object.values(modules).some((m: Binding) => m.identifier.name === 'Provider')
        if (providerBinding) {
          path.node.name = t.jSXIdentifier('View')
          const store = path.node.attributes.find(attr => attr.name.name === 'store')
          if (store && t.isJSXExpressionContainer(store.value) && t.isIdentifier(store.value.expression)) {
            storeName = store.value.expression.name
          }
          path.node.attributes = []
        }
      }

      if (IMAGE_COMPONENTS.has(name)) {
        for (const attr of path.node.attributes) {
          if (
            t.isIdentifier(attr) &&
            attr.name.name === 'src'
          ) {
            if (t.isStringLiteral(attr.value)) {
              imageSource.add(attr.value.value)
            } else if (t.isJSXExpressionContainer(attr.value)) {
              if (t.isStringLiteral(attr.value.expression)) {
                imageSource.add(attr.value.expression.value)
              }
            }
          }
        }
      }
    },
    JSXAttribute (path) {
      const { name, value } = path.node
      if (!t.isJSXIdentifier(name) || value === null || t.isStringLiteral(value) || t.isJSXElement(value)) {
        return
      }

      const expr = value.expression
      if (t.isBinaryExpression(expr, { operator: '+' }) || t.isLiteral(expr) || name.name !== 'style') {
        return
      }

      path.get('value.expression').replaceWith(
        t.callExpression(t.identifier(INTERNAL_INLINE_STYLE), [expr])
      )
    },
    ImportDeclaration (path) {
      const source = path.node.source.value
      const names: string[] = []
      if (source === TARO_PACKAGE_NAME) {
        path.node.specifiers.push(
          t.importSpecifier(t.identifier(INTERNAL_SAFE_GET), t.identifier(INTERNAL_SAFE_GET)),
          t.importSpecifier(t.identifier(INTERNAL_DYNAMIC), t.identifier(INTERNAL_DYNAMIC)),
          t.importSpecifier(t.identifier(INTERNAL_INLINE_STYLE), t.identifier(INTERNAL_INLINE_STYLE))
        )
      }
      if (
        source === REDUX_PACKAGE_NAME
      ) {
        path.node.specifiers.forEach((s, index, specs) => {
          if (s.local.name === 'Provider') {
            specs.splice(index, 1)
            specs.push(
              t.importSpecifier(t.identifier('setStore'), t.identifier('setStore'))
            )
          }