Prototyped non-Webpack build

package.json

@@ -45,61 +45,43 @@
     "@mdi/svg": "^5.9.55",
     "@primer/octicons": "^12.0.0",
     "@types/clipboard": "^2.0.1",
-    "@types/copy-webpack-plugin": "^6.4.0",
     "@types/escape-html": "1.0.0",
-    "@types/event-hooks-webpack-plugin": "^2.2.0",
     "@types/fuzzaldrin-plus": "^0.6.1",
     "@types/html-minifier": "^4.0.0",
     "@types/lunr": "^2.3.3",
-    "@types/mini-css-extract-plugin": "^1.2.2",
     "@types/node": "^14.14.28",
     "@types/ramda": "^0.27.37",
     "@types/resize-observer-browser": "^0.1.5",
-    "@types/webpack": "^4.41.26",
-    "@types/webpack-assets-manifest": "^3.0.1",
     "@typescript-eslint/eslint-plugin": "^4.15.0",
     "@typescript-eslint/parser": "^4.15.0",
     "autoprefixer": "10.2.4",
-    "copy-webpack-plugin": "^6.4.1",
+    "esbuild": "^0.8.46",
-    "css-loader": "^5.0.2",
     "eslint": "^7.20.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsdoc": "^32.0.0",
     "eslint-plugin-no-null": "^1.0.2",
-    "event-hooks-webpack-plugin": "^2.2.0",
-    "expose-loader": "^1.0.3",
     "github-types": "^1.0.0",
     "gitlab": "^14.2.2",
     "html-minifier": "^4.0.0",
-    "ignore-emit-webpack-plugin": "2.0.3",
-    "imagemin-webpack-plugin": "^2.4.2",
     "material-design-color": "^2.3.2",
     "material-shadows": "^3.0.1",
-    "mini-css-extract-plugin": "^1.3.5",
     "postcss": "^8.2.5",
     "postcss-inline-svg": "^5.0.0",
-    "postcss-loader": "^4.2.0",
     "postcss-svgo": "^4.0.2",
     "preact": "^10.5.12",
     "ramda": "^0.27.1",
     "rimraf": "^3.0.2",
     "sass": "^1.32.6",
-    "sass-loader": "^10.1.1",
     "stylelint": "^13.9.0",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-recommended": "^3.0.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-scss": "^3.19.0",
     "tiny-glob": "^0.2.8",
-    "ts-loader": "^8.0.15",
     "ts-node": "^9.1.1",
-    "tsconfig-paths-webpack-plugin": "^3.3.0",
     "tslib": "^2.1.0",
-    "typescript": "^4.1.5",
+    "typescript": "^4.1.5"
-    "webpack": "^4.46.0",
-    "webpack-assets-manifest": "3.1.1",
-    "webpack-cli": "^4.5.0"
   },
   "engines": {
     "node": ">= 12"

src/assets/javascripts/integrations/search/worker/main/index.ts

@@ -91,7 +91,7 @@ async function setupSearchLanguages(
   /* Add scripts for languages */
   const scripts = []
   for (const lang of config.lang) {
-    if (lang === "ja") scripts.push(`${base}/tinyseg.min.js`)
+    if (lang === "ja") scripts.push(`${base}/tinyseg.js`)
     if (lang !== "en") scripts.push(`${base}/min/lunr.${lang}.min.js`)
   }
 

tools/index.ts

@@ -0,0 +1,232 @@
+/*
+ * Copyright (c) 2016-2021 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+// import { build } from "esbuild"
+import * as fs from "fs/promises"
+import { minify as minhtml } from "html-minifier"
+import * as path from "path"
+import { concat, from } from "rxjs"
+import {
+  finalize,
+  mapTo,
+  mergeMap,
+  switchMap
+} from "rxjs/operators"
+import glob from "tiny-glob"
+
+/* ----------------------------------------------------------------------------
+ * Data
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Base directory
+ */
+const base = "material2"
+
+/* ----------------------------------------------------------------------------
+ * Helper types
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Transform function
+ *
+ * @param content - Content
+ *
+ * @returns Promise resolving with transformed content
+ */
+type TransformFn = (content: string) => Promise<string>
+
+/* ------------------------------------------------------------------------- */
+
+/**
+ * Copy options
+ */
+interface CopyOptions {
+  source: string                       /* Source destination */
+  target: string                       /* Target destination */
+  transform?: TransformFn              /* Transform function */
+}
+
+/* ----------------------------------------------------------------------------
+ * Helper functions
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Recursively create the given directory
+ *
+ * @param directory - Directory
+ *
+ * @returns Directory observable
+ */
+function mkdir(directory: string) {
+  return from(fs.mkdir(directory, { recursive: true }))
+    .pipe(
+      mapTo(directory)
+    )
+}
+
+/**
+ * Copy a file from source to target
+ *
+ * @param options - Options
+ *
+ * @returns File observable
+ */
+function copy({ source, target, transform }: CopyOptions) {
+  return mkdir(path.dirname(target))
+    .pipe(
+      switchMap(() => typeof transform === "undefined"
+        ? from(fs.copyFile(source, target))
+        : from(fs.readFile(source, "utf8"))
+            .pipe(
+              switchMap(transform),
+              switchMap(content => fs.writeFile(target, content))
+            )
+      ),
+      mapTo(target)
+    )
+}
+
+/**
+ * Resolve a pattern and copy all files to target
+ *
+ * Note that this function will rebase all files that match the pattern to the
+ * target folder, even if the pattern resolves to a parent folder.
+ *
+ * @param pattern - Pattern
+ * @param options - Options
+ *
+ * @returns File observable
+ */
+function copyAll(pattern: string, options: CopyOptions) {
+  return from(glob(pattern, { cwd: options.source }))
+    .pipe(
+      switchMap(from),
+      mergeMap(file => copy({
+        ...options,
+        source: `${options.source}/${file}`,
+        target: `${options.target}/${file.replace(/(\.{2}\/)+/, "")}`,
+      }), 16)
+    )
+}
+
+/* ----------------------------------------------------------------------------
+ * Program
+ * ------------------------------------------------------------------------- */
+
+const icons$ = concat(
+
+  /* Copy Material Design icons */
+  ...["*.svg", "../LICENSE"]
+    .map(pattern => copyAll(pattern, {
+      source: "node_modules/@mdi/svg/svg",
+      target: `${base}/.icons/material`
+    })),
+
+  /* Copy GitHub octicons */
+  ...["*.svg", "../../LICENSE"]
+    .map(pattern => copyAll(pattern, {
+      source: "node_modules/@primer/octicons/build/svg",
+      target: `${base}/.icons/octicons`
+    })),
+
+  /* Copy FontAwesome icons */
+  ...["**/*.svg", "../LICENSE.txt"]
+    .map(pattern => copyAll(pattern, {
+      source: "node_modules/@fortawesome/fontawesome-free/svgs",
+      target: `${base}/.icons/fontawesome`
+    }))
+)
+
+const assets$ = concat(
+  icons$,
+
+  /* Copy search stemmers and segmenter */
+  ...["min/*.js", "tinyseg.js"]
+    .map(pattern => copyAll(pattern, {
+      source: "node_modules/lunr-languages",
+      target: `${base}/assets/javascripts/lunr`
+    })),
+
+  /* Copy assets and configuration */
+  ...[".icons/*.svg", "assets/images/*", "**/*.{py,yml}"]
+    .map(pattern => copyAll(pattern, {
+      source: "src",
+      target: base
+    })),
+
+  /* Template files */
+  ...["**/*.html"]
+    .map(pattern => copyAll(pattern, {
+      source: "src",
+      target: base,
+      transform: async content => {
+        const metadata = require("../package.json")
+        const banner =
+          "{#-\n" +
+          "  This file was automatically generated - do not edit\n" +
+          "-#}\n"
+
+        /* Normalize line feeds and minify HTML */
+        const html = content.replace(/\r\n/gm, "\n")
+        return banner + minhtml(html, {
+          collapseBooleanAttributes: true,
+          includeAutoGeneratedTags: false,
+          minifyCSS: true,
+          minifyJS: true,
+          removeComments: true,
+          removeScriptTypeAttributes: true,
+          removeStyleLinkTypeAttributes: true
+        })
+
+          /* Remove empty lines without collapsing everything */
+          .replace(/^\s*[\r\n]/gm, "")
+
+          /* Write theme version into template */
+          .replace("$md-name$", metadata.name)
+          .replace("$md-version$", metadata.version)
+      }
+    }))
+)
+
+console.time("a")
+
+assets$
+  .pipe(
+    finalize(() => console.timeEnd("a"))
+  )
+    .subscribe()
+    // .subscribe(console.log)
+
+// async function main() {
+//   console.time("build")
+//   const res = await build({
+//     bundle: true,
+//     sourceMap: true,
+//     entryPoints: [
+//       "src/assets/javascripts/index.ts"
+//     ],
+//     outdir: "material2"
+//   })
+//   console.timeEnd("build")
+//   console.log(res)
+// }

tsconfig.json

@@ -34,6 +34,7 @@
   "include": [
     "src/assets/javascripts",
     "src/overrides/assets/javascripts",
+    "tools",
     "typings",
     "webpack.config.ts"
   ]