@embeddable.com/sdk-core 4.3.0-next.0 → 4.3.0-next.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embeddable.com/sdk-core",
-  "version": "4.3.0-next.0",
+  "version": "4.3.0-next.1",
   "description": "Core Embeddable SDK module responsible for web-components bundling and publishing.",
   "keywords": [
     "embeddable",

package/src/generate.test.ts

@@ -1,6 +1,7 @@
 import generate, {
   resetForTesting, TRIGGER_BUILD_ITERATION_LIMIT,
-  triggerWebComponentRebuild, generateDTS
+  triggerWebComponentRebuild, generateDTS,
+  injectBundleRender, injectCSS,
 } from "./generate";
 import * as fs from "node:fs/promises";
 import * as path from "node:path";
@@ -67,6 +68,7 @@ vi.mock("node:path", async () => {
     ...actual,
     resolve: vi.fn(),
     join: vi.fn(),
+    relative: vi.fn(),
   };
 });
 
@@ -88,6 +90,7 @@ describe("generate", () => {
       "styles.css",
     ] as any);
     vi.mocked(path.resolve).mockImplementation((...args) => args.join("/"));
+    vi.mocked(path.relative).mockReturnValue("../buildDir/buildName");
     vi.mocked(fs.readFile).mockResolvedValue("");
     vi.mocked(loadConfig).mockResolvedValue({
       config: {},
@@ -316,9 +319,92 @@ describe("generateDTS", () => {
   });
 });
 
+describe("injectBundleRender cross-platform paths", () => {
+  const ctxWithFileName = {
+    ...config,
+    "sdk-react": {
+      ...config["sdk-react"],
+      outputOptions: {
+        buildName: "buildName",
+        fileName: "render.js",
+      },
+    },
+  };
+
+  beforeEach(() => {
+    vi.mocked(path.resolve).mockImplementation((...args) => args.join("/"));
+    vi.mocked(fs.readFile).mockResolvedValue("{{RENDER_IMPORT}}");
+  });
+
+  it("should use forward slashes in import when path.relative returns unix path", async () => {
+    vi.mocked(path.relative).mockReturnValue("../../buildDir/buildName");
+
+    await injectBundleRender(
+      ctxWithFileName as unknown as ResolvedEmbeddableConfig,
+      "sdk-react",
+    );
+
+    expect(fs.writeFile).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.stringContaining("import render from '../../buildDir/buildName/render.js'"),
+    );
+  });
+
+  it("should replace backslashes with forward slashes when path.relative returns windows path", async () => {
+    vi.mocked(path.relative).mockReturnValue("..\\..\\buildDir\\buildName");
+
+    await injectBundleRender(
+      ctxWithFileName as unknown as ResolvedEmbeddableConfig,
+      "sdk-react",
+    );
+
+    expect(fs.writeFile).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.stringContaining("import render from '../../buildDir/buildName/render.js'"),
+    );
+  });
+});
+
+describe("injectCSS cross-platform paths", () => {
+  beforeEach(() => {
+    vi.mocked(path.resolve).mockImplementation((...args) => args.join("/"));
+    vi.mocked(fs.readFile).mockResolvedValue("{{STYLES_IMPORT}}");
+    vi.mocked(fs.readdir).mockResolvedValue(["main.css"] as any);
+  });
+
+  it("should use forward slashes in @import when path.relative returns unix path", async () => {
+    vi.mocked(path.relative).mockReturnValue("../../buildDir/buildName");
+
+    await injectCSS(
+      config as unknown as ResolvedEmbeddableConfig,
+      "sdk-react",
+    );
+
+    expect(fs.writeFile).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.stringContaining("@import '../../buildDir/buildName/main.css'"),
+    );
+  });
+
+  it("should replace backslashes with forward slashes when path.relative returns windows path", async () => {
+    vi.mocked(path.relative).mockReturnValue("..\\..\\buildDir\\buildName");
+
+    await injectCSS(
+      config as unknown as ResolvedEmbeddableConfig,
+      "sdk-react",
+    );
+
+    expect(fs.writeFile).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.stringContaining("@import '../../buildDir/buildName/main.css'"),
+    );
+  });
+});
+
 describe("generate stencil build error", () => {
   beforeEach(() => {
     vi.mocked(path.resolve).mockImplementation((...args) => args.join("/"));
+    vi.mocked(path.relative).mockReturnValue("../buildDir/buildName");
     vi.mocked(fs.readFile).mockResolvedValue("");
     vi.mocked(fs.readdir).mockResolvedValue([] as any);
     vi.mocked(loadConfig).mockResolvedValue({ config: {} } as any);

package/src/generate.ts

@@ -108,7 +108,7 @@ export async function generateDTS(
   await runStencil(ctx, { dtsOnly: true });
 }
 
-async function injectCSS(
+export async function injectCSS(
   ctx: ResolvedEmbeddableConfig,
   pluginName: PluginName,
 ) {
@@ -118,10 +118,12 @@ async function injectCSS(
   );
   const allFiles = await fs.readdir(CUSTOMER_BUILD);
 
-  const importFilePath = path.relative(
-    ctx.client.componentDir,
-    path.resolve(ctx.client.buildDir, ctx[pluginName].outputOptions.buildName),
-  );
+  const importFilePath = path
+    .relative(
+      ctx.client.componentDir,
+      path.resolve(ctx.client.buildDir, ctx[pluginName].outputOptions.buildName),
+    )
+    .replaceAll("\\", "/");
 
   const imports = allFiles
     .filter((fileName) => fileName.endsWith(".css"))
@@ -153,14 +155,16 @@ async function injectCSS(
   );
 }
 
-async function injectBundleRender(
+export async function injectBundleRender(
   ctx: ResolvedEmbeddableConfig,
   pluginName: PluginName,
 ) {
-  const importFilePath = path.relative(
-    ctx.client.componentDir,
-    path.resolve(ctx.client.buildDir, ctx[pluginName].outputOptions.buildName),
-  );
+  const importFilePath = path
+    .relative(
+      ctx.client.componentDir,
+      path.resolve(ctx.client.buildDir, ctx[pluginName].outputOptions.buildName),
+    )
+    .replaceAll("\\", "/");
   const importStr = `import render from '${importFilePath}/${ctx[pluginName].outputOptions.fileName}';`;
 
   let content = await fs.readFile(