@knotx/react 0.0.8 → 0.0.10

package/dist/index.cjs

@@ -2,10 +2,27 @@
 
 const jsxRuntime = require('react/jsx-runtime');
 const core = require('@knotx/core');
-const pluginsBaseRender = require('@knotx/plugins-base-render');
 const react = require('react');
 const rxjs = require('rxjs');
 const operators = require('rxjs/operators');
+const pluginsBaseRender = require('@knotx/plugins-base-render');
+
+function useContainerRef(onResize) {
+  const [container, setContainer] = react.useState();
+  const [_, setSize] = react.useState();
+  react.useLayoutEffect(() => {
+    if (!container)
+      return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      const { width, height } = entries[0].contentRect;
+      onResize({ width, height });
+      setSize({ width, height });
+    });
+    resizeObserver.observe(container);
+    return () => resizeObserver.disconnect();
+  }, [container]);
+  return setContainer;
+}
 
 const LayerWrapper = ({ children, layer }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -25,6 +42,58 @@ function createLayer({ engine, layer }) {
   return /* @__PURE__ */ jsxRuntime.jsx(LayerWrapper, { layer, children: engine.getLayerComponents(layer).map(({ name, render: Component }) => /* @__PURE__ */ jsxRuntime.jsx(Component, {}, name)) }, layer);
 }
 
+function useLayerContent(engineRef) {
+  const content = react.useMemo(() => {
+    const engine = engineRef.current;
+    if (!engine)
+      return null;
+    const layers = Array.from(engine.layers.keys()).sort((a, b) => a - b).filter((layer) => layer > core.Layer.Canvas);
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: engine.getLayerComponents(core.Layer.Canvas).reduce(
+      (children, { name, render: CanvasComponent }) => /* @__PURE__ */ jsxRuntime.jsx(CanvasComponent, { children }, name),
+      layers.map(
+        (layer) => createLayer({
+          engine,
+          layer
+        })
+      )
+    ) });
+  }, [engineRef.current]);
+  return content;
+}
+
+function useEngineRef() {
+  const engineRef = react.useRef();
+  react.useEffect(() => () => {
+    var _a;
+    return (_a = engineRef.current) == null ? void 0 : _a.destroy();
+  }, []);
+  return engineRef;
+}
+
+function useMergedPlugins(plugins, disablePresetPlugins) {
+  return react.useMemo(() => {
+    if (disablePresetPlugins)
+      return plugins;
+    return [pluginsBaseRender.BaseRender, ...plugins || []];
+  }, [disablePresetPlugins, plugins]);
+}
+function usePluginConfigUpdate(engineRef, pluginConfig = {}) {
+  const pluginConfigRef = react.useRef(pluginConfig);
+  react.useLayoutEffect(() => {
+    if (!engineRef.current) {
+      return;
+    }
+    for (const pluginName in pluginConfig) {
+      const pluginConfigValue = pluginConfig[pluginName];
+      if (Object.is(pluginConfigRef.current[pluginName], pluginConfigValue) || !pluginConfigValue) {
+        continue;
+      }
+      pluginConfigRef.current[pluginName] = pluginConfigValue;
+      engineRef.current.changePluginConfig(pluginName, pluginConfigValue);
+    }
+  });
+}
+
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -46,46 +115,22 @@ const Knotx = react.memo(react.forwardRef(({
   style,
   nodes,
   edges,
-  plugins,
+  plugins: _plugins,
+  pluginConfig,
   disablePresetPlugins = false
 }, ref) => {
-  const [container, setContainer] = react.useState();
-  const [_, setSize] = react.useState();
-  const engineRef = react.useRef();
-  const enabledPlugins = react.useMemo(() => {
-    if (disablePresetPlugins)
-      return plugins;
-    return [pluginsBaseRender.BaseRender, ...plugins || []];
-  }, [disablePresetPlugins, plugins]);
-  react.useLayoutEffect(() => {
-    if (!container)
-      return;
-    const resizeObserver = new ResizeObserver((entries) => {
-      const { width, height } = entries[0].contentRect;
-      if (engineRef.current) {
-        engineRef.current.container = { width, height };
-      } else {
-        engineRef.current = initReactEngine({ width, height }, nodes, edges, enabledPlugins);
-      }
-      setSize({ width, height });
-    });
-    resizeObserver.observe(container);
-    return () => resizeObserver.disconnect();
-  }, [container]);
-  react.useEffect(() => () => {
-    var _a;
-    return (_a = engineRef.current) == null ? void 0 : _a.destroy();
-  }, []);
+  const engineRef = useEngineRef();
+  const plugins = useMergedPlugins(_plugins, disablePresetPlugins);
+  const setContainer = useContainerRef((containerSize) => {
+    if (engineRef.current) {
+      engineRef.current.container = containerSize;
+    } else {
+      engineRef.current = initReactEngine({ container: containerSize, nodes, edges, plugins, pluginConfig });
+    }
+  });
   react.useImperativeHandle(ref, () => engineRef.current);
-  const content = react.useMemo(() => {
-    const engine = engineRef.current;
-    if (!engine)
-      return null;
-    const layers = Array.from(engine.layers.keys()).sort((a, b) => a - b).filter((layer) => layer > core.Layer.Canvas);
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: engine.getLayerComponents(core.Layer.Canvas).reduce((children, { name, render: CanvasComponent }) => /* @__PURE__ */ jsxRuntime.jsx(CanvasComponent, { children }, name), layers.map(
-      (layer) => createLayer({ engine, layer })
-    )) });
-  }, [engineRef.current]);
+  usePluginConfigUpdate(engineRef, pluginConfig);
+  const content = useLayerContent(engineRef);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -100,27 +145,40 @@ const Knotx = react.memo(react.forwardRef(({
   );
 }));
 Knotx.displayName = "Knotx";
-function initReactEngine(container, nodes = [], edges = [], plugins = []) {
-  return new core.Engine({ container, nodes, edges, plugins, runtime: {
-    render: {
-      getValue: (subject, { selector, context }) => {
-        const contextRef = react.useRef(context);
-        contextRef.current = context;
-        const [state, setState] = react.useState(() => selector ? selector(subject instanceof rxjs.BehaviorSubject ? subject.value : subject, contextRef.current) : subject instanceof rxjs.BehaviorSubject ? subject.value : subject);
-        react.useEffect(() => {
-          if (!(subject instanceof rxjs.BehaviorSubject)) {
-            return;
-          }
-          const subscription = subject.pipe(
-            operators.map((value) => selector ? selector(value, contextRef.current) : value),
-            operators.distinctUntilChanged()
-          ).subscribe(setState);
-          return () => subscription.unsubscribe();
-        }, [subject, selector]);
-        return state;
+function initReactEngine({
+  container,
+  nodes = [],
+  edges = [],
+  plugins = [],
+  pluginConfig = {}
+}) {
+  return new core.Engine({
+    container,
+    nodes,
+    edges,
+    plugins,
+    pluginConfig,
+    runtime: {
+      render: {
+        getValue: (subject, { selector, context }) => {
+          const contextRef = react.useRef(context);
+          contextRef.current = context;
+          const [state, setState] = react.useState(() => selector ? selector(subject instanceof rxjs.BehaviorSubject ? subject.value : subject, contextRef.current) : subject instanceof rxjs.BehaviorSubject ? subject.value : subject);
+          react.useEffect(() => {
+            if (!(subject instanceof rxjs.BehaviorSubject)) {
+              return;
+            }
+            const subscription = subject.pipe(
+              operators.map((value) => selector ? selector(value, contextRef.current) : value),
+              operators.distinctUntilChanged()
+            ).subscribe(setState);
+            return () => subscription.unsubscribe();
+          }, [subject, selector]);
+          return state;
+        }
       }
     }
-  } });
+  });
 }
 
 exports.Knotx = Knotx;

package/dist/index.d.cts

@@ -1,22 +1,31 @@
-import { Engine, NodeData, EdgeData, PluginDefinition } from '@knotx/core';
-import { FC, CSSProperties, ForwardRefRenderFunction } from 'react';
+import { Engine, Plugin, NodeData, EdgeData } from '@knotx/core';
+import { FC, CSSProperties, PropsWithoutRef, ForwardedRef, ReactElement } from 'react';
 
 type ReactEngine = Engine<FC<any>>;
-interface KnotxProps {
+type KnotxProps<TPlugins extends Plugin[] = Plugin[]> = {
     className?: string;
     style?: CSSProperties;
     nodes?: NodeData[];
     edges?: EdgeData[];
-    plugins?: PluginDefinition[];
+    plugins?: TPlugins;
     /**
-     * Disable preset plugins
+     * disable preset plugins
      * preset plugin includes:
      * - base-render (@knotx/plugins-base-render)
      * @default false
      */
     disablePresetPlugins?: boolean;
-}
+} & ((TPlugins[number] extends Plugin<infer T> ? {
+    [TName in T as Extract<TPlugins[number], Plugin<TName>> extends Plugin<TName, undefined> ? never : TName]: Extract<TPlugins[number], Plugin<TName>> extends infer T ? T extends Plugin<TName, infer TConfig> ? TConfig : never : never;
+} : {}) extends infer PluginConfig ? {} extends PluginConfig ? {
+    pluginConfig?: undefined;
+} : {
+    pluginConfig: PluginConfig;
+} : {});
 
-declare const Knotx: ForwardRefRenderFunction<ReactEngine, KnotxProps>;
+declare const Knotx: {
+    <TPlugins extends Plugin[]>(props: PropsWithoutRef<KnotxProps<TPlugins>>, ref: ForwardedRef<ReactEngine>): ReactElement | null;
+    displayName?: string | undefined;
+};
 
 export { Knotx, type KnotxProps, type ReactEngine };

package/dist/index.d.mts

@@ -1,22 +1,31 @@
-import { Engine, NodeData, EdgeData, PluginDefinition } from '@knotx/core';
-import { FC, CSSProperties, ForwardRefRenderFunction } from 'react';
+import { Engine, Plugin, NodeData, EdgeData } from '@knotx/core';
+import { FC, CSSProperties, PropsWithoutRef, ForwardedRef, ReactElement } from 'react';
 
 type ReactEngine = Engine<FC<any>>;
-interface KnotxProps {
+type KnotxProps<TPlugins extends Plugin[] = Plugin[]> = {
     className?: string;
     style?: CSSProperties;
     nodes?: NodeData[];
     edges?: EdgeData[];
-    plugins?: PluginDefinition[];
+    plugins?: TPlugins;
     /**
-     * Disable preset plugins
+     * disable preset plugins
      * preset plugin includes:
      * - base-render (@knotx/plugins-base-render)
      * @default false
      */
     disablePresetPlugins?: boolean;
-}
+} & ((TPlugins[number] extends Plugin<infer T> ? {
+    [TName in T as Extract<TPlugins[number], Plugin<TName>> extends Plugin<TName, undefined> ? never : TName]: Extract<TPlugins[number], Plugin<TName>> extends infer T ? T extends Plugin<TName, infer TConfig> ? TConfig : never : never;
+} : {}) extends infer PluginConfig ? {} extends PluginConfig ? {
+    pluginConfig?: undefined;
+} : {
+    pluginConfig: PluginConfig;
+} : {});
 
-declare const Knotx: ForwardRefRenderFunction<ReactEngine, KnotxProps>;
+declare const Knotx: {
+    <TPlugins extends Plugin[]>(props: PropsWithoutRef<KnotxProps<TPlugins>>, ref: ForwardedRef<ReactEngine>): ReactElement | null;
+    displayName?: string | undefined;
+};
 
 export { Knotx, type KnotxProps, type ReactEngine };

package/dist/index.d.ts

@@ -1,22 +1,31 @@
-import { Engine, NodeData, EdgeData, PluginDefinition } from '@knotx/core';
-import { FC, CSSProperties, ForwardRefRenderFunction } from 'react';
+import { Engine, Plugin, NodeData, EdgeData } from '@knotx/core';
+import { FC, CSSProperties, PropsWithoutRef, ForwardedRef, ReactElement } from 'react';
 
 type ReactEngine = Engine<FC<any>>;
-interface KnotxProps {
+type KnotxProps<TPlugins extends Plugin[] = Plugin[]> = {
     className?: string;
     style?: CSSProperties;
     nodes?: NodeData[];
     edges?: EdgeData[];
-    plugins?: PluginDefinition[];
+    plugins?: TPlugins;
     /**
-     * Disable preset plugins
+     * disable preset plugins
      * preset plugin includes:
      * - base-render (@knotx/plugins-base-render)
      * @default false
      */
     disablePresetPlugins?: boolean;
-}
+} & ((TPlugins[number] extends Plugin<infer T> ? {
+    [TName in T as Extract<TPlugins[number], Plugin<TName>> extends Plugin<TName, undefined> ? never : TName]: Extract<TPlugins[number], Plugin<TName>> extends infer T ? T extends Plugin<TName, infer TConfig> ? TConfig : never : never;
+} : {}) extends infer PluginConfig ? {} extends PluginConfig ? {
+    pluginConfig?: undefined;
+} : {
+    pluginConfig: PluginConfig;
+} : {});
 
-declare const Knotx: ForwardRefRenderFunction<ReactEngine, KnotxProps>;
+declare const Knotx: {
+    <TPlugins extends Plugin[]>(props: PropsWithoutRef<KnotxProps<TPlugins>>, ref: ForwardedRef<ReactEngine>): ReactElement | null;
+    displayName?: string | undefined;
+};
 
 export { Knotx, type KnotxProps, type ReactEngine };

package/dist/index.mjs

@@ -1,9 +1,26 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { Layer, Engine } from '@knotx/core';
-import { BaseRender } from '@knotx/plugins-base-render';
-import { memo, forwardRef, useState, useRef, useMemo, useLayoutEffect, useEffect, useImperativeHandle } from 'react';
+import { useState, useLayoutEffect, useMemo, useRef, useEffect, memo, forwardRef, useImperativeHandle } from 'react';
 import { BehaviorSubject } from 'rxjs';
 import { map, distinctUntilChanged } from 'rxjs/operators';
+import { BaseRender } from '@knotx/plugins-base-render';
+
+function useContainerRef(onResize) {
+  const [container, setContainer] = useState();
+  const [_, setSize] = useState();
+  useLayoutEffect(() => {
+    if (!container)
+      return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      const { width, height } = entries[0].contentRect;
+      onResize({ width, height });
+      setSize({ width, height });
+    });
+    resizeObserver.observe(container);
+    return () => resizeObserver.disconnect();
+  }, [container]);
+  return setContainer;
+}
 
 const LayerWrapper = ({ children, layer }) => {
   return /* @__PURE__ */ jsx(
@@ -23,6 +40,58 @@ function createLayer({ engine, layer }) {
   return /* @__PURE__ */ jsx(LayerWrapper, { layer, children: engine.getLayerComponents(layer).map(({ name, render: Component }) => /* @__PURE__ */ jsx(Component, {}, name)) }, layer);
 }
 
+function useLayerContent(engineRef) {
+  const content = useMemo(() => {
+    const engine = engineRef.current;
+    if (!engine)
+      return null;
+    const layers = Array.from(engine.layers.keys()).sort((a, b) => a - b).filter((layer) => layer > Layer.Canvas);
+    return /* @__PURE__ */ jsx(Fragment, { children: engine.getLayerComponents(Layer.Canvas).reduce(
+      (children, { name, render: CanvasComponent }) => /* @__PURE__ */ jsx(CanvasComponent, { children }, name),
+      layers.map(
+        (layer) => createLayer({
+          engine,
+          layer
+        })
+      )
+    ) });
+  }, [engineRef.current]);
+  return content;
+}
+
+function useEngineRef() {
+  const engineRef = useRef();
+  useEffect(() => () => {
+    var _a;
+    return (_a = engineRef.current) == null ? void 0 : _a.destroy();
+  }, []);
+  return engineRef;
+}
+
+function useMergedPlugins(plugins, disablePresetPlugins) {
+  return useMemo(() => {
+    if (disablePresetPlugins)
+      return plugins;
+    return [BaseRender, ...plugins || []];
+  }, [disablePresetPlugins, plugins]);
+}
+function usePluginConfigUpdate(engineRef, pluginConfig = {}) {
+  const pluginConfigRef = useRef(pluginConfig);
+  useLayoutEffect(() => {
+    if (!engineRef.current) {
+      return;
+    }
+    for (const pluginName in pluginConfig) {
+      const pluginConfigValue = pluginConfig[pluginName];
+      if (Object.is(pluginConfigRef.current[pluginName], pluginConfigValue) || !pluginConfigValue) {
+        continue;
+      }
+      pluginConfigRef.current[pluginName] = pluginConfigValue;
+      engineRef.current.changePluginConfig(pluginName, pluginConfigValue);
+    }
+  });
+}
+
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -44,46 +113,22 @@ const Knotx = memo(forwardRef(({
   style,
   nodes,
   edges,
-  plugins,
+  plugins: _plugins,
+  pluginConfig,
   disablePresetPlugins = false
 }, ref) => {
-  const [container, setContainer] = useState();
-  const [_, setSize] = useState();
-  const engineRef = useRef();
-  const enabledPlugins = useMemo(() => {
-    if (disablePresetPlugins)
-      return plugins;
-    return [BaseRender, ...plugins || []];
-  }, [disablePresetPlugins, plugins]);
-  useLayoutEffect(() => {
-    if (!container)
-      return;
-    const resizeObserver = new ResizeObserver((entries) => {
-      const { width, height } = entries[0].contentRect;
-      if (engineRef.current) {
-        engineRef.current.container = { width, height };
-      } else {
-        engineRef.current = initReactEngine({ width, height }, nodes, edges, enabledPlugins);
-      }
-      setSize({ width, height });
-    });
-    resizeObserver.observe(container);
-    return () => resizeObserver.disconnect();
-  }, [container]);
-  useEffect(() => () => {
-    var _a;
-    return (_a = engineRef.current) == null ? void 0 : _a.destroy();
-  }, []);
+  const engineRef = useEngineRef();
+  const plugins = useMergedPlugins(_plugins, disablePresetPlugins);
+  const setContainer = useContainerRef((containerSize) => {
+    if (engineRef.current) {
+      engineRef.current.container = containerSize;
+    } else {
+      engineRef.current = initReactEngine({ container: containerSize, nodes, edges, plugins, pluginConfig });
+    }
+  });
   useImperativeHandle(ref, () => engineRef.current);
-  const content = useMemo(() => {
-    const engine = engineRef.current;
-    if (!engine)
-      return null;
-    const layers = Array.from(engine.layers.keys()).sort((a, b) => a - b).filter((layer) => layer > Layer.Canvas);
-    return /* @__PURE__ */ jsx(Fragment, { children: engine.getLayerComponents(Layer.Canvas).reduce((children, { name, render: CanvasComponent }) => /* @__PURE__ */ jsx(CanvasComponent, { children }, name), layers.map(
-      (layer) => createLayer({ engine, layer })
-    )) });
-  }, [engineRef.current]);
+  usePluginConfigUpdate(engineRef, pluginConfig);
+  const content = useLayerContent(engineRef);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -98,27 +143,40 @@ const Knotx = memo(forwardRef(({
   );
 }));
 Knotx.displayName = "Knotx";
-function initReactEngine(container, nodes = [], edges = [], plugins = []) {
-  return new Engine({ container, nodes, edges, plugins, runtime: {
-    render: {
-      getValue: (subject, { selector, context }) => {
-        const contextRef = useRef(context);
-        contextRef.current = context;
-        const [state, setState] = useState(() => selector ? selector(subject instanceof BehaviorSubject ? subject.value : subject, contextRef.current) : subject instanceof BehaviorSubject ? subject.value : subject);
-        useEffect(() => {
-          if (!(subject instanceof BehaviorSubject)) {
-            return;
-          }
-          const subscription = subject.pipe(
-            map((value) => selector ? selector(value, contextRef.current) : value),
-            distinctUntilChanged()
-          ).subscribe(setState);
-          return () => subscription.unsubscribe();
-        }, [subject, selector]);
-        return state;
+function initReactEngine({
+  container,
+  nodes = [],
+  edges = [],
+  plugins = [],
+  pluginConfig = {}
+}) {
+  return new Engine({
+    container,
+    nodes,
+    edges,
+    plugins,
+    pluginConfig,
+    runtime: {
+      render: {
+        getValue: (subject, { selector, context }) => {
+          const contextRef = useRef(context);
+          contextRef.current = context;
+          const [state, setState] = useState(() => selector ? selector(subject instanceof BehaviorSubject ? subject.value : subject, contextRef.current) : subject instanceof BehaviorSubject ? subject.value : subject);
+          useEffect(() => {
+            if (!(subject instanceof BehaviorSubject)) {
+              return;
+            }
+            const subscription = subject.pipe(
+              map((value) => selector ? selector(value, contextRef.current) : value),
+              distinctUntilChanged()
+            ).subscribe(setState);
+            return () => subscription.unsubscribe();
+          }, [subject, selector]);
+          return state;
+        }
       }
     }
-  } });
+  });
 }
 
 export { Knotx };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@knotx/react",
   "type": "module",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "React for Knotx",
   "author": "boenfu",
   "license": "MIT",
@@ -34,19 +34,19 @@
   },
   "dependencies": {
     "rxjs": "^7.8.1",
-    "@knotx/core": "0.0.6",
-    "@knotx/jsx": "0.0.6",
-    "@knotx/plugins-base-render": "0.0.8"
+    "@knotx/jsx": "0.0.7",
+    "@knotx/plugins-base-render": "0.0.9",
+    "@knotx/core": "0.0.7"
   },
   "devDependencies": {
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
-    "@knotx/build-config": "0.0.6",
-    "@knotx/eslint-config": "0.0.6",
-    "@knotx/jsx": "0.0.6",
-    "@knotx/typescript-config": "0.0.6"
+    "@knotx/build-config": "0.0.7",
+    "@knotx/eslint-config": "0.0.7",
+    "@knotx/jsx": "0.0.7",
+    "@knotx/typescript-config": "0.0.7"
   },
   "scripts": {
     "build": "unbuild --failOnWarn=false",