1
2
3
4
5
6

<script setup>
      import { ref } from 'vue'
      defineProps(['foo'])
      defineEmits(['bar'])
      const r = ref(0)
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<script>
import { ref } from 'vue'
export default {
    props: {
        foo: any 
    },
    emits: ['bar'],
    setup(props, ctx) {
      const r = ref(0)
      return {
          r
      }
    }
}
</script>

1

  const ctx = new ScriptCompileContext(sfc, options)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

class ScriptCompileContext{
    constructor(
    public descriptor: SFCDescriptor,
    public options: Partial<SFCScriptCompileOptions>
  ) {
	// ....
	// 判断是js还是ts
    // ...
    // resolve parser plugins
    const plugins: ParserPlugin[] = resolveParserPlugins(
      (scriptLang || scriptSetupLang)!,
      options.babelParserPlugins
    )
	
    // 获取ast
    function parse(input: string, offset: number): Program {
        return babelParse(input, {
          plugins,
          sourceType: 'module'
        }).program
      
    }
	
    this.scriptAst =
      descriptor.script &&
      parse(descriptor.script.content, descriptor.script.loc.start.offset)

    this.scriptSetupAst =
      descriptor.scriptSetup &&
      parse(descriptor.scriptSetup!.content, this.startOffset!)
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// 1.1 walk import delcarations of <script>
  if (scriptAst) {
    for (const node of scriptAst.body) {
      if (node.type === 'ImportDeclaration') {
        // record imports for dedupe
        for (const specifier of node.specifiers) {
          const imported = getImportedName(specifier)
          registerUserImport(
            node.source.value,
            specifier.local.name,
            imported,
            node.importKind === 'type' ||
              (specifier.type === 'ImportSpecifier' &&
                specifier.importKind === 'type'),
            false,
            !options.inlineTemplate
          )
        }
      }
    }
  }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

for (const node of scriptAst.body) {
      // 处理 export default
      if (node.type === 'ExportDefaultDeclaration') {
        // export default 代码
        defaultExport = node
		// .... code
          
      } else if (node.type === 'ExportNamedDeclaration') {
          // 处理 export const xxx 代码
          // .... code
      } else if (
        (node.type === 'VariableDeclaration' ||
          node.type === 'FunctionDeclaration' ||
          node.type === 'ClassDeclaration' ||
          node.type === 'TSEnumDeclaration') &&
        !node.declare
      ) {
        // 处理变量定义、函数定义、class定义，ts 枚举定义
        // ....code
      }
    }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// apply reactivity transform
// TODO remove in 3.4
if (enableReactivityTransform && shouldTransform(script.content)) {
  const { rootRefs, importedHelpers } = transformAST(
    scriptAst,
    ctx.s,
    scriptStartOffset!
  )
  refBindings = rootRefs
  for (const h of importedHelpers) {
    ctx.helperImports.add(h)
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// <script> after <script setup>
// we need to move the block up so that `const __default__` is
// declared before being used in the actual component definition
if (scriptStartOffset! > startOffset) {
  // if content doesn't end with newline, add one
  if (!/\n$/.test(script.content.trim())) {
    ctx.s.appendLeft(scriptEndOffset!, `\n`)
  }
  ctx.s.move(scriptStartOffset!, scriptEndOffset!, 0)
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

for (const node of scriptSetupAst.body) {
  // 处理表达式定义
    if (node.type === 'ExpressionStatement') {
      /**
       * 包括 defineProps
       * defineEmits
       * defineOptions
       * defineSlots
       * defineModel
       */
      // ...code
    }

    // 处理变量定义
    if (node.type === 'VariableDeclaration' && !node.declare) {
      // ...code
    }

    let isAllLiteral = false
    // walk declarations to record declared bindings
    // 处理变量定义、函数定义、class定义，ts 枚举定义
    if (
      (node.type === 'VariableDeclaration' ||
        node.type === 'FunctionDeclaration' ||
        node.type === 'ClassDeclaration' ||
        node.type === 'TSEnumDeclaration') &&
      !node.declare
    ) {
      // ....
    }

    // hoist literal constants
    if (hoistStatic && isAllLiteral) {
      hoistNode(node)
    }

    // walk statements & named exports / variable declarations for top level
    // await
    if (
      (node.type === 'VariableDeclaration' && !node.declare) ||
      node.type.endsWith('Statement')
    ) {
      const scope: Statement[][] = [scriptSetupAst.body]
      // 递归节点
      ;(walk as any)(node, {
        enter(child: Node, parent: Node) {
          // 函数跳过
          if (isFunctionType(child)) {
            this.skip()
          }
          // 块级声明
          if (child.type === 'BlockStatement') {
            scope.push(child.body)
          }
          // await函数
          if (child.type === 'AwaitExpression') {
          //  处理await
            processAwait(
              // ...
            )
          }
        },
        exit(node: Node) {
          if (node.type === 'BlockStatement') scope.pop()
        }
      })
    }

    if (ctx.isTS) {
      // move all Type declarations to outer scope
      // 删除声明
      if (
        node.type.startsWith('TS') ||
        (node.type === 'ExportNamedDeclaration' &&
          node.exportKind === 'type') ||
        (node.type === 'VariableDeclaration' && node.declare)
      ) {
        if (node.type !== 'TSEnumDeclaration') {
          hoistNode(node)
        }
      }
    }
  }

1
2
3

 if (ctx.propsDestructureDecl) {
    transformDestructuredProps(ctx, vueImportAliases)
  }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

 if (
    enableReactivityTransform &&
    // normal <script> had ref bindings that maybe used in <script setup>
    (refBindings || shouldTransform(scriptSetup.content))
  ) {
    const { rootRefs, importedHelpers } = transformAST(
      scriptSetupAst,
      ctx.s,
      startOffset,
      refBindings
    )
    refBindings = refBindings ? [...refBindings, ...rootRefs] : rootRefs
    for (const h of importedHelpers) {
      ctx.helperImports.add(h)
    }
  }

1
2
3
4
5

  checkInvalidScopeReference(ctx.propsRuntimeDecl, DEFINE_PROPS)
  checkInvalidScopeReference(ctx.propsRuntimeDefaults, DEFINE_PROPS)
  checkInvalidScopeReference(ctx.propsDestructureDecl, DEFINE_PROPS)
  checkInvalidScopeReference(ctx.emitsRuntimeDecl, DEFINE_EMITS)
  checkInvalidScopeReference(ctx.optionsRuntimeDecl, DEFINE_OPTIONS)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

if (script) {
    if (startOffset < scriptStartOffset!) {
      // <script setup> before <script>
      ctx.s.remove(0, startOffset)
      ctx.s.remove(endOffset, scriptStartOffset!)
      ctx.s.remove(scriptEndOffset!, source.length)
    } else {
      // <script> before <script setup>
      ctx.s.remove(0, scriptStartOffset!)
      ctx.s.remove(scriptEndOffset!, startOffset)
      ctx.s.remove(endOffset, source.length)
    }
  } else {
    // only <script setup>
    ctx.s.remove(0, startOffset)
    ctx.s.remove(endOffset, source.length)
  }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

if (scriptAst) {
    Object.assign(ctx.bindingMetadata, analyzeScriptBindings(scriptAst.body))
  }
  for (const [key, { isType, imported, source }] of Object.entries(
    ctx.userImports
  )) {
    if (isType) continue
    ctx.bindingMetadata[key] =
      imported === '*' ||
      (imported === 'default' && source.endsWith('.vue')) ||
      source === 'vue'
        ? BindingTypes.SETUP_CONST
        : BindingTypes.SETUP_MAYBE_REF
  }
  for (const key in scriptBindings) {
    ctx.bindingMetadata[key] = scriptBindings[key]
  }
  for (const key in setupBindings) {
    ctx.bindingMetadata[key] = setupBindings[key]
  }
  // known ref bindings
  if (refBindings) {
    for (const key of refBindings) {
      ctx.bindingMetadata[key] = BindingTypes.SETUP_REF
    }
  }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

if (
    sfc.cssVars.length &&
    // no need to do this when targeting SSR
    !(options.inlineTemplate && options.templateOptions?.ssr)
  ) {
    ctx.helperImports.add(CSS_VARS_HELPER)
    ctx.helperImports.add('unref')
    ctx.s.prependLeft(
      startOffset,
      `\n${genCssVarsCode(
        sfc.cssVars,
        ctx.bindingMetadata,
        scopeId,
        !!options.isProd
      )}\n`
    )
  }

1
2
3
4
5
6
7

let args = `__props`
if (ctx.propsTypeDecl) {
    // mark as any and only cast on assignment
    // since the user defined complex types may be incompatible with the
    // inferred type from generated runtime declarations
    args += `: any`
}

1
2
3
4
5
6

  if (ctx.propsIdentifier) {
    ctx.s.prependLeft(
      startOffset,
      `\nconst ${ctx.propsIdentifier} = __props;\n`
    )
  }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

if (ctx.propsDestructureRestId) {
    ctx.s.prependLeft(
      startOffset,
      `\nconst ${ctx.propsDestructureRestId} = ${ctx.helper(
        `createPropsRestProxy`
      )}(__props, ${JSON.stringify(
        Object.keys(ctx.propsDestructuredBindings)
      )});\n`
    )
  }

1
2
3
4
5

  // inject temp variables for async context preservation
  if (hasAwait) {
    const any = ctx.isTS ? `: any` : ``
    ctx.s.prependLeft(startOffset, `\nlet __temp${any}, __restore${any}\n`)
  }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

  const destructureElements =
    ctx.hasDefineExposeCall || !options.inlineTemplate
      ? [`expose: __expose`]
      : []
  if (ctx.emitIdentifier) {
    destructureElements.push(
      ctx.emitIdentifier === `emit` ? `emit` : `emit: ${ctx.emitIdentifier}`
    )
  }
  if (destructureElements.length) {
    args += `, { ${destructureElements.join(', ')} }`
  }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

const allBindings: Record<string, any> = {
    ...scriptBindings,
    ...setupBindings
  }
  for (const key in ctx.userImports) {
    if (
      !ctx.userImports[key].isType &&
      ctx.userImports[key].isUsedInTemplate
    ) {
      allBindings[key] = true
    }
  }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

returned = `{ `
  for (const key in allBindings) {
    if (
      allBindings[key] === true &&
      ctx.userImports[key].source !== 'vue' &&
      !ctx.userImports[key].source.endsWith('.vue')
    ) {
      // generate getter for import bindings
      // skip vue imports since we know they will never change
      returned += `get ${key}() { return ${key} }, `
    } else if (ctx.bindingMetadata[key] === BindingTypes.SETUP_LET) {
      // local let binding, also add setter
      const setArg = key === 'v' ? `_v` : `v`
      returned +=
        `get ${key}() { return ${key} }, ` +
        `set ${key}(${setArg}) { ${key} = ${setArg} }, `
    } else {
      returned += `${key}, `
    }
  }
  returned = returned.replace(/, $/, '') + ` }`

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

`{
	get aa() { return aa }, 
        set aa(v) { aa = v }, 
        bb, cc, dd, 
        get a() { return a }, 
        set a(v) { a = v }, 
        b, c, d, 
        get xx() { return xx }, 
        get x() { return x } 
}
`

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

if (!options.inlineTemplate && !__TEST__) {
  // in non-inline mode, the `__isScriptSetup: true` flag is used by
  // componentPublicInstance proxy to allow properties that start with $ or _
  ctx.s.appendRight(
    endOffset,
    `\nconst __returned__ = ${returned}\n` +
      `Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true })\n` +
      `return __returned__` +
      `\n}\n\n`
  )
} else {
  ctx.s.appendRight(endOffset, `\nreturn ${returned}\n}\n\n`)
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

const genDefaultAs = options.genDefaultAs
    ? `const ${options.genDefaultAs} =`
    : `export default`

 

  let definedOptions = ''
  if (ctx.optionsRuntimeDecl) {
    definedOptions = scriptSetup.content
      .slice(ctx.optionsRuntimeDecl.start!, ctx.optionsRuntimeDecl.end!)
      .trim()
  }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

let runtimeOptions = ``
if (!ctx.hasDefaultExportName && filename && filename !== DEFAULT_FILENAME) {
    const match = filename.match(/([^/\\]+)\.\w+$/)
if (match) {
    runtimeOptions += `\n  __name: '${match[1]}',`
}
}
if (hasInlinedSsrRenderFn) {
    runtimeOptions += `\n  __ssrInlineRender: true,`
}

const propsDecl = genRuntimeProps(ctx)
if (propsDecl) runtimeOptions += `\n  props: ${propsDecl},`

const emitsDecl = genRuntimeEmits(ctx)
if (emitsDecl) runtimeOptions += `\n  emits: ${emitsDecl},`

1
2
3
4
5
6

  let definedOptions = ''
  if (ctx.optionsRuntimeDecl) {
    definedOptions = scriptSetup.content
      .slice(ctx.optionsRuntimeDecl.start!, ctx.optionsRuntimeDecl.end!)
      .trim()
  }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

if (defaultExport || definedOptions) {
  // without TS, can't rely on rest spread, so we use Object.assign
  // export default Object.assign(__default__, { ... })
  ctx.s.prependLeft(
    startOffset,
    `\n${genDefaultAs} /*#__PURE__*/Object.assign(${
      defaultExport ? `${normalScriptDefaultVar}, ` : ''
    }${definedOptions ? `${definedOptions}, ` : ''}{${runtimeOptions}\n  ` +
      `${hasAwait ? `async ` : ``}setup(${args}) {\n${exposeCall}`
  )
  ctx.s.appendRight(endOffset, `})`)
} else {
  ctx.s.prependLeft(
    startOffset,
    `\n${genDefaultAs} {${runtimeOptions}\n  ` +
      `${hasAwait ? `async ` : ``}setup(${args}) {\n${exposeCall}`
  )
  ctx.s.appendRight(endOffset, `}`)
}

1
2
3
4
5
6
7

if (ctx.helperImports.size > 0) {
    ctx.s.prepend(
      `import { ${[...ctx.helperImports]
        .map(h => `${h} as _${h}`)
        .join(', ')} } from 'vue'\n`
    )
}