@revealui/core 0.0.1-pre.0

package/dist/plugins/distFileNames.ts

@@ -0,0 +1,341 @@
+export {
+  clean,
+  distFileNames,
+  fixExtractAssetsQuery,
+  getAssetFileName,
+  getChunkFileName,
+  getEntryFileName,
+  getRollupOutputs,
+  removeLeadingUnderscoreInFilename,
+  removePathSeperators,
+  removeUnderscoreDoublets,
+  replaceNonLatinCharaters,
+  workaroundGlob,
+}
+
+import crypto from "crypto"
+import path from "path"
+import type { Plugin, ResolvedConfig, Rollup } from "vite"
+import { getAssetsDir } from "../core/processing/getters/getAssetsDir.js"
+import {
+  assertModuleId,
+  getModuleFilePathAbsolute,
+} from "../core/processing/getters/getFilePath.js"
+import {
+  assert,
+  assertPosixPath,
+  assertUsage,
+  isArray,
+  isCallable,
+} from "./utils.js"
+type PreRenderedChunk = Rollup.PreRenderedChunk
+type PreRenderedAsset = Rollup.PreRenderedAsset
+
+type PluginDistFileNames = Plugin & {
+  name: string
+  apply: string
+  enforce: string
+  configResolved: Plugin["configResolved"] & {
+    (config: ResolvedConfig): void
+  }
+}
+
+interface RollupOptionsOutput {
+  manualChunks?: ManualChunksFunction | { [key: string]: string[] }
+}
+
+interface ManualChunksFunction {
+  (id: string, ...args: any[]): string | null | undefined
+}
+
+interface RollupOutput {
+  entryFileNames?: string | ((chunkInfo: PreRenderedChunk) => string)
+  chunkFileNames?: string | ((chunkInfo: PreRenderedChunk) => string)
+  assetFileNames?: string | ((chunkInfo: PreRenderedAsset) => string)
+  manualChunks?: ManualChunksFunction | { [key: string]: string[] }
+}
+
+function distFileNames(): PluginDistFileNames {
+  return {
+    name: "reveal:distFileNames",
+    apply: "build",
+    enforce: "post",
+    configResolved(config: ResolvedConfig) {
+      const rollupOutputs: RollupOutput[] = getRollupOutputs(config)
+      // We need to support multiple outputs: @vite/plugin-legacy adds an ouput, see https://github.com/revealjs/reveal/issues/477#issuecomment-1406434802
+      rollupOutputs.forEach((rollupOutput: RollupOutput) => {
+        if (!("entryFileNames" in rollupOutput)) {
+          rollupOutput.entryFileNames = (chunkInfo: PreRenderedChunk) =>
+            getEntryFileName(chunkInfo, config, true)
+        }
+        if (!("chunkFileNames" in rollupOutput)) {
+          rollupOutput.chunkFileNames = (chunkInfo: PreRenderedChunk) =>
+            getChunkFileName(chunkInfo, config)
+        }
+        if (!("assetFileNames" in rollupOutput)) {
+          rollupOutput.assetFileNames = (chunkInfo: PreRenderedAsset) =>
+            getAssetFileName(chunkInfo, config)
+        } else {
+          // If a user needs this:
+          //  - assertUsage() that the naming provided by the user ends with `.[hash][extname]`
+          //    - It's needed for getHash() of fixServerAssets()
+          //    - Asset URLs should always contain a hash: it's paramount for caching assets.
+          //    - If rollupOutput.assetFileNames is a function then use a wrapper function to apply the assertUsage()
+          assertUsage(
+            false,
+            "Setting Vite's configuration build.rollupOptions.output.assetFileNames is currently forbidden. Reach out if you need to use."
+          )
+        }
+        {
+          rollupOutput.manualChunks = function (
+            this: any,
+            id: string,
+            ...args: any[]
+          ): string | null | undefined {
+            const manualChunksOriginal: ManualChunksFunction | undefined = (
+              Array.isArray(config.build.rollupOptions.output)
+                ? (
+                    config.build.rollupOptions.output as RollupOptionsOutput[]
+                  ).map((output: RollupOptionsOutput) => output.manualChunks)[0]
+                : (config.build.rollupOptions.output as RollupOptionsOutput)
+                    ?.manualChunks
+            ) as ManualChunksFunction
+
+            if (manualChunksOriginal) {
+              if (isCallable(manualChunksOriginal)) {
+                const result = manualChunksOriginal.call(this, id, ...args)
+                if (
+                  typeof result === "string" ||
+                  result === null ||
+                  result === undefined
+                )
+                  return result
+              } else {
+                assertUsage(
+                  false,
+                  "The Vite's configuration build.rollupOptions.output.manualChunks must be a function. Reach out if you need to set it to another value."
+                )
+              }
+            }
+
+            // Disable CSS bundling to workaround https://github.com/revealjs/reveal/issues/1815
+            if (id.endsWith(".css")) {
+              const userRootDir: string = config.root
+              if (id.startsWith(userRootDir)) {
+                assertPosixPath(id)
+                assertModuleId(id)
+
+                let name: string
+                const isNodeModules = id.match(
+                  /node_modules\/([^\/]+)\/(?!.*node_modules)/
+                )
+                if (isNodeModules) {
+                  name = isNodeModules[1]!
+                } else {
+                  const filePath = getModuleFilePathAbsolute(id, config)
+                  name = filePath
+                  name = name.split(".").slice(0, -1).join(".") // remove file extension
+                  name = name.split("/").filter(Boolean).join("_")
+                }
+
+                // Make fileHash the same between local development and CI
+                const idStable = path.posix.relative(userRootDir, id)
+                // Don't remove `?` queries because each `id` should belong to a unique bundle.
+                const hash = getIdHash(idStable)
+
+                return `${name}-${hash}`
+              } else {
+                let name: string
+                const isVirtualModule = id.match(/virtual:([^:]+):/)
+                if (isVirtualModule) {
+                  name = isVirtualModule[1]!
+                  assert(name)
+                } else if (
+                  // https://github.com/revealjs/reveal/issues/1818#issuecomment-2298478321
+                  id.startsWith("/__uno")
+                ) {
+                  name = "uno"
+                } else {
+                  name = "style"
+                }
+                const hash = getIdHash(id)
+                return `${name}-${hash}`
+              }
+            }
+          }
+        }
+      })
+    },
+  }
+}
+
+function getIdHash(id: string) {
+  return crypto.createHash("md5").update(id).digest("hex").slice(0, 8)
+}
+
+function getAssetFileName(
+  assetInfo: PreRenderedAsset,
+  config: ResolvedConfig
+): string {
+  const assetsDir = getAssetsDir(config)
+  const dir = assetsDir + "/static"
+  let { name } = assetInfo
+
+  if (!name) {
+    return `${dir}/[name].[hash][extname]`
+  }
+
+  // https://github.com/revealjs/reveal/issues/794
+  assertPosixPath(name)
+  name = path.posix.basename(name)
+
+  // dist/client/assets/index.page.server.jsx_extractAssets_lang.e4e33422.css
+  // => dist/client/assets/index.page.server.e4e33422.css
+  if (
+    // Vite 2
+    name?.endsWith("_extractAssets_lang.css") ||
+    // Vite 3
+    name?.endsWith("?extractAssets&lang.css")
+  ) {
+    name = name.split(".").slice(0, -2).join(".")
+    name = clean(name)
+    return `${dir}/${name}.[hash][extname]`
+  }
+
+  name = name.split(".").slice(0, -1).join(".")
+  name = clean(name)
+  return `${dir}/${name}.[hash][extname]`
+}
+
+function getChunkFileName(
+  _chunkInfo: PreRenderedChunk,
+  config: ResolvedConfig
+): string {
+  const isForClientSide = !config.build.ssr
+  let name = "chunks/chunk-[hash].js"
+  if (isForClientSide) {
+    const assetsDir = getAssetsDir(config)
+    name = `${assetsDir}/${name}`
+  }
+  return name
+}
+
+function getEntryFileName(
+  chunkInfo: PreRenderedChunk,
+  config: ResolvedConfig,
+  isEntry: boolean
+): string {
+  const assetsDir = getAssetsDir(config)
+  const isForClientSide = !config.build.ssr
+
+  let { name } = chunkInfo
+  assertPosixPath(name)
+  name = clean(
+    name,
+    true,
+    // Not needed for client-side because dist/ filenames contain `.[hash].js`
+    !isForClientSide
+  )
+
+  if (isForClientSide) {
+    return `${assetsDir}/${name}.[hash].js`
+  } else {
+    return `${name}.${isEntry ? "mjs" : "js"}`
+  }
+}
+
+function removePathSeperators(name: string) {
+  assertPosixPath(name)
+  assert(!name.startsWith("/"))
+  const entryDir = "entries/"
+  const hasEntryDir = name.startsWith(entryDir)
+  if (hasEntryDir) {
+    name = name.slice(entryDir.length)
+    assert(!name.startsWith("/"))
+  }
+  name = name.split("/").join("_")
+  if (hasEntryDir) {
+    name = `${entryDir}${name}`
+  }
+  return name
+}
+
+function clean(
+  name: string,
+  removePathSep?: boolean,
+  fixGlob?: boolean
+): string {
+  name = fixExtractAssetsQuery(name)
+  if (fixGlob) {
+    name = workaroundGlob(name)
+  }
+  name = replaceNonLatinCharaters(name)
+  if (removePathSep) {
+    name = removePathSeperators(name)
+  }
+  name = removeLeadingUnderscoreInFilename(name)
+  name = removeUnderscoreDoublets(name)
+
+  // Avoid:
+  // ```
+  // dist/client/assets/entries/.Dp9wM6PK.js
+  // dist/server/entries/.mjs
+  // ```
+  assert(!name.endsWith("/"))
+
+  return name
+}
+function fixExtractAssetsQuery(name: string): string {
+  name = name.replace(/\.[^\.]*_extractAssets_lang$/, ".extractAssets")
+  return name
+}
+function removeUnderscoreDoublets(name: string): string {
+  name = name.split(/__+/).join("_")
+  return name
+}
+function replaceNonLatinCharaters(name: string): string {
+  name = name.split("+").join("")
+  name = name.replace(/[^a-zA-Z0-9\/\._]/g, "-")
+  return name
+}
+// Remove leading `_` from filename
+//  - GitHub Pages treat URLs with filename starting with `_` differently (removing the need for workaround of creating a .jekyll file)
+function removeLeadingUnderscoreInFilename(name: string): string {
+  assertPosixPath(name)
+  const paths = name.split("/")
+  {
+    const last = paths.length - 1
+    let filename = paths[last]!
+    if (filename.startsWith("_")) {
+      filename = filename.slice(1)
+      paths[last] = filename
+      name = paths.join("/")
+    }
+  }
+  return name
+}
+
+function workaroundGlob(name: string) {
+  // Clean up glob patterns for dist files
+  name = name.split("+").join("")
+  // Version 1 updates for `.page.js` file patterns
+  ;["client", "server", "route"].forEach((env) => {
+    name = name.split(`.page.${env}`).join(`-page-${env}`)
+  })
+  name = name.split(".page.").join("-page.")
+  name = name.replace(/\.page$/, "-page")
+  return name
+}
+
+function getRollupOutputs(config: ResolvedConfig) {
+  // @ts-expect-error is read-only
+  config.build ??= {}
+  config.build.rollupOptions ??= {}
+  config.build.rollupOptions.output ??= {}
+  const { output } = config.build.rollupOptions
+  assert(
+    isArray(output) || typeof output === "object",
+    "Invalid Rollup output configuration"
+  )
+  return isArray(output) ? output : [output]
+}

package/dist/plugins/envVars.ts

@@ -0,0 +1,150 @@
+export { envVarsPlugin }
+
+import type { Plugin, ResolvedConfig } from "vite"
+import { loadEnv } from "vite"
+
+import { getModuleFilePathAbsolute } from "../core/processing/getters/getFilePath.js"
+import { sourceMapPassthrough } from "../core/processing/transformers/rollupSourceMap.js"
+import {
+  assert,
+  assertPosixPath,
+  assertUsage,
+  assertWarning,
+  escapeRegex,
+  isArray,
+  lowerFirst,
+} from "./utils.js"
+
+// TODO/enventually: (after we implemented reveal.config.js)
+// - Make import.meta.env work inside +config.js
+//   - For it to work, we'll probably need the user to define the settings (e.g. `envDir`) for loadEnv() inside reveal.config.js instead of vite.config.js
+//   - Or stop using Vite's `mode` implemention and have Reveal implement its own `mode` feature? (So that the only dependencies are `$ reveal build --mode staging` and `$ MODE=staging reveal build`.)
+
+type PluginEnvVars = Plugin & {
+  name: string
+  enforce: "post"
+  transform(
+    code: string | string[],
+    id: string,
+    options: any
+  ): string | Promise<string>
+}
+
+const PUBLIC_ENV_PREFIX = "PUBLIC_ENV__"
+const PUBLIC_ENV_WHITELIST = [
+  // https://github.com/revealjs/reveal/issues/1724
+  "STORYBOOK",
+]
+
+function envVarsPlugin(): PluginEnvVars {
+  let envsAll: Record<string, string>
+  let config: ResolvedConfig
+  return {
+    name: "reveal:envVars",
+    enforce: "post",
+    configResolved(config_: ResolvedConfig) {
+      config = config_
+      config.command
+      envsAll = loadEnv(config.mode, config.envDir || config.root, "")
+      // Vite's built-in plugin vite:define needs to apply after this plugin.
+      //  - This plugin reveal:env needs to apply after reveal:extractAssets and reveal:extractExportNames which need to apply after @vitejs/plugin-vue
+      ;(config.plugins as Plugin[]).sort(
+        lowerFirst<Plugin>((plugin) =>
+          (plugin as { name?: string }).name === "vite:define" ? 1 : 0
+        )
+      )
+    },
+    transform(
+      code: string | string[],
+      id: string,
+      options: { ssr?: boolean } | undefined
+    ): string {
+      assertPosixPath(id)
+      const codeStr = Array.isArray(code) ? code.join("") : code
+      if (id.includes("/node_modules/")) return codeStr
+      if (!id.startsWith(config.root)) return codeStr
+      if (!code.includes("import.meta.env.")) return codeStr
+
+      const isBuild = config.command === "build"
+      const isClientSide = getIsClientSide(config, options)
+
+      Object.entries(envsAll)
+        .filter(([key]) => {
+          // Already handled by Vite
+          const envPrefix = !config.envPrefix
+            ? []
+            : isArray(config.envPrefix)
+              ? config.envPrefix
+              : [config.envPrefix]
+          return !envPrefix.some((prefix) => key.startsWith(prefix))
+        })
+        .forEach(([envName, envVal]) => {
+          const envStatement = `import.meta.env.${envName}` as const
+          const envStatementRegEx = new RegExp(
+            escapeRegex(envStatement) + "\\b",
+            "g"
+          )
+
+          // Security check
+          {
+            const isPrivate =
+              !envName.startsWith(PUBLIC_ENV_PREFIX) &&
+              !PUBLIC_ENV_WHITELIST.includes(envName)
+            if (isPrivate && isClientSide) {
+              const codeStr = Array.isArray(code) ? code.join("") : code
+              if (!envStatementRegEx.test(codeStr)) return
+              const modulePath = getModuleFilePathAbsolute(id, config)
+              const errMsgAddendum: string = isBuild
+                ? ""
+                : " (Reveal will prevent your app from building for production)"
+              const keyPublic = `${PUBLIC_ENV_PREFIX}${envName}` as const
+              const errMsg =
+                `${envStatement} is used in client-side file ${modulePath} which means that the environment variable ${envName} will be included in client-side bundles and, therefore, ${envName} will be publicly exposed which can be a security leak${errMsgAddendum}. Use ${envStatement} only in server-side files, or rename ${envName} to ${keyPublic}, see https://reveal.dev/env` as const
+              if (isBuild) {
+                assertUsage(false, errMsg)
+              } else {
+                // - Only a warning for faster development DX (e.g. when user toggles `ssr: boolean` or `onBeforeRenderIsomorph: boolean`).
+                // - But only showing a warning can be confusing: https://github.com/revealjs/reveal/issues/1641
+                assertWarning(false, errMsg, { onlyOnce: true })
+              }
+            }
+            // Double check
+            assert(!(isPrivate && isClientSide) || !isBuild)
+          }
+
+          // Apply
+          const codeStr = Array.isArray(code) ? code.join("") : code
+          code = applyEnvVar(envStatementRegEx, envVal, codeStr)
+        })
+
+      // Line numbers didn't change.
+      //  - We only break the column number of a couple of lines, wich is acceptable.
+      //  - Anyways, I'm not even sure Vite supports high-resolution column number source mapping.
+      const ret = sourceMapPassthrough(String(code))
+      return ret.code
+    },
+  }
+}
+function applyEnvVar(envStatementRegEx: RegExp, envVal: string, code: string) {
+  return code.replace(envStatementRegEx, JSON.stringify(envVal))
+}
+
+function getIsClientSide(
+  config: ResolvedConfig,
+  options?: { ssr?: boolean }
+): boolean {
+  const isBuild = config.command === "build"
+  if (isBuild) {
+    assert(typeof config.build.ssr === "boolean")
+    const isServerSide: boolean = config.build.ssr
+    if (options !== undefined) {
+      assert(options.ssr === isServerSide)
+    }
+    return !isServerSide
+  } else {
+    assert(config.build.ssr === false)
+    assert(typeof options?.ssr === "boolean")
+    const isServerSide: boolean = options.ssr
+    return !isServerSide
+  }
+}