vitrify 0.1.1 → 0.2.2

package/src/node/helpers/logger.ts

@@ -0,0 +1,142 @@
+// https://github.com/quasarframework/quasar/blob/dev/app/lib/helpers/logger.js
+import chalk from 'chalk'
+const { bgGreen, green, inverse, bgRed, red, bgYellow, yellow } = chalk
+import readline from 'readline'
+import type { AddressInfo, Server } from 'net'
+import type { ResolvedConfig, Logger } from 'vite'
+import os from 'os'
+import type { Hostname } from '../helpers/utils.js'
+import { resolveHostname } from '../helpers/utils.js'
+
+/**
+ * Main approach - App CLI related
+ */
+
+const dot = '•'
+const banner = 'App ' + dot
+const greenBanner = green(banner)
+const redBanner = red(banner)
+const yellowBanner = yellow(banner)
+
+export const clearConsole = process.stdout.isTTY
+  ? () => {
+      // Fill screen with blank lines. Then move to 0 (beginning of visible part) and clear it
+      const blank = '\n'.repeat(process.stdout.rows)
+      console.log(blank)
+      readline.cursorTo(process.stdout, 0, 0)
+      readline.clearScreenDown(process.stdout)
+    }
+  : () => {}
+
+export const log = function (msg?: string) {
+  console.log(msg ? ` ${greenBanner} ${msg}` : '')
+}
+
+export const warn = function (msg?: string, pill?: string) {
+  if (msg !== void 0) {
+    const pillBanner = pill !== void 0 ? bgYellow.black('', pill, '') + ' ' : ''
+
+    console.warn(` ${yellowBanner} ⚠️  ${pillBanner}${msg}`)
+  } else {
+    console.warn()
+  }
+}
+
+export const fatal = function (msg?: string, pill?: string) {
+  if (msg !== void 0) {
+    const pillBanner = pill !== void 0 ? errorPill(pill) + ' ' : ''
+
+    console.error(`\n ${redBanner} ⚠️  ${pillBanner}${msg}\n`)
+  } else {
+    console.error()
+  }
+
+  process.exit(1)
+}
+
+/**
+ * Extended approach - Compilation status & pills
+ */
+
+export const successPill = (msg?: string) => bgGreen.black('', msg, '')
+export const infoPill = (msg?: string) => inverse('', msg, '')
+export const errorPill = (msg?: string) => bgRed.white('', msg, '')
+export const warningPill = (msg?: string) => bgYellow.black('', msg, '')
+
+export const success = function (msg?: string, title = 'SUCCESS') {
+  console.log(` ${greenBanner} ${successPill(title)} ${green(dot + ' ' + msg)}`)
+}
+export const getSuccess = function (msg?: string, title?: string) {
+  return ` ${greenBanner} ${successPill(title)} ${green(dot + ' ' + msg)}`
+}
+
+export const info = function (msg?: string, title = 'INFO') {
+  console.log(` ${greenBanner} ${infoPill(title)} ${green(dot)} ${msg}`)
+}
+export const getInfo = function (msg?: string, title?: string) {
+  return ` ${greenBanner} ${infoPill(title)} ${green(dot)} ${msg}`
+}
+
+export const error = function (msg?: string, title = 'ERROR') {
+  console.log(` ${redBanner} ${errorPill(title)} ${red(dot + ' ' + msg)}`)
+}
+export const getError = function (msg?: string, title = 'ERROR') {
+  return ` ${redBanner} ${errorPill(title)} ${red(dot + ' ' + msg)}`
+}
+
+export const warning = function (msg?: string, title = 'WARNING') {
+  console.log(
+    ` ${yellowBanner} ${warningPill(title)} ${yellow(dot + ' ' + msg)}`
+  )
+}
+export const getWarning = function (msg?: string, title = 'WARNING') {
+  return ` ${yellowBanner} ${warningPill(title)} ${yellow(dot + ' ' + msg)}`
+}
+
+export function printHttpServerUrls(
+  server: Server,
+  config: ResolvedConfig
+): void {
+  const address = server.address()
+  const isAddressInfo = (x: any): x is AddressInfo => x?.address
+  if (isAddressInfo(address)) {
+    const hostname = resolveHostname(config.server.host)
+    const protocol = config.server.https ? 'https' : 'http'
+    printServerUrls(
+      hostname,
+      protocol,
+      address.port,
+      config.base,
+      config.logger.info
+    )
+  }
+}
+
+function printServerUrls(
+  hostname: Hostname,
+  protocol: string,
+  port: number,
+  base: string,
+  info: Logger['info']
+): void {
+  if (hostname.host === '127.0.0.1') {
+    const url = `${protocol}://${hostname.name}:${chalk.bold(port)}${base}`
+    info(`  > Local: ${chalk.cyan(url)}`)
+    if (hostname.name !== '127.0.0.1') {
+      info(`  > Network: ${chalk.dim('use `--host` to expose')}`)
+    }
+  } else {
+    Object.values(os.networkInterfaces())
+      .flatMap((nInterface) => nInterface ?? [])
+      .filter((detail) => detail && detail.address && detail.family === 'IPv4')
+      .map((detail) => {
+        const type = detail.address.includes('127.0.0.1')
+          ? 'Local:   '
+          : 'Network: '
+        const host = detail.address.replace('127.0.0.1', hostname.name)
+        const url = `${protocol}://${host}:${chalk.bold(port)}${base}`
+        return `  > ${type} ${chalk.cyan(url)}`
+      })
+      .forEach((msg) => info(msg))
+  }
+}

package/src/node/helpers/routes.ts

@@ -0,0 +1,29 @@
+// https://github.com/antfu/vite-ssg/blob/462722203dade87365a519d847fcd881ee16a7f4/src/node/utils.ts#L13
+import type { RouteRecordRaw } from 'vue-router'
+
+export const routesToPaths = (routes?: RouteRecordRaw[]) => {
+  if (!routes) return ['/']
+
+  const paths: Set<string> = new Set()
+
+  const getPaths = (routes: RouteRecordRaw[], prefix = '') => {
+    // remove trailing slash
+    prefix = prefix.replace(/\/$/g, '')
+    for (const route of routes) {
+      let path = route.path
+      // check for leading slash
+      if (route.path) {
+        path =
+          prefix && !route.path.startsWith('/')
+            ? `${prefix}/${route.path}`
+            : route.path
+
+        paths.add(path)
+      }
+      if (Array.isArray(route.children)) getPaths(route.children, path)
+    }
+  }
+
+  getPaths(routes)
+  return [...paths]
+}

package/src/node/helpers/ssr.ts.bak

@@ -0,0 +1,52 @@
+export const injectSsrContext = (html: string, ssrContext: Record<string, any>) => html.replace(
+  /(<html[^>]*)(>)/i,
+  (found, start, end) => {
+    let matches
+
+    matches = found.match(/\sdir\s*=\s*['"]([^'"]*)['"]/i)
+    if (matches) {
+      start = start.replace(matches[0], '')
+    }
+
+    matches = found.match(/\slang\s*=\s*['"]([^'"]*)['"]/i)
+    if (matches) {
+      start = start.replace(matches[0], '')
+    }
+
+    return `${start} ${ssrContext._meta.htmlAttrs || ''} ${end}`
+  }
+)
+  .replace(
+    /(<head[^>]*)(>)/i,
+    (_, start, end) => `${start}${end}${ssrContext._meta.headTags || ''}`
+  )
+  .replace(
+    /(<\/head>)/i,
+    (_, tag) => `${ssrContext._meta.resourceStyles || ''}${ssrContext._meta.endingHeadTags || ''}${tag}`
+  )
+  .replace(
+    /(<body[^>]*)(>)/i,
+    (found, start, end) => {
+      let classes = ssrContext._meta.bodyClasses || ''
+
+      const matches = found.match(/\sclass\s*=\s*['"]([^'"]*)['"]/i)
+
+      if (matches) {
+        if (matches[1].length > 0) {
+          classes += ` ${matches[1]}`
+        }
+        start = start.replace(matches[0], '')
+      }
+
+      return `${start} class="${classes.trim()}" ${ssrContext._meta.bodyAttrs || ''}${end}${ssrContext._meta.bodyTags || ''}`
+    }
+  )
+  .replace(`<!--initial-state-->`, `<script>
+  window.__INITIAL_STATE__ = ${JSON.stringify(ssrContext.initialState)}
+</script>
+`)
+
+export const injectInitialState = (html: string, ssrContext: Record<string, any>) =>
+  html.replace(`<!--initial-state-->`, `<script>
+  window.__INITIAL_STATE__ = ${JSON.stringify(ssrContext.initialState)}
+  </script>`)

package/src/node/helpers/utils.ts

@@ -0,0 +1,37 @@
+// https://github.com/vitejs/vite/blob/main/packages/vite/src/node/logger.ts
+export interface Hostname {
+  // undefined sets the default behaviour of server.listen
+  host: string | undefined
+  // resolve to localhost when possible
+  name: string
+}
+
+export function resolveHostname(
+  optionsHost: string | boolean | undefined
+): Hostname {
+  let host: string | undefined
+  if (
+    optionsHost === undefined ||
+    optionsHost === false ||
+    optionsHost === 'localhost'
+  ) {
+    // Use a secure default
+    host = '127.0.0.1'
+  } else if (optionsHost === true) {
+    // If passed --host in the CLI without arguments
+    host = undefined // undefined typically means 0.0.0.0 or :: (listen on all IPs)
+  } else {
+    host = optionsHost
+  }
+
+  // Set host name to localhost when possible, unless the user explicitly asked for '127.0.0.1'
+  const name =
+    (optionsHost !== '127.0.0.1' && host === '127.0.0.1') ||
+    host === '0.0.0.0' ||
+    host === '::' ||
+    host === undefined
+      ? 'localhost'
+      : host
+
+  return { host, name }
+}

package/src/node/index.ts

@@ -0,0 +1,402 @@
+import vuePlugin from '@vitejs/plugin-vue'
+import type { InlineConfig, UserConfig } from 'vite'
+import { mergeConfig } from 'vite'
+import { readFileSync } from 'fs'
+import { QuasarPlugin } from './plugins/quasar.js'
+import builtinModules from 'builtin-modules'
+import { resolve } from 'import-meta-resolve'
+import type {
+  StaticImports,
+  BootFunction,
+  OnMountedHook,
+  VitrifyConfig,
+  SsrFunction
+} from './vitrify-config.js'
+import type { VitrifyContext } from './bin/run.js'
+import type { VitrifyPlugin } from './plugins/index.js'
+import type { FastifyInstance } from 'fastify'
+import { getPkgJsonDir } from './app-urls.js'
+
+const serverModules = ['fastify', 'middie']
+
+const configPluginMap: Record<string, () => Promise<VitrifyPlugin>> = {
+  quasar: () =>
+    import('./plugins/quasar.js').then((module) => module.QuasarPlugin)
+}
+
+export const VIRTUAL_MODULES = [
+  'virtual:fastify-setup',
+  'virtual:boot-functions',
+  'virtual:ssr-functions',
+  'virtual:on-mounted-hooks',
+  'virtual:global-css',
+  'virtual:static-imports'
+]
+
+export const baseConfig = async ({
+  ssr,
+  appDir,
+  publicDir,
+  command = 'build',
+  mode = 'production',
+  framework = 'vue',
+  pwa = false
+}: {
+  ssr?: 'client' | 'server' | 'ssg'
+  appDir?: URL
+  publicDir?: URL
+  command?: 'build' | 'dev' | 'test'
+  mode?: 'production' | 'development'
+  framework?: 'vue'
+  pwa?: boolean
+}): Promise<InlineConfig> => {
+  const { getAppDir, getCliDir, getCliViteDir, getSrcDir, getCwd } =
+    await import('./app-urls.js')
+  if (!appDir) {
+    appDir = getAppDir()
+  }
+  const srcDir = getSrcDir(appDir)
+  const cwd = getCwd()
+  const cliDir = getCliDir()
+  const cliViteDir = getCliViteDir(cliDir)
+  // const {
+  //   appDir: tempAppDir,
+  //   cliDir,
+  //   cliViteDir,
+  //   srcDir
+  // } = await import('./app-urls.js')
+  // const cwd = appDir || tempAppDir
+  const frameworkDir = new URL(`${framework}/`, cliViteDir)
+
+  // const localPackages = ['vue', 'vue-router', 'quasar']
+  const localPackages = ['vue', 'vue-router']
+  const cliPackages = ['vitest']
+  const packageUrls: Record<string, URL> = {}
+  await (async () => {
+    for (const val of localPackages)
+      packageUrls[val] = getPkgJsonDir(
+        new URL(await resolve(val, appDir!.href))
+      )
+  })()
+  await (async () => {
+    for (const val of cliPackages)
+      packageUrls[val] = getPkgJsonDir(
+        new URL(await resolve(val, cliDir!.href))
+      )
+  })()
+
+  // if (appDir) {
+  //   srcDir = new URL('src/', appDir);
+  //   quasarDir = new URL(await resolve('quasar/', appDir.href));
+  //   ({ appDir: cwd, cliDir } = await import('./app-urls.js'))
+  // } else {
+  //   ({ appDir, cliDir, srcDir, quasarDir } = await import('./app-urls.js'))
+  //   cwd = appDir
+  // }
+  // vueDir = new URL('./', await resolve('vue', appDir.href));
+  // vueRouterDir = new URL('../', await resolve('vue-router', appDir.href));
+  // vitestDir = new URL('../', await resolve('vitest', cliDir.href));
+
+  if (!publicDir) publicDir = new URL('public/', appDir)
+  /**
+   * TODO:Perform some manual check if command is run inside a Quasar Project
+   */
+  let vitrifyConfig:
+    | VitrifyConfig
+    | (({ mode, command }: { mode: string; command: string }) => VitrifyConfig)
+
+  try {
+    vitrifyConfig = (
+      await import(new URL('vitrify.config.js', appDir).pathname)
+    ).default
+    if (typeof vitrifyConfig === 'function')
+      vitrifyConfig = vitrifyConfig({ mode, command })
+  } catch (e) {
+    console.error(e)
+    console.log('No vitrify.config.js file found, using defaults')
+    vitrifyConfig = {}
+  }
+  let { productName = 'Product name' } = JSON.parse(
+    readFileSync(new URL('package.json', appDir).pathname, {
+      encoding: 'utf-8'
+    })
+  )
+
+  const fastifySetup =
+    vitrifyConfig.vitrify?.fastify?.setup || ((fastify: FastifyInstance) => {})
+
+  const ssrTransformCustomDir = () => {
+    return {
+      props: [],
+      needRuntime: true
+    }
+  }
+
+  const frameworkPlugins = []
+  for (const framework of Object.keys(configPluginMap)) {
+    if (Object.keys(vitrifyConfig).includes(framework)) {
+      const plugin = await configPluginMap[framework]()
+      frameworkPlugins.push(
+        await plugin({
+          ssr,
+          pwa
+        })
+      )
+    }
+  }
+
+  let bootFunctions: BootFunction[]
+  let ssrFunctions: SsrFunction[]
+  let onMountedHooks: OnMountedHook[]
+  let globalCss: string[]
+  let staticImports: StaticImports
+  let sassVariables: Record<string, string>
+  let additionalData: string[]
+
+  const plugins: UserConfig['plugins'] = [
+    vuePlugin({
+      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
+          }
+        }
+      }
+    }),
+    ...frameworkPlugins,
+    // await QuasarPlugin({
+    //   ssr: ssr,
+    //   pwa: pwa
+    //   // quasarDir: packageUrls.quasar
+    // }),
+    {
+      name: 'vitrify-setup',
+      enforce: 'post',
+      config: async (config: VitrifyConfig, env) => {
+        bootFunctions = config.vitrify?.bootFunctions || []
+        ssrFunctions = config.vitrify?.ssrFunctions || []
+        onMountedHooks = config.vitrify?.hooks?.onMounted || []
+        globalCss = config.vitrify?.globalCss || []
+        staticImports = config.vitrify?.staticImports || {}
+        sassVariables = config.vitrify?.sass?.variables || {}
+        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')
+              }
+            }
+          }
+        }
+      },
+      configResolved: (config) => {
+        if (process.env.DEBUG) {
+          console.log(config.css?.preprocessorOptions?.sass.additionalData)
+          console.log(config.optimizeDeps)
+        }
+      },
+      resolveId(id) {
+        if (VIRTUAL_MODULES.includes(id)) return id
+        return
+      },
+      load(id) {
+        if (id === 'virtual:fastify-setup') {
+          return `export const setup = ${String(fastifySetup)}`
+        } else if (id === 'virtual:boot-functions') {
+          return `export default [${bootFunctions
+            .map((fn) => `${String(fn)}`)
+            .join(', ')}]`
+        } else if (id === 'virtual:ssr-functions') {
+          return `export default [${ssrFunctions
+            .map((fn) => `${String(fn)}`)
+            .join(', ')}]`
+        } else if (id === 'virtual:on-mounted-hooks') {
+          return `export default [${onMountedHooks
+            .map((fn) => `${String(fn)}`)
+            .join(', ')}]`
+        } 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}';`
+            )
+            .join('\n')}`
+        }
+        return null
+      }
+    }
+  ]
+  if (command !== 'test') {
+    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
+      },
+      transformIndexHtml: {
+        enforce: 'pre',
+        transform: (html) => {
+          let entry: string
+          switch (ssr) {
+            case 'ssg':
+            case 'server':
+            case 'client':
+              entry = new URL('ssr/entry-client.ts', frameworkDir).pathname
+              break
+            default:
+              entry = new URL('csr/entry.ts', frameworkDir).pathname
+          }
+          const entryScript = `<script type="module" src="${entry}"></script>`
+          html = html
+            .replace('<!--entry-script-->', entryScript)
+            .replace('<!--product-name-->', productName)
+          return html
+        }
+      }
+    })
+
+    plugins.unshift({
+      name: 'product-name',
+      enforce: 'post',
+      config: (config: VitrifyConfig, env) => {
+        if (config.vitrify?.productName)
+          productName = config.vitrify?.productName
+      },
+      transformIndexHtml: {
+        enforce: 'post',
+        transform: (html) => {
+          html = html.replace('<!--product-name-->', productName)
+          return html
+        }
+      }
+    })
+  }
+
+  const alias = [
+    { find: 'src', replacement: srcDir.pathname },
+    { find: 'app', replacement: appDir.pathname },
+    { find: 'cwd', replacement: cwd.pathname },
+    { find: 'boot', replacement: new URL('boot/', srcDir).pathname },
+    { find: 'assets', replacement: new URL('assets/', srcDir).pathname },
+    // ...Object.entries(packageUrls).map(([key, value]) => ({
+    //   find: key, replacement: value.pathname
+    // })),
+    { find: 'vue', replacement: packageUrls['vue'].pathname },
+    { find: 'vue-router', replacement: packageUrls['vue-router'].pathname },
+    { find: 'vitrify', replacement: cliDir.pathname }
+  ]
+  if (command === 'test')
+    alias.push({
+      find: 'vitest',
+      replacement: packageUrls.vitest.pathname
+    })
+
+  const config = {
+    root: frameworkDir.pathname,
+    publicDir: publicDir.pathname,
+    vitrify: {
+      productName,
+      urls: {
+        // @ts-ignore
+        app: appDir,
+        cli: cliDir,
+        src: srcDir,
+        cwd,
+        packages: packageUrls
+      }
+    },
+    plugins,
+    optimizeDeps: {
+      exclude: ['vue']
+    },
+    resolve: {
+      // Dedupe uses require which breaks ESM SSR builds
+      // dedupe: [
+      //   'vue',
+      //   'vue-router'
+      // ],
+      alias
+    },
+    build: {
+      target: ssr === 'server' ? 'esnext' : 'modules',
+      ssr: ssr === 'server' ? 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('fastify-ssr-plugin')) {
+                    return 'fastify-ssr-plugin'
+                  } else if (id.includes('node_modules')) {
+                    return 'vendor'
+                  }
+                }
+              }
+            }
+          : {
+              output: {
+                format: 'es'
+              }
+            }
+    },
+    // css: {
+    //   preprocessorOptions: {
+    //     sass: {
+    //       additionalData: sass ? [...sass].join('\n') : undefined
+    //     }
+    //   }
+    // },
+    ssr: {
+      // Create a SSR bundle
+      noExternal: [
+        new RegExp(
+          `^(?!.*(${[...builtinModules, ...serverModules].join('|')}))`
+        )
+      ]
+    },
+    define: {
+      __BASE_URL__: `'/'`
+    }
+  } as VitrifyConfig
+
+  return mergeConfig(config, vitrifyConfig)
+}
+
+export type { VitrifyConfig, VitrifyPlugin, VitrifyContext, BootFunction }

package/src/node/plugins/index.ts

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