TypeScript html.prettyPrint函数代码示例

  test('简单情况', () => {
    const { template, ast } = transform({
      ...baseOptions,
      isRoot: true,
      code: buildComponent(`
      const tasks = []
      if (tasks !== null) {
        return <View className='page-body' >
        </View>
      }

      return (
        <View className='page-body'>
          <Text>Hello world!</Text>
        </View>
      )
      `)
    })

    expect(template).toMatch(prettyPrint(`
    <block>
    <block wx:if=\"{{tasks !== null}}\">
        <view class=\"page-body\"></view>
    </block>
    <view class=\"page-body\" wx:else>
        <text>Hello world!</text>
    </view>
</block>
    `))
  })

    test('能在多层循环中使用', () => {
      const { template, ast, code } = transform({
        ...baseOptions,
        isRoot: true,
        code: buildComponent(`
          const array = [{ list: [{}] }]
          return (
            <View>{array.map(item => {
              return <View style={{ 'fontSize': '12px', color: 'red' }}>
                {item.list.map(l => <Image style={{ 'fontSize': '16px', color: 'green' }} />)}
              </View>
            })}</View>
          )
        `)
      })

      const instance = evalClass(ast, '', true)
      removeShadowData(instance.state)

      expect(template).toMatch(prettyPrint(`
        <block>
            <view>
                <view style="{{item.$loopState__temp2}}" wx:for="{{loopArray0}}" wx:for-item="item">
                    <image style="{{l.$loopState__temp4}}" wx:for="{{item.list}}" wx:for-item="l"
                    />
                </view>
            </view>
        </block>
      `))

      expect(Object.keys(instance.state).length).toBeLessThanOrEqual(2)
      expect(instance.state.loopArray0[0].$loopState__temp2).toMatch(`font-size:12px;color:red`)
      expect(instance.state.loopArray0[0].list[0].$loopState__temp4).toMatch(`font-size:16px;color:green`)
    })

  public generateDefinitionFile(changelog: Changelog, version: string): GeneratedFile {

    return new GeneratedFile(`/${version}/index.html`,
      html.prettyPrint(jade.renderFile(__dirname + "/../../resources/view/index.jade", {
        version: version,
        changelog: changelog,
        api: this
      })));
  }

  public generateRootFile(changelog: Changelog): GeneratedFile {

    return new GeneratedFile("/index.html",
      html.prettyPrint(jade.renderFile(__dirname + "/../../resources/view/root.jade", {
        name: this.name,
        description: this.description,
        versions: changelog.changes
      })));
  }

export function serialize(document, pretty) {
    var output = '';

    if (document.doctype) {
        output += document.doctype.toString();
    }

    output += document.outerHTML;

    if (pretty) {
        output = prettyPrint(output) + '\n';
    }

    return output;
}

  test.skip('if-else', () => {
    const { template, ast } = transform({
      ...baseOptions,
      isRoot: true,
      code: buildComponent(`
      const tasks = []
      const content = null
      if (tasks !== null) {
        content = <View className='page-body' >
        </View>
      }

      if (tasks.length === 0) {
        content = <View className='page-body'>
          <Text>{tasks.length}</Text>
        </View>
      }

      return (
        <View className='page-body'>
          {content}
        </View>
      )
      `)
    })

    expect(template).toMatch(prettyPrint(`
      <block>
          <block wx:if=\"{{tasks !== null}}\">
              <view class=\"page-body\"></view>
          </block>
          <block wx:elif=\"{{tasks.length === 0}}\">
              <view class=\"page-body\">
                  <text>{{tasks.length}}</text>
              </view>
          </block>
          <view class=\"page-body\" wx:else>
              <text>Hello world!</text>
          </view>
      </block>
    `))
  })

export function prettyPrint (str: string): string {
  return html.prettyPrint(str, { max_char: 0 })
}

//.........这里部分代码省略.........
        return t.isImportDeclaration(statement) && statement.source.value === ASYNC_PACKAGE_NAME
      })
      if (!isAsyncImported) {
        ast.program.body.unshift(
          t.importDeclaration([], t.stringLiteral(ASYNC_PACKAGE_NAME))
        )
      }
    },
    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 (
            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)
              }
            }
          }
        }
      }
    },
    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))
        )
      }
      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'))
            )
          }
        })
      }
      path.traverse({
        ImportDefaultSpecifier (path) {
          const name = path.node.local.name
          DEFAULT_Component_SET.has(name) || names.push(name)
        },
        ImportSpecifier (path) {
          const name = path.node.local.name
          DEFAULT_Component_SET.has(name) || names.push(name)
        }
      })
      componentSourceMap.set(source, names)
    }
  })
  const storeBinding = mainClass.scope.getBinding(storeName)
  if (storeBinding) {
    const statementPath = storeBinding.path.getStatementParent()
    if (statementPath) {
      ast.program.body.forEach((node, index, body) => {
        if (node === statementPath.node) {
          body.splice(index + 1, 0, t.expressionStatement(
            t.callExpression(t.identifier('setStore'), [
              t.identifier(storeName)
            ])
          ))
        }
      })
    }
  }
  if (options.isApp) {
    renderMethod.remove()
    return { ast } as TransformResult
  }
  result = new Transformer(mainClass, options.isRoot, componentSourceMap, options.path).result
  result.code = generate(ast).code
  result.ast = ast
  result.template = prettyPrint(result.template)
  result.imageSrcs = Array.from(imageSource)
  return result
}

//.........这里部分代码省略.........
            }
          }
        }

        // @TODO: bind 的处理待定
      }
    },
    ImportDeclaration (path) {
      const source = path.node.source.value
      if (importSources.has(source)) {
        throw codeFrameError(path.node, '无法在同一文件重复 import 相同的包。')
      } else {
        importSources.add(source)
      }
      const names: string[] = []
      if (source === TARO_PACKAGE_NAME) {
        isImportTaro = true
        path.node.specifiers.push(
          t.importSpecifier(t.identifier(INTERNAL_SAFE_GET), t.identifier(INTERNAL_SAFE_GET)),
          t.importSpecifier(t.identifier(INTERNAL_GET_ORIGNAL), t.identifier(INTERNAL_GET_ORIGNAL)),
          t.importSpecifier(t.identifier(INTERNAL_INLINE_STYLE), t.identifier(INTERNAL_INLINE_STYLE))
        )
      }
      if (
        source === REDUX_PACKAGE_NAME || source === MOBX_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'))
            )
          }
        })
      }
      path.traverse({
        ImportDefaultSpecifier (path) {
          const name = path.node.local.name
          DEFAULT_Component_SET.has(name) || names.push(name)
        },
        ImportSpecifier (path) {
          const name = path.node.imported.name
          DEFAULT_Component_SET.has(name) || names.push(name)
          if (source === TARO_PACKAGE_NAME && name === 'Component') {
            path.node.local = t.identifier('__BaseComponent')
          }
        }
      })
      componentSourceMap.set(source, names)
    }
  })

  if (!isImportTaro) {
    ast.program.body.unshift(
      t.importDeclaration([
        t.importDefaultSpecifier(t.identifier('Taro')),
        t.importSpecifier(t.identifier(INTERNAL_SAFE_GET), t.identifier(INTERNAL_SAFE_GET)),
        t.importSpecifier(t.identifier(INTERNAL_GET_ORIGNAL), t.identifier(INTERNAL_GET_ORIGNAL)),
        t.importSpecifier(t.identifier(INTERNAL_INLINE_STYLE), t.identifier(INTERNAL_INLINE_STYLE))
      ], t.stringLiteral('@tarojs/taro'))
    )
  }

  if (!mainClass) {
    throw new Error('未找到 Taro.Component 的类定义')
  }

  mainClass.node.body.body.forEach(handleThirdPartyComponent)
  const storeBinding = mainClass.scope.getBinding(storeName)
  mainClass.scope.rename('Component', '__BaseComponent')
  if (storeBinding) {
    const statementPath = storeBinding.path.getStatementParent()
    if (statementPath) {
      ast.program.body.forEach((node, index, body) => {
        if (node === statementPath.node) {
          body.splice(index + 1, 0, t.expressionStatement(
            t.callExpression(t.identifier('setStore'), [
              t.identifier(storeName)
            ])
          ))
        }
      })
    }
  }
  resetTSClassProperty(mainClass.node.body.body)
  if (options.isApp) {
    renderMethod.replaceWith(
      t.classMethod('method', t.identifier('_createData'), [], t.blockStatement([]))
    )
    return { ast } as TransformResult
  }
  result = new Transformer(mainClass, options.sourcePath, componentProperies).result
  result.code = generate(ast).code
  result.ast = ast
  result.template = prettyPrint(result.template, {
    max_char: 0
  })
  result.imageSrcs = Array.from(imageSource)
  return result
}