feat: Bundle css files into index.js

packages/codemirror/src/index.ts

@@ -11,3 +11,4 @@ export * from "./MarkdownEditor.ts";
 export * from "./ObservableMarkdownEditor.ts";
 export * from "./XMLEditor.ts";
 export * from "./SQLEditor.ts";
+

packages/esbuild-plugins/src/build.ts

@@ -4,8 +4,8 @@ import * as path from "path";
 import * as esbuild from "esbuild";
 import type { BuildOptions, Format, Loader, Plugin } from "esbuild";
 import { umdWrapper } from "esbuild-plugin-umd-wrapper";
+import { inlineCSS } from "./inline-css.ts";
 import { rebuildLogger } from "./rebuild-logger.ts";
-import { sfxWasm } from "./sfx-wrapper.ts";
 
 //@ts-ignore
 import _copyStaticFiles from "esbuild-copy-static-files";
@@ -29,7 +29,7 @@ export async function buildWatch(input: string, format: Format | "umd" = "esm",
         plugins: [
             ...(isWatch ? [rebuildLogger(config)] : []),
             ...(config.plugins ?? []),
-            sfxWasm()
+            inlineCSS()
         ]
     });
 
@@ -59,9 +59,10 @@ export type TplOptions = {
     loader?: { [ext: string]: Loader };
     supported?: Record<string, boolean>;
     alias?: Record<string, string>;
+    define?: { [key: string]: string };
 };
 
-export function browserTpl(input: string, output: string, { format = "esm", globalName, libraryName, keepNames, external = [], plugins = [], alias = {}, loader = {} }: TplOptions = {}) {
+export function browserTpl(input: string, output: string, { format = "esm", globalName, libraryName, keepNames, external = [], plugins = [], alias = {}, define = {}, loader = {} }: TplOptions = {}) {
     return buildWatch(input, format, external, {
         outfile: `${output}.${format === "esm" ? "js" : `${format}.js`}`,
         platform: "browser",
@@ -70,6 +71,7 @@ export function browserTpl(input: string, output: string, { format = "esm", glob
         keepNames,
         plugins: format === "umd" ? [umdWrapper({ libraryName }), ...plugins] : [...plugins],
         alias,
+        define,
         loader
     } as BuildOptions);
 }

packages/esbuild-plugins/src/index.ts

@@ -4,3 +4,4 @@ export * from "./problem-matcher.ts";
 export * from "./rebuild-logger.ts";
 export * from "./remove-strict.ts";
 export * from "./sfx-wrapper.ts";
+export * from "./inline-css.ts";

packages/esbuild-plugins/src/inline-css.ts

@@ -0,0 +1,44 @@
+import type { PluginBuild, Plugin } from "esbuild";
+import path from "path";
+import crypto from "crypto";
+import { readFile } from "fs/promises";
+
+export function inlineCSS(options = {}) {
+    return {
+        name: "inline-css",
+
+        setup(build: PluginBuild) {
+
+            build.onLoad({ filter: /\.(css)$/ }, async (args) => {
+                if (build.initialOptions.platform === "browser") {
+                    const sourcePath = path.resolve(args.path);
+                    const sourceJS = await generateInjectCSS(sourcePath);
+                    return {
+                        contents: sourceJS,
+                        loader: "js"
+                    };
+                }
+            });
+        },
+    };
+}
+
+async function generateInjectCSS(sourcePath: string) {
+    const styleID = sha256(sourcePath);
+    const sourceCSS = await readFile(sourcePath, "utf8");
+
+    return `(function(){
+        if (!document.getElementById('${styleID}')) {
+            var e = document.createElement('style');
+            e.id = '${styleID}';
+            e.textContent = \`${sourceCSS.split("\\25").join("\\x15")}\`;
+            document.head.appendChild(e);
+        }
+    })();`;
+}
+
+function sha256(sourcePath: string) {
+    const hash = crypto.createHash("sha256").update(sourcePath).digest("hex");
+    return hash.slice(0, 8); // Use the first 8 characters of the hash
+}
+

packages/phosphor/src/index.ts

@@ -6,3 +6,4 @@ export * from "./DockPanel.ts";
 export * from "./SplitPanel.ts";
 export * from "./TabPanel.ts";
 export * from "./WidgetAdapter.ts";
+