lecodes-cli 2.4.10 → 2.5.0

package/src/web/build.ts

@@ -1,3 +1,4 @@
+import { readAppEnv } from "../project/env"
 import { createHash } from "node:crypto"
 import { copyFileSync, cpSync, existsSync, mkdirSync, readFileSync, readdirSync, rmSync, statSync, writeFileSync } from "node:fs"
 import { dirname, extname, join, resolve } from "node:path"
@@ -5,7 +6,7 @@ import { buildLiteMaterialArtifact } from "lecodes-sdk/compile"
 import { collectLocalEntries } from "../compile/collectLocal"
 import { applyProjectFonts } from "../compile/fonts"
 import { applyAppAssetIcons } from "../compile/assetIcons"
-import { ambiguousEntryWarning, compileProject } from "../compile/projectCompile"
+import { ambiguousEntryWarning, compileProject, type CompileEntry } from "../compile/projectCompile"
 import { readAppConfigAt } from "../commands/app/shared"
 import type { Manifest } from "../project/manifest"
 import { CliError } from "../cli"
@@ -98,70 +99,62 @@ const walk = (dir: string, prefix = ""): { path: string, bytes: number }[] => {
   return out
 }
 
-export const buildWeb = async (options: WebBuildOptions): Promise<WebBuildResult> => {
-  const { root, manifest, name, lite } = options
-  const out = resolve(root, options.out)
-  if (out === resolve(root) || resolve(root).startsWith(out + "\\") || resolve(root).startsWith(out + "/")) {
-    throw new CliError(`The output folder is cleaned before a build: "${options.out}" holds the project itself.`)
-  }
-  const config: WebConfig = (readAppConfigAt(root) as { web?: WebConfig } | null)?.web ?? {}
+/** The bundle with its header's time stamp as `-`: the same project builds into the same bytes
+ *  (the line stays, for the source map's count of lines). */
+export const stableBundle = (js: string): string => js.replace(/^\/\/ last-updated: .*$/m, "// last-updated: -")
+
+/** The plugins a bundle's header lists (`// plugins: ar;camera`): the ones its page carries. */
+export const listedPlugins = (js: string): Set<string> =>
+  new Set((/^\/\/ plugins: (.+)$/m.exec(js.slice(0, 2000))?.[1] ?? "").split(";").map((id) => id.trim()).filter(Boolean))
+
+/** A project's web half, built (web/halves.ts): what the page carries for a plugin it lists. */
+export type BuiltHalf = { half: ProjectHalf, js: string }
+
+/** The project's own web halves of the plugins the bundle lists, built — before anything is
+ *  written: one that does not build throws, and the folder of the last build stays as it was. */
+export const buildListedHalves = async (root: string, js: string, opts: { minify?: boolean } = {}): Promise<BuiltHalf[]> => {
+  const listed = listedPlugins(js)
+  const halves: BuiltHalf[] = []
+  for (const half of projectHalves(root)) if (listed.has(half.id)) halves.push({ half, js: await buildHalf(half, { minify: opts.minify }) })
+  return halves
+}
+
+export type LitePageOptions = {
+  /** The bundle's text: what decides the features and the plugins the page keeps. */
+  js: string
+  /** The bundle as the page names it: `app.<hash>.js` (relative — `web build`), `/app.js` (a host
+   *  of its own — the deploy worker). */
+  bundleSrc: string
+  /** app.json's `web`. */
+  web: WebConfig
+  /** The page's title when `web.title` names none. */
+  name: string
+  /** app.json's `icon`: the file (absolute) and what app.json says (for the warning); null = none. */
+  icon: { file: string, declared: string } | null
+  /** The project's halves of the plugins the bundle lists (buildListedHalves). */
+  halves: BuiltHalf[]
+}
+
+/**
+ * The page of Web Lite for one bundle, into `out` (an existing, empty folder): Web Lite's dist
+ * (`dist`) copied, the features and fonts the bundle never names pruned, the plugins it does not
+ * list dropped and the project's halves put beside the first-party ones (plugins.json), and
+ * `index.html` from the dist's (title, theme color, icon, the bundle's src; `<base>` and `404.html`
+ * in path mode). The bundle and the project's files are the caller's (copyNamedAssets after this).
+ * `lecodes web build` and the deploy worker (tools/worker) both build their folder through this: a
+ * project the platform deploys gets the page `web build` would have written. Returns its warnings.
+ */
+export const assembleLitePage = (dist: string, out: string, opts: LitePageOptions): string[] => {
+  const { js, web: config, halves } = opts
   const mode = config.urls === "path" ? "path" : "hash"
   const base = normalBase(config.base)
   const warnings: string[] = []
-
-  // ---- the bundle: every asset a url relative to the page ------------------------------------------------
-  const assetUrl = (path: string) => "assets" + encodeURI(path)
-  const collected = collectLocalEntries(root, manifest, "assets", { localShaders: true })
-  const entries = collected.entries.filter((e) => {
-    // what a build made is no part of the project
-    const abs = e.absPath ? resolve(e.absPath) : null
-    return !(abs && (abs === out || abs.startsWith(out + "\\") || abs.startsWith(out + "/")))
-  })
-  warnings.push(...collected.warnings)
-  // A shader's artifact is named by a hash of its text (a hosting keeps a file of one name for
-  // good). The bundle builds the name at run time from the `_opengl` template (compileProject):
-  // on the page that is `<hash>_webgl-lite.filamat`, the only artifact written.
-  const shaders = new Map<string, string>()   // hash → the lite artifact's JSON
-  for (const entry of entries) {
-    if (entry.type !== "shader" || !entry.absPath) continue
-    const text = readFileSync(entry.absPath, "utf8")
-    const hash = createHash("sha256").update(text).digest("hex").slice(0, 16)
-    shaders.set(hash, JSON.stringify(buildLiteMaterialArtifact(text)))
-    entry.shaders = [{ platform: "opengl", src: `shaders/${hash}_opengl.filamat` }]
-  }
-  const fontsHeader = await applyProjectFonts(entries, {
-    mode: "vendor", root, vendorDir: root, vendorPrefix: "", publicUrl: "", relative: true,
-    makeResourceEntry: (path, absPath) => ({ path, type: "resource", fileSrc: assetUrl(path), absPath }),
-  })
-  const iconsHeader = await applyAppAssetIcons(entries)
-  if (!options.entry) {
-    const ambiguous = ambiguousEntryWarning(entries)
-    if (ambiguous) warnings.push(ambiguous)
-  }
-  const compiled = await compileProject({
-    entries, name, publicUrl: "", entryOverride: options.entry, header: true, fontsHeader, iconsHeader,
-    sourcemap: options.sourcemap === true, minify: options.minify,
-    onWarning: (w) => warnings.push(w),
-  })
-  // The same project builds into the same bytes: the bundle's name is its hash, and a hosting
-  // keeps a file of that name for good. The header's time stamp is the one line that would
-  // differ (the line stays, for the source map's count of lines).
-  const js = compiled.replace(/^\/\/ last-updated: .*$/m, "// last-updated: -")
-  const header = js.slice(0, 2000)
-  if (/^\/\/ 2d: enable/m.test(header)) {
+  if (/^\/\/ 2d: enable/m.test(js.slice(0, 2000))) {
     warnings.push("This project uses 2D scenes, which Web Lite does not show yet: the page runs its UI and its 3D, a 2D scene's calls fail. (`lecodes dev --web` runs the whole app on the web player.)")
   }
+  const listed = listedPlugins(js)
 
-  // the project's own web halves of the plugins it lists, built before the folder is cleaned: one
-  // that does not build leaves the last build as it was
-  const listed = new Set((/^\/\/ plugins: (.+)$/m.exec(header)?.[1] ?? "").split(";").map((id) => id.trim()).filter(Boolean))
-  const halves: { half: ProjectHalf, js: string }[] = []
-  for (const half of projectHalves(root)) if (listed.has(half.id)) halves.push({ half, js: await buildHalf(half, { minify: options.minify }) })
-
-  // ---- the folder ----------------------------------------------------------------------------------------------
-  rmSync(out, { recursive: true, force: true })
-  mkdirSync(out, { recursive: true })
-  cpSync(lite, out, { recursive: true })
+  cpSync(dist, out, { recursive: true })
   // the features this bundle never names are not part of its page
   const table = join(out, "features.json")
   if (existsSync(table)) {
@@ -200,44 +193,23 @@ export const buildWeb = async (options: WebBuildOptions): Promise<WebBuildResult
     else { rmSync(pluginsTable, { force: true }); rmSync(join(out, "plugins"), { recursive: true, force: true }) }
   }
 
-  const bundle = `app.${createHash("sha256").update(js).digest("hex").slice(0, 10)}.js`
-  writeFileSync(join(out, bundle), js)
-
-  // the project's assets: the ones the bundle names
-  for (const entry of entries) {
-    if (entry.type !== "resource" || !entry.absPath || !entry.fileSrc) continue
-    if (!js.includes(entry.fileSrc)) continue
-    const to = join(out, "assets", ...entry.path.split("/").filter(Boolean))
-    if (existsSync(to)) { warnings.push(`${entry.path}: a file of the page has this name in the built folder — the project's file was not copied`); continue }
-    mkdirSync(dirname(to), { recursive: true })
-    copyFileSync(entry.absPath, to)
-  }
-  // …and its shaders: the ones the bundle names
-  for (const [hash, artifact] of shaders) {
-    if (!js.includes(`shaders/${hash}_`)) continue
-    mkdirSync(join(out, "shaders"), { recursive: true })
-    writeFileSync(join(out, "shaders", `${hash}_webgl-lite.filamat`), artifact)
-  }
-
   // ---- the page ----------------------------------------------------------------------------------------------
-  const app = readAppConfigAt(root)
-  let html = readFileSync(join(lite, "index.html"), "utf8")
+  let html = readFileSync(join(dist, "index.html"), "utf8")
   const head: string[] = []
   head.push(`<meta name="theme-color" content="${escapeHtml(config.themeColor ?? "#000000")}" />`)
-  if (app?.icon) {
-    const icon = resolve(root, app.icon)
-    if (existsSync(icon)) {
-      const file = `icon${extname(icon).toLowerCase() || ".png"}`
-      copyFileSync(icon, join(out, file))
+  if (opts.icon) {
+    if (existsSync(opts.icon.file)) {
+      const file = `icon${extname(opts.icon.file).toLowerCase() || ".png"}`
+      copyFileSync(opts.icon.file, join(out, file))
       head.push(`<link rel="icon" href="${file}" />`, `<link rel="apple-touch-icon" href="${file}" />`)
     } else {
-      warnings.push(`app.json icon "${app.icon}" is not there — the page has no icon`)
+      warnings.push(`app.json icon "${opts.icon.declared}" is not there — the page has no icon`)
     }
   }
   // in path mode a route is a path: what the page names relatively is under the base, whatever the route
   if (mode === "path") head.unshift(`<base href="${escapeHtml(base)}" />`)
   const attrs = [
-    `data-src="${bundle}"`,
+    `data-src="${escapeHtml(opts.bundleSrc)}"`,
     ...(mode === "path" ? [`data-urls="path"`, `data-base="${escapeHtml(base)}"`] : []),
     ...(config.font === "system" ? [`data-font="system"`] : []),
   ].join(" ")
@@ -246,12 +218,101 @@ export const buildWeb = async (options: WebBuildOptions): Promise<WebBuildResult
     if (next === html) throw new CliError(`The page of Web Lite has no ${String(from)} to fill — this CLI and its page are of different versions.`)
     html = next
   }
-  replace(/<title>[^<]*<\/title>/, `<title>${escapeHtml(config.title ?? app?.name ?? name)}</title>`)
+  replace(/<title>[^<]*<\/title>/, `<title>${escapeHtml(config.title ?? opts.name)}</title>`)
   replace(`<div id="app"></div>`, `<div id="app" ${attrs}></div>`)
   replace("</head>", `  ${head.join("\n    ")}\n  </head>`)
   if (config.lang) replace(/<html lang="[^"]*">/, `<html lang="${escapeHtml(config.lang)}">`)
   writeFileSync(join(out, "index.html"), html)
   if (mode === "path") writeFileSync(join(out, "404.html"), html)
+  return warnings
+}
+
+/** The project's resources the bundle names (`js` holds their `fileSrc`), copied to
+ *  `out/assets/<path>` — after the page (assembleLitePage): a file of the page keeps a name both
+ *  have. Returns its warnings. */
+export const copyNamedAssets = (entries: CompileEntry[], js: string, out: string): string[] => {
+  const warnings: string[] = []
+  for (const entry of entries) {
+    if (entry.type !== "resource" || !entry.absPath || !entry.fileSrc) continue
+    if (!js.includes(entry.fileSrc)) continue
+    const to = join(out, "assets", ...entry.path.split("/").filter(Boolean))
+    if (existsSync(to)) { warnings.push(`${entry.path}: a file of the page has this name in the built folder — the project's file was not copied`); continue }
+    mkdirSync(dirname(to), { recursive: true })
+    copyFileSync(entry.absPath, to)
+  }
+  return warnings
+}
+
+export const buildWeb = async (options: WebBuildOptions): Promise<WebBuildResult> => {
+  const { root, manifest, name, lite } = options
+  const out = resolve(root, options.out)
+  if (out === resolve(root) || resolve(root).startsWith(out + "\\") || resolve(root).startsWith(out + "/")) {
+    throw new CliError(`The output folder is cleaned before a build: "${options.out}" holds the project itself.`)
+  }
+  const config: WebConfig = (readAppConfigAt(root) as { web?: WebConfig } | null)?.web ?? {}
+  const warnings: string[] = []
+
+  // ---- the bundle: every asset a url relative to the page ------------------------------------------------
+  const assetUrl = (path: string) => "assets" + encodeURI(path)
+  const collected = collectLocalEntries(root, manifest, "assets", { localShaders: true })
+  const entries = collected.entries.filter((e) => {
+    // what a build made is no part of the project
+    const abs = e.absPath ? resolve(e.absPath) : null
+    return !(abs && (abs === out || abs.startsWith(out + "\\") || abs.startsWith(out + "/")))
+  })
+  warnings.push(...collected.warnings)
+  // A shader's artifact is named by a hash of its text (a hosting keeps a file of one name for
+  // good). The bundle builds the name at run time from the `_opengl` template (compileProject):
+  // on the page that is `<hash>_webgl-lite.filamat`, the only artifact written.
+  const shaders = new Map<string, string>()   // hash → the lite artifact's JSON
+  for (const entry of entries) {
+    if (entry.type !== "shader" || !entry.absPath) continue
+    const text = readFileSync(entry.absPath, "utf8")
+    const hash = createHash("sha256").update(text).digest("hex").slice(0, 16)
+    shaders.set(hash, JSON.stringify(buildLiteMaterialArtifact(text)))
+    entry.shaders = [{ platform: "opengl", src: `shaders/${hash}_opengl.filamat` }]
+  }
+  const fontsHeader = await applyProjectFonts(entries, {
+    mode: "vendor", root, vendorDir: root, vendorPrefix: "", publicUrl: "", relative: true,
+    makeResourceEntry: (path, absPath) => ({ path, type: "resource", fileSrc: assetUrl(path), absPath }),
+  })
+  const iconsHeader = await applyAppAssetIcons(entries)
+  if (!options.entry) {
+    const ambiguous = ambiguousEntryWarning(entries)
+    if (ambiguous) warnings.push(ambiguous)
+  }
+  const compiled = await compileProject({
+    entries, name, publicUrl: "", entryOverride: options.entry, header: true, fontsHeader, iconsHeader,
+    sourcemap: options.sourcemap === true, minify: options.minify, env: readAppEnv(root),
+    onWarning: (w) => warnings.push(w),
+  })
+  // The same project builds into the same bytes: the bundle's name is its hash, and a hosting
+  // keeps a file of that name for good.
+  const js = stableBundle(compiled)
+
+  // the project's own web halves of the plugins it lists, built before the folder is cleaned: one
+  // that does not build leaves the last build as it was
+  const halves = await buildListedHalves(root, js, { minify: options.minify })
+
+  // ---- the folder ----------------------------------------------------------------------------------------------
+  rmSync(out, { recursive: true, force: true })
+  mkdirSync(out, { recursive: true })
+  const bundle = `app.${createHash("sha256").update(js).digest("hex").slice(0, 10)}.js`
+  const app = readAppConfigAt(root)
+  warnings.push(...assembleLitePage(lite, out, {
+    js, bundleSrc: bundle, web: config, name: app?.name ?? name, halves,
+    icon: app?.icon ? { file: resolve(root, app.icon), declared: app.icon } : null,
+  }))
+  writeFileSync(join(out, bundle), js)
+
+  // the project's assets: the ones the bundle names
+  warnings.push(...copyNamedAssets(entries, js, out))
+  // …and its shaders: the ones the bundle names
+  for (const [hash, artifact] of shaders) {
+    if (!js.includes(`shaders/${hash}_`)) continue
+    mkdirSync(join(out, "shaders"), { recursive: true })
+    writeFileSync(join(out, "shaders", `${hash}_webgl-lite.filamat`), artifact)
+  }
 
   return { out, bundle, files: walk(out), warnings }
 }