vitrify 0.1.0 → 0.1.1

package/dist/types/index.d.ts

@@ -0,0 +1,15 @@
+import type { InlineConfig } from 'vite';
+import type { VitrifyConfig } from './vitrify-config.js';
+import type { VitrifyContext } from './bin/run.js';
+import type { VitrifyPlugin } from './plugins/index.js';
+export declare const VIRTUAL_MODULES: string[];
+export declare const baseConfig: ({ ssr, appDir, publicDir, command, mode, framework, pwa }: {
+    ssr?: "server" | "client" | "ssg" | undefined;
+    appDir?: URL | undefined;
+    publicDir?: URL | undefined;
+    command?: "build" | "dev" | "test" | undefined;
+    mode?: "production" | "development" | undefined;
+    framework?: "vue" | undefined;
+    pwa?: boolean | undefined;
+}) => Promise<InlineConfig>;
+export type { VitrifyConfig, VitrifyPlugin, VitrifyContext };

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

@@ -0,0 +1,7 @@
+import type { Plugin } from 'vite';
+export declare type VitrifyPlugin = ({ ssr, mode, command }: {
+    ssr?: 'server' | 'client' | 'ssg' | false;
+    pwa?: boolean;
+    mode?: 'production' | 'development';
+    command?: 'build' | 'dev' | 'test';
+}) => Promise<Plugin | Plugin[]> | Plugin | Plugin[];

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

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

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

@@ -0,0 +1,64 @@
+import type { FastifyInstance } from 'fastify';
+import type { UserConfig } from 'vite';
+import type { QuasarConf } from './plugins/quasar.js';
+import type { ComponentInternalInstance } from '@vue/runtime-core';
+export declare type BootFunction = ({ app, ssrContext, staticImports }: {
+    app: any;
+    ssrContext: Record<string, unknown>;
+    staticImports: Record<string, any>;
+}) => Promise<void> | void;
+export declare type OnMountedHook = (instance: ComponentInternalInstance) => Promise<void> | void;
+export declare type StaticImports = Record<string, string[]>;
+export declare type SsrFunction = (html: string, ssrContext: Record<string, any>) => string;
+export interface VitrifyConfig extends UserConfig {
+    vitrify?: {
+        /**
+         * Global CSS imports
+         */
+        globalCss?: string[];
+        /**
+         * Functions which run after initializing the app
+         */
+        bootFunctions?: BootFunction[];
+        /**
+         * Functions which run on the server after rendering the app
+         */
+        ssrFunctions?: SsrFunction[];
+        /**
+         * Static imports in the app: packageName: [imports]
+         */
+        staticImports?: StaticImports;
+        hooks?: {
+            /**
+             * Functions which run in the onMounted hook of the app
+             */
+            onMounted: OnMountedHook[];
+        };
+        /**
+         * Global SASS variables
+         */
+        sassVariables?: Record<string, string>;
+        fastify?: {
+            /**
+             * setup() is called directly after instantiating fastify. Use it to register your own plugins, routes etc.
+             */
+            setup: (fastify: FastifyInstance) => any;
+        };
+        /**
+         * Product name of the application. Will be used for the HTML title tag
+         */
+        productName?: string;
+        /**
+         * URL's for common dev paths and packages, automatically generated
+         */
+        urls?: {
+            app?: URL;
+            cli?: URL;
+            src?: URL;
+            cwd?: URL;
+            packages?: Record<string, URL>;
+        };
+    };
+    quasar?: QuasarConf;
+}
+export declare const defineConfig: (config: VitrifyConfig) => VitrifyConfig;

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

@@ -0,0 +1,14 @@
+import type { FastifyPluginCallback, FastifyRequest, FastifyReply } from 'fastify';
+import type { ViteDevServer } from 'vite';
+import type { SsrFunction } from '../vitrify-config.js';
+export interface FastifySsrOptions {
+    baseUrl?: string;
+    provide?: (req: FastifyRequest, res: FastifyReply) => Promise<Record<string, unknown>>;
+    vite?: ViteDevServer;
+    cliDir?: URL;
+    appDir?: URL;
+    productName?: string;
+    ssrFunctions?: SsrFunction[];
+}
+declare const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions>;
+export { fastifySsrPlugin };

package/dist/types/vue/prerender.d.ts

@@ -0,0 +1,8 @@
+import type { SsrFunction } from '../vitrify-config.js';
+export declare const prerender: ({ outDir, templatePath, manifestPath, entryServerPath, ssrFunctions }: {
+    outDir: string;
+    templatePath: string;
+    manifestPath: string;
+    entryServerPath: string;
+    ssrFunctions: SsrFunction[];
+}) => Promise<void[]>;

package/dist/types/vue/server.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="node" />
+import type { FastifyInstance } from 'fastify';
+import type { SsrFunction } from '../vitrify-config.js';
+export declare const createApp: ({ setup, appDir, baseUrl, ssrFunctions }: {
+    setup: (fastify: FastifyInstance) => any;
+    appDir: URL;
+    baseUrl?: string | undefined;
+    ssrFunctions?: SsrFunction[] | undefined;
+}) => FastifyInstance<import("http").Server, import("http").IncomingMessage, import("http").ServerResponse, import("fastify").FastifyLoggerInstance> & PromiseLike<FastifyInstance<import("http").Server, import("http").IncomingMessage, import("http").ServerResponse, import("fastify").FastifyLoggerInstance>>;

package/dist/vitrify-config.js

@@ -0,0 +1 @@
+export const defineConfig = (config) => config;

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

@@ -0,0 +1,91 @@
+import fastifyStatic from 'fastify-static';
+import { readFileSync } from 'fs';
+const fastifySsrPlugin = async (fastify, options, done) => {
+    if (import.meta.env.MODE === 'development') {
+        if (!options.vite)
+            throw new Error('Option vite cannot be undefined');
+        const middie = (await import('middie')).default;
+        await fastify.register(middie);
+        fastify.use(options.vite.middlewares);
+        fastify.get('*', async (req, res) => {
+            try {
+                // const url = req.originalUrl
+                const url = req.raw.url;
+                const ssrContext = {
+                    req,
+                    res
+                };
+                // always read fresh template in dev
+                // template = readFileSync(resolve('index.html'), 'utf-8')
+                const template = readFileSync(new URL('index.html', options.cliDir)).toString();
+                // template = await vite.transformIndexHtml(url, template)
+                const entryUrl = new URL('ssr/entry-server.ts', options.cliDir).pathname;
+                const render = (await options.vite.ssrLoadModule(entryUrl)).render;
+                let manifest;
+                // TODO: https://github.com/vitejs/vite/issues/2282
+                try {
+                    manifest = {};
+                }
+                catch (e) {
+                    manifest = {};
+                }
+                const [appHtml, preloadLinks] = await render(url, manifest, ssrContext);
+                const html = template
+                    .replace(`<!--preload-links-->`, preloadLinks)
+                    .replace(`<!--app-html-->`, appHtml)
+                    .replace('<!--product-name-->', options.productName || 'Product name');
+                res.code(200);
+                res.type('text/html');
+                res.send(html);
+                // res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
+            }
+            catch (e) {
+                console.error(e.stack);
+                options.vite && options.vite.ssrFixStacktrace(e);
+                res.code(500);
+                res.send(e.stack);
+            }
+        });
+    }
+    else {
+        options.baseUrl = options.baseUrl || '/';
+        fastify.register(fastifyStatic, {
+            root: new URL('./dist/ssr/client', options.appDir).pathname,
+            wildcard: false,
+            index: false,
+            prefix: options.baseUrl
+        });
+        fastify.get(`${options.baseUrl}*`, async (req, res) => {
+            const url = req.raw.url;
+            const provide = options.provide ? await options.provide(req, res) : {};
+            const ssrContext = {
+                req,
+                res,
+                provide
+            };
+            // template = readFileSync(new URL('../client/index.html', import.meta.url).pathname).toString()
+            // manifest = JSON.parse(readFileSync(new URL('../client/ssr-manifest.json', import.meta.url)).toString())
+            // render = (await import(new URL('./entry-server.mjs', import.meta.url).pathname)).render
+            const template = readFileSync(new URL('./dist/ssr/client/index.html', options.appDir).pathname).toString();
+            const manifest = JSON.parse(readFileSync(new URL('./dist/ssr/client/ssr-manifest.json', options.appDir)).toString());
+            const render = (await import(new URL('./dist/ssr/server/entry-server.mjs', options.appDir).pathname)).render;
+            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);
+            if (options.ssrFunctions?.length) {
+                for (const ssrFunction of options.ssrFunctions) {
+                    html = ssrFunction(html, ssrContext);
+                }
+            }
+            res.code(200);
+            res.type('text/html');
+            res.send(html);
+        });
+    }
+    done();
+};
+export { fastifySsrPlugin };

package/dist/vue/prerender.js

@@ -0,0 +1,29 @@
+import { promises as fs } from 'fs';
+import { routesToPaths } from '../helpers/routes.js';
+export const prerender = async ({ outDir, templatePath, manifestPath, entryServerPath, ssrFunctions }) => {
+    const promises = [];
+    const template = (await fs.readFile(templatePath)).toString();
+    const manifest = await fs.readFile(manifestPath);
+    const { render, getRoutes } = await import(entryServerPath);
+    const routes = await getRoutes();
+    const paths = routesToPaths(routes).filter((i) => !i.includes(':') && !i.includes('*'));
+    for (const url of paths) {
+        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 = template
+            .replace(`<!--preload-links-->`, preloadLinks)
+            .replace(`<!--app-html-->`, appHtml);
+        if (ssrFunctions?.length) {
+            for (const ssrFunction of ssrFunctions) {
+                html = ssrFunction(html, ssrContext);
+            }
+        }
+        promises.push(fs.writeFile(outDir + filename, html, 'utf-8'));
+    }
+    return Promise.all(promises);
+};

package/dist/vue/server.js

@@ -0,0 +1,20 @@
+import fastify from 'fastify';
+// import { setup } from 'virtual:fastify-setup'
+import { fastifySsrPlugin } from './fastify-ssr-plugin.js';
+// import { getPkgJsonDir } from '../app-urls.js'
+export const createApp = ({ setup, appDir, baseUrl, ssrFunctions }) => {
+    const app = fastify({
+        logger: true
+    });
+    app.register(fastifySsrPlugin, {
+        baseUrl,
+        appDir,
+        ssrFunctions
+    });
+    setup(app);
+    return app;
+};
+// const app = createApp({
+//   setup
+// })
+// app.listen(process.env.PORT || 3000, process.env.HOST || '127.0.0.1')

package/package.json

@@ -1,21 +1,40 @@
 {
   "name": "vitrify",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
-  "description": "Pre-configured Vite CLI",
+  "description": "Pre-configured Vite CLI for your framework",
+  "type": "module",
   "bin": {
-    "vitrify": "bin/vitrify.js"
+    "vitrify": "./dist/bin/cli.js"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./*": "./dist/*.js",
+    "./build": "./dist/bin/build.js",
+    "./dev": "./dist/bin/dev.js",
+    "./helpers/*": "./dist/helpers/*.js",
+    "./vite/*": "./src/vite/*"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/types/index.d.ts"
+      ],
+      "helpers/*": [
+        "./dist/types/helpers/*.d.ts"
+      ],
+      "build": [
+        "./dist/types/node/build.d.ts"
+      ],
+      "dev": [
+        "./dist/types/node/dev.d.ts"
+      ],
+      "help": [
+        "./dist/types/node/help.d.ts"
+      ]
+    }
   },
-  "main": "dist/node/index.js",
-  "types": "dist/node/index.d.ts",
-  "files": [
-    "bin",
-    "dist",
-    "client.d.ts",
-    "src/client",
-    "types"
-  ],
   "engines": {
     "node": ">=12.2.0"
   },
@@ -28,9 +47,66 @@
     "url": "https://github.com/simsustech/vitrify/issues"
   },
   "homepage": "https://github.com/simsustech/vitrify/tree/main/#readme",
-  "dependencies": {},
-  "optionalDependencies": {},
-  "devDependencies": {},
-  "peerDependencies": {},
-  "scripts": {}
-}
+  "scripts": {
+    "build": "tsc",
+    "test": "echo \"Error: no test specified\" && exit 0"
+  },
+  "dependencies": {
+    "@quasar/extras": "^1.13.5",
+    "@vitejs/plugin-vue": "^2.3.1",
+    "@vue/compiler-sfc": "^3.2.31",
+    "@vue/server-renderer": "^3.2.31",
+    "builtin-modules": "^3.2.0",
+    "cac": "^6.7.12",
+    "chalk": "^5.0.1",
+    "cross-env": "^7.0.3",
+    "fastify": "^3.28.0",
+    "fastify-static": "^4.6.1",
+    "glob": "^7.2.0",
+    "happy-dom": "^2.55.0",
+    "import-meta-resolve": "^1.1.1",
+    "local-pkg": "^0.4.1",
+    "magic-string": "^0.26.1",
+    "merge-deep": "^3.0.3",
+    "middie": "^6.0.0",
+    "readline": "^1.3.0",
+    "sass": "1.50.0",
+    "vite": "^2.9.1",
+    "vitest": "^0.9.3"
+  },
+  "devDependencies": {
+    "@types/glob": "^7.2.0",
+    "@types/merge-deep": "^3.0.0",
+    "@types/node": "^17.0.23",
+    "@types/ws": "^8.5.3",
+    "@vue/runtime-core": "^3.2.31",
+    "quasar": "^2.6.6",
+    "rollup": "^2.70.1",
+    "typescript": "^4.6.3",
+    "unplugin-vue-components": "^0.19.2",
+    "vite": "^2.9.1",
+    "vitrify": "^0.1.1",
+    "vue": "^3.2.31",
+    "vue-router": "^4.0.14"
+  },
+  "peerDependencies": {
+    "fastify": "^3.28.0",
+    "fastify-plugin": "^3.0.1",
+    "fastify-sensible": "^3.1.2",
+    "fastify-static": "^4.6.1",
+    "quasar": "^2.6.6",
+    "vue": "^3.2.31",
+    "vue-router": "^4.0.14"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "dist",
+    "src/node/helpers/ssr.ts",
+    "src/vite",
+    "!dist/**/*.test.js",
+    "!dist/**/test.js"
+  ]
+}

package/src/vite/vue/components.d.ts

@@ -0,0 +1,25 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/vue-next/pull/3399
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    QAvatar: typeof import('quasar')['QAvatar']
+    QBtn: typeof import('quasar')['QBtn']
+    QCard: typeof import('quasar')['QCard']
+    QCardSection: typeof import('quasar')['QCardSection']
+    QDrawer: typeof import('quasar')['QDrawer']
+    QHeader: typeof import('quasar')['QHeader']
+    QItemLabel: typeof import('quasar')['QItemLabel']
+    QLayout: typeof import('quasar')['QLayout']
+    QList: typeof import('quasar')['QList']
+    QPage: typeof import('quasar')['QPage']
+    QPageContainer: typeof import('quasar')['QPageContainer']
+    QToolbar: typeof import('quasar')['QToolbar']
+    QToolbarTitle: typeof import('quasar')['QToolbarTitle']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}
+
+export {}

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

@@ -0,0 +1,8 @@
+import { createApp } from '../main'
+
+createApp().then(({ app, router }) => {
+  // wait until router is ready before mounting to ensure hydration match
+  router.isReady().then(() => {
+    app.mount('#app')
+  })
+})

package/src/vite/vue/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><!--product-name--></title>
+    <!--preload-links-->
+  </head>
+
+  <body>
+    <!-- Do not add whitespace or newlines to #app, this will cause hydration errors -->
+    <div id="app"><!--app-html--></div>
+    <!--entry-script-->
+    <!--initial-state-->
+  </body>
+</html>

package/src/vite/vue/main.ts

@@ -0,0 +1,89 @@
+import App from 'src/App.vue'
+import createRouter from 'src/router'
+import {
+  createSSRApp,
+  createApp as createVueApp,
+  h,
+  onMounted,
+  getCurrentInstance
+} from 'vue'
+// import { Quasar, useQuasar } from 'quasar'
+// import quasarPlugins from 'virtual:quasar-plugins'
+// import bootFunctions from 'virtual:quasar-boot'
+import bootFunctions from 'virtual:boot-functions'
+import onMountedHooks from 'virtual:on-mounted-hooks'
+// import 'virtual:quasar-extras'
+// import * as directives from 'quasar/directives'
+import routes from 'src/router/routes'
+import 'virtual:global-css'
+import * as staticImports from 'virtual:static-imports'
+
+interface ssrContext {
+  ssr: boolean
+  provide?: Record<string, unknown>
+  [key: string]: unknown
+}
+
+export async function createApp(
+  ssr?: 'client' | 'server',
+  ssrContext?: ssrContext
+) {
+  let app
+  const RootComponent = {
+    name: 'AppWrapper',
+    setup(props) {
+      const instance = getCurrentInstance()
+
+      onMounted(async () => {
+        for (let fn of onMountedHooks) {
+          await fn(instance, staticImports)
+        }
+        // onAppMounted()
+        // const { proxy: { $q } } = getCurrentInstance()
+        // $q.onSSRHydrated !== void 0 && $q.onSSRHydrated()
+      })
+
+      return () => h(App, props)
+    }
+  }
+  if (ssr) {
+    app = createSSRApp(RootComponent)
+  } else {
+    app = createVueApp(RootComponent)
+  }
+  const router = createRouter()
+  app.use(router)
+
+  // Workaround to fix hydration errors when serving html files directly
+  router.beforeEach((to, from, next) => {
+    if (to.path.endsWith('.html')) {
+      next({ path: to.path.replace('.html', '') })
+    }
+
+    next()
+  })
+
+  // app.use(Quasar, {
+  //   plugins: quasarPlugins,
+  //   directives
+  // }, ssrContext)
+
+  let provide: Record<string, unknown> = {}
+  if (import.meta.env.SSR) {
+    if (ssrContext?.provide) {
+      provide = ssrContext?.provide
+    }
+  } else {
+    // @ts-ignore
+    provide = window.__INITIAL_STATE__?.provide
+  }
+  for (let key in provide) {
+    app.provide(key, provide[key])
+  }
+
+  for (let fn of bootFunctions) {
+    await fn({ app, ssrContext, staticImports })
+  }
+
+  return { app, router, routes }
+}

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

@@ -0,0 +1,9 @@
+import { createApp } from '../main.js'
+
+// const { app, router } = createApp()
+createApp('client').then(({ app, router }) => {
+  // wait until router is ready before mounting to ensure hydration match
+  router.isReady().then(() => {
+    app.mount('#app')
+  })
+})

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

@@ -0,0 +1,97 @@
+import { createApp } from '../main.js'
+import { renderToString } from '@vue/server-renderer'
+// import * as ApolloSSR from '@vue/apollo-ssr'
+// import { ApolloClients } from '@vue/apollo-composable'
+// import serialize from 'serialize-javascript'
+
+const initializeApp = async (url, ssrContext) => {
+  const onRenderedList = []
+  Object.assign(ssrContext, {
+    _modules: new Set(),
+    _meta: {},
+    onRendered: (fn) => {
+      onRenderedList.push(fn)
+    }
+  })
+
+  const { app, router, routes } = await createApp('server', ssrContext)
+  // set the router to the desired URL before rendering
+
+  router.push({ path: url })
+  ssrContext.initialState = {}
+
+  onRenderedList.forEach((fn) => {
+    fn()
+  })
+
+  await router.isReady()
+
+  return { app, router, routes }
+}
+
+export const getRoutes = async () =>
+  (
+    await initializeApp('/', {
+      ssr: false,
+      req: { headers: {}, url: '/' },
+      res: {}
+    })
+  ).routes
+
+export async function render(url, manifest, ssrContext) {
+  const { app, router } = await initializeApp(url, ssrContext)
+
+  // passing SSR context object which will be available via useSSRContext()
+  // @vitejs/plugin-vue injects code into a component's setup() that registers
+  // itself on ctx.modules. After the render, ctx.modules would contain all the
+  // components that have been instantiated during this render call.
+  const ctx = {
+    __qMetaList: []
+  }
+  let html = await renderToString(app, ctx)
+  // html = injectSsrContext(html, ssrContext)
+  // the SSR manifest generated by Vite contains module -> chunk/asset mapping
+  // which we can then use to determine what files need to be preloaded for this
+  // request.
+  const preloadLinks = renderPreloadLinks(ctx.modules, manifest)
+
+  return [html, preloadLinks]
+}
+
+function renderPreloadLinks(modules, manifest) {
+  let links = ''
+  const seen = new Set()
+  modules.forEach((id) => {
+    const files = manifest[id]
+    if (files) {
+      files.forEach((file) => {
+        if (!seen.has(file)) {
+          seen.add(file)
+          links += renderPreloadLink(file)
+        }
+      })
+    }
+  })
+  return links
+}
+
+function renderPreloadLink(file) {
+  if (file.endsWith('.js')) {
+    return `<link rel="modulepreload" crossorigin href="${file}">`
+  } else if (file.endsWith('.css')) {
+    return `<link rel="stylesheet" href="${file}">`
+  } else if (file.endsWith('.woff')) {
+    return ` <link rel="preload" href="${file}" as="font" type="font/woff" crossorigin>`
+  } else if (file.endsWith('.woff2')) {
+    return ` <link rel="preload" href="${file}" as="font" type="font/woff2" crossorigin>`
+  } else if (file.endsWith('.gif')) {
+    return ` <link rel="preload" href="${file}" as="image" type="image/gif">`
+  } else if (file.endsWith('.jpg') || file.endsWith('.jpeg')) {
+    return ` <link rel="preload" href="${file}" as="image" type="image/jpeg">`
+  } else if (file.endsWith('.png')) {
+    return ` <link rel="preload" href="${file}" as="image" type="image/png">`
+  } else {
+    // TODO
+    return ''
+  }
+}