kritzel-vue 0.3.21 → 0.3.23

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from './components';
 export * from './composables';
 export * from './plugin';
-export { KritzelBaseObject, KritzelText, KritzelPath, KritzelImage, KritzelLine, KritzelShape, KritzelGroup, KritzelBaseTool, KritzelBrushTool, KritzelTextTool, KritzelLineTool, KritzelShapeTool, KritzelEraserTool, KritzelSelectionTool, KritzelImageTool, KritzelWorkspace, InMemorySyncProvider, IndexedDBSyncProvider, BroadcastSyncProvider, WebSocketSyncProvider, HocuspocusSyncProvider, KritzelThemeManager, KritzelLocalizationManager, KritzelLicenseManager, ShapeType, KritzelAlignment, lightTheme, darkTheme, EN_LOCALE, DE_LOCALE, FR_LOCALE, DEFAULT_BRUSH_CONFIG, DEFAULT_TEXT_CONFIG, } from 'kritzel-stencil';
+export * from './vue-custom-element-renderer';
+export { KritzelBaseObject, KritzelText, KritzelPath, KritzelImage, KritzelLine, KritzelShape, KritzelGroup, KritzelCustomElement, KritzelBaseTool, KritzelBrushTool, KritzelTextTool, KritzelLineTool, KritzelShapeTool, KritzelEraserTool, KritzelSelectionTool, KritzelImageTool, KritzelWorkspace, InMemorySyncProvider, IndexedDBSyncProvider, BroadcastSyncProvider, WebSocketSyncProvider, HocuspocusSyncProvider, KritzelThemeManager, KritzelLocalizationManager, KritzelLicenseManager, ShapeType, KritzelAlignment, lightTheme, darkTheme, EN_LOCALE, DE_LOCALE, FR_LOCALE, DEFAULT_BRUSH_CONFIG, DEFAULT_TEXT_CONFIG, } from 'kritzel-stencil';
 export type { HTMLKritzelEditorElement, HTMLKritzelEngineElement, KritzelToolbarControl, KritzelBrushToolConfig, KritzelLineToolConfig, KritzelShapeToolConfig, KritzelTextToolConfig, KritzelSyncConfig, KritzelTheme, KritzelViewportState, ContextMenuItem, ThemeAwareColor, ThemeName, KritzelLocale, LocaleCode, KritzelTerms, KritzelTermKey, KritzelTermVars, LoginEvent, EditorIsReadyEvent, ActiveWorkspaceChangeEvent, ObjectsAddedEvent, ObjectsRemovedEvent, ObjectsUpdatedEvent, ObjectsInViewportChangeEvent, KritzelUndoState, IKritzelIsPublicChangedEvent, KritzelEngineState, KritzelDebugInfo, IKritzelUser, } from 'kritzel-stencil';

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from './components';
 export * from './composables';
 export * from './plugin';
-export { KritzelBaseObject, KritzelText, KritzelPath, KritzelImage, KritzelLine, KritzelShape, KritzelGroup, KritzelBaseTool, KritzelBrushTool, KritzelTextTool, KritzelLineTool, KritzelShapeTool, KritzelEraserTool, KritzelSelectionTool, KritzelImageTool, KritzelWorkspace, InMemorySyncProvider, IndexedDBSyncProvider, BroadcastSyncProvider, WebSocketSyncProvider, HocuspocusSyncProvider, KritzelThemeManager, KritzelLocalizationManager, KritzelLicenseManager, ShapeType, KritzelAlignment, lightTheme, darkTheme, EN_LOCALE, DE_LOCALE, FR_LOCALE, DEFAULT_BRUSH_CONFIG, DEFAULT_TEXT_CONFIG, } from 'kritzel-stencil';
+export * from './vue-custom-element-renderer';
+export { KritzelBaseObject, KritzelText, KritzelPath, KritzelImage, KritzelLine, KritzelShape, KritzelGroup, KritzelCustomElement, KritzelBaseTool, KritzelBrushTool, KritzelTextTool, KritzelLineTool, KritzelShapeTool, KritzelEraserTool, KritzelSelectionTool, KritzelImageTool, KritzelWorkspace, InMemorySyncProvider, IndexedDBSyncProvider, BroadcastSyncProvider, WebSocketSyncProvider, HocuspocusSyncProvider, KritzelThemeManager, KritzelLocalizationManager, KritzelLicenseManager, ShapeType, KritzelAlignment, lightTheme, darkTheme, EN_LOCALE, DE_LOCALE, FR_LOCALE, DEFAULT_BRUSH_CONFIG, DEFAULT_TEXT_CONFIG, } from 'kritzel-stencil';

package/dist/vue-custom-element-renderer.d.ts

@@ -0,0 +1,14 @@
+import { type DefineComponent } from 'vue';
+import { type KritzelCustomElementRenderContext, type KritzelCustomElementRenderer } from 'kritzel-stencil';
+export interface VueCustomElementRendererOptions<TState = unknown> {
+    tagName: string;
+    component: DefineComponent<any, any, any, any, any, any, any, any>;
+    createInitialState?: () => TState;
+    getInitialState?: (data: unknown, context: KritzelCustomElementRenderContext) => TState;
+    mapProps?: (state: TState | undefined, context: KritzelCustomElementRenderContext) => Record<string, unknown>;
+    normalizeState?: (state: unknown, context: KritzelCustomElementRenderContext) => TState;
+    onStateChangeProp?: string | null;
+    styles?: string;
+}
+export declare function createVueCustomElementRenderer<TState = unknown>(options: VueCustomElementRendererOptions<TState>): KritzelCustomElementRenderer;
+export declare function registerVueCustomElementRenderer<TState = unknown>(rendererKey: string, options: VueCustomElementRendererOptions<TState>): () => void;

package/dist/vue-custom-element-renderer.js

@@ -0,0 +1,75 @@
+import { defineCustomElement } from 'vue';
+import { KritzelCustomElementRendererRegistry, } from 'kritzel-stencil';
+function setHostProps(host, props) {
+    Object.entries(props).forEach(([key, value]) => {
+        host[key] = value;
+    });
+}
+export function createVueCustomElementRenderer(options) {
+    const mountedElements = new Map();
+    const ensureCustomElementDefined = () => {
+        if (!customElements.get(options.tagName)) {
+            customElements.define(options.tagName, defineCustomElement(options.component));
+        }
+    };
+    return {
+        onMount: (context) => {
+            var _a, _b;
+            if (!context.container) {
+                return;
+            }
+            ensureCustomElementDefined();
+            const initialState = options.getInitialState
+                ? options.getInitialState(context.data, context)
+                : (_a = context.data) !== null && _a !== void 0 ? _a : (_b = options.createInitialState) === null || _b === void 0 ? void 0 : _b.call(options);
+            const host = document.createElement(options.tagName);
+            const mounted = {
+                host,
+                latestState: initialState,
+            };
+            const baseProps = options.mapProps
+                ? options.mapProps(initialState, context)
+                : (initialState !== undefined ? { initialState } : {});
+            const onStateChangeProp = options.onStateChangeProp === undefined ? 'onStateChange' : options.onStateChangeProp;
+            if (onStateChangeProp !== null) {
+                const existing = baseProps[onStateChangeProp];
+                baseProps[onStateChangeProp] = (nextState) => {
+                    mounted.latestState = options.normalizeState
+                        ? options.normalizeState(nextState, context)
+                        : nextState;
+                    if (typeof existing === 'function') {
+                        existing(nextState);
+                    }
+                };
+            }
+            context.container.innerHTML = '';
+            if (options.styles) {
+                const styleElement = document.createElement('style');
+                styleElement.textContent = options.styles;
+                context.container.appendChild(styleElement);
+            }
+            setHostProps(host, baseProps);
+            context.container.appendChild(host);
+            mountedElements.set(context.object.id, mounted);
+        },
+        onUnmount: (context) => {
+            const mounted = mountedElements.get(context.object.id);
+            if (!mounted) {
+                return undefined;
+            }
+            mounted.host.remove();
+            mountedElements.delete(context.object.id);
+            if (context.container) {
+                context.container.innerHTML = '';
+            }
+            return mounted.latestState;
+        },
+    };
+}
+export function registerVueCustomElementRenderer(rendererKey, options) {
+    const renderer = createVueCustomElementRenderer(options);
+    KritzelCustomElementRendererRegistry.register(rendererKey, renderer);
+    return () => {
+        KritzelCustomElementRendererRegistry.unregister(rendererKey);
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kritzel-vue",
-  "version": "0.3.21",
+  "version": "0.3.23",
   "homepage": "https://kritzel.io/",
   "description": "Kritzel helps you build infinite canvas experiences with Vue.",
   "keywords": [
@@ -38,6 +38,6 @@
     "@stencil/vue-output-target": "0.11.8"
   },
   "peerDependencies": {
-    "kritzel-stencil": "^0.3.21"
+    "kritzel-stencil": "^0.3.23"
   }
 }