fix: Legacy browser loading fails (UMD)

Switch to IIFE and drop UMD support Fixes: #228 Signed-off-by: Gordon Smith <[email protected]>
hpcc-systems · Aug 6, 2024 · 1a4388a · 1a4388a
1 parent f52ddd6
commit 1a4388a
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 103 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -23,6 +23,13 @@
             "runtimeArgs": [],
             "webRoot": "${workspaceRoot}"
         },
+        {
+            "name": "http:///index.html",
+            "type": "msedge",
+            "request": "launch",
+            "url": "http://localhost:8000/index.html",
+            "webRoot": "${workspaceRoot}"
+        },
         {
             "name": "hw-graphviz.html",
             "type": "msedge",

diff --git a/esbuild.mjs b/esbuild.mjs
@@ -1,7 +1,6 @@
 import * as process from "process";
 import { readFileSync } from "fs";
 import * as esbuild from "esbuild";
-import { umdWrapper } from "esbuild-plugin-umd-wrapper";
 import yargs from "yargs";
 import { hideBin } from "yargs/helpers";
 
@@ -121,15 +120,14 @@ function browserTpl(input, output, format, globalName = "", external = []) {
         globalName,
         bundle: true,
         minify: isProduction,
-        external,
-        plugins: format === "umd" ? [umdWrapper()] : []
+        external
     });
 }
 
 function browserBoth(input, output, globalName = undefined, external = []) {
     return Promise.all([
         browserTpl(input, output, "esm", globalName, external),
-        browserTpl(input, output, "umd", globalName, external)
+        browserTpl(input, output, "iife", globalName, external)
     ]);
 }
 
@@ -162,16 +160,16 @@ function bothTpl(input, output, globalName = undefined, external = []) {
 
 //  config  ---
 await Promise.all([
-    bothTpl("src-ts/base91.ts", "dist/base91", "hpccjs_wasm_base91"),
-    bothTpl("src-ts/duckdb.ts", "dist/duckdb", "hpccjs_wasm_duckdb"),
-    bothTpl("src-ts/graphviz.ts", "dist/graphviz", "hpccjs_wasm_graphviz"),
-    bothTpl("src-ts/expat.ts", "dist/expat", "hpccjs_wasm_expat"),
-    bothTpl("src-ts/zstd.ts", "dist/zstd", "hpccjs_wasm_zstd")
+    bothTpl("src-ts/base91.ts", "dist/base91", 'window["@hpcc-js/wasm"]'),
+    bothTpl("src-ts/duckdb.ts", "dist/duckdb", 'window["@hpcc-js/wasm"]'),
+    bothTpl("src-ts/graphviz.ts", "dist/graphviz", 'window["@hpcc-js/wasm"]'),
+    bothTpl("src-ts/expat.ts", "dist/expat", 'window["@hpcc-js/wasm"]'),
+    bothTpl("src-ts/zstd.ts", "dist/zstd", 'window["@hpcc-js/wasm"]')
 ]);
-await bothTpl("src-ts/index.ts", "dist/index", "hpccjs_wasm", ["./base91.js", "./duckdb.js", "./expat.js", "./graphviz.js", "./zstd.js"]);
+await bothTpl("src-ts/index.ts", "dist/index", 'window["@hpcc-js/wasm"]', ["./base91.js", "./duckdb.js", "./expat.js", "./graphviz.js", "./zstd.js"]);
 
-browserBoth("src-ts/__tests__/index-browser.ts", "dist-test/index", "hpccjs_wasm_test");
-browserBoth("src-ts/__tests__/worker-browser.ts", "dist-test/worker", "hpccjs_wasm_test_worker");
+browserBoth("src-ts/__tests__/index-browser.ts", "dist-test/index", 'window["@hpcc-js/wasm-test"]');
+browserBoth("src-ts/__tests__/worker-browser.ts", "dist-test/worker", 'window["@hpcc-js/wasm-test"]');
 nodeBoth("src-ts/__tests__/index-node.ts", "dist-test/index.node");
 nodeBoth("src-ts/__tests__/worker-node.ts", "dist-test/worker.node");
 

diff --git a/examples/typescript/hello-world/esm/tsconfig.json b/examples/typescript/hello-world/esm/tsconfig.json
@@ -1,17 +1,15 @@
 {
   "compilerOptions": {
     /* Visit https://aka.ms/tsconfig to read more about this file */
-
     /* Projects */
     // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
     // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
     // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
     // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
     // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
-
     /* Language and Environment */
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
@@ -23,17 +21,16 @@
     // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
     // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
-
     /* Modules */
-    "module": "Node16",                                  /* Specify what module code is generated. */
+    "module": "Node16", /* Specify what module code is generated. */
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
     // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
-    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+    // "allowUmdGlobalAccess": true,                     /* Allow accessing IIFE globals from modules. */
     // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
     // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
     // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
@@ -42,12 +39,10 @@
     // "resolveJsonModule": true,                        /* Enable importing .json files. */
     // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
     // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
-
     /* JavaScript Support */
     // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
     // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
-
     /* Emit */
     // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
     // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
@@ -72,17 +67,15 @@
     // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
     // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
     // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
-
     /* Interop Constraints */
     // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
     // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
     // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
-    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
     // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
-    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
-
+    "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
     /* Type Checking */
-    "strict": true,                                      /* Enable all strict type-checking options. */
+    "strict": true, /* Enable all strict type-checking options. */
     // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
     // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
     // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
@@ -101,9 +94,8 @@
     // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
     // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
     // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
-
     /* Completeness */
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
   }
-}
+}
diff --git a/index.html b/index.html
@@ -66,15 +66,27 @@ <h3>ESM</h3>
         } 
     </script>
     <hr>
-    <h3>UMD</h3>
-    <div id="UMD"></div>
+    <h3>UMD 1</h3>
+    <div id="UMD1"></div>
     <script src="https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/graphviz.umd.js"></script>
+    <!-- <script src="./dist/graphviz.umd.js"></script> -->
+    <script>
+        var hpccWasm = window["@hpcc-js/wasm"];
+        hpccWasm.Graphviz.load().then(graphviz => {
+            var svg = graphviz.layout(dot, "svg", "dot");
+            document.getElementById("UMD1").innerHTML = svg;
+        }).catch(e => console.log(e.message));
+    </script>
+    <hr>
+    <h3>UMD 2</h3>
+    <div id="UMD2"></div>
+    <script src="https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/index.umd.js"></script>
     <!-- <script src="./dist/index.umd.js"></script> -->
     <script>
         var hpccWasm = window["@hpcc-js/wasm"];
         hpccWasm.Graphviz.load().then(graphviz => {
             var svg = graphviz.layout(dot, "svg", "dot");
-            document.getElementById("UMD").innerHTML = svg;
+            document.getElementById("UMD2").innerHTML = svg;
         }).catch(e => console.log(e.message));
     </script>
     <hr>