feat: polyfills setup

Author: ncpa0cpl

package.json

@@ -46,7 +46,7 @@
     "fs-gjs": "^1.0.1",
     "rimraf": "^4.4.1",
     "tar": "^6.2.0",
-    "termx-markup": "1.1.1",
+    "termx-markup": "~2.0.2",
     "whatwg-url-without-unicode": "^8.0.0-3"
   },
   "devDependencies": {

scripts/build.cjs

@@ -32,7 +32,7 @@ async function main() {
       }),
       // Build polyfill packages
       await build({
-        target: "es2022",
+        target: "ESNext",
         srcDir: p("src/polyfills"),
         outDir: p("polyfills"),
         tsConfig: p("tsconfig.json"),

src/esbuild-plugins/import-polyfills/create-node-polyfill-map.ts

@@ -1,6 +1,7 @@
 import type esbuild from "esbuild";
 import path from "path";
 import type { Config } from "../../config/config-type";
+import { getDirPath } from "../../get-dirpath/get-dirpath";
 import type { DeepReadonly, Program } from "../../programs/base";
 
 type PolyfillMapDef = {
@@ -10,19 +11,18 @@ type PolyfillMapDef = {
 };
 
 export const createNodePolyfillMap = (polyfills: Array<PolyfillMapDef>) => {
+  const rootPath = getDirPath();
   return {
     addResolvers(program: Program, build: esbuild.PluginBuild) {
       for (const pollyfill of polyfills) {
         if (pollyfill.configFlag(program.config)) {
           build.onResolve({ filter: pollyfill.matcher }, (args) => {
             return build.resolve(
-              "react-gnome/" + path.join("polyfills/esm", pollyfill.filename),
+              path.join(rootPath, "polyfills/esm", pollyfill.filename),
               {
-                importer: args.importer,
-                namespace: args.namespace,
+                resolveDir: rootPath,
                 kind: args.kind,
-                pluginData: args.pluginData,
-                resolveDir: args.resolveDir,
+                importer: args.importer,
               },
             );
           });

src/esbuild-plugins/import-polyfills/import-polyfills.ts

@@ -1,32 +1,33 @@
 import type esbuild from "esbuild";
+import path from "path";
 import type { Program } from "../../programs/base";
 import { createNodePolyfillMap } from "./create-node-polyfill-map";
 
 export const POLYFILL_IMPORT_NS = "react-gnome-polyfills";
 
 const NodePolyfills = createNodePolyfillMap([
   {
-    matcher: /^(fs)|(node:fs)$/,
+    matcher: /^(fs|node:fs)$/,
     configFlag: (c) => !!c.polyfills?.node?.fs,
     filename: "fs.mjs",
   },
   {
-    matcher: /^(fs\/promises)|(node:fs\/promises)$/,
+    matcher: /^(fs\/promises|node:fs\/promises)$/,
     configFlag: (c) => !!c.polyfills?.node?.fs,
     filename: "fs-promises.mjs",
   },
   {
-    matcher: /^(path)|(node:path)$/,
+    matcher: /^(path|node:path)$/,
     configFlag: (c) => !!c.polyfills?.node?.path,
     filename: "path.mjs",
   },
   {
-    matcher: /^(querystring)|(node:querystring)$/,
+    matcher: /^(querystring|node:querystring)$/,
     configFlag: (c) => !!c.polyfills?.node?.querystring,
     filename: "querystring.mjs",
   },
   {
-    matcher: /^(os)|(node:os)$/,
+    matcher: /^(os|node:os)$/,
     configFlag: (c) => !!c.polyfills?.node?.os,
     filename: "node-os.mjs",
   },
@@ -44,34 +45,13 @@ export const importPolyfillsPlugin = (program: Program) => {
             build.onResolve({ filter: /.*/ }, (arg) => {
               if (customPoly.importName === arg.path) {
                 return {
-                  path: customPoly.filepath,
-                  namespace: POLYFILL_IMPORT_NS,
+                  path: path.join(program.cwd, customPoly.filepath),
                 };
               }
             });
           }
         }
       }
-
-      if (program.config.customPolyfills) {
-        build.onLoad(
-          {
-            filter: /.*/,
-            namespace: POLYFILL_IMPORT_NS,
-          },
-          (args) => {
-            return {
-              contents: /* js */ `
-                import * as _mod from "${args.path}";
-                const _default = _mod.default ?? _mod;
-                export default _default;
-                export * from "${args.path}";
-              `.trim(),
-              resolveDir: program.cwd,
-            };
-          },
-        );
-      }
     },
   };
 };

src/esbuild-plugins/react-gnome/default-gi-imports.ts

@@ -1,3 +1,4 @@
+import { html, Output } from "termx-markup";
 import type { Config } from "../../config/config-type";
 
 class GiImport {
@@ -26,12 +27,38 @@ export class GiImports {
     versions.Soup ??= "2.4";
   }
 
+  private printVersionConflict(name: string, v1: string, v2: string) {
+    Output.print(html`
+      <span>
+        <span color="yellow">WARN:</span>
+        <span>
+          GI dependency (${name}) version conflict. ${v1} and ${v2} are both
+          required at the same time.
+        </span>
+      </span>
+    `);
+  }
+
   add(name: string, version?: string) {
-    if (this.imports.has(name)) return;
+    if (this.imports.has(name)) {
+      const im = this.imports.get(name)!;
+      if (version != null) {
+        if (im.version == null) {
+          im.setVersion(version);
+        } else if (version !== im.version) {
+          this.printVersionConflict(name, im.version, version!);
+        }
+      }
+      return;
+    }
 
     if (name in this.versions) {
       // @ts-expect-error
-      version = this.versions[name];
+      const versionOverride = this.versions[name];
+      if (version != null && version !== versionOverride) {
+        this.printVersionConflict(name, versionOverride, version!);
+      }
+      version = versionOverride;
     }
 
     const giImport = new GiImport(name);

src/esbuild-plugins/react-gnome/react-gnome-plugin.ts

@@ -22,7 +22,14 @@ class ExternalImport {
   }
 }
 
-export const reactGnomePlugin = (program: Program) => {
+export type GnomePluginOptions = {
+  giRequirements?: [string, string | undefined][];
+};
+
+export const reactGnomePlugin = (
+  program: Program,
+  options: GnomePluginOptions,
+) => {
   const externalPackages = new Set(program.config.externalPackages ?? []);
   externalPackages.add("system");
   externalPackages.add("gettext");
@@ -33,6 +40,10 @@ export const reactGnomePlugin = (program: Program) => {
       const gi = new GiImports(program.config.giVersions);
       const externalImports: ExternalImport[] = [];
 
+      for (const [name, version] of options.giRequirements ?? []) {
+        gi.add(name, version);
+      }
+
       if (program.resources) {
         build.onLoad(
           {

src/polyfills/abort-controller.ts

@@ -1,4 +1,10 @@
-namespace AbortControllerPolyfill {
+import { registerPolyfills } from "./shared/polyfill-global";
+
+registerPolyfills(
+  "AbortController",
+  "AbortSignal",
+  "AbortError",
+)(() => {
   enum Events {
     Abort = "abort",
   }
@@ -48,14 +54,14 @@ namespace AbortControllerPolyfill {
     }
   }
 
-  export class AbortError extends Error {
+  class AbortError extends Error {
     constructor(message: string) {
       super(message);
       this.name = "AbortError";
     }
   }
 
-  export class AbortSignal {
+  class AbortSignal {
     static abort(reason?: any) {
       const signal = new AbortSignal();
       signal._abort(reason ?? new AbortError("Signal was aborted."));
@@ -118,7 +124,7 @@ namespace AbortControllerPolyfill {
     }
   }
 
-  export class AbortController {
+  class AbortController {
     private readonly _signal = new AbortSignal();
 
     get signal(): AbortSignal {
@@ -129,8 +135,10 @@ namespace AbortControllerPolyfill {
       this._signal["_abort"]();
     }
   }
-}
 
-export const AbortController = AbortControllerPolyfill.AbortController;
-export const AbortSignal = AbortControllerPolyfill.AbortSignal;
-export const AbortError = AbortControllerPolyfill.AbortError;
+  return {
+    AbortController,
+    AbortSignal,
+    AbortError,
+  };
+});

src/polyfills/base64.ts

@@ -1,11 +1,22 @@
 import GLib from "gi://GLib?version=2.0";
+import { registerPolyfills } from "./shared/polyfill-global";
 
-export function atob(data: string) {
-  const decodedData = GLib.base64_decode(data);
-  return new TextDecoder().decode(decodedData);
-}
+registerPolyfills(
+  "atob",
+  "btoa",
+)(() => {
+  function atob(data: string) {
+    const decodedData = GLib.base64_decode(data);
+    return new TextDecoder().decode(decodedData);
+  }
 
-export function btoa(data: string) {
-  const encodedData = new TextEncoder().encode(data);
-  return GLib.base64_encode(encodedData)!;
-}
+  function btoa(data: string) {
+    const encodedData = new TextEncoder().encode(data);
+    return GLib.base64_encode(encodedData)!;
+  }
+
+  return {
+    atob,
+    btoa,
+  };
+});

src/polyfills/blob.ts

@@ -1,3 +1,8 @@
 import { Blob as BlobPolyfill } from "buffer";
+import { registerPolyfills } from "./shared/polyfill-global";
 
-export const Blob = BlobPolyfill;
+registerPolyfills("Blob")(() => {
+  return {
+    Blob: BlobPolyfill,
+  };
+});

src/polyfills/buffer.ts

@@ -1,3 +1,8 @@
 import { Buffer as BufferPolyfill } from "buffer";
+import { registerPolyfills } from "./shared/polyfill-global";
 
-export const Buffer = BufferPolyfill;
+registerPolyfills("Buffer")(() => {
+  return {
+    Buffer: BufferPolyfill,
+  };
+});