feat(compiler-vapor): handle asset imports

packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap

@@ -1,5 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`compile > asset imports > from public directory 1`] = `
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
+import _imports_0 from '/vite.svg';
+const t0 = _template("<img class=\\"logo\\" alt=\\"Vite logo\\">", true)
+
+export function render(_ctx) {
+  const n0 = t0()
+  _renderEffect(() => _setProp(n0, "src", _imports_0))
+  return n0
+}"
+`;
+
 exports[`compile > bindings 1`] = `
 "import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div> </div>", true)

packages/compiler-vapor/__tests__/compile.spec.ts

@@ -1,5 +1,6 @@
 import { BindingTypes, type RootNode } from '@vue/compiler-dom'
 import { type CompilerOptions, compile as _compile } from '../src'
+import { compileTemplate } from '@vue/compiler-sfc'
 
 // TODO This is a temporary test case for initial implementation.
 // Remove it once we have more comprehensive tests.
@@ -262,4 +263,28 @@ describe('compile', () => {
       )
     })
   })
+
+  describe('asset imports', () => {
+    const compileWithAssets = (template: string) => {
+      const { code } = compileTemplate({
+        vapor: true,
+        id: 'test',
+        filename: 'test.vue',
+        source: template,
+        transformAssetUrls: {
+          base: 'foo/',
+          includeAbsolute: true,
+        },
+      })
+      return code
+    }
+
+    test('from public directory', () => {
+      const code = compileWithAssets(
+        `<img src="/vite.svg" class="logo" alt="Vite logo" />`,
+      )
+      expect(code).matchSnapshot()
+      expect(code).contains(`import _imports_0 from '/vite.svg';`)
+    })
+  })
 })

packages/compiler-vapor/src/generate.ts

@@ -138,7 +138,7 @@ export function generate(
 
   const delegates = genDelegates(context)
   const templates = genTemplates(ir.template, ir.rootTemplateIndex, context)
-  const imports = genHelperImports(context)
+  const imports = genHelperImports(context) + genAssetImports(context)
   const preamble = imports + templates + delegates
 
   const newlineCount = [...preamble].filter(c => c === '\n').length
@@ -178,3 +178,14 @@ function genHelperImports({ helpers, helper, options }: CodegenContext) {
   }
   return imports
 }
+
+function genAssetImports({ ir, helper, options }: CodegenContext) {
+  const assetImports = ir.node.imports
+  let imports = ''
+  for (const assetImport of assetImports) {
+    const exp = assetImport.exp as SimpleExpressionNode
+    const name = exp.content
+    imports += `import ${name} from '${assetImport.path}';\n`
+  }
+  return imports
+}

packages/compiler-vapor/src/generators/expression.ts

@@ -29,6 +29,9 @@ export function genExpression(
   assignment?: string,
 ): CodeFragment[] {
   const { content, ast, isStatic, loc } = node
+  const imports = context.ir.node.imports.map(
+    i => (i.exp as SimpleExpressionNode).content || i.exp,
+  )
 
   if (isStatic) {
     return [[JSON.stringify(content), NewlineType.None, loc]]
@@ -44,7 +47,7 @@ export function genExpression(
   }
 
   // the expression is a simple identifier
-  if (ast === null) {
+  if (ast === null || imports.includes(content)) {
     return genIdentifier(content, context, loc, assignment)
   }
 
@@ -129,6 +132,13 @@ function genIdentifier(
   const { options, helper, identifiers } = context
   const { inline, bindingMetadata } = options
   let name: string | undefined = raw
+  const imports = context.ir.node.imports.map(
+    i => (i.exp as SimpleExpressionNode).content || i.exp,
+  )
+
+  if (imports.includes(raw)) {
+    return [[raw, NewlineType.None, loc]]
+  }
 
   const idMap = identifiers[raw]
   if (idMap && idMap.length) {
@@ -249,6 +259,15 @@ export function processExpressions(
   expressions: SimpleExpressionNode[],
   shouldDeclare: boolean,
 ): DeclarationResult {
+  // filter out asset import expressions
+  const imports = context.ir.node.imports
+  const importVariables = imports.map(
+    i => (i.exp as SimpleExpressionNode).content,
+  )
+  expressions = expressions.filter(
+    exp => !importVariables.includes(exp.content),
+  )
+
   // analyze variables
   const {
     seenVariable,

packages/compiler-vapor/src/transform.ts

@@ -5,6 +5,7 @@ import {
   type CompilerCompatOptions,
   type ElementNode,
   ElementTypes,
+  type ExpressionNode,
   NodeTypes,
   type RootNode,
   type SimpleExpressionNode,
@@ -60,6 +61,10 @@ export type StructuralDirectiveTransform = (
 ) => void | (() => void)
 
 export type TransformOptions = HackOptions<BaseTransformOptions>
+export interface ImportItem {
+  exp: string | ExpressionNode
+  path: string
+}
 
 export class TransformContext<T extends AllNode = AllNode> {
   selfName: string | null = null
@@ -75,6 +80,7 @@ export class TransformContext<T extends AllNode = AllNode> {
   template: string = ''
   childrenTemplate: (string | null)[] = []
   dynamic: IRDynamicInfo = this.ir.block.dynamic
+  imports: ImportItem[] = []
 
   inVOnce: boolean = false
   inVFor: number = 0
@@ -225,6 +231,8 @@ export function transform(
 
   transformNode(context)
 
+  ir.node.imports = context.imports
+
   return ir
 }