vitrify 0.6.17 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitrify",
-  "version": "0.6.17",
+  "version": "0.7.1",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
   "description": "Pre-configured Vite CLI for your framework",
@@ -57,47 +57,47 @@
   },
   "dependencies": {
     "@fastify/middie": "^8.0.0",
-    "@fastify/static": "^6.4.0",
-    "@quasar/extras": "^1.14.2",
-    "@vitejs/plugin-vue": "^3.0.0-alpha.1",
+    "@fastify/static": "^6.5.0",
+    "@quasar/extras": "^1.15.1",
+    "@vitejs/plugin-vue": "^3.0.1",
     "builtin-modules": "^3.3.0",
     "cac": "^6.7.12",
     "chalk": "^5.0.1",
     "critters": "^0.0.16",
     "cross-env": "^7.0.3",
-    "esbuild": "^0.14.48",
-    "fastify": "^4.2.0",
+    "esbuild": "^0.14.53",
+    "fastify": "^4.3.0",
     "glob": "^8.0.3",
-    "happy-dom": "^6.0.0",
+    "happy-dom": "^6.0.4",
     "magic-string": "^0.26.2",
     "merge-deep": "^3.0.3",
     "readline": "^1.3.0",
-    "rollup-plugin-visualizer": "^5.6.0",
-    "sass": "1.53.0",
-    "ts-node": "^10.8.2",
-    "unplugin-vue-components": "^0.21.0",
-    "vite": "3.0.0-beta.6",
-    "vitest": "^0.17.0"
+    "rollup-plugin-visualizer": "^5.7.1",
+    "sass": "1.54.2",
+    "ts-node": "^10.9.1",
+    "unplugin-vue-components": "^0.22.0",
+    "vite": "^3.0.4",
+    "vitest": "^0.20.3"
   },
   "devDependencies": {
     "@types/connect": "^3.4.35",
     "@types/glob": "^7.2.0",
     "@types/merge-deep": "^3.0.0",
-    "@types/node": "^18.0.1",
+    "@types/node": "^18.6.3",
     "@types/ws": "^8.5.3",
     "@vue/runtime-core": "^3.2.37",
-    "quasar": "^2.7.5",
-    "rollup": "^2.75.7",
+    "quasar": "^2.7.7",
+    "rollup": "^2.77.2",
     "typescript": "^4.7.4",
     "vue": "^3.2.37",
-    "vue-router": "^4.1.0"
+    "vue-router": "^4.1.3"
   },
   "peerDependencies": {
-    "@fastify/static": "^6.4.0",
-    "fastify": "^4.2.0",
-    "quasar": "^2.7.5",
+    "@fastify/static": "^6.5.0",
+    "fastify": "^4.3.0",
+    "quasar": "^2.7.7",
     "vue": "^3.2.37",
-    "vue-router": "^4.1.0"
+    "vue-router": "^4.1.3"
   },
   "publishConfig": {
     "access": "public",

package/src/node/bin/cli.ts

@@ -88,7 +88,7 @@ cli
         ;({ prerender, onRendered } = await import(
           new URL('ssr/server/prerender.mjs', baseOutDir).pathname
         ))
-        console.log(onRendered)
+
         prerender({
           outDir: new URL('static/', baseOutDir).pathname,
           templatePath: new URL('static/index.html', baseOutDir).pathname,

package/src/node/bin/dev.ts

@@ -1,13 +1,11 @@
 import type { LogLevel, InlineConfig } from 'vite'
-import { ViteDevServer, mergeConfig } from 'vite'
 import { searchForWorkspaceRoot } from 'vite'
 import { baseConfig } from '../index.js'
 import type { Server } from 'net'
-import type { FastifyInstance } from 'fastify/types/instance'
 import fastify from 'fastify'
+import type { FastifyServerOptions } from 'fastify'
 import { fastifySsrPlugin } from '../frameworks/vue/fastify-ssr-plugin.js'
-import type { ServerOptions } from 'https'
-import type { OnRenderedHook } from '../vitrify-config.js'
+import type { OnRenderedHook, VitrifyConfig } from '../vitrify-config.js'
 
 export async function createVitrifyDevServer({
   port = 3000,
@@ -130,6 +128,7 @@ export async function createServer({
   let setup
   let server: Server
   let onRendered: OnRenderedHook[]
+  let vitrifyConfig: VitrifyConfig
 
   console.log(`Development mode: ${ssr ? ssr : 'csr'}`)
   if (ssr) {
@@ -138,11 +137,12 @@ export async function createServer({
         ? new URL('src/vite/fastify/entry.ts', cliDir).pathname
         : new URL(`src/vite/${framework}/ssr/app.ts`, cliDir).pathname
 
-    ;({ setup, onRendered } = await vite.ssrLoadModule(entryUrl))
+    ;({ setup, onRendered, vitrifyConfig } = await vite.ssrLoadModule(entryUrl))
     const app = fastify({
       logger: false,
-      https: vite.config.server.https as ServerOptions
-    })
+      https: vite.config.server.https,
+      ...vitrifyConfig.vitrify?.ssr?.fastify
+    } as FastifyServerOptions)
     if (process.env) process.env.MODE = 'development'
     if (setup) {
       await setup({

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

@@ -15,7 +15,7 @@ export const createApp = ({
   vitrifyDir,
   mode
 }: {
-  onSetup: OnSetupFile[]
+  onSetup: ((fastify: FastifyInstance) => void)[]
   appDir: URL
   baseUrl?: string
   fastifyPlugin: FastifySsrPlugin | FastifyCsrPlugin
@@ -35,11 +35,11 @@ export const createApp = ({
     mode
   })
 
-  // if (onSetup?.length) {
-  //   for (const setup of onSetup) {
-  //     setup(app)
-  //   }
-  // }
+  if (onSetup?.length) {
+    for (const setup of onSetup) {
+      setup(app)
+    }
+  }
 
   return app
 }

package/src/node/index.ts

@@ -21,7 +21,7 @@ import type {
 } from './vitrify-config.js'
 import type { VitrifyContext } from './bin/run.js'
 import type { VitrifyPlugin } from './plugins/index.js'
-import { getPkgJsonDir, resolve } from './app-urls.js'
+import { resolve } from './app-urls.js'
 import type { ManualChunksOption, RollupOptions } from 'rollup'
 
 const internalServerModules = [
@@ -75,8 +75,8 @@ const manualChunks: ManualChunksOption = (id: string) => {
 
 export const VIRTUAL_MODULES = [
   'virtual:vitrify-hooks',
-  'virtual:global-css',
   'virtual:static-imports',
+  'virtual:vitrify-config',
   'vitrify.sass',
   'vitrify.css'
 ]
@@ -237,13 +237,6 @@ export const baseConfig = async ({
     console.error('package.json not found')
   }
 
-  const ssrTransformCustomDir = () => {
-    return {
-      props: [],
-      needRuntime: true
-    }
-  }
-
   const frameworkPlugins = []
   for (const framework of Object.keys(configPluginMap)) {
     if (Object.keys(vitrifyConfig).includes(framework)) {
@@ -261,7 +254,7 @@ export const baseConfig = async ({
   let onRenderedHooks: OnRenderedHook[]
   let onMountedHooks: OnMountedHook[]
   let onSetupFiles: OnSetupFile[]
-  let globalCss: string[]
+  let globalCss: string[] = []
   let staticImports: StaticImports
   let sassVariables: Record<string, string>
   let additionalData: string[]
@@ -275,32 +268,12 @@ export const baseConfig = async ({
     ]
 
   const plugins: UserConfig['plugins'] = [
-    vuePlugin({
-      // compiler: await import('vue/compiler-sfc'),
-      // template: {
-      //   ssr: !!ssr,
-      //   compilerOptions: {
-      //     directiveTransforms: {
-      //       'close-popup': ssrTransformCustomDir,
-      //       intersection: ssrTransformCustomDir,
-      //       ripple: ssrTransformCustomDir,
-      //       mutation: ssrTransformCustomDir,
-      //       morph: ssrTransformCustomDir,
-      //       scroll: ssrTransformCustomDir,
-      //       'scroll-fire': ssrTransformCustomDir,
-      //       'touch-hold': ssrTransformCustomDir,
-      //       'touch-pan': ssrTransformCustomDir,
-      //       'touch-repeat': ssrTransformCustomDir,
-      //       'touch-swipe': ssrTransformCustomDir
-      //     }
-      //   }
-      // }
-    }),
+    vuePlugin(),
     ...frameworkPlugins,
     {
       name: 'vitrify-setup',
       enforce: 'post',
-      config: async (config: VitrifyConfig, env) => {
+      config: (config: VitrifyConfig, env) => {
         onBootHooks = config.vitrify?.hooks?.onBoot || []
         onRenderedHooks = config.vitrify?.hooks?.onRendered || []
         onMountedHooks = config.vitrify?.hooks?.onMounted || []
@@ -310,27 +283,17 @@ export const baseConfig = async ({
         sassVariables = config.vitrify?.sass?.variables || {}
         globalSass = config.vitrify?.sass?.global || []
         additionalData = config.vitrify?.sass?.additionalData || []
-
-        return {
-          css: {
-            preprocessorOptions: {
-              // sass: {
-              //   additionalData: [
-              //     ...Object.entries(sassVariables).map(
-              //       ([key, value]) => `${key}: ${value}`
-              //     )
-              //     // ...additionalData
-              //     // config.css?.preprocessorOptions?.sass.additionalData
-              //   ].join('\n')
-              // }
-            }
-          }
-        }
+        return
+      },
+      configureServer(server) {
+        server.middlewares.use('/', (req, res, next) => {
+          if (req.url?.endsWith('.html')) req.url = req.url.replace('.html', '')
+          next()
+        })
       },
       configResolved: (config) => {
         if (process.env.DEBUG) {
-          console.log(config.css?.preprocessorOptions?.sass.additionalData)
-          console.log(config.optimizeDeps)
+          console.log(config)
         }
       },
       resolveId(id) {
@@ -357,30 +320,20 @@ export const baseConfig = async ({
               .join(', ')}]
             export const onSetup = []
             ${onSetupFiles
-              .map(
-                (url, index) =>
-                  `import ${url.pathname
-                    .replaceAll('/', '')
-                    .replaceAll('.', '')} from '${
-                    url.pathname
-                  }'; onSetup.push(${url.pathname
-                    .replaceAll('/', '')
-                    .replaceAll('.', '')})`
-              )
+              .map((url, index) => {
+                const varName = url.pathname
+                  .replaceAll('/', '')
+                  .replaceAll('.', '')
+                  .replaceAll('-', '')
+                return `import ${varName} from '${url.pathname}'; onSetup.push(${varName})`
+              })
               .join('\n')}`
-          // export const onSetup = [${onSetupHooks
-          //   .map((fn) => `${String(fn)}`)
-          //   .join(', ')}]`
-          /**
-           * CSS imports in virtual files do not seem to work. Using transform() instead
-           */
-          // } else if (id === 'virtual:global-css') {
-          //   return `${globalCss.map((css) => `import '${css}'`).join('\n')}`
         } else if (id === 'virtual:static-imports') {
           return `${Object.entries(staticImports)
-            .map(
-              ([key, value]) => `export { ${value.join(',')} } from '${key}';`
-            )
+            .map(([key, value]) => {
+              const deduped = [...new Set(value)]
+              return `export { ${deduped.join(',')} } from '${key}';`
+            })
             .join('\n')}`
         } else if (id === 'vitrify.sass') {
           return [
@@ -390,7 +343,9 @@ export const baseConfig = async ({
             ...globalSass.map((sass) => `@import '${sass}'`)
           ].join('\n')
         } else if (id === 'vitrify.css') {
-          return `${globalCss.map((css) => `import '${css}'`).join('\n')}`
+          return `${globalCss.map((css) => `@import '${css}'`).join('\n')}`
+        } else if (id === 'virtual:vitrify-config') {
+          return `export default ${JSON.stringify(vitrifyConfig)}`
         }
         return null
       }
@@ -400,16 +355,16 @@ export const baseConfig = async ({
     plugins.unshift({
       name: 'html-transform',
       enforce: 'pre',
-      transform: (code, id) => {
-        if (id.endsWith('App.vue')) {
-          code =
-            code +
-            `<style lang="sass">
-// do not remove, required for additionalData import
-</style>`
-        }
-        return code
-      },
+      //       transform: (code, id) => {
+      //         if (id.endsWith('App.vue')) {
+      //           code =
+      //             code +
+      //             `<style lang="sass">
+      // // do not remove, required for additionalData import
+      // </style>`
+      //         }
+      //         return code
+      //       },
       transformIndexHtml: {
         enforce: 'pre',
         transform: (html) => {
@@ -441,6 +396,7 @@ export const baseConfig = async ({
       config: (config: VitrifyConfig, env) => {
         if (config.vitrify?.productName)
           productName = config.vitrify?.productName
+        return
       },
       transformIndexHtml: {
         enforce: 'post',
@@ -471,10 +427,6 @@ export const baseConfig = async ({
         packageUrls['vue']
       ).pathname
     },
-    // {
-    //   find: new RegExp('^vue/server-renderer$'),
-    //   replacement: 'vue/server-renderer/index.mjs'
-    // },
     {
       find: new RegExp('^vue-router$'),
       replacement: new URL(
@@ -482,9 +434,6 @@ export const baseConfig = async ({
         packageUrls['vue-router']
       ).pathname
     }
-    // { find: 'vue', replacement: packageUrls['vue'].pathname },
-    // { find: 'vue-router', replacement: packageUrls['vue-router'].pathname },
-    // { find: 'vitrify', replacement: cliDir.pathname }
   ]
   if (mode === 'development' && vitrifyConfig.vitrify?.dev?.alias)
     alias.push(...vitrifyConfig.vitrify.dev.alias)
@@ -511,25 +460,16 @@ export const baseConfig = async ({
       ],
       external,
       output: {
-        minifyInternalExports: !debug,
+        minifyInternalExports: false,
         entryFileNames: '[name].mjs',
         chunkFileNames: '[name].mjs',
         format: 'es',
         manualChunks
-        // manualChunks: (id) => {
-        //   if (id.includes('vitrify/src/vite/')) {
-        //     const name = id.split('/').at(-1)?.split('.').at(0)
-        //     if (name && manualChunks.includes(name)) return name
-        //   } else if (id.includes('node_modules')) {
-        //     return 'vendor'
-        //   }
-        // }
       }
     }
     // Create a SSR bundle
     noExternal = [
       new RegExp(`^(?!(${[...builtinModules, ...serverModules].join('|')}))`)
-      // new RegExp(`^(?!.*(${[...builtinModules, ...serverModules].join('|')}))`)
     ]
   } else if (ssr === 'fastify') {
     rollupOptions = {
@@ -542,14 +482,6 @@ export const baseConfig = async ({
         chunkFileNames: '[name].mjs',
         format: 'es',
         manualChunks
-        // manualChunks: (id) => {
-        //   if (id.includes('vitrify/src/vite/')) {
-        //     const name = id.split('/').at(-1)?.split('.').at(0)
-        //     if (name && manualChunks.includes(name)) return name
-        //   } else if (id.includes('node_modules')) {
-        //     return 'vendor'
-        //   }
-        // }
       }
     }
     // Create a SSR bundle
@@ -559,13 +491,9 @@ export const baseConfig = async ({
   } else {
     rollupOptions = {
       ...rollupOptions,
-      // input: [
-      //   new URL('index.html', frameworkDir).pathname
-      //   // new URL('csr/server.ts', frameworkDir).pathname
-      // ],
       external,
       output: {
-        minifyInternalExports: !debug,
+        minifyInternalExports: false,
         entryFileNames: '[name].mjs',
         chunkFileNames: '[name].mjs',
         format: 'es',
@@ -575,7 +503,6 @@ export const baseConfig = async ({
   }
 
   const config = {
-    // root: ssr === 'fastify' ? appDir.pathname : frameworkDir.pathname,
     root: appDir.pathname,
     publicDir: publicDir.pathname,
     base,
@@ -603,33 +530,6 @@ export const baseConfig = async ({
       ssr: ssr === 'server' || ssr === 'fastify' ? true : false,
       ssrManifest: ssr === 'client' || ssr === 'ssg',
       rollupOptions
-      // ssr === 'server'
-      //   ? {
-      //       input: [
-      //         new URL('ssr/entry-server.ts', frameworkDir).pathname,
-      //         new URL('ssr/prerender.ts', frameworkDir).pathname,
-      //         new URL('ssr/server.ts', frameworkDir).pathname
-      //       ],
-      //       output: {
-      //         minifyInternalExports: false,
-      //         entryFileNames: '[name].mjs',
-      //         chunkFileNames: '[name].mjs',
-      //         format: 'es',
-      //         manualChunks: (id) => {
-      //           if (id.includes('vitrify/src/vite/')) {
-      //             const name = id.split('/').at(-1)?.split('.').at(0)
-      //             if (name && manualChunks.includes(name)) return name
-      //           } else if (id.includes('node_modules')) {
-      //             return 'vendor'
-      //           }
-      //         }
-      //       }
-      //     }
-      //   : {
-      //       output: {
-      //         format: 'es'
-      //       }
-      //     }
     },
     ssr: {
       // Create a SSR bundle