Setup Angular repo with all packages (#4)

* Setup Angular repo with all packages

* Upgrade pnpm version

* Use Angular linker plugin

.github/workflows/build-and-test.yml

@@ -14,10 +14,11 @@ jobs:
       - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
       - uses: actions/setup-node@v4
         with:
-          node-version: "15"
-      - uses: pnpm/action-setup@v3.0.0
+          node-version: "18.13"
+      - uses: pnpm/action-setup@v3
         with:
-          version: 5.17.3
+          version: 8
+          run_install: false
       - run: pnpm install --frozen-lockfile
       - run: pnpm test
   publish:
@@ -40,10 +41,11 @@ jobs:
           token: ${{ secrets.PUBLISH_BOT }}
       - uses: actions/setup-node@v4
         with:
-          node-version: "15"
-      - uses: pnpm/action-setup@v3.0.0
+          node-version: "18.13"
+      - uses: pnpm/action-setup@v3
         with:
-          version: 5.17.3
+          version: 8
+          run_install: false
       - run: pnpm install --frozen-lockfile
       - name: Setup auth
         run: |

.gitignore

@@ -105,7 +105,4 @@ dist
 
 esm
 system
-
-# fake stuff
-.my-git-credentials
-.my-git-credentials-backup
+es2022

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-pnpx pretty-quick --staged && pnpm test
+pnpm pretty-quick --staged && pnpm test

.prettierignore

@@ -1,8 +1,6 @@
 .prettierignore
 .gitignore
 LICENSE
-yarn.lock
-yarn-error.log
 esm/
 system/
 .DS_Store
@@ -11,3 +9,4 @@ karma.conf.cjs
 .nvmrc
 .husky
 pnpm-lock.yaml
+es2022

browser-test/systemjs-setup.js

@@ -0,0 +1,47 @@
+document.head.appendChild(
+  Object.assign(document.createElement("script"), {
+    type: "systemjs-importmap",
+    textContent: `
+      {
+        "imports": {
+          "tslib": "/base/system/es2022/tslib.min.js",
+
+          "rxjs": "//cdn.jsdelivr.net/npm/@esm-bundle/rxjs/system/rxjs.min.js",
+          "rxjs/operators": "//cdn.jsdelivr.net/npm/@esm-bundle/rxjs/system/rxjs-operators.min.js",
+
+          "@angular/animations": "/base/system/es2022/angular-animations.min.js",
+          "@angular/animations/browser": "/base/system/es2022/angular-animations-browser.min.js",
+
+          "@angular/common": "/base/system/es2022/angular-common.min.js",
+          "@angular/common/http": "/base/system/es2022/angular-common-http.min.js",
+          "@angular/common/upgrade": "/base/system/es2022/angular-common-upgrade.min.js",
+
+          "@angular/compiler": "/base/system/es2022/angular-compiler.min.js",
+
+          "@angular/core/primitives/signals": "/base/system/es2022/angular-core-primitives-signals.min.js",
+          "@angular/core": "/base/system/es2022/angular-core.min.js",
+          "@angular/core/rxjs-interop": "/base/system/es2022/angular-core-rxjs-interop.min.js",
+
+          "@angular/elements": "/base/system/es2022/angular-elements.min.js",
+
+          "@angular/forms": "/base/system/es2022/angular-forms.min.js",
+
+          "@angular/localize": "/base/system/es2022/angular-localize.min.js",
+
+          "@angular/platform-browser": "/base/system/es2022/angular-platform-browser.min.js",
+          "@angular/platform-browser/animations": "/base/system/es2022/angular-platform-browser-animations.min.js",
+          "@angular/platform-browser/animations/async": "/base/system/es2022/angular-platform-browser-animations-async.min.js",
+
+          "@angular/platform-browser-dynamic": "/base/system/es2022/angular-platform-browser-dynamic.min.js",
+
+          "@angular/router": "/base/system/es2022/angular-router.min.js",
+          "@angular/router/upgrade": "/base/system/es2022/angular-router-upgrade.min.js",
+
+          "@angular/service-worker": "/base/system/es2022/angular-service-worker.min.js",
+
+          "@angular/upgrade": "/base/system/es2022/angular-upgrade.min.js",
+          "@angular/upgrade/static": "/base/system/es2022/angular-upgrade-static.min.js"
+        }
+      }`,
+  }),
+);

browser-test/test.js

@@ -1,9 +1,214 @@
-describe("@esm-bundle/autopublish-template", () => {
-  it("can load the ESM bundle", () => {
-    return import("/base/esm/index.js");
+describe("@esm-bundle/angular", () => {
+  describe("@angular/animations", () => {
+    [
+      ["angular-animations", "AnimationBuilder"],
+      ["angular-animations-browser", "AnimationDriver"],
+    ].forEach(([filename, exportName]) => {
+      it(`can load the System.register bundle`, async () => {
+        const m = await System.import(`/base/system/es2022/${filename}.js`);
+        expect(m[exportName]).toBeDefined();
+      });
+
+      it(`can load the System.register prod bundle`, async () => {
+        const m = await System.import(`/base/system/es2022/${filename}.min.js`);
+        expect(m[exportName]).toBeDefined();
+      });
+    });
+  });
+
+  describe("@angular/common", () => {
+    [
+      ["angular-common", "NgClass"],
+      ["angular-common-http", "HttpClient"],
+      ["angular-common-upgrade", "AngularJSUrlCodec"],
+    ].forEach(([filename, exportName]) => {
+      it(`can load the System.register bundle`, async () => {
+        const m = await System.import(`/base/system/es2022/${filename}.js`);
+        expect(m[exportName]).toBeDefined();
+      });
+
+      it(`can load the System.register prod bundle`, async () => {
+        const m = await System.import(`/base/system/es2022/${filename}.min.js`);
+        expect(m[exportName]).toBeDefined();
+      });
+    });
+  });
+
+  describe("@angular/compiler", () => {
+    [["angular-compiler", "compileComponentClassMetadata"]].forEach(
+      ([filename, exportName]) => {
+        it(`can load the System.register bundle`, async () => {
+          const m = await System.import(`/base/system/es2022/${filename}.js`);
+          expect(m[exportName]).toBeDefined();
+        });
+
+        it(`can load the System.register prod bundle`, async () => {
+          const m = await System.import(
+            `/base/system/es2022/${filename}.min.js`,
+          );
+          expect(m[exportName]).toBeDefined();
+        });
+      },
+    );
+  });
+
+  describe("@angular/core", () => {
+    [
+      ["angular-core", "Injectable"],
+      ["angular-core-primitives-signals", "consumerMarkDirty"],
+      ["angular-core-rxjs-interop", "takeUntilDestroyed"],
+    ].forEach(([filename, exportName]) => {
+      it(`can load the System.register bundle`, async () => {
+        const m = await System.import(`/base/system/es2022/${filename}.js`);
+        expect(m[exportName]).toBeDefined();
+      });
+
+      it(`can load the System.register prod bundle`, async () => {
+        const m = await System.import(`/base/system/es2022/${filename}.min.js`);
+        expect(m[exportName]).toBeDefined();
+      });
+    });
+  });
+
+  describe("@angular/elements", () => {
+    [["angular-elements", "createCustomElement"]].forEach(
+      ([filename, exportName]) => {
+        it(`can load the System.register bundle`, async () => {
+          const m = await System.import(`/base/system/es2022/${filename}.js`);
+          expect(m[exportName]).toBeDefined();
+        });
+
+        it(`can load the System.register prod bundle`, async () => {
+          const m = await System.import(
+            `/base/system/es2022/${filename}.min.js`,
+          );
+          expect(m[exportName]).toBeDefined();
+        });
+      },
+    );
+  });
+
+  describe("@angular/forms", () => {
+    [["angular-forms", "ReactiveFormsModule"]].forEach(
+      ([filename, exportName]) => {
+        it(`can load the System.register bundle`, async () => {
+          const m = await System.import(`/base/system/es2022/${filename}.js`);
+          expect(m[exportName]).toBeDefined();
+        });
+
+        it(`can load the System.register prod bundle`, async () => {
+          const m = await System.import(
+            `/base/system/es2022/${filename}.min.js`,
+          );
+          expect(m[exportName]).toBeDefined();
+        });
+      },
+    );
   });
 
-  it("can load the System.register bundle", () => {
-    return System.import("/base/system/index.js");
+  describe("@angular/localize", () => {
+    [["angular-localize", "loadTranslations"]].forEach(
+      ([filename, exportName]) => {
+        it(`can load the System.register bundle`, async () => {
+          const m = await System.import(`/base/system/es2022/${filename}.js`);
+          expect(m[exportName]).toBeDefined();
+        });
+
+        it(`can load the System.register prod bundle`, async () => {
+          const m = await System.import(
+            `/base/system/es2022/${filename}.min.js`,
+          );
+          expect(m[exportName]).toBeDefined();
+        });
+      },
+    );
+  });
+
+  describe("@angular/platform-browser", () => {
+    [
+      ["angular-platform-browser", "bootstrapApplication"],
+      ["angular-platform-browser-animations", "provideAnimations"],
+      ["angular-platform-browser-animations-async", "provideAnimationsAsync"],
+    ].forEach(([filename, exportName]) => {
+      it(`can load the System.register bundle`, async () => {
+        const m = await System.import(`/base/system/es2022/${filename}.js`);
+        expect(m[exportName]).toBeDefined();
+      });
+
+      it(`can load the System.register prod bundle`, async () => {
+        const m = await System.import(`/base/system/es2022/${filename}.min.js`);
+        expect(m[exportName]).toBeDefined();
+      });
+    });
+  });
+
+  describe("@angular/platform-browser-dynamic", () => {
+    [["angular-platform-browser-dynamic", "JitCompilerFactory"]].forEach(
+      ([filename, exportName]) => {
+        it(`can load the System.register bundle`, async () => {
+          const m = await System.import(`/base/system/es2022/${filename}.js`);
+          expect(m[exportName]).toBeDefined();
+        });
+
+        it(`can load the System.register prod bundle`, async () => {
+          const m = await System.import(
+            `/base/system/es2022/${filename}.min.js`,
+          );
+          expect(m[exportName]).toBeDefined();
+        });
+      },
+    );
+  });
+
+  describe("@angular/router", () => {
+    [
+      ["angular-router", "provideRouter"],
+      ["angular-router-upgrade", "locationSyncBootstrapListener"],
+    ].forEach(([filename, exportName]) => {
+      it(`can load the System.register bundle`, async () => {
+        const m = await System.import(`/base/system/es2022/${filename}.js`);
+        expect(m[exportName]).toBeDefined();
+      });
+
+      it(`can load the System.register prod bundle`, async () => {
+        const m = await System.import(`/base/system/es2022/${filename}.min.js`);
+        expect(m[exportName]).toBeDefined();
+      });
+    });
+  });
+
+  describe("@angular/service-worker", () => {
+    [["angular-service-worker", "provideServiceWorker"]].forEach(
+      ([filename, exportName]) => {
+        it(`can load the System.register bundle`, async () => {
+          const m = await System.import(`/base/system/es2022/${filename}.js`);
+          expect(m[exportName]).toBeDefined();
+        });
+
+        it(`can load the System.register prod bundle`, async () => {
+          const m = await System.import(
+            `/base/system/es2022/${filename}.min.js`,
+          );
+          expect(m[exportName]).toBeDefined();
+        });
+      },
+    );
+  });
+
+  describe("@angular/upgrade", () => {
+    [
+      ["angular-upgrade", "UpgradeAdapter"],
+      ["angular-upgrade-static", "downgradeComponent"],
+    ].forEach(([filename, exportName]) => {
+      it(`can load the System.register bundle`, async () => {
+        const m = await System.import(`/base/system/es2022/${filename}.js`);
+        expect(m[exportName]).toBeDefined();
+      });
+
+      it(`can load the System.register prod bundle`, async () => {
+        const m = await System.import(`/base/system/es2022/${filename}.min.js`);
+        expect(m[exportName]).toBeDefined();
+      });
+    });
   });
 });

karma.conf.cjs

@@ -13,6 +13,7 @@ module.exports = function(config) {
     // list of files / patterns to load in the browser
     files: [
       "https://cdn.jsdelivr.net/npm/systemjs/dist/system.js",
+      "browser-test/systemjs-setup.js",
       { pattern: "browser-test/**/*.js", watched: true, type: "module" },
       { pattern: "./**/*.*", watched: true, included: false, served: true }
     ],