vitrify 0.21.0 → 0.23.0

package/src/vite/vue/ssr/entry-server.ts

@@ -1,28 +1,10 @@
-import { type FastifyReply, type FastifyRequest } from 'fastify'
 import { createApp } from '../main.js'
-import { renderToString as renderToStringVue } from 'vue/server-renderer'
-
-const initializeApp = async (
-  url: string,
-  ssrContext: Record<string, unknown>
-) => {
-  const onRenderedList: (() => unknown)[] = []
-  Object.assign(ssrContext, {
-    _modules: new Set(),
-    _meta: {},
-    onRendered: (fn: () => unknown) => {
-      onRenderedList.push(fn)
-    }
-  })
+import type { Render, SSRContext } from '../../../node/vitrify-config.js'
 
+const initializeApp = async (url: string, ssrContext: SSRContext) => {
   const { app, router, routes } = await createApp('server', ssrContext)
 
   router.push({ path: url })
-  ssrContext.initialState = {}
-
-  onRenderedList.forEach((fn) => {
-    fn()
-  })
 
   await router.isReady()
 
@@ -33,36 +15,35 @@ export const getRoutes = async () =>
   (
     await initializeApp('/', {
       req: { headers: {}, url: '/' },
-      res: {}
+      res: {},
+      provide: {},
+      initialState: {},
+      onTemplateRenderedInternal: [],
+      _modules: new Set(),
+      _meta: {},
+      __qMetaList: [],
+      onRenderedList: [],
+      onRendered: (fn: () => unknown) => {
+        return
+      }
     })
   ).routes
 
-export async function render(
-  url: string,
-  manifest: Record<string, unknown>,
-  ssrContext: {
-    request: FastifyRequest | { headers: Record<string, unknown>; url: string }
-    reply: FastifyReply | Record<string, unknown>
-    provide: Record<string, unknown>
-  },
-  renderToString: typeof renderToStringVue
-) {
+export const render: Render = async (
+  url,
+  manifest,
+  ssrContext,
+  renderToString
+) => {
   if (!renderToString)
     renderToString = (await import('vue/server-renderer')).renderToString
   const { app, router } = await initializeApp(url, ssrContext)
 
-  const ctx: {
-    modules?: Map<unknown, unknown>
-    transports?: Record<string, unknown>
-    __qMetaList: unknown[]
-  } = {
-    __qMetaList: []
-  }
-  const html = await renderToString(app, ctx)
+  const html = await renderToString(app, ssrContext)
 
-  const preloadLinks = renderPreloadLinks(ctx.modules!, manifest)
+  const preloadLinks = renderPreloadLinks(ssrContext.modules!, manifest)
 
-  return [html, preloadLinks]
+  return { html, preloadLinks, app }
 }
 
 function renderPreloadLinks(

package/src/vite/vue/ssr/prerender.ts

@@ -1,4 +1,4 @@
 import { prerender } from '../../../node/frameworks/vue/prerender.js'
-import { onRendered } from 'virtual:vitrify-hooks'
+import { onTemplateRendered } from 'virtual:vitrify-hooks'
 
-export { prerender, onRendered }
+export { prerender, onTemplateRendered }

package/dist/plugins/quasar.js

@@ -1,217 +0,0 @@
-import { fileURLToPath } from 'url';
-import { findDepPkgJsonPath } from 'vitefu';
-export const injectSsrContext = (html, ssrContext) => html
-    .replace(/(<html[^>]*)(>)/i, (found, start, end) => {
-    let matches;
-    matches = found.match(/\sdir\s*=\s*['"]([^'"]*)['"]/i);
-    if (matches) {
-        start = start.replace(matches[0], '');
-    }
-    matches = found.match(/\slang\s*=\s*['"]([^'"]*)['"]/i);
-    if (matches) {
-        start = start.replace(matches[0], '');
-    }
-    return `${start} ${ssrContext._meta.htmlAttrs || ''} ${end}`;
-})
-    .replace(/(<head[^>]*)(>)/i, (_, start, end) => `${start}${end}${ssrContext._meta.headTags || ''}`)
-    .replace(/(<\/head>)/i, (_, tag) => `${ssrContext._meta.resourceStyles || ''}${ssrContext._meta.endingHeadTags || ''}${tag}`)
-    .replace(/(<body[^>]*)(>)/i, (found, start, end) => {
-    let classes = ssrContext._meta.bodyClasses || '';
-    const matches = found.match(/\sclass\s*=\s*['"]([^'"]*)['"]/i);
-    if (matches) {
-        if (matches[1].length > 0) {
-            classes += ` ${matches[1]}`;
-        }
-        start = start.replace(matches[0], '');
-    }
-    return `${start} class="${classes.trim()}" ${ssrContext._meta.bodyAttrs || ''}${end}${ssrContext._meta.bodyTags || ''}`;
-});
-export const QuasarPlugin = async ({ ssr = false, pwa = false }) => {
-    let plugins = [];
-    let quasarConf;
-    return [
-        {
-            name: 'vite-plugin-quasar-transform',
-            enforce: 'pre',
-            transform: (code, id, options) => {
-                code = code
-                    .replaceAll('__QUASAR_SSR__', ssr ? 'true' : 'false')
-                    .replaceAll('__QUASAR_SSR_SERVER__', ssr ? '(import.meta.env.SSR === true)' : 'false')
-                    .replaceAll('__QUASAR_SSR_CLIENT__', ssr ? '(import.meta.env.SSR === false)' : 'false')
-                    .replaceAll('__QUASAR_SSR_PWA__', ssr && pwa ? '(import.meta.env.SSR === false)' : 'false');
-                return code;
-            }
-        },
-        {
-            name: 'vite-plugin-quasar-setup',
-            enforce: 'pre',
-            config: async (config, env) => {
-                const { vitrify: { urls } = {}, quasar } = config;
-                const globalCss = quasar?.extras?.map((extra) => `@quasar/extras/${extra}/${extra}.css`);
-                const localPackages = ['@quasar/extras', 'quasar'];
-                // const localPackages: string[] = []
-                await (async () => {
-                    for (const val of localPackages) {
-                        const pkgDir = await findDepPkgJsonPath(val, fileURLToPath(config.vitrify.urls.app));
-                        if (pkgDir)
-                            urls.packages[val] = new URL(`file://${pkgDir}`);
-                    }
-                })();
-                const onMountedHooks = [
-                    async (instance) => {
-                        const { proxy: { $q } } = instance;
-                        if ($q.onSSRHydrated !== void 0)
-                            $q.onSSRHydrated();
-                    }
-                ];
-                const onBootHooks = [
-                    async ({ app, ssrContext, staticImports }) => {
-                        // @ts-expect-error undefined
-                        const quasarPlugins = await import('virtual:quasar-plugins');
-                        // @ts-expect-error undefined
-                        const directives = await import('virtual:quasar-directives');
-                        // @ts-expect-error undefined
-                        const { default: lang } = await import('virtual:quasar-lang');
-                        // @ts-expect-error undefined
-                        const { default: iconSet } = await import('virtual:quasar-iconSet');
-                        const { default: iconMapFn } = await import(
-                        // @ts-expect-error undefined
-                        'virtual:quasar-iconMapFn');
-                        app.use(staticImports?.Quasar, {
-                            plugins: quasarPlugins,
-                            directives,
-                            lang,
-                            iconSet,
-                            config: {
-                                iconMapFn
-                            }
-                        }, ssrContext);
-                    }
-                ];
-                if (quasar)
-                    quasarConf = quasar;
-                if (!quasarConf.framework.lang && config.vitrify?.lang)
-                    quasarConf.framework.lang = config.vitrify.lang;
-                /**
-                 * Importing package.json is problematic
-                 */
-                const version = '?';
-                /**
-                 * All components should have been auto-imported
-                 */
-                if (quasarConf?.framework?.plugins) {
-                    if (!quasarConf.framework)
-                        quasarConf.framework = {};
-                    quasarConf.framework.plugins = [
-                        ...new Set(quasarConf.framework.plugins)
-                    ];
-                    plugins = quasarConf?.framework.plugins;
-                }
-                return {
-                    vitrify: {
-                        urls,
-                        globalCss,
-                        staticImports: {
-                            quasar: ['Quasar']
-                        },
-                        hooks: {
-                            onBoot: onBootHooks,
-                            onMounted: onMountedHooks,
-                            onRendered: [injectSsrContext]
-                        },
-                        sass: quasarConf.disableSass
-                            ? undefined
-                            : {
-                                global: ['quasar/src/css/index.sass']
-                            }
-                    },
-                    resolve: {
-                        alias: [
-                            {
-                                find: 'quasar/src/',
-                                replacement: fileURLToPath(new URL('./src/', config.vitrify.urls.packages.quasar))
-                            }
-                        ]
-                    },
-                    optimizeDeps: {
-                        exclude: ['quasar']
-                    },
-                    define: {
-                        __DEV__: process.env.NODE_ENV !== 'production' || true,
-                        __QUASAR_VERSION__: `'${version}'`
-                    },
-                    ssr: {
-                        noExternal: ['quasar']
-                    }
-                };
-            }
-        },
-        {
-            name: 'quasar-virtual-modules',
-            enforce: 'pre',
-            config: async (config, env) => ({
-                resolve: {
-                    alias: [
-                        {
-                            find: new RegExp('^quasar$'),
-                            replacement: 'virtual:quasar'
-                        }
-                        // { find: new RegExp('^quasar$'), replacement: 'virtual:quasar' }
-                    ]
-                }
-            }),
-            resolveId(id) {
-                switch (id) {
-                    case 'virtual:quasar-plugins':
-                        return 'virtual:quasar-plugins';
-                    case 'virtual:quasar-directives':
-                        return 'virtual:quasar-directives';
-                    case 'virtual:quasar-lang':
-                        return 'virtual:quasar-lang';
-                    case 'virtual:quasar-iconSet':
-                        return 'virtual:quasar-iconSet';
-                    case 'virtual:quasar-iconMapFn':
-                        return 'virtual:quasar-iconMapFn';
-                    case 'virtual:quasar':
-                        return { id: 'virtual:quasar', moduleSideEffects: false };
-                    default:
-                        return;
-                }
-            },
-            load(id) {
-                if (id === 'virtual:quasar-plugins') {
-                    return `export { ${plugins.join(',')} } from 'quasar'`;
-                }
-                else if (id === 'virtual:quasar-directives') {
-                    return `export * from 'quasar/src/directives.js'`;
-                }
-                else if (id === 'virtual:quasar-lang') {
-                    return `import lang from 'quasar/lang/${quasarConf?.framework?.lang || 'en-US'}';
-          export default lang`;
-                }
-                else if (id === 'virtual:quasar-iconSet') {
-                    return `${typeof quasarConf.framework.iconSet === 'string'
-                        ? `import iconSet from 'quasar/icon-set/${quasarConf?.framework.iconSet || 'material-icons'}';
-          export default iconSet`
-                        : `export default ${quasarConf.framework.iconSet
-                            ? JSON.stringify(quasarConf.framework.iconSet)
-                            : null}`}`;
-                }
-                else if (id === 'virtual:quasar-iconMapFn') {
-                    return `export default ${quasarConf?.framework.iconMapFn?.toString() ?? null}`;
-                }
-                else if (id === 'virtual:quasar') {
-                    return `export * from 'quasar/src/plugins.js';
-          export * from 'quasar/src/components.js';
-          export * from 'quasar/src/composables.js';
-          export * from 'quasar/src/directives.js';
-          export * from 'quasar/src/utils.js';
-          export * from 'quasar/src/composables.js';
-          export { default as Quasar } from 'quasar/src/install-quasar.js'`;
-                }
-                return null;
-            }
-        }
-    ];
-};
-export default QuasarPlugin;

package/src/node/plugins/quasar.ts

@@ -1,307 +0,0 @@
-import type { Plugin } from 'vite'
-import { fileURLToPath } from 'url'
-import type {
-  OnBootHook,
-  OnMountedHook,
-  VitrifyConfig
-} from '../vitrify-config.js'
-import type { VitrifyPlugin } from './index.js'
-import { findDepPkgJsonPath } from 'vitefu'
-import {
-  type QuasarFonts,
-  type QuasarComponents,
-  type QuasarDirectives,
-  type QuasarIconSets,
-  type QuasarPlugins,
-  type GlobalQuasarIconMapFn,
-  type QuasarIconSet
-} from 'quasar'
-
-export interface QuasarConf {
-  framework: {
-    components?: (keyof QuasarComponents)[]
-    directives?: (keyof QuasarDirectives)[]
-    plugins?: (keyof QuasarPlugins)[]
-    lang?: string
-    iconSet?: QuasarIconSets | QuasarIconSet
-    iconMapFn?: GlobalQuasarIconMapFn
-  }
-  extras?: (QuasarIconSets | QuasarFonts)[]
-  disableSass?: boolean
-}
-
-export const injectSsrContext = (
-  html: string,
-  ssrContext: Record<string, any>
-) =>
-  html
-    .replace(/(<html[^>]*)(>)/i, (found, start, end) => {
-      let matches
-
-      matches = found.match(/\sdir\s*=\s*['"]([^'"]*)['"]/i)
-      if (matches) {
-        start = start.replace(matches[0], '')
-      }
-
-      matches = found.match(/\slang\s*=\s*['"]([^'"]*)['"]/i)
-      if (matches) {
-        start = start.replace(matches[0], '')
-      }
-
-      return `${start} ${ssrContext._meta.htmlAttrs || ''} ${end}`
-    })
-    .replace(
-      /(<head[^>]*)(>)/i,
-      (_, start, end) => `${start}${end}${ssrContext._meta.headTags || ''}`
-    )
-    .replace(
-      /(<\/head>)/i,
-      (_, tag) =>
-        `${ssrContext._meta.resourceStyles || ''}${
-          ssrContext._meta.endingHeadTags || ''
-        }${tag}`
-    )
-    .replace(/(<body[^>]*)(>)/i, (found, start, end) => {
-      let classes = ssrContext._meta.bodyClasses || ''
-
-      const matches = found.match(/\sclass\s*=\s*['"]([^'"]*)['"]/i)
-
-      if (matches) {
-        if (matches[1].length > 0) {
-          classes += ` ${matches[1]}`
-        }
-        start = start.replace(matches[0], '')
-      }
-
-      return `${start} class="${classes.trim()}" ${
-        ssrContext._meta.bodyAttrs || ''
-      }${end}${ssrContext._meta.bodyTags || ''}`
-    })
-
-export const QuasarPlugin: VitrifyPlugin = async ({
-  ssr = false,
-  pwa = false
-}): Promise<Plugin[]> => {
-  let plugins: string[] = []
-  let quasarConf: QuasarConf
-  return [
-    {
-      name: 'vite-plugin-quasar-transform',
-      enforce: 'pre',
-      transform: (code, id, options) => {
-        code = code
-          .replaceAll('__QUASAR_SSR__', ssr ? 'true' : 'false')
-          .replaceAll(
-            '__QUASAR_SSR_SERVER__',
-            ssr ? '(import.meta.env.SSR === true)' : 'false'
-          )
-          .replaceAll(
-            '__QUASAR_SSR_CLIENT__',
-            ssr ? '(import.meta.env.SSR === false)' : 'false'
-          )
-          .replaceAll(
-            '__QUASAR_SSR_PWA__',
-            ssr && pwa ? '(import.meta.env.SSR === false)' : 'false'
-          )
-
-        return code
-      }
-    },
-    {
-      name: 'vite-plugin-quasar-setup',
-      enforce: 'pre',
-      config: async (config: VitrifyConfig, env): Promise<VitrifyConfig> => {
-        const { vitrify: { urls } = {}, quasar } = config
-
-        const globalCss = quasar?.extras?.map(
-          (extra) => `@quasar/extras/${extra}/${extra}.css`
-        )
-
-        const localPackages = ['@quasar/extras', 'quasar']
-        // const localPackages: string[] = []
-        await (async () => {
-          for (const val of localPackages) {
-            const pkgDir = await findDepPkgJsonPath(
-              val,
-              fileURLToPath(config.vitrify!.urls!.app!)
-            )
-            if (pkgDir) urls!.packages![val] = new URL(`file://${pkgDir}`)
-          }
-        })()
-
-        const onMountedHooks: OnMountedHook[] = [
-          async (instance) => {
-            const {
-              proxy: { $q }
-            } = instance
-            if ($q.onSSRHydrated !== void 0) $q.onSSRHydrated()
-          }
-        ]
-
-        const onBootHooks: OnBootHook[] = [
-          async ({ app, ssrContext, staticImports }) => {
-            // @ts-expect-error undefined
-            const quasarPlugins = await import('virtual:quasar-plugins')
-            // @ts-expect-error undefined
-            const directives = await import('virtual:quasar-directives')
-            // @ts-expect-error undefined
-            const { default: lang } = await import('virtual:quasar-lang')
-            // @ts-expect-error undefined
-            const { default: iconSet } = await import('virtual:quasar-iconSet')
-            const { default: iconMapFn } = await import(
-              // @ts-expect-error undefined
-              'virtual:quasar-iconMapFn'
-            )
-
-            app.use(
-              staticImports?.Quasar,
-              {
-                plugins: quasarPlugins,
-                directives,
-                lang,
-                iconSet,
-                config: {
-                  iconMapFn
-                }
-              },
-              ssrContext
-            )
-          }
-        ]
-
-        if (quasar) quasarConf = quasar
-        if (!quasarConf.framework.lang && config.vitrify?.lang)
-          quasarConf.framework.lang = config.vitrify.lang
-
-        /**
-         * Importing package.json is problematic
-         */
-        const version = '?'
-
-        /**
-         * All components should have been auto-imported
-         */
-        if (quasarConf?.framework?.plugins) {
-          if (!quasarConf.framework) quasarConf.framework = {}
-          quasarConf.framework.plugins = [
-            ...new Set(quasarConf.framework.plugins)
-          ]
-          plugins = quasarConf?.framework.plugins
-        }
-
-        return {
-          vitrify: {
-            urls,
-            globalCss,
-            staticImports: {
-              quasar: ['Quasar']
-            },
-            hooks: {
-              onBoot: onBootHooks,
-              onMounted: onMountedHooks,
-              onRendered: [injectSsrContext]
-            },
-            sass: quasarConf.disableSass
-              ? undefined
-              : {
-                  global: ['quasar/src/css/index.sass']
-                }
-          },
-          resolve: {
-            alias: [
-              {
-                find: 'quasar/src/',
-                replacement: fileURLToPath(
-                  new URL('./src/', config.vitrify!.urls!.packages!.quasar)
-                )
-              }
-            ]
-          },
-          optimizeDeps: {
-            exclude: ['quasar']
-          },
-          define: {
-            __DEV__: process.env.NODE_ENV !== 'production' || true,
-            __QUASAR_VERSION__: `'${version}'`
-          },
-          ssr: {
-            noExternal: ['quasar']
-          }
-        }
-      }
-    },
-    {
-      name: 'quasar-virtual-modules',
-      enforce: 'pre',
-      config: async (config, env) => ({
-        resolve: {
-          alias: [
-            {
-              find: new RegExp('^quasar$'),
-              replacement: 'virtual:quasar'
-            }
-            // { find: new RegExp('^quasar$'), replacement: 'virtual:quasar' }
-          ]
-        }
-      }),
-      resolveId(id) {
-        switch (id) {
-          case 'virtual:quasar-plugins':
-            return 'virtual:quasar-plugins'
-          case 'virtual:quasar-directives':
-            return 'virtual:quasar-directives'
-          case 'virtual:quasar-lang':
-            return 'virtual:quasar-lang'
-          case 'virtual:quasar-iconSet':
-            return 'virtual:quasar-iconSet'
-          case 'virtual:quasar-iconMapFn':
-            return 'virtual:quasar-iconMapFn'
-          case 'virtual:quasar':
-            return { id: 'virtual:quasar', moduleSideEffects: false }
-          default:
-            return
-        }
-      },
-      load(id) {
-        if (id === 'virtual:quasar-plugins') {
-          return `export { ${plugins.join(',')} } from 'quasar'`
-        } else if (id === 'virtual:quasar-directives') {
-          return `export * from 'quasar/src/directives.js'`
-        } else if (id === 'virtual:quasar-lang') {
-          return `import lang from 'quasar/lang/${
-            quasarConf?.framework?.lang || 'en-US'
-          }';
-          export default lang`
-        } else if (id === 'virtual:quasar-iconSet') {
-          return `${
-            typeof quasarConf.framework.iconSet === 'string'
-              ? `import iconSet from 'quasar/icon-set/${
-                  quasarConf?.framework.iconSet || 'material-icons'
-                }';
-          export default iconSet`
-              : `export default ${
-                  quasarConf.framework.iconSet
-                    ? JSON.stringify(quasarConf.framework.iconSet)
-                    : null
-                }`
-          }`
-        } else if (id === 'virtual:quasar-iconMapFn') {
-          return `export default ${
-            quasarConf?.framework.iconMapFn?.toString() ?? null
-          }`
-        } else if (id === 'virtual:quasar') {
-          return `export * from 'quasar/src/plugins.js';
-          export * from 'quasar/src/components.js';
-          export * from 'quasar/src/composables.js';
-          export * from 'quasar/src/directives.js';
-          export * from 'quasar/src/utils.js';
-          export * from 'quasar/src/composables.js';
-          export { default as Quasar } from 'quasar/src/install-quasar.js'`
-        }
-        return null
-      }
-    }
-  ]
-}
-
-export default QuasarPlugin