feat(compiler-sfc): transform asset url (#500)

packages/compiler-core/src/ast.ts

@@ -11,6 +11,7 @@ import {
   FRAGMENT
 } from './runtimeHelpers'
 import { PropsExpression } from './transforms/transformElement'
+import { ImportsOption } from './transform'
 
 // Vue template is a platform-agnostic superset of HTML (syntax only).
 // More namespaces like SVG and MathML are declared by platform specific
@@ -94,6 +95,7 @@ export interface RootNode extends Node {
   components: string[]
   directives: string[]
   hoists: JSChildNode[]
+  imports: ImportsOption[]
   cached: number
   codegenNode: TemplateChildNode | JSChildNode | undefined
 }

packages/compiler-core/src/codegen.ts

@@ -38,6 +38,7 @@ import {
   CREATE_COMMENT,
   CREATE_TEXT
 } from './runtimeHelpers'
+import { ImportsOption } from './transform'
 
 type CodegenNode = TemplateChildNode | JSChildNode
 
@@ -229,6 +230,10 @@ export function generate(
     if (hasHelpers) {
       push(`import { ${ast.helpers.map(helper).join(', ')} } from "vue"\n`)
     }
+    if (ast.imports.length) {
+      genImports(ast.imports, context)
+      newline()
+    }
     genHoists(ast.hoists, context)
     newline()
     push(`export default `)
@@ -327,6 +332,18 @@ function genHoists(hoists: JSChildNode[], context: CodegenContext) {
   })
 }
 
+function genImports(importsOptions: ImportsOption[], context: CodegenContext) {
+  if (!importsOptions.length) {
+    return
+  }
+  importsOptions.forEach(imports => {
+    context.push(`import `)
+    genNode(imports.exp, context)
+    context.push(` from '${imports.path}'`)
+    context.newline()
+  })
+}
+
 function isText(n: string | CodegenNode) {
   return (
     isString(n) ||

packages/compiler-core/src/parse.ts

@@ -103,6 +103,7 @@ export function parse(content: string, options: ParserOptions = {}): RootNode {
     components: [],
     directives: [],
     hoists: [],
+    imports: [],
     cached: 0,
     codegenNode: undefined,
     loc: getSelection(context, start)

packages/compiler-core/src/transform.ts

@@ -75,12 +75,18 @@ export interface TransformOptions {
   onError?: (error: CompilerError) => void
 }
 
+export interface ImportsOption {
+  exp: string | ExpressionNode
+  path: string
+}
+
 export interface TransformContext extends Required<TransformOptions> {
   root: RootNode
   helpers: Set<symbol>
   components: Set<string>
   directives: Set<string>
   hoists: JSChildNode[]
+  imports: Set<ImportsOption>
   cached: number
   identifiers: { [name: string]: number | undefined }
   scopes: {
@@ -121,6 +127,7 @@ function createTransformContext(
     components: new Set(),
     directives: new Set(),
     hoists: [],
+    imports: new Set(),
     cached: 0,
     identifiers: {},
     scopes: {
@@ -296,6 +303,7 @@ function finalizeRoot(root: RootNode, context: TransformContext) {
   root.helpers = [...context.helpers]
   root.components = [...context.components]
   root.directives = [...context.directives]
+  root.imports = [...context.imports]
   root.hoists = context.hoists
   root.cached = context.cached
 }