@lincyaw/web 1.0.0-rc.11 → 1.0.0-rc.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lincyaw/web",
-  "version": "1.0.0-rc.11",
+  "version": "1.0.0-rc.13",
   "description": "Presmium's web renderer: one prebuilt viewer that shows the web form in the workbench, in a dev server and as a built site, with search and form switching",
   "license": "Apache-2.0",
   "repository": {
@@ -41,21 +41,22 @@
     "vite": "8.3.4",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "@lincyaw/design": "1.0.0-rc.11"
+    "sharp": "0.35.5",
+    "@lincyaw/design": "1.0.0-rc.13"
   },
   "peerDependencies": {
-    "@lincyaw/host": "^1.0.0-rc.11",
-    "@lincyaw/viewer": "^1.0.0-rc.11",
-    "@lincyaw/kernel": "^1.0.0-rc.11"
+    "@lincyaw/host": "^1.0.0-rc.13",
+    "@lincyaw/viewer": "^1.0.0-rc.13",
+    "@lincyaw/kernel": "^1.0.0-rc.13"
   },
   "devDependencies": {
     "@types/escape-html": "1.0.4",
     "@types/send": "^1.2.1",
     "@types/react": "18.3.28",
     "@types/react-dom": "18.3.7",
-    "@lincyaw/cli": "1.0.0-rc.11",
-    "@lincyaw/host": "1.0.0-rc.11",
-    "@lincyaw/kernel": "1.0.0-rc.11",
-    "@lincyaw/viewer": "1.0.0-rc.11"
+    "@lincyaw/cli": "1.0.0-rc.13",
+    "@lincyaw/kernel": "1.0.0-rc.13",
+    "@lincyaw/viewer": "1.0.0-rc.13",
+    "@lincyaw/host": "1.0.0-rc.13"
   }
 }

package/src/node/optimize.ts

@@ -0,0 +1,65 @@
+import { existsSync, readdirSync, readFileSync, statSync, writeFileSync } from 'node:fs'
+import { basename, dirname, extname, join, relative, sep } from 'node:path'
+import sharp from 'sharp'
+import { CODE_DIR } from './site-files.ts'
+import { MEDIA } from './publish.ts'
+
+/**
+ * Raster images a site publishes (a document's media and the images its scenes import) are encoded again as WebP and
+ * no wider than any page shows them, when that saves at least a fifth: a paper's PNG figures and photographs are
+ * the largest files most pages load. References in the site's pages, data and scripts follow the new names; files
+ * the author publishes as they are (`public/`) are left alone.
+ */
+
+const RASTER = new Set(['.png', '.jpg', '.jpeg'])
+// Below this an image is small enough that a second encoding gains little.
+const MIN_BYTES = 48 * 1024
+// The widest an image is drawn: a full-width figure on a large screen at twice its pixels.
+const MAX_WIDTH = 2400
+const TEXT = new Set(['.html', '.json', '.js', '.css', '.xml', '.vtt'])
+
+function files(dir: string): string[] {
+  if (!existsSync(dir)) return []
+  return readdirSync(dir, { withFileTypes: true }).flatMap(entry => entry.isDirectory() ? files(join(dir, entry.name)) : [join(dir, entry.name)])
+}
+
+/** A published image the build may encode again: in a media directory or among a code bundle's assets. */
+function published(outDir: string, file: string): boolean {
+  const parts = relative(outDir, file).split(sep)
+  return parts.includes(MEDIA) || parts.some((part, i) => part === CODE_DIR && parts[i + 2] === 'assets')
+}
+
+export async function optimizeImages(outDir: string): Promise<{ images: number, saved: number }> {
+  const all = files(outDir)
+  const renamed = new Map<string, string>()
+  let saved = 0
+  for (const file of all) {
+    if (!RASTER.has(extname(file).toLowerCase()) || !published(outDir, file)) continue
+    const size = statSync(file).size
+    if (size < MIN_BYTES) continue
+    const target = join(dirname(file), `${basename(file, extname(file))}.webp`)
+    if (existsSync(target)) {
+      renamed.set(basename(file), basename(target))
+      continue
+    }
+    const lossless = extname(file).toLowerCase() === '.png'
+    const image = sharp(file).rotate().resize({ width: MAX_WIDTH, withoutEnlargement: true })
+    // Figures and screenshots keep their sharp edges (near-lossless); photographs take ordinary lossy compression.
+    const bytes = await (lossless ? image.webp({ nearLossless: true, quality: 75, effort: 5 }) : image.webp({ quality: 80, effort: 5 })).toBuffer()
+    if (bytes.length > size * 0.8) continue
+    // The original stays beside it: a reference this pass cannot see (an encoded name) still finds a file.
+    writeFileSync(target, bytes)
+    renamed.set(basename(file), basename(target))
+    saved += size - bytes.length
+  }
+  if (renamed.size > 0) {
+    const names = new RegExp([...renamed.keys()].map(name => name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|'), 'g')
+    for (const file of all) {
+      if (!TEXT.has(extname(file)) || !existsSync(file)) continue
+      const text = readFileSync(file, 'utf8')
+      const next = text.replace(names, name => renamed.get(name)!)
+      if (next !== text) writeFileSync(file, next)
+    }
+  }
+  return { images: renamed.size, saved }
+}

package/src/node/site-build.ts

@@ -14,6 +14,7 @@ import { writeServiceWorker } from './offline.ts'
 import { publishedDocument, publishedFile } from './publish.ts'
 import { APP_DIR, CODE_DIR, contentKey, copyApp, copyPublic, copyRuntimeAssets, runtimeAssets, searchIndex } from './site-files.ts'
 import { documentBase, documentPage, documentSiteConfig, homeDocument, homeDocuments, isSingle, landingConfig, landingDocument, languageLabel, LIST_PAGE, siteLanguage, siteLanguages, siteNeighbours, siteShellBelow, siteTitle, sitemapPages, translationOf } from './site-model.ts'
+import { optimizeImages } from './optimize.ts'
 import { publishedSite } from './site-assets.ts'
 import { themedSite } from './site-theme.ts'
 import { loadLanding, publishLanding, siteContent } from './landing.ts'
@@ -274,6 +275,11 @@ export async function buildSite(site: SiteSpec, ctx: RenderContext, documents: r
     ])
     await writeSitemap(join(ctx.outDir, 'sitemap.xml'), sitemap.hostname, ctx.base, pages)
   }
+  await reportOptimized(ctx, await optimizeImages(ctx.outDir))
+}
+
+async function reportOptimized(ctx: RenderContext, { images, saved }: { images: number, saved: number }): Promise<void> {
+  if (images > 0) ctx.log?.(`${images} images encoded as WebP, ${Math.round(saved / 1024)} KB smaller`)
 }
 
 /** The animation libraries a scene engine loads when its first scene is made, by the start of their file names. */
@@ -329,4 +335,5 @@ export async function buildSlidesSite(doc: IRDocument, ctx: RenderContext, nodeP
   }
   const preload = code ? scenePreloads(join(ctx.outDir, CODE_DIR, code), `${ctx.base}${CODE_DIR}/${code}/`, built) : []
   writeFileSync(join(ctx.outDir, 'index.html'), pageHtml({ entry: appEntry(built.app), appUrl: built.appUrl, shared: built.app.manifest.shared, config, title: doc.meta.title, preload }))
+  await reportOptimized(ctx, await optimizeImages(ctx.outDir))
 }