@unovis/react 1.0.0-beta.1 → 1.0.0-beta.3

package/components/area/index.js

@@ -1,19 +1,22 @@
-import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useEffect, useImperativeHandle } from 'react';
 import { Area } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 function VisAreaFC(props, fRef) {
     const ref = useRef(null);
-    const [component] = useState(new Area(props));
     useEffect(() => {
-        ref.current.__component__ = component;
+        var _a;
+        const element = ref.current;
+        (_a = element.__component__) === null || _a === void 0 ? void 0 : _a.destroy();
+        element.__component__ = new Area(props);
     }, []);
     useEffect(() => {
+        const component = ref.current.__component__;
         if (props.data)
             component === null || component === void 0 ? void 0 : component.setData(props.data);
         component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ component }));
+    useImperativeHandle(fRef, () => ({ component: ref.current.__component__ }));
     return React.createElement("vis-component", { ref: ref });
 }
 const VisArea = React.memo(React.forwardRef(VisAreaFC), arePropsEqual);

package/components/area/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/area/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { Area, AreaConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisAreaRef<Datum> = {\n  component: Area<Datum>;\n}\n\nexport type VisAreaProps<Datum> = AreaConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisAreaRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisAreaFC<Datum> (props: VisAreaProps<Datum>, fRef: ForwardedRef<VisAreaRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Area<Datum>>>(null)\n  const [component] = useState<Area<Datum>>(new Area(props))\n\n  // On Mount\n  useEffect(() => {\n    (ref.current as VisComponentElement<Area<Datum>>).__component__ = component\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisArea: (<Datum>(props: VisAreaProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisAreaFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,SAAS,CAAS,KAA0B,EAAE,IAAqC,EAAA;AAC1F,IAAA,MAAM,GAAG,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAA;AAC1D,IAAA,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAc,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;IAG1D,SAAS,CAAC,MAAK;AACZ,QAAA,GAAG,CAAC,OAA4C,CAAC,aAAa,GAAG,SAAS,CAAA;KAC5E,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;AAChD,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,OAAO,GAAgE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/area/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { Area, AreaConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisAreaRef<Datum> = {\n  component: Area<Datum>;\n}\n\nexport type VisAreaProps<Datum> = AreaConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisAreaRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisAreaFC<Datum> (props: VisAreaProps<Datum>, fRef: ForwardedRef<VisAreaRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Area<Datum>>>(null)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<Area<Datum>>)\n    element.__component__?.destroy() // Destroy component if exists already (to comply with React 18 strict mode, which renders components twice in dev mode)\n    element.__component__ = new Area(props)\n    // We don't have a clean up function because the component will be destroyed by its container (e.g. XYContainer or SingleContainer)\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = (ref.current as VisComponentElement<Area<Datum>>).__component__\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component: (ref.current as VisComponentElement<Area<Datum>>).__component__ }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisArea: (<Datum>(props: VisAreaProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisAreaFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,SAAS,CAAS,KAA0B,EAAE,IAAqC,EAAA;AAC1F,IAAA,MAAM,GAAG,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAA;IAG1D,SAAS,CAAC,MAAK;;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAA4C,CAAA;AACjE,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,EAAE,CAAA;QAChC,OAAO,CAAC,aAAa,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAA;KAExC,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAI,GAAG,CAAC,OAA4C,CAAC,aAAa,CAAA;QACjF,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAG,GAAG,CAAC,OAA4C,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;AACjH,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,OAAO,GAAgE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,aAAa;;;;"}

package/components/axis/index.js

@@ -1,19 +1,22 @@
-import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useEffect, useImperativeHandle } from 'react';
 import { Axis } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 function VisAxisFC(props, fRef) {
     const ref = useRef(null);
-    const [component] = useState(new Axis(props));
     useEffect(() => {
-        ref.current.__component__ = component;
+        var _a;
+        const element = ref.current;
+        (_a = element.__component__) === null || _a === void 0 ? void 0 : _a.destroy();
+        element.__component__ = new Axis(props);
     }, []);
     useEffect(() => {
+        const component = ref.current.__component__;
         if (props.data)
             component === null || component === void 0 ? void 0 : component.setData(props.data);
         component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ component }));
+    useImperativeHandle(fRef, () => ({ component: ref.current.__component__ }));
     return React.createElement("vis-axis", { ref: ref });
 }
 const VisAxis = React.memo(React.forwardRef(VisAxisFC), arePropsEqual);

package/components/axis/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/axis/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { Axis, AxisConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisAxisRef<Datum> = {\n  component: Axis<Datum>;\n}\n\nexport type VisAxisProps<Datum> = AxisConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisAxisRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisAxisFC<Datum> (props: VisAxisProps<Datum>, fRef: ForwardedRef<VisAxisRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Axis<Datum>>>(null)\n  const [component] = useState<Axis<Datum>>(new Axis(props))\n\n  // On Mount\n  useEffect(() => {\n    (ref.current as VisComponentElement<Axis<Datum>>).__component__ = component\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }))\n  return <vis-axis ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisAxis: (<Datum>(props: VisAxisProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisAxisFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,SAAS,CAAS,KAA0B,EAAE,IAAqC,EAAA;AAC1F,IAAA,MAAM,GAAG,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAA;AAC1D,IAAA,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAc,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;IAG1D,SAAS,CAAC,MAAK;AACZ,QAAA,GAAG,CAAC,OAA4C,CAAC,aAAa,GAAG,SAAS,CAAA;KAC5E,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;AAChD,IAAA,OAAO,KAAU,CAAA,aAAA,CAAA,UAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AAC/B,CAAC;AAIY,MAAA,OAAO,GAAgE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/axis/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { Axis, AxisConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisAxisRef<Datum> = {\n  component: Axis<Datum>;\n}\n\nexport type VisAxisProps<Datum> = AxisConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisAxisRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisAxisFC<Datum> (props: VisAxisProps<Datum>, fRef: ForwardedRef<VisAxisRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Axis<Datum>>>(null)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<Axis<Datum>>)\n    element.__component__?.destroy() // Destroy component if exists already (to comply with React 18 strict mode, which renders components twice in dev mode)\n    element.__component__ = new Axis(props)\n    // We don't have a clean up function because the component will be destroyed by its container (e.g. XYContainer or SingleContainer)\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = (ref.current as VisComponentElement<Axis<Datum>>).__component__\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component: (ref.current as VisComponentElement<Axis<Datum>>).__component__ }))\n  return <vis-axis ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisAxis: (<Datum>(props: VisAxisProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisAxisFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,SAAS,CAAS,KAA0B,EAAE,IAAqC,EAAA;AAC1F,IAAA,MAAM,GAAG,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAA;IAG1D,SAAS,CAAC,MAAK;;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAA4C,CAAA;AACjE,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,EAAE,CAAA;QAChC,OAAO,CAAC,aAAa,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAA;KAExC,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAI,GAAG,CAAC,OAA4C,CAAC,aAAa,CAAA;QACjF,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAG,GAAG,CAAC,OAA4C,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;AACjH,IAAA,OAAO,KAAU,CAAA,aAAA,CAAA,UAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AAC/B,CAAC;AAIY,MAAA,OAAO,GAAgE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,aAAa;;;;"}

package/components/brush/index.js

@@ -1,19 +1,22 @@
-import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useEffect, useImperativeHandle } from 'react';
 import { Brush } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 function VisBrushFC(props, fRef) {
     const ref = useRef(null);
-    const [component] = useState(new Brush(props));
     useEffect(() => {
-        ref.current.__component__ = component;
+        var _a;
+        const element = ref.current;
+        (_a = element.__component__) === null || _a === void 0 ? void 0 : _a.destroy();
+        element.__component__ = new Brush(props);
     }, []);
     useEffect(() => {
+        const component = ref.current.__component__;
         if (props.data)
             component === null || component === void 0 ? void 0 : component.setData(props.data);
         component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ component }));
+    useImperativeHandle(fRef, () => ({ component: ref.current.__component__ }));
     return React.createElement("vis-component", { ref: ref });
 }
 const VisBrush = React.memo(React.forwardRef(VisBrushFC), arePropsEqual);

package/components/brush/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/brush/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { Brush, BrushConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisBrushRef<Datum> = {\n  component: Brush<Datum>;\n}\n\nexport type VisBrushProps<Datum> = BrushConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisBrushRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisBrushFC<Datum> (props: VisBrushProps<Datum>, fRef: ForwardedRef<VisBrushRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Brush<Datum>>>(null)\n  const [component] = useState<Brush<Datum>>(new Brush(props))\n\n  // On Mount\n  useEffect(() => {\n    (ref.current as VisComponentElement<Brush<Datum>>).__component__ = component\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisBrush: (<Datum>(props: VisBrushProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisBrushFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,UAAU,CAAS,KAA2B,EAAE,IAAsC,EAAA;AAC7F,IAAA,MAAM,GAAG,GAAG,MAAM,CAAoC,IAAI,CAAC,CAAA;AAC3D,IAAA,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAe,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IAG5D,SAAS,CAAC,MAAK;AACZ,QAAA,GAAG,CAAC,OAA6C,CAAC,aAAa,GAAG,SAAS,CAAA;KAC7E,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;AAChD,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,QAAQ,GAAiE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/brush/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { Brush, BrushConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisBrushRef<Datum> = {\n  component: Brush<Datum>;\n}\n\nexport type VisBrushProps<Datum> = BrushConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisBrushRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisBrushFC<Datum> (props: VisBrushProps<Datum>, fRef: ForwardedRef<VisBrushRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Brush<Datum>>>(null)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<Brush<Datum>>)\n    element.__component__?.destroy() // Destroy component if exists already (to comply with React 18 strict mode, which renders components twice in dev mode)\n    element.__component__ = new Brush(props)\n    // We don't have a clean up function because the component will be destroyed by its container (e.g. XYContainer or SingleContainer)\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = (ref.current as VisComponentElement<Brush<Datum>>).__component__\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component: (ref.current as VisComponentElement<Brush<Datum>>).__component__ }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisBrush: (<Datum>(props: VisBrushProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisBrushFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,UAAU,CAAS,KAA2B,EAAE,IAAsC,EAAA;AAC7F,IAAA,MAAM,GAAG,GAAG,MAAM,CAAoC,IAAI,CAAC,CAAA;IAG3D,SAAS,CAAC,MAAK;;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAA6C,CAAA;AAClE,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,EAAE,CAAA;QAChC,OAAO,CAAC,aAAa,GAAG,IAAI,KAAK,CAAC,KAAK,CAAC,CAAA;KAEzC,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAI,GAAG,CAAC,OAA6C,CAAC,aAAa,CAAA;QAClF,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAG,GAAG,CAAC,OAA6C,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;AAClH,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,QAAQ,GAAiE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,aAAa;;;;"}

package/components/crosshair/index.js

@@ -1,19 +1,22 @@
-import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useEffect, useImperativeHandle } from 'react';
 import { Crosshair } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 function VisCrosshairFC(props, fRef) {
     const ref = useRef(null);
-    const [component] = useState(new Crosshair(props));
     useEffect(() => {
-        ref.current.__component__ = component;
+        var _a;
+        const element = ref.current;
+        (_a = element.__component__) === null || _a === void 0 ? void 0 : _a.destroy();
+        element.__component__ = new Crosshair(props);
     }, []);
     useEffect(() => {
+        const component = ref.current.__component__;
         if (props.data)
             component === null || component === void 0 ? void 0 : component.setData(props.data);
         component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ component }));
+    useImperativeHandle(fRef, () => ({ component: ref.current.__component__ }));
     return React.createElement("vis-crosshair", { ref: ref });
 }
 const VisCrosshair = React.memo(React.forwardRef(VisCrosshairFC), arePropsEqual);

package/components/crosshair/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/crosshair/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { Crosshair, CrosshairConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisCrosshairRef<Datum> = {\n  component: Crosshair<Datum>;\n}\n\nexport type VisCrosshairProps<Datum> = CrosshairConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisCrosshairRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisCrosshairFC<Datum> (props: VisCrosshairProps<Datum>, fRef: ForwardedRef<VisCrosshairRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Crosshair<Datum>>>(null)\n  const [component] = useState<Crosshair<Datum>>(new Crosshair(props))\n\n  // On Mount\n  useEffect(() => {\n    (ref.current as VisComponentElement<Crosshair<Datum>>).__component__ = component\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }))\n  return <vis-crosshair ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisCrosshair: (<Datum>(props: VisCrosshairProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisCrosshairFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,cAAc,CAAS,KAA+B,EAAE,IAA0C,EAAA;AACzG,IAAA,MAAM,GAAG,GAAG,MAAM,CAAwC,IAAI,CAAC,CAAA;AAC/D,IAAA,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAmB,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC,CAAA;IAGpE,SAAS,CAAC,MAAK;AACZ,QAAA,GAAG,CAAC,OAAiD,CAAC,aAAa,GAAG,SAAS,CAAA;KACjF,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;AAChD,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,YAAY,GAAqE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/crosshair/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { Crosshair, CrosshairConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisCrosshairRef<Datum> = {\n  component: Crosshair<Datum>;\n}\n\nexport type VisCrosshairProps<Datum> = CrosshairConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisCrosshairRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisCrosshairFC<Datum> (props: VisCrosshairProps<Datum>, fRef: ForwardedRef<VisCrosshairRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Crosshair<Datum>>>(null)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<Crosshair<Datum>>)\n    element.__component__?.destroy() // Destroy component if exists already (to comply with React 18 strict mode, which renders components twice in dev mode)\n    element.__component__ = new Crosshair(props)\n    // We don't have a clean up function because the component will be destroyed by its container (e.g. XYContainer or SingleContainer)\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = (ref.current as VisComponentElement<Crosshair<Datum>>).__component__\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component: (ref.current as VisComponentElement<Crosshair<Datum>>).__component__ }))\n  return <vis-crosshair ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisCrosshair: (<Datum>(props: VisCrosshairProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisCrosshairFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,cAAc,CAAS,KAA+B,EAAE,IAA0C,EAAA;AACzG,IAAA,MAAM,GAAG,GAAG,MAAM,CAAwC,IAAI,CAAC,CAAA;IAG/D,SAAS,CAAC,MAAK;;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAAiD,CAAA;AACtE,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,EAAE,CAAA;QAChC,OAAO,CAAC,aAAa,GAAG,IAAI,SAAS,CAAC,KAAK,CAAC,CAAA;KAE7C,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAI,GAAG,CAAC,OAAiD,CAAC,aAAa,CAAA;QACtF,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAG,GAAG,CAAC,OAAiD,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;AACtH,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,YAAY,GAAqE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,EAAE,aAAa;;;;"}

package/components/donut/index.js

@@ -1,19 +1,22 @@
-import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useEffect, useImperativeHandle } from 'react';
 import { Donut } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 function VisDonutFC(props, fRef) {
     const ref = useRef(null);
-    const [component] = useState(new Donut(props));
     useEffect(() => {
-        ref.current.__component__ = component;
+        var _a;
+        const element = ref.current;
+        (_a = element.__component__) === null || _a === void 0 ? void 0 : _a.destroy();
+        element.__component__ = new Donut(props);
     }, []);
     useEffect(() => {
+        const component = ref.current.__component__;
         if (props.data)
             component === null || component === void 0 ? void 0 : component.setData(props.data);
         component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ component }));
+    useImperativeHandle(fRef, () => ({ component: ref.current.__component__ }));
     return React.createElement("vis-component", { ref: ref });
 }
 const VisDonut = React.memo(React.forwardRef(VisDonutFC), arePropsEqual);

package/components/donut/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/donut/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { Donut, DonutConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisDonutRef<Datum> = {\n  component: Donut<Datum>;\n}\n\nexport type VisDonutProps<Datum> = DonutConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisDonutRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisDonutFC<Datum> (props: VisDonutProps<Datum>, fRef: ForwardedRef<VisDonutRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Donut<Datum>>>(null)\n  const [component] = useState<Donut<Datum>>(new Donut(props))\n\n  // On Mount\n  useEffect(() => {\n    (ref.current as VisComponentElement<Donut<Datum>>).__component__ = component\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisDonut: (<Datum>(props: VisDonutProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisDonutFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,UAAU,CAAS,KAA2B,EAAE,IAAsC,EAAA;AAC7F,IAAA,MAAM,GAAG,GAAG,MAAM,CAAoC,IAAI,CAAC,CAAA;AAC3D,IAAA,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAe,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IAG5D,SAAS,CAAC,MAAK;AACZ,QAAA,GAAG,CAAC,OAA6C,CAAC,aAAa,GAAG,SAAS,CAAA;KAC7E,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;AAChD,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,QAAQ,GAAiE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/donut/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { Donut, DonutConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisDonutRef<Datum> = {\n  component: Donut<Datum>;\n}\n\nexport type VisDonutProps<Datum> = DonutConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisDonutRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisDonutFC<Datum> (props: VisDonutProps<Datum>, fRef: ForwardedRef<VisDonutRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Donut<Datum>>>(null)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<Donut<Datum>>)\n    element.__component__?.destroy() // Destroy component if exists already (to comply with React 18 strict mode, which renders components twice in dev mode)\n    element.__component__ = new Donut(props)\n    // We don't have a clean up function because the component will be destroyed by its container (e.g. XYContainer or SingleContainer)\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = (ref.current as VisComponentElement<Donut<Datum>>).__component__\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component: (ref.current as VisComponentElement<Donut<Datum>>).__component__ }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisDonut: (<Datum>(props: VisDonutProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisDonutFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,UAAU,CAAS,KAA2B,EAAE,IAAsC,EAAA;AAC7F,IAAA,MAAM,GAAG,GAAG,MAAM,CAAoC,IAAI,CAAC,CAAA;IAG3D,SAAS,CAAC,MAAK;;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAA6C,CAAA;AAClE,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,EAAE,CAAA;QAChC,OAAO,CAAC,aAAa,GAAG,IAAI,KAAK,CAAC,KAAK,CAAC,CAAA;KAEzC,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAI,GAAG,CAAC,OAA6C,CAAC,aAAa,CAAA;QAClF,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAG,GAAG,CAAC,OAA6C,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;AAClH,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,QAAQ,GAAiE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,aAAa;;;;"}

package/components/free-brush/index.js

@@ -1,19 +1,22 @@
-import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useEffect, useImperativeHandle } from 'react';
 import { FreeBrush } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 function VisFreeBrushFC(props, fRef) {
     const ref = useRef(null);
-    const [component] = useState(new FreeBrush(props));
     useEffect(() => {
-        ref.current.__component__ = component;
+        var _a;
+        const element = ref.current;
+        (_a = element.__component__) === null || _a === void 0 ? void 0 : _a.destroy();
+        element.__component__ = new FreeBrush(props);
     }, []);
     useEffect(() => {
+        const component = ref.current.__component__;
         if (props.data)
             component === null || component === void 0 ? void 0 : component.setData(props.data);
         component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ component }));
+    useImperativeHandle(fRef, () => ({ component: ref.current.__component__ }));
     return React.createElement("vis-component", { ref: ref });
 }
 const VisFreeBrush = React.memo(React.forwardRef(VisFreeBrushFC), arePropsEqual);

package/components/free-brush/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/free-brush/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { FreeBrush, FreeBrushConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisFreeBrushRef<Datum> = {\n  component: FreeBrush<Datum>;\n}\n\nexport type VisFreeBrushProps<Datum> = FreeBrushConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisFreeBrushRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisFreeBrushFC<Datum> (props: VisFreeBrushProps<Datum>, fRef: ForwardedRef<VisFreeBrushRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<FreeBrush<Datum>>>(null)\n  const [component] = useState<FreeBrush<Datum>>(new FreeBrush(props))\n\n  // On Mount\n  useEffect(() => {\n    (ref.current as VisComponentElement<FreeBrush<Datum>>).__component__ = component\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisFreeBrush: (<Datum>(props: VisFreeBrushProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisFreeBrushFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,cAAc,CAAS,KAA+B,EAAE,IAA0C,EAAA;AACzG,IAAA,MAAM,GAAG,GAAG,MAAM,CAAwC,IAAI,CAAC,CAAA;AAC/D,IAAA,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAmB,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC,CAAA;IAGpE,SAAS,CAAC,MAAK;AACZ,QAAA,GAAG,CAAC,OAAiD,CAAC,aAAa,GAAG,SAAS,CAAA;KACjF,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;AAChD,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,YAAY,GAAqE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/free-brush/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { FreeBrush, FreeBrushConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisFreeBrushRef<Datum> = {\n  component: FreeBrush<Datum>;\n}\n\nexport type VisFreeBrushProps<Datum> = FreeBrushConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisFreeBrushRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisFreeBrushFC<Datum> (props: VisFreeBrushProps<Datum>, fRef: ForwardedRef<VisFreeBrushRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<FreeBrush<Datum>>>(null)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<FreeBrush<Datum>>)\n    element.__component__?.destroy() // Destroy component if exists already (to comply with React 18 strict mode, which renders components twice in dev mode)\n    element.__component__ = new FreeBrush(props)\n    // We don't have a clean up function because the component will be destroyed by its container (e.g. XYContainer or SingleContainer)\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = (ref.current as VisComponentElement<FreeBrush<Datum>>).__component__\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component: (ref.current as VisComponentElement<FreeBrush<Datum>>).__component__ }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisFreeBrush: (<Datum>(props: VisFreeBrushProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisFreeBrushFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,cAAc,CAAS,KAA+B,EAAE,IAA0C,EAAA;AACzG,IAAA,MAAM,GAAG,GAAG,MAAM,CAAwC,IAAI,CAAC,CAAA;IAG/D,SAAS,CAAC,MAAK;;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAAiD,CAAA;AACtE,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,EAAE,CAAA;QAChC,OAAO,CAAC,aAAa,GAAG,IAAI,SAAS,CAAC,KAAK,CAAC,CAAA;KAE7C,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAI,GAAG,CAAC,OAAiD,CAAC,aAAa,CAAA;QACtF,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAG,GAAG,CAAC,OAAiD,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;AACtH,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,YAAY,GAAqE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,EAAE,aAAa;;;;"}

package/components/graph/index.js

@@ -1,19 +1,22 @@
-import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useEffect, useImperativeHandle } from 'react';
 import { Graph } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 function VisGraphFC(props, fRef) {
     const ref = useRef(null);
-    const [component] = useState(new Graph(props));
     useEffect(() => {
-        ref.current.__component__ = component;
+        var _a;
+        const element = ref.current;
+        (_a = element.__component__) === null || _a === void 0 ? void 0 : _a.destroy();
+        element.__component__ = new Graph(props);
     }, []);
     useEffect(() => {
+        const component = ref.current.__component__;
         if (props.data)
             component === null || component === void 0 ? void 0 : component.setData(props.data);
         component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ component }));
+    useImperativeHandle(fRef, () => ({ component: ref.current.__component__ }));
     return React.createElement("vis-component", { ref: ref });
 }
 const VisGraph = React.memo(React.forwardRef(VisGraphFC), arePropsEqual);

package/components/graph/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/graph/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { Graph, GraphConfigInterface, GraphInputNode, GraphInputLink } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisGraphRef<N extends GraphInputNode, L extends GraphInputLink> = {\n  component: Graph<N, L>;\n}\n\nexport type VisGraphProps<N extends GraphInputNode, L extends GraphInputLink> = GraphConfigInterface<N, L> & {\n  data?: any;\n  ref?: Ref<VisGraphRef<N, L>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisGraphFC<N extends GraphInputNode, L extends GraphInputLink> (props: VisGraphProps<N, L>, fRef: ForwardedRef<VisGraphRef<N, L>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Graph<N, L>>>(null)\n  const [component] = useState<Graph<N, L>>(new Graph(props))\n\n  // On Mount\n  useEffect(() => {\n    (ref.current as VisComponentElement<Graph<N, L>>).__component__ = component\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisGraph: (<N extends GraphInputNode, L extends GraphInputLink>(props: VisGraphProps<N, L>) => JSX.Element | null) = React.memo(React.forwardRef(VisGraphFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,UAAU,CAAsD,KAA0B,EAAE,IAAqC,EAAA;AACxI,IAAA,MAAM,GAAG,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAA;AAC1D,IAAA,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAc,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IAG3D,SAAS,CAAC,MAAK;AACZ,QAAA,GAAG,CAAC,OAA4C,CAAC,aAAa,GAAG,SAAS,CAAA;KAC5E,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;AAChD,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,QAAQ,GAA6G,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/graph/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { Graph, GraphConfigInterface, GraphInputNode, GraphInputLink } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisGraphRef<N extends GraphInputNode, L extends GraphInputLink> = {\n  component: Graph<N, L>;\n}\n\nexport type VisGraphProps<N extends GraphInputNode, L extends GraphInputLink> = GraphConfigInterface<N, L> & {\n  data?: any;\n  ref?: Ref<VisGraphRef<N, L>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisGraphFC<N extends GraphInputNode, L extends GraphInputLink> (props: VisGraphProps<N, L>, fRef: ForwardedRef<VisGraphRef<N, L>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Graph<N, L>>>(null)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<Graph<N, L>>)\n    element.__component__?.destroy() // Destroy component if exists already (to comply with React 18 strict mode, which renders components twice in dev mode)\n    element.__component__ = new Graph(props)\n    // We don't have a clean up function because the component will be destroyed by its container (e.g. XYContainer or SingleContainer)\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = (ref.current as VisComponentElement<Graph<N, L>>).__component__\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component: (ref.current as VisComponentElement<Graph<N, L>>).__component__ }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisGraph: (<N extends GraphInputNode, L extends GraphInputLink>(props: VisGraphProps<N, L>) => JSX.Element | null) = React.memo(React.forwardRef(VisGraphFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,UAAU,CAAsD,KAA0B,EAAE,IAAqC,EAAA;AACxI,IAAA,MAAM,GAAG,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAA;IAG1D,SAAS,CAAC,MAAK;;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAA4C,CAAA;AACjE,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,EAAE,CAAA;QAChC,OAAO,CAAC,aAAa,GAAG,IAAI,KAAK,CAAC,KAAK,CAAC,CAAA;KAEzC,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAI,GAAG,CAAC,OAA4C,CAAC,aAAa,CAAA;QACjF,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAG,GAAG,CAAC,OAA4C,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;AACjH,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,QAAQ,GAA6G,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,aAAa;;;;"}

package/components/grouped-bar/index.js

@@ -1,19 +1,22 @@
-import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useEffect, useImperativeHandle } from 'react';
 import { GroupedBar } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 function VisGroupedBarFC(props, fRef) {
     const ref = useRef(null);
-    const [component] = useState(new GroupedBar(props));
     useEffect(() => {
-        ref.current.__component__ = component;
+        var _a;
+        const element = ref.current;
+        (_a = element.__component__) === null || _a === void 0 ? void 0 : _a.destroy();
+        element.__component__ = new GroupedBar(props);
     }, []);
     useEffect(() => {
+        const component = ref.current.__component__;
         if (props.data)
             component === null || component === void 0 ? void 0 : component.setData(props.data);
         component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ component }));
+    useImperativeHandle(fRef, () => ({ component: ref.current.__component__ }));
     return React.createElement("vis-component", { ref: ref });
 }
 const VisGroupedBar = React.memo(React.forwardRef(VisGroupedBarFC), arePropsEqual);

package/components/grouped-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/grouped-bar/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { GroupedBar, GroupedBarConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisGroupedBarRef<Datum> = {\n  component: GroupedBar<Datum>;\n}\n\nexport type VisGroupedBarProps<Datum> = GroupedBarConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisGroupedBarRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisGroupedBarFC<Datum> (props: VisGroupedBarProps<Datum>, fRef: ForwardedRef<VisGroupedBarRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<GroupedBar<Datum>>>(null)\n  const [component] = useState<GroupedBar<Datum>>(new GroupedBar(props))\n\n  // On Mount\n  useEffect(() => {\n    (ref.current as VisComponentElement<GroupedBar<Datum>>).__component__ = component\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisGroupedBar: (<Datum>(props: VisGroupedBarProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisGroupedBarFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,eAAe,CAAS,KAAgC,EAAE,IAA2C,EAAA;AAC5G,IAAA,MAAM,GAAG,GAAG,MAAM,CAAyC,IAAI,CAAC,CAAA;AAChE,IAAA,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAoB,IAAI,UAAU,CAAC,KAAK,CAAC,CAAC,CAAA;IAGtE,SAAS,CAAC,MAAK;AACZ,QAAA,GAAG,CAAC,OAAkD,CAAC,aAAa,GAAG,SAAS,CAAA;KAClF,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;AAChD,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,aAAa,GAAsE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/grouped-bar/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { GroupedBar, GroupedBarConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisGroupedBarRef<Datum> = {\n  component: GroupedBar<Datum>;\n}\n\nexport type VisGroupedBarProps<Datum> = GroupedBarConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisGroupedBarRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisGroupedBarFC<Datum> (props: VisGroupedBarProps<Datum>, fRef: ForwardedRef<VisGroupedBarRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<GroupedBar<Datum>>>(null)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<GroupedBar<Datum>>)\n    element.__component__?.destroy() // Destroy component if exists already (to comply with React 18 strict mode, which renders components twice in dev mode)\n    element.__component__ = new GroupedBar(props)\n    // We don't have a clean up function because the component will be destroyed by its container (e.g. XYContainer or SingleContainer)\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = (ref.current as VisComponentElement<GroupedBar<Datum>>).__component__\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component: (ref.current as VisComponentElement<GroupedBar<Datum>>).__component__ }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisGroupedBar: (<Datum>(props: VisGroupedBarProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisGroupedBarFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,eAAe,CAAS,KAAgC,EAAE,IAA2C,EAAA;AAC5G,IAAA,MAAM,GAAG,GAAG,MAAM,CAAyC,IAAI,CAAC,CAAA;IAGhE,SAAS,CAAC,MAAK;;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAAkD,CAAA;AACvE,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,EAAE,CAAA;QAChC,OAAO,CAAC,aAAa,GAAG,IAAI,UAAU,CAAC,KAAK,CAAC,CAAA;KAE9C,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAI,GAAG,CAAC,OAAkD,CAAC,aAAa,CAAA;QACvF,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAG,GAAG,CAAC,OAAkD,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;AACvH,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,aAAa,GAAsE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,aAAa;;;;"}

package/components/line/index.js

@@ -1,19 +1,22 @@
-import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useEffect, useImperativeHandle } from 'react';
 import { Line } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 function VisLineFC(props, fRef) {
     const ref = useRef(null);
-    const [component] = useState(new Line(props));
     useEffect(() => {
-        ref.current.__component__ = component;
+        var _a;
+        const element = ref.current;
+        (_a = element.__component__) === null || _a === void 0 ? void 0 : _a.destroy();
+        element.__component__ = new Line(props);
     }, []);
     useEffect(() => {
+        const component = ref.current.__component__;
         if (props.data)
             component === null || component === void 0 ? void 0 : component.setData(props.data);
         component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ component }));
+    useImperativeHandle(fRef, () => ({ component: ref.current.__component__ }));
     return React.createElement("vis-component", { ref: ref });
 }
 const VisLine = React.memo(React.forwardRef(VisLineFC), arePropsEqual);

package/components/line/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/line/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { Line, LineConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisLineRef<Datum> = {\n  component: Line<Datum>;\n}\n\nexport type VisLineProps<Datum> = LineConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisLineRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisLineFC<Datum> (props: VisLineProps<Datum>, fRef: ForwardedRef<VisLineRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Line<Datum>>>(null)\n  const [component] = useState<Line<Datum>>(new Line(props))\n\n  // On Mount\n  useEffect(() => {\n    (ref.current as VisComponentElement<Line<Datum>>).__component__ = component\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisLine: (<Datum>(props: VisLineProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisLineFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,SAAS,CAAS,KAA0B,EAAE,IAAqC,EAAA;AAC1F,IAAA,MAAM,GAAG,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAA;AAC1D,IAAA,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAc,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;IAG1D,SAAS,CAAC,MAAK;AACZ,QAAA,GAAG,CAAC,OAA4C,CAAC,aAAa,GAAG,SAAS,CAAA;KAC5E,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;AAChD,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,OAAO,GAAgE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/line/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { Line, LineConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisLineRef<Datum> = {\n  component: Line<Datum>;\n}\n\nexport type VisLineProps<Datum> = LineConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisLineRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisLineFC<Datum> (props: VisLineProps<Datum>, fRef: ForwardedRef<VisLineRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Line<Datum>>>(null)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<Line<Datum>>)\n    element.__component__?.destroy() // Destroy component if exists already (to comply with React 18 strict mode, which renders components twice in dev mode)\n    element.__component__ = new Line(props)\n    // We don't have a clean up function because the component will be destroyed by its container (e.g. XYContainer or SingleContainer)\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = (ref.current as VisComponentElement<Line<Datum>>).__component__\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component: (ref.current as VisComponentElement<Line<Datum>>).__component__ }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisLine: (<Datum>(props: VisLineProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisLineFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,SAAS,CAAS,KAA0B,EAAE,IAAqC,EAAA;AAC1F,IAAA,MAAM,GAAG,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAA;IAG1D,SAAS,CAAC,MAAK;;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAA4C,CAAA;AACjE,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,EAAE,CAAA;QAChC,OAAO,CAAC,aAAa,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAA;KAExC,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAI,GAAG,CAAC,OAA4C,CAAC,aAAa,CAAA;QACjF,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAG,GAAG,CAAC,OAA4C,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;AACjH,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,OAAO,GAAgE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,aAAa;;;;"}

package/components/sankey/index.js

@@ -1,19 +1,22 @@
-import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useEffect, useImperativeHandle } from 'react';
 import { Sankey } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 function VisSankeyFC(props, fRef) {
     const ref = useRef(null);
-    const [component] = useState(new Sankey(props));
     useEffect(() => {
-        ref.current.__component__ = component;
+        var _a;
+        const element = ref.current;
+        (_a = element.__component__) === null || _a === void 0 ? void 0 : _a.destroy();
+        element.__component__ = new Sankey(props);
     }, []);
     useEffect(() => {
+        const component = ref.current.__component__;
         if (props.data)
             component === null || component === void 0 ? void 0 : component.setData(props.data);
         component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ component }));
+    useImperativeHandle(fRef, () => ({ component: ref.current.__component__ }));
     return React.createElement("vis-component", { ref: ref });
 }
 const VisSankey = React.memo(React.forwardRef(VisSankeyFC), arePropsEqual);

package/components/sankey/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/sankey/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { Sankey, SankeyConfigInterface, SankeyInputNode, SankeyInputLink } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisSankeyRef<N extends SankeyInputNode, L extends SankeyInputLink> = {\n  component: Sankey<N, L>;\n}\n\nexport type VisSankeyProps<N extends SankeyInputNode, L extends SankeyInputLink> = SankeyConfigInterface<N, L> & {\n  data?: any;\n  ref?: Ref<VisSankeyRef<N, L>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisSankeyFC<N extends SankeyInputNode, L extends SankeyInputLink> (props: VisSankeyProps<N, L>, fRef: ForwardedRef<VisSankeyRef<N, L>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Sankey<N, L>>>(null)\n  const [component] = useState<Sankey<N, L>>(new Sankey(props))\n\n  // On Mount\n  useEffect(() => {\n    (ref.current as VisComponentElement<Sankey<N, L>>).__component__ = component\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisSankey: (<N extends SankeyInputNode, L extends SankeyInputLink>(props: VisSankeyProps<N, L>) => JSX.Element | null) = React.memo(React.forwardRef(VisSankeyFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,WAAW,CAAwD,KAA2B,EAAE,IAAsC,EAAA;AAC7I,IAAA,MAAM,GAAG,GAAG,MAAM,CAAoC,IAAI,CAAC,CAAA;AAC3D,IAAA,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAe,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA;IAG7D,SAAS,CAAC,MAAK;AACZ,QAAA,GAAG,CAAC,OAA6C,CAAC,aAAa,GAAG,SAAS,CAAA;KAC7E,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;AAChD,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,SAAS,GAAgH,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/sankey/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { Sankey, SankeyConfigInterface, SankeyInputNode, SankeyInputLink } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisSankeyRef<N extends SankeyInputNode, L extends SankeyInputLink> = {\n  component: Sankey<N, L>;\n}\n\nexport type VisSankeyProps<N extends SankeyInputNode, L extends SankeyInputLink> = SankeyConfigInterface<N, L> & {\n  data?: any;\n  ref?: Ref<VisSankeyRef<N, L>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisSankeyFC<N extends SankeyInputNode, L extends SankeyInputLink> (props: VisSankeyProps<N, L>, fRef: ForwardedRef<VisSankeyRef<N, L>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Sankey<N, L>>>(null)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<Sankey<N, L>>)\n    element.__component__?.destroy() // Destroy component if exists already (to comply with React 18 strict mode, which renders components twice in dev mode)\n    element.__component__ = new Sankey(props)\n    // We don't have a clean up function because the component will be destroyed by its container (e.g. XYContainer or SingleContainer)\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = (ref.current as VisComponentElement<Sankey<N, L>>).__component__\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component: (ref.current as VisComponentElement<Sankey<N, L>>).__component__ }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisSankey: (<N extends SankeyInputNode, L extends SankeyInputLink>(props: VisSankeyProps<N, L>) => JSX.Element | null) = React.memo(React.forwardRef(VisSankeyFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,WAAW,CAAwD,KAA2B,EAAE,IAAsC,EAAA;AAC7I,IAAA,MAAM,GAAG,GAAG,MAAM,CAAoC,IAAI,CAAC,CAAA;IAG3D,SAAS,CAAC,MAAK;;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAA6C,CAAA;AAClE,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,EAAE,CAAA;QAChC,OAAO,CAAC,aAAa,GAAG,IAAI,MAAM,CAAC,KAAK,CAAC,CAAA;KAE1C,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAI,GAAG,CAAC,OAA6C,CAAC,aAAa,CAAA;QAClF,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAG,GAAG,CAAC,OAA6C,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;AAClH,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,SAAS,GAAgH,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,aAAa;;;;"}

package/components/scatter/index.js

@@ -1,19 +1,22 @@
-import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useEffect, useImperativeHandle } from 'react';
 import { Scatter } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 function VisScatterFC(props, fRef) {
     const ref = useRef(null);
-    const [component] = useState(new Scatter(props));
     useEffect(() => {
-        ref.current.__component__ = component;
+        var _a;
+        const element = ref.current;
+        (_a = element.__component__) === null || _a === void 0 ? void 0 : _a.destroy();
+        element.__component__ = new Scatter(props);
     }, []);
     useEffect(() => {
+        const component = ref.current.__component__;
         if (props.data)
             component === null || component === void 0 ? void 0 : component.setData(props.data);
         component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ component }));
+    useImperativeHandle(fRef, () => ({ component: ref.current.__component__ }));
     return React.createElement("vis-component", { ref: ref });
 }
 const VisScatter = React.memo(React.forwardRef(VisScatterFC), arePropsEqual);

package/components/scatter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/scatter/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { Scatter, ScatterConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisScatterRef<Datum> = {\n  component: Scatter<Datum>;\n}\n\nexport type VisScatterProps<Datum> = ScatterConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisScatterRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisScatterFC<Datum> (props: VisScatterProps<Datum>, fRef: ForwardedRef<VisScatterRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Scatter<Datum>>>(null)\n  const [component] = useState<Scatter<Datum>>(new Scatter(props))\n\n  // On Mount\n  useEffect(() => {\n    (ref.current as VisComponentElement<Scatter<Datum>>).__component__ = component\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisScatter: (<Datum>(props: VisScatterProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisScatterFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,YAAY,CAAS,KAA6B,EAAE,IAAwC,EAAA;AACnG,IAAA,MAAM,GAAG,GAAG,MAAM,CAAsC,IAAI,CAAC,CAAA;AAC7D,IAAA,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAiB,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,CAAA;IAGhE,SAAS,CAAC,MAAK;AACZ,QAAA,GAAG,CAAC,OAA+C,CAAC,aAAa,GAAG,SAAS,CAAA;KAC/E,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;AAChD,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,UAAU,GAAmE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/scatter/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { Scatter, ScatterConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisScatterRef<Datum> = {\n  component: Scatter<Datum>;\n}\n\nexport type VisScatterProps<Datum> = ScatterConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisScatterRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisScatterFC<Datum> (props: VisScatterProps<Datum>, fRef: ForwardedRef<VisScatterRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Scatter<Datum>>>(null)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<Scatter<Datum>>)\n    element.__component__?.destroy() // Destroy component if exists already (to comply with React 18 strict mode, which renders components twice in dev mode)\n    element.__component__ = new Scatter(props)\n    // We don't have a clean up function because the component will be destroyed by its container (e.g. XYContainer or SingleContainer)\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = (ref.current as VisComponentElement<Scatter<Datum>>).__component__\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component: (ref.current as VisComponentElement<Scatter<Datum>>).__component__ }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisScatter: (<Datum>(props: VisScatterProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisScatterFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,YAAY,CAAS,KAA6B,EAAE,IAAwC,EAAA;AACnG,IAAA,MAAM,GAAG,GAAG,MAAM,CAAsC,IAAI,CAAC,CAAA;IAG7D,SAAS,CAAC,MAAK;;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAA+C,CAAA;AACpE,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,EAAE,CAAA;QAChC,OAAO,CAAC,aAAa,GAAG,IAAI,OAAO,CAAC,KAAK,CAAC,CAAA;KAE3C,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAI,GAAG,CAAC,OAA+C,CAAC,aAAa,CAAA;QACpF,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAG,GAAG,CAAC,OAA+C,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;AACpH,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,UAAU,GAAmE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,EAAE,aAAa;;;;"}

package/components/stacked-bar/index.js

@@ -1,19 +1,22 @@
-import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useEffect, useImperativeHandle } from 'react';
 import { StackedBar } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 function VisStackedBarFC(props, fRef) {
     const ref = useRef(null);
-    const [component] = useState(new StackedBar(props));
     useEffect(() => {
-        ref.current.__component__ = component;
+        var _a;
+        const element = ref.current;
+        (_a = element.__component__) === null || _a === void 0 ? void 0 : _a.destroy();
+        element.__component__ = new StackedBar(props);
     }, []);
     useEffect(() => {
+        const component = ref.current.__component__;
         if (props.data)
             component === null || component === void 0 ? void 0 : component.setData(props.data);
         component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ component }));
+    useImperativeHandle(fRef, () => ({ component: ref.current.__component__ }));
     return React.createElement("vis-component", { ref: ref });
 }
 const VisStackedBar = React.memo(React.forwardRef(VisStackedBarFC), arePropsEqual);

package/components/stacked-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/stacked-bar/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { StackedBar, StackedBarConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisStackedBarRef<Datum> = {\n  component: StackedBar<Datum>;\n}\n\nexport type VisStackedBarProps<Datum> = StackedBarConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisStackedBarRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisStackedBarFC<Datum> (props: VisStackedBarProps<Datum>, fRef: ForwardedRef<VisStackedBarRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<StackedBar<Datum>>>(null)\n  const [component] = useState<StackedBar<Datum>>(new StackedBar(props))\n\n  // On Mount\n  useEffect(() => {\n    (ref.current as VisComponentElement<StackedBar<Datum>>).__component__ = component\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisStackedBar: (<Datum>(props: VisStackedBarProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisStackedBarFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,eAAe,CAAS,KAAgC,EAAE,IAA2C,EAAA;AAC5G,IAAA,MAAM,GAAG,GAAG,MAAM,CAAyC,IAAI,CAAC,CAAA;AAChE,IAAA,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAoB,IAAI,UAAU,CAAC,KAAK,CAAC,CAAC,CAAA;IAGtE,SAAS,CAAC,MAAK;AACZ,QAAA,GAAG,CAAC,OAAkD,CAAC,aAAa,GAAG,SAAS,CAAA;KAClF,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;AAChD,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,aAAa,GAAsE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/stacked-bar/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { StackedBar, StackedBarConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisStackedBarRef<Datum> = {\n  component: StackedBar<Datum>;\n}\n\nexport type VisStackedBarProps<Datum> = StackedBarConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisStackedBarRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisStackedBarFC<Datum> (props: VisStackedBarProps<Datum>, fRef: ForwardedRef<VisStackedBarRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<StackedBar<Datum>>>(null)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<StackedBar<Datum>>)\n    element.__component__?.destroy() // Destroy component if exists already (to comply with React 18 strict mode, which renders components twice in dev mode)\n    element.__component__ = new StackedBar(props)\n    // We don't have a clean up function because the component will be destroyed by its container (e.g. XYContainer or SingleContainer)\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = (ref.current as VisComponentElement<StackedBar<Datum>>).__component__\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component: (ref.current as VisComponentElement<StackedBar<Datum>>).__component__ }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisStackedBar: (<Datum>(props: VisStackedBarProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisStackedBarFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,eAAe,CAAS,KAAgC,EAAE,IAA2C,EAAA;AAC5G,IAAA,MAAM,GAAG,GAAG,MAAM,CAAyC,IAAI,CAAC,CAAA;IAGhE,SAAS,CAAC,MAAK;;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAAkD,CAAA;AACvE,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,EAAE,CAAA;QAChC,OAAO,CAAC,aAAa,GAAG,IAAI,UAAU,CAAC,KAAK,CAAC,CAAA;KAE9C,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAI,GAAG,CAAC,OAAkD,CAAC,aAAa,CAAA;QACvF,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAG,GAAG,CAAC,OAAkD,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;AACvH,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,aAAa,GAAsE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,aAAa;;;;"}

package/components/timeline/index.js

@@ -1,19 +1,22 @@
-import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useEffect, useImperativeHandle } from 'react';
 import { Timeline } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 function VisTimelineFC(props, fRef) {
     const ref = useRef(null);
-    const [component] = useState(new Timeline(props));
     useEffect(() => {
-        ref.current.__component__ = component;
+        var _a;
+        const element = ref.current;
+        (_a = element.__component__) === null || _a === void 0 ? void 0 : _a.destroy();
+        element.__component__ = new Timeline(props);
     }, []);
     useEffect(() => {
+        const component = ref.current.__component__;
         if (props.data)
             component === null || component === void 0 ? void 0 : component.setData(props.data);
         component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ component }));
+    useImperativeHandle(fRef, () => ({ component: ref.current.__component__ }));
     return React.createElement("vis-component", { ref: ref });
 }
 const VisTimeline = React.memo(React.forwardRef(VisTimelineFC), arePropsEqual);

package/components/timeline/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/timeline/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { Timeline, TimelineConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisTimelineRef<Datum> = {\n  component: Timeline<Datum>;\n}\n\nexport type VisTimelineProps<Datum> = TimelineConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisTimelineRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisTimelineFC<Datum> (props: VisTimelineProps<Datum>, fRef: ForwardedRef<VisTimelineRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Timeline<Datum>>>(null)\n  const [component] = useState<Timeline<Datum>>(new Timeline(props))\n\n  // On Mount\n  useEffect(() => {\n    (ref.current as VisComponentElement<Timeline<Datum>>).__component__ = component\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisTimeline: (<Datum>(props: VisTimelineProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisTimelineFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,aAAa,CAAS,KAA8B,EAAE,IAAyC,EAAA;AACtG,IAAA,MAAM,GAAG,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAA;AAC9D,IAAA,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAkB,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAA;IAGlE,SAAS,CAAC,MAAK;AACZ,QAAA,GAAG,CAAC,OAAgD,CAAC,aAAa,GAAG,SAAS,CAAA;KAChF,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;AAChD,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,WAAW,GAAoE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/timeline/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { Timeline, TimelineConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisTimelineRef<Datum> = {\n  component: Timeline<Datum>;\n}\n\nexport type VisTimelineProps<Datum> = TimelineConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisTimelineRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisTimelineFC<Datum> (props: VisTimelineProps<Datum>, fRef: ForwardedRef<VisTimelineRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Timeline<Datum>>>(null)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<Timeline<Datum>>)\n    element.__component__?.destroy() // Destroy component if exists already (to comply with React 18 strict mode, which renders components twice in dev mode)\n    element.__component__ = new Timeline(props)\n    // We don't have a clean up function because the component will be destroyed by its container (e.g. XYContainer or SingleContainer)\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = (ref.current as VisComponentElement<Timeline<Datum>>).__component__\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component: (ref.current as VisComponentElement<Timeline<Datum>>).__component__ }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisTimeline: (<Datum>(props: VisTimelineProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisTimelineFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,aAAa,CAAS,KAA8B,EAAE,IAAyC,EAAA;AACtG,IAAA,MAAM,GAAG,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAA;IAG9D,SAAS,CAAC,MAAK;;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAAgD,CAAA;AACrE,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,EAAE,CAAA;QAChC,OAAO,CAAC,aAAa,GAAG,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAA;KAE5C,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAI,GAAG,CAAC,OAAgD,CAAC,aAAa,CAAA;QACrF,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAG,GAAG,CAAC,OAAgD,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;AACrH,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,WAAW,GAAoE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE,aAAa;;;;"}

package/components/tooltip/index.js

@@ -1,17 +1,20 @@
-import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useEffect, useImperativeHandle } from 'react';
 import { Tooltip } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 function VisTooltipFC(props, fRef) {
     const ref = useRef(null);
-    const [component] = useState(new Tooltip(props));
     useEffect(() => {
-        ref.current.__component__ = component;
+        var _a;
+        const element = ref.current;
+        (_a = element.__component__) === null || _a === void 0 ? void 0 : _a.destroy();
+        element.__component__ = new Tooltip(props);
     }, []);
     useEffect(() => {
+        const component = ref.current.__component__;
         component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ component }));
+    useImperativeHandle(fRef, () => ({ component: ref.current.__component__ }));
     return React.createElement("vis-tooltip", { ref: ref });
 }
 const VisTooltip = React.memo(React.forwardRef(VisTooltipFC), arePropsEqual);

package/components/tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/tooltip/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { Tooltip, TooltipConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisTooltipRef = {\n  component: Tooltip;\n}\n\nexport type VisTooltipProps = TooltipConfigInterface & {\n  data?: null;\n  ref?: Ref<VisTooltipRef>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisTooltipFC (props: VisTooltipProps, fRef: ForwardedRef<VisTooltipRef>): JSX.Element {\n  const ref = useRef<VisComponentElement<Tooltip>>(null)\n  const [component] = useState<Tooltip>(new Tooltip(props))\n\n  // On Mount\n  useEffect(() => {\n    (ref.current as VisComponentElement<Tooltip>).__component__ = component\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }))\n  return <vis-tooltip ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisTooltip: ((props: VisTooltipProps) => JSX.Element | null) = React.memo(React.forwardRef(VisTooltipFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,YAAY,CAAE,KAAsB,EAAE,IAAiC,EAAA;AAC9E,IAAA,MAAM,GAAG,GAAG,MAAM,CAA+B,IAAI,CAAC,CAAA;AACtD,IAAA,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAU,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,CAAA;IAGzD,SAAS,CAAC,MAAK;AACZ,QAAA,GAAG,CAAC,OAAwC,CAAC,aAAa,GAAG,SAAS,CAAA;KACxE,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;AAChD,IAAA,OAAO,KAAa,CAAA,aAAA,CAAA,aAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AAClC,CAAC;AAIY,MAAA,UAAU,GAAqD,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/tooltip/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { Tooltip, TooltipConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisTooltipRef = {\n  component: Tooltip;\n}\n\nexport type VisTooltipProps = TooltipConfigInterface & {\n  data?: null;\n  ref?: Ref<VisTooltipRef>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisTooltipFC (props: VisTooltipProps, fRef: ForwardedRef<VisTooltipRef>): JSX.Element {\n  const ref = useRef<VisComponentElement<Tooltip>>(null)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<Tooltip>)\n    element.__component__?.destroy() // Destroy component if exists already (to comply with React 18 strict mode, which renders components twice in dev mode)\n    element.__component__ = new Tooltip(props)\n    // We don't have a clean up function because the component will be destroyed by its container (e.g. XYContainer or SingleContainer)\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = (ref.current as VisComponentElement<Tooltip>).__component__\n\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component: (ref.current as VisComponentElement<Tooltip>).__component__ }))\n  return <vis-tooltip ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisTooltip: ((props: VisTooltipProps) => JSX.Element | null) = React.memo(React.forwardRef(VisTooltipFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,YAAY,CAAE,KAAsB,EAAE,IAAiC,EAAA;AAC9E,IAAA,MAAM,GAAG,GAAG,MAAM,CAA+B,IAAI,CAAC,CAAA;IAGtD,SAAS,CAAC,MAAK;;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAAwC,CAAA;AAC7D,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,EAAE,CAAA;QAChC,OAAO,CAAC,aAAa,GAAG,IAAI,OAAO,CAAC,KAAK,CAAC,CAAA;KAE3C,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAI,GAAG,CAAC,OAAwC,CAAC,aAAa,CAAA;QAE7E,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAG,GAAG,CAAC,OAAwC,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;AAC7G,IAAA,OAAO,KAAa,CAAA,aAAA,CAAA,aAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AAClC,CAAC;AAIY,MAAA,UAAU,GAAqD,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,EAAE,aAAa;;;;"}

package/components/topojson-map/index.js

@@ -1,19 +1,22 @@
-import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useEffect, useImperativeHandle } from 'react';
 import { TopoJSONMap } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 function VisTopoJSONMapFC(props, fRef) {
     const ref = useRef(null);
-    const [component] = useState(new TopoJSONMap(props));
     useEffect(() => {
-        ref.current.__component__ = component;
+        var _a;
+        const element = ref.current;
+        (_a = element.__component__) === null || _a === void 0 ? void 0 : _a.destroy();
+        element.__component__ = new TopoJSONMap(props);
     }, []);
     useEffect(() => {
+        const component = ref.current.__component__;
         if (props.data)
             component === null || component === void 0 ? void 0 : component.setData(props.data);
         component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ component }));
+    useImperativeHandle(fRef, () => ({ component: ref.current.__component__ }));
     return React.createElement("vis-component", { ref: ref });
 }
 const VisTopoJSONMap = React.memo(React.forwardRef(VisTopoJSONMapFC), arePropsEqual);

package/components/topojson-map/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/topojson-map/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { TopoJSONMap, TopoJSONMapConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisTopoJSONMapRef<AreaDatum, PointDatum, LinkDatum> = {\n  component: TopoJSONMap<AreaDatum, PointDatum, LinkDatum>;\n}\n\nexport type VisTopoJSONMapProps<AreaDatum, PointDatum, LinkDatum> = TopoJSONMapConfigInterface<AreaDatum, PointDatum, LinkDatum> & {\n  data?: {areas?: AreaDatum[]; points?: PointDatum[]; links?: LinkDatum[]};\n  ref?: Ref<VisTopoJSONMapRef<AreaDatum, PointDatum, LinkDatum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisTopoJSONMapFC<AreaDatum, PointDatum, LinkDatum> (props: VisTopoJSONMapProps<AreaDatum, PointDatum, LinkDatum>, fRef: ForwardedRef<VisTopoJSONMapRef<AreaDatum, PointDatum, LinkDatum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<TopoJSONMap<AreaDatum, PointDatum, LinkDatum>>>(null)\n  const [component] = useState<TopoJSONMap<AreaDatum, PointDatum, LinkDatum>>(new TopoJSONMap(props))\n\n  // On Mount\n  useEffect(() => {\n    (ref.current as VisComponentElement<TopoJSONMap<AreaDatum, PointDatum, LinkDatum>>).__component__ = component\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisTopoJSONMap: (<AreaDatum, PointDatum, LinkDatum>(props: VisTopoJSONMapProps<AreaDatum, PointDatum, LinkDatum>) => JSX.Element | null) = React.memo(React.forwardRef(VisTopoJSONMapFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,gBAAgB,CAAoC,KAA4D,EAAE,IAAuE,EAAA;AAChM,IAAA,MAAM,GAAG,GAAG,MAAM,CAAqE,IAAI,CAAC,CAAA;AAC5F,IAAA,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAgD,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC,CAAA;IAGnG,SAAS,CAAC,MAAK;AACZ,QAAA,GAAG,CAAC,OAA8E,CAAC,aAAa,GAAG,SAAS,CAAA;KAC9G,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;AAChD,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,cAAc,GAA6H,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/topojson-map/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { TopoJSONMap, TopoJSONMapConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisTopoJSONMapRef<AreaDatum, PointDatum, LinkDatum> = {\n  component: TopoJSONMap<AreaDatum, PointDatum, LinkDatum>;\n}\n\nexport type VisTopoJSONMapProps<AreaDatum, PointDatum, LinkDatum> = TopoJSONMapConfigInterface<AreaDatum, PointDatum, LinkDatum> & {\n  data?: {areas?: AreaDatum[]; points?: PointDatum[]; links?: LinkDatum[]};\n  ref?: Ref<VisTopoJSONMapRef<AreaDatum, PointDatum, LinkDatum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisTopoJSONMapFC<AreaDatum, PointDatum, LinkDatum> (props: VisTopoJSONMapProps<AreaDatum, PointDatum, LinkDatum>, fRef: ForwardedRef<VisTopoJSONMapRef<AreaDatum, PointDatum, LinkDatum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<TopoJSONMap<AreaDatum, PointDatum, LinkDatum>>>(null)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<TopoJSONMap<AreaDatum, PointDatum, LinkDatum>>)\n    element.__component__?.destroy() // Destroy component if exists already (to comply with React 18 strict mode, which renders components twice in dev mode)\n    element.__component__ = new TopoJSONMap(props)\n    // We don't have a clean up function because the component will be destroyed by its container (e.g. XYContainer or SingleContainer)\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = (ref.current as VisComponentElement<TopoJSONMap<AreaDatum, PointDatum, LinkDatum>>).__component__\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component: (ref.current as VisComponentElement<TopoJSONMap<AreaDatum, PointDatum, LinkDatum>>).__component__ }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisTopoJSONMap: (<AreaDatum, PointDatum, LinkDatum>(props: VisTopoJSONMapProps<AreaDatum, PointDatum, LinkDatum>) => JSX.Element | null) = React.memo(React.forwardRef(VisTopoJSONMapFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,gBAAgB,CAAoC,KAA4D,EAAE,IAAuE,EAAA;AAChM,IAAA,MAAM,GAAG,GAAG,MAAM,CAAqE,IAAI,CAAC,CAAA;IAG5F,SAAS,CAAC,MAAK;;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAA8E,CAAA;AACnG,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,EAAE,CAAA;QAChC,OAAO,CAAC,aAAa,GAAG,IAAI,WAAW,CAAC,KAAK,CAAC,CAAA;KAE/C,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAI,GAAG,CAAC,OAA8E,CAAC,aAAa,CAAA;QACnH,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAG,GAAG,CAAC,OAA8E,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;AACnJ,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,cAAc,GAA6H,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAAE,aAAa;;;;"}

package/components/xy-labels/index.js

@@ -1,19 +1,22 @@
-import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useEffect, useImperativeHandle } from 'react';
 import { XYLabels } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 function VisXYLabelsFC(props, fRef) {
     const ref = useRef(null);
-    const [component] = useState(new XYLabels(props));
     useEffect(() => {
-        ref.current.__component__ = component;
+        var _a;
+        const element = ref.current;
+        (_a = element.__component__) === null || _a === void 0 ? void 0 : _a.destroy();
+        element.__component__ = new XYLabels(props);
     }, []);
     useEffect(() => {
+        const component = ref.current.__component__;
         if (props.data)
             component === null || component === void 0 ? void 0 : component.setData(props.data);
         component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ component }));
+    useImperativeHandle(fRef, () => ({ component: ref.current.__component__ }));
     return React.createElement("vis-component", { ref: ref });
 }
 const VisXYLabels = React.memo(React.forwardRef(VisXYLabelsFC), arePropsEqual);

package/components/xy-labels/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/xy-labels/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { XYLabels, XYLabelsConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisXYLabelsRef<Datum> = {\n  component: XYLabels<Datum>;\n}\n\nexport type VisXYLabelsProps<Datum> = XYLabelsConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisXYLabelsRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisXYLabelsFC<Datum> (props: VisXYLabelsProps<Datum>, fRef: ForwardedRef<VisXYLabelsRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<XYLabels<Datum>>>(null)\n  const [component] = useState<XYLabels<Datum>>(new XYLabels(props))\n\n  // On Mount\n  useEffect(() => {\n    (ref.current as VisComponentElement<XYLabels<Datum>>).__component__ = component\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisXYLabels: (<Datum>(props: VisXYLabelsProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisXYLabelsFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,aAAa,CAAS,KAA8B,EAAE,IAAyC,EAAA;AACtG,IAAA,MAAM,GAAG,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAA;AAC9D,IAAA,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAkB,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAA;IAGlE,SAAS,CAAC,MAAK;AACZ,QAAA,GAAG,CAAC,OAAgD,CAAC,aAAa,GAAG,SAAS,CAAA;KAChF,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;AAChD,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,WAAW,GAAoE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/xy-labels/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { XYLabels, XYLabelsConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisXYLabelsRef<Datum> = {\n  component: XYLabels<Datum>;\n}\n\nexport type VisXYLabelsProps<Datum> = XYLabelsConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisXYLabelsRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisXYLabelsFC<Datum> (props: VisXYLabelsProps<Datum>, fRef: ForwardedRef<VisXYLabelsRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<XYLabels<Datum>>>(null)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<XYLabels<Datum>>)\n    element.__component__?.destroy() // Destroy component if exists already (to comply with React 18 strict mode, which renders components twice in dev mode)\n    element.__component__ = new XYLabels(props)\n    // We don't have a clean up function because the component will be destroyed by its container (e.g. XYContainer or SingleContainer)\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = (ref.current as VisComponentElement<XYLabels<Datum>>).__component__\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component: (ref.current as VisComponentElement<XYLabels<Datum>>).__component__ }))\n  return <vis-component ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisXYLabels: (<Datum>(props: VisXYLabelsProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisXYLabelsFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,aAAa,CAAS,KAA8B,EAAE,IAAyC,EAAA;AACtG,IAAA,MAAM,GAAG,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAA;IAG9D,SAAS,CAAC,MAAK;;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAAgD,CAAA;AACrE,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,EAAE,CAAA;QAChC,OAAO,CAAC,aAAa,GAAG,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAA;KAE5C,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAI,GAAG,CAAC,OAAgD,CAAC,aAAa,CAAA;QACrF,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAG,GAAG,CAAC,OAAgD,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;AACrH,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,WAAW,GAAoE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE,aAAa;;;;"}

package/containers/single-container/index.js

@@ -12,8 +12,9 @@ function VisSingleContainerFC(props) {
     };
     useEffect(() => {
         setData(props.data);
-        setChart(new SingleContainer(container.current, getConfig(), props.data));
-        return () => chart === null || chart === void 0 ? void 0 : chart.destroy();
+        const c = new SingleContainer(container.current, getConfig(), props.data);
+        setChart(c);
+        return () => c.destroy();
     }, []);
     useEffect(() => {
         const preventRender = true;

package/containers/single-container/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/containers/single-container/index.tsx"],"sourcesContent":["// eslint-disable-next-line no-use-before-define\nimport React, { ReactNode, useEffect, useRef, useState, PropsWithChildren } from 'react'\nimport { SingleContainer, SingleContainerConfigInterface, ComponentCore, Tooltip } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisSingleContainerProps<Data> = SingleContainerConfigInterface<Data> & {\n  data?: Data;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisSingleContainerFC<Data> (props: PropsWithChildren<VisSingleContainerProps<Data>>): JSX.Element {\n  const container = useRef<HTMLDivElement>(null)\n  const [chart, setChart] = useState<SingleContainer<Data>>()\n  const [data, setData] = useState<Data | undefined>(undefined)\n\n  const getConfig = (): SingleContainerConfigInterface<Data> => ({\n    ...props,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    component: container.current?.querySelector<VisComponentElement<ComponentCore<Data>>>('vis-component')?.__component__,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    tooltip: container.current?.querySelector<VisComponentElement<Tooltip>>('vis-tooltip')?.__component__,\n  })\n\n  // On Mount\n  useEffect(() => {\n    setData(props.data)\n    setChart(\n      new SingleContainer<Data>(container.current as HTMLDivElement, getConfig(), props.data)\n    )\n    return () => chart?.destroy()\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const preventRender = true\n\n    // Set new Data without re-render\n    if (props.data && (props.data !== data)) {\n      chart?.setData(props.data, preventRender)\n      setData(props.data)\n    }\n\n    // Update Container and render\n    chart?.updateContainer(getConfig())\n  })\n\n  return (\n    <div ref={container} style={{ width: '100%', height: '100%', position: 'relative' }}>\n      {props.children}\n    </div>\n  )\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisSingleContainer: (<Data>(props: PropsWithChildren<VisSingleContainerProps<Data>>) => JSX.Element | null) =\n  React.memo(VisSingleContainerFC, arePropsEqual)\n"],"names":[],"mappings":";;;;AAeA,SAAS,oBAAoB,CAAQ,KAAuD,EAAA;AAC1F,IAAA,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAyB,CAAA;IAC3D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAmB,SAAS,CAAC,CAAA;IAE7D,MAAM,SAAS,GAAG,MAA2C;;AAAC,QAAA,QACzD,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,KAAK,CAER,EAAA,EAAA,SAAS,EAAE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,aAAa,CAA2C,eAAe,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,aAAa,EAErH,OAAO,EAAE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,aAAa,CAA+B,aAAa,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,aAAa,KACrG;KAAA,CAAA;IAGF,SAAS,CAAC,MAAK;AACb,QAAA,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;AACnB,QAAA,QAAQ,CACN,IAAI,eAAe,CAAO,SAAS,CAAC,OAAyB,EAAE,SAAS,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,CACxF,CAAA;QACD,OAAO,MAAM,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,OAAO,EAAE,CAAA;KAC9B,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,MAAM,aAAa,GAAG,IAAI,CAAA;QAG1B,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE;AACvC,YAAA,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,aAAa,CAAC,CAAA;AACzC,YAAA,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;AACpB,SAAA;QAGD,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,eAAe,CAAC,SAAS,EAAE,CAAC,CAAA;AACrC,KAAC,CAAC,CAAA;IAEF,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,EAChF,EAAA,KAAK,CAAC,QAAQ,CACX,EACP;AACH,CAAC;AAIM,MAAM,kBAAkB,GAC7B,KAAK,CAAC,IAAI,CAAC,oBAAoB,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/containers/single-container/index.tsx"],"sourcesContent":["// eslint-disable-next-line no-use-before-define\nimport React, { ReactNode, useEffect, useRef, useState, PropsWithChildren } from 'react'\nimport { SingleContainer, SingleContainerConfigInterface, ComponentCore, Tooltip } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisSingleContainerProps<Data> = SingleContainerConfigInterface<Data> & {\n  data?: Data;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisSingleContainerFC<Data> (props: PropsWithChildren<VisSingleContainerProps<Data>>): JSX.Element {\n  const container = useRef<HTMLDivElement>(null)\n  const [chart, setChart] = useState<SingleContainer<Data>>()\n  const [data, setData] = useState<Data | undefined>(undefined)\n\n  const getConfig = (): SingleContainerConfigInterface<Data> => ({\n    ...props,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    component: container.current?.querySelector<VisComponentElement<ComponentCore<Data>>>('vis-component')?.__component__,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    tooltip: container.current?.querySelector<VisComponentElement<Tooltip>>('vis-tooltip')?.__component__,\n  })\n\n  // On Mount\n  useEffect(() => {\n    setData(props.data)\n    const c = new SingleContainer<Data>(container.current as HTMLDivElement, getConfig(), props.data)\n    setChart(c)\n    return () => c.destroy()\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const preventRender = true\n\n    // Set new Data without re-render\n    if (props.data && (props.data !== data)) {\n      chart?.setData(props.data, preventRender)\n      setData(props.data)\n    }\n\n    // Update Container and render\n    chart?.updateContainer(getConfig())\n  })\n\n  return (\n    <div ref={container} style={{ width: '100%', height: '100%', position: 'relative' }}>\n      {props.children}\n    </div>\n  )\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisSingleContainer: (<Data>(props: PropsWithChildren<VisSingleContainerProps<Data>>) => JSX.Element | null) =\n  React.memo(VisSingleContainerFC, arePropsEqual)\n"],"names":[],"mappings":";;;;AAeA,SAAS,oBAAoB,CAAQ,KAAuD,EAAA;AAC1F,IAAA,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAyB,CAAA;IAC3D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAmB,SAAS,CAAC,CAAA;IAE7D,MAAM,SAAS,GAAG,MAA2C;;AAAC,QAAA,QACzD,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,KAAK,CAER,EAAA,EAAA,SAAS,EAAE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,aAAa,CAA2C,eAAe,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,aAAa,EAErH,OAAO,EAAE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,aAAa,CAA+B,aAAa,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,aAAa,KACrG;KAAA,CAAA;IAGF,SAAS,CAAC,MAAK;AACb,QAAA,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;AACnB,QAAA,MAAM,CAAC,GAAG,IAAI,eAAe,CAAO,SAAS,CAAC,OAAyB,EAAE,SAAS,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;QACjG,QAAQ,CAAC,CAAC,CAAC,CAAA;AACX,QAAA,OAAO,MAAM,CAAC,CAAC,OAAO,EAAE,CAAA;KACzB,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,MAAM,aAAa,GAAG,IAAI,CAAA;QAG1B,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE;AACvC,YAAA,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,aAAa,CAAC,CAAA;AACzC,YAAA,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;AACpB,SAAA;QAGD,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,eAAe,CAAC,SAAS,EAAE,CAAC,CAAA;AACrC,KAAC,CAAC,CAAA;IAEF,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,EAChF,EAAA,KAAK,CAAC,QAAQ,CACX,EACP;AACH,CAAC;AAIM,MAAM,kBAAkB,GAC7B,KAAK,CAAC,IAAI,CAAC,oBAAoB,EAAE,aAAa;;;;"}

package/containers/xy-container/index.js

@@ -20,8 +20,9 @@ function VisXYContainerFC(props) {
     };
     useEffect(() => {
         setData(props.data);
-        setChart(new XYContainer(container.current, getConfig(), props.data));
-        return () => chart === null || chart === void 0 ? void 0 : chart.destroy();
+        const c = new XYContainer(container.current, getConfig(), props.data);
+        setChart(c);
+        return () => c.destroy();
     }, []);
     useEffect(() => {
         const preventRender = true;

package/containers/xy-container/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/containers/xy-container/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { ReactNode, useEffect, useRef, useState, PropsWithChildren } from 'react'\nimport { XYContainer, XYContainerConfigInterface, XYComponentCore, Tooltip, Crosshair, Axis, AxisType } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisXYContainerProps<Datum> = XYContainerConfigInterface<Datum> & {\n  data?: Datum[];\n  className?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function VisXYContainerFC<Datum> (props: PropsWithChildren<VisXYContainerProps<Datum>>): JSX.Element {\n  const container = useRef<HTMLDivElement>(null)\n  const [chart, setChart] = useState<XYContainer<Datum>>()\n  const [data, setData] = useState<Datum[] | undefined>(undefined)\n\n  const getConfig = (): XYContainerConfigInterface<Datum> => ({\n    components: Array\n      .from(container.current?.querySelectorAll<VisComponentElement<XYComponentCore<Datum>>>('vis-component') ?? [])\n      .map(c => c.__component__),\n    tooltip: container.current?.querySelector<VisComponentElement<Tooltip>>('vis-tooltip')?.__component__,\n    crosshair: container.current?.querySelector<VisComponentElement<Crosshair<Datum>>>('vis-crosshair')?.__component__,\n    xAxis: Array\n      .from(container.current?.querySelectorAll<VisComponentElement<Axis<Datum>>>('vis-axis') ?? [])\n      .map(c => c.__component__)\n      .find(c => c.config.type === AxisType.X),\n    yAxis: Array\n      .from(container.current?.querySelectorAll<VisComponentElement<Axis<Datum>>>('vis-axis') ?? [])\n      .map(c => c.__component__)\n      .find(c => c.config.type === AxisType.Y),\n    margin: { top: 5, left: 5, right: 5, bottom: 5 },\n    ...props,\n  })\n\n  // On Mount\n  useEffect(() => {\n    setData(props.data)\n    setChart(\n      new XYContainer<Datum>(container.current as HTMLDivElement, getConfig(), props.data)\n    )\n\n    return () => chart?.destroy()\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const preventRender = true\n\n    // Set new Data without re-render\n    if (props.data && (props.data !== data)) {\n      chart?.setData(props.data, preventRender)\n      setData(props.data)\n    }\n    // Update Container and render\n    chart?.updateContainer(getConfig())\n  })\n\n  return (\n    <div ref={container} className={props.className}>\n      {props.children}\n    </div>\n  )\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisXYContainer: (<Datum>(props: PropsWithChildren<VisXYContainerProps<Datum>>) => JSX.Element | null) =\n  React.memo(VisXYContainerFC, arePropsEqual)\n"],"names":[],"mappings":";;;;AAgBM,SAAU,gBAAgB,CAAS,KAAoD,EAAA;AAC3F,IAAA,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAsB,CAAA;IACxD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAsB,SAAS,CAAC,CAAA;IAEhE,MAAM,SAAS,GAAG,MAAwC;;QAAC,QAAA,MAAA,CAAA,MAAA,CAAA,EACzD,UAAU,EAAE,KAAK;AACd,iBAAA,IAAI,CAAC,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,gBAAgB,CAA8C,eAAe,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,EAAE,CAAC;AAC7G,iBAAA,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC,EAC5B,OAAO,EAAE,MAAA,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,aAAa,CAA+B,aAAa,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,aAAa,EACrG,SAAS,EAAE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,0CAAE,aAAa,CAAwC,eAAe,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,aAAa,EAClH,KAAK,EAAE,KAAK;AACT,iBAAA,IAAI,CAAC,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,gBAAgB,CAAmC,UAAU,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,EAAE,CAAC;iBAC7F,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC;AACzB,iBAAA,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,EAC1C,KAAK,EAAE,KAAK;AACT,iBAAA,IAAI,CAAC,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,gBAAgB,CAAmC,UAAU,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,EAAE,CAAC;iBAC7F,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC;AACzB,iBAAA,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,EAC1C,MAAM,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAC7C,EAAA,KAAK,GACR;KAAA,CAAA;IAGF,SAAS,CAAC,MAAK;AACb,QAAA,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;AACnB,QAAA,QAAQ,CACN,IAAI,WAAW,CAAQ,SAAS,CAAC,OAAyB,EAAE,SAAS,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,CACrF,CAAA;QAED,OAAO,MAAM,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,OAAO,EAAE,CAAA;KAC9B,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,MAAM,aAAa,GAAG,IAAI,CAAA;QAG1B,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE;AACvC,YAAA,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,aAAa,CAAC,CAAA;AACzC,YAAA,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;AACpB,SAAA;QAED,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,eAAe,CAAC,SAAS,EAAE,CAAC,CAAA;AACrC,KAAC,CAAC,CAAA;AAEF,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAC5C,EAAA,KAAK,CAAC,QAAQ,CACX,EACP;AACH,CAAC;AAIM,MAAM,cAAc,GACzB,KAAK,CAAC,IAAI,CAAC,gBAAgB,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/containers/xy-container/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { ReactNode, useEffect, useRef, useState, PropsWithChildren } from 'react'\nimport { XYContainer, XYContainerConfigInterface, XYComponentCore, Tooltip, Crosshair, Axis, AxisType } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisXYContainerProps<Datum> = XYContainerConfigInterface<Datum> & {\n  data?: Datum[];\n  className?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function VisXYContainerFC<Datum> (props: PropsWithChildren<VisXYContainerProps<Datum>>): JSX.Element {\n  const container = useRef<HTMLDivElement>(null)\n  const [chart, setChart] = useState<XYContainer<Datum>>()\n  const [data, setData] = useState<Datum[] | undefined>(undefined)\n\n  const getConfig = (): XYContainerConfigInterface<Datum> => ({\n    components: Array\n      .from(container.current?.querySelectorAll<VisComponentElement<XYComponentCore<Datum>>>('vis-component') ?? [])\n      .map(c => c.__component__),\n    tooltip: container.current?.querySelector<VisComponentElement<Tooltip>>('vis-tooltip')?.__component__,\n    crosshair: container.current?.querySelector<VisComponentElement<Crosshair<Datum>>>('vis-crosshair')?.__component__,\n    xAxis: Array\n      .from(container.current?.querySelectorAll<VisComponentElement<Axis<Datum>>>('vis-axis') ?? [])\n      .map(c => c.__component__)\n      .find(c => c.config.type === AxisType.X),\n    yAxis: Array\n      .from(container.current?.querySelectorAll<VisComponentElement<Axis<Datum>>>('vis-axis') ?? [])\n      .map(c => c.__component__)\n      .find(c => c.config.type === AxisType.Y),\n    margin: { top: 5, left: 5, right: 5, bottom: 5 },\n    ...props,\n  })\n\n  // On Mount\n  useEffect(() => {\n    setData(props.data)\n    const c = new XYContainer<Datum>(container.current as HTMLDivElement, getConfig(), props.data)\n    setChart(c)\n\n    return () => c.destroy()\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const preventRender = true\n\n    // Set new Data without re-render\n    if (props.data && (props.data !== data)) {\n      chart?.setData(props.data, preventRender)\n      setData(props.data)\n    }\n    // Update Container and render\n    chart?.updateContainer(getConfig())\n  })\n\n  return (\n    <div ref={container} className={props.className}>\n      {props.children}\n    </div>\n  )\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisXYContainer: (<Datum>(props: PropsWithChildren<VisXYContainerProps<Datum>>) => JSX.Element | null) =\n  React.memo(VisXYContainerFC, arePropsEqual)\n"],"names":[],"mappings":";;;;AAgBM,SAAU,gBAAgB,CAAS,KAAoD,EAAA;AAC3F,IAAA,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAsB,CAAA;IACxD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAsB,SAAS,CAAC,CAAA;IAEhE,MAAM,SAAS,GAAG,MAAwC;;QAAC,QAAA,MAAA,CAAA,MAAA,CAAA,EACzD,UAAU,EAAE,KAAK;AACd,iBAAA,IAAI,CAAC,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,gBAAgB,CAA8C,eAAe,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,EAAE,CAAC;AAC7G,iBAAA,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC,EAC5B,OAAO,EAAE,MAAA,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,aAAa,CAA+B,aAAa,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,aAAa,EACrG,SAAS,EAAE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,0CAAE,aAAa,CAAwC,eAAe,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,aAAa,EAClH,KAAK,EAAE,KAAK;AACT,iBAAA,IAAI,CAAC,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,gBAAgB,CAAmC,UAAU,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,EAAE,CAAC;iBAC7F,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC;AACzB,iBAAA,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,EAC1C,KAAK,EAAE,KAAK;AACT,iBAAA,IAAI,CAAC,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,gBAAgB,CAAmC,UAAU,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,EAAE,CAAC;iBAC7F,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC;AACzB,iBAAA,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,EAC1C,MAAM,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAC7C,EAAA,KAAK,GACR;KAAA,CAAA;IAGF,SAAS,CAAC,MAAK;AACb,QAAA,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;AACnB,QAAA,MAAM,CAAC,GAAG,IAAI,WAAW,CAAQ,SAAS,CAAC,OAAyB,EAAE,SAAS,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9F,QAAQ,CAAC,CAAC,CAAC,CAAA;AAEX,QAAA,OAAO,MAAM,CAAC,CAAC,OAAO,EAAE,CAAA;KACzB,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,MAAM,aAAa,GAAG,IAAI,CAAA;QAG1B,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE;AACvC,YAAA,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,aAAa,CAAC,CAAA;AACzC,YAAA,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;AACpB,SAAA;QAED,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,eAAe,CAAC,SAAS,EAAE,CAAC,CAAA;AACrC,KAAC,CAAC,CAAA;AAEF,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAC5C,EAAA,KAAK,CAAC,QAAQ,CACX,EACP;AACH,CAAC;AAIM,MAAM,cAAc,GACzB,KAAK,CAAC,IAAI,CAAC,gBAAgB,EAAE,aAAa;;;;"}

package/html-components/bullet-legend/index.js

@@ -5,8 +5,9 @@ function VisBulletLegend(props) {
     const container = useRef(null);
     const [component, setComponent] = useState();
     useEffect(() => {
-        setComponent(new BulletLegend(container.current, props));
-        return () => component === null || component === void 0 ? void 0 : component.destroy();
+        const c = new BulletLegend(container.current, props);
+        setComponent(c);
+        return () => c === null || c === void 0 ? void 0 : c.destroy();
     }, []);
     useEffect(() => {
         component === null || component === void 0 ? void 0 : component.update(props);

package/html-components/bullet-legend/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/html-components/bullet-legend/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react'\nimport { BulletLegend, BulletLegendConfigInterface } from '@unovis/ts'\n\nexport type VisBulletLegendProps = BulletLegendConfigInterface\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function VisBulletLegend (props: VisBulletLegendProps): JSX.Element {\n  const container = useRef<HTMLDivElement>(null)\n  const [component, setComponent] = useState<BulletLegend>()\n\n  // On Mount\n  useEffect(() => {\n    setComponent(\n      new BulletLegend(container.current as HTMLDivElement, props)\n    )\n\n    return () => component?.destroy()\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    component?.update(props)\n  })\n\n  return <div ref={container} />\n}\n"],"names":[],"mappings":";;;AAMM,SAAU,eAAe,CAAE,KAA2B,EAAA;AAC1D,IAAA,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAgB,CAAA;IAG1D,SAAS,CAAC,MAAK;QACb,YAAY,CACV,IAAI,YAAY,CAAC,SAAS,CAAC,OAAyB,EAAE,KAAK,CAAC,CAC7D,CAAA;QAED,OAAO,MAAM,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,EAAE,CAAA;KAClC,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,MAAM,CAAC,KAAK,CAAC,CAAA;AAC1B,KAAC,CAAC,CAAA;AAEF,IAAA,OAAO,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,SAAS,GAAI,CAAA;AAChC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/html-components/bullet-legend/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react'\nimport { BulletLegend, BulletLegendConfigInterface } from '@unovis/ts'\n\nexport type VisBulletLegendProps = BulletLegendConfigInterface\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function VisBulletLegend (props: VisBulletLegendProps): JSX.Element {\n  const container = useRef<HTMLDivElement>(null)\n  const [component, setComponent] = useState<BulletLegend>()\n\n  // On Mount\n  useEffect(() => {\n    const c = new BulletLegend(container.current as HTMLDivElement, props)\n    setComponent(c)\n\n    return () => c?.destroy()\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    component?.update(props)\n  })\n\n  return <div ref={container} />\n}\n"],"names":[],"mappings":";;;AAMM,SAAU,eAAe,CAAE,KAA2B,EAAA;AAC1D,IAAA,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAgB,CAAA;IAG1D,SAAS,CAAC,MAAK;QACb,MAAM,CAAC,GAAG,IAAI,YAAY,CAAC,SAAS,CAAC,OAAyB,EAAE,KAAK,CAAC,CAAA;QACtE,YAAY,CAAC,CAAC,CAAC,CAAA;QAEf,OAAO,MAAM,CAAC,KAAA,IAAA,IAAD,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAD,CAAC,CAAE,OAAO,EAAE,CAAA;KAC1B,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,MAAM,CAAC,KAAK,CAAC,CAAA;AAC1B,KAAC,CAAC,CAAA;AAEF,IAAA,OAAO,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,SAAS,GAAI,CAAA;AAChC;;;;"}

package/html-components/leaflet-flow-map/index.js

@@ -6,8 +6,9 @@ function VisLeafletFlowMapFC(props, ref) {
     const container = useRef(null);
     const [component, setComponent] = useState();
     useEffect(() => {
-        setComponent(new LeafletFlowMap(container.current, props, props.data));
-        return () => component === null || component === void 0 ? void 0 : component.destroy();
+        const c = new LeafletFlowMap(container.current, props, props.data);
+        setComponent(c);
+        return () => c === null || c === void 0 ? void 0 : c.destroy();
     }, []);
     useEffect(() => {
         if (props.data)

package/html-components/leaflet-flow-map/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/html-components/leaflet-flow-map/index.tsx"],"sourcesContent":["import React, { ForwardedRef, Ref, useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { LeafletFlowMap, LeafletFlowMapConfigInterface } from '@unovis/ts'\nimport { arePropsEqual } from '../../utils/react'\n\nexport type VisLeafletFlowMapProps<PointDatum, FlowDatum> = LeafletFlowMapConfigInterface<PointDatum, FlowDatum> & {\n  data?: { points: PointDatum[]; flows: FlowDatum[] };\n  ref?: Ref<VisLeafletFlowMapRef<PointDatum, FlowDatum>>;\n  className?: string;\n}\n\nexport type VisLeafletFlowMapRef<PointDatum, FlowDatum> = {\n  component: LeafletFlowMap<PointDatum, FlowDatum> | undefined;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function VisLeafletFlowMapFC<PointDatum, FlowDatum> (\n  props: VisLeafletFlowMapProps<PointDatum, FlowDatum>,\n  ref: ForwardedRef<VisLeafletFlowMapRef<PointDatum, FlowDatum>>\n): JSX.Element {\n  const container = useRef<HTMLDivElement>(null)\n  const [component, setComponent] = useState<LeafletFlowMap<PointDatum, FlowDatum>>()\n\n  // On Mount\n  useEffect(() => {\n    setComponent(\n      new LeafletFlowMap(container.current as HTMLDivElement, props, props.data)\n    )\n\n    return () => component?.destroy()\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(ref, () => ({ component }))\n  return <div ref={container} className={props.className} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisLeafletFlowMap: (<PointDatum, FlowDatum>(props: VisLeafletFlowMapProps<PointDatum, FlowDatum>) => JSX.Element | null) =\n  React.memo(React.forwardRef(VisLeafletFlowMapFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAegB,SAAA,mBAAmB,CACjC,KAAoD,EACpD,GAA8D,EAAA;AAE9D,IAAA,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAyC,CAAA;IAGnF,SAAS,CAAC,MAAK;AACb,QAAA,YAAY,CACV,IAAI,cAAc,CAAC,SAAS,CAAC,OAAyB,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAC3E,CAAA;QAED,OAAO,MAAM,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,EAAE,CAAA;KAClC,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAE9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;IAC/C,OAAO,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAA,CAAI,CAAA;AAC5D,CAAC;AAIY,MAAA,iBAAiB,GAC5B,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/html-components/leaflet-flow-map/index.tsx"],"sourcesContent":["import React, { ForwardedRef, Ref, useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { LeafletFlowMap, LeafletFlowMapConfigInterface } from '@unovis/ts'\nimport { arePropsEqual } from '../../utils/react'\n\nexport type VisLeafletFlowMapProps<PointDatum, FlowDatum> = LeafletFlowMapConfigInterface<PointDatum, FlowDatum> & {\n  data?: { points: PointDatum[]; flows: FlowDatum[] };\n  ref?: Ref<VisLeafletFlowMapRef<PointDatum, FlowDatum>>;\n  className?: string;\n}\n\nexport type VisLeafletFlowMapRef<PointDatum, FlowDatum> = {\n  component: LeafletFlowMap<PointDatum, FlowDatum> | undefined;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function VisLeafletFlowMapFC<PointDatum, FlowDatum> (\n  props: VisLeafletFlowMapProps<PointDatum, FlowDatum>,\n  ref: ForwardedRef<VisLeafletFlowMapRef<PointDatum, FlowDatum>>\n): JSX.Element {\n  const container = useRef<HTMLDivElement>(null)\n  const [component, setComponent] = useState<LeafletFlowMap<PointDatum, FlowDatum>>()\n\n  // On Mount\n  useEffect(() => {\n    const c = new LeafletFlowMap(container.current as HTMLDivElement, props, props.data)\n    setComponent(c)\n\n    return () => c?.destroy()\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(ref, () => ({ component }))\n  return <div ref={container} className={props.className} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisLeafletFlowMap: (<PointDatum, FlowDatum>(props: VisLeafletFlowMapProps<PointDatum, FlowDatum>) => JSX.Element | null) =\n  React.memo(React.forwardRef(VisLeafletFlowMapFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAegB,SAAA,mBAAmB,CACjC,KAAoD,EACpD,GAA8D,EAAA;AAE9D,IAAA,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAyC,CAAA;IAGnF,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,CAAC,GAAG,IAAI,cAAc,CAAC,SAAS,CAAC,OAAyB,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;QACpF,YAAY,CAAC,CAAC,CAAC,CAAA;QAEf,OAAO,MAAM,CAAC,KAAA,IAAA,IAAD,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAD,CAAC,CAAE,OAAO,EAAE,CAAA;KAC1B,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAE9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;IAC/C,OAAO,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAA,CAAI,CAAA;AAC5D,CAAC;AAIY,MAAA,iBAAiB,GAC5B,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,EAAE,aAAa;;;;"}

package/html-components/leaflet-map/index.js

@@ -6,8 +6,9 @@ function VisLeafletMapFC(props, ref) {
     const container = useRef(null);
     const [component, setComponent] = useState();
     useEffect(() => {
-        setComponent(new LeafletMap(container.current, props, props.data));
-        return () => component === null || component === void 0 ? void 0 : component.destroy();
+        const c = new LeafletMap(container.current, props, props.data);
+        setComponent(c);
+        return () => c === null || c === void 0 ? void 0 : c.destroy();
     }, []);
     useEffect(() => {
         if (props.data)

package/html-components/leaflet-map/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/html-components/leaflet-map/index.tsx"],"sourcesContent":["import React, { ForwardedRef, Ref, useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { LeafletMap, LeafletMapConfigInterface } from '@unovis/ts'\nimport { arePropsEqual } from '../../utils/react'\n\nexport type VisLeafletMapProps<Datum> = LeafletMapConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisLeafletMapRef<Datum>>;\n  className?: string;\n}\n\nexport type VisLeafletMapRef<Datum> = {\n  component: LeafletMap<Datum> | undefined;\n}\n\nexport function VisLeafletMapFC<Datum> (props: VisLeafletMapProps<Datum>, ref: ForwardedRef<VisLeafletMapRef<Datum>>): JSX.Element {\n  const container = useRef<HTMLDivElement>(null)\n  const [component, setComponent] = useState<LeafletMap<Datum>>()\n\n  // On Mount\n  useEffect(() => {\n    setComponent(\n      new LeafletMap(container.current as HTMLDivElement, props, props.data)\n    )\n\n    return () => component?.destroy()\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(ref, () => ({ component }))\n  return <div ref={container} className={props.className} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisLeafletMap: (<Datum>(props: VisLeafletMapProps<Datum>) => JSX.Element | null) =\n  React.memo(React.forwardRef(VisLeafletMapFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAcgB,SAAA,eAAe,CAAS,KAAgC,EAAE,GAA0C,EAAA;AAClH,IAAA,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAqB,CAAA;IAG/D,SAAS,CAAC,MAAK;AACb,QAAA,YAAY,CACV,IAAI,UAAU,CAAC,SAAS,CAAC,OAAyB,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CACvE,CAAA;QAED,OAAO,MAAM,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,EAAE,CAAA;KAClC,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAE9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;IAC/C,OAAO,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAA,CAAI,CAAA;AAC5D,CAAC;AAIY,MAAA,aAAa,GACxB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/html-components/leaflet-map/index.tsx"],"sourcesContent":["import React, { ForwardedRef, Ref, useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { LeafletMap, LeafletMapConfigInterface } from '@unovis/ts'\nimport { arePropsEqual } from '../../utils/react'\n\nexport type VisLeafletMapProps<Datum> = LeafletMapConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisLeafletMapRef<Datum>>;\n  className?: string;\n}\n\nexport type VisLeafletMapRef<Datum> = {\n  component: LeafletMap<Datum> | undefined;\n}\n\nexport function VisLeafletMapFC<Datum> (props: VisLeafletMapProps<Datum>, ref: ForwardedRef<VisLeafletMapRef<Datum>>): JSX.Element {\n  const container = useRef<HTMLDivElement>(null)\n  const [component, setComponent] = useState<LeafletMap<Datum>>()\n\n  // On Mount\n  useEffect(() => {\n    const c = new LeafletMap(container.current as HTMLDivElement, props, props.data)\n    setComponent(c)\n\n    return () => c?.destroy()\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(ref, () => ({ component }))\n  return <div ref={container} className={props.className} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisLeafletMap: (<Datum>(props: VisLeafletMapProps<Datum>) => JSX.Element | null) =\n  React.memo(React.forwardRef(VisLeafletMapFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAcgB,SAAA,eAAe,CAAS,KAAgC,EAAE,GAA0C,EAAA;AAClH,IAAA,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAqB,CAAA;IAG/D,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,CAAC,GAAG,IAAI,UAAU,CAAC,SAAS,CAAC,OAAyB,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;QAChF,YAAY,CAAC,CAAC,CAAC,CAAA;QAEf,OAAO,MAAM,CAAC,KAAA,IAAA,IAAD,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAD,CAAC,CAAE,OAAO,EAAE,CAAA;KAC1B,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAE9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;IAC/C,OAAO,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAA,CAAI,CAAA;AAC5D,CAAC;AAIY,MAAA,aAAa,GACxB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,aAAa;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unovis/react",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "description": "React wrapper for Unovis",
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -8,13 +8,13 @@
     "build": "rimraf dist && tsc --project tsconfig.lib.json --emitDeclarationOnly && rollup --config",
     "tsc": "tsc",
     "generate": "rollup -c ./autogen/rollup.config.js; node .autogen.js; rm .autogen.js",
-    "publish-dist": "cp ./{.npmrc,package.json} ./dist; cp ../../LICENSE ./dist; cd ./dist; npm publish; rm -rf .cache"
+    "publish-dist": "cp ./package.json ./dist; cp ../../LICENSE ./dist; cd ./dist; npm publish; rm -rf .cache"
   },
   "author": "Nikita Rokotyan",
   "license": "Apache-2.0",
   "peerDependencies": {
     "@emotion/css": "^11.7.1",
-    "@unovis/ts": "1.0.0-beta.1",
+    "@unovis/ts": "1.0.0-beta.3",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },