@embeddable.com/sdk-core 3.7.2 → 3.8.0-next.0

package/loader/custom-esm-loader.mjs

@@ -59,6 +59,8 @@ const currentDir = dirname(fileURLToPath(import.meta.url));
 
 const isWindows = process.platform === "win32";
 
+const moduleCache = new Map();
+
 export const resolve = async (specifier, context, nextResolve) => {
   if (NON_JS_TS_EXTENSIONS.test(specifier)) {
     const mockModulePath = pathToFileURL(
@@ -72,6 +74,10 @@ export const resolve = async (specifier, context, nextResolve) => {
     };
   }
 
+  if (moduleCache.has(specifier)) {
+    return moduleCache.get(specifier);
+  }
+
   const isTS = EXTENSIONS.some((ext) => specifier.endsWith(ext));
 
   // Entry point
@@ -82,11 +88,15 @@ export const resolve = async (specifier, context, nextResolve) => {
       ? pathToFileURL(specifier.replace(`${processCwd}/file:/`, "")).href
       : specifier;
 
-    return {
+    const resolved = {
       format: isTS ? "ts" : undefined,
       url: entryPointPath,
       shortCircuit: true,
     };
+
+    moduleCache.set(specifier, resolved);
+
+    return resolved;
   }
 
   // Determine if this is a package import
@@ -121,13 +131,17 @@ export const resolve = async (specifier, context, nextResolve) => {
     !resolvedModule.resolvedFileName.includes("/node_modules/") &&
     EXTENSIONS.includes(resolvedModule.extension)
   ) {
-    return {
+    const resolved = {
       format: "ts",
       url:
         pathToFileURL(resolvedModule.resolvedFileName).href +
         `?update=${Date.now()}`,
       shortCircuit: true,
     };
+
+    moduleCache.set(specifier, resolved);
+
+    return resolved;
   }
 
   // Fallback for non-TS files or unresolved modules
@@ -139,7 +153,13 @@ export const resolve = async (specifier, context, nextResolve) => {
   return nextResolve(specifierPathOrUrl);
 };
 
+const compiledModuleCache = new Map();
+
 export const load = async (url, context, nextLoad) => {
+  if (compiledModuleCache.has(url)) {
+    return compiledModuleCache.get(url);
+  }
+
   if (context.format === "ts") {
     const { source } = await nextLoad(url, context);
     const code =
@@ -147,11 +167,15 @@ export const load = async (url, context, nextLoad) => {
 
     // Compile the code using @swc-node with the customer's tsconfig
     const compiled = await compile(code, fileURLToPath(url), tsconfig, true);
-    return {
+    const resolved = {
       format: "module",
       source: compiled,
       shortCircuit: true,
     };
+
+    compiledModuleCache.set(url, resolved);
+
+    return resolved;
   } else {
     if (
       isWindows &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embeddable.com/sdk-core",
-  "version": "3.7.2",
+  "version": "3.8.0-next.0",
   "description": "Core Embeddable SDK module responsible for web-components bundling and publishing.",
   "keywords": [
     "embeddable",
@@ -41,7 +41,7 @@
     "@embeddable.com/sdk-utils": "*",
     "@inquirer/select": "^1.3.0",
     "@stencil/core": "^4.18.2",
-    "@swc-node/register": "^1.9.0",
+    "@swc-node/register": "^1.10.9",
     "archiver": "^5.3.1",
     "axios": "^1.7.2",
     "chokidar": "^3.6.0",

package/src/dev.test.ts

@@ -0,0 +1,102 @@
+import { describe, it, expect, vi, beforeEach, afterEach, Mock } from "vitest";
+import * as http from "node:http";
+import axios from "axios";
+import provideConfig from "./provideConfig";
+import { getToken } from "./login";
+import * as chokidar from "chokidar";
+import dev from "./dev";
+import { checkNodeVersion } from "./utils";
+import { createManifest } from "./cleanup";
+import prepare from "./prepare";
+import { WebSocketServer } from "ws";
+
+// Mock dependencies
+vi.mock("./buildTypes", () => ({ default: vi.fn() }));
+vi.mock("./prepare", () => ({ default: vi.fn(), removeIfExists: vi.fn() }));
+vi.mock("./generate", () => ({ default: vi.fn() }));
+vi.mock("./provideConfig", () => ({ default: vi.fn() }));
+vi.mock("@stencil/core/sys/node", () => ({
+  createNodeLogger: vi.fn(),
+  createNodeSys: vi.fn(),
+}));
+vi.mock("ws", () => ({ WebSocketServer: vi.fn() }));
+vi.mock("chokidar", () => ({ watch: vi.fn() }));
+vi.mock("./login", () => ({ getToken: vi.fn(), default: vi.fn() }));
+vi.mock("axios", () => ({ default: { get: vi.fn() } }));
+vi.mock("@embeddable.com/sdk-utils", () => ({ findFiles: vi.fn() }));
+vi.mock("./push", () => ({ archive: vi.fn(), sendBuild: vi.fn() }));
+vi.mock("./validate", () => ({ default: vi.fn() }));
+vi.mock("./utils", () => ({ checkNodeVersion: vi.fn() }));
+vi.mock("./cleanup", () => ({ createManifest: vi.fn() }));
+vi.mock("node:http", () => ({
+  createServer: vi.fn(() => ({ listen: vi.fn() })),
+}));
+
+const mockConfig = {
+  client: {
+    rootDir: "/mock/root",
+    buildDir: "/mock/root/.embeddable-dev-build",
+    componentDir: "/mock/root/.embeddable-dev-build/component",
+    stencilBuild: "/mock/root/.embeddable-dev-build/dist/embeddable-wrapper",
+    tmpDir: "/mock/root/.embeddable-dev-tmp",
+    selfServeCustomizationDir: "/mock/root/self-serve",
+    modelsSrc: "/mock/root/models",
+  },
+  plugins: [],
+  previewBaseUrl: "http://preview.example.com",
+  pushBaseUrl: "http://push.example.com",
+};
+
+describe("dev command", () => {
+  let listenMock: Mock;
+  beforeEach(() => {
+    listenMock = vi.fn();
+    vi.mocked(http.createServer).mockImplementation(
+      () =>
+        ({
+          listen: listenMock,
+        }) as any,
+    );
+    vi.mocked(WebSocketServer).mockImplementation(() => {
+      return {
+        clients: [],
+        on: vi.fn(),
+      } as any;
+    });
+    vi.mocked(chokidar.watch).mockReturnValue({
+      on: vi.fn(),
+    } as any);
+    // Mock process.on to avoid actually setting up process listeners
+    vi.spyOn(process, "on").mockImplementation(() => process);
+
+    vi.mocked(provideConfig).mockResolvedValue(mockConfig);
+    vi.mocked(getToken).mockResolvedValue("mock-token");
+    vi.mocked(axios.get).mockResolvedValue({
+      data: "mock-workspace",
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("should set up the development environment", async () => {
+    // Run the dev command
+    await dev();
+
+    // Verify that the necessary functions were called
+    expect(checkNodeVersion).toHaveBeenCalled();
+    expect(prepare).toHaveBeenCalled();
+    expect(http.createServer).toHaveBeenCalled();
+    expect(WebSocketServer).toHaveBeenCalled();
+
+    // Verify that the server was set up to listen on the correct port
+    expect(listenMock).toHaveBeenCalledWith(8926, expect.any(Function));
+
+    // Call the listen callback to simulate the server being set up
+    listenMock.mock.calls[0][1]();
+    expect(createManifest).toHaveBeenCalled();
+
+    await expect.poll(() => chokidar.watch).toBeCalledTimes(2);
+  });
+});

package/src/dev.ts

@@ -11,6 +11,7 @@ import {
   createNodeSys,
 } from "@stencil/core/sys/node";
 import { RollupWatcher } from "rollup";
+import * as http from "node:http";
 import { IncomingMessage, Server, ServerResponse } from "http";
 import { ChildProcess } from "node:child_process";
 import { WebSocketServer, Server as WSServer } from "ws";
@@ -56,16 +57,24 @@ const addToGitingore = async () => {
   }
 };
 
+const chokidarWatchOptions = {
+  ignoreInitial: true,
+  usePolling: false, // Ensure polling is disabled
+  awaitWriteFinish: {
+    stabilityThreshold: 200,
+    pollInterval: 100,
+  },
+};
+
 export default async () => {
   checkNodeVersion();
   addToGitingore();
 
-  const http = require("http");
   ora = (await oraP).default;
 
   process.on("warning", (e) => console.warn(e.stack));
 
-  const logger = createNodeLogger({ process });
+  const logger = createNodeLogger();
   const sys = createNodeSys({ process });
 
   const defaultConfig = await provideConfig();
@@ -173,6 +182,7 @@ export default async () => {
 
       await plugin.validate(config);
       const watcher = await plugin.build(config);
+
       await configureWatcher(watcher, config);
       watchers.push(watcher);
     }
@@ -243,9 +253,7 @@ const onBundleBuildEnd = async (ctx: any) => {
 const dataModelAndSecurityContextWatcher = (ctx: any): FSWatcher => {
   const fsWatcher = chokidar.watch(
     [path.resolve(ctx.client.modelsSrc, "**/*.{cube,sc}.{yaml,yml,js}")],
-    {
-      ignoreInitial: true,
-    },
+    chokidarWatchOptions,
   );
   fsWatcher.on("all", async () => {
     await sendDataModelsAndSecurityContextsChanges(ctx);
@@ -260,9 +268,7 @@ const customSelfServeWatcher = (ctx: any): FSWatcher => {
       path.resolve(ctx.client.selfServeCustomizationDir, "style.css"),
       path.resolve(ctx.client.selfServeCustomizationDir, "*.svg"),
     ],
-    {
-      ignoreInitial: true,
-    },
+    chokidarWatchOptions,
   );
 
   fsWatcher.on("all", async () => {

package/src/generate.test.ts

@@ -79,7 +79,9 @@ describe("generate", () => {
       config: {},
     } as any);
     vi.mocked(createCompiler).mockResolvedValue({
-      build: vi.fn(),
+      build: vi.fn().mockResolvedValue({
+        hasError: false,
+      }),
       destroy: vi.fn(),
     } as any);
 
@@ -112,4 +114,51 @@ describe("generate", () => {
       "stencilBuild/embeddable-wrapper.esm-hash.js",
     );
   });
+
+  it("should generate bundle in dev mode", async () => {
+    const ctx = {
+      ...config,
+      dev: {
+        logger: vi.fn(),
+        sys: vi.fn(),
+      },
+    };
+
+    vi.mocked(fs.readFile).mockResolvedValue(
+      "replace-this-with-component-name",
+    );
+    await generate(ctx, "sdk-react");
+
+    expect(createCompiler).toHaveBeenCalled();
+
+    expect(fs.writeFile).toHaveBeenCalledWith(
+      "componentDir/component.tsx",
+      expect.stringContaining("embeddable-component"),
+    );
+
+    expect(loadConfig).toHaveBeenCalledWith({
+      config: {
+        configPath: "buildDir/stencil.config.ts",
+        devMode: true,
+        enableCache: true,
+        maxConcurrentWorkers: 8,
+        minifyCss: false,
+        minifyJs: false,
+        namespace: "embeddable-wrapper",
+        outputTargets: [
+          {
+            type: "dist",
+          },
+        ],
+        rootDir: "buildDir",
+        sourceMap: false,
+        srcDir: "buildDir/component",
+        tsconfig: "buildDir/tsconfig.json",
+        watchDirs: ["buildDir/buildName"],
+      },
+      initTsConfig: true,
+      logger: expect.any(Function),
+      sys: expect.any(Function),
+    });
+  });
 });

package/src/generate.ts

@@ -96,8 +96,8 @@ async function addComponentTagName(filePath: string, bundleHash: string) {
   ]);
 }
 
-async function runStencil(ctx: any) {
-  const logger = ctx.dev?.logger || createNodeLogger({ process });
+async function runStencil(ctx: any): Promise<void> {
+  const logger = ctx.dev?.logger || createNodeLogger();
   const sys = ctx.dev?.sys || createNodeSys({ process });
   const devMode = !!ctx.dev;
 
@@ -109,23 +109,56 @@ async function runStencil(ctx: any) {
     sys,
     config: {
       devMode,
+      enableCache: true,
       maxConcurrentWorkers: isWindows ? 0 : 8, // workers break on windows
       rootDir: ctx.client.buildDir,
       configPath: path.resolve(ctx.client.buildDir, "stencil.config.ts"),
       tsconfig: path.resolve(ctx.client.buildDir, "tsconfig.json"),
       namespace: "embeddable-wrapper",
       srcDir: path.resolve(ctx.client.buildDir, "component"),
+      sourceMap: !devMode,
+      minifyJs: !devMode,
+      minifyCss: !devMode,
       outputTargets: [
         {
           type: "dist",
         },
       ],
+      watchDirs: [
+        path.resolve(
+          ctx.client.buildDir,
+          ctx["sdk-react"].outputOptions.buildName,
+        ),
+      ],
     },
   });
 
   const compiler = await createCompiler(validated.config);
+  const buildResults = await compiler.build();
+
+  if (devMode) {
+    // Handle process exit to clean up resources
+    const cleanUp = async () => {
+      await compiler.destroy();
+      process.exit(0);
+    };
+
+    process.on("SIGINT", cleanUp);
+    process.on("SIGTERM", cleanUp);
+  } else {
+    if (buildResults.hasError) {
+      console.error("Stencil build error:", buildResults.diagnostics);
+      throw new Error("Stencil build error");
+    } else {
+      await handleStencilBuildOutput(ctx);
+    }
+    await compiler.destroy();
+  }
 
-  await compiler.build();
+  process.chdir(ctx.client.rootDir);
+}
+
+async function handleStencilBuildOutput(ctx: any) {
   const entryFilePath = path.resolve(
     ctx.client.stencilBuild,
     "embeddable-wrapper.esm.js",
@@ -149,9 +182,6 @@ async function runStencil(ctx: any) {
     entryFilePath,
     path.resolve(ctx.client.stencilBuild, fileName),
   );
-
-  await compiler.destroy();
-  process.chdir(ctx.client.rootDir);
 }
 
 async function generateSourceMap(ctx: any, pluginName: string) {