use native tsc build for npm publishing

.github/workflows/npm-publish-github-packages.yml

@@ -18,7 +18,7 @@ jobs:
           node-version: 20
       - run: npm ci
       - run: npm run test:unit
-      - run: npm run build:web-docker
+      - run: npm run build:web-docker:lib
       - uses: actions/upload-artifact@v3
         with:
           name: build-artifacts

package.json

@@ -2,7 +2,9 @@
   "name": "@openreplyde/web-docker",
   "version": "1.0.0-alpha.1",
   "type": "module",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "main": "./dist/index.umd.js",
   "module": "./dist/index.mjs",
   "exports": {
@@ -11,9 +13,11 @@
       "require": "./dist/index.umd.js"
     }
   },
+  "types": "./dist/index.d.ts",
   "scripts": {
     "dev:test-host": "vite --config vite.config.test-host.ts --host",
     "build:web-docker": "vue-tsc --noEmit && vite build --config vite.config.web-docker.ts",
+    "build:web-docker:lib": "tsc --project ./tsconfig.lib.json",
     "build:test-host": "vue-tsc --noEmit && vite build --config vite.config.test-host.ts",
     "build:page-module": "vue-tsc --noEmit && vite build --config vite.config.page-module.ts",
     "build:observed-module": "vue-tsc --noEmit && vite build --config vite.config.observed-module.ts",
@@ -32,7 +36,6 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "devDependencies": {
-    "vue": "^3.2.25",
     "@playwright/test": "1.29.0",
     "@testing-library/dom": "^8.14.0",
     "@types/node": "^18.0.0",
@@ -50,6 +53,7 @@
     "vite": "^4.4.9",
     "vitest": "^0.16.0",
     "vitest-fetch-mock": "^0.2.1",
+    "vue": "^3.2.25",
     "vue-tsc": "^0.38.2",
     "wait-on": "^7.2.0"
   }

src/core/InitializeEvent.ts

@@ -1,9 +1,11 @@
-import { RemoteConfig } from "~/core/RemoteConfigurationService";
 
 export const InitializeEventType = "web-docker:initialize" as const;
 
-class InitializeEvent extends CustomEvent<RemoteConfig> {
-  constructor(detail: RemoteConfig) {
+class InitializeEvent extends CustomEvent<{
+  configFilePath: string;
+  logEvents: boolean;
+}> {
+  constructor(detail: { configFilePath: string; logEvents: boolean }) {
     super(InitializeEventType, { detail });
   }
 }

src/core/Logger.ts

@@ -1,11 +1,9 @@
-const logEvents = import.meta.env.VITE_APP_LOG_EVENTS || false;
-
 export class Logger {
-  constructor(private readonly name: string) {}
+  constructor(private readonly name: string, private readonly logEvents: boolean) {}
   log(...args: unknown[]) {
-    logEvents && console.log(`[web docker: ${this.name}]: `, ...args);
+    this.logEvents && console.log(`[web docker: ${this.name}]: `, ...args);
   }
   warn(...args: unknown[]) {
-    logEvents && console.warn(`[web docker: ${this.name}]: `, ...args);
+    this.logEvents && console.warn(`[web docker: ${this.name}]: `, ...args);
   }
 }

src/core/ModuleRegistry.spec.ts

@@ -28,7 +28,7 @@ afterEach(() => {
 
 describe("ModuleRegistry", () => {
   it("constructs", () => {
-    const moduleRegistry = new ModuleRegistry();
+    const moduleRegistry = new ModuleRegistry(false);
 
     expect(moduleRegistry).toBeTruthy();
   });
@@ -38,11 +38,11 @@ describe("ModuleRegistry", () => {
         return [document.createElement("link")];
       },
     };
-    const moduleRegistry = new ModuleRegistry(assetFactoryMock);
+    const moduleRegistry = new ModuleRegistry(false, assetFactoryMock);
 
     const service = moduleRegistry.add(config);
 
-    expect(service.module).toBe('test-module')
+    expect(service.module).toBe("test-module");
   });
 
   it("does not allow services with similar custom component names", () => {
@@ -51,7 +51,7 @@ describe("ModuleRegistry", () => {
         return [document.createElement("link")];
       },
     };
-    const moduleRegistry = new ModuleRegistry(assetFactoryMock);
+    const moduleRegistry = new ModuleRegistry(false, assetFactoryMock);
 
     moduleRegistry.add(config);
 
@@ -64,7 +64,7 @@ describe("ModuleRegistry", () => {
         return [document.createElement("link")];
       },
     };
-    const moduleRegistry = new ModuleRegistry(assetFactoryMock);
+    const moduleRegistry = new ModuleRegistry(false, assetFactoryMock);
 
     moduleRegistry.add(config);
 
@@ -77,7 +77,7 @@ describe("ModuleRegistry", () => {
         return [document.createElement("link")];
       },
     };
-    const moduleRegistry = new ModuleRegistry(assetFactoryMock);
+    const moduleRegistry = new ModuleRegistry(false, assetFactoryMock);
 
     const assetB: Asset = {
       async: false,
@@ -108,7 +108,7 @@ describe("ModuleRegistry", () => {
         return [document.createElement("link")];
       },
     };
-    const moduleRegistry = new ModuleRegistry(assetFactoryMock);
+    const moduleRegistry = new ModuleRegistry(false, assetFactoryMock);
 
     const initialConfig: ModuleConfig = {
       pages: [],

src/core/ModuleRegistry.ts

@@ -11,9 +11,11 @@ export interface ModuleRegistryInterface {
 }
 
 class ModuleRegistry implements ModuleRegistryInterface {
-  private readonly logger = new Logger("ModuleRegistry");
+  private readonly logger;
   private readonly moduleServices: ModuleService[] = [];
-  constructor(private readonly assetFactory = new AssetFactory()) {}
+  constructor(private readonly logEvents: boolean, private readonly assetFactory = new AssetFactory()) {
+    this.logger = new Logger("ModuleRegistry", logEvents);
+  }
 
   add(config: ModuleConfig): ModuleService {
     const registeredAssets: string[] = this.moduleServices.reduce<string[]>(
@@ -70,12 +72,12 @@ class ModuleRegistry implements ModuleRegistryInterface {
 
   private addModule(moduleConfig: ModuleConfig) {
     if (moduleConfig.type === "page") {
-      const service = new PageModuleService(moduleConfig, this.assetFactory);
+      const service = new PageModuleService(moduleConfig, this.assetFactory, this.logEvents);
       this.logger.log("registered page module: ", moduleConfig.module);
       this.moduleServices.push(service);
       return service;
     } else {
-      const service = new ObservedModuleService(moduleConfig, this.assetFactory);
+      const service = new ObservedModuleService(moduleConfig, this.assetFactory, this.logEvents);
       this.logger.log("registered observed module: ", moduleConfig.module);
       this.moduleServices.push(service);
       return service;

src/core/ObservedModuleService.ts

@@ -4,15 +4,17 @@ import type { IncludeType, ObservedModuleConfig } from "~/core/ModuleConfig";
 import { ModuleService } from "~/core/ModuleService";
 
 class ObservedModuleService implements ModuleService {
-  private readonly logger: Logger = new Logger("ObserverModuleService");
+  private readonly logger: Logger;
   private assetsInjected = false;
 
   constructor(
     private readonly config: ObservedModuleConfig,
     private readonly assetFactory = new AssetFactory(),
+    logEvents: boolean,
     private readonly documentBody = document.body,
     private readonly documentHead = document.head
   ) {
+    this.logger = new Logger("ObservedModuleService", logEvents);
     this.assetFactory = assetFactory;
 
     if (this.elementExists()) this.injectAssets();

src/core/PageModuleService.ts

@@ -8,14 +8,16 @@ import type {
 import { ModuleService } from "~/core/ModuleService";
 
 class PageModuleService implements ModuleService {
-  private readonly logger: Logger = new Logger("PageModuleService");
+  private readonly logger: Logger;
 
   constructor(
     private readonly config: PageModuleConfig,
     private readonly assetFactory = new AssetFactory(),
+    private readonly logEvents: boolean = false,
     private readonly documentBody = document.body,
     private readonly documentHead = document.head
   ) {
+    this.logger = new Logger("PageModuleService", this.logEvents);
     this.assetFactory = assetFactory;
 
     if (config.pages.length === 0 || config.pages.some(this.matches))

src/core/RemoteConfigurationService.ts

@@ -1,21 +1,19 @@
 import { Logger } from "~/core/Logger";
 import { Config } from "~/core/Config";
-
-export type RemoteConfig = {
-  configFilePath?: string;
-};
+import { WebDockerOptions } from "~/core/initialize";
 
 class RemoteConfigurationService {
-  private readonly logger = new Logger("RemoteConfigurationService");
+  private readonly logger;
   private readonly configFilePath: string | undefined = undefined;
 
-  constructor(remoteConfig: RemoteConfig) {
-    if (!remoteConfig.configFilePath) {
+  constructor(options: WebDockerOptions) {
+    this.logger = new Logger("RemoteConfigurationService", options.logEvents ?? false);
+    if (!options.configFilePath) {
       this.logger.log(
         `No CONFIG_FILE_PATH has been set. Disabling web docker's remote configs.`
       );
     } else {
-      this.configFilePath = remoteConfig.configFilePath;
+      this.configFilePath = options.configFilePath;
       this.logger.log(
         `Initializing RemoteConfigurationService with CONFIG_FILE_PATH: ${this.configFilePath}.`
       );

src/core/index.ts

@@ -10,9 +10,7 @@ declare global {
   }
   interface Window {
     webdocker: {
-      initialize: (config: {
-        configFilePath: string;
-      }) => void;
+      initialize: (config: { configFilePath: string }, logEvents: boolean) => void;
     };
   }
 }

src/core/initialize.ts

@@ -1,5 +1,4 @@
 import {
-  RemoteConfig,
   RemoteConfigurationService,
 } from "~/core/RemoteConfigurationService";
 import ModuleRegistry from "~/core/ModuleRegistry";
@@ -8,21 +7,21 @@ import { ModuleConfigService } from "~/core/ModuleConfig";
 import { RegisterEventType } from "~/core/RegisterEvent";
 import { InitializeEventType } from "~/core/InitializeEvent";
 
-const initialize = async (remoteConfig: RemoteConfig) => {
+export type WebDockerOptions = {
+  configFilePath?: string;
+  logEvents?: boolean;
+};
+
+const initialize = async (options: WebDockerOptions) => {
   const moduleConfigService = new ModuleConfigService();
-  const registry = new ModuleRegistry();
-  const remoteConfigurationService = new RemoteConfigurationService(
-    remoteConfig
-  );
+  const registry = new ModuleRegistry(options.logEvents ?? false);
+  const remoteConfigurationService = new RemoteConfigurationService(options);
   // NOTE: event registry has to be done before any async operation. Since Async operations
   // do not block the event loop and the registration event might be dispatched while another event loop is running.
-  window.addEventListener(
-    RegisterEventType,
-    (event: CustomEvent<Config>) => {
-      const config = moduleConfigService.getModuleConfig(event.detail);
-      registry.addReplace(config);
-    }
-  );
+  window.addEventListener(RegisterEventType, (event: CustomEvent<Config>) => {
+    const config = moduleConfigService.getModuleConfig(event.detail);
+    registry.addReplace(config);
+  });
 
   const remoteConfigurations = await remoteConfigurationService.fetch();
   remoteConfigurations?.forEach((config: Config) => {
@@ -35,7 +34,7 @@ window.webdocker = { initialize };
 
 window.addEventListener(
   InitializeEventType,
-  async (event: CustomEvent<RemoteConfig>) => {
+  async (event: CustomEvent<WebDockerOptions>) => {
     await initialize(event.detail);
   }
 );

src/core/main.ts

@@ -2,6 +2,7 @@ import initialize from "~/core/initialize";
 
 initialize({
   configFilePath: import.meta.env.VITE_CONFIG_FILE_PATH,
+  logEvents: import.meta.env.VITE_APP_LOG_EVENTS || false
 })
   .then(() => {
     console.log("Web Docker initialized");

tsconfig.lib.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "noImplicitAny": true,
+    "declaration": true,
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "outDir": "./dist",
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  },
+  "include": ["src/core/**/*"],
+  "exclude": ["src/core/main.ts"]
+}