vitrify 0.1.0 → 0.2.1

package/package.json

@@ -1,23 +1,42 @@
 {
   "name": "vitrify",
-  "version": "0.1.0",
+  "version": "0.2.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/bin/build.d.ts"
+      ],
+      "dev": [
+        "./dist/types/bin/dev.d.ts"
+      ],
+      "help": [
+        "./dist/types/bin/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"
+    "node": ">=16.0.0"
   },
   "repository": {
     "type": "git",
@@ -28,9 +47,65 @@
     "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.33",
+    "@vue/server-renderer": "^3.2.33",
+    "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": "^8.0.1",
+    "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.5",
+    "vitest": "^0.9.3"
+  },
+  "devDependencies": {
+    "@types/glob": "^7.2.0",
+    "@types/merge-deep": "^3.0.0",
+    "@types/node": "^17.0.24",
+    "@types/ws": "^8.5.3",
+    "@vue/runtime-core": "^3.2.33",
+    "quasar": "^2.6.6",
+    "rollup": "^2.70.1",
+    "typescript": "^4.6.3",
+    "unplugin-vue-components": "^0.19.3",
+    "vite": "^2.9.5",
+    "vue": "^3.2.33",
+    "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.33",
+    "vue-router": "^4.0.14"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "dist",
+    "src/node/frameworks",
+    "src/vite",
+    "!dist/**/*.test.js",
+    "!dist/**/test.js"
+  ]
+}

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

@@ -0,0 +1,137 @@
+import type {
+  FastifyPluginCallback,
+  FastifyRequest,
+  FastifyReply
+} from 'fastify'
+import fastifyStatic from 'fastify-static'
+import { readFileSync } from 'fs'
+// import { injectSsrContext } from '../helpers/ssr.js'
+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[]
+}
+
+const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = 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: any) {
+        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: Record<string, any> = {
+        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/src/node/frameworks/vue/prerender.ts

@@ -0,0 +1,49 @@
+import { promises as fs } from 'fs'
+import { routesToPaths } from '../../helpers/routes.js'
+import type { SsrFunction } from '../../vitrify-config.js'
+
+export const prerender = async ({
+  outDir,
+  templatePath,
+  manifestPath,
+  entryServerPath,
+  ssrFunctions
+}: {
+  outDir: string
+  templatePath: string
+  manifestPath: string
+  entryServerPath: string
+  ssrFunctions: SsrFunction[]
+}) => {
+  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/src/node/frameworks/vue/server.ts

@@ -0,0 +1,38 @@
+import type { FastifyInstance } from 'fastify'
+import fastify from 'fastify'
+import type { SsrFunction } from '../../vitrify-config.js'
+// 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
+}: {
+  setup: (fastify: FastifyInstance) => any
+  appDir: URL
+  baseUrl?: string
+  ssrFunctions?: SsrFunction[]
+}) => {
+  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/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 ''
+  }
+}