feat(transformer): 支持 style 传入对象

NervJS · Jul 9, 2018 · d0be191 · d0be191
1 parent 18a6dfd
commit d0be191
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/packages/taro-transformer-wx/__tests__/component.spec.ts b/packages/taro-transformer-wx/__tests__/component.spec.ts
@@ -40,9 +40,9 @@ describe('$props', () => {
   })
 })
 
-describe('$components', () => {
+describe.only('$components', () => {
   test('$components 一直存在并且是一个 Object', () => {
-    const { ast } = transform({
+    const { ast, code } = transform({
       ...baseOptions,
       code: buildComponent(baseCode)
     })

diff --git a/packages/taro-transformer-wx/src/constant.ts b/packages/taro-transformer-wx/src/constant.ts
@@ -76,6 +76,8 @@ export const MAP_CALL_ITERATOR = '__item'
 
 export const INTERNAL_DYNAMIC = 'internal_dynamic_recursive'
 
+export const INTERNAL_INLINE_OBJECT = 'internal_inline_object'
+
 export const LOOP_STATE = '$loopState'
 
 export const LOOP_CALLEE = '$anonymousCallee_'

diff --git a/packages/taro-transformer-wx/src/index.ts b/packages/taro-transformer-wx/src/index.ts
@@ -4,7 +4,7 @@ import { Transformer } from './class'
 import { prettyPrint } from 'html'
 import { setting } from './utils'
 import * as t from 'babel-types'
-import { DEFAULT_Component_SET, INTERNAL_SAFE_GET, TARO_PACKAGE_NAME, ASYNC_PACKAGE_NAME, REDUX_PACKAGE_NAME, INTERNAL_DYNAMIC, IMAGE_COMPONENTS } from './constant'
+import { DEFAULT_Component_SET, INTERNAL_SAFE_GET, TARO_PACKAGE_NAME, ASYNC_PACKAGE_NAME, REDUX_PACKAGE_NAME, INTERNAL_DYNAMIC, IMAGE_COMPONENTS, INTERNAL_INLINE_OBJECT } from './constant'
 import { transform as parse } from 'babel-core'
 import { transform as babel7Transform } from '@babel/core'
 
@@ -154,13 +154,29 @@ export default function transform (options: Options): TransformResult {
         }
       }
     },
+    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_OBJECT), [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_DYNAMIC), t.identifier(INTERNAL_DYNAMIC)),
+          t.importSpecifier(t.identifier(INTERNAL_INLINE_OBJECT), t.identifier(INTERNAL_INLINE_OBJECT))
         )
       }
       if (