2020-07-10 06:18:46 +08:00
|
|
|
import MagicString from 'magic-string'
|
2020-07-11 10:12:25 +08:00
|
|
|
import { BindingMetadata } from '@vue/compiler-core'
|
2020-07-07 03:56:24 +08:00
|
|
|
import { SFCDescriptor, SFCScriptBlock } from './parse'
|
2020-09-15 21:36:27 +08:00
|
|
|
import { parse, ParserPlugin } from '@babel/parser'
|
2020-08-19 21:53:09 +08:00
|
|
|
import { babelParserDefaultPlugins, generateCodeFrame } from '@vue/shared'
|
2020-07-08 05:54:01 +08:00
|
|
|
import {
|
|
|
|
Node,
|
|
|
|
Declaration,
|
|
|
|
ObjectPattern,
|
2020-08-29 04:21:03 +08:00
|
|
|
ObjectExpression,
|
2020-07-08 05:54:01 +08:00
|
|
|
ArrayPattern,
|
|
|
|
Identifier,
|
|
|
|
ExpressionStatement,
|
|
|
|
ArrowFunctionExpression,
|
2020-07-09 05:21:39 +08:00
|
|
|
ExportSpecifier,
|
2020-07-11 06:00:13 +08:00
|
|
|
Function as FunctionNode,
|
2020-07-09 23:55:04 +08:00
|
|
|
TSType,
|
2020-07-08 05:54:01 +08:00
|
|
|
TSTypeLiteral,
|
|
|
|
TSFunctionType,
|
2020-08-29 04:21:03 +08:00
|
|
|
TSDeclareFunction,
|
|
|
|
ObjectProperty,
|
|
|
|
ArrayExpression,
|
|
|
|
Statement
|
2020-07-08 05:54:01 +08:00
|
|
|
} from '@babel/types'
|
|
|
|
import { walk } from 'estree-walker'
|
2020-07-10 06:18:46 +08:00
|
|
|
import { RawSourceMap } from 'source-map'
|
2020-07-11 04:30:58 +08:00
|
|
|
import { genCssVarsCode, injectCssVarsCalls } from './genCssVars'
|
2020-07-07 03:56:24 +08:00
|
|
|
|
2020-07-10 06:18:46 +08:00
|
|
|
export interface SFCScriptCompileOptions {
|
2020-07-10 11:06:11 +08:00
|
|
|
/**
|
|
|
|
* https://babeljs.io/docs/en/babel-parser#plugins
|
|
|
|
*/
|
2020-07-10 06:18:46 +08:00
|
|
|
babelParserPlugins?: ParserPlugin[]
|
2020-07-07 03:56:24 +08:00
|
|
|
}
|
|
|
|
|
2020-07-09 23:55:04 +08:00
|
|
|
let hasWarned = false
|
|
|
|
|
2020-07-07 03:56:24 +08:00
|
|
|
/**
|
|
|
|
* Compile `<script setup>`
|
|
|
|
* It requires the whole SFC descriptor because we need to handle and merge
|
|
|
|
* normal `<script>` + `<script setup>` if both are present.
|
|
|
|
*/
|
2020-07-10 06:18:46 +08:00
|
|
|
export function compileScript(
|
2020-07-07 03:56:24 +08:00
|
|
|
sfc: SFCDescriptor,
|
|
|
|
options: SFCScriptCompileOptions = {}
|
2020-07-10 06:18:46 +08:00
|
|
|
): SFCScriptBlock {
|
2020-07-15 23:09:33 +08:00
|
|
|
const { script, scriptSetup, styles, source, filename } = sfc
|
|
|
|
|
|
|
|
if (__DEV__ && !__TEST__ && !hasWarned && scriptSetup) {
|
2020-07-09 23:55:04 +08:00
|
|
|
hasWarned = true
|
2020-07-15 23:09:33 +08:00
|
|
|
// @ts-ignore `console.info` cannot be null error
|
|
|
|
console[console.info ? 'info' : 'log'](
|
2020-07-09 23:55:04 +08:00
|
|
|
`\n[@vue/compiler-sfc] <script setup> is still an experimental proposal.\n` +
|
|
|
|
`Follow https://github.com/vuejs/rfcs/pull/182 for its status.\n`
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2020-07-11 04:30:58 +08:00
|
|
|
const hasCssVars = styles.some(s => typeof s.attrs.vars === 'string')
|
|
|
|
|
2020-07-16 05:43:54 +08:00
|
|
|
const scriptLang = script && script.lang
|
|
|
|
const scriptSetupLang = scriptSetup && scriptSetup.lang
|
|
|
|
const isTS = scriptLang === 'ts' || scriptSetupLang === 'ts'
|
2020-09-15 09:51:15 +08:00
|
|
|
const plugins: ParserPlugin[] = [...babelParserDefaultPlugins, 'jsx']
|
2020-08-29 04:21:03 +08:00
|
|
|
if (options.babelParserPlugins) plugins.push(...options.babelParserPlugins)
|
2020-09-15 09:51:15 +08:00
|
|
|
if (isTS) plugins.push('typescript', 'decorators-legacy')
|
2020-07-11 04:30:58 +08:00
|
|
|
|
2020-07-07 03:56:24 +08:00
|
|
|
if (!scriptSetup) {
|
2020-07-10 06:18:46 +08:00
|
|
|
if (!script) {
|
|
|
|
throw new Error(`SFC contains no <script> tags.`)
|
|
|
|
}
|
2020-07-16 05:43:54 +08:00
|
|
|
if (scriptLang && scriptLang !== 'ts') {
|
|
|
|
// do not process non js/ts script blocks
|
|
|
|
return script
|
|
|
|
}
|
2020-09-15 10:10:23 +08:00
|
|
|
try {
|
|
|
|
const scriptAst = parse(script.content, {
|
|
|
|
plugins,
|
|
|
|
sourceType: 'module'
|
|
|
|
}).program.body
|
|
|
|
return {
|
|
|
|
...script,
|
|
|
|
content: hasCssVars ? injectCssVarsCalls(sfc, plugins) : script.content,
|
|
|
|
bindings: analyzeScriptBindings(scriptAst),
|
|
|
|
scriptAst
|
|
|
|
}
|
|
|
|
} catch (e) {
|
|
|
|
// silently fallback if parse fails since user may be using custom
|
|
|
|
// babel syntax
|
|
|
|
return script
|
2020-07-10 06:18:46 +08:00
|
|
|
}
|
2020-07-07 03:56:24 +08:00
|
|
|
}
|
|
|
|
|
2020-07-16 05:43:54 +08:00
|
|
|
if (script && scriptLang !== scriptSetupLang) {
|
2020-07-07 03:56:24 +08:00
|
|
|
throw new Error(
|
|
|
|
`<script> and <script setup> must have the same language type.`
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2020-07-16 05:43:54 +08:00
|
|
|
if (scriptSetupLang && scriptSetupLang !== 'ts') {
|
|
|
|
// do not process non js/ts script blocks
|
|
|
|
return scriptSetup
|
|
|
|
}
|
|
|
|
|
2020-07-10 11:06:11 +08:00
|
|
|
const defaultTempVar = `__default__`
|
2020-07-07 03:56:24 +08:00
|
|
|
const bindings: BindingMetadata = {}
|
2020-07-08 07:47:16 +08:00
|
|
|
const imports: Record<string, string> = {}
|
2020-07-08 05:54:01 +08:00
|
|
|
const setupScopeVars: Record<string, boolean> = {}
|
|
|
|
const setupExports: Record<string, boolean> = {}
|
2020-07-07 03:56:24 +08:00
|
|
|
let exportAllIndex = 0
|
2020-07-08 05:54:01 +08:00
|
|
|
let defaultExport: Node | undefined
|
2020-07-11 06:00:13 +08:00
|
|
|
let needDefaultExportRefCheck = false
|
|
|
|
let hasAwait = false
|
2020-07-09 09:11:57 +08:00
|
|
|
|
|
|
|
const checkDuplicateDefaultExport = (node: Node) => {
|
|
|
|
if (defaultExport) {
|
|
|
|
// <script> already has export default
|
|
|
|
throw new Error(
|
|
|
|
`Default export is already declared in normal <script>.\n\n` +
|
|
|
|
generateCodeFrame(
|
|
|
|
source,
|
|
|
|
node.start! + startOffset,
|
|
|
|
node.start! + startOffset + `export default`.length
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
2020-07-07 03:56:24 +08:00
|
|
|
|
|
|
|
const s = new MagicString(source)
|
|
|
|
const startOffset = scriptSetup.loc.start.offset
|
|
|
|
const endOffset = scriptSetup.loc.end.offset
|
2020-07-08 05:54:01 +08:00
|
|
|
const scriptStartOffset = script && script.loc.start.offset
|
|
|
|
const scriptEndOffset = script && script.loc.end.offset
|
2020-07-07 03:56:24 +08:00
|
|
|
|
2020-08-29 04:21:03 +08:00
|
|
|
let scriptAst
|
|
|
|
|
2020-07-08 08:23:53 +08:00
|
|
|
// 1. process normal <script> first if it exists
|
2020-07-08 05:54:01 +08:00
|
|
|
if (script) {
|
|
|
|
// import dedupe between <script> and <script setup>
|
2020-08-29 04:21:03 +08:00
|
|
|
scriptAst = parse(script.content, {
|
2020-07-08 05:54:01 +08:00
|
|
|
plugins,
|
|
|
|
sourceType: 'module'
|
|
|
|
}).program.body
|
|
|
|
|
2020-08-29 04:21:03 +08:00
|
|
|
for (const node of scriptAst) {
|
2020-07-08 05:54:01 +08:00
|
|
|
if (node.type === 'ImportDeclaration') {
|
|
|
|
// record imports for dedupe
|
|
|
|
for (const {
|
|
|
|
local: { name }
|
|
|
|
} of node.specifiers) {
|
2020-07-08 07:47:16 +08:00
|
|
|
imports[name] = node.source.value
|
2020-07-08 05:54:01 +08:00
|
|
|
}
|
|
|
|
} else if (node.type === 'ExportDefaultDeclaration') {
|
|
|
|
// export default
|
|
|
|
defaultExport = node
|
|
|
|
const start = node.start! + scriptStartOffset!
|
|
|
|
s.overwrite(
|
|
|
|
start,
|
|
|
|
start + `export default`.length,
|
2020-07-10 11:06:11 +08:00
|
|
|
`const ${defaultTempVar} =`
|
2020-07-08 05:54:01 +08:00
|
|
|
)
|
2020-07-09 05:21:39 +08:00
|
|
|
} else if (node.type === 'ExportNamedDeclaration' && node.specifiers) {
|
|
|
|
const defaultSpecifier = node.specifiers.find(
|
|
|
|
s => s.exported.name === 'default'
|
|
|
|
) as ExportSpecifier
|
|
|
|
if (defaultSpecifier) {
|
|
|
|
defaultExport = node
|
|
|
|
// 1. remove specifier
|
|
|
|
if (node.specifiers.length > 1) {
|
|
|
|
s.remove(
|
|
|
|
defaultSpecifier.start! + scriptStartOffset!,
|
|
|
|
defaultSpecifier.end! + scriptStartOffset!
|
|
|
|
)
|
|
|
|
} else {
|
|
|
|
s.remove(
|
|
|
|
node.start! + scriptStartOffset!,
|
|
|
|
node.end! + scriptStartOffset!
|
|
|
|
)
|
|
|
|
}
|
|
|
|
if (node.source) {
|
|
|
|
// export { x as default } from './x'
|
|
|
|
// rewrite to `import { x as __default__ } from './x'` and
|
|
|
|
// add to top
|
|
|
|
s.prepend(
|
2020-07-10 11:06:11 +08:00
|
|
|
`import { ${
|
|
|
|
defaultSpecifier.local.name
|
|
|
|
} as ${defaultTempVar} } from '${node.source.value}'\n`
|
2020-07-09 05:21:39 +08:00
|
|
|
)
|
|
|
|
} else {
|
|
|
|
// export { x as default }
|
|
|
|
// rewrite to `const __default__ = x` and move to end
|
2020-07-10 11:06:11 +08:00
|
|
|
s.append(
|
|
|
|
`\nconst ${defaultTempVar} = ${defaultSpecifier.local.name}\n`
|
|
|
|
)
|
2020-07-09 05:21:39 +08:00
|
|
|
}
|
2020-07-08 05:54:01 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-07-08 08:23:53 +08:00
|
|
|
// 2. check <script setup="xxx"> function signature
|
2020-07-11 05:10:48 +08:00
|
|
|
const setupValue = scriptSetup.setup
|
2020-07-10 06:18:46 +08:00
|
|
|
const hasExplicitSignature = typeof setupValue === 'string'
|
2020-07-09 09:11:57 +08:00
|
|
|
|
|
|
|
let propsVar: string | undefined
|
|
|
|
let emitVar: string | undefined
|
|
|
|
let slotsVar: string | undefined
|
|
|
|
let attrsVar: string | undefined
|
2020-07-08 07:47:16 +08:00
|
|
|
|
|
|
|
let propsType = `{}`
|
|
|
|
let emitType = `(e: string, ...args: any[]) => void`
|
|
|
|
let slotsType = `__Slots__`
|
|
|
|
let attrsType = `Record<string, any>`
|
|
|
|
|
|
|
|
let propsASTNode
|
|
|
|
let setupCtxASTNode
|
|
|
|
|
|
|
|
// props/emits declared via types
|
2020-07-09 23:55:04 +08:00
|
|
|
const typeDeclaredProps: Record<string, PropTypeData> = {}
|
2020-07-08 08:23:53 +08:00
|
|
|
const typeDeclaredEmits: Set<string> = new Set()
|
2020-07-09 23:55:04 +08:00
|
|
|
// record declared types for runtime props type generation
|
|
|
|
const declaredTypes: Record<string, string[]> = {}
|
2020-07-08 07:47:16 +08:00
|
|
|
|
|
|
|
if (isTS && hasExplicitSignature) {
|
2020-07-08 05:54:01 +08:00
|
|
|
// <script setup="xxx" lang="ts">
|
|
|
|
// parse the signature to extract the props/emit variables the user wants
|
|
|
|
// we need them to find corresponding type declarations.
|
2020-07-10 06:18:46 +08:00
|
|
|
const signatureAST = parse(`(${setupValue})=>{}`, { plugins }).program
|
|
|
|
.body[0]
|
2020-07-08 07:47:16 +08:00
|
|
|
const params = ((signatureAST as ExpressionStatement)
|
|
|
|
.expression as ArrowFunctionExpression).params
|
|
|
|
if (params[0] && params[0].type === 'Identifier') {
|
|
|
|
propsASTNode = params[0]
|
|
|
|
propsVar = propsASTNode.name
|
|
|
|
}
|
|
|
|
if (params[1] && params[1].type === 'ObjectPattern') {
|
|
|
|
setupCtxASTNode = params[1]
|
|
|
|
for (const p of params[1].properties) {
|
|
|
|
if (
|
|
|
|
p.type === 'ObjectProperty' &&
|
|
|
|
p.key.type === 'Identifier' &&
|
|
|
|
p.value.type === 'Identifier'
|
|
|
|
) {
|
|
|
|
if (p.key.name === 'emit') {
|
2020-07-08 05:54:01 +08:00
|
|
|
emitVar = p.value.name
|
2020-07-08 07:47:16 +08:00
|
|
|
} else if (p.key.name === 'slots') {
|
|
|
|
slotsVar = p.value.name
|
|
|
|
} else if (p.key.name === 'attrs') {
|
|
|
|
attrsVar = p.value.name
|
2020-07-08 05:54:01 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-07-08 08:23:53 +08:00
|
|
|
// 3. parse <script setup> and walk over top level statements
|
2020-08-29 04:21:03 +08:00
|
|
|
const scriptSetupAst = parse(scriptSetup.content, {
|
2020-07-11 06:00:13 +08:00
|
|
|
plugins: [
|
|
|
|
...plugins,
|
|
|
|
// allow top level await but only inside <script setup>
|
|
|
|
'topLevelAwait'
|
|
|
|
],
|
2020-07-07 03:56:24 +08:00
|
|
|
sourceType: 'module'
|
2020-08-29 04:21:03 +08:00
|
|
|
}).program.body
|
|
|
|
|
|
|
|
for (const node of scriptSetupAst) {
|
2020-07-07 03:56:24 +08:00
|
|
|
const start = node.start! + startOffset
|
|
|
|
let end = node.end! + startOffset
|
|
|
|
// import or type declarations: move to top
|
2020-09-15 22:39:27 +08:00
|
|
|
// locate comment
|
|
|
|
if (node.trailingComments && node.trailingComments.length > 0) {
|
|
|
|
const lastCommentNode =
|
|
|
|
node.trailingComments[node.trailingComments.length - 1]
|
|
|
|
end = lastCommentNode.end + startOffset
|
|
|
|
}
|
2020-07-07 03:56:24 +08:00
|
|
|
// locate the end of whitespace between this statement and the next
|
|
|
|
while (end <= source.length) {
|
|
|
|
if (!/\s/.test(source.charAt(end))) {
|
|
|
|
break
|
|
|
|
}
|
|
|
|
end++
|
|
|
|
}
|
2020-07-08 05:54:01 +08:00
|
|
|
|
2020-07-07 03:56:24 +08:00
|
|
|
if (node.type === 'ImportDeclaration') {
|
2020-07-08 05:54:01 +08:00
|
|
|
// import declarations are moved to top
|
2020-07-07 03:56:24 +08:00
|
|
|
s.move(start, end, 0)
|
2020-07-08 05:54:01 +08:00
|
|
|
// dedupe imports
|
|
|
|
let prev
|
|
|
|
let removed = 0
|
|
|
|
for (const specifier of node.specifiers) {
|
|
|
|
if (imports[specifier.local.name]) {
|
|
|
|
// already imported in <script setup>, dedupe
|
|
|
|
removed++
|
|
|
|
s.remove(
|
|
|
|
prev ? prev.end! + startOffset : specifier.start! + startOffset,
|
|
|
|
specifier.end! + startOffset
|
|
|
|
)
|
|
|
|
} else {
|
2020-07-08 07:47:16 +08:00
|
|
|
imports[specifier.local.name] = node.source.value
|
2020-07-08 05:54:01 +08:00
|
|
|
}
|
|
|
|
prev = specifier
|
|
|
|
}
|
|
|
|
if (removed === node.specifiers.length) {
|
|
|
|
s.remove(node.start! + startOffset, node.end! + startOffset)
|
|
|
|
}
|
2020-07-07 03:56:24 +08:00
|
|
|
}
|
2020-07-08 05:54:01 +08:00
|
|
|
|
2020-07-08 07:47:16 +08:00
|
|
|
if (node.type === 'ExportNamedDeclaration' && node.exportKind !== 'type') {
|
2020-07-07 03:56:24 +08:00
|
|
|
// named exports
|
|
|
|
if (node.declaration) {
|
|
|
|
// variable/function/class declarations.
|
|
|
|
// remove leading `export ` keyword
|
|
|
|
s.remove(start, start + 7)
|
2020-07-08 07:47:16 +08:00
|
|
|
walkDeclaration(node.declaration, setupExports)
|
2020-07-07 03:56:24 +08:00
|
|
|
}
|
|
|
|
if (node.specifiers.length) {
|
2020-07-08 05:54:01 +08:00
|
|
|
// named export with specifiers
|
2020-07-07 03:56:24 +08:00
|
|
|
if (node.source) {
|
|
|
|
// export { x } from './x'
|
|
|
|
// change it to import and move to top
|
|
|
|
s.overwrite(start, start + 6, 'import')
|
|
|
|
s.move(start, end, 0)
|
|
|
|
} else {
|
|
|
|
// export { x }
|
|
|
|
s.remove(start, end)
|
|
|
|
}
|
2020-07-08 05:54:01 +08:00
|
|
|
for (const specifier of node.specifiers) {
|
2020-07-09 09:11:57 +08:00
|
|
|
if (specifier.type === 'ExportDefaultSpecifier') {
|
2020-07-08 05:54:01 +08:00
|
|
|
// export default from './x'
|
|
|
|
// rewrite to `import __default__ from './x'`
|
2020-07-09 09:11:57 +08:00
|
|
|
checkDuplicateDefaultExport(node)
|
2020-07-08 05:54:01 +08:00
|
|
|
defaultExport = node
|
|
|
|
s.overwrite(
|
|
|
|
specifier.exported.start! + startOffset,
|
|
|
|
specifier.exported.start! + startOffset + 7,
|
2020-07-10 11:06:11 +08:00
|
|
|
defaultTempVar
|
2020-07-08 05:54:01 +08:00
|
|
|
)
|
2020-07-09 09:11:57 +08:00
|
|
|
} else if (specifier.type === 'ExportSpecifier') {
|
2020-07-08 05:54:01 +08:00
|
|
|
if (specifier.exported.name === 'default') {
|
2020-07-09 09:11:57 +08:00
|
|
|
checkDuplicateDefaultExport(node)
|
2020-07-08 05:54:01 +08:00
|
|
|
defaultExport = node
|
2020-07-09 05:21:39 +08:00
|
|
|
// 1. remove specifier
|
|
|
|
if (node.specifiers.length > 1) {
|
2020-07-09 09:11:57 +08:00
|
|
|
// removing the default specifier from a list of specifiers.
|
|
|
|
// look ahead until we reach the first non , or whitespace char.
|
|
|
|
let end = specifier.end! + startOffset
|
|
|
|
while (end < source.length) {
|
|
|
|
if (/[^,\s]/.test(source.charAt(end))) {
|
|
|
|
break
|
|
|
|
}
|
|
|
|
end++
|
|
|
|
}
|
|
|
|
s.remove(specifier.start! + startOffset, end)
|
2020-07-09 05:21:39 +08:00
|
|
|
} else {
|
|
|
|
s.remove(node.start! + startOffset!, node.end! + startOffset!)
|
|
|
|
}
|
|
|
|
if (!node.source) {
|
|
|
|
// export { x as default, ... }
|
|
|
|
const local = specifier.local.name
|
|
|
|
if (setupScopeVars[local] || setupExports[local]) {
|
|
|
|
throw new Error(
|
|
|
|
`Cannot export locally defined variable as default in <script setup>.\n` +
|
|
|
|
`Default export must be an object literal with no reference to local scope.\n` +
|
|
|
|
generateCodeFrame(
|
|
|
|
source,
|
|
|
|
specifier.start! + startOffset,
|
|
|
|
specifier.end! + startOffset
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
// rewrite to `const __default__ = x` and move to end
|
2020-07-10 11:06:11 +08:00
|
|
|
s.append(`\nconst ${defaultTempVar} = ${local}\n`)
|
2020-07-08 05:54:01 +08:00
|
|
|
} else {
|
|
|
|
// export { x as default } from './x'
|
2020-07-09 05:21:39 +08:00
|
|
|
// rewrite to `import { x as __default__ } from './x'` and
|
|
|
|
// add to top
|
|
|
|
s.prepend(
|
2020-07-10 11:06:11 +08:00
|
|
|
`import { ${
|
|
|
|
specifier.local.name
|
|
|
|
} as ${defaultTempVar} } from '${node.source.value}'\n`
|
2020-07-08 05:54:01 +08:00
|
|
|
)
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
setupExports[specifier.exported.name] = true
|
2020-07-09 09:11:57 +08:00
|
|
|
if (node.source) {
|
|
|
|
imports[specifier.exported.name] = node.source.value
|
|
|
|
}
|
2020-07-08 05:54:01 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-07-07 03:56:24 +08:00
|
|
|
}
|
2020-07-08 05:54:01 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
if (node.type === 'ExportAllDeclaration') {
|
2020-07-07 03:56:24 +08:00
|
|
|
// export * from './x'
|
|
|
|
s.overwrite(
|
|
|
|
start,
|
|
|
|
node.source.start! + startOffset,
|
2020-07-09 05:21:39 +08:00
|
|
|
`import * as __export_all_${exportAllIndex++}__ from `
|
2020-07-07 03:56:24 +08:00
|
|
|
)
|
|
|
|
s.move(start, end, 0)
|
|
|
|
}
|
2020-07-08 05:54:01 +08:00
|
|
|
|
|
|
|
if (node.type === 'ExportDefaultDeclaration') {
|
2020-07-09 09:11:57 +08:00
|
|
|
checkDuplicateDefaultExport(node)
|
|
|
|
// export default {} inside <script setup>
|
|
|
|
// this should be kept in module scope - move it to the end
|
|
|
|
s.move(start, end, source.length)
|
|
|
|
s.overwrite(start, start + `export default`.length, `const __default__ =`)
|
|
|
|
// save it for analysis when all imports and variable declarations have
|
|
|
|
// been recorded
|
|
|
|
defaultExport = node
|
|
|
|
needDefaultExportRefCheck = true
|
2020-07-08 05:54:01 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
if (
|
2020-07-08 07:47:16 +08:00
|
|
|
(node.type === 'VariableDeclaration' ||
|
|
|
|
node.type === 'FunctionDeclaration' ||
|
|
|
|
node.type === 'ClassDeclaration') &&
|
|
|
|
!node.declare
|
2020-07-08 05:54:01 +08:00
|
|
|
) {
|
2020-07-08 07:47:16 +08:00
|
|
|
walkDeclaration(node, setupScopeVars)
|
|
|
|
}
|
|
|
|
|
|
|
|
// Type declarations
|
|
|
|
if (node.type === 'VariableDeclaration' && node.declare) {
|
|
|
|
s.remove(start, end)
|
|
|
|
for (const { id } of node.declarations) {
|
|
|
|
if (id.type === 'Identifier') {
|
|
|
|
if (
|
|
|
|
id.typeAnnotation &&
|
|
|
|
id.typeAnnotation.type === 'TSTypeAnnotation'
|
|
|
|
) {
|
|
|
|
const typeNode = id.typeAnnotation.typeAnnotation
|
|
|
|
const typeString = source.slice(
|
|
|
|
typeNode.start! + startOffset,
|
|
|
|
typeNode.end! + startOffset
|
|
|
|
)
|
|
|
|
if (typeNode.type === 'TSTypeLiteral') {
|
|
|
|
if (id.name === propsVar) {
|
|
|
|
propsType = typeString
|
2020-07-09 23:55:04 +08:00
|
|
|
extractRuntimeProps(typeNode, typeDeclaredProps, declaredTypes)
|
2020-07-08 07:47:16 +08:00
|
|
|
} else if (id.name === slotsVar) {
|
|
|
|
slotsType = typeString
|
|
|
|
} else if (id.name === attrsVar) {
|
|
|
|
attrsType = typeString
|
|
|
|
}
|
|
|
|
} else if (
|
|
|
|
id.name === emitVar &&
|
|
|
|
typeNode.type === 'TSFunctionType'
|
|
|
|
) {
|
|
|
|
emitType = typeString
|
2020-07-09 23:55:04 +08:00
|
|
|
extractRuntimeEmits(typeNode, typeDeclaredEmits)
|
2020-07-08 07:47:16 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-07-08 05:54:01 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
if (
|
|
|
|
node.type === 'TSDeclareFunction' &&
|
|
|
|
node.id &&
|
|
|
|
node.id.name === emitVar
|
|
|
|
) {
|
2020-07-08 07:47:16 +08:00
|
|
|
const index = node.id.start! + startOffset
|
|
|
|
s.overwrite(index, index + emitVar.length, '__emit__')
|
|
|
|
emitType = `typeof __emit__`
|
2020-07-09 23:55:04 +08:00
|
|
|
extractRuntimeEmits(node, typeDeclaredEmits)
|
2020-07-08 05:54:01 +08:00
|
|
|
}
|
2020-07-08 21:45:01 +08:00
|
|
|
|
|
|
|
// move all type declarations to outer scope
|
|
|
|
if (
|
|
|
|
node.type.startsWith('TS') ||
|
|
|
|
(node.type === 'ExportNamedDeclaration' && node.exportKind === 'type')
|
|
|
|
) {
|
2020-07-09 23:55:04 +08:00
|
|
|
recordType(node, declaredTypes)
|
2020-07-08 21:45:01 +08:00
|
|
|
s.move(start, end, 0)
|
|
|
|
}
|
2020-07-11 06:00:13 +08:00
|
|
|
|
|
|
|
// walk statements & named exports / variable declarations for top level
|
|
|
|
// await
|
|
|
|
if (
|
|
|
|
node.type === 'VariableDeclaration' ||
|
|
|
|
(node.type === 'ExportNamedDeclaration' &&
|
|
|
|
node.declaration &&
|
|
|
|
node.declaration.type === 'VariableDeclaration') ||
|
|
|
|
node.type.endsWith('Statement')
|
|
|
|
) {
|
|
|
|
;(walk as any)(node, {
|
|
|
|
enter(node: Node) {
|
|
|
|
if (isFunction(node)) {
|
|
|
|
this.skip()
|
|
|
|
}
|
|
|
|
if (node.type === 'AwaitExpression') {
|
|
|
|
hasAwait = true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
2020-07-08 05:54:01 +08:00
|
|
|
}
|
|
|
|
|
2020-07-10 00:16:08 +08:00
|
|
|
// 4. check default export to make sure it doesn't reference setup scope
|
2020-07-08 05:54:01 +08:00
|
|
|
// variables
|
2020-07-09 09:11:57 +08:00
|
|
|
if (needDefaultExportRefCheck) {
|
2020-07-08 05:54:01 +08:00
|
|
|
checkDefaultExport(
|
|
|
|
defaultExport!,
|
|
|
|
setupScopeVars,
|
|
|
|
imports,
|
|
|
|
setupExports,
|
|
|
|
source,
|
|
|
|
startOffset
|
|
|
|
)
|
2020-07-07 03:56:24 +08:00
|
|
|
}
|
|
|
|
|
2020-07-10 00:16:08 +08:00
|
|
|
// 5. remove non-script content
|
2020-07-07 03:56:24 +08:00
|
|
|
if (script) {
|
2020-07-08 05:54:01 +08:00
|
|
|
if (startOffset < scriptStartOffset!) {
|
2020-07-07 03:56:24 +08:00
|
|
|
// <script setup> before <script>
|
2020-07-08 05:54:01 +08:00
|
|
|
s.remove(endOffset, scriptStartOffset!)
|
|
|
|
s.remove(scriptEndOffset!, source.length)
|
2020-07-07 03:56:24 +08:00
|
|
|
} else {
|
|
|
|
// <script> before <script setup>
|
2020-07-08 05:54:01 +08:00
|
|
|
s.remove(0, scriptStartOffset!)
|
|
|
|
s.remove(scriptEndOffset!, startOffset)
|
2020-07-07 03:56:24 +08:00
|
|
|
s.remove(endOffset, source.length)
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
// only <script setup>
|
|
|
|
s.remove(0, startOffset)
|
|
|
|
s.remove(endOffset, source.length)
|
|
|
|
}
|
|
|
|
|
2020-07-10 00:16:08 +08:00
|
|
|
// 5. finalize setup argument signature.
|
2020-07-09 09:11:57 +08:00
|
|
|
let args = ``
|
2020-07-08 07:47:16 +08:00
|
|
|
if (isTS) {
|
|
|
|
if (slotsType === '__Slots__') {
|
|
|
|
s.prepend(`import { Slots as __Slots__ } from 'vue'\n`)
|
|
|
|
}
|
|
|
|
const ctxType = `{
|
|
|
|
emit: ${emitType},
|
|
|
|
slots: ${slotsType},
|
|
|
|
attrs: ${attrsType}
|
|
|
|
}`
|
|
|
|
if (hasExplicitSignature) {
|
|
|
|
// inject types to user signature
|
2020-07-10 06:18:46 +08:00
|
|
|
args = setupValue as string
|
2020-07-08 07:47:16 +08:00
|
|
|
const ss = new MagicString(args)
|
|
|
|
if (propsASTNode) {
|
|
|
|
// compensate for () wraper offset
|
|
|
|
ss.appendRight(propsASTNode.end! - 1, `: ${propsType}`)
|
|
|
|
}
|
|
|
|
if (setupCtxASTNode) {
|
|
|
|
ss.appendRight(setupCtxASTNode.end! - 1!, `: ${ctxType}`)
|
|
|
|
}
|
|
|
|
args = ss.toString()
|
|
|
|
}
|
|
|
|
} else {
|
2020-07-10 06:18:46 +08:00
|
|
|
args = hasExplicitSignature ? (setupValue as string) : ``
|
2020-07-08 07:47:16 +08:00
|
|
|
}
|
|
|
|
|
2020-07-10 00:16:08 +08:00
|
|
|
// 6. wrap setup code with function.
|
2020-07-07 03:56:24 +08:00
|
|
|
// export the content of <script setup> as a named export, `setup`.
|
|
|
|
// this allows `import { setup } from '*.vue'` for testing purposes.
|
2020-07-11 06:00:13 +08:00
|
|
|
s.prependLeft(
|
|
|
|
startOffset,
|
|
|
|
`\nexport ${hasAwait ? `async ` : ``}function setup(${args}) {\n`
|
|
|
|
)
|
2020-07-07 03:56:24 +08:00
|
|
|
|
|
|
|
// generate return statement
|
2020-07-08 05:54:01 +08:00
|
|
|
let returned = `{ ${Object.keys(setupExports).join(', ')} }`
|
2020-07-07 03:56:24 +08:00
|
|
|
|
|
|
|
// handle `export * from`. We need to call `toRefs` on the imported module
|
|
|
|
// object before merging.
|
|
|
|
if (exportAllIndex > 0) {
|
|
|
|
s.prepend(`import { toRefs as __toRefs__ } from 'vue'\n`)
|
|
|
|
for (let i = 0; i < exportAllIndex; i++) {
|
|
|
|
returned += `,\n __toRefs__(__export_all_${i}__)`
|
|
|
|
}
|
|
|
|
returned = `Object.assign(\n ${returned}\n)`
|
|
|
|
}
|
|
|
|
|
2020-07-21 00:46:33 +08:00
|
|
|
// inject `useCssVars` calls
|
2020-07-11 04:30:58 +08:00
|
|
|
if (hasCssVars) {
|
2020-07-16 06:05:35 +08:00
|
|
|
s.prepend(`import { useCssVars as __useCssVars__ } from 'vue'\n`)
|
2020-07-11 04:30:58 +08:00
|
|
|
for (const style of styles) {
|
|
|
|
const vars = style.attrs.vars
|
|
|
|
if (typeof vars === 'string') {
|
|
|
|
s.prependRight(
|
|
|
|
endOffset,
|
|
|
|
`\n${genCssVarsCode(vars, !!style.scoped, setupExports)}`
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-07-08 05:54:01 +08:00
|
|
|
s.appendRight(endOffset, `\nreturn ${returned}\n}\n\n`)
|
|
|
|
|
2020-07-10 00:16:08 +08:00
|
|
|
// 7. finalize default export
|
2020-07-08 08:23:53 +08:00
|
|
|
if (isTS) {
|
|
|
|
// for TS, make sure the exported type is still valid type with
|
|
|
|
// correct props information
|
|
|
|
s.prepend(`import { defineComponent as __define__ } from 'vue'\n`)
|
|
|
|
// we have to use object spread for types to be merged properly
|
|
|
|
// user's TS setting should compile it down to proper targets
|
2020-07-10 11:06:11 +08:00
|
|
|
const def = defaultExport ? `\n ...${defaultTempVar},` : ``
|
2020-07-09 23:55:04 +08:00
|
|
|
const runtimeProps = genRuntimeProps(typeDeclaredProps)
|
|
|
|
const runtimeEmits = genRuntimeEmits(typeDeclaredEmits)
|
2020-07-08 08:23:53 +08:00
|
|
|
s.append(
|
|
|
|
`export default __define__({${def}${runtimeProps}${runtimeEmits}\n setup\n})`
|
|
|
|
)
|
2020-07-08 05:54:01 +08:00
|
|
|
} else {
|
2020-07-08 08:23:53 +08:00
|
|
|
if (defaultExport) {
|
2020-07-10 11:06:11 +08:00
|
|
|
s.append(
|
|
|
|
`${defaultTempVar}.setup = setup\nexport default ${defaultTempVar}`
|
|
|
|
)
|
2020-07-08 08:23:53 +08:00
|
|
|
} else {
|
|
|
|
s.append(`export default { setup }`)
|
|
|
|
}
|
2020-07-08 05:54:01 +08:00
|
|
|
}
|
2020-07-07 03:56:24 +08:00
|
|
|
|
2020-07-10 00:16:08 +08:00
|
|
|
// 8. expose bindings for template compiler optimization
|
2020-08-29 04:21:03 +08:00
|
|
|
if (scriptAst) {
|
|
|
|
Object.assign(bindings, analyzeScriptBindings(scriptAst))
|
2020-07-08 05:54:01 +08:00
|
|
|
}
|
|
|
|
Object.keys(setupExports).forEach(key => {
|
2020-07-07 03:56:24 +08:00
|
|
|
bindings[key] = 'setup'
|
|
|
|
})
|
2020-07-13 06:04:09 +08:00
|
|
|
Object.keys(typeDeclaredProps).forEach(key => {
|
|
|
|
bindings[key] = 'props'
|
|
|
|
})
|
2020-08-29 04:21:03 +08:00
|
|
|
Object.assign(bindings, analyzeScriptBindings(scriptSetupAst))
|
2020-07-07 03:56:24 +08:00
|
|
|
|
2020-07-10 00:16:08 +08:00
|
|
|
s.trim()
|
2020-07-07 03:56:24 +08:00
|
|
|
return {
|
2020-07-10 06:18:46 +08:00
|
|
|
...scriptSetup,
|
2020-07-07 03:56:24 +08:00
|
|
|
bindings,
|
2020-07-10 06:18:46 +08:00
|
|
|
content: s.toString(),
|
|
|
|
map: (s.generateMap({
|
2020-07-07 03:56:24 +08:00
|
|
|
source: filename,
|
2020-07-08 05:54:01 +08:00
|
|
|
hires: true,
|
2020-07-07 03:56:24 +08:00
|
|
|
includeContent: true
|
2020-08-29 04:21:03 +08:00
|
|
|
}) as unknown) as RawSourceMap,
|
|
|
|
scriptAst,
|
|
|
|
scriptSetupAst
|
2020-07-07 03:56:24 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-07-08 07:47:16 +08:00
|
|
|
function walkDeclaration(node: Declaration, bindings: Record<string, boolean>) {
|
2020-07-08 05:54:01 +08:00
|
|
|
if (node.type === 'VariableDeclaration') {
|
|
|
|
// export const foo = ...
|
|
|
|
for (const { id } of node.declarations) {
|
2020-07-08 07:47:16 +08:00
|
|
|
if (id.type === 'Identifier') {
|
2020-07-08 05:54:01 +08:00
|
|
|
bindings[id.name] = true
|
|
|
|
} else if (id.type === 'ObjectPattern') {
|
|
|
|
walkObjectPattern(id, bindings)
|
|
|
|
} else if (id.type === 'ArrayPattern') {
|
|
|
|
walkArrayPattern(id, bindings)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else if (
|
|
|
|
node.type === 'FunctionDeclaration' ||
|
|
|
|
node.type === 'ClassDeclaration'
|
|
|
|
) {
|
|
|
|
// export function foo() {} / export class Foo {}
|
|
|
|
// export declarations must be named.
|
|
|
|
bindings[node.id!.name] = true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function walkObjectPattern(
|
|
|
|
node: ObjectPattern,
|
|
|
|
bindings: Record<string, boolean>
|
|
|
|
) {
|
|
|
|
for (const p of node.properties) {
|
|
|
|
if (p.type === 'ObjectProperty') {
|
|
|
|
// key can only be Identifier in ObjectPattern
|
|
|
|
if (p.key.type === 'Identifier') {
|
|
|
|
if (p.key === p.value) {
|
|
|
|
// const { x } = ...
|
|
|
|
bindings[p.key.name] = true
|
|
|
|
} else {
|
|
|
|
walkPattern(p.value, bindings)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
// ...rest
|
|
|
|
// argument can only be identifer when destructuring
|
|
|
|
bindings[(p.argument as Identifier).name] = true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function walkArrayPattern(
|
|
|
|
node: ArrayPattern,
|
|
|
|
bindings: Record<string, boolean>
|
|
|
|
) {
|
|
|
|
for (const e of node.elements) {
|
|
|
|
e && walkPattern(e, bindings)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function walkPattern(node: Node, bindings: Record<string, boolean>) {
|
|
|
|
if (node.type === 'Identifier') {
|
|
|
|
bindings[node.name] = true
|
|
|
|
} else if (node.type === 'RestElement') {
|
|
|
|
// argument can only be identifer when destructuring
|
|
|
|
bindings[(node.argument as Identifier).name] = true
|
|
|
|
} else if (node.type === 'ObjectPattern') {
|
|
|
|
walkObjectPattern(node, bindings)
|
|
|
|
} else if (node.type === 'ArrayPattern') {
|
|
|
|
walkArrayPattern(node, bindings)
|
|
|
|
} else if (node.type === 'AssignmentPattern') {
|
|
|
|
if (node.left.type === 'Identifier') {
|
|
|
|
bindings[node.left.name] = true
|
|
|
|
} else {
|
|
|
|
walkPattern(node.left, bindings)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-07-09 23:55:04 +08:00
|
|
|
interface PropTypeData {
|
|
|
|
key: string
|
|
|
|
type: string[]
|
|
|
|
required: boolean
|
|
|
|
}
|
|
|
|
|
|
|
|
function recordType(node: Node, declaredTypes: Record<string, string[]>) {
|
|
|
|
if (node.type === 'TSInterfaceDeclaration') {
|
|
|
|
declaredTypes[node.id.name] = [`Object`]
|
|
|
|
} else if (node.type === 'TSTypeAliasDeclaration') {
|
|
|
|
declaredTypes[node.id.name] = inferRuntimeType(
|
|
|
|
node.typeAnnotation,
|
|
|
|
declaredTypes
|
|
|
|
)
|
|
|
|
} else if (node.type === 'ExportNamedDeclaration' && node.declaration) {
|
|
|
|
recordType(node.declaration, declaredTypes)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function extractRuntimeProps(
|
|
|
|
node: TSTypeLiteral,
|
|
|
|
props: Record<string, PropTypeData>,
|
|
|
|
declaredTypes: Record<string, string[]>
|
|
|
|
) {
|
2020-07-08 08:23:53 +08:00
|
|
|
for (const m of node.members) {
|
|
|
|
if (m.type === 'TSPropertySignature' && m.key.type === 'Identifier') {
|
2020-07-09 23:55:04 +08:00
|
|
|
props[m.key.name] = {
|
|
|
|
key: m.key.name,
|
|
|
|
required: !m.optional,
|
|
|
|
type:
|
|
|
|
__DEV__ && m.typeAnnotation
|
|
|
|
? inferRuntimeType(m.typeAnnotation.typeAnnotation, declaredTypes)
|
|
|
|
: [`null`]
|
|
|
|
}
|
2020-07-08 08:23:53 +08:00
|
|
|
}
|
|
|
|
}
|
2020-07-08 05:54:01 +08:00
|
|
|
}
|
|
|
|
|
2020-07-09 23:55:04 +08:00
|
|
|
function inferRuntimeType(
|
|
|
|
node: TSType,
|
|
|
|
declaredTypes: Record<string, string[]>
|
|
|
|
): string[] {
|
|
|
|
switch (node.type) {
|
|
|
|
case 'TSStringKeyword':
|
|
|
|
return ['String']
|
|
|
|
case 'TSNumberKeyword':
|
|
|
|
return ['Number']
|
|
|
|
case 'TSBooleanKeyword':
|
|
|
|
return ['Boolean']
|
|
|
|
case 'TSObjectKeyword':
|
|
|
|
return ['Object']
|
|
|
|
case 'TSTypeLiteral':
|
|
|
|
// TODO (nice to have) generate runtime property validation
|
|
|
|
return ['Object']
|
|
|
|
case 'TSFunctionType':
|
|
|
|
return ['Function']
|
|
|
|
case 'TSArrayType':
|
|
|
|
case 'TSTupleType':
|
2020-07-17 23:24:53 +08:00
|
|
|
// TODO (nice to have) generate runtime element type/length checks
|
2020-07-09 23:55:04 +08:00
|
|
|
return ['Array']
|
|
|
|
|
|
|
|
case 'TSLiteralType':
|
|
|
|
switch (node.literal.type) {
|
|
|
|
case 'StringLiteral':
|
|
|
|
return ['String']
|
|
|
|
case 'BooleanLiteral':
|
|
|
|
return ['Boolean']
|
|
|
|
case 'NumericLiteral':
|
|
|
|
case 'BigIntLiteral':
|
|
|
|
return ['Number']
|
|
|
|
default:
|
|
|
|
return [`null`]
|
|
|
|
}
|
|
|
|
|
|
|
|
case 'TSTypeReference':
|
|
|
|
if (node.typeName.type === 'Identifier') {
|
|
|
|
if (declaredTypes[node.typeName.name]) {
|
|
|
|
return declaredTypes[node.typeName.name]
|
|
|
|
}
|
|
|
|
switch (node.typeName.name) {
|
|
|
|
case 'Array':
|
|
|
|
case 'Function':
|
|
|
|
case 'Object':
|
|
|
|
case 'Set':
|
|
|
|
case 'Map':
|
|
|
|
case 'WeakSet':
|
|
|
|
case 'WeakMap':
|
|
|
|
return [node.typeName.name]
|
|
|
|
case 'Record':
|
|
|
|
case 'Partial':
|
|
|
|
case 'Readonly':
|
|
|
|
case 'Pick':
|
|
|
|
case 'Omit':
|
|
|
|
case 'Exclude':
|
|
|
|
case 'Extract':
|
|
|
|
case 'Required':
|
|
|
|
case 'InstanceType':
|
|
|
|
return ['Object']
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return [`null`]
|
|
|
|
|
|
|
|
case 'TSUnionType':
|
|
|
|
return [
|
|
|
|
...new Set(
|
|
|
|
[].concat(node.types.map(t =>
|
|
|
|
inferRuntimeType(t, declaredTypes)
|
|
|
|
) as any)
|
|
|
|
)
|
|
|
|
]
|
|
|
|
|
|
|
|
case 'TSIntersectionType':
|
|
|
|
return ['Object']
|
|
|
|
|
|
|
|
default:
|
|
|
|
return [`null`] // no runtime check
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function genRuntimeProps(props: Record<string, PropTypeData>) {
|
|
|
|
const keys = Object.keys(props)
|
|
|
|
if (!keys.length) {
|
|
|
|
return ``
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!__DEV__) {
|
|
|
|
// production: generate array version only
|
|
|
|
return `\n props: [\n ${keys
|
|
|
|
.map(k => JSON.stringify(k))
|
|
|
|
.join(',\n ')}\n ] as unknown as undefined,`
|
|
|
|
}
|
|
|
|
|
|
|
|
return `\n props: {\n ${keys
|
|
|
|
.map(key => {
|
|
|
|
const { type, required } = props[key]
|
|
|
|
return `${key}: { type: ${toRuntimeTypeString(
|
|
|
|
type
|
|
|
|
)}, required: ${required} }`
|
|
|
|
})
|
|
|
|
.join(',\n ')}\n } as unknown as undefined,`
|
|
|
|
}
|
|
|
|
|
|
|
|
function toRuntimeTypeString(types: string[]) {
|
|
|
|
return types.some(t => t === 'null')
|
|
|
|
? `null`
|
|
|
|
: types.length > 1
|
|
|
|
? `[${types.join(', ')}]`
|
|
|
|
: types[0]
|
|
|
|
}
|
|
|
|
|
|
|
|
function extractRuntimeEmits(
|
2020-07-08 07:47:16 +08:00
|
|
|
node: TSFunctionType | TSDeclareFunction,
|
2020-07-08 08:23:53 +08:00
|
|
|
emits: Set<string>
|
2020-07-08 07:47:16 +08:00
|
|
|
) {
|
2020-07-08 08:23:53 +08:00
|
|
|
const eventName =
|
|
|
|
node.type === 'TSDeclareFunction' ? node.params[0] : node.parameters[0]
|
|
|
|
if (
|
|
|
|
eventName.type === 'Identifier' &&
|
|
|
|
eventName.typeAnnotation &&
|
|
|
|
eventName.typeAnnotation.type === 'TSTypeAnnotation'
|
|
|
|
) {
|
|
|
|
const typeNode = eventName.typeAnnotation.typeAnnotation
|
|
|
|
if (typeNode.type === 'TSLiteralType') {
|
|
|
|
emits.add(String(typeNode.literal.value))
|
|
|
|
} else if (typeNode.type === 'TSUnionType') {
|
|
|
|
for (const t of typeNode.types) {
|
|
|
|
if (t.type === 'TSLiteralType') {
|
|
|
|
emits.add(String(t.literal.value))
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-07-08 05:54:01 +08:00
|
|
|
}
|
|
|
|
|
2020-07-09 23:55:04 +08:00
|
|
|
function genRuntimeEmits(emits: Set<string>) {
|
|
|
|
return emits.size
|
|
|
|
? `\n emits: [${Array.from(emits)
|
|
|
|
.map(p => JSON.stringify(p))
|
|
|
|
.join(', ')}] as unknown as undefined,`
|
|
|
|
: ``
|
|
|
|
}
|
|
|
|
|
2020-07-08 05:54:01 +08:00
|
|
|
/**
|
2020-07-17 23:24:12 +08:00
|
|
|
* export default {} inside `<script setup>` cannot access variables declared
|
2020-07-08 05:54:01 +08:00
|
|
|
* inside since it's hoisted. Walk and check to make sure.
|
|
|
|
*/
|
|
|
|
function checkDefaultExport(
|
|
|
|
root: Node,
|
|
|
|
scopeVars: Record<string, boolean>,
|
2020-07-08 07:47:16 +08:00
|
|
|
imports: Record<string, string>,
|
2020-07-08 05:54:01 +08:00
|
|
|
exports: Record<string, boolean>,
|
|
|
|
source: string,
|
|
|
|
offset: number
|
|
|
|
) {
|
|
|
|
const knownIds: Record<string, number> = Object.create(null)
|
|
|
|
;(walk as any)(root, {
|
|
|
|
enter(node: Node & { scopeIds?: Set<string> }, parent: Node) {
|
|
|
|
if (node.type === 'Identifier') {
|
|
|
|
if (
|
|
|
|
!knownIds[node.name] &&
|
|
|
|
!isStaticPropertyKey(node, parent) &&
|
|
|
|
(scopeVars[node.name] || (!imports[node.name] && exports[node.name]))
|
|
|
|
) {
|
|
|
|
throw new Error(
|
|
|
|
`\`export default\` in <script setup> cannot reference locally ` +
|
|
|
|
`declared variables because it will be hoisted outside of the ` +
|
|
|
|
`setup() function. If your component options requires initialization ` +
|
|
|
|
`in the module scope, use a separate normal <script> to export ` +
|
|
|
|
`the options instead.\n\n` +
|
|
|
|
generateCodeFrame(
|
|
|
|
source,
|
|
|
|
node.start! + offset,
|
|
|
|
node.end! + offset
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
2020-07-11 06:00:13 +08:00
|
|
|
} else if (isFunction(node)) {
|
2020-07-08 05:54:01 +08:00
|
|
|
// walk function expressions and add its arguments to known identifiers
|
|
|
|
// so that we don't prefix them
|
|
|
|
node.params.forEach(p =>
|
|
|
|
(walk as any)(p, {
|
|
|
|
enter(child: Node, parent: Node) {
|
|
|
|
if (
|
|
|
|
child.type === 'Identifier' &&
|
|
|
|
// do not record as scope variable if is a destructured key
|
|
|
|
!isStaticPropertyKey(child, parent) &&
|
|
|
|
// do not record if this is a default value
|
|
|
|
// assignment of a destructured variable
|
|
|
|
!(
|
|
|
|
parent &&
|
|
|
|
parent.type === 'AssignmentPattern' &&
|
|
|
|
parent.right === child
|
|
|
|
)
|
|
|
|
) {
|
|
|
|
const { name } = child
|
|
|
|
if (node.scopeIds && node.scopeIds.has(name)) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
if (name in knownIds) {
|
|
|
|
knownIds[name]++
|
|
|
|
} else {
|
|
|
|
knownIds[name] = 1
|
|
|
|
}
|
|
|
|
;(node.scopeIds || (node.scopeIds = new Set())).add(name)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
leave(node: Node & { scopeIds?: Set<string> }) {
|
|
|
|
if (node.scopeIds) {
|
|
|
|
node.scopeIds.forEach((id: string) => {
|
|
|
|
knownIds[id]--
|
|
|
|
if (knownIds[id] === 0) {
|
|
|
|
delete knownIds[id]
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
function isStaticPropertyKey(node: Node, parent: Node): boolean {
|
|
|
|
return (
|
|
|
|
parent &&
|
|
|
|
(parent.type === 'ObjectProperty' || parent.type === 'ObjectMethod') &&
|
|
|
|
!parent.computed &&
|
|
|
|
parent.key === node
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2020-07-11 06:00:13 +08:00
|
|
|
function isFunction(node: Node): node is FunctionNode {
|
|
|
|
return /Function(?:Expression|Declaration)$|Method$/.test(node.type)
|
|
|
|
}
|
|
|
|
|
2020-08-29 04:21:03 +08:00
|
|
|
function getObjectExpressionKeys(node: ObjectExpression): string[] {
|
|
|
|
const keys = []
|
|
|
|
for (const prop of node.properties) {
|
|
|
|
if (
|
|
|
|
(prop.type === 'ObjectProperty' || prop.type === 'ObjectMethod') &&
|
|
|
|
!prop.computed
|
|
|
|
) {
|
|
|
|
if (prop.key.type === 'Identifier') {
|
|
|
|
keys.push(prop.key.name)
|
|
|
|
} else if (prop.key.type === 'StringLiteral') {
|
|
|
|
keys.push(prop.key.value)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return keys
|
|
|
|
}
|
|
|
|
|
|
|
|
function getArrayExpressionKeys(node: ArrayExpression): string[] {
|
|
|
|
const keys = []
|
|
|
|
for (const element of node.elements) {
|
|
|
|
if (element && element.type === 'StringLiteral') {
|
|
|
|
keys.push(element.value)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return keys
|
|
|
|
}
|
|
|
|
|
|
|
|
function getObjectOrArrayExpressionKeys(property: ObjectProperty): string[] {
|
|
|
|
if (property.value.type === 'ArrayExpression') {
|
|
|
|
return getArrayExpressionKeys(property.value)
|
|
|
|
}
|
|
|
|
if (property.value.type === 'ObjectExpression') {
|
|
|
|
return getObjectExpressionKeys(property.value)
|
|
|
|
}
|
|
|
|
return []
|
|
|
|
}
|
|
|
|
|
2020-07-07 03:56:24 +08:00
|
|
|
/**
|
|
|
|
* Analyze bindings in normal `<script>`
|
|
|
|
* Note that `compileScriptSetup` already analyzes bindings as part of its
|
|
|
|
* compilation process so this should only be used on single `<script>` SFCs.
|
|
|
|
*/
|
2020-08-29 04:21:03 +08:00
|
|
|
function analyzeScriptBindings(ast: Statement[]): BindingMetadata {
|
|
|
|
const bindings: BindingMetadata = {}
|
|
|
|
|
|
|
|
for (const node of ast) {
|
|
|
|
if (
|
|
|
|
node.type === 'ExportDefaultDeclaration' &&
|
|
|
|
node.declaration.type === 'ObjectExpression'
|
|
|
|
) {
|
|
|
|
for (const property of node.declaration.properties) {
|
|
|
|
if (
|
|
|
|
property.type === 'ObjectProperty' &&
|
|
|
|
!property.computed &&
|
|
|
|
property.key.type === 'Identifier'
|
|
|
|
) {
|
|
|
|
// props
|
|
|
|
if (property.key.name === 'props') {
|
|
|
|
// props: ['foo']
|
|
|
|
// props: { foo: ... }
|
|
|
|
for (const key of getObjectOrArrayExpressionKeys(property)) {
|
|
|
|
bindings[key] = 'props'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// inject
|
|
|
|
else if (property.key.name === 'inject') {
|
|
|
|
// inject: ['foo']
|
|
|
|
// inject: { foo: {} }
|
|
|
|
for (const key of getObjectOrArrayExpressionKeys(property)) {
|
|
|
|
bindings[key] = 'options'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// computed & methods
|
|
|
|
else if (
|
|
|
|
property.value.type === 'ObjectExpression' &&
|
|
|
|
(property.key.name === 'computed' ||
|
|
|
|
property.key.name === 'methods')
|
|
|
|
) {
|
|
|
|
// methods: { foo() {} }
|
|
|
|
// computed: { foo() {} }
|
|
|
|
for (const key of getObjectExpressionKeys(property.value)) {
|
|
|
|
bindings[key] = 'options'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// setup & data
|
|
|
|
else if (
|
|
|
|
property.type === 'ObjectMethod' &&
|
|
|
|
property.key.type === 'Identifier' &&
|
|
|
|
(property.key.name === 'setup' || property.key.name === 'data')
|
|
|
|
) {
|
|
|
|
for (const bodyItem of property.body.body) {
|
|
|
|
// setup() {
|
|
|
|
// return {
|
|
|
|
// foo: null
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
if (
|
|
|
|
bodyItem.type === 'ReturnStatement' &&
|
|
|
|
bodyItem.argument &&
|
|
|
|
bodyItem.argument.type === 'ObjectExpression'
|
|
|
|
) {
|
|
|
|
for (const key of getObjectExpressionKeys(bodyItem.argument)) {
|
|
|
|
bindings[key] = property.key.name
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-07-08 05:54:01 +08:00
|
|
|
}
|
2020-08-29 04:21:03 +08:00
|
|
|
|
|
|
|
return bindings
|
2020-07-07 03:56:24 +08:00
|
|
|
}
|