diff options
Diffstat (limited to 'packages/integrations/vue/src')
| -rw-r--r-- | packages/integrations/vue/src/editor.cts | 65 | ||||
| -rw-r--r-- | packages/integrations/vue/src/index.ts | 178 |
2 files changed, 243 insertions, 0 deletions
diff --git a/packages/integrations/vue/src/editor.cts b/packages/integrations/vue/src/editor.cts new file mode 100644 index 000000000..96d8f8e71 --- /dev/null +++ b/packages/integrations/vue/src/editor.cts @@ -0,0 +1,65 @@ +import { parse } from '@vue/compiler-sfc'; + +export function toTSX(code: string, className: string): string { + let result = `export default function ${className}__AstroComponent_(_props: Record<string, any>): any {}`; + + // NOTE: As you can expect, using regexes for this is not exactly the most reliable way of doing things + // However, I couldn't figure out a way to do it using Vue's compiler, I tried looking at how Volar does it, but I + // didn't really understand everything happening there and it seemed to be pretty Volar-specific. I do believe + // someone more knowledgeable on Vue's internals could figure it out, but since this solution is good enough for most + // Vue components (and it's an improvement over, well, nothing), it's alright, I think + try { + const parsedResult = parse(code); + + if (parsedResult.errors.length > 0) { + return ` + let ${className}__AstroComponent_: Error + export default ${className}__AstroComponent_ + `; + } + + // Vue supports 2 type of script blocks: setup and non-setup + const regularScriptBlockContent = parsedResult.descriptor.script?.content ?? ''; + const { scriptSetup } = parsedResult.descriptor; + + if (scriptSetup) { + const codeWithoutComments = scriptSetup.content.replace(/\/\/.*|\/\*[\s\S]*?\*\//g, ''); + const definePropsType = /defineProps<([\s\S]+?)>\s?\(\)/.exec(codeWithoutComments); + const propsGeneric = scriptSetup.attrs.generic; + const propsGenericType = propsGeneric ? `<${propsGeneric}>` : ''; + + if (definePropsType) { + result = ` + ${regularScriptBlockContent} + ${scriptSetup.content} + + export default function ${className}__AstroComponent_${propsGenericType}(_props: ${definePropsType[1]}): any { + <div></div> + } + `; + } else { + // TODO. Find a way to support generics when using defineProps without passing explicit types. + // Right now something like this `defineProps({ prop: { type: Array as PropType<T[]> } })` + // won't be correctly typed in Astro. + const defineProps = /defineProps\([\s\S]+?\)/.exec(codeWithoutComments); + if (defineProps) { + result = ` + import { defineProps } from 'vue'; + + ${regularScriptBlockContent} + + const Props = ${defineProps[0]} + + export default function ${className}__AstroComponent_${propsGenericType}(_props: typeof Props): any { + <div></div> + } + `; + } + } + } + } catch { + return result; + } + + return result; +} diff --git a/packages/integrations/vue/src/index.ts b/packages/integrations/vue/src/index.ts new file mode 100644 index 000000000..f81167323 --- /dev/null +++ b/packages/integrations/vue/src/index.ts @@ -0,0 +1,178 @@ +import path from 'node:path'; +import type { Options as VueOptions } from '@vitejs/plugin-vue'; +import vue from '@vitejs/plugin-vue'; +import type { Options as VueJsxOptions } from '@vitejs/plugin-vue-jsx'; +import { MagicString } from '@vue/compiler-sfc'; +import type { AstroIntegration, AstroRenderer, ContainerRenderer, HookParameters } from 'astro'; +import type { Plugin, UserConfig } from 'vite'; +import type { VitePluginVueDevToolsOptions } from 'vite-plugin-vue-devtools'; + +const VIRTUAL_MODULE_ID = 'virtual:@astrojs/vue/app'; +const RESOLVED_VIRTUAL_MODULE_ID = `\0${VIRTUAL_MODULE_ID}`; + +interface Options extends VueOptions { + jsx?: boolean | VueJsxOptions; + appEntrypoint?: string; + devtools?: boolean | Omit<VitePluginVueDevToolsOptions, 'appendTo'>; +} + +function getRenderer(): AstroRenderer { + return { + name: '@astrojs/vue', + clientEntrypoint: '@astrojs/vue/client.js', + serverEntrypoint: '@astrojs/vue/server.js', + }; +} + +function getJsxRenderer(): AstroRenderer { + return { + name: '@astrojs/vue (jsx)', + clientEntrypoint: '@astrojs/vue/client.js', + serverEntrypoint: '@astrojs/vue/server.js', + }; +} + +export function getContainerRenderer(): ContainerRenderer { + return { + name: '@astrojs/vue', + serverEntrypoint: '@astrojs/vue/server.js', + }; +} + +function virtualAppEntrypoint(options?: Options): Plugin { + let isBuild: boolean; + let root: string; + let appEntrypoint: string | undefined; + + return { + name: '@astrojs/vue/virtual-app', + config(_, { command }) { + isBuild = command === 'build'; + }, + configResolved(config) { + root = config.root; + if (options?.appEntrypoint) { + appEntrypoint = options.appEntrypoint.startsWith('.') + ? path.resolve(root, options.appEntrypoint) + : options.appEntrypoint; + } + }, + resolveId(id: string) { + if (id == VIRTUAL_MODULE_ID) { + return RESOLVED_VIRTUAL_MODULE_ID; + } + }, + load(id: string) { + if (id === RESOLVED_VIRTUAL_MODULE_ID) { + if (appEntrypoint) { + return `\ +import * as mod from ${JSON.stringify(appEntrypoint)}; + +export const setup = async (app) => { + if ('default' in mod) { + await mod.default(app); + } else { + ${ + !isBuild + ? `console.warn("[@astrojs/vue] appEntrypoint \`" + ${JSON.stringify( + appEntrypoint, + )} + "\` does not export a default function. Check out https://docs.astro.build/en/guides/integrations-guide/vue/#appentrypoint.");` + : '' + } + } +}`; + } + return `export const setup = () => {};`; + } + }, + // Ensure that Vue components reference appEntrypoint directly + // This allows Astro to associate global styles imported in this file + // with the pages they should be injected to + transform(code, id) { + if (!appEntrypoint) return; + if (id.endsWith('.vue')) { + const s = new MagicString(code); + s.prepend(`import ${JSON.stringify(appEntrypoint)};\n`); + return { + code: s.toString(), + map: s.generateMap({ hires: 'boundary' }), + }; + } + }, + }; +} + +async function getViteConfiguration( + command: HookParameters<'astro:config:setup'>['command'], + options?: Options, +): Promise<UserConfig> { + let vueOptions = { + ...options, + template: { + ...options?.template, + transformAssetUrls: false, + }, + } satisfies VueOptions; + + const config: UserConfig = { + optimizeDeps: { + // We add `vue` here as `@vitejs/plugin-vue` doesn't add it and we want to prevent + // re-optimization if the `vue` import is only encountered later. + include: ['@astrojs/vue/client.js', 'vue'], + exclude: ['@astrojs/vue/server.js', VIRTUAL_MODULE_ID], + }, + plugins: [vue(vueOptions), virtualAppEntrypoint(vueOptions)], + ssr: { + noExternal: ['vuetify', 'vueperslides', 'primevue'], + }, + }; + + if (options?.jsx) { + const vueJsx = (await import('@vitejs/plugin-vue-jsx')).default; + const jsxOptions = typeof options.jsx === 'object' ? options.jsx : undefined; + config.plugins?.push(vueJsx(jsxOptions)); + } + + if (command === 'dev' && options?.devtools) { + const vueDevTools = (await import('vite-plugin-vue-devtools')).default; + const devToolsOptions = typeof options.devtools === 'object' ? options.devtools : {}; + config.plugins?.push( + vueDevTools({ + ...devToolsOptions, + appendTo: VIRTUAL_MODULE_ID, + }), + ); + } + + return config; +} + +export default function (options?: Options): AstroIntegration { + return { + name: '@astrojs/vue', + hooks: { + 'astro:config:setup': async ({ addRenderer, updateConfig, command }) => { + addRenderer(getRenderer()); + if (options?.jsx) { + addRenderer(getJsxRenderer()); + } + updateConfig({ vite: await getViteConfiguration(command, options) }); + }, + 'astro:config:done': ({ logger, config }) => { + if (!options?.jsx) return; + + const knownJsxRenderers = ['@astrojs/react', '@astrojs/preact', '@astrojs/solid-js']; + const enabledKnownJsxRenderers = config.integrations.filter((renderer) => + knownJsxRenderers.includes(renderer.name), + ); + + // This error can only be thrown from here since Vue is an optional JSX renderer + if (enabledKnownJsxRenderers.length > 1 && !options?.include && !options?.exclude) { + logger.warn( + 'More than one JSX renderer is enabled. This will lead to unexpected behavior unless you set the `include` or `exclude` option. See https://docs.astro.build/en/guides/integrations-guide/solid-js/#combining-multiple-jsx-frameworks for more information.', + ); + } + }, + }, + }; +} |