vitrify 0.9.1 → 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

@@ -3,6 +3,7 @@ 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;
@@ -32,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: await getFirstOpenPort(24678)
+            port: wsPort
         },
         port,
         // middlewareMode: mode === 'ssr' ? 'ssr' : undefined,
@@ -107,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/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,8 +1,8 @@
 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[];
@@ -10,8 +10,7 @@ export interface QuasarConf {
         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.9.1",
+  "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"
@@ -110,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

@@ -7,6 +7,7 @@ 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' }))) {
@@ -59,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: await getFirstOpenPort(24678)
+      port: wsPort
     },
     port,
     // middlewareMode: mode === 'ssr' ? 'ssr' : undefined,
@@ -161,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,9 +9,9 @@ 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[]
@@ -19,8 +19,8 @@ export interface QuasarConf {
     lang?: string
     iconSet?: string
   }
-  animations: string[]
-  extras: string[]
+  // animations: string[]
+  extras?: string[]
 }
 
 export const injectSsrContext = (

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])