vitrify 0.2.4 → 0.4.0

package/src/node/helpers/collect-css-ssr.ts

@@ -0,0 +1,77 @@
+// collect-css-ssr.ts
+import type { ViteDevServer, ModuleNode, UpdatePayload } from 'vite'
+
+/**
+ * Collect SSR CSS for Vite
+ */
+export const componentsModules = (
+  components: string[],
+  vite: ViteDevServer
+) => {
+  const matchedModules = new Set<ModuleNode>()
+  components.forEach((component) => {
+    const modules = vite.moduleGraph.getModulesByFile(component)
+    modules?.forEach((mod) => matchedModules.add(mod))
+  })
+  return matchedModules
+}
+
+export const collectCss = (
+  mods: Set<ModuleNode>,
+  styles = new Map<string, string>(),
+  checkedComponents = new Set()
+) => {
+  for (const mod of mods) {
+    if (
+      (mod.file?.endsWith('.scss') ||
+        mod.file?.endsWith('.css') ||
+        mod.id?.includes('vue&type=style')) &&
+      mod.ssrModule
+    ) {
+      styles.set(mod.url, mod.ssrModule.default)
+    }
+    if (mod.importedModules.size > 0 && !checkedComponents.has(mod.id)) {
+      checkedComponents.add(mod.id)
+      collectCss(mod.importedModules, styles, checkedComponents)
+    }
+  }
+  let result = ''
+  styles.forEach((content, id) => {
+    const styleTag = `<style type="text/css" vite-module-id="${hashCode(
+      id
+    )}">${content}</style>`
+    result = result.concat(styleTag)
+  })
+  return result
+}
+
+/**
+ * Client listener to detect updated modules through HMR, and remove the initial styled attached to the head
+ */
+export const removeCssHotReloaded = () => {
+  if (import.meta.hot) {
+    import.meta.hot.on('vite:beforeUpdate', (module: UpdatePayload) => {
+      module.updates.forEach((update) => {
+        const moduleStyle = document.querySelector(
+          `[vite-module-id="${hashCode(update.acceptedPath)}"]`
+        )
+        if (moduleStyle) {
+          moduleStyle.remove()
+        }
+      })
+    })
+  }
+}
+
+const hashCode = (moduleId: string) => {
+  let hash = 0,
+    i,
+    chr
+  if (moduleId.length === 0) return hash
+  for (i = 0; i < moduleId.length; i++) {
+    chr = moduleId.charCodeAt(i)
+    hash = (hash << 5) - hash + chr
+    hash |= 0 // Convert to 32bit integer
+  }
+  return hash
+}

package/src/node/helpers/logger.ts

@@ -1,98 +1,11 @@
 // 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