feat: use external loaders for fallback (#26)

piotr-oles · web-flow · commit 5fd8fff522ab · 2021-10-12T21:42:55.000+02:00
diff --git a/README.md b/README.md
@@ -256,10 +256,24 @@ module.exports = {
       {
         test: /\.ts$/,
         include: path.resolve(__dirname, "src/assembly"),
-        loader: "as-loader",
-        options: {
-          fallback: true
-        }
+        use: [
+          // fallback loader (must be before as-loader)
+          {
+            loader: "ts-loader",
+            options: {
+              transpileOnly: true
+            }   
+          },   
+          // as-loader, apart from building .wasm file,
+          // will forward assembly script files to the fallback loader above
+          // to build a .js file
+          {
+            loader: "as-loader",
+            options: {
+              fallback: true
+           }
+          }
+        ]
       },
       {
         test: /\.ts$/,
diff --git a/src/loader/index.ts b/src/loader/index.ts
@@ -8,7 +8,12 @@ import { createCompilerHost } from "./compiler-host";
 import { mapAscOptionsToArgs, Options } from "./options";
 import { AssemblyScriptError } from "./error";
 import * as schema from "./schema.json";
-import { addErrorToModule, addWarningToModule } from "./webpack";
+import {
+  addErrorToModule,
+  addWarningToModule,
+  isModuleCompiledToWasm,
+  markModuleAsCompiledToWasm,
+} from "./webpack";
 
 const SUPPORTED_EXTENSIONS = [".wasm", ".js"];
 
@@ -21,7 +26,7 @@ interface LoaderOptions {
 type CompilerOptions = OptionObject;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function loader(this: any, buffer: Buffer) {
+function loader(this: any, content: string, map?: any, meta?: any) {
   const options = getOptions(this);
   validate(schema as Schema, options, {
     name: "AssemblyScript Loader",
@@ -43,6 +48,35 @@ function loader(this: any, buffer: Buffer) {
     ...userAscOptions
   } = options as LoaderOptions & CompilerOptions;
 
+  if (isModuleCompiledToWasm(module)) {
+    // skip asc compilation - forward request to a fallback loader
+    return callback(null, content, map, meta);
+  }
+
+  if (!SUPPORTED_EXTENSIONS.some((extension) => name.endsWith(extension))) {
+    throw new Error(
+      `Unsupported extension in name: "${name}" option in as-loader. ` +
+        `Supported extensions are ${SUPPORTED_EXTENSIONS.join(", ")}`
+    );
+  }
+
+  if (fallback) {
+    if (module.type?.startsWith("webassembly")) {
+      throw new Error(
+        `Cannot use fallback option together with module type "${module.type}". ` +
+          `Use standard module type or disable fallback option.`
+      );
+    } else if (raw) {
+      throw new Error(`Cannot use fallback option together with raw option.`);
+    }
+  }
+
+  if (name.endsWith(".js")) {
+    throw new Error(
+      `Cannot use .js extension directly. Please use fallback option instead.`
+    );
+  }
+
   const ascOptions: Options = {
     // default options
     // when user imports wasm with webassembly type, it's not possible to pass env
@@ -58,44 +92,20 @@ function loader(this: any, buffer: Buffer) {
     ...userAscOptions,
   };
 
-  if (!SUPPORTED_EXTENSIONS.some((extension) => name.endsWith(extension))) {
-    throw new Error(
-      `Unsupported extension in name: "${name}" option in as-loader. ` +
-        `Supported extensions are ${SUPPORTED_EXTENSIONS.join(", ")}`
-    );
-  }
-
-  if (bind && name.endsWith(".wasm")) {
+  if (bind) {
     // overwrite options for bind
     ascOptions.exportRuntime = true;
     ascOptions.transform = "as-bind";
   }
 
-  if (name.endsWith(".js")) {
-    // overwrite options for js
-    ascOptions.runtime = "stub";
-    ascOptions.exportRuntime = false;
-  }
-
   const shouldGenerateSourceMap = this.sourceMap;
   const baseDir = path.dirname(this.resourcePath);
   const outFileName = interpolateName(this, name, {
     context,
-    content: buffer.toString(),
+    content,
   });
   const sourceMapFileName = outFileName + ".map";
 
-  if (fallback) {
-    if (module.type?.startsWith("webassembly")) {
-      throw new Error(
-        `Cannot use fallback option together with module type "${module.type}". ` +
-          `Use standard module type or disable fallback option.`
-      );
-    } else if (raw) {
-      throw new Error(`Cannot use fallback option together with raw option.`);
-    }
-  }
-
   const host = createCompilerHost(this);
 
   if (shouldGenerateSourceMap) {
@@ -176,6 +186,8 @@ function loader(this: any, buffer: Buffer) {
           }
 
           if (outFileName.endsWith(".wasm")) {
+            markModuleAsCompiledToWasm(module);
+
             if (module.type?.startsWith("webassembly") || raw) {
               // uses module type: "webassembly/sync" or "webasssembly/async" or raw: true -
               // return binary instead of emitting files
@@ -266,6 +278,5 @@ function loader(this: any, buffer: Buffer) {
       callback(error);
     });
 }
-loader.raw = true;
 
 module.exports = loader;
diff --git a/src/loader/webpack.ts b/src/loader/webpack.ts
@@ -1,3 +1,5 @@
+import * as webpack from "webpack";
+
 interface CompatibleWebpackModule {
   addWarning?(warning: Error): void;
   addError?(error: Error): void;
@@ -29,4 +31,20 @@ function addErrorToModule(module: CompatibleWebpackModule, error: Error) {
   }
 }
 
-export { addWarningToModule, addErrorToModule };
+function markModuleAsCompiledToWasm(module: webpack.Module) {
+  module.buildMeta.asLoaderCompiledToWasm = true;
+}
+
+function isModuleCompiledToWasm(module: webpack.Module): boolean {
+  return Boolean(
+    module.buildMeta.asLoaderCompiledToWasm ||
+      (module.issuer && isModuleCompiledToWasm(module.issuer))
+  );
+}
+
+export {
+  addWarningToModule,
+  addErrorToModule,
+  markModuleAsCompiledToWasm,
+  isModuleCompiledToWasm,
+};
diff --git a/test/e2e/fixtures/main/src/fallback.ts b/test/e2e/fixtures/main/src/fallback.ts
@@ -1,10 +1,11 @@
-import * as assembly from "./assembly/correct/simple";
+import * as assembly from "./assembly/correct/complex";
 
 async function loadAndRun() {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const module = await (assembly as any).fallback() as typeof assembly;
 
-  console.log(module.run());
+  const colors = module.getPalette(10);
+  console.log(colors.map(color => color.toString()).join(','))
 }
 
 loadAndRun();
diff --git a/test/e2e/main.spec.ts b/test/e2e/main.spec.ts
@@ -168,31 +168,52 @@ describe("as-loader", () => {
         );
         await sandbox.patch(
           "webpack.config.js",
-          '          name: "[name].wasm",',
-          ['          name: "[name].wasm",', "          fallback: true,"].join(
-            "\n"
-          )
+          [
+            '        loader: "as-loader",',
+            "        options: {",
+            '          name: "[name].wasm",',
+            "        },",
+          ].join("\n"),
+          [
+            "        use: [",
+            "          {",
+            '            loader: "ts-loader",',
+            "            options: {",
+            "              transpileOnly: true,",
+            "            }",
+            "          },",
+            "          {",
+            '            loader: "as-loader",',
+            "            options: {",
+            '              name: "[name].wasm",',
+            "              fallback: true,",
+            "            },",
+            "          },",
+            "        ],",
+          ].join("\n")
         );
 
         const webpackResults = await sandbox.exec("yarn webpack");
 
-        expect(webpackResults).toContain("simple.js");
-        expect(webpackResults).toContain("simple.wasm");
-        expect(webpackResults).toContain("simple.wasm.map");
+        expect(webpackResults).toContain("complex.js");
+        expect(webpackResults).toContain("complex.wasm");
+        expect(webpackResults).toContain("complex.wasm.map");
         expect(webpackResults).toContain("main.js");
 
-        expect(await sandbox.exists("dist/simple.js")).toEqual(true);
-        expect(await sandbox.exists("dist/simple.wasm")).toEqual(true);
-        expect(await sandbox.exists("dist/simple.js.map")).toEqual(true);
-        expect(await sandbox.exists("dist/simple.wasm.map")).toEqual(true);
+        expect(await sandbox.exists("dist/complex.js")).toEqual(true);
+        expect(await sandbox.exists("dist/complex.wasm")).toEqual(true);
+        expect(await sandbox.exists("dist/complex.js.map")).toEqual(true);
+        expect(await sandbox.exists("dist/complex.wasm.map")).toEqual(true);
 
-        const simpleJsMap = await sandbox.read("dist/simple.js.map", "utf8");
+        const simpleJsMap = await sandbox.read("dist/complex.js.map", "utf8");
         expect(Object.keys(JSON.parse(simpleJsMap))).toEqual(
           expect.arrayContaining(["version", "sources", "names", "mappings"])
         );
 
         const mainResults = await sandbox.exec("node ./dist/main.js");
-        expect(mainResults).toEqual("15\n");
+        expect(mainResults).toEqual(
+          "rgb(100, 50, 20),rgb(105, 51, 19),rgb(110, 52, 18),rgb(115, 53, 17),rgb(120, 54, 16),rgb(125, 55, 15),rgb(130, 56, 14),rgb(135, 57, 13),rgb(140, 58, 12),rgb(145, 59, 11)\n"
+        );
       }
     );
 
