@embeddable.com/sdk-react 4.0.10 → 4.1.0-next.0

package/lib/index.esm.js

@@ -13,7 +13,7 @@ import 'node:child_process';
 import * as crypto from 'node:crypto';
 import { z } from 'zod';
 import { parse } from '@babel/parser';
-import traverse from '@babel/traverse';
+import traverseModule from '@babel/traverse';
 import * as fs$1 from 'fs';
 import { existsSync } from 'node:fs';
 import dts from 'vite-plugin-dts';
@@ -464,6 +464,7 @@ const getComponentLibraryConfig = (componentLibrary) => {
 };
 const EXTERNAL_LIBRARY_META_FILE_NAME = "embeddable-components.json";
 const getComponentLibraryMeta = async (ctx, componentLibrary) => {
+    var _a;
     const { libraryName, include, exclude } = getComponentLibraryConfig(componentLibrary);
     const libraryMeta = (await loadJson(getLibraryPath(ctx, libraryName, EXTERNAL_LIBRARY_META_FILE_NAME)));
     const filterItems = (items) => {
@@ -477,6 +478,7 @@ const getComponentLibraryMeta = async (ctx, componentLibrary) => {
         ...libraryMeta,
         components: filterItems(libraryMeta.components),
         editors: filterItems(libraryMeta.editors),
+        previews: filterItems((_a = libraryMeta.previews) !== null && _a !== void 0 ? _a : []),
     };
 };
 const getLibraryPath = (ctx, libraryName, fileName) => path.resolve(ctx.client.rootDir, "node_modules", libraryName, "dist", fileName);
@@ -836,7 +838,7 @@ const componentMetaSchema = z
 });
 
 // @ts-ignore
-const babelTraverse = traverse.default;
+const babelTraverse = traverseModule.default;
 const parseAndTraverse = (code, visitor) => {
     const ast = parse(code || "", {
         sourceType: "module",
@@ -1301,17 +1303,59 @@ const validateComponentDuplicates = (filesList, additionalComponents, ora) => {
     return errors;
 };
 
+const traverse = 
+// @ts-ignore
+typeof traverseModule === "function" ? traverseModule : traverseModule.default;
+function findFilesWithPreviewExport(files) {
+    const result = [];
+    for (const [name, filePath] of files) {
+        let ast;
+        try {
+            const code = fs$1.readFileSync(filePath, "utf-8");
+            ast = parse(code, {
+                sourceType: "module",
+                plugins: ["typescript", "jsx"],
+            });
+        }
+        catch (err) {
+            console.warn(`⚠️ Failed to parse ${filePath}: ${err.message}`);
+            continue;
+        }
+        let hasPreviewExport = false;
+        traverse(ast, {
+            ExportNamedDeclaration(path) {
+                var _a, _b;
+                const { node } = path;
+                if (((_a = node.declaration) === null || _a === void 0 ? void 0 : _a.type) === "VariableDeclaration") {
+                    if (node.declaration.declarations.some((d) => d.id.type === "Identifier" && d.id.name === "preview")) {
+                        hasPreviewExport = true;
+                    }
+                }
+                if ((_b = node.specifiers) === null || _b === void 0 ? void 0 : _b.some((s) => s.exported.type === "Identifier" && s.exported.name === "preview")) {
+                    hasPreviewExport = true;
+                }
+            },
+        });
+        if (hasPreviewExport) {
+            result.push([name, filePath]);
+        }
+    }
+    return result;
+}
+
 const EMB_FILE_REGEX = /^(.*)(?<!\.type|\.options)\.emb\.[jt]s$/;
 var generate = async (ctx) => {
     var _a;
     await usageValidator(ctx.client.srcDir);
     const filesList = await findFiles(ctx.client.srcDir, EMB_FILE_REGEX);
-    const additionalComponents = await getAdditionalComponents$1(ctx);
+    const { additionalComponents, additionalPreviews } = await getAdditionalComponents$1(ctx);
+    const previewComponents = findFilesWithPreviewExport(filesList);
     const errors = validateComponentDuplicates(filesList, additionalComponents, ora);
     if (errors.length) {
         process.exit(1);
     }
-    await prepareEntrypoint(ctx, filesList, additionalComponents);
+    ctx.client.componentsWithPreview = Object.values(additionalPreviews).flat().concat(previewComponents.map((c) => c[0]));
+    await prepareEntrypoint(ctx, filesList, additionalComponents, previewComponents, additionalPreviews);
     let result;
     if ((_a = ctx.dev) === null || _a === void 0 ? void 0 : _a.watch) {
         result = await runViteWatch(ctx);
@@ -1461,12 +1505,21 @@ function getRelativeFileNameForImport(ctx, fileName) {
         // but for imports it must be '.src/something/something'
         .replaceAll("\\", "/")}`;
 }
-async function prepareEntrypoint(ctx, filesList, additionalComponents) {
-    const additionalComponentsImports = getAdditionalEntryPointImports(additionalComponents);
+async function prepareEntrypoint(ctx, filesList, additionalComponents, previewComponents, additionalPreviews) {
+    const additionalComponentsImports = getAdditionalEntryPointImports(additionalComponents, additionalPreviews);
     const repositoryImports = filesList
         .map(([fileName, filePath]) => `\t${fileName}: React.lazy(() => import('${getRelativeFileNameForImport(ctx, filePath)}'))`)
         .join(",\n");
-    const imports = [additionalComponentsImports, repositoryImports]
+    const repositoryPreviewImports = previewComponents
+        .map(([fileName, filePath]) => `\t${fileName}_preview: React.lazy(() => import('${getRelativeFileNameForImport(ctx, filePath)}').then(module => ({
+        default: module.preview
+      })))`)
+        .join(",\n");
+    const imports = [
+        additionalComponentsImports,
+        repositoryImports,
+        repositoryPreviewImports,
+    ]
         .filter(Boolean)
         .join(",\n");
     let errorBoundaryImport = "";
@@ -1531,8 +1584,9 @@ const findExternalComponents = async (ctx) => {
 const getAdditionalComponents$1 = async (ctx) => {
     const componentLibraries = ctx.client.componentLibraries || [];
     let additionalComponents = {};
+    let additionalPreviews = {};
     for (const componentLibrary of componentLibraries) {
-        const { libraryName} = getComponentLibraryConfig(componentLibrary);
+        const { libraryName } = getComponentLibraryConfig(componentLibrary);
         try {
             const libMeta = await getComponentLibraryMeta(ctx, componentLibrary);
             if (libMeta.plugin !== "react") {
@@ -1542,23 +1596,30 @@ const getAdditionalComponents$1 = async (ctx) => {
                 ...libMeta.components,
                 ...libMeta.editors,
             ];
+            additionalPreviews[libraryName] = libMeta.previews || [];
         }
         catch (e) {
             console.error(`Can't load component library: ${libraryName}`, e);
             throw e;
         }
     }
-    return additionalComponents;
+    return { additionalComponents, additionalPreviews };
 };
-const getAdditionalEntryPointImports = (additionalComponents) => {
-    return Object.entries(additionalComponents)
-        .map(([library, components]) => {
-        return components
-            .map((component) => {
-            return `\t${component}: React.lazy(() => import('${library}/dist/${component}'))`;
-        })
-            .join(",\n");
-    })
+const getAdditionalEntryPointImports = (additionalComponents, additionalPreviews) => {
+    const componentImports = Object.entries(additionalComponents)
+        .map(([library, components]) => components
+        .map((component) => `\t${component}: React.lazy(() => import('${library}/dist/${component}'))`)
+        .join(",\n"))
+        .join(",\n");
+    const previewImports = Object.entries(additionalPreviews)
+        .map(([library, previews]) => previews
+        .map((preview) => `\t${preview}_preview: React.lazy(() => import('${library}/dist/${preview}').then(module => ({
+        default: module.preview
+      })))`)
+        .join(",\n"))
+        .join(",\n");
+    return [componentImports, previewImports]
+        .filter(Boolean)
         .join(",\n");
 };
 
@@ -1585,6 +1646,7 @@ async function buildPackage$1(ctx) {
         : undefined;
     const componentFiles = {};
     const editorFiles = {};
+    const previewComponents = [];
     if (indexFiles.length > 0) {
         inputEntries["index"] = indexFiles[0];
     }
@@ -1619,6 +1681,7 @@ async function buildPackage$1(ctx) {
                     const libMeta = {
                         components: Object.keys(componentFiles).concat(additionalComponents.components),
                         editors: Object.keys(editorFiles).concat(additionalComponents.editors),
+                        previews: previewComponents.concat(additionalComponents.previews),
                         plugin: "react",
                     };
                     const jsonContent = JSON.stringify(libMeta, null, 2);
@@ -1629,7 +1692,7 @@ async function buildPackage$1(ctx) {
                     });
                 },
             },
-            groupComponents(componentFiles, editorFiles),
+            groupComponents(componentFiles, editorFiles, previewComponents),
         ],
         build: {
             sourcemap: true,
@@ -1650,7 +1713,7 @@ async function buildPackage$1(ctx) {
     });
     progress.succeed("Building React library completed");
 }
-const groupComponents = (components, editors) => ({
+const groupComponents = (components, editors, previewComponents) => ({
     name: "group-components",
     moduleParsed(moduleInfo) {
         if (!moduleInfo ||
@@ -1660,13 +1723,14 @@ const groupComponents = (components, editors) => ({
             return;
         try {
             moduleInfo.ast.body.forEach((node) => {
+                var _a, _b;
+                const isTs = moduleInfo.id.endsWith(".ts");
+                const basename = path.basename(moduleInfo.id, `.emb.${isTs ? "ts" : "js"}`);
                 if (node.type === "ExportDefaultDeclaration") {
                     const calleeName = node.declaration.type === "CallExpression" &&
                         node.declaration.callee.type === "Identifier"
                         ? node.declaration.callee.name
                         : null;
-                    const isTs = moduleInfo.id.endsWith(".ts");
-                    const basename = path.basename(moduleInfo.id, `.emb.${isTs ? "ts" : "js"}`);
                     if (calleeName === "defineComponent") {
                         components[basename] = moduleInfo.id;
                     }
@@ -1674,6 +1738,17 @@ const groupComponents = (components, editors) => ({
                         editors[basename] = moduleInfo.id;
                     }
                 }
+                if (node.type === "ExportNamedDeclaration") {
+                    if (((_a = node.declaration) === null || _a === void 0 ? void 0 : _a.type) === "VariableDeclaration") {
+                        if (node.declaration.declarations.some((d) => d.id.type === "Identifier" && d.id.name === "preview")) {
+                            previewComponents.push(basename);
+                        }
+                    }
+                    if ((_b = node.specifiers) === null || _b === void 0 ? void 0 : _b.some((s) => s.exported.type === "Identifier" &&
+                        s.exported.name === "preview")) {
+                        previewComponents.push(basename);
+                    }
+                }
             });
         }
         catch (error) {
@@ -1718,6 +1793,7 @@ const getAdditionalComponents = async (ctx) => {
     const allAdditionalComponents = {};
     const components = [];
     const editors = [];
+    const previews = [];
     for (const componentLibrary of componentLibraries) {
         const { libraryName } = getComponentLibraryConfig(componentLibrary);
         try {
@@ -1730,14 +1806,14 @@ const getAdditionalComponents = async (ctx) => {
                 ...libMeta.editors,
             ];
             components.push(...libMeta.components);
-            editors.push(...libMeta.editors);
+            previews.push(...libMeta.previews);
         }
         catch (e) {
             console.error(`Can't load component library: ${libraryName}`, e);
             throw e;
         }
     }
-    return { components, editors, allAdditionalComponents };
+    return { components, editors, previews, allAdditionalComponents };
 };
 
 var build = async (ctx) => {