vitrify 0.8.0 → 0.9.2

package/README.md

@@ -1,9 +1,10 @@
 # Vitrify
 
-> Pre-configured Vite CLI for your framework
+> Vite as your Full Stack development tool
 
 - Use a simple configuration file to configure and integrate required Vite plugins into your project.
-- Client-Side Rendering (CSR), Server-Side Rendering (SSR) and Fastify server build and development modes.
+- Client-Side Rendering (CSR), Server-Side Rendering (SSR), Static Site Generation (SSG) and Fastify server build and development modes.
+- Run both your frontend- and backend code through Vite at development and build time.
 
 ## Features
 
@@ -73,14 +74,24 @@ Options:
     node/bin/cli.ts-->node/bin/dev.ts;
     node/bin/cli.ts-->node/bin/test.ts;
     node/bin/cli.ts-->node/bin/run.ts;
-    node/bin/build.ts-->node/index.ts{Load baseConfig};
-    node/bin/dev.ts-->node/index.ts{Load baseConfig};
-    node/index.ts-->vitrify.config.js{Load vitrify.config.js};
+    node/bin/build.ts-->node/index.ts
+    node/bin/dev.ts-->node/index.ts
+    node/index.ts{Load baseConfig}-->vitrify.config.js{Load vitrify.config.js};
+    subgraph baseconfig
     vitrify.config.js-->node/plugins{Load plugins};
-    node/plugins-->framework{Load framework entrypoints from vite/...};
-    framework-->merge{Merge vitrify.config.js with Vitrify configuration};
-    merge-->build{Build the application};
-    merge-->dev{Spin up dev server};
+    node/plugins-->merge{Merge vitrify.config.js with Vitrify configuration};
+    end
+    merge-- mode: fastify -->frameworkFastify{Load framework entrypoints from fastify/...};
+    merge-- mode: csr/ssr/ssg -->framework{Load framework entrypoints from vite/...};
+    frameworkFastify-->fastifyBuild{Build the application};
+    frameworkFastify-->fastifyDev{Start Fastify dev server};
+    fastifySetup{onSetup / onRendered}-->fastifyDev
+    fastifySetup{onSetup / onRendered}-->fastifyBuild
+    framework-->build{Build the application};
+    build-- mode: ssg -->prerender{Run prerender.js}
+    framework-->dev{Start Vite dev server};
+    frameworkSetup{onBoot / onMounted}-->dev
+    frameworkSetup{onBoot / onMounted}-->build
     node/bin/test.ts-->test{Run a pre-configured Vitest instance};
     node/bin/run.ts-->run{Inject context into script and run script};
 ```

package/dist/bin/cli.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import cac from 'cac';
 import { getAppDir, parsePath } from '../app-urls.js';
-import { printHttpServerUrls } from '../helpers/logger.js';
+import { printHttpServerUrls, exitLogs } from '../helpers/logger.js';
 const cli = cac('vitrify');
 cli
     .command('build')
@@ -135,6 +135,9 @@ cli
     }
     console.log('Dev server running at:');
     printHttpServerUrls(server, config);
+    for (const line of exitLogs) {
+        config.logger.warn(line);
+    }
 });
 cli.command('test').action(async (options) => {
     const { test } = await import('./test.js');

package/dist/bin/dev.js

@@ -2,6 +2,14 @@ import { searchForWorkspaceRoot } from 'vite';
 import { baseConfig } from '../index.js';
 import fastify from 'fastify';
 import { fastifySsrPlugin } from '../frameworks/vue/fastify-ssr-plugin.js';
+import isPortReachable from 'is-port-reachable';
+import { exitLogs } from '../helpers/logger.js';
+const getFirstOpenPort = async (portNumber) => {
+    if (!(await isPortReachable(portNumber, { host: 'localhost' }))) {
+        return portNumber;
+    }
+    return getFirstOpenPort(portNumber + 1);
+};
 export async function createVitrifyDevServer({ port = 3000, logLevel = 'info', 
 // mode = 'csr',
 ssr, framework = 'vue', host, appDir, publicDir, base }) {
@@ -25,11 +33,17 @@ ssr, framework = 'vue', host, appDir, publicDir, base }) {
         base
     });
     config.logLevel = logLevel;
+    config.define = {
+        ...config.define,
+        __HOST__: `'${host}'`
+    };
+    const wsPort = await getFirstOpenPort(24678);
+    exitLogs.push(`[warning] HTTPS mode enabled. Visit https://{hostname}:${wsPort} to enable a security exception for HMR.`);
     config.server = {
         https: config.server?.https,
         hmr: {
             protocol: config.server?.https ? 'wss' : 'ws',
-            port: 24678
+            port: wsPort
         },
         port,
         // middlewareMode: mode === 'ssr' ? 'ssr' : undefined,
@@ -100,7 +114,8 @@ ssr, framework = 'vue', host, appDir, publicDir }) {
             await app.register(fastifySsrPlugin, {
                 appDir,
                 mode: 'development',
-                onRendered
+                onRendered,
+                host
             });
         }
         await app.listen({

package/dist/frameworks/vue/fastify-ssr-plugin.js

@@ -23,7 +23,8 @@ const fastifySsrPlugin = async (fastify, options, done) => {
             appDir: options.appDir,
             ssr: 'ssr',
             framework: 'vue',
-            base: options.baseUrl
+            base: options.baseUrl,
+            host: options.host
         });
         // const { createServer, searchForWorkspaceRoot } = await import('vite')
         // const { baseConfig } = await import('vitrify')
@@ -91,11 +92,17 @@ const fastifySsrPlugin = async (fastify, options, done) => {
                     mods: matchedModules
                 });
                 const [appHtml, preloadLinks] = await render(url, manifest, ssrContext);
+                if (!ssrContext.initialState)
+                    ssrContext.initialState = {};
+                ssrContext.initialState.provide = provide;
                 let html = template
                     .replace(`<!--preload-links-->`, preloadLinks)
                     .replace(`<!--app-html-->`, appHtml)
                     .replace('<!--product-name-->', options.productName || 'Product name')
-                    .replace('<!--dev-ssr-css-->', css);
+                    .replace('<!--dev-ssr-css-->', css)
+                    .replace('<!--initial-state-->', `<script>
+            __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
+            </script>`);
                 if (options.onRendered?.length) {
                     for (const ssrFunction of options.onRendered) {
                         html = ssrFunction(html, ssrContext);
@@ -139,7 +146,10 @@ const fastifySsrPlugin = async (fastify, options, done) => {
             ssrContext.initialState.provide = provide;
             let html = template
                 .replace(`<!--preload-links-->`, preloadLinks)
-                .replace(`<!--app-html-->`, appHtml);
+                .replace(`<!--app-html-->`, appHtml)
+                .replace('<!--initial-state-->', `<script>
+          __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
+          </script>`);
             if (options.onRendered?.length) {
                 for (const ssrFunction of options.onRendered) {
                     html = ssrFunction(html, ssrContext);

package/dist/helpers/logger.js

@@ -2,6 +2,7 @@
 import chalk from 'chalk';
 import os from 'os';
 import { resolveHostname } from '../helpers/utils.js';
+export const exitLogs = [];
 export function printHttpServerUrls(server, config) {
     const address = server.address();
     const isAddressInfo = (x) => x?.address;

package/dist/index.js

@@ -460,6 +460,7 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
             noExternal
         },
         define: {
+            __HOST__: 'localhost',
             __BASE_URL__: `'${base}'`
         }
     };

package/dist/plugins/quasar.js

@@ -38,7 +38,6 @@ export const QuasarPlugin = async ({ ssr = false, pwa = false }) => {
             name: 'vite-plugin-quasar-transform',
             enforce: 'pre',
             transform: (code, id, options) => {
-                const { ssr } = options || {};
                 code = code
                     .replaceAll('__QUASAR_SSR__', ssr ? 'true' : 'false')
                     .replaceAll('__QUASAR_SSR_SERVER__', ssr ? '(import.meta.env.SSR === true)' : 'false')
@@ -52,7 +51,7 @@ export const QuasarPlugin = async ({ ssr = false, pwa = false }) => {
             enforce: 'pre',
             config: async (config, env) => {
                 const { vitrify: { urls } = {}, quasar } = config;
-                const globalCss = quasar?.extras.map((extra) => `@quasar/extras/${extra}/${extra}.css`);
+                const globalCss = quasar?.extras?.map((extra) => `@quasar/extras/${extra}/${extra}.css`);
                 const localPackages = ['@quasar/extras', 'quasar'];
                 // const localPackages: string[] = []
                 await (async () => {
@@ -77,10 +76,13 @@ export const QuasarPlugin = async ({ ssr = false, pwa = false }) => {
                         const directives = await import('virtual:quasar-directives');
                         // @ts-ignore
                         const { default: lang } = await import('virtual:quasar-lang');
+                        // @ts-ignore
+                        const { default: iconSet } = await import('virtual:quasar-iconSet');
                         app.use(staticImports?.Quasar, {
                             plugins: quasarPlugins,
                             directives,
-                            lang
+                            lang,
+                            iconSet
                         }, ssrContext);
                     }
                 ];
@@ -163,6 +165,8 @@ export const QuasarPlugin = async ({ ssr = false, pwa = false }) => {
                         return 'virtual:quasar-directives';
                     case 'virtual:quasar-lang':
                         return 'virtual:quasar-lang';
+                    case 'virtual:quasar-iconSet':
+                        return 'virtual:quasar-iconSet';
                     case 'virtual:quasar':
                         return { id: 'virtual:quasar', moduleSideEffects: false };
                     default:
@@ -179,6 +183,10 @@ export const QuasarPlugin = async ({ ssr = false, pwa = false }) => {
                 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 `import iconSet from 'quasar/icon-set/${quasarConf?.framework.iconSet || 'material-icons'}';
+          export default iconSet`;
                 }
                 else if (id === 'virtual:quasar') {
                     return `export * from 'quasar/src/plugins.js';

package/dist/types/frameworks/vue/fastify-ssr-plugin.d.ts

@@ -11,6 +11,7 @@ export interface FastifySsrOptions {
     publicDir?: URL;
     productName?: string;
     mode?: string;
+    host?: string;
 }
 declare const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions>;
 export { fastifySsrPlugin };

package/dist/types/helpers/logger.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="node" />
 import type { Server } from 'net';
 import type { ResolvedConfig } from 'vite';
+export declare const exitLogs: string[];
 export declare function printHttpServerUrls(server: Server, config: ResolvedConfig): void;

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

@@ -1,16 +1,16 @@
 import type { VitrifyPlugin } from './index.js';
 export interface QuasarConf {
-    ctx: Record<string, any>;
-    css: string[];
-    boot: string[];
+    ctx?: Record<string, any>;
+    css?: string[];
+    boot?: string[];
     framework: {
         components?: string[];
         directives?: string[];
         plugins?: string[];
         lang?: string;
+        iconSet?: string;
     };
-    animations: string[];
-    extras: string[];
+    extras?: string[];
 }
 export declare const injectSsrContext: (html: string, ssrContext: Record<string, any>) => string;
 export declare const QuasarPlugin: VitrifyPlugin;

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "vitrify",
-  "version": "0.8.0",
+  "version": "0.9.2",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
-  "description": "Pre-configured Vite CLI for your framework",
+  "description": "Vite as your Full Stack development tool",
   "type": "module",
   "bin": {
     "vitrify": "./dist/bin/cli.js"
@@ -70,6 +70,7 @@
     "fastify": "^4.3.0",
     "glob": "^8.0.3",
     "happy-dom": "^6.0.4",
+    "is-port-reachable": "^4.0.0",
     "magic-string": "^0.26.2",
     "merge-deep": "^3.0.3",
     "readline": "^1.3.0",
@@ -109,5 +110,10 @@
     "src",
     "!dist/**/*.test.js",
     "!dist/**/test.js"
+  ],
+  "keywords": [
+    "vite",
+    "full stack",
+    "fastify"
   ]
 }

package/src/node/bin/cli.ts

@@ -1,14 +1,8 @@
 #!/usr/bin/env node
 import cac from 'cac'
 import { getAppDir, parsePath } from '../app-urls.js'
-import { printHttpServerUrls } from '../helpers/logger.js'
-import type {
-  ConfigEnv,
-  ResolvedConfig,
-  UserConfig,
-  UserConfigExport,
-  ViteDevServer
-} from 'vite'
+import { printHttpServerUrls, exitLogs } from '../helpers/logger.js'
+import type { ResolvedConfig } from 'vite'
 import type { Server } from 'net'
 
 const cli = cac('vitrify')
@@ -157,6 +151,9 @@ cli
     }
     console.log('Dev server running at:')
     printHttpServerUrls(server, config)
+    for (const line of exitLogs) {
+      config.logger.warn(line)
+    }
   })
 
 cli.command('test').action(async (options) => {

package/src/node/bin/dev.ts

@@ -6,6 +6,15 @@ import fastify from 'fastify'
 import type { FastifyServerOptions } from 'fastify'
 import { fastifySsrPlugin } from '../frameworks/vue/fastify-ssr-plugin.js'
 import type { OnRenderedHook, VitrifyConfig } from '../vitrify-config.js'
+import isPortReachable from 'is-port-reachable'
+import { exitLogs } from '../helpers/logger.js'
+
+const getFirstOpenPort = async (portNumber: number): Promise<number> => {
+  if (!(await isPortReachable(portNumber, { host: 'localhost' }))) {
+    return portNumber
+  }
+  return getFirstOpenPort(portNumber + 1)
+}
 
 export async function createVitrifyDevServer({
   port = 3000,
@@ -51,11 +60,21 @@ export async function createVitrifyDevServer({
 
   config.logLevel = logLevel
 
+  config.define = {
+    ...config.define,
+    __HOST__: `'${host}'`
+  }
+
+  const wsPort = await getFirstOpenPort(24678)
+  exitLogs.push(
+    `[warning] HTTPS mode enabled. Visit https://{hostname}:${wsPort} to enable a security exception for HMR.`
+  )
+
   config.server = {
     https: config.server?.https,
     hmr: {
       protocol: config.server?.https ? 'wss' : 'ws',
-      port: 24678
+      port: wsPort
     },
     port,
     // middlewareMode: mode === 'ssr' ? 'ssr' : undefined,
@@ -153,7 +172,8 @@ export async function createServer({
       await app.register(fastifySsrPlugin, {
         appDir,
         mode: 'development',
-        onRendered
+        onRendered,
+        host
       })
     }
     await app.listen({

package/src/node/frameworks/vue/fastify-ssr-plugin.ts

@@ -8,7 +8,6 @@ import { readFileSync } from 'fs'
 import { componentsModules, collectCss } from '../../helpers/collect-css-ssr.js'
 import type { ViteDevServer } from 'vite'
 import type { OnRenderedHook } from 'src/node/vitrify-config.js'
-
 export interface FastifySsrOptions {
   baseUrl?: string
   provide?: (
@@ -23,6 +22,7 @@ export interface FastifySsrOptions {
   publicDir?: URL
   productName?: string
   mode?: string
+  host?: string
 }
 
 const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
@@ -55,7 +55,8 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
       appDir: options.appDir,
       ssr: 'ssr',
       framework: 'vue',
-      base: options.baseUrl
+      base: options.baseUrl,
+      host: options.host
     })
     // const { createServer, searchForWorkspaceRoot } = await import('vite')
     // const { baseConfig } = await import('vitrify')
@@ -101,7 +102,7 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
         const url = req.raw.url?.replace(options.baseUrl!, '/')
         const provide = options.provide ? await options.provide(req, res) : {}
 
-        const ssrContext = {
+        const ssrContext: Record<string, any> = {
           req,
           res,
           provide
@@ -133,11 +134,21 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
         })
 
         const [appHtml, preloadLinks] = await render(url, manifest, ssrContext)
+
+        if (!ssrContext.initialState) ssrContext.initialState = {}
+        ssrContext.initialState.provide = provide
+
         let html = template
           .replace(`<!--preload-links-->`, preloadLinks)
           .replace(`<!--app-html-->`, appHtml)
           .replace('<!--product-name-->', options.productName || 'Product name')
           .replace('<!--dev-ssr-css-->', css)
+          .replace(
+            '<!--initial-state-->',
+            `<script>
+            __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
+            </script>`
+          )
 
         if (options.onRendered?.length) {
           for (const ssrFunction of options.onRendered) {
@@ -196,6 +207,12 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
       let html = template
         .replace(`<!--preload-links-->`, preloadLinks)
         .replace(`<!--app-html-->`, appHtml)
+        .replace(
+          '<!--initial-state-->',
+          `<script>
+          __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
+          </script>`
+        )
 
       if (options.onRendered?.length) {
         for (const ssrFunction of options.onRendered) {

package/src/node/helpers/logger.ts

@@ -6,6 +6,8 @@ import os from 'os'
 import type { Hostname } from '../helpers/utils.js'
 import { resolveHostname } from '../helpers/utils.js'
 
+export const exitLogs: string[] = []
+
 export function printHttpServerUrls(
   server: Server,
   config: ResolvedConfig

package/src/node/index.ts

@@ -539,6 +539,7 @@ export const baseConfig = async ({
       noExternal
     },
     define: {
+      __HOST__: 'localhost',
       __BASE_URL__: `'${base}'`
     }
   } as VitrifyConfig

package/src/node/plugins/quasar.ts

@@ -9,17 +9,18 @@ import type {
 import { QuasarResolver } from 'unplugin-vue-components/resolvers'
 import type { VitrifyPlugin } from './index.js'
 export interface QuasarConf {
-  ctx: Record<string, any>
-  css: string[]
-  boot: string[]
+  ctx?: Record<string, any>
+  css?: string[]
+  boot?: string[]
   framework: {
     components?: string[]
     directives?: string[]
     plugins?: string[]
     lang?: string
+    iconSet?: string
   }
-  animations: string[]
-  extras: string[]
+  // animations: string[]
+  extras?: string[]
 }
 
 export const injectSsrContext = (
@@ -84,7 +85,6 @@ export const QuasarPlugin: VitrifyPlugin = async ({
       name: 'vite-plugin-quasar-transform',
       enforce: 'pre',
       transform: (code, id, options) => {
-        const { ssr } = options || {}
         code = code
           .replaceAll('__QUASAR_SSR__', ssr ? 'true' : 'false')
           .replaceAll(
@@ -109,7 +109,7 @@ export const QuasarPlugin: VitrifyPlugin = async ({
       config: async (config: VitrifyConfig, env): Promise<VitrifyConfig> => {
         const { vitrify: { urls } = {}, quasar } = config
 
-        const globalCss = quasar?.extras.map(
+        const globalCss = quasar?.extras?.map(
           (extra) => `@quasar/extras/${extra}/${extra}.css`
         )
 
@@ -143,13 +143,16 @@ export const QuasarPlugin: VitrifyPlugin = async ({
             const directives = await import('virtual:quasar-directives')
             // @ts-ignore
             const { default: lang } = await import('virtual:quasar-lang')
+            // @ts-ignore
+            const { default: iconSet } = await import('virtual:quasar-iconSet')
 
             app.use(
               staticImports?.Quasar,
               {
                 plugins: quasarPlugins,
                 directives,
-                lang
+                lang,
+                iconSet
               },
               ssrContext
             )
@@ -239,6 +242,8 @@ export const QuasarPlugin: VitrifyPlugin = async ({
             return 'virtual:quasar-directives'
           case 'virtual:quasar-lang':
             return 'virtual:quasar-lang'
+          case 'virtual:quasar-iconSet':
+            return 'virtual:quasar-iconSet'
           case 'virtual:quasar':
             return { id: 'virtual:quasar', moduleSideEffects: false }
           default:
@@ -255,6 +260,11 @@ export const QuasarPlugin: VitrifyPlugin = async ({
             quasarConf?.framework?.lang || 'en-US'
           }';
           export default lang`
+        } else if (id === 'virtual:quasar-iconSet') {
+          return `import iconSet from 'quasar/icon-set/${
+            quasarConf?.framework.iconSet || 'material-icons'
+          }';
+          export default iconSet`
         } else if (id === 'virtual:quasar') {
           return `export * from 'quasar/src/plugins.js';
           export * from 'quasar/src/components.js';

package/src/vite/vue/main.ts

@@ -55,6 +55,7 @@ export async function createApp(
     next()
   })
 
+  let initialState: Record<string, any>
   let provide: Record<string, unknown> = {}
   if (import.meta.env.SSR) {
     if (ssrContext?.provide) {
@@ -62,7 +63,11 @@ export async function createApp(
     }
   } else {
     // @ts-ignore
-    provide = window.__INITIAL_STATE__?.provide
+    if (window.__INITIAL_STATE__) {
+      // @ts-ignore
+      initialState = JSON.parse(window.__INITIAL_STATE__)
+      provide = initialState.provide
+    }
   }
   for (let key in provide) {
     app.provide(key, provide[key])