Skip to content

Commit

Permalink
feat(plugin-vue): add customElement option to compiler (#238)
Browse files Browse the repository at this point in the history
Co-authored-by: 三咲智子 Kevin Deng <[email protected]>
  • Loading branch information
baiwusanyu-c and sxzz committed Dec 7, 2023
1 parent 977a63a commit c29cb49
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 11 deletions.
1 change: 1 addition & 0 deletions packages/plugin-vue/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -295,6 +295,7 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
options.value,
this,
ssr,
customElementFilter.value(filename),
)
} else if (query.type === 'style') {
return transformStyle(
Expand Down
21 changes: 13 additions & 8 deletions packages/plugin-vue/src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export async function transformMain(
options: ResolvedOptions,
pluginContext: TransformPluginContext,
ssr: boolean,
asCustomElement: boolean,
customElement: boolean,
) {
const { devServer, isProduction, devToolsEnabled } = options

Expand Down Expand Up @@ -74,6 +74,7 @@ export async function transformMain(
options,
pluginContext,
ssr,
customElement,
)

// template
Expand All @@ -88,6 +89,7 @@ export async function transformMain(
options,
pluginContext,
ssr,
customElement,
))
}

Expand All @@ -110,7 +112,7 @@ export async function transformMain(
const stylesCode = await genStyleCode(
descriptor,
pluginContext,
asCustomElement,
customElement,
attachedProps,
)

Expand Down Expand Up @@ -275,6 +277,7 @@ async function genTemplateCode(
options: ResolvedOptions,
pluginContext: PluginContext,
ssr: boolean,
customElement: boolean,
) {
const template = descriptor.template!
const hasScoped = descriptor.styles.some((style) => style.scoped)
Expand All @@ -289,6 +292,7 @@ async function genTemplateCode(
options,
pluginContext,
ssr,
customElement,
)
} else {
if (template.src) {
Expand Down Expand Up @@ -322,14 +326,15 @@ async function genScriptCode(
options: ResolvedOptions,
pluginContext: PluginContext,
ssr: boolean,
customElement: boolean,
): Promise<{
code: string
map: RawSourceMap | undefined
}> {
let scriptCode = `const ${scriptIdentifier} = {}`
let map: RawSourceMap | undefined

const script = resolveScript(descriptor, options, ssr)
const script = resolveScript(descriptor, options, ssr, customElement)
if (script) {
// If the script is js/ts and has no external src, it can be directly placed
// in the main module.
Expand Down Expand Up @@ -376,7 +381,7 @@ async function genScriptCode(
async function genStyleCode(
descriptor: SFCDescriptor,
pluginContext: PluginContext,
asCustomElement: boolean,
customElement: boolean,
attachedProps: [string, string][],
) {
let stylesCode = ``
Expand All @@ -401,12 +406,12 @@ async function genStyleCode(
? `&src=${descriptor.id}`
: '&src=true'
: ''
const directQuery = asCustomElement ? `&inline` : ``
const directQuery = customElement ? `&inline` : ``
const scopedQuery = style.scoped ? `&scoped=${descriptor.id}` : ``
const query = `?vue&type=style&index=${i}${srcQuery}${directQuery}${scopedQuery}`
const styleRequest = src + query + attrsQuery
if (style.module) {
if (asCustomElement) {
if (customElement) {
throw new Error(
`<style module> is not supported in custom elements mode.`,
)
Expand All @@ -419,7 +424,7 @@ async function genStyleCode(
stylesCode += importCode
Object.assign((cssModulesMap ||= {}), nameMap)
} else {
if (asCustomElement) {
if (customElement) {
stylesCode += `\nimport _style_${i} from ${JSON.stringify(
styleRequest,
)}`
Expand All @@ -429,7 +434,7 @@ async function genStyleCode(
}
// TODO SSR critical CSS collection
}
if (asCustomElement) {
if (customElement) {
attachedProps.push([
`styles`,
`[${descriptor.styles.map((_, i) => `_style_${i}`).join(',')}]`,
Expand Down
2 changes: 2 additions & 0 deletions packages/plugin-vue/src/script.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export function resolveScript(
descriptor: SFCDescriptor,
options: ResolvedOptions,
ssr: boolean,
customElement: boolean,
): SFCScriptBlock | null {
if (!descriptor.script && !descriptor.scriptSetup) {
return null
Expand All @@ -72,6 +73,7 @@ export function resolveScript(
genDefaultAs: canInlineMain(descriptor, options)
? scriptIdentifier
: undefined,
customElement,
})

if (!options.isProduction && resolved?.deps) {
Expand Down
23 changes: 20 additions & 3 deletions packages/plugin-vue/src/template.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,19 @@ export async function transformTemplateAsModule(
options: ResolvedOptions,
pluginContext: TransformPluginContext,
ssr: boolean,
customElement: boolean,
): Promise<{
code: string
map: any
}> {
const result = compile(code, descriptor, options, pluginContext, ssr)
const result = compile(
code,
descriptor,
options,
pluginContext,
ssr,
customElement,
)

let returnCode = result.code
if (
Expand Down Expand Up @@ -50,8 +58,16 @@ export function transformTemplateInMain(
options: ResolvedOptions,
pluginContext: PluginContext,
ssr: boolean,
customElement: boolean,
): SFCTemplateCompileResults {
const result = compile(code, descriptor, options, pluginContext, ssr)
const result = compile(
code,
descriptor,
options,
pluginContext,
ssr,
customElement,
)
return {
...result,
code: result.code.replace(
Expand All @@ -68,9 +84,10 @@ export function compile(
options: ResolvedOptions,
pluginContext: PluginContext,
ssr: boolean,
customElement: boolean,
) {
const filename = descriptor.filename
resolveScript(descriptor, options, ssr)
resolveScript(descriptor, options, ssr, customElement)
const result = options.compiler.compileTemplate({
...resolveTemplateCompilerOptions(descriptor, options, ssr)!,
source: code,
Expand Down

0 comments on commit c29cb49

Please sign in to comment.