chore: add karma test for file cache

.github/workflows/action.yml

@@ -50,7 +50,12 @@ jobs:
 
       - name: Test caching
         working-directory: ./tests/app-filesystem-cache
-        run: npm run build:ci
+        run: |
+          npm run build:ci
+          npm run test
+          # run it twice to to use cache 2nd run (hopefully?)
+          npm run test
+          Write-Host ( Get-ChildItem .\node_modules\.bin | Measure-Object ).Count;
 
       # - name: Test build app using 3rd party lib
       #   working-directory: ./tests/app-plugin-3rd-party

dist/AureliaDependenciesPlugin.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AureliaDependenciesPlugin = void 0;
 const IncludeDependency_1 = require("./IncludeDependency");
-const ClassSerializer_1 = require("./ClassSerializer");
 const webpack = require("webpack");
 const PreserveExportsPlugin_1 = require("./PreserveExportsPlugin");
 const BasicEvaluatedExpression = require("webpack/lib/javascript/BasicEvaluatedExpression");
@@ -19,7 +18,6 @@ class AureliaDependency extends IncludeDependency_1.IncludeDependency {
         return webpack.Dependency.EXPORTS_OBJECT_REFERENCED;
     }
 }
-webpack.util.serialization.register(AureliaDependency, "AureliaDependency", "AureliaDependency", new ClassSerializer_1.ClassSerializer(AureliaDependency));
 class Template {
     apply(dep, source) {
         source.replace(dep.range[0], dep.range[1] - 1, "'" + dep.request.replace(/^async(?:\?[^!]*)?!/, "") + "'");

dist/IncludeDependency.js

@@ -4,7 +4,6 @@ exports.Template = exports.IncludeDependency = void 0;
 const PreserveExportsPlugin_1 = require("./PreserveExportsPlugin");
 const PreserveModuleNamePlugin_1 = require("./PreserveModuleNamePlugin");
 const webpack = require("webpack");
-const ClassSerializer_1 = require("./ClassSerializer");
 class IncludeDependency extends webpack.dependencies.ModuleDependency {
     constructor(request, options) {
         let chunk = options && options.chunk;
@@ -28,16 +27,7 @@ class IncludeDependency extends webpack.dependencies.ModuleDependency {
         var _a;
         return (_a = this.options) === null || _a === void 0 ? void 0 : _a.exports;
     }
-    serialize(context) {
-        context.write(this.options);
-        super.serialize(context);
-    }
-    deserialize(context) {
-        this.options = context.read();
-        super.deserialize(context);
-    }
 }
 exports.IncludeDependency = IncludeDependency;
 ;
-webpack.util.serialization.register(IncludeDependency, "IncludeDependency", "IncludeDependency", new ClassSerializer_1.ClassSerializer(IncludeDependency));
 exports.Template = webpack.dependencies.NullDependency.Template;

dist/PreserveModuleNamePlugin.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PreserveModuleNamePlugin = exports.preserveModuleName = void 0;
 const path = require("path");
-const Webpack = require("webpack");
 const logger_1 = require("./logger");
 exports.preserveModuleName = Symbol();
 const TAP_NAME = "Aurelia:PreserveModuleName";
@@ -17,13 +16,6 @@ class PreserveModuleNamePlugin {
         this.isDll = isDll;
     }
     apply(compiler) {
-        // Override NormalModule serializer: "preserveModuleName" should be serialized
-        // to ensure correct module serialization of conventional dependencies (ConventionDependenciesPlugin)
-        // when "webpack filesystem cache" is enabled, https://github.com/aurelia/webpack-plugin/issues/199
-        const isFilesystemCacheEnabled = typeof (compiler.options.cache) == 'object' && compiler.options.cache.type == 'filesystem';
-        if (isFilesystemCacheEnabled) {
-            overrideNormalModuleSerializer();
-        }
         compiler.hooks.compilation.tap(TAP_NAME, compilation => {
             compilation.hooks.beforeModuleIds.tap(TAP_NAME, $modules => {
                 let modules = Array.from($modules);
@@ -185,18 +177,3 @@ function removeLoaders(request) {
     let lastBang = request.lastIndexOf("!");
     return lastBang < 0 ? request : request.substr(lastBang + 1);
 }
-function overrideNormalModuleSerializer() {
-    const originalSerialize = Webpack.NormalModule.prototype.serialize;
-    Webpack.NormalModule.prototype.serialize = function (context) {
-        context.write(this[exports.preserveModuleName]);
-        originalSerialize.call(this, context);
-    };
-    const originalDeserialize = Webpack.NormalModule.prototype.deserialize;
-    Webpack.NormalModule.prototype.deserialize = function (context) {
-        const preserve = context.read();
-        if (preserve) {
-            this[exports.preserveModuleName] = preserve;
-        }
-        originalDeserialize.call(this, context);
-    };
-}

dist/types/IncludeDependency.d.ts

@@ -9,8 +9,6 @@ export declare class IncludeDependency extends webpack.dependencies.ModuleDepend
     getReferencedExports(moduleGraph: webpack.ModuleGraph): (string[] | ReferencedExport)[];
     get [preserveModuleName](): boolean;
     get [dependencyImports](): string[] | undefined;
-    serialize(context: any): void;
-    deserialize(context: any): void;
 }
 export declare type NullDependencyTemplate = typeof webpack.dependencies.NullDependency.Template;
 export declare const Template: NullDependencyTemplate;

src/PreserveModuleNamePlugin.ts

@@ -198,7 +198,12 @@ function removeLoaders(request: string | undefined) {
   return lastBang < 0 ? request : request.substr(lastBang + 1);
 }
 
+let overridden = false;
 function overrideNormalModuleSerializer() {
+  if (overridden) {
+    return;
+  }
+  overridden = true;
   const originalSerialize = Webpack.NormalModule.prototype.serialize;
   Webpack.NormalModule.prototype.serialize = function (context) {
     context.write(this[preserveModuleName]);

tests/app-filesystem-cache/karma.conf.js

@@ -0,0 +1,103 @@
+const path = require('path');
+// const os = require('os');
+const { AureliaPlugin } = require('aurelia-webpack-plugin');
+
+module.exports = (config) => {
+  config.set({
+    basePath: '',
+
+    preprocessors: {
+      // add webpack as preprocessor
+      'test/**/*.test.ts': ['webpack', 'sourcemap']
+    },
+
+    // make sure to include webpack as a framework
+    frameworks: ['mocha', 'webpack'],
+
+    plugins: [
+      'karma-mocha',
+      'karma-webpack',
+      'karma-chrome-launcher',
+      'karma-sourcemap-loader',
+    ],
+
+    files: [
+      { pattern: 'src/**/*.ts', included: false, served: true, watched: false, nocache: false },
+      { pattern: 'test/**/*.test.ts', watched: false },
+    ],
+
+    browsers: ['ChromeHeadless'],
+    mime: {
+      "text/x-typescript": ["ts"]
+    },
+    mochaReporter: {
+      ignoreSkipped: true
+    },
+
+    webpack: webpackConfig(),
+  });
+}
+
+/**
+ * @returns {import('webpack').Configuration}
+ */
+function webpackConfig() {
+  return {
+    mode: 'development',
+    // target: ['es5'],
+    // output: {
+    //   filename: 'app.js',
+    //   path: path.join(os.tmpdir(), '_karma_webpack_') + Math.floor(Math.random() * 1000000),
+    // },
+    stats: {
+      modules: false,
+      colors: true,
+    },
+    resolve: {
+      extensions: [".js", ".ts"],
+      alias: {
+        src: path.join(__dirname, 'src')
+      },
+      modules: ['node_modules']
+    },
+    watch: true,
+    devtool: 'inline-source-map',
+    optimization: {
+      runtimeChunk: 'single',
+      splitChunks: {
+        chunks: 'all',
+        minSize: 0,
+        cacheGroups: {
+          commons: {
+            name: 'commons',
+            chunks: 'initial',
+            minChunks: 1,
+          },
+        },
+      },
+    },
+    module: {
+      rules: [
+        {
+          test: /\.ts$/,
+          loader: "ts-loader",
+          exclude: /node_modules/,
+          options: {
+            compilerOptions: {
+              target: 'es5'
+            }
+          }
+        },
+        {
+          test: /\.html$/,
+          loader: 'html-loader'
+        }
+      ]
+    },
+    plugins: [
+      new AureliaPlugin({
+        aureliaApp: undefined
+      }),
+    ],
+  };
+}

tests/app-filesystem-cache/package.json

@@ -7,7 +7,8 @@
     "prebuild:ci": "npm install",
     "build:ci": "npm run build -- --no-stats",
     "install:plugin": "npm install ../../",
-    "rimraf": "rimraf dist/**/*.js"
+    "rimraf": "rimraf dist/**/*.js",
+    "test": "karma start --singleRun"
   },
   "dependencies": {
     "aurelia-webpack-plugin": "file:../.."

tests/app-filesystem-cache/src/app.ts

@@ -1,4 +1,4 @@
-import { MyComponent } from "my-component";
+import { MyComponent } from "./my-component";
 
 export class App {
   viewModel = MyComponent;

tests/app-filesystem-cache/test/app.test.ts

@@ -0,0 +1,18 @@
+import 'aurelia-polyfills';
+import 'aurelia-loader-webpack';
+import { bootstrap } from 'aurelia-bootstrapper';
+import { StageComponent } from 'aurelia-testing';
+import { assert } from 'chai';
+import { PLATFORM } from 'aurelia-pal';
+
+describe('app-filesystem-cache/app.test.ts', function () {
+  it('works', async function () {
+    const component = StageComponent
+      .withResources([PLATFORM.moduleName('src/app')])
+      .inView('<app >')
+      .boundTo({ });
+    await component.create(bootstrap);
+
+    assert.include(component.element.textContent.trim(), 'Test');
+  });
+});

tests/app-filesystem-cache/webpack.config.js

@@ -13,7 +13,10 @@ module.exports = (env = {}) => {
     mode: 'development',
     target: 'web',
     cache: {
-      type: 'filesystem'
+      type: 'filesystem',
+      buildDependencies: {
+        config: [__filename]
+      }
     },
     resolve: {
       extensions: [".ts", ".js"],

tests/app-simple/package.json

@@ -8,7 +8,7 @@
     "build:ci": "npm run build -- --no-stats",
     "install:plugin": "npm install ../../",
     "rimraf": "rimraf dist/**/*.js",
-    "test": "../../node_modules/.bin/karma start --singleRun"
+    "test": "karma start --singleRun"
   },
   "dependencies": {
     "aurelia-webpack-plugin": "file:../.."