@embeddable.com/sdk-react 2.2.0 → 2.2.2

package/lib/{plugin.d.ts → extractComponentsConfigPlugin.d.ts}

@@ -1,10 +1,9 @@
 import { ModuleInfo } from "rollup";
-declare const _default: ({ globalKey, outputDir, fileName, componentFileRegex, typeFileRegex, searchEntry, }: {
+declare const _default: ({ globalKey, outputDir, fileName, componentFileRegex, searchEntry, }: {
     globalKey: string;
     outputDir: string;
     fileName: string;
     componentFileRegex: RegExp;
-    typeFileRegex: RegExp;
     searchEntry?: string | undefined;
 }) => {
     name: string;

package/lib/index.esm.js

@@ -10,6 +10,8 @@ import { parse } from '@babel/parser';
 import generator from '@babel/generator';
 import traverse from '@babel/traverse';
 import 'node:child_process';
+import { z } from 'zod';
+import { ALL_NATIVE_TYPES } from '@embeddable.com/core';
 
 var createContext = (pluginRoot, coreCtx) => {
     coreCtx["sdk-react"] = {
@@ -23,16 +25,42 @@ var createContext = (pluginRoot, coreCtx) => {
     };
 };
 
-/**
- * TODO: for some reason code from @embeddable.com/extract-components-config
- * is being cached. Thus we use this code duplication in place. Please investigate and fix.
- */
 // @ts-ignore
 const babelTraverse = traverse.default;
 // @ts-ignore
 const babelGenerate = generator.default;
 const CORE_TYPES_IMPORT_REGEX = /@embeddable\.com\/core$/;
-var extractComponentsConfigPlugin = ({ globalKey, outputDir, fileName, componentFileRegex, typeFileRegex, searchEntry = "", }) => {
+const EMB_TYPE_FILE_REGEX = /^(.*)\.type\.emb\.[jt]s$/;
+const loadComponentMeta = async (moduleId, code) => {
+    const ast = parse(code, {
+        sourceType: "module",
+    });
+    babelTraverse(ast, {
+        ImportDeclaration: (path) => {
+            const isNativeTypesImport = CORE_TYPES_IMPORT_REGEX.test(path.node.source.value);
+            const isCustomTypeImport = EMB_TYPE_FILE_REGEX.test(path.node.source.value);
+            if (!(isNativeTypesImport || isCustomTypeImport)) {
+                path.remove();
+            }
+        },
+        ExportDefaultDeclaration: (path) => {
+            path.remove();
+        },
+    });
+    const tempFilePath = moduleId
+        .replace(".emb.", ".emb-temp.")
+        .replace(/\.ts$/, ".js");
+    await fs.writeFile(tempFilePath, babelGenerate(ast).code);
+    const module = await import(tempFilePath);
+    await fs.rm(tempFilePath);
+    return module.meta;
+};
+
+/**
+ * TODO: for some reason code from @embeddable.com/extract-components-config
+ * is being cached. Thus we use this code duplication in place. Please investigate and fix.
+ */
+var extractComponentsConfigPlugin = ({ globalKey, outputDir, fileName, componentFileRegex, searchEntry = "", }) => {
     const configs = [];
     return {
         name: "extract-components-config",
@@ -40,32 +68,12 @@ var extractComponentsConfigPlugin = ({ globalKey, outputDir, fileName, component
             var _a;
             if (componentFileRegex.test(moduleInfo.id) &&
                 ((_a = moduleInfo.code) === null || _a === void 0 ? void 0 : _a.includes(searchEntry))) {
-                const ast = parse(moduleInfo.code, {
-                    sourceType: "module",
-                });
-                babelTraverse(ast, {
-                    ImportDeclaration: (path) => {
-                        const isNativeTypesImport = CORE_TYPES_IMPORT_REGEX.test(path.node.source.value);
-                        const isCustomTypeImport = typeFileRegex.test(path.node.source.value);
-                        if (!(isNativeTypesImport || isCustomTypeImport)) {
-                            path.remove();
-                        }
-                    },
-                    ExportDefaultDeclaration: (path) => {
-                        path.remove();
-                    },
-                });
-                const tempFilePath = moduleInfo.id
-                    .replace(".emb.", ".emb-temp.")
-                    .replace(/\.ts$/, ".js");
-                await fs.writeFile(tempFilePath, babelGenerate(ast).code);
-                const module = await import(tempFilePath);
-                const configJSON = JSON.stringify(module.meta, (_key, value) => typeof value === "object" &&
+                const meta = await loadComponentMeta(moduleInfo.id, moduleInfo.code);
+                const configJSON = JSON.stringify(meta, (_key, value) => typeof value === "object" &&
                     value !== null &&
                     "__embeddableType" in value
                     ? value.toString()
                     : value);
-                await fs.rm(tempFilePath);
                 configs.push(configJSON);
             }
         },
@@ -101,9 +109,511 @@ var findFiles = async (initialSrcDir, regex) => {
     return filesList;
 };
 
+var util;
+(function (util) {
+    util.assertEqual = (val) => val;
+    function assertIs(_arg) { }
+    util.assertIs = assertIs;
+    function assertNever(_x) {
+        throw new Error();
+    }
+    util.assertNever = assertNever;
+    util.arrayToEnum = (items) => {
+        const obj = {};
+        for (const item of items) {
+            obj[item] = item;
+        }
+        return obj;
+    };
+    util.getValidEnumValues = (obj) => {
+        const validKeys = util.objectKeys(obj).filter((k) => typeof obj[obj[k]] !== "number");
+        const filtered = {};
+        for (const k of validKeys) {
+            filtered[k] = obj[k];
+        }
+        return util.objectValues(filtered);
+    };
+    util.objectValues = (obj) => {
+        return util.objectKeys(obj).map(function (e) {
+            return obj[e];
+        });
+    };
+    util.objectKeys = typeof Object.keys === "function" // eslint-disable-line ban/ban
+        ? (obj) => Object.keys(obj) // eslint-disable-line ban/ban
+        : (object) => {
+            const keys = [];
+            for (const key in object) {
+                if (Object.prototype.hasOwnProperty.call(object, key)) {
+                    keys.push(key);
+                }
+            }
+            return keys;
+        };
+    util.find = (arr, checker) => {
+        for (const item of arr) {
+            if (checker(item))
+                return item;
+        }
+        return undefined;
+    };
+    util.isInteger = typeof Number.isInteger === "function"
+        ? (val) => Number.isInteger(val) // eslint-disable-line ban/ban
+        : (val) => typeof val === "number" && isFinite(val) && Math.floor(val) === val;
+    function joinValues(array, separator = " | ") {
+        return array
+            .map((val) => (typeof val === "string" ? `'${val}'` : val))
+            .join(separator);
+    }
+    util.joinValues = joinValues;
+    util.jsonStringifyReplacer = (_, value) => {
+        if (typeof value === "bigint") {
+            return value.toString();
+        }
+        return value;
+    };
+})(util || (util = {}));
+var objectUtil;
+(function (objectUtil) {
+    objectUtil.mergeShapes = (first, second) => {
+        return {
+            ...first,
+            ...second, // second overwrites first
+        };
+    };
+})(objectUtil || (objectUtil = {}));
+util.arrayToEnum([
+    "string",
+    "nan",
+    "number",
+    "integer",
+    "float",
+    "boolean",
+    "date",
+    "bigint",
+    "symbol",
+    "function",
+    "undefined",
+    "null",
+    "array",
+    "object",
+    "unknown",
+    "promise",
+    "void",
+    "never",
+    "map",
+    "set",
+]);
+
+const ZodIssueCode = util.arrayToEnum([
+    "invalid_type",
+    "invalid_literal",
+    "custom",
+    "invalid_union",
+    "invalid_union_discriminator",
+    "invalid_enum_value",
+    "unrecognized_keys",
+    "invalid_arguments",
+    "invalid_return_type",
+    "invalid_date",
+    "invalid_string",
+    "too_small",
+    "too_big",
+    "invalid_intersection_types",
+    "not_multiple_of",
+    "not_finite",
+]);
+class ZodError extends Error {
+    constructor(issues) {
+        super();
+        this.issues = [];
+        this.addIssue = (sub) => {
+            this.issues = [...this.issues, sub];
+        };
+        this.addIssues = (subs = []) => {
+            this.issues = [...this.issues, ...subs];
+        };
+        const actualProto = new.target.prototype;
+        if (Object.setPrototypeOf) {
+            // eslint-disable-next-line ban/ban
+            Object.setPrototypeOf(this, actualProto);
+        }
+        else {
+            this.__proto__ = actualProto;
+        }
+        this.name = "ZodError";
+        this.issues = issues;
+    }
+    get errors() {
+        return this.issues;
+    }
+    format(_mapper) {
+        const mapper = _mapper ||
+            function (issue) {
+                return issue.message;
+            };
+        const fieldErrors = { _errors: [] };
+        const processError = (error) => {
+            for (const issue of error.issues) {
+                if (issue.code === "invalid_union") {
+                    issue.unionErrors.map(processError);
+                }
+                else if (issue.code === "invalid_return_type") {
+                    processError(issue.returnTypeError);
+                }
+                else if (issue.code === "invalid_arguments") {
+                    processError(issue.argumentsError);
+                }
+                else if (issue.path.length === 0) {
+                    fieldErrors._errors.push(mapper(issue));
+                }
+                else {
+                    let curr = fieldErrors;
+                    let i = 0;
+                    while (i < issue.path.length) {
+                        const el = issue.path[i];
+                        const terminal = i === issue.path.length - 1;
+                        if (!terminal) {
+                            curr[el] = curr[el] || { _errors: [] };
+                            // if (typeof el === "string") {
+                            //   curr[el] = curr[el] || { _errors: [] };
+                            // } else if (typeof el === "number") {
+                            //   const errorArray: any = [];
+                            //   errorArray._errors = [];
+                            //   curr[el] = curr[el] || errorArray;
+                            // }
+                        }
+                        else {
+                            curr[el] = curr[el] || { _errors: [] };
+                            curr[el]._errors.push(mapper(issue));
+                        }
+                        curr = curr[el];
+                        i++;
+                    }
+                }
+            }
+        };
+        processError(this);
+        return fieldErrors;
+    }
+    toString() {
+        return this.message;
+    }
+    get message() {
+        return JSON.stringify(this.issues, util.jsonStringifyReplacer, 2);
+    }
+    get isEmpty() {
+        return this.issues.length === 0;
+    }
+    flatten(mapper = (issue) => issue.message) {
+        const fieldErrors = {};
+        const formErrors = [];
+        for (const sub of this.issues) {
+            if (sub.path.length > 0) {
+                fieldErrors[sub.path[0]] = fieldErrors[sub.path[0]] || [];
+                fieldErrors[sub.path[0]].push(mapper(sub));
+            }
+            else {
+                formErrors.push(mapper(sub));
+            }
+        }
+        return { formErrors, fieldErrors };
+    }
+    get formErrors() {
+        return this.flatten();
+    }
+}
+ZodError.create = (issues) => {
+    const error = new ZodError(issues);
+    return error;
+};
+
+var errorUtil;
+(function (errorUtil) {
+    errorUtil.errToObj = (message) => typeof message === "string" ? { message } : message || {};
+    errorUtil.toString = (message) => typeof message === "string" ? message : message === null || message === void 0 ? void 0 : message.message;
+})(errorUtil || (errorUtil = {}));
+var ZodFirstPartyTypeKind;
+(function (ZodFirstPartyTypeKind) {
+    ZodFirstPartyTypeKind["ZodString"] = "ZodString";
+    ZodFirstPartyTypeKind["ZodNumber"] = "ZodNumber";
+    ZodFirstPartyTypeKind["ZodNaN"] = "ZodNaN";
+    ZodFirstPartyTypeKind["ZodBigInt"] = "ZodBigInt";
+    ZodFirstPartyTypeKind["ZodBoolean"] = "ZodBoolean";
+    ZodFirstPartyTypeKind["ZodDate"] = "ZodDate";
+    ZodFirstPartyTypeKind["ZodSymbol"] = "ZodSymbol";
+    ZodFirstPartyTypeKind["ZodUndefined"] = "ZodUndefined";
+    ZodFirstPartyTypeKind["ZodNull"] = "ZodNull";
+    ZodFirstPartyTypeKind["ZodAny"] = "ZodAny";
+    ZodFirstPartyTypeKind["ZodUnknown"] = "ZodUnknown";
+    ZodFirstPartyTypeKind["ZodNever"] = "ZodNever";
+    ZodFirstPartyTypeKind["ZodVoid"] = "ZodVoid";
+    ZodFirstPartyTypeKind["ZodArray"] = "ZodArray";
+    ZodFirstPartyTypeKind["ZodObject"] = "ZodObject";
+    ZodFirstPartyTypeKind["ZodUnion"] = "ZodUnion";
+    ZodFirstPartyTypeKind["ZodDiscriminatedUnion"] = "ZodDiscriminatedUnion";
+    ZodFirstPartyTypeKind["ZodIntersection"] = "ZodIntersection";
+    ZodFirstPartyTypeKind["ZodTuple"] = "ZodTuple";
+    ZodFirstPartyTypeKind["ZodRecord"] = "ZodRecord";
+    ZodFirstPartyTypeKind["ZodMap"] = "ZodMap";
+    ZodFirstPartyTypeKind["ZodSet"] = "ZodSet";
+    ZodFirstPartyTypeKind["ZodFunction"] = "ZodFunction";
+    ZodFirstPartyTypeKind["ZodLazy"] = "ZodLazy";
+    ZodFirstPartyTypeKind["ZodLiteral"] = "ZodLiteral";
+    ZodFirstPartyTypeKind["ZodEnum"] = "ZodEnum";
+    ZodFirstPartyTypeKind["ZodEffects"] = "ZodEffects";
+    ZodFirstPartyTypeKind["ZodNativeEnum"] = "ZodNativeEnum";
+    ZodFirstPartyTypeKind["ZodOptional"] = "ZodOptional";
+    ZodFirstPartyTypeKind["ZodNullable"] = "ZodNullable";
+    ZodFirstPartyTypeKind["ZodDefault"] = "ZodDefault";
+    ZodFirstPartyTypeKind["ZodCatch"] = "ZodCatch";
+    ZodFirstPartyTypeKind["ZodPromise"] = "ZodPromise";
+    ZodFirstPartyTypeKind["ZodBranded"] = "ZodBranded";
+    ZodFirstPartyTypeKind["ZodPipeline"] = "ZodPipeline";
+    ZodFirstPartyTypeKind["ZodReadonly"] = "ZodReadonly";
+})(ZodFirstPartyTypeKind || (ZodFirstPartyTypeKind = {}));
+
+const errorFormatter = (issues) => {
+    const errors = [];
+    for (let issue of issues) {
+        if (issue.code === ZodIssueCode.invalid_union && issue.unionErrors.length) {
+            const error = issue.unionErrors[issue.unionErrors.length - 1];
+            issue = error.issues[error.issues.length - 1];
+        }
+        const path = formatErrorPath(issue.path);
+        const message = issue.message;
+        errors.push(`"${path}": ${message}`);
+    }
+    return errors;
+};
+const formatErrorPath = (path) => {
+    let formatted = "";
+    for (const pathElement of path) {
+        if (formatted.length === 0) {
+            formatted = `${pathElement}`;
+        }
+        else {
+            formatted +=
+                typeof pathElement === "number"
+                    ? `[${pathElement}]`
+                    : `.${pathElement}`;
+        }
+    }
+    return formatted;
+};
+
+const embeddableTypeSchema = z
+    .object({
+    typeConfig: z.object({
+        label: z.string(),
+        toString: z.function(),
+    }),
+})
+    .or(z.enum(ALL_NATIVE_TYPES));
+
+const editorMetaSchema = z
+    .object({
+    name: z.string(),
+    label: z.string(),
+    type: embeddableTypeSchema,
+})
+    .strict();
+
+const editorMetaValidator = (meta) => {
+    const result = editorMetaSchema.safeParse(meta);
+    if (result.success)
+        return [];
+    return errorFormatter(result.error.issues);
+};
+
+const componentMetaSchema = z
+    .object({
+    name: z.string(),
+    label: z.string(),
+    inputs: z
+        .object({
+        name: z.string(),
+        label: z.string(),
+        description: z.string().optional(),
+        defaultValue: z.any().optional(),
+        config: z.record(z.string(), z.any()).optional(),
+        type: embeddableTypeSchema,
+        array: z.boolean().optional(),
+    })
+        .strict()
+        .array()
+        .optional(),
+    events: z
+        .object({
+        name: z.string(),
+        label: z.string(),
+        properties: z
+            .object({
+            name: z.string(),
+            type: embeddableTypeSchema,
+            label: z.string().optional(),
+        })
+            .array()
+            .optional(),
+    })
+        .strict()
+        .array()
+        .optional(),
+    variables: z
+        .object({
+        name: z.string(),
+        type: embeddableTypeSchema,
+        defaultValue: z.any().optional(),
+        inputs: z.array(z.string()).optional(),
+        events: z
+            .array(z.object({
+            name: z.string(),
+            property: z.string(),
+        }))
+            .optional(),
+    })
+        .strict()
+        .array()
+        .optional(),
+})
+    .strict();
+
+const componentMetaValidator = (meta) => {
+    const result = componentMetaSchema.safeParse(meta);
+    if (!result.success)
+        return errorFormatter(result.error.issues);
+    return validateVariables(meta);
+};
+const validateVariables = (meta) => {
+    const variables = meta.variables;
+    if (!variables)
+        return [];
+    const errors = [];
+    // all inputs should be defined
+    errors.push(...validateVariableInputs(meta));
+    // all events and properties should be valid
+    errors.push(...validateVariableEvents(meta));
+    return errors;
+};
+const validateVariableInputs = (meta) => {
+    const variables = meta.variables;
+    const definedInputs = meta.inputs;
+    if (!variables)
+        return [];
+    const errors = [];
+    // all inputs should be defined
+    variables.forEach((variableConfig, idx) => {
+        const inputs = variableConfig.inputs;
+        if (inputs) {
+            inputs.forEach((input, inputIdx) => {
+                const definedInput = definedInputs === null || definedInputs === void 0 ? void 0 : definedInputs.find((d) => d.name === input);
+                if (!definedInput) {
+                    const path = formatErrorPath(["variables", idx, "inputs", inputIdx]);
+                    errors.push(`${path}: input "${input}" is not defined`);
+                }
+            });
+        }
+    });
+    return errors;
+};
+const validateVariableEvents = (meta) => {
+    const variables = meta.variables;
+    const definedEvents = meta.events;
+    if (!variables)
+        return [];
+    const errors = [];
+    variables.forEach((variableConfig, idx) => {
+        const events = variableConfig.events;
+        if (events) {
+            events.forEach((event, eventIdx) => {
+                const definedEvent = definedEvents === null || definedEvents === void 0 ? void 0 : definedEvents.find((d) => d.name === event.name);
+                if (!definedEvent) {
+                    const path = formatErrorPath([
+                        "variables",
+                        idx,
+                        "events",
+                        eventIdx,
+                        "name",
+                    ]);
+                    errors.push(`${path}: event "${event.name}" is not defined`);
+                    return;
+                }
+                const definedProperties = definedEvent.properties;
+                const definedProperty = definedProperties === null || definedProperties === void 0 ? void 0 : definedProperties.find((p) => p.name === event.property);
+                if (!definedProperty) {
+                    const path = formatErrorPath([
+                        "variables",
+                        idx,
+                        "events",
+                        eventIdx,
+                        "property",
+                    ]);
+                    errors.push(`${path}: property "${event.property}" is not defined`);
+                    return;
+                }
+                if (definedProperty.type !== variableConfig.type) {
+                    const path = formatErrorPath(["variables", idx]);
+                    errors.push(`${path}: the type of the variable "${variableConfig.name}" and the type of the property "${event.property}" do not match`);
+                }
+            });
+        }
+    });
+    return errors;
+};
+
+const EDITOR = "editor";
+const COMPONENT = "component";
+const validators = {
+    [EDITOR]: editorMetaValidator,
+    [COMPONENT]: componentMetaValidator,
+};
+const getModuleType = (moduleInfo) => {
+    var _a, _b;
+    if ((_a = moduleInfo.code) === null || _a === void 0 ? void 0 : _a.includes("defineComponent")) {
+        return COMPONENT;
+    }
+    else if ((_b = moduleInfo.code) === null || _b === void 0 ? void 0 : _b.includes("defineEditor")) {
+        return EDITOR;
+    }
+    else {
+        return null;
+    }
+};
+var validateComponentMetaPlugin = (componentFileRegex) => {
+    const metaConfigs = [];
+    return {
+        name: "validate-component-meta",
+        moduleParsed: async (moduleInfo) => {
+            const moduleType = componentFileRegex.test(moduleInfo.id)
+                ? getModuleType(moduleInfo)
+                : null;
+            if (moduleType) {
+                const meta = await loadComponentMeta(moduleInfo.id, moduleInfo.code);
+                metaConfigs.push({
+                    moduleId: moduleInfo.id,
+                    meta,
+                    moduleType,
+                });
+            }
+        },
+        buildEnd: function () {
+            const errors = [];
+            for (const metaConfig of metaConfigs) {
+                const validator = validators[metaConfig.moduleType];
+                const validationResult = validator(metaConfig.meta);
+                if (validationResult && validationResult.length) {
+                    errors.push(`\nComponent meta is not valid ${metaConfig.moduleId}:\n${validationResult.join("\n")}`);
+                }
+            }
+            if (errors.length) {
+                // @ts-ignore
+                this.error(errors.join("\n"));
+            }
+        },
+    };
+};
+
 const oraP = import('ora');
 const EMB_FILE_REGEX = /^(.*)(?<!\.type|\.options)\.emb\.[jt]s$/;
-const EMB_TYPE_FILE_REGEX = /^(.*)\.type\.emb\.[jt]s$/;
 var generate = async (ctx) => {
     const ora = (await oraP).default;
     const progress = ora("React: building components...").start();
@@ -123,7 +633,6 @@ async function runViteBuild(ctx) {
                 fileName: "embeddable-components-meta.js",
                 outputDir: ".embeddable-build",
                 componentFileRegex: EMB_FILE_REGEX,
-                typeFileRegex: EMB_TYPE_FILE_REGEX,
                 searchEntry: "defineComponent",
             }),
             extractComponentsConfigPlugin({
@@ -131,9 +640,9 @@ async function runViteBuild(ctx) {
                 fileName: "embeddable-editors-meta.js",
                 outputDir: ".embeddable-build",
                 componentFileRegex: EMB_FILE_REGEX,
-                typeFileRegex: EMB_TYPE_FILE_REGEX,
                 searchEntry: "defineEditor",
             }),
+            validateComponentMetaPlugin(EMB_FILE_REGEX),
         ],
         build: {
             sourcemap: true,