@revealui/core 0.0.1-pre.0

package/dist/plugins/extractAssetsPlugin.ts

@@ -0,0 +1,318 @@
+// Remove this workaround if the other workaround config.build.ssrEmitAssets turns out to be reliable.
+//  - Remove this file then revert this commit: https://github.com/revealjs/reveal/commit/805a18974f13420a78fcc30fdd676696e405c3ca
+
+// Workaround to make client-side bundles include the CSS imports living in server-side-only code.
+//  - This is needed for HTML-only pages, and React Server Components.
+//  - We recommend using the debug flag to get an idea of how this plugin works: `$ DEBUG=reveal:extractAssets pnpm exec vite build`. Then have a look at `dist/client/manifest.json` and see how `.page.server.js` entries have zero JavaScript but only CSS.
+//  - This appraoch supports import path aliases `vite.config.js#resolve.alias` https://vitejs.dev/config/#resolve-alias
+
+export { extractAssetsPlugin, extractAssetsRE }
+
+import pc from "@brillout/picocolors"
+import { type Plugin, type ResolvedConfig, type Rollup } from "vite"
+import {
+  getRevealConfig,
+  isV1Design,
+  type RevealConfigObject,
+} from "../core/processing/getters/getRevealConfig/index.js"
+
+import { extractAssetsAddQuery } from "../core/assets/extractAssetsQuery.js"
+import { assertV1Design } from "../core/gaurds/assertions/assertV1Design.js"
+import { isAsset } from "../core/gaurds/validators/isAsset.js"
+import { getConfigReveal } from "../core/processing/getters/getConfigReveal.js"
+import {
+  getImportStatements,
+  ImportStatement,
+} from "../core/processing/parsers/parseEsModule.js"
+import { sourceMapRemove } from "../core/processing/transformers/rollupSourceMap.js"
+import { ConfigRevealResolved } from "../types/interfaces/reveal.js"
+import { fixServerAssets_isEnabled } from "./config/fixServerAssets.js"
+import {
+  assert,
+  assertPosixPath,
+  assertUsage,
+  createDebugger,
+  getVirtualFileId,
+  isScriptFile,
+  isVirtualFileId,
+  resolveVirtualFileId,
+  styleFileRE,
+  viteIsSSR_options,
+} from "./utils.js"
+
+type ResolvedId = Rollup.ResolvedId
+
+type PluginExtractAssets = (Plugin & {
+  name: string
+  enforce?: "pre" | "post"
+  resolveId?(
+    source: string,
+    importer: string,
+    options: any
+  ): Promise<ResolvedId | null | void>
+  load?(id: string): string | void
+  configResolved?(config: ResolvedConfig): void
+})[]
+
+const extractAssetsRE = /(\?|&)extractAssets(?:&|$)/
+const rawRE = /(\?|&)raw(?:&|$)/
+const urlRE = /(\?|&)url(?:&|$)/
+const EMPTY_MODULE_ID = "virtual:reveal:empty-module"
+
+const debug = createDebugger("reveal:extractAssets")
+
+function extractAssetsPlugin(): PluginExtractAssets {
+  let config: ResolvedConfig
+  let configReveal: ConfigRevealResolved
+  let revealConfig: RevealConfigObject
+  let isServerAssetsFixEnabled: boolean
+  return [
+    // This plugin removes all JavaScript from server-side only code, so that only CSS imports remains. (And also satic files imports e.g. `import logoURL from './logo.svg.js'`).
+    {
+      name: "reveal:extractAssets:remove-javaScript",
+      // In dev, things just work. (Because Vite's module graph erroneously conflates the Vite server-side importees with the client-side importees.)
+      apply: "build",
+      enforce: "post",
+      async transform(
+        src: string,
+        id: string,
+        options: boolean | { ssr?: boolean } | undefined
+      ) {
+        if (!extractAssetsRE.test(id)) {
+          return
+        }
+        if (isServerAssetsFixEnabled) {
+          // I'm guessing isServerAssetsFixEnabled can only be true when mixing both designs: https://github.com/revealjs/reveal/issues/1480
+          assertV1Design(revealConfig.pageConfigs, true)
+          assert(false)
+        }
+        assert(configReveal.includeAssetsImportedByServer)
+        assert(!viteIsSSR_options(options))
+        const importStatements = await getImportStatements(src)
+        const moduleNames = getImportedModules(importStatements)
+        const code = moduleNames
+          .map((moduleName) => `import '${moduleName}';`)
+          .join("\n")
+        debugTransformResult(id, code, importStatements)
+        return sourceMapRemove(code)
+      },
+    },
+    // This plugin appends `?extractAssets` to module IDs
+    {
+      name: "reveal:extractAssets:append-extractAssets-query",
+      apply: "build",
+      // We ensure this plugin to be run before:
+      //  - rollup's `alias` plugin; https://github.com/rollup/plugins/blob/5363f55aa1933b6c650832b08d6a54cb9ea64539/packages/alias/src/index.ts
+      //  - Vite's `vite:resolve` plugin; https://github.com/vitejs/vite/blob/d649daba7682791178b711d9a3e44a6b5d00990c/packages/vite/src/node/plugins/resolve.ts#L105
+      enforce: "pre",
+      async resolveId(
+        source: string,
+        importer: string | undefined,
+        options: boolean | { ssr?: boolean } | undefined
+      ) {
+        if (viteIsSSR_options(options)) {
+          // When building for the server, there should never be a `?extractAssets` query
+          assert(!extractAssetsRE.test(source))
+          assert(importer === undefined || !extractAssetsRE.test(importer))
+          return
+        }
+
+        // If there is no `importer` then `module` is an entry.
+        // We don't need to append `?extractAssets` to entries because they already have `?extractAssets` as reveal appends `?extractAssets` to entries by using `import.meta.glob('/**/*.page.server.js', { as: "extractAssets" })` (see `generateImportGlobs.ts`).
+        if (!importer) {
+          return
+        }
+
+        // We only append `?extractAssets` if the parent module has `?extractAssets`
+        if (!extractAssetsRE.test(importer)) {
+          return
+        }
+        assert(configReveal.includeAssetsImportedByServer)
+
+        let resolution: null | ResolvedId = null
+        try {
+          resolution = await this.resolveId(source, importer, {
+            skipSelf: true,
+            ...(typeof options === "object" ? options : {}),
+          })
+        } catch {}
+
+        // Sometimes Rollup fails to resolve. If it fails to resolve, we assume the dependency to be an npm package and we skip it. (I guess Rollup should always be able to resolve local dependencies?)
+        if (!resolution) return emptyModule(source, importer)
+
+        const { id: file, external } = resolution
+
+        // Nothing is externalized when building for the client-side
+        assert(external === false)
+
+        // We include:
+        //  - CSS(/LESS/SCSS/...) files
+        //  - Asset files (`.svg`, `.pdf`, ...)
+        //  - URL imports (e.g. `import scriptUrl from './script.js?url.js'`)
+        if (styleFileRE.test(file) || isAsset(file) || urlRE.test(file)) {
+          debugOperation("INCLUDED", file, importer)
+          return resolution
+        }
+
+        // We erase `source` if its file doesn't contain JavaScript
+        if (!isScriptFile(file)) {
+          return emptyModule(file, importer)
+        }
+
+        // If the import path resolves to a file in `node_modules/`, we ignore that file:
+        //  - Direct CSS dependencies are included though, such as `import 'bootstrap/theme/dark.css'`. (Because the above if-branch for CSS files will add the file.)
+        //  - Loading CSS from a library (living in `node_modules/`) in a non-direct way is unconventional; we can safely not support this case. (I'm not aware of any library that does this.)
+        assertPosixPath(file)
+        if (file.includes("/node_modules/")) {
+          return emptyModule(file, importer)
+        }
+        // When a library is symlinked, it lives outside `root`.
+        assertPosixPath(config.root)
+        if (!file.startsWith(config.root)) {
+          return emptyModule(file, importer)
+        }
+
+        return appendExtractAssetsQuery(file, importer)
+      },
+    },
+    {
+      name: "reveal:extractAssets-3",
+      apply: "build",
+      load(id: string) {
+        if (!isVirtualFileId(id)) return undefined
+        id = getVirtualFileId(id)
+
+        if (id === EMPTY_MODULE_ID) {
+          return "// Erased by reveal:extractAssets"
+        }
+      },
+      config() {
+        if (debug.isActivated) {
+          return { logLevel: "silent" }
+        }
+      },
+    },
+    {
+      name: "reveal:extractAssets-4",
+      async configResolved(config_: ResolvedConfig) {
+        configReveal = await getConfigReveal(config_)
+        config = config_
+        revealConfig = await getRevealConfig(config, false)
+        isServerAssetsFixEnabled =
+          fixServerAssets_isEnabled() && (await isV1Design(config, false))
+        if (!isServerAssetsFixEnabled) {
+          // https://github.com/revealjs/reveal/issues/1060
+          assertUsage(
+            !config.plugins.find(
+              (p) => (p as any).name === "vite-tsconfig-paths"
+            ),
+            "vite-tsconfig-paths not supported, remove it and use vite.config.js#resolve.alias instead"
+          )
+        }
+      },
+    },
+  ]
+}
+
+function emptyModule(file: string, importer: string) {
+  debugOperation("NUKED", file, importer)
+  return resolveVirtualFileId(EMPTY_MODULE_ID)
+}
+function appendExtractAssetsQuery(file: string, importer: string) {
+  debugOperation("TRANSFORMED", file, importer)
+  return extractAssetsAddQuery(file)
+}
+
+function getImportedModules(importStatements: ImportStatement[]): string[] {
+  const moduleNames: string[] = importStatements
+    .map(analyzeImport)
+    .filter(({ moduleName, skip }) => {
+      debug(`import ${skip ? "SKIPPED" : "INCLUDED"} : ${moduleName}`)
+      return !skip
+    })
+    .map(({ moduleName }) => {
+      assert(moduleName)
+      return moduleName
+    })
+  return moduleNames
+}
+
+function analyzeImport(importStatement: ImportStatement): {
+  moduleName: string | null
+  skip: boolean
+} {
+  const { a: assertion, n } = importStatement
+
+  // `n` is `undefined` for dynamic imports with variable, e.g. `import(moduleName)`
+  if (n === undefined) return { moduleName: null, skip: true }
+  const moduleName = n
+
+  // Remove assertions such as:
+  //  - `import json from './json.json' assert { type: 'json.js' }`
+  //  - `import('asdf', { assert: { type: 'json' }})
+  if (assertion !== -1) {
+    return { moduleName, skip: true }
+  }
+
+  // Add imports such as `import logoUrl from './logo.svg?url.js'`
+  if (urlRE.test(moduleName)) {
+    return { moduleName, skip: false }
+  }
+
+  // Remove imports such as `import logoUrl from './logo.svg?raw.js'`
+  if (rawRE.test(moduleName)) {
+    return { moduleName, skip: true }
+  }
+
+  /* We shouldn't do this because of aliased imports
+  if (!moduleName.startsWith('.')) {
+    return { moduleName, skip: true }
+  }
+  */
+
+  // It seems like we need to manually nuke `react`; it seems that what the React runtime `@vitejs/react` injects is not picked up by our `resolveId` hook.
+  if (/^react($|\/)/.test(moduleName)) {
+    return { moduleName, skip: true }
+  }
+
+  return { moduleName, skip: false }
+}
+
+function debugOperation(
+  operation: "NUKED" | "INCLUDED" | "TRANSFORMED",
+  id: string,
+  importer: string
+) {
+  debug(`import ${operation}: ${id} (importer: ${importer})`)
+}
+
+function stringifyImportStatements(importStatements: ImportStatement[]) {
+  const importsStr: string[] = importStatements.map((importStatement) => {
+    const { a: assertion, n } = importStatement
+
+    // `n` is `undefined` for dynamic imports with variable, e.g. `import(moduleName)`
+    if (n === undefined) return "import(...)"
+
+    let importStr = `import '${n}'`
+
+    if (assertion !== -1) {
+      importStr += " assert { ... }"
+    }
+
+    return importStr
+  })
+  return importsStr
+}
+
+function debugTransformResult(
+  id: string,
+  code: string,
+  importStatements: ImportStatement[]
+) {
+  const importStatementsStr = stringifyImportStatements(importStatements)
+    .map((s) => pc.cyan(s))
+    .join(", ")
+  debug(
+    `source TRANSFORMED: ${id} (CODE: ${pc.cyan(code.split("\n").join(" "))}, IMPORTS: ${importStatementsStr})`
+  )
+}

package/dist/plugins/extractExportNamesPlugin.ts

@@ -0,0 +1,154 @@
+export { extractExportNamesPlugin, extractExportNamesRE, isUsingClientRouter }
+
+import type { Plugin } from "vite"
+import getGlobalObject from "../core/processing/getters/getGlobalObject.js"
+import { getModuleExportNames } from "../core/processing/parsers/parseEsModule.js"
+import { sourceMapRemove } from "../core/processing/transformers/rollupSourceMap.js"
+import {
+  assert,
+  assertUsage,
+  createDebugger,
+  getFileExtension,
+  viteIsSSR_options,
+} from "./utils.js"
+
+type PluginExtractExportNames = Plugin & {
+  name: string
+  enforce: "post"
+  transform(
+    src: string,
+    id: string,
+    options: any
+  ): Promise<{ code: string; map: { mappings: string } } | void>
+  configureServer(): void
+  config(): { logLevel: "silent" } | undefined
+}
+
+const extractExportNamesRE = /(\?|&)extractExportNames(?:&|$)/
+const debug = createDebugger("reveal:extractExportNames")
+const globalObject = getGlobalObject<{ usesClientRouter?: true }>(
+  "extractExportNamesPlugin.ts",
+  {}
+)
+
+function extractExportNamesPlugin(): PluginExtractExportNames {
+  let isDev = false
+  return {
+    name: "reveal:extractExportNames",
+    enforce: "post",
+    async transform(
+      src: string,
+      id: string,
+      options: boolean | { ssr?: boolean } | undefined
+    ) {
+      const isClientSide = !viteIsSSR_options(options)
+      if (extractExportNamesRE.test(id)) {
+        const code = await getExtractExportNamesCode(
+          src,
+          isClientSide,
+          !isDev,
+          id
+        )
+        debug("id " + id, [
+          "result:\n" + code.code.trim(),
+          "src:\n" + src.trim(),
+        ])
+        return code
+      }
+    },
+    configureServer() {
+      isDev = true
+    },
+    config(): { logLevel: "silent" } | undefined {
+      if (debug.isActivated) {
+        return { logLevel: "silent" }
+      }
+    },
+  }
+}
+
+async function getExtractExportNamesCode(
+  src: string,
+  isClientSide: boolean,
+  isProduction: boolean,
+  id: string
+) {
+  const { exportNames, wildcardReExports } = await getModuleExportNames(src)
+  if (isClientSide && exportNames.includes("clientRouting")) {
+    globalObject.usesClientRouter = true
+  }
+  const code = getCode(
+    exportNames,
+    wildcardReExports,
+    isClientSide,
+    isProduction,
+    id
+  )
+  return sourceMapRemove(code)
+}
+
+function getCode(
+  exportNames: string[],
+  wildcardReExports: string[],
+  isClientSide: boolean,
+  isProduction: boolean,
+  id: string
+) {
+  let code = ""
+  const reExportVarNames = wildcardReExports.map((reExportedModuleName, i) => {
+    const varName = `m${i}`
+    code += `import { exportNames as ${varName} } from '${addQuery(reExportedModuleName, id)}'`
+    code += "\n"
+    return varName
+  })
+
+  code += "\n"
+  code += `export const exportNames = [${[
+    ...exportNames.map((n) => JSON.stringify(n)),
+    ...reExportVarNames.map((varName) => `...${varName}`),
+  ].join(", ")}];`
+
+  code = injectHmr(code, isClientSide, isProduction)
+
+  return code
+}
+
+function addQuery(moduleName: string, id: string) {
+  if (moduleName.includes("?")) {
+    assert(moduleName.split("?").length === 2)
+    moduleName = moduleName.replace("?", "?extractExportNames&")
+  } else {
+    const fileExtension = getFileExtension(moduleName)
+    if (!fileExtension) {
+      assert(extractExportNamesRE.test(id))
+      const idReal = id.split("?")[0]!
+      assertUsage(
+        false,
+        `Modify the re-export of ${idReal}, see https://github.com/revealjs/reveal/issues/864#issuecomment-1537202290`
+      )
+    }
+    moduleName = `${moduleName}?extractExportNames&lang.${fileExtension}`
+  }
+  return moduleName
+}
+
+function injectHmr(code: string, isClientSide: boolean, isProduction: boolean) {
+  if (isProduction) {
+    return code
+  }
+
+  if (isClientSide) {
+    code += "\n"
+    code += `if (import.meta.hot) import.meta.hot.accept((mod) => { exportNames.length=0; exportNames.push(...mod.exportNames); });`
+  } else {
+    // Ensure Vite considers the module as `isSelfAccepting`. (Needed because Vite's module graph erroneously conflates the Vite server-side modules with their client-side counterparts.)
+    code += "\n"
+    code += "if(false){import.meta.hot.accept(()=>{})};"
+  }
+
+  return code
+}
+
+function isUsingClientRouter(): boolean {
+  return globalObject.usesClientRouter === true
+}