feat(compiler): add withFallback option to compile components to createComponentWithFallback

Author: zhiyuanzmj

packages/compiler/src/compile.ts

@@ -6,6 +6,7 @@ import {
   transform,
   type DirectiveTransform,
   type NodeTransform,
+  type TransformOptions,
 } from './transform'
 import { transformChildren } from './transforms/transformChildren'
 import { transformElement } from './transforms/transformElement'
@@ -84,10 +85,8 @@ export function compile(
   return generate(ir, resolvedOptions)
 }
 
-export type CompilerOptions = HackOptions<BaseCompilerOptions> & {
-  source?: string
-  templates?: string[]
-}
+export type CompilerOptions = HackOptions<BaseCompilerOptions> &
+  TransformOptions
 export type TransformPreset = [
   NodeTransform[],
   Record<string, DirectiveTransform>,

packages/compiler/src/transform.ts

@@ -60,9 +60,16 @@ export type StructuralDirectiveTransform = (
 ) => void | (() => void)
 
 export type TransformOptions = HackOptions<BaseTransformOptions> & {
+  source?: string
   templates?: string[]
+  /**
+   * Compile JSX Component to createComponentWithFallback.
+   * @default false
+   */
+  withFallback?: boolean
 }
 const defaultOptions = {
+  source: '',
   filename: '',
   hoistStatic: false,
   hmr: false,
@@ -80,6 +87,7 @@ const defaultOptions = {
   inSSR: false,
   ssrCssVars: ``,
   isTS: false,
+  withFallback: false,
   onError: defaultOnError,
   onWarn: defaultOnWarn,
 }

packages/compiler/src/transforms/transformElement.ts

@@ -87,21 +87,20 @@ function transformComponentElement(
   singleRoot: boolean,
   context: TransformContext<JSXElement>,
 ) {
-  let asset = true
+  let asset = context.options.withFallback
 
-  const fromSetup = tag
-  if (fromSetup) {
-    tag = fromSetup
-    asset = false
-  }
   const dotIndex = tag.indexOf('.')
   if (dotIndex > 0) {
     const ns = tag.slice(0, dotIndex)
     if (ns) {
       tag = ns + tag.slice(dotIndex)
-      asset = false
     }
   }
+
+  if (tag.includes('-')) {
+    asset = true
+  }
+
   if (asset) {
     context.component.add(tag)
   }

packages/compiler/test/transforms/__snapshots__/transformElement.spec.ts.snap

@@ -7,6 +7,14 @@ exports[`compiler: element transform > Fragment should not mark as single root 1
 "
 `;
 
+exports[`compiler: element transform > component with fallback 1`] = `
+"
+  const _component_foo_bar = _resolveComponent("foo-bar")
+  const n0 = _createComponentWithFallback(_component_foo_bar, null, null, true)
+  return n0
+"
+`;
+
 exports[`compiler: element transform > generate single root component 1`] = `
 "
   const n0 = _createComponent(Comp, null, null, true)

packages/compiler/test/transforms/transformElement.spec.ts

@@ -81,4 +81,12 @@ describe('compiler: element transform', () => {
     expect(code).toMatchSnapshot()
     expect(code).contains('_createComponent(Comp)')
   })
+
+  test('component with fallback', () => {
+    const { code } = compileWithElementTransform(`<foo-bar />`)
+    expect(code).toMatchSnapshot()
+    expect(code).contains(
+      '_createComponentWithFallback(_component_foo_bar, null, null, true)',
+    )
+  })
 })