vitrify 0.16.3 → 0.17.0

package/dist/types/plugins/quasar/unocss/theme.d.ts

@@ -0,0 +1,425 @@
+import { type QuasarPresetOptions } from './index.js';
+declare const theme: (options?: QuasarPresetOptions) => {
+    colors: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        positive: string;
+        negative: string;
+        info: string;
+        warning: string;
+        'dark-page': string;
+        'q-dark': string;
+        red: string;
+        'red-1 ': string;
+        'red-2 ': string;
+        'red-3 ': string;
+        'red-4 ': string;
+        'red-5 ': string;
+        'red-6 ': string;
+        'red-7 ': string;
+        'red-8 ': string;
+        'red-9 ': string;
+        'red-10 ': string;
+        'red-11 ': string;
+        'red-12 ': string;
+        'red-13 ': string;
+        'red-14 ': string;
+        'pink ': string;
+        'pink-1 ': string;
+        'pink-2 ': string;
+        'pink-3 ': string;
+        'pink-4 ': string;
+        'pink-5 ': string;
+        'pink-6 ': string;
+        'pink-7 ': string;
+        'pink-8 ': string;
+        'pink-9 ': string;
+        'pink-10 ': string;
+        'pink-11 ': string;
+        'pink-12 ': string;
+        'pink-13 ': string;
+        'pink-14 ': string;
+        'purple ': string;
+        'purple-1 ': string;
+        'purple-2 ': string;
+        'purple-3 ': string;
+        'purple-4 ': string;
+        'purple-5 ': string;
+        'purple-6 ': string;
+        'purple-7 ': string;
+        'purple-8 ': string;
+        'purple-9 ': string;
+        'purple-10 ': string;
+        'purple-11 ': string;
+        'purple-12 ': string;
+        'purple-13 ': string;
+        'purple-14 ': string;
+        'deep-purple ': string;
+        'deep-purple-1 ': string;
+        'deep-purple-2 ': string;
+        'deep-purple-3 ': string;
+        'deep-purple-4 ': string;
+        'deep-purple-5 ': string;
+        'deep-purple-6 ': string;
+        'deep-purple-7 ': string;
+        'deep-purple-8 ': string;
+        'deep-purple-9 ': string;
+        'deep-purple-10 ': string;
+        'deep-purple-11 ': string;
+        'deep-purple-12 ': string;
+        'deep-purple-13 ': string;
+        'deep-purple-14 ': string;
+        'indigo ': string;
+        'indigo-1 ': string;
+        'indigo-2 ': string;
+        'indigo-3 ': string;
+        'indigo-4 ': string;
+        'indigo-5 ': string;
+        'indigo-6 ': string;
+        'indigo-7 ': string;
+        'indigo-8 ': string;
+        'indigo-9 ': string;
+        'indigo-10 ': string;
+        'indigo-11 ': string;
+        'indigo-12 ': string;
+        'indigo-13 ': string;
+        'indigo-14 ': string;
+        'blue ': string;
+        'blue-1 ': string;
+        'blue-2 ': string;
+        'blue-3 ': string;
+        'blue-4 ': string;
+        'blue-5 ': string;
+        'blue-6 ': string;
+        'blue-7 ': string;
+        'blue-8 ': string;
+        'blue-9 ': string;
+        'blue-10 ': string;
+        'blue-11 ': string;
+        'blue-12 ': string;
+        'blue-13 ': string;
+        'blue-14 ': string;
+        'light-blue ': string;
+        'light-blue-1 ': string;
+        'light-blue-2 ': string;
+        'light-blue-3 ': string;
+        'light-blue-4 ': string;
+        'light-blue-5 ': string;
+        'light-blue-6 ': string;
+        'light-blue-7 ': string;
+        'light-blue-8 ': string;
+        'light-blue-9 ': string;
+        'light-blue-10 ': string;
+        'light-blue-11 ': string;
+        'light-blue-12 ': string;
+        'light-blue-13 ': string;
+        'light-blue-14 ': string;
+        'cyan ': string;
+        'cyan-1 ': string;
+        'cyan-2 ': string;
+        'cyan-3 ': string;
+        'cyan-4 ': string;
+        'cyan-5 ': string;
+        'cyan-6 ': string;
+        'cyan-7 ': string;
+        'cyan-8 ': string;
+        'cyan-9 ': string;
+        'cyan-10 ': string;
+        'cyan-11 ': string;
+        'cyan-12 ': string;
+        'cyan-13 ': string;
+        'cyan-14 ': string;
+        'teal ': string;
+        'teal-1 ': string;
+        'teal-2 ': string;
+        'teal-3 ': string;
+        'teal-4 ': string;
+        'teal-5 ': string;
+        'teal-6 ': string;
+        'teal-7 ': string;
+        'teal-8 ': string;
+        'teal-9 ': string;
+        'teal-10 ': string;
+        'teal-11 ': string;
+        'teal-12 ': string;
+        'teal-13 ': string;
+        'teal-14 ': string;
+        'green ': string;
+        'green-1 ': string;
+        'green-2 ': string;
+        'green-3 ': string;
+        'green-4 ': string;
+        'green-5 ': string;
+        'green-6 ': string;
+        'green-7 ': string;
+        'green-8 ': string;
+        'green-9 ': string;
+        'green-10 ': string;
+        'green-11 ': string;
+        'green-12 ': string;
+        'green-13 ': string;
+        'green-14 ': string;
+        'light-green ': string;
+        'light-green-1 ': string;
+        'light-green-2 ': string;
+        'light-green-3 ': string;
+        'light-green-4 ': string;
+        'light-green-5 ': string;
+        'light-green-6 ': string;
+        'light-green-7 ': string;
+        'light-green-8 ': string;
+        'light-green-9 ': string;
+        'light-green-10 ': string;
+        'light-green-11 ': string;
+        'light-green-12 ': string;
+        'light-green-13 ': string;
+        'light-green-14 ': string;
+        'lime ': string;
+        'lime-1 ': string;
+        'lime-2 ': string;
+        'lime-3 ': string;
+        'lime-4 ': string;
+        'lime-5 ': string;
+        'lime-6 ': string;
+        'lime-7 ': string;
+        'lime-8 ': string;
+        'lime-9 ': string;
+        'lime-10 ': string;
+        'lime-11 ': string;
+        'lime-12 ': string;
+        'lime-13 ': string;
+        'lime-14 ': string;
+        'yellow ': string;
+        'yellow-1 ': string;
+        'yellow-2 ': string;
+        'yellow-3 ': string;
+        'yellow-4 ': string;
+        'yellow-5 ': string;
+        'yellow-6 ': string;
+        'yellow-7 ': string;
+        'yellow-8 ': string;
+        'yellow-9 ': string;
+        'yellow-10 ': string;
+        'yellow-11 ': string;
+        'yellow-12 ': string;
+        'yellow-13 ': string;
+        'yellow-14 ': string;
+        'amber ': string;
+        'amber-1 ': string;
+        'amber-2 ': string;
+        'amber-3 ': string;
+        'amber-4 ': string;
+        'amber-5 ': string;
+        'amber-6 ': string;
+        'amber-7 ': string;
+        'amber-8 ': string;
+        'amber-9 ': string;
+        'amber-10 ': string;
+        'amber-11 ': string;
+        'amber-12 ': string;
+        'amber-13 ': string;
+        'amber-14 ': string;
+        'orange ': string;
+        'orange-1 ': string;
+        'orange-2 ': string;
+        'orange-3 ': string;
+        'orange-4 ': string;
+        'orange-5 ': string;
+        'orange-6 ': string;
+        'orange-7 ': string;
+        'orange-8 ': string;
+        'orange-9 ': string;
+        'orange-10 ': string;
+        'orange-11 ': string;
+        'orange-12 ': string;
+        'orange-13 ': string;
+        'orange-14 ': string;
+        'deep-orange ': string;
+        'deep-orange-1 ': string;
+        'deep-orange-2 ': string;
+        'deep-orange-3 ': string;
+        'deep-orange-4 ': string;
+        'deep-orange-5 ': string;
+        'deep-orange-6 ': string;
+        'deep-orange-7 ': string;
+        'deep-orange-8 ': string;
+        'deep-orange-9 ': string;
+        'deep-orange-10 ': string;
+        'deep-orange-11 ': string;
+        'deep-orange-12 ': string;
+        'deep-orange-13 ': string;
+        'deep-orange-14 ': string;
+        'brown ': string;
+        'brown-1 ': string;
+        'brown-2 ': string;
+        'brown-3 ': string;
+        'brown-4 ': string;
+        'brown-5 ': string;
+        'brown-6 ': string;
+        'brown-7 ': string;
+        'brown-8 ': string;
+        'brown-9 ': string;
+        'brown-10 ': string;
+        'brown-11 ': string;
+        'brown-12 ': string;
+        'brown-13 ': string;
+        'brown-14 ': string;
+        'grey ': string;
+        'grey-1 ': string;
+        'grey-2 ': string;
+        'grey-3 ': string;
+        'grey-4 ': string;
+        'grey-5 ': string;
+        'grey-6 ': string;
+        'grey-7 ': string;
+        'grey-8 ': string;
+        'grey-9 ': string;
+        'grey-10 ': string;
+        'grey-11 ': string;
+        'grey-12 ': string;
+        'grey-13 ': string;
+        'grey-14 ': string;
+        'blue-grey ': string;
+        'blue-grey-1 ': string;
+        'blue-grey-2 ': string;
+        'blue-grey-3 ': string;
+        'blue-grey-4 ': string;
+        'blue-grey-5 ': string;
+        'blue-grey-6 ': string;
+        'blue-grey-7 ': string;
+        'blue-grey-8 ': string;
+        'blue-grey-9 ': string;
+        'blue-grey-10 ': string;
+        'blue-grey-11 ': string;
+        'blue-grey-12 ': string;
+        'blue-grey-13 ': string;
+        'blue-grey-14 ': string;
+    };
+    shadowColor: string;
+    shadowTransition: string;
+    insetShadow: string;
+    insetShadowDown: string;
+    shadows: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        13: string;
+        14: string;
+        15: string;
+        16: string;
+        17: string;
+        18: string;
+        19: string;
+        20: string;
+        21: string;
+        22: string;
+        23: string;
+        24: string;
+        up: {
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+            11: string;
+            12: string;
+            13: string;
+            14: string;
+            15: string;
+            16: string;
+            17: string;
+            18: string;
+            19: string;
+            20: string;
+            21: string;
+            22: string;
+            23: string;
+            24: string;
+        };
+        dark: {
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+            11: string;
+            12: string;
+            13: string;
+            14: string;
+            15: string;
+            16: string;
+            17: string;
+            18: string;
+            19: string;
+            20: string;
+            21: string;
+            22: string;
+            23: string;
+            24: string;
+            up: {
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                9: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+                16: string;
+                17: string;
+                18: string;
+                19: string;
+                20: string;
+                21: string;
+                22: string;
+                23: string;
+                24: string;
+            };
+        };
+    };
+    z: {
+        fab: number;
+        side: number;
+        marginals: number;
+        'fixed-drawer': number;
+        fullscreen: number;
+        menu: number;
+        top: number;
+        tooltip: number;
+        notify: number;
+        max: number;
+    };
+};
+export default theme;
+export type QuasarTheme = ReturnType<typeof theme>;

package/dist/types/plugins/quasar.d.ts

@@ -11,6 +11,7 @@ export interface QuasarConf {
         iconSet?: string;
     };
     extras?: string[];
+    disableSass?: boolean;
 }
 export declare const injectSsrContext: (html: string, ssrContext: Record<string, any>) => string;
 export declare const QuasarPlugin: VitrifyPlugin;

package/dist/types/vitrify-config.d.ts

@@ -1,8 +1,9 @@
-import type { Alias, UserConfig } from 'vite';
+import type { Alias, UserConfig as ViteUserConfig, ViteDevServer } from 'vite';
 import type { QuasarConf } from './plugins/quasar.js';
 import type { ComponentInternalInstance } from '@vue/runtime-core';
-import type { FastifyServerOptions } from 'fastify';
+import type { FastifyInstance, FastifyServerOptions } from 'fastify';
 import type { VitePWAOptions } from 'vite-plugin-pwa';
+import type { UserConfig as UnoCSSUserConfig } from '@unocss/core';
 export type BootFunction = ({ app, ssrContext, staticImports }: {
     app: any;
     ssrContext: Record<string, unknown>;
@@ -17,8 +18,11 @@ export type OnMountedHook = (instance: ComponentInternalInstance) => Promise<voi
 export type StaticImports = Record<string, string[]>;
 export type SsrFunction = (html: string, ssrContext: Record<string, any>) => string;
 export type OnRenderedHook = (html: string, ssrContext: Record<string, any>) => string;
+export type OnSetupHook = (fastify: FastifyInstance, options?: {
+    vite?: ViteDevServer;
+}) => any;
 export type OnSetupFile = URL;
-export interface VitrifyConfig extends UserConfig {
+export interface VitrifyConfig extends ViteUserConfig {
     vitrify?: {
         lang?: string;
         /**
@@ -89,6 +93,10 @@ export interface VitrifyConfig extends UserConfig {
          * Enables vite-plugin-pwa
          */
         pwa?: Partial<VitePWAOptions>;
+        /**
+         * UnoCSS Configuration
+         */
+        unocss?: UnoCSSUserConfig;
     };
     quasar?: QuasarConf;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitrify",
-  "version": "0.16.3",
+  "version": "0.17.0",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
   "description": "Vite as your Full Stack development tool",
@@ -46,48 +46,55 @@
   "dependencies": {
     "@fastify/middie": "^9.0.2",
     "@fastify/static": "^8.0.3",
+    "@unocss/core": "^0.65.2",
+    "@unocss/preset-uno": "^0.65.3",
+    "@unocss/preset-wind": "^0.65.3",
     "@vitejs/plugin-vue": "^5.2.1",
     "ajv": "^8.17.1",
+    "animated-unocss": "^0.0.6",
     "cac": "^6.7.14",
     "chalk": "^5.3.0",
-    "critters": "^0.0.25",
     "cross-env": "^7.0.3",
     "esbuild": "^0.24.0",
-    "fastify": "^5.1.0",
+    "fastify": "^5.2.0",
     "glob": "^11.0.0",
-    "happy-dom": "^15.11.6",
+    "happy-dom": "^15.11.7",
     "is-port-reachable": "^4.0.0",
-    "magic-string": "^0.30.14",
+    "magic-string": "^0.30.17",
     "merge-deep": "^3.0.3",
     "readline": "^1.3.0",
     "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "1.81.0",
+    "sass": "1.83.0",
     "ts-node": "^10.9.2",
-    "unplugin-vue-components": "^0.27.5",
-    "vite": "^6.0.1",
-    "vite-plugin-pwa": "^0.21.0",
+    "unocss": "^0.65.2",
+    "unplugin-vue-components": "^0.28.0",
+    "vite": "^6.0.3",
+    "vite-plugin-pwa": "^0.21.1",
     "vitefu": "^1.0.4",
-    "vitest": "^2.1.6",
+    "vitest": "^2.1.8",
     "workbox-window": "^7.3.0"
   },
   "devDependencies": {
-    "@quasar/extras": "^1.16.13",
+    "@quasar/extras": "^1.16.15",
     "@types/connect": "^3.4.38",
     "@types/glob": "^8.1.0",
     "@types/merge-deep": "^3.0.3",
-    "@types/node": "^22.10.0",
+    "@types/node": "^22.10.2",
     "@types/ws": "^8.5.13",
     "@vue/runtime-core": "^3.5.13",
-    "quasar": "^2.17.4",
-    "rollup": "^4.27.4",
+    "beasties": "^0.2.0",
+    "css": "^3.0.0",
+    "css-to-tailwind-translator": "^1.2.8",
+    "quasar": "^2.17.5",
+    "rollup": "^4.28.1",
     "typescript": "^5.7.2",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },
   "peerDependencies": {
     "@fastify/static": "^8.0.3",
-    "fastify": "^5.1.0",
-    "quasar": "^2.17.4",
+    "fastify": "^5.2.0",
+    "quasar": "^2.17.5",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },

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

@@ -1,4 +1,4 @@
-import { promises as fs } from 'fs'
+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'
@@ -24,15 +24,23 @@ export const prerender = async ({
   const paths = routesToPaths(routes).filter(
     (i) => !i.includes(':') && !i.includes('*')
   )
-  const critters = new (await import('critters')).default({
+  const beasties = new (await import('beasties')).default({
     path: outDir,
-    logLevel: 'warn',
+    logLevel: 'info',
     external: true,
     inlineFonts: true,
     preloadFonts: true
   })
 
   for (const url of paths) {
+    const directoryUrl = new URL(
+      url.split('/').slice(0, -1).join('/'),
+      `file://${outDir}`
+    )
+    if (!existsSync(directoryUrl.pathname)) {
+      mkdirSync(directoryUrl.pathname, { recursive: true })
+    }
+
     const filename =
       (url.endsWith('/') ? 'index' : url.replace(/^\//g, '')) + '.html'
     console.log(`Generating ${filename}`)
@@ -51,7 +59,7 @@ export const prerender = async ({
       }
     }
 
-    html = await critters.process(html)
+    html = await beasties.process(html)
 
     promises.push(fs.writeFile(outDir + filename, html, 'utf-8'))
   }

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

@@ -1,6 +1,6 @@
 import type { FastifyInstance } from 'fastify'
 import fastify from 'fastify'
-import type { OnRenderedHook, OnSetupFile } from '../../vitrify-config.js'
+import type { OnRenderedHook, OnSetupHook } from '../../vitrify-config.js'
 import type { FastifyCsrPlugin } from './fastify-csr-plugin.js'
 import type { FastifySsrPlugin } from './fastify-ssr-plugin.js'
 
@@ -13,11 +13,11 @@ export const createApp = ({
   vitrifyDir,
   mode
 }: {
-  onSetup: ((fastify: FastifyInstance) => void)[]
+  onSetup: OnSetupHook[]
   appDir: URL
   baseUrl?: string
   fastifyPlugin: FastifySsrPlugin | FastifyCsrPlugin
-  onRendered: OnRenderedHook[]
+  onRendered?: OnRenderedHook[]
   vitrifyDir?: URL
   mode: string
 }) => {

package/src/node/index.ts

@@ -1,5 +1,5 @@
 import vuePlugin from '@vitejs/plugin-vue'
-import type { Alias, InlineConfig, UserConfig } from 'vite'
+import type { Alias, InlineConfig, UserConfig as ViteUserConfig } from 'vite'
 import { findDepPkgJsonPath } from 'vitefu'
 import { mergeConfig } from 'vite'
 import { build } from 'esbuild'
@@ -32,6 +32,9 @@ import { addOrReplaceTitle, appendToBody } from './helpers/utils.js'
 import type { ComponentResolver } from 'unplugin-vue-components'
 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',
@@ -254,7 +257,12 @@ export const baseConfig = async ({
     throw e
   }
 
-  const localPackages = ['vue', 'vue-router', '@vue/server-renderer']
+  const localPackages = [
+    'vue',
+    'vue-router',
+    '@vue/server-renderer',
+    '@unocss/reset'
+  ]
   // const localPackages: string[] = []
   const cliPackages = []
   const packageUrls: Record<string, URL> =
@@ -323,7 +331,20 @@ export const baseConfig = async ({
       ...vitrifyConfig.vitrify.ssr.serverModules
     ]
 
-  const plugins: UserConfig['plugins'] = [
+  const unoCssContentPipelineInclude = [
+    /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/
+  ]
+  if (
+    vitrifyConfig.vitrify?.unocss?.presets?.some(async (preset) => {
+      if (!Array.isArray(preset)) {
+        return (await preset).name === 'quasar'
+      }
+    })
+  ) {
+    unoCssContentPipelineInclude.push(/quasar\/src\/.*\.js/)
+  }
+
+  const plugins: ViteUserConfig['plugins'] = [
     {
       name: 'vitrify-transforms',
       enforce: 'pre',
@@ -458,6 +479,10 @@ export const baseConfig = async ({
         /[\\/]\.nuxt[\\/]/
       ],
       resolvers
+    }),
+    UnoCSS({
+      ...vitrifyConfig.vitrify?.unocss,
+      content: unoCssContentPipelineInclude
     })
   ]
   if (isPwa) {
@@ -576,6 +601,10 @@ export const baseConfig = async ({
         new URL('./dist/vue-router.esm-bundler.js', packageUrls['vue-router'])
       )
     },
+    {
+      find: new RegExp('@unocss/reset'),
+      replacement: fileURLToPath(new URL('./', packageUrls['@unocss/reset']))
+    },
     ...vuePkgAliases
   ]
   if (mode === 'development' && vitrifyConfig.vitrify?.dev?.alias)
@@ -691,6 +720,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,