fix: 解决App端局部组件props中的id会覆盖根节点id属性的问题 question/99900

packages/vue-cli-plugin-uni/packages/webpack-uni-app-loader/view/util.js

@@ -19,7 +19,8 @@ function parseComponents (content, traverse) {
     components: [],
     options: {
       name: null,
-      inheritAttrs: null
+      inheritAttrs: null,
+      props: null
     }
   })
   return {
@@ -30,4 +31,4 @@ function parseComponents (content, traverse) {
 
 module.exports = {
   parseComponents
-}
+}

packages/webpack-uni-mp-loader/__tests__/components.spec.js

@@ -22,6 +22,28 @@ function assertCodegen (content, expectedComponents, isScoped = true) {
   expect(JSON.stringify(components)).toBe(JSON.stringify(expectedComponents))
 }
 
+function assertCodegenOptions (content, expectedOptions, isScoped = true) {
+  const {
+    state: {
+      options
+    }
+  } = (isScoped ? scopedComponentTraverse : globalComponentTraverse)(parser.parse(content, {
+    sourceType: 'module',
+    plugins: [
+      'typescript'
+    ]
+  }), {
+    components: [],
+    options: {
+      name: null,
+      inheritAttrs: null,
+      props: null
+    }
+  })
+
+  expect(JSON.stringify(options)).toBe(JSON.stringify(expectedOptions))
+}
+
 describe('mp:loader', () => {
   it('parse scoped component', () => {
     assertCodegen(
@@ -153,6 +175,46 @@ global['__wxVueOptions'] = {
           source: '@/components/my-button/my-button.vue'
         }
       ])
+
+    assertCodegenOptions(
+      `export default {
+        name: 'test'
+      }`,
+      {
+        name: '"test"',
+        inheritAttrs: null,
+        props: null
+      }
+    )
+
+    assertCodegenOptions(
+      `export default {
+        props: ['id', 'test']
+      }`,
+      {
+        name: null,
+        inheritAttrs: null,
+        props: '["id","test"]'
+      }
+    )
+
+    assertCodegenOptions(
+      `export default {
+        props: {
+          id: {
+            type: String
+          },
+          'test': {
+            type: String
+          }
+        }
+      }`,
+      {
+        name: null,
+        inheritAttrs: null,
+        props: '["id","test"]'
+      }
+    )
   })
 
   it('parse global component', () => {

packages/webpack-uni-mp-loader/lib/babel/scoped-component-traverse.js

@@ -6,7 +6,7 @@ const {
 } = require('./util')
 
 function handleObjectExpression (declaration, path, state) {
-  if (state.options) { // name,inheritAttrs
+  if (state.options) { // name,inheritAttrs,props
     Object.keys(state.options).forEach(name => {
       const optionProperty = declaration.properties.filter(prop => {
         return t.isObjectProperty(prop) &&
@@ -14,7 +14,21 @@ function handleObjectExpression (declaration, path, state) {
           prop.key.name === name
       })[0]
       if (optionProperty) {
-        if (t.isStringLiteral(optionProperty.value)) {
+        if (name === 'props') {
+          if (t.isArrayExpression(optionProperty.value)) {
+            state.options[name] = JSON.stringify(optionProperty.value.elements.filter(element => t.isStringLiteral(element)).map(({ value }) => value))
+          } else if (t.isObjectExpression(optionProperty.value)) {
+            const props = []
+            optionProperty.value.properties.forEach(({ key }) => {
+              if (t.isIdentifier(key)) {
+                props.push(key.name)
+              } else if (t.isStringLiteral(key)) {
+                props.push(key.value)
+              }
+            })
+            state.options[name] = JSON.stringify(props)
+          }
+        } else if (t.isStringLiteral(optionProperty.value)) {
           state.options[name] = JSON.stringify(optionProperty.value.value)
         } else {
           state.options[name] = optionProperty.value.value