@embeddable.com/sdk-react 0.0.6 → 0.0.8

package/.turbo/turbo-build.log

@@ -1,15 +1,15 @@
 
-> @embeddable-sdk/react@0.0.1 build
+> @embeddable.com/sdk-react@0.0.8 build
 > rollup -c
 
-(node:41139) ExperimentalWarning: Import assertions are not a stable feature of the JavaScript language. Avoid relying on their current behavior and syntax as those might change in a future version of Node.js.
+(node:1832) ExperimentalWarning: Import assertions are not a stable feature of the JavaScript language. Avoid relying on their current behavior and syntax as those might change in a future version of Node.js.
 (Use `node --trace-warnings ...` to show where the warning was created)
-(node:41139) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:1832) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 
 ./src/index.ts → lib/index.umd.js...
 (!) Plugin typescript: @rollup/plugin-typescript: Rollup 'sourcemap' option must be set to generate source maps.
-created lib/index.umd.js in 732ms
+created lib/index.umd.js in 2.3s
 
 ./src/index.ts → lib/index.cjs.js, lib/index.esm.js...
 (!) Plugin typescript: @rollup/plugin-typescript: Rollup 'sourcemap' option must be set to generate source maps.
-created lib/index.cjs.js, lib/index.esm.js in 366ms
+created lib/index.cjs.js, lib/index.esm.js in 1.2s

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @embeddable.com/sdk-react
 
+## 0.0.8
+
+### Patch Changes
+
+- ce832b1: Add package description and keywords.
+- Updated dependencies [ce832b1]
+  - @embeddable.com/sdk-core@0.0.3
+
+## 0.0.7
+
+### Patch Changes
+
+- 8a627a6: Adjust cli messages.
+
 ## 0.0.6
 
 ### Patch Changes

package/lib/embedEditor.d.ts

@@ -1,14 +1,18 @@
 import * as React from 'react';
 export type Config<T> = {
-    initialState: T;
     inputs: any;
-    events: Record<string, EmbeddableEvent<T>>;
+    events: Record<string, EmbeddableEventHandler<T>>;
+};
+export type EmbeddableEventHandler<T> = (value: T, setter: Setter<T>) => void;
+export type EmbeddableEvent<T> = {
+    editorId: string;
+    value: T;
 };
-export type EmbeddableEvent<T> = (value: T, setter: Setter<T>) => void;
 type Setter<T> = (value: T) => void;
 export declare function embedEditor<T>(InnerComponent: React.ComponentType, config: Config<T>): {
-    ({ editorId }: {
+    ({ editorId, initialValue }: {
         editorId: any;
+        initialValue: any;
     }): React.JSX.Element;
     displayName: string;
 };

package/lib/index.cjs.js

@@ -66,7 +66,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var EVENT_NAME = 'embeddable-event:update-props';
+var EVENT_NAME$1 = 'embeddable-event:update-props';
 function embedComponent(InnerComponent, config) {
     var _a;
     function EmbeddableWrapper(_a) {
@@ -77,8 +77,8 @@ function embedComponent(InnerComponent, config) {
             return setProps(detail);
         };
         React__namespace.useEffect(function () {
-            propsUpdateListener.addEventListener(EVENT_NAME, propsUpdateEventHandler);
-            return function () { return propsUpdateListener.removeEventListener(EVENT_NAME, propsUpdateEventHandler); };
+            propsUpdateListener.addEventListener(EVENT_NAME$1, propsUpdateEventHandler);
+            return function () { return propsUpdateListener.removeEventListener(EVENT_NAME$1, propsUpdateEventHandler); };
         }, []);
         var extendedProps = React__namespace.useMemo(function () { var _a; return (_a = config === null || config === void 0 ? void 0 : config.extendedProps) === null || _a === void 0 ? void 0 : _a.call(config, propsProxy); }, [propsProxy, config === null || config === void 0 ? void 0 : config.extendedProps]);
         return React__namespace.createElement(InnerComponent, __assign({}, propsProxy, extendedProps));
@@ -87,15 +87,19 @@ function embedComponent(InnerComponent, config) {
     return EmbeddableWrapper;
 }
 
+var EVENT_NAME = "embeddable:editor:changed";
 function embedEditor(InnerComponent, config) {
     var _a;
     function EmbeddableWrapper(_a) {
-        var editorId = _a.editorId;
-        var _b = React__namespace.useState(config.initialState), componentState = _b[0], setComponentState = _b[1];
-        var createEvent = function (value, eventName) {
-            var event = new CustomEvent("".concat(editorId, ":").concat(eventName), {
+        var editorId = _a.editorId, initialValue = _a.initialValue;
+        var _b = React__namespace.useState(initialValue), componentState = _b[0], setComponentState = _b[1];
+        var createEvent = function (value) {
+            var event = new CustomEvent(EVENT_NAME, {
                 bubbles: false,
-                detail: value,
+                detail: {
+                    editorId: editorId,
+                    value: value
+                },
             });
             window.dispatchEvent(event);
         };
@@ -106,14 +110,14 @@ function embedEditor(InnerComponent, config) {
                 var eventFunction_1 = events[event_1];
                 eventProps[event_1] = function (value) {
                     eventFunction_1(value, setComponentState);
-                    createEvent(value, event_1);
+                    createEvent(value);
                 };
             }
         };
         for (var event_1 in events) {
             _loop_1(event_1);
         }
-        return React__namespace.createElement(InnerComponent, __assign({}, eventProps, { state: componentState }, config.inputs));
+        return React__namespace.createElement(InnerComponent, __assign({}, eventProps, config.inputs(componentState)));
     }
     EmbeddableWrapper.displayName = "embedded(".concat((_a = InnerComponent.displayName) !== null && _a !== void 0 ? _a : 'Editor', ")");
     return EmbeddableWrapper;

package/lib/index.esm.js

@@ -45,7 +45,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var EVENT_NAME = 'embeddable-event:update-props';
+var EVENT_NAME$1 = 'embeddable-event:update-props';
 function embedComponent(InnerComponent, config) {
     var _a;
     function EmbeddableWrapper(_a) {
@@ -56,8 +56,8 @@ function embedComponent(InnerComponent, config) {
             return setProps(detail);
         };
         React.useEffect(function () {
-            propsUpdateListener.addEventListener(EVENT_NAME, propsUpdateEventHandler);
-            return function () { return propsUpdateListener.removeEventListener(EVENT_NAME, propsUpdateEventHandler); };
+            propsUpdateListener.addEventListener(EVENT_NAME$1, propsUpdateEventHandler);
+            return function () { return propsUpdateListener.removeEventListener(EVENT_NAME$1, propsUpdateEventHandler); };
         }, []);
         var extendedProps = React.useMemo(function () { var _a; return (_a = config === null || config === void 0 ? void 0 : config.extendedProps) === null || _a === void 0 ? void 0 : _a.call(config, propsProxy); }, [propsProxy, config === null || config === void 0 ? void 0 : config.extendedProps]);
         return React.createElement(InnerComponent, __assign({}, propsProxy, extendedProps));
@@ -66,15 +66,19 @@ function embedComponent(InnerComponent, config) {
     return EmbeddableWrapper;
 }
 
+var EVENT_NAME = "embeddable:editor:changed";
 function embedEditor(InnerComponent, config) {
     var _a;
     function EmbeddableWrapper(_a) {
-        var editorId = _a.editorId;
-        var _b = React.useState(config.initialState), componentState = _b[0], setComponentState = _b[1];
-        var createEvent = function (value, eventName) {
-            var event = new CustomEvent("".concat(editorId, ":").concat(eventName), {
+        var editorId = _a.editorId, initialValue = _a.initialValue;
+        var _b = React.useState(initialValue), componentState = _b[0], setComponentState = _b[1];
+        var createEvent = function (value) {
+            var event = new CustomEvent(EVENT_NAME, {
                 bubbles: false,
-                detail: value,
+                detail: {
+                    editorId: editorId,
+                    value: value
+                },
             });
             window.dispatchEvent(event);
         };
@@ -85,14 +89,14 @@ function embedEditor(InnerComponent, config) {
                 var eventFunction_1 = events[event_1];
                 eventProps[event_1] = function (value) {
                     eventFunction_1(value, setComponentState);
-                    createEvent(value, event_1);
+                    createEvent(value);
                 };
             }
         };
         for (var event_1 in events) {
             _loop_1(event_1);
         }
-        return React.createElement(InnerComponent, __assign({}, eventProps, { state: componentState }, config.inputs));
+        return React.createElement(InnerComponent, __assign({}, eventProps, config.inputs(componentState)));
     }
     EmbeddableWrapper.displayName = "embedded(".concat((_a = InnerComponent.displayName) !== null && _a !== void 0 ? _a : 'Editor', ")");
     return EmbeddableWrapper;

package/lib/index.umd.js

@@ -86,7 +86,7 @@
 
     var reactExports = react.exports;
 
-    var EVENT_NAME = 'embeddable-event:update-props';
+    var EVENT_NAME$1 = 'embeddable-event:update-props';
     function embedComponent(InnerComponent, config) {
         var _a;
         function EmbeddableWrapper(_a) {
@@ -97,8 +97,8 @@
                 return setProps(detail);
             };
             reactExports.useEffect(function () {
-                propsUpdateListener.addEventListener(EVENT_NAME, propsUpdateEventHandler);
-                return function () { return propsUpdateListener.removeEventListener(EVENT_NAME, propsUpdateEventHandler); };
+                propsUpdateListener.addEventListener(EVENT_NAME$1, propsUpdateEventHandler);
+                return function () { return propsUpdateListener.removeEventListener(EVENT_NAME$1, propsUpdateEventHandler); };
             }, []);
             var extendedProps = reactExports.useMemo(function () { var _a; return (_a = config === null || config === void 0 ? void 0 : config.extendedProps) === null || _a === void 0 ? void 0 : _a.call(config, propsProxy); }, [propsProxy, config === null || config === void 0 ? void 0 : config.extendedProps]);
             return reactExports.createElement(InnerComponent, __assign({}, propsProxy, extendedProps));
@@ -107,15 +107,19 @@
         return EmbeddableWrapper;
     }
 
+    var EVENT_NAME = "embeddable:editor:changed";
     function embedEditor(InnerComponent, config) {
         var _a;
         function EmbeddableWrapper(_a) {
-            var editorId = _a.editorId;
-            var _b = reactExports.useState(config.initialState), componentState = _b[0], setComponentState = _b[1];
-            var createEvent = function (value, eventName) {
-                var event = new CustomEvent("".concat(editorId, ":").concat(eventName), {
+            var editorId = _a.editorId, initialValue = _a.initialValue;
+            var _b = reactExports.useState(initialValue), componentState = _b[0], setComponentState = _b[1];
+            var createEvent = function (value) {
+                var event = new CustomEvent(EVENT_NAME, {
                     bubbles: false,
-                    detail: value,
+                    detail: {
+                        editorId: editorId,
+                        value: value
+                    },
                 });
                 window.dispatchEvent(event);
             };
@@ -126,14 +130,14 @@
                     var eventFunction_1 = events[event_1];
                     eventProps[event_1] = function (value) {
                         eventFunction_1(value, setComponentState);
-                        createEvent(value, event_1);
+                        createEvent(value);
                     };
                 }
             };
             for (var event_1 in events) {
                 _loop_1(event_1);
             }
-            return reactExports.createElement(InnerComponent, __assign({}, eventProps, { state: componentState }, config.inputs));
+            return reactExports.createElement(InnerComponent, __assign({}, eventProps, config.inputs(componentState)));
         }
         EmbeddableWrapper.displayName = "embedded(".concat((_a = InnerComponent.displayName) !== null && _a !== void 0 ? _a : 'Editor', ")");
         return EmbeddableWrapper;

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "@embeddable.com/sdk-react",
-  "version": "0.0.6",
-  "description": "TODO.",
+  "version": "0.0.8",
+  "description": "Embeddable SDK React plugin/module responsible for React components bundling.",
+  "keywords": [
+    "embeddable",
+    "sdk",
+    "react"
+  ],
   "main": "lib/index.cjs.js",
   "module": "lib/index.esm.js",
   "browser": "lib/index.umd.js",

package/scripts/build.js

@@ -11,21 +11,21 @@ const generateFork = fork(path.resolve(__dirname, 'generate.js'), [], { silent:
 async function build() {
     const ora = (await oraP).default; // TODO: migrate cli to modules/ts and bundle.
 
-    const spinnerPrepare = ora("preparation").start();
+    const spinnerPrepare = ora("preparing...").start();
 
     const ctx = createContext(path.resolve(__dirname, '..'), process.cwd());
 
     await validationEmulation();
     await prepare(ctx);
-    spinnerPrepare.succeed();
+    spinnerPrepare.succeed("preparation competed");
 
-    const spinnerBuild = ora("build").start();
+    const spinnerBuild = ora("building...").start();
 
     generateFork.send({ ctx });
 
     generateFork.on('exit', async () => {
         await cleanup(ctx);
-        spinnerBuild.succeed();
+        spinnerBuild.succeed("build completed");
     })
 
 }

package/src/embedEditor.tsx

@@ -1,26 +1,35 @@
 import * as React from 'react';
 
 export type Config<T> = {
-  initialState: T
   inputs: any;
-  events: Record<string, EmbeddableEvent<T>>
+  events: Record<string, EmbeddableEventHandler<T>>
 };
 
-export type EmbeddableEvent<T> = (value: T, setter: Setter<T>) => void;
+export type EmbeddableEventHandler<T> = (value: T, setter: Setter<T>) => void;
+
+export type EmbeddableEvent<T> = {
+  editorId: string;
+  value: T;
+}
 
 type Setter<T> = (value: T) => void;
 
+const EVENT_NAME = "embeddable:editor:changed";
+
 export function embedEditor<T>(InnerComponent: React.ComponentType, config: Config<T>) {
 
-  function EmbeddableWrapper({editorId}) {
+  function EmbeddableWrapper({editorId, initialValue}) {
 
-    const [componentState, setComponentState] = React.useState(config.initialState);
+    const [componentState, setComponentState] = React.useState(initialValue);
 
-    const createEvent = (value: T, eventName) => {
+    const createEvent = (value: T) => {
 
-      const event = new CustomEvent(`${editorId}:${eventName}`, {
+      const event = new CustomEvent<EmbeddableEvent<T>>(EVENT_NAME, {
         bubbles: false,
-        detail: value,
+        detail: {
+          editorId,
+          value
+        },
       });
       window.dispatchEvent(event);
     }
@@ -33,12 +42,12 @@ export function embedEditor<T>(InnerComponent: React.ComponentType, config: Conf
         let eventFunction = events[event];
         eventProps[event] = (value: T) => {
           eventFunction(value, setComponentState)
-          createEvent(value, event)
+          createEvent(value)
         }
       }
     }
 
-    return <InnerComponent {...eventProps} state={componentState} {...config.inputs} />;
+    return <InnerComponent {...eventProps} {...config.inputs(componentState)} />;
   }
 
   EmbeddableWrapper.displayName = `embedded(${InnerComponent.displayName ?? 'Editor'})`;