Rewrite to ImportMapMicrofrontendUtils class (#2)

* Rewrite to class

* Documentation

README.md

@@ -1,3 +1,24 @@
 # import-map-microfrontend-utils
 
 Utility types and functions for import-map-microfrontend related projects
+
+## Installation
+
+```sh
+npm i @single-spa/import-map-microfrontend-utils
+```
+
+## Usage
+
+```ts
+import { ImportMapMicrofrontendUtils } from "@single-spa/import-map-microfrontend-utils";
+
+const utils = new ImportMapMicrofrontendUtils({
+  baseOrigin: "https://cdn.example.com",
+});
+
+utils.getMicrofrontendURLPrefix("@org/navbar");
+utils.getDependenciesURLPrefix();
+utils.getDependenciesFolderName();
+utils.getMFEsFolderName();
+```

src/__snapshots__/import-map-microfrontend-utils.test.ts.snap

@@ -1,13 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`microfrontendNameToFolderName can process scoped packages 1`] = `"org-root-config"`;
+exports[`getDependenciesURLPrefix returns url with trailing slash 1`] = `"https://cdn.example.com/deps/"`;
 
-exports[`microfrontendNameToFolderName can process scoped packages 2`] = `"org-name-navbar"`;
+exports[`getMicrofrontendURLPrefix can process scoped packages 1`] = `"https://cdn.example.com/mfes/org-root-config/"`;
 
-exports[`microfrontendNameToFolderName can process scoped packages 3`] = `"org_name-left_nav"`;
+exports[`getMicrofrontendURLPrefix can process scoped packages 2`] = `"https://cdn.example.com/mfes/org-name-navbar/"`;
 
-exports[`microfrontendNameToFolderName can process unscoped packages 1`] = `"root-config"`;
+exports[`getMicrofrontendURLPrefix can process scoped packages 3`] = `"https://cdn.example.com/mfes/org_name-left_nav/"`;
 
-exports[`microfrontendNameToFolderName can process unscoped packages 2`] = `"navbar"`;
+exports[`getMicrofrontendURLPrefix can process unscoped packages 1`] = `"https://cdn.example.com/mfes/root-config/"`;
 
-exports[`microfrontendNameToFolderName can process unscoped packages 3`] = `"left_nav"`;
+exports[`getMicrofrontendURLPrefix can process unscoped packages 2`] = `"https://cdn.example.com/mfes/navbar/"`;
+
+exports[`getMicrofrontendURLPrefix can process unscoped packages 3`] = `"https://cdn.example.com/mfes/left_nav/"`;

src/import-map-microfrontend-utils.test.ts

@@ -1,18 +1,37 @@
 import { describe, expect, it } from "@jest/globals";
-import { microfrontendNameToFolderName } from "./import-map-microfrontend-utils";
+import { ImportMapMicrofrontendUtils } from "./import-map-microfrontend-utils";
 
-describe(`microfrontendNameToFolderName`, () => {
+describe(`getMicrofrontendURLPrefix`, () => {
   it(`can process unscoped packages`, () => {
-    expect(microfrontendNameToFolderName("root-config")).toMatchSnapshot();
-    expect(microfrontendNameToFolderName("navbar")).toMatchSnapshot();
-    expect(microfrontendNameToFolderName("left_nav")).toMatchSnapshot();
+    const utils = new ImportMapMicrofrontendUtils({
+      baseOrigin: "https://cdn.example.com",
+    });
+    expect(utils.getMicrofrontendURLPrefix("root-config")).toMatchSnapshot();
+    expect(utils.getMicrofrontendURLPrefix("navbar")).toMatchSnapshot();
+    expect(utils.getMicrofrontendURLPrefix("left_nav")).toMatchSnapshot();
   });
 
   it(`can process scoped packages`, () => {
-    expect(microfrontendNameToFolderName("@org/root-config")).toMatchSnapshot();
-    expect(microfrontendNameToFolderName("@org-name/navbar")).toMatchSnapshot();
+    const utils = new ImportMapMicrofrontendUtils({
+      baseOrigin: "https://cdn.example.com",
+    });
     expect(
-      microfrontendNameToFolderName("@org_name/left_nav"),
+      utils.getMicrofrontendURLPrefix("@org/root-config"),
     ).toMatchSnapshot();
+    expect(
+      utils.getMicrofrontendURLPrefix("@org-name/navbar"),
+    ).toMatchSnapshot();
+    expect(
+      utils.getMicrofrontendURLPrefix("@org_name/left_nav"),
+    ).toMatchSnapshot();
+  });
+});
+
+describe(`getDependenciesURLPrefix`, () => {
+  it(`returns url with trailing slash`, () => {
+    const utils = new ImportMapMicrofrontendUtils({
+      baseOrigin: "https://cdn.example.com",
+    });
+    expect(utils.getDependenciesURLPrefix()).toMatchSnapshot();
   });
 });

src/import-map-microfrontend-utils.ts

@@ -1,5 +1,36 @@
-export function microfrontendNameToFolderName(
-  microfrontendName: string,
-): string {
-  return microfrontendName.replace(/@/g, "").replace(/\//, "-");
+export class ImportMapMicrofrontendUtils {
+  declare baseOrigin: string;
+
+  constructor(init: Init) {
+    if (init.baseOrigin.endsWith("/")) {
+      throw Error(`baseOrigin must not end with slash`);
+    }
+
+    this.baseOrigin = init.baseOrigin;
+  }
+
+  getMicrofrontendURLPrefix(microfrontendName: string): string {
+    return (
+      this.baseOrigin +
+      `/${this.getMFEsFolderName()}/` +
+      microfrontendName.replace(/@/g, "").replace(/\//, "-") +
+      "/"
+    );
+  }
+
+  getDependenciesURLPrefix(): string {
+    return this.baseOrigin + `/${this.getDependenciesFolderName()}/`;
+  }
+
+  getDependenciesFolderName() {
+    return "deps";
+  }
+
+  getMFEsFolderName() {
+    return "mfes";
+  }
+}
+
+interface Init {
+  baseOrigin: string;
 }