@embeddable.com/sdk-core 4.0.2-next.0 → 4.0.2

package/lib/defineConfig.d.ts

@@ -51,6 +51,7 @@ export type ResolvedEmbeddableConfig = {
         buildDir: string;
         tmpDir: string;
         customCanvasCss: string;
+        webComponentRoot: string;
         componentDir: string;
         stencilBuild: string;
         archiveFile: string;
@@ -221,6 +222,7 @@ declare const _default: (config: EmbeddableConfig) => {
         buildDir: string;
         tmpDir: string;
         customCanvasCss: string;
+        webComponentRoot: string;
         componentDir: string;
         stencilBuild: string;
         archiveFile: string;

package/lib/index.esm.js

@@ -650,10 +650,12 @@ async function removeIfExists(ctx) {
     await Promise.all(promises);
 }
 async function copyStencilConfigsToClient(ctx) {
-    await fs.cp(ctx.core.configsDir, ctx.client.buildDir, { recursive: true });
+    await fs.cp(ctx.core.configsDir, ctx.client.webComponentRoot, {
+        recursive: true,
+    });
 }
 async function createComponentDir(dir) {
-    await fs.mkdir(dir);
+    await fs.mkdir(dir, { recursive: true });
 }
 
 const STYLE_IMPORTS_TOKEN = "{{STYLES_IMPORT}}";
@@ -671,7 +673,7 @@ async function injectCSS(ctx, pluginName) {
     const allFiles = await fs.readdir(CUSTOMER_BUILD);
     const imports = allFiles
         .filter((fileName) => fileName.endsWith(".css"))
-        .map((fileName) => `@import '../${ctx[pluginName].outputOptions.buildName}/${fileName}';`);
+        .map((fileName) => `@import '../../${ctx[pluginName].outputOptions.buildName}/${fileName}';`);
     const componentLibraries = ctx.client.componentLibraries;
     for (const componentLibrary of componentLibraries) {
         const { libraryName } = getComponentLibraryConfig(componentLibrary);
@@ -686,7 +688,7 @@ async function injectCSS(ctx, pluginName) {
 }
 async function injectBundleRender(ctx, pluginName) {
     var _a;
-    const importStr = `import render from '../${ctx[pluginName].outputOptions.buildName}/${ctx[pluginName].outputOptions.fileName}';`;
+    const importStr = `import render from '../../${ctx[pluginName].outputOptions.buildName}/${ctx[pluginName].outputOptions.fileName}';`;
     let content = await fs.readFile(path$1.resolve(ctx.core.templatesDir, "component.tsx.template"), "utf8");
     if (!!((_a = ctx.dev) === null || _a === void 0 ? void 0 : _a.watch)) {
         content = content.replace(COMPONENT_TAG_TOKEN, "embeddable-component");
@@ -724,22 +726,20 @@ async function runStencil(ctx) {
         config: {
             devMode,
             maxConcurrentWorkers: isWindows ? 0 : 8, // workers break on windows
-            rootDir: ctx.client.buildDir,
-            configPath: path$1.resolve(ctx.client.buildDir, "stencil.config.ts"),
-            tsconfig: path$1.resolve(ctx.client.buildDir, "tsconfig.json"),
+            rootDir: ctx.client.webComponentRoot,
+            configPath: path$1.resolve(ctx.client.webComponentRoot, "stencil.config.ts"),
+            tsconfig: path$1.resolve(ctx.client.webComponentRoot, "tsconfig.json"),
             namespace: "embeddable-wrapper",
-            srcDir: path$1.resolve(ctx.client.buildDir, "component"),
+            srcDir: ctx.client.componentDir,
             sourceMap: true, // always generate source maps in both dev and prod
             minifyJs: !devMode,
             minifyCss: !devMode,
             outputTargets: [
                 {
                     type: "dist",
+                    buildDir: path$1.resolve(ctx.client.buildDir, "dist"),
                 },
             ],
-            watchDirs: [
-                path$1.resolve(ctx.client.buildDir, ctx["sdk-react"].outputOptions.buildName),
-            ],
         },
     });
     const compiler = await createCompiler(validated.config);
@@ -22156,7 +22156,8 @@ var dev = async () => {
             client: {
                 ...defaultConfig.client,
                 buildDir,
-                componentDir: path.resolve(buildDir, "component"),
+                webComponentRoot: path.resolve(buildDir, "web-component"),
+                componentDir: path.resolve(buildDir, "web-component", "component"),
                 stencilBuild: path.resolve(buildDir, "dist", "embeddable-wrapper"),
                 tmpDir: path.resolve(defaultConfig.client.rootDir, ".embeddable-dev-tmp"),
             },
@@ -22397,7 +22398,7 @@ const sendBuildChanges = async (ctx) => {
         await sendBuild(ctx, { workspaceId: previewWorkspace, token });
     }
     catch (e) {
-        sending.fail(`Data models and/or security context synchronization failed with error: ${(_d = (_c = (_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.errorMessage) !== null && _c !== void 0 ? _c : e.message) !== null && _d !== void 0 ? _d : 'Unknown error'}`);
+        sending.fail(`Data models and/or security context synchronization failed with error: ${(_d = (_c = (_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.errorMessage) !== null && _c !== void 0 ? _c : e.message) !== null && _d !== void 0 ? _d : "Unknown error"}`);
         return sendMessage("dataModelsAndOrSecurityContextUpdateError");
     }
     sending.succeed(`Data models and/or security context synchronized`);
@@ -22569,7 +22570,8 @@ var defineConfig = (config) => {
             buildDir: path$1.resolve(clientRoot, ".embeddable-build"),
             tmpDir: path$1.resolve(clientRoot, ".embeddable-tmp"),
             customCanvasCss: path$1.resolve(clientRoot, customCanvasCss),
-            componentDir: path$1.resolve(clientRoot, ".embeddable-build", "component"),
+            webComponentRoot: path$1.resolve(clientRoot, ".embeddable-build", "web-component"),
+            componentDir: path$1.resolve(clientRoot, ".embeddable-build", "web-component", "component"),
             stencilBuild: path$1.resolve(clientRoot, ".embeddable-build", "dist", "embeddable-wrapper"),
             archiveFile: path$1.resolve(clientRoot, "embeddable-build.zip"),
             errorFallbackComponent: errorFallbackComponent