fix: make it only vite compatible for now

This commit is contained in:
julien huang 2023-08-18 21:55:29 +02:00
parent b3087140ac
commit 79fc8a19da
2 changed files with 16 additions and 10 deletions

View File

@ -23,14 +23,12 @@ const HAS_SLOT_RE = /<slot[ /]/
const TEMPLATE_RE = /<template>([\s\S]*)<\/template>/ const TEMPLATE_RE = /<template>([\s\S]*)<\/template>/
const NUXTCLIENT_ATTR_RE = /\snuxt-client(="[^"]*")?/g const NUXTCLIENT_ATTR_RE = /\snuxt-client(="[^"]*")?/g
export const islandsTransform = createUnplugin((options: ServerOnlyComponentTransformPluginOptions & {nuxt: Nuxt}) => { export const islandsTransform = createUnplugin((options: ServerOnlyComponentTransformPluginOptions, meta) => {
const components = options.getComponents() const components = options.getComponents()
const isVite = meta.framework === 'vite'
return { return {
name: 'server-only-component-transform', name: 'server-only-component-transform',
enforce: 'pre', enforce: 'pre',
vite: {
},
transformInclude (id) { transformInclude (id) {
if (!isVue(id)) { return false } if (!isVue(id)) { return false }
@ -51,6 +49,8 @@ export const islandsTransform = createUnplugin((options: ServerOnlyComponentTran
return full + '\nimport { vforToArray as __vforToArray } from \'#app/components/utils\'' + '\nimport TeleportIfClient from \'#app/components/TeleportIfClient\'' return full + '\nimport { vforToArray as __vforToArray } from \'#app/components/utils\'' + '\nimport TeleportIfClient from \'#app/components/TeleportIfClient\''
}) })
let hasNuxtClient = false
const ast = parse(template[0]) const ast = parse(template[0])
await walk(ast, (node) => { await walk(ast, (node) => {
if (node.type === ELEMENT_NODE) { if (node.type === ELEMENT_NODE) {
@ -92,6 +92,8 @@ export const islandsTransform = createUnplugin((options: ServerOnlyComponentTran
} }
} }
} else if ('nuxt-client' in node.attributes) { } else if ('nuxt-client' in node.attributes) {
hasNuxtClient = true
if (isVite) {
// handle granular interactivity // handle granular interactivity
const htmlCode = code.slice(startingIndex + node.loc[0].start, startingIndex + node.loc[1].end) const htmlCode = code.slice(startingIndex + node.loc[0].start, startingIndex + node.loc[1].end)
const uid = hash(id + node.loc[0].start + node.loc[0].end) const uid = hash(id + node.loc[0].start + node.loc[0].end)
@ -99,8 +101,13 @@ export const islandsTransform = createUnplugin((options: ServerOnlyComponentTran
s.overwrite(node.loc[0].start, node.loc[1].end, `<TeleportIfClient to="${node.name}-${uid}" ${options.rootDir ? `root-dir="${options.rootDir}"` : ''} :nuxt-client="${node.attributes['nuxt-client'] || 'true'}">${htmlCode.replaceAll(NUXTCLIENT_ATTR_RE, '')}</TeleportIfClient>`) s.overwrite(node.loc[0].start, node.loc[1].end, `<TeleportIfClient to="${node.name}-${uid}" ${options.rootDir ? `root-dir="${options.rootDir}"` : ''} :nuxt-client="${node.attributes['nuxt-client'] || 'true'}">${htmlCode.replaceAll(NUXTCLIENT_ATTR_RE, '')}</TeleportIfClient>`)
} }
} }
}
}) })
if (!isVite && hasNuxtClient) {
console.warn(`nuxt-client attribute and client components within islands is only supported in vite mode. file: ${id}`)
}
if (s.hasChanged()) { if (s.hasChanged()) {
return { return {
code: s.toString(), code: s.toString(),

View File

@ -233,8 +233,7 @@ export default defineNuxtModule<ComponentsOptions>({
if (isServer) { if (isServer) {
config.plugins.push(islandsTransform.vite({ config.plugins.push(islandsTransform.vite({
getComponents, getComponents,
rootDir: nuxt.options.rootDir, rootDir: nuxt.options.rootDir
nuxt
})) }))
} else { } else {
config.plugins.push(componentsChunkPlugin.vite({ config.plugins.push(componentsChunkPlugin.vite({