diff --git a/README.md b/README.md index c61fd77..c0d7b40 100644 --- a/README.md +++ b/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(); +``` diff --git a/src/__snapshots__/import-map-microfrontend-utils.test.ts.snap b/src/__snapshots__/import-map-microfrontend-utils.test.ts.snap index 214fb37..efb1840 100644 --- a/src/__snapshots__/import-map-microfrontend-utils.test.ts.snap +++ b/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/"`; diff --git a/src/import-map-microfrontend-utils.test.ts b/src/import-map-microfrontend-utils.test.ts index 6f1d8f6..3d0ac5a 100644 --- a/src/import-map-microfrontend-utils.test.ts +++ b/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(); }); }); diff --git a/src/import-map-microfrontend-utils.ts b/src/import-map-microfrontend-utils.ts index b797002..40827cc 100644 --- a/src/import-map-microfrontend-utils.ts +++ b/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; }