wip(mp): support global registration

packages/uni-cli-shared/__tests__/transformImports.spec.ts

@@ -2,7 +2,7 @@ import path from 'path'
 import { ResolvedId } from 'rollup'
 import { transformVueComponentImports } from '../src/mp/transformImports'
 const root = '/usr/xxx/projects/test/src'
-const importer = '/usr/xxx/projects/test/src/pages/index/index.vue'
+
 async function resolve(id: string, importer?: string) {
   return {
     id: importer ? path.resolve(path.dirname(importer), id) : id,
@@ -14,6 +14,46 @@ function dynamicImport(name: string, source: string) {
 }
 
 describe('transformVueComponentImports', () => {
+  describe('global', () => {
+    const importer = '/usr/xxx/projects/test/src/main.js'
+    test(`basic`, async () => {
+      const source = `
+import { createSSRApp } from 'vue'
+import ComponentA from './components/component-a.vue'
+import ComponentB from './components/component-b.vue'
+export function createApp() {
+  const app = createSSRApp(App)
+  app.component('component-a',ComponentA)
+  app.component('component-b',ComponentB)
+  return {
+    app
+  }
+}
+`
+      const { code, usingComponents } = await transformVueComponentImports(
+        source,
+        importer,
+        {
+          root,
+          global: true,
+          resolve,
+          dynamicImport,
+        }
+      )
+      expect(code).toContain(
+        `const ComponentA = ()=>import('${root}/components/component-a.vue')`
+      )
+      expect(code).toContain(
+        `const ComponentB = ()=>import('${root}/components/component-b.vue')`
+      )
+      expect(usingComponents).toMatchObject({
+        'component-a': '/components/component-a',
+        'component-b': '/components/component-b',
+      })
+    })
+  })
+  describe('local', () => {
+    const importer = '/usr/xxx/projects/test/src/pages/index/index.vue'
     test(`basic`, async () => {
       const source = `import test1 from "${root}/components/test1.vue";
       const _sfc_main = {
@@ -28,7 +68,7 @@ describe('transformVueComponentImports', () => {
       import "${importer}?vue&type=style&index=0&lang.css";
       import _export_sfc from "plugin-vue:export-helper";
       export default /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-`
+  `
       const { code, usingComponents } = await transformVueComponentImports(
         source,
         importer,
@@ -64,7 +104,7 @@ describe('transformVueComponentImports', () => {
       import "${root}/pages/index/index.vue?vue&type=style&index=0&lang.css";
       import _export_sfc from "plugin-vue:export-helper";
       export default /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-`
+  `
       const { code, usingComponents } = await transformVueComponentImports(
         source,
         importer,
@@ -100,7 +140,7 @@ describe('transformVueComponentImports', () => {
       import "${root}/pages/index/index.vue?vue&type=style&index=0&lang.css";
       import _export_sfc from "plugin-vue:export-helper";
       export default /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-`
+  `
       const { code, usingComponents } = await transformVueComponentImports(
         source,
         importer,
@@ -136,7 +176,7 @@ describe('transformVueComponentImports', () => {
       });
       import "${root}/pages/index/index.vue?vue&type=style&index=0&lang.css";
       export default _sfc_main;
-`
+  `
       const { code, usingComponents } = await transformVueComponentImports(
         source,
         importer,
@@ -172,7 +212,7 @@ describe('transformVueComponentImports', () => {
       });
       import "${root}/pages/index/index.vue?vue&type=style&index=0&lang.css";
       export default _sfc_main;
-`
+  `
       const { code, usingComponents } = await transformVueComponentImports(
         source,
         importer,
@@ -191,4 +231,5 @@ describe('transformVueComponentImports', () => {
         'my-component-name': '/components/test1',
       })
     })
+  })
 })

packages/uni-cli-shared/src/messages/index.ts

@@ -18,4 +18,6 @@ export const M = {
   'i18n.fallbackLocale.missing':
     '当前应用配置的 fallbackLocale 或 locale 为：{locale}，但 locale 目录缺少该语言文件',
   'easycom.conflict': 'easycom组件冲突：',
+  'mp.component.args[0]': '{0}的第一个参数必须为静态字符串',
+  'mp.component.args[1]': '{0}需要两个参数',
 }

packages/uni-cli-shared/src/mp/transformImports.ts

 import { parse, ParserPlugin } from '@babel/parser'
 import {
   ImportDeclaration,
+  isCallExpression,
   isIdentifier,
   isImportDeclaration,
+  isMemberExpression,
   isObjectExpression,
   isObjectProperty,
   isStringLiteral,
@@ -16,11 +18,13 @@ import { camelize, capitalize, hyphenate } from '@vue/shared'
 import { walk } from 'estree-walker'
 import MagicString from 'magic-string'
 import { PluginContext } from 'rollup'
+import { M } from '../messages'
 import { BINDING_COMPONENTS } from '../constants'
 import { normalizeMiniProgramFilename, removeExt } from '../utils'
 
 interface TransformVueComponentImportsOptions {
   root: string
+  global?: boolean
   resolve: PluginContext['resolve']
   dynamicImport: (name: string, source: string) => string
   babelParserPlugins?: ParserPlugin[]
@@ -31,6 +35,7 @@ export async function transformVueComponentImports(
   {
     root,
     resolve,
+    global,
     dynamicImport,
     babelParserPlugins,
   }: TransformVueComponentImportsOptions
@@ -38,7 +43,7 @@ export async function transformVueComponentImports(
   code: string
   usingComponents: Record<string, string>
 }> {
-  if (!code.includes(BINDING_COMPONENTS)) {
+  if (!global && !code.includes(BINDING_COMPONENTS)) {
     return { code, usingComponents: {} }
   }
   const s = new MagicString(code)
@@ -49,7 +54,9 @@ export async function transformVueComponentImports(
 
   const imports = findVueComponentImports(
     scriptAst.body,
-    parseComponents(scriptAst, findBindingComponents(scriptAst.body))
+    global
+      ? parseGlobalComponents(scriptAst)
+      : parseComponents(scriptAst, findBindingComponents(scriptAst.body))
   )
   const usingComponents: Record<string, string> = {}
   for (let i = 0; i < imports.length; i++) {
@@ -116,6 +123,47 @@ function findBindingComponents(ast: Statement[]): BindingComponents {
   }
   return {}
 }
+/**
+ * 查找全局组件定义：app.component('component-a',{})
+ * @param ast
+ * @returns
+ */
+function parseGlobalComponents(ast: Program) {
+  const bindingComponents: BindingComponents = {}
+  ;(walk as any)(ast, {
+    enter(child: Node) {
+      if (!isCallExpression(child)) {
+        return
+      }
+      const { callee } = child
+      // .component
+      if (
+        !isMemberExpression(callee) ||
+        !isIdentifier(callee.property) ||
+        callee.property.name !== 'component'
+      ) {
+        return
+      }
+      // .component('component-a',{})
+      const args = child.arguments
+      if (args.length !== 2) {
+        return
+      }
+      const [name, value] = args
+      if (!isStringLiteral(name)) {
+        return console.warn(M['mp.component.args[0]'])
+      }
+      if (!isIdentifier(value)) {
+        return console.warn(M['mp.component.args[1]'])
+      }
+      bindingComponents[value.name] = {
+        tag: name.value,
+        type: 'unknown',
+      }
+    },
+  })
+  return bindingComponents
+}
 /**
  * 从 components 中查找定义的组件，修改 bindingComponents
  * @param ast

packages/uni-mp-compiler/__tests__/test.spec.ts

@@ -13,6 +13,9 @@ function assert(
     filename: 'foo.vue',
     prefixIdentifiers: true,
     inline: true,
+    generatorOpts: {
+      concise: true,
+    },
     miniProgram: {
       slot: {
         fallback: false,

packages/uni-mp-compiler/__tests__/testUtils.ts

@@ -26,6 +26,9 @@ export function assert(
     inline: true,
     isNativeTag,
     isCustomElement,
+    generatorOpts: {
+      concise: true,
+    },
     miniProgram: {
       slot: {
         fallback: false,

packages/uni-mp-compiler/__tests__/transformElement.spec.ts

@@ -16,7 +16,12 @@ function parseWithElementTransform(
   root: RootNode
   node: ElementNode
 } {
-  const { ast, code, preamble } = compile(`<div>${template}</div>`, options)
+  const { ast, code, preamble } = compile(`<div>${template}</div>`, {
+    generatorOpts: {
+      concise: true,
+    },
+    ...options,
+  })
   const node = (ast as any).children[0].children[0]
   return {
     code,
@@ -32,10 +37,14 @@ describe('compiler: element transform', () => {
       source: `<image src="/static/logo.png"/>`,
       filename: 'foo.vue',
       id: 'foo',
+
       compiler: MPCompiler as unknown as TemplateCompiler,
       compilerOptions: {
         mode: 'module',
+        generatorOpts: {
+          concise: true,
         },
+      } as any,
       transformAssetUrls: {
         includeAbsolute: true,
         ...(createUniVueTransformAssetUrls('/') as Record<string, any>),

packages/uni-mp-compiler/__tests__/vBind.spec.ts

@@ -5,7 +5,12 @@ import { CompilerOptions } from '../src/options'
 import { assert, miniProgram } from './testUtils'
 
 function parseWithVBind(template: string, options: CompilerOptions = {}) {
-  const { ast, code } = compile(template, options)
+  const { ast, code } = compile(template, {
+    generatorOpts: {
+      concise: true,
+    },
+    ...options,
+  })
   return {
     code,
     node: ast.children[0] as ElementNode,

packages/uni-mp-compiler/__tests__/vFor.spec.ts

@@ -14,7 +14,12 @@ function parseWithForTransform(
   template: string,
   options: CompilerOptions = {}
 ) {
-  const { ast } = compile(template, options)
+  const { ast } = compile(template, {
+    generatorOpts: {
+      concise: true,
+    },
+    ...options,
+  })
 
   return {
     root: ast,

packages/uni-mp-compiler/__tests__/vIf.spec.ts

@@ -9,7 +9,12 @@ function compileWithIfTransform(
   returnIndex: number = 0,
   childrenLen: number = 1
 ) {
-  const { ast } = compile(template, options)
+  const { ast } = compile(template, {
+    generatorOpts: {
+      concise: true,
+    },
+    ...options,
+  })
   if (!options.onError) {
     expect(ast.children.length).toBe(childrenLen)
     for (let i = 0; i < childrenLen; i++) {

packages/uni-mp-compiler/__tests__/vOn.mp.spec.ts

@@ -5,7 +5,12 @@ import { CompilerOptions } from '../src/options'
 import { assert } from './testUtils'
 
 function parseWithVOn(template: string, options: CompilerOptions = {}) {
-  const { ast } = compile(template, options)
+  const { ast } = compile(template, {
+    generatorOpts: {
+      concise: true,
+    },
+    ...options,
+  })
   return {
     root: ast,
     node: ast.children[0] as ElementNode,

packages/uni-mp-compiler/__tests__/vOn.spec.ts

@@ -4,7 +4,12 @@ import { CompilerOptions } from '../src/options'
 import { assert } from './testUtils'
 
 function parseWithVOn(template: string, options: CompilerOptions = {}) {
-  const { ast } = compile(template, options)
+  const { ast } = compile(template, {
+    generatorOpts: {
+      concise: true,
+    },
+    ...options,
+  })
   return {
     root: ast,
     node: ast.children[0] as ElementNode,

packages/uni-mp-compiler/src/ast.ts

@@ -94,7 +94,9 @@ export function parseExpr(
     code = genExpr(code)
   }
   try {
-    return parseExpression(code)
+    return parseExpression(code, {
+      plugins: context.expressionPlugins,
+    })
   } catch (e: any) {
     context.onError(
       createCompilerError(

packages/uni-mp-compiler/src/codegen.ts

-import { isString, isSymbol } from '@vue/shared'
+import { isString, isSymbol, hasOwn } from '@vue/shared'
 import {
   CodegenResult,
   CompoundExpressionNode,
@@ -11,7 +11,7 @@ import {
   TO_DISPLAY_STRING,
 } from '@vue/compiler-core'
 import { Expression } from '@babel/types'
-import { default as babelGenerate } from '@babel/generator'
+import { default as babelGenerate, GeneratorOptions } from '@babel/generator'
 import { addImportDeclaration, matchEasycom } from '@dcloudio/uni-cli-shared'
 import { CodegenOptions, CodegenRootNode } from './options'
 
@@ -88,7 +88,7 @@ export function generate(
   }
 
   push(`return `)
-  push(genBabelExpr(ast.renderData))
+  push(genBabelExpr(ast.renderData, options.generatorOpts))
   if (useWithBlock) {
     deindent()
     push(`}`)
@@ -283,13 +283,12 @@ function createGenNodeContext() {
   return context
 }
 
-export function genBabelExpr(expr: Expression) {
-  return babelGenerate(expr, {
-    concise: true,
-    jsescOption: {
-      quotes: 'single',
-    },
-  }).code
+export function genBabelExpr(expr: Expression, opts: GeneratorOptions = {}) {
+  if (!hasOwn(opts, 'jsescOption')) {
+    opts.jsescOption = {}
+  }
+  opts.jsescOption!.quotes = 'single'
+  return babelGenerate(expr, opts).code
 }
 
 export function genExpr(

packages/uni-mp-compiler/src/options.ts

 import { ParserPlugin } from '@babel/parser'
+import { GeneratorOptions } from '@babel/generator'
 import {
   CallExpression,
   Expression,
@@ -90,6 +91,7 @@ export interface CodegenOptions extends SharedTransformCodegenOptions {
   scopeId?: string | null
   runtimeModuleName?: string
   runtimeGlobalName?: string
+  generatorOpts?: GeneratorOptions
   miniProgram?: MiniProgramCompilerOptions
 }
 

packages/uni-mp-vite/src/index.ts

@@ -12,7 +12,11 @@ import { uniRenderjsPlugin } from './plugins/renderjs'
 export { UniMiniProgramPluginOptions } from './plugin'
 export default (options: UniMiniProgramPluginOptions) => {
   return [
-    uniMainJsPlugin(options),
+    (options: {
+      vueOptions?: { script?: Partial<SFCScriptCompileOptions> }
+    }) => {
+      return uniMainJsPlugin(options.vueOptions?.script)
+    },
     uniManifestJsonPlugin(options),
     uniPagesJsonPlugin(options),
     uniEntryPlugin(options),

packages/uni-mp-vite/src/plugins/mainJs.ts

-import { defineUniMainJsPlugin } from '@dcloudio/uni-cli-shared'
-import { UniMiniProgramPluginOptions } from '../plugin'
+import {
+  addMiniProgramUsingComponents,
+  defineUniMainJsPlugin,
+  transformVueComponentImports,
+} from '@dcloudio/uni-cli-shared'
+import { SFCScriptCompileOptions } from '@vue/compiler-sfc'
+import { dynamicImport } from './usingComponents'
 
-export function uniMainJsPlugin(options: UniMiniProgramPluginOptions) {
+export function uniMainJsPlugin(
+  options: Partial<SFCScriptCompileOptions> = {}
+) {
   return defineUniMainJsPlugin((opts) => {
     return {
       name: 'vite:uni-mp-main-js',
       enforce: 'pre',
-      transform(code, id) {
+      async transform(source, id) {
         if (opts.filter(id)) {
-          code = code.includes('createSSRApp')
-            ? createApp(code)
-            : createLegacyApp(code)
+          source = source.includes('createSSRApp')
+            ? createApp(source)
+            : createLegacyApp(source)
+
+          const inputDir = process.env.UNI_INPUT_DIR
+          const { code, usingComponents } = await transformVueComponentImports(
+            source,
+            id,
+            {
+              root: inputDir,
+              global: true,
+              resolve: this.resolve,
+              dynamicImport,
+              babelParserPlugins: options.babelParserPlugins,
+            }
+          )
+          addMiniProgramUsingComponents('app', usingComponents)
           return {
             code:
               `import 'plugin-vue:export-helper';import 'uni-mp-runtime';import './pages.json.js';` +

packages/uni-mp-vite/src/plugins/usingComponents.ts

@@ -49,6 +49,6 @@ export function uniUsingComponentsPlugin(
   }
 }
 
-function dynamicImport(name: string, value: string) {
+export function dynamicImport(name: string, value: string) {
   return `const ${name} = ()=>import('${virtualComponentPath(value)}')`
 }