vitrify 0.19.0 → 0.20.0

package/src/node/frameworks/vue/prerender.ts

@@ -1,7 +1,7 @@
 import { existsSync, promises as fs, mkdirSync } from 'fs'
 import type { OnRenderedHook } from 'src/node/vitrify-config.js'
 import { routesToPaths } from '../../helpers/routes.js'
-import { appendToHead, addOrReplaceAppDiv } from '../../helpers/utils.js'
+import { renderHtml } from './fastify-ssr-plugin.js'
 
 export const prerender = async ({
   outDir,
@@ -44,21 +44,17 @@ export const prerender = async ({
     const filename =
       (url.endsWith('/') ? 'index' : url.replace(/^\//g, '')) + '.html'
     console.log(`Generating ${filename}`)
-    const ssrContext = {
-      req: { headers: {}, url },
-      res: {}
-    }
-    const [appHtml, preloadLinks] = await render(url, manifest, ssrContext)
-
-    let html = addOrReplaceAppDiv(appHtml, template)
-    html = appendToHead(preloadLinks, html)
-
-    if (onRendered?.length) {
-      for (const ssrFunction of onRendered) {
-        html = ssrFunction(html, ssrContext)
-      }
-    }
 
+    let html = await renderHtml({
+      url,
+      manifest,
+      provide: {},
+      render,
+      request: { headers: {}, url },
+      reply: {},
+      template,
+      onRendered
+    })
     html = await beasties.process(html)
 
     promises.push(fs.writeFile(outDir + filename, html, 'utf-8'))

package/src/node/index.ts

@@ -34,8 +34,6 @@ import Components from 'unplugin-vue-components/vite'
 import { VitePWA } from 'vite-plugin-pwa'
 import UnoCSS from 'unocss/vite'
 
-import { QuasarPreset } from './plugins/quasar/unocss/index.js'
-
 const internalServerModules = [
   'util',
   'vitrify',
@@ -654,6 +652,7 @@ export const baseConfig = async ({
       input: [
         fileURLToPath(new URL('ssr/entry-server.ts', frameworkDir)),
         fileURLToPath(new URL('ssr/prerender.ts', frameworkDir)),
+        fileURLToPath(new URL('ssr/fastify-ssr-plugin.ts', frameworkDir)),
         fileURLToPath(new URL('ssr/server.ts', frameworkDir))
       ],
       external,
@@ -746,7 +745,7 @@ export const baseConfig = async ({
 
 export const vitrifyDir = new URL('..', import.meta.url)
 export { prerender } from './frameworks/vue/prerender.js'
-export { QuasarPreset }
+
 export type {
   VitrifyConfig,
   VitrifyConfigAsync,

package/src/vite/vue/csr/app.ts

@@ -3,7 +3,6 @@ import { getAppDir } from '../../../node/app-urls.js'
 // import { setup } from 'virtual:fastify-setup'
 import { onSetup } from 'virtual:vitrify-hooks'
 import { fastifyCsrPlugin } from './fastify-csr-plugin'
-import type { ViteDevServer } from 'vite'
 
 // const appDir = getPkgJsonDir(import.meta.url)
 const getString = (str?: string) => str

package/src/vite/vue/main.ts

@@ -7,12 +7,11 @@ import 'virtual:uno.css'
 
 import RootComponent from './RootComponent.vue'
 interface ssrContext {
-  ssr: boolean
   provide?: Record<string, unknown>
   [key: string]: unknown
 }
 
-function capitalizeFirstLetter(string) {
+function capitalizeFirstLetter(string: string) {
   return string.charAt(0).toUpperCase() + string.slice(1)
 }
 

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

@@ -1,11 +1,16 @@
-import { createApp } from '../main'
+import { type FastifyReply, type FastifyRequest } from 'fastify'
+import { createApp } from '../main.js'
+import { renderToString as renderToStringVue } from 'vue/server-renderer'
 
-const initializeApp = async (url, ssrContext) => {
-  const onRenderedList = []
+const initializeApp = async (
+  url: string,
+  ssrContext: Record<string, unknown>
+) => {
+  const onRenderedList: (() => unknown)[] = []
   Object.assign(ssrContext, {
     _modules: new Set(),
     _meta: {},
-    onRendered: (fn) => {
+    onRendered: (fn: () => unknown) => {
       onRenderedList.push(fn)
     }
   })
@@ -27,28 +32,43 @@ const initializeApp = async (url, ssrContext) => {
 export const getRoutes = async () =>
   (
     await initializeApp('/', {
-      ssr: false,
       req: { headers: {}, url: '/' },
       res: {}
     })
   ).routes
 
-export async function render(url, manifest, ssrContext, renderToString) {
+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
+) {
   if (!renderToString)
     renderToString = (await import('vue/server-renderer')).renderToString
   const { app, router } = await initializeApp(url, ssrContext)
 
-  const ctx = {
+  const ctx: {
+    modules?: Map<unknown, unknown>
+    transports?: Record<string, unknown>
+    __qMetaList: unknown[]
+  } = {
     __qMetaList: []
   }
   const html = await renderToString(app, ctx)
 
-  const preloadLinks = renderPreloadLinks(ctx.modules, manifest)
+  const preloadLinks = renderPreloadLinks(ctx.modules!, manifest)
 
   return [html, preloadLinks]
 }
 
-function renderPreloadLinks(modules, manifest) {
+function renderPreloadLinks(
+  modules: Map<unknown, unknown>,
+  manifest: Record<string, unknown>
+) {
   let links = ''
   const seen = new Set()
   modules.forEach((id) => {

package/src/vite/vue/ssr/fastify-ssr-plugin.ts

@@ -1,3 +1,6 @@
-import { fastifySsrPlugin } from '../../../node/frameworks/vue/fastify-ssr-plugin.js'
+import {
+  fastifySsrPlugin,
+  renderHtml
+} from '../../../node/frameworks/vue/fastify-ssr-plugin.js'
 
-export { fastifySsrPlugin }
+export { fastifySsrPlugin, renderHtml }

package/dist/plugins/quasar/unocss/core/colors.unocss.js

@@ -1,17 +0,0 @@
-const preflights = [
-    {
-        getCSS: ({ theme }) => `
-:root {
-  --q-primary: ${theme.colors.primary};
-  --q-secondary: ${theme.colors.secondary};
-  --q-accent: ${theme.colors.accent};
-  --q-positive: ${theme.colors.positive};
-  --q-negative: ${theme.colors.negative};
-  --q-info: ${theme.colors.info};
-  --q-warning: ${theme.colors.warning};
-  --q-dark: ${theme.colors['dark']};
-  --q-dark-page: ${theme.colors['dark-page']};
-}`
-    }
-];
-export { preflights };

package/dist/plugins/quasar/unocss/core/dark.unocss.js

@@ -1,13 +0,0 @@
-const preflights = [
-    {
-        getCSS: ({ theme }) => `
-body.body--dark {
-  color: #fff;
-  background: ${theme.colors['dark-page']};
-}`
-    }
-];
-const shortcuts = [
-    [/^q-dark$/, ([, c], { theme }) => `text-white bg-dark`]
-];
-export { preflights, shortcuts };

package/dist/plugins/quasar/unocss/core/elevation.unocss.js

@@ -1,172 +0,0 @@
-// const shadows = (mode: 'light' | 'dark'): Rule<QuasarTheme>[] => [
-//   ...Array.from({ length: 24 }, (_, i) => i + 1).reduce((acc, z) => {
-//     acc.push([
-//       new RegExp(`shadow-${z}`),
-//       ([, c], { symbols, theme }) => ({
-//         [symbols.parent]: mode === 'dark' ? 'body.body--dark' : undefined,
-//         'box-shadow': theme['shadows'][z as IntRange<0, 24>]
-//       })
-//     ])
-//     acc.push([
-//       new RegExp(`shadow-up-${z}`),
-//       ([, c], { symbols, theme }) => ({
-//         [symbols.parent]: mode === 'dark' ? 'body.body--dark' : undefined,
-//         'box-shadow': theme['shadows']['up'][z as IntRange<0, 24>]
-//       })
-//     ])
-//     return acc
-//   }, [] as Rule<QuasarTheme>[]),
-//   [
-//     /^inset-shadow$/,
-//     function* ([, color], { symbols, theme }) {
-//       yield {
-//         [symbols.parent]: mode === 'dark' ? 'body.body--dark' : undefined,
-//         'box-shadow': theme['insetShadow']
-//       }
-//     }
-//   ] as Rule<QuasarTheme>,
-//   [
-//     /^inset-shadow-down$/,
-//     function* ([, color], { symbols, theme }) {
-//       yield {
-//         [symbols.parent]: mode === 'dark' ? 'body.body--dark' : undefined,
-//         'box-shadow': theme['insetShadowDown']
-//       }
-//     }
-//   ] as Rule<QuasarTheme>
-// ]
-const rules = [
-    // [
-    //   /^shadow-transition$/,
-    //   function* ([, color], { theme }) {
-    //     yield {
-    //       transition: `${theme['shadowTransition']} !important`
-    //     }
-    //   }
-    // ] as Rule<QuasarTheme>,
-    // ...shadows('light'),
-    // ...shadows('dark'),
-    // ...['no-shadow', 'shadow-0'].map(
-    //   (c) =>
-    //     [
-    //       new RegExp(`${c}`),
-    //       function* ([, color], { theme }) {
-    //         yield {
-    //           'box-shadow': `none !important`
-    //         }
-    //       }
-    //     ] as Rule<QuasarTheme>
-    // ),
-    ...['z-marginals', 'z-notify', 'z-fullscreen', 'z-inherit'].map((c) => [
-        new RegExp(`${c}`),
-        function* ([, color], { theme }) {
-            const selector = c.replace('z-', '');
-            yield {
-                'z-index': c === 'z-inherit' ? 'inherit' : theme.quasar?.['z'][selector]
-            };
-        }
-    ])
-];
-const shortcuts = [
-    [/^shadow-none$/, ([, c], { theme }) => `shadow-none`],
-    [/^no-shadow$/, ([, c], { theme }) => `shadow-none`],
-    // TODO
-    [/^shadow-(0?[1-9]|1[0-9]|2[0-4])$/, ([, nr], { theme }) => `shadow-md`],
-    [
-        /^elevation-1$/,
-        ([, nr], { theme }) => `shadow-[0px_1px_3px_0px_rgba(0,_0,_0,_0.2),0px_1px_1px_0px_rgba(0,_0,_0,_0.14),0px_2px_1px_-1px_rgba(0,_0,_0,_0.12)]`
-    ],
-    [
-        /^elevation-2$/,
-        ([, nr], { theme }) => `shadow-[0px_1px_5px_0px_rgba(0,_0,_0,_0.2),0px_2px_2px_0px_rgba(0,_0,_0,_0.14),0px_3px_1px_-2px_rgba(0,_0,_0,_0.12)]`
-    ],
-    [
-        /^elevation-3$/,
-        ([, nr], { theme }) => `shadow-[0px_1px_8px_0px_rgba(0,_0,_0,_0.2),0px_3px_4px_0px_rgba(0,_0,_0,_0.14),0px_3px_3px_-2px_rgba(0,_0,_0,_0.12)]`
-    ],
-    [
-        /^elevation-4$/,
-        ([, nr], { theme }) => `shadow-[0px_2px_4px_-1px_rgba(0,_0,_0,_0.2),0px_4px_5px_0px_rgba(0,_0,_0,_0.14),0px_1px_10px_0px_rgba(0,_0,_0,_0.12)]`
-    ],
-    [
-        /^elevation-5$/,
-        ([, nr], { theme }) => `shadow-[0px_3px_5px_-1px_rgba(0,_0,_0,_0.2),0px_5px_8px_0px_rgba(0,_0,_0,_0.14),0px_1px_14px_0px_rgba(0,_0,_0,_0.12)]`
-    ],
-    [
-        /^elevation-6$/,
-        ([, nr], { theme }) => `shadow-[0px_3px_5px_-1px_rgba(0,_0,_0,_0.2),0px_6px_10px_0px_rgba(0,_0,_0,_0.14),0px_1px_18px_0px_rgba(0,_0,_0,_0.12)]`
-    ],
-    [
-        /^elevation-7$/,
-        ([, nr], { theme }) => `shadow-[0px_4px_5px_-2px_rgba(0,_0,_0,_0.2),0px_7px_10px_1px_rgba(0,_0,_0,_0.14),0px_2px_16px_1px_rgba(0,_0,_0,_0.12)]`
-    ],
-    [
-        /^elevation-8$/,
-        ([, nr], { theme }) => `shadow-[0px_5px_5px_-3px_rgba(0,_0,_0,_0.2),0px_8px_10px_1px_rgba(0,_0,_0,_0.14),0px_3px_14px_2px_rgba(0,_0,_0,_0.12)]`
-    ],
-    [
-        /^elevation-9$/,
-        ([, nr], { theme }) => `shadow-[0px_5px_6px_-3px_rgba(0,_0,_0,_0.2),0px_9px_12px_1px_rgba(0,_0,_0,_0.14),0px_3px_16px_2px_rgba(0,_0,_0,_0.12)]`
-    ],
-    [
-        /^elevation-10$/,
-        ([, nr], { theme }) => `shadow-[0px_6px_6px_-3px_rgba(0,_0,_0,_0.2),0px_10px_14px_1px_rgba(0,_0,_0,_0.14),0px_4px_18px_3px_rgba(0,_0,_0,_0.12)]`
-    ],
-    [
-        /^elevation-11$/,
-        ([, nr], { theme }) => `shadow-[0px_6px_7px_-4px_rgba(0,_0,_0,_0.2),0px_11px_15px_1px_rgba(0,_0,_0,_0.14),0px_4px_20px_3px_rgba(0,_0,_0,_0.12)]`
-    ],
-    [
-        /^elevation-12$/,
-        ([, nr], { theme }) => `shadow-[0px_7px_8px_-4px_rgba(0,_0,_0,_0.2),0px_12px_17px_2px_rgba(0,_0,_0,_0.14),0px_5px_22px_4px_rgba(0,_0,_0,_0.12)]`
-    ],
-    [
-        /^elevation-13$/,
-        ([, nr], { theme }) => `shadow-[0px_7px_8px_-4px_rgba(0,_0,_0,_0.2),0px_13px_19px_2px_rgba(0,_0,_0,_0.14),0px_5px_24px_4px_rgba(0,_0,_0,_0.12)]`
-    ],
-    [
-        /^elevation-14$/,
-        ([, nr], { theme }) => `shadow-[0px_7px_9px_-4px_rgba(0,_0,_0,_0.2),0px_14px_21px_2px_rgba(0,_0,_0,_0.14),0px_5px_26px_4px_rgba(0,_0,_0,_0.12)]`
-    ],
-    [
-        /^elevation-15$/,
-        ([, nr], { theme }) => `shadow-[0px_8px_9px_-5px_rgba(0,_0,_0,_0.2),0px_15px_22px_2px_rgba(0,_0,_0,_0.14),0px_6px_28px_5px_rgba(0,_0,_0,_0.12)]`
-    ],
-    [
-        /^elevation-16$/,
-        ([, nr], { theme }) => `shadow-[0px_8px_10px_-5px_rgba(0,_0,_0,_0.2),0px_16px_24px_2px_rgba(0,_0,_0,_0.14),0px_6px_30px_5px_rgba(0,_0,_0,_0.12)]`
-    ],
-    [
-        /^elevation-17$/,
-        ([, nr], { theme }) => `shadow-[0px_8px_11px_-5px_rgba(0,_0,_0,_0.2),0px_17px_26px_2px_rgba(0,_0,_0,_0.14),0px_6px_32px_5px_rgba(0,_0,_0,_0.12)]`
-    ],
-    [
-        /^elevation-18$/,
-        ([, nr], { theme }) => `shadow-[0px_9px_11px_-5px_rgba(0,_0,_0,_0.2),0px_18px_28px_2px_rgba(0,_0,_0,_0.14),0px_7px_34px_6px_rgba(0,_0,_0,_0.12)]`
-    ],
-    [
-        /^elevation-19$/,
-        ([, nr], { theme }) => `shadow-[0px_9px_12px_-6px_rgba(0,_0,_0,_0.2),0px_19px_29px_2px_rgba(0,_0,_0,_0.14),0px_7px_36px_6px_rgba(0,_0,_0,_0.12)]`
-    ],
-    [
-        /^elevation-20$/,
-        ([, nr], { theme }) => `shadow-[0px_10px_13px_-6px_rgba(0,_0,_0,_0.2),0px_20px_31px_3px_rgba(0,_0,_0,_0.14),0px_8px_38px_7px_rgba(0,_0,_0,_0.12)]`
-    ],
-    [
-        /^elevation-21$/,
-        ([, nr], { theme }) => `shadow-[0px_10px_13px_-6px_rgba(0,_0,_0,_0.2),0px_21px_33px_3px_rgba(0,_0,_0,_0.14),0px_8px_40px_7px_rgba(0,_0,_0,_0.12)]`
-    ],
-    [
-        /^elevation-22$/,
-        ([, nr], { theme }) => `shadow-[0px_10px_14px_-6px_rgba(0,_0,_0,_0.2),0px_22px_35px_3px_rgba(0,_0,_0,_0.14),0px_8px_42px_7px_rgba(0,_0,_0,_0.12)]`
-    ],
-    [
-        /^elevation-23$/,
-        ([, nr], { theme }) => `shadow-[0px_11px_14px_-7px_rgba(0,_0,_0,_0.2),0px_23px_36px_3px_rgba(0,_0,_0,_0.14),0px_9px_44px_8px_rgba(0,_0,_0,_0.12)]`
-    ],
-    [
-        /^elevation-24$/,
-        ([, nr], { theme }) => `shadow-[0px_11px_15px_-7px_rgba(0,_0,_0,_0.2),0px_24px_38px_3px_rgba(0,_0,_0,_0.14),0px_9px_46px_8px_rgba(0,_0,_0,_0.12)]`
-    ]
-];
-export { rules, shortcuts };

package/dist/plugins/quasar/unocss/core/flex.unocss.js

@@ -1,73 +0,0 @@
-const cols = 12;
-const grid = Array.from({ length: cols }, (_, i) => i + 1);
-const colGutter = {
-    none: 0,
-    xs: 1,
-    sm: 2,
-    md: 4,
-    lg: 6,
-    xl: 12
-};
-const shortcuts = [
-    [
-        /^row$/,
-        ([, c], { theme }) => `flex flex-row flex-wrap flex-auto [&.reverse]:(flex-row-reverse)`
-    ],
-    [
-        /^column$/,
-        ([, c], { theme }) => `flex flex-col flex-wrap flex-auto [&.reverse]:(flex-col-reverse)`
-    ],
-    [
-        /^col(?:-)?(none|xs|sm|md|lg|xl)?(?:-)?([2-9]|1[0-2]?)?$/,
-        ([, size, nr], { theme }) => {
-            if (size && nr) {
-                return `${size}:basis-${nr}/12)`;
-            }
-            else if (nr) {
-                return `basis-${nr}/12`;
-            }
-            else if (size) {
-                return `${size}:basis-auto ${size}:grow`;
-            }
-            return `grow`;
-        }
-    ],
-    [
-        /^q-col-gutter-(none|xs|sm|md|lg|xl)$/,
-        ([, size], { theme }) => `gap-${colGutter[size]}
-      [&_>_[class^="col"]]:(mr--${colGutter[size]})
-      [&_>_[class^="col"]]:(mb--${colGutter[size]})`
-    ],
-    [
-        /^q-col-gutter-x-(none|xs|sm|md|lg|xl)$/,
-        ([, size], { theme }) => `gap-x-${colGutter[size]}
-      [&_>_[class^="col"]]:(mr--${colGutter[size]})`
-    ],
-    [
-        /^q-col-gutter-y-(none|xs|sm|md|lg|xl)$/,
-        ([, size], { theme }) => `gap-y-${colGutter[size]}
-      [&_>_[class^="col"]]:(mb--${colGutter[size]})`
-    ],
-    [
-        /^q-gutter-(none|xs|sm|md|lg|xl)$/,
-        ([, size], { theme }) => `ml--${colGutter[size]}
-      mt--${colGutter[size]}
-      [&_>_*]:(mr-${colGutter[size]} mb-${colGutter[size]})`
-    ],
-    [
-        /^q-gutter-x-(none|xs|sm|md|lg|xl)$/,
-        ([, size], { theme }) => `ml--${colGutter[size]}
-        [&_>_*]:(mr-${colGutter[size]})`
-    ],
-    [
-        /^q-gutter-y-(none|xs|sm|md|lg|xl)$/,
-        ([, size], { theme }) => `mt--${colGutter[size]}
-        [&_>_*]:(mb-${colGutter[size]})`
-    ],
-    [/^wrap$/, ([, size], { theme }) => `flex-wrap`],
-    [/^no-wrap$/, ([, size], { theme }) => `flex-nowrap`],
-    [/^reverse-wrap$/, ([, size], { theme }) => `flex-wrap-reverse`],
-    [/^flex-center$/, ([, c], { theme }) => 'justify-center items-center'],
-    [/^inline$/, ([, c], { theme }) => 'flex-inline!']
-];
-export { shortcuts };

package/dist/plugins/quasar/unocss/core/helpers.unocss.js

@@ -1,57 +0,0 @@
-const preflights = [
-    {
-        getCSS: ({ theme }) => `
-body.electron .q-electron-drag {
-  -webkit-user-select: none;
-  -webkit-app-region: drag;
-}
-body.electron .q-electron-drag .q-btn-item, body.electron .q-electron-drag--exception {
-  -webkit-app-region: no-drag;
-}
-
-img.responsive {
-  max-width: 100%;
-  height: auto;
-}`
-    }
-];
-const rules = [
-    [
-        /^content-empty$/,
-        function* ([, color]) {
-            yield {
-                content: '""'
-            };
-        }
-    ]
-];
-const shortcuts = [
-    [/^rounded-borders$/, ([, c], { theme }) => `rounded-[4px]`],
-    [/^border-radius-inherit$/, ([, c], { theme }) => `[border-radius:inherit]`],
-    [/^no-transition$/, ([, c], { theme }) => `transition-none`],
-    [/^transition-0$/, ([, c], { theme }) => `[transition:0s!important]`],
-    [
-        /^glossy$/,
-        ([, c], { theme }) => `!bg-[linear-gradient(_to_bottom,_rgba(255,_255,_255,_0.3),_rgba(255,_255,_255,_0)_50%,_rgba(0,_0,_0,_0.12)_51%,_rgba(0,_0,_0,_0.04)_)]`
-    ],
-    [
-        /^q-placeholder::placeholder$/,
-        ([, c], { theme }) => `[color:inherit] opacity-70`
-    ],
-    [/^q-body--fullscreen-mixin$/, ([, c], { theme }) => `!fixed`],
-    [/^q-body--prevent-scroll$/, ([, c], { theme }) => `!fixed`],
-    [/^q-body--force-scrollbar-x$/, ([, c], { theme }) => `overflow-x-scroll`],
-    [/^q-body--force-scrollbar-y$/, ([, c], { theme }) => `overflow-y-scroll`],
-    [/^q-no-input-spinner$/, ([, c], { theme }) => ``],
-    [
-        /^q-no-input-spinner::-webkit-outer-spin-button$/,
-        ([, c], { theme }) => `m-0`
-    ],
-    [
-        /^q-no-input-spinner::-webkit-inner-spin-button$/,
-        ([, c], { theme }) => `m-0`
-    ],
-    [/^q-link$/, ([, c], { theme }) => `outline-0 no-underline`],
-    [/^q-link--focusable:focus-visible$/, ([, c], { theme }) => ``]
-];
-export { rules, preflights, shortcuts };