piral-vue-3 1.7.0 → 1.7.1

package/lib/converter.js

@@ -1,28 +1,34 @@
+import { reactive } from 'vue';
 import { createExtension } from './extension';
 import { mountVue } from './mount';
 export function createConverter(config = {}) {
     const { rootName = 'piral-slot', selector = 'extension-component' } = config;
     const Extension = createExtension(rootName);
     const middlewares = [];
-    const convert = (root, captured) => ({
+    const convert = (root, captured = {}) => ({
         mount(parent, data, ctx, locals) {
             const el = parent.appendChild(document.createElement(rootName));
-            const app = mountVue(root, data, ctx, captured);
+            const props = reactive({
+                ...captured,
+                ...data,
+            });
+            const app = mountVue(root, props, ctx);
             middlewares.forEach((middleware) => middleware(app));
             app.component(selector, createExtension(rootName));
             app.mount(el);
             locals.instance = app;
+            locals.props = props;
         },
         update(parent, data, ctx, locals) {
-            const appInstance = locals.instance._instance;
             for (const prop in data) {
-                appInstance.props[prop] = data[prop];
+                locals.props[prop] = data[prop];
             }
         },
         unmount(parent, locals) {
             locals.instance.unmount();
             parent.innerHTML = '';
             locals.instance = undefined;
+            locals.props = undefined;
         },
     });
     convert.Extension = Extension;

package/lib/converter.js.map

@@ -1 +1 @@
-{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAoBnC,MAAM,UAAU,eAAe,CAAC,SAA+B,EAAE;IAC/D,MAAM,EAAE,QAAQ,GAAG,YAAY,EAAE,QAAQ,GAAG,qBAAqB,EAAE,GAAG,MAAM,CAAC;IAC7E,MAAM,SAAS,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,WAAW,GAAiC,EAAE,CAAC;IACrD,MAAM,OAAO,GAAG,CACd,IAAuB,EACvB,QAA8B,EACJ,EAAE,CAAC,CAAC;QAC9B,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAiB;YACxC,MAAM,EAAE,GAAG,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;YAChE,MAAM,GAAG,GAAG,QAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC;YAChD,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;YACrD,GAAG,CAAC,SAAS,CAAC,QAAQ,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC;YACnD,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YACd,MAAM,CAAC,QAAQ,GAAG,GAAG,CAAC;QACxB,CAAC;QACD,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAiB;YACzC,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC;YAE9C,KAAK,MAAM,IAAI,IAAI,IAAI,EAAE;gBACvB,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;aACtC;QACH,CAAC;QACD,OAAO,CAAC,MAAM,EAAE,MAAiB;YAC/B,MAAM,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;YAC1B,MAAM,CAAC,SAAS,GAAG,EAAE,CAAC;YACtB,MAAM,CAAC,QAAQ,GAAG,SAAS,CAAC;QAC9B,CAAC;KACF,CAAC,CAAC;IACH,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;IAC9B,OAAO,CAAC,gBAAgB,GAAG,CAAC,UAAiC,EAAE,EAAE;QAC/D,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;YACrC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAC9B;IACH,CAAC,CAAC;IACF,OAAO,OAAO,CAAC;AACjB,CAAC"}
+{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":"AACA,OAAO,EAAkB,QAAQ,EAAE,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAqBnC,MAAM,UAAU,eAAe,CAAC,SAA+B,EAAE;IAC/D,MAAM,EAAE,QAAQ,GAAG,YAAY,EAAE,QAAQ,GAAG,qBAAqB,EAAE,GAAG,MAAM,CAAC;IAC7E,MAAM,SAAS,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,WAAW,GAAiC,EAAE,CAAC;IACrD,MAAM,OAAO,GAAG,CACd,IAAuB,EACvB,WAAgC,EAAE,EACR,EAAE,CAAC,CAAC;QAC9B,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAiB;YACxC,MAAM,EAAE,GAAG,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;YAChE,MAAM,KAAK,GAAG,QAAQ,CAAC;gBACnB,GAAG,QAAQ;gBACX,GAAG,IAAI;aACV,CAAC,CAAC;YACH,MAAM,GAAG,GAAG,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;YACvC,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;YACrD,GAAG,CAAC,SAAS,CAAC,QAAQ,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC;YACnD,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YACd,MAAM,CAAC,QAAQ,GAAG,GAAG,CAAC;YACtB,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;QACvB,CAAC;QACD,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAiB;YACzC,KAAK,MAAM,IAAI,IAAI,IAAI,EAAE;gBACrB,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;aACnC;QACH,CAAC;QACD,OAAO,CAAC,MAAM,EAAE,MAAiB;YAC/B,MAAM,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;YAC1B,MAAM,CAAC,SAAS,GAAG,EAAE,CAAC;YACtB,MAAM,CAAC,QAAQ,GAAG,SAAS,CAAC;YAC5B,MAAM,CAAC,KAAK,GAAG,SAAS,CAAC;QAC3B,CAAC;KACF,CAAC,CAAC;IACH,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;IAC9B,OAAO,CAAC,gBAAgB,GAAG,CAAC,UAAiC,EAAE,EAAE;QAC/D,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;YACrC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAC9B;IACH,CAAC,CAAC;IACF,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/lib/mount.d.ts

@@ -1,3 +1,3 @@
 import type { BaseComponentProps, ComponentContext } from 'piral-core';
 import { Component } from 'vue';
-export declare function mountVue<T extends BaseComponentProps>(component: Component<T>, props: T, ctx: ComponentContext, captured?: Record<string, any>): import("vue").App<Element>;
+export declare function mountVue<T extends BaseComponentProps>(component: Component<T>, props: T, ctx: ComponentContext): import("vue").App<Element>;

package/lib/mount.js

@@ -1,19 +1,14 @@
 import { createApp, h } from 'vue';
-export function mountVue(component, props, ctx, captured) {
-    const data = {
-        ...captured,
-        ...props,
-    };
+export function mountVue(component, props, ctx) {
     const root = {
         provide: {
             piral: props.piral,
             ...ctx,
         },
-        props: Object.keys(data),
         render() {
-            return h(component, this.$props);
+            return h(component, props);
         },
     };
-    return createApp(root, data);
+    return createApp(root);
 }
 //# sourceMappingURL=mount.js.map

package/lib/mount.js.map

@@ -1 +1 @@
-{"version":3,"file":"mount.js","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAa,CAAC,EAAE,MAAM,KAAK,CAAC;AAE9C,MAAM,UAAU,QAAQ,CACtB,SAAuB,EACvB,KAAQ,EACR,GAAqB,EACrB,QAA8B;IAE9B,MAAM,IAAI,GAAG;QACX,GAAG,QAAQ;QACX,GAAG,KAAK;KACT,CAAC;IACF,MAAM,IAAI,GAAc;QACtB,OAAO,EAAE;YACP,KAAK,EAAE,KAAK,CAAC,KAAK;YAClB,GAAG,GAAG;SACP;QACD,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;QACxB,MAAM;YACJ,OAAO,CAAC,CAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QACnC,CAAC;KACF,CAAC;IAEF,OAAO,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AAC/B,CAAC"}
+{"version":3,"file":"mount.js","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAa,CAAC,EAAE,MAAM,KAAK,CAAC;AAE9C,MAAM,UAAU,QAAQ,CACtB,SAAuB,EACvB,KAAQ,EACR,GAAqB;IAErB,MAAM,IAAI,GAAc;QACtB,OAAO,EAAE;YACP,KAAK,EAAE,KAAK,CAAC,KAAK;YAClB,GAAG,GAAG;SACP;QACD,MAAM;YACJ,OAAO,CAAC,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QAC7B,CAAC;KACF,CAAC;IAEF,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC;AACzB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-vue-3",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "Plugin for integrating Vue@3 components in Piral.",
   "keywords": [
     "piral",
@@ -54,8 +54,8 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "devDependencies": {
-    "piral-core": "^1.7.0",
+    "piral-core": "^1.7.1",
     "vue": "^3.0.0"
   },
-  "gitHead": "e1f1b4e9d7abce99a5bb318f960b560c9b5aa6b2"
+  "gitHead": "83508f650da0fbb300642d0e8fcaeddbd904d81b"
 }

package/src/converter.ts

@@ -1,5 +1,5 @@
 import type { ForeignComponent, BaseComponentProps } from 'piral-core';
-import { Component, App } from 'vue';
+import { Component, App, reactive } from 'vue';
 import { createExtension } from './extension';
 import { mountVue } from './mount';
 import { Vue3MiddlewareHandler } from './types';
@@ -19,6 +19,7 @@ export interface Vue3ConverterOptions {
 
 interface Vue3State {
   instance: App;
+  props: any;
 }
 
 export function createConverter(config: Vue3ConverterOptions = {}) {
@@ -27,27 +28,31 @@ export function createConverter(config: Vue3ConverterOptions = {}) {
   const middlewares: Array<Vue3MiddlewareHandler> = [];
   const convert = <TProps extends BaseComponentProps>(
     root: Component<TProps>,
-    captured?: Record<string, any>,
+    captured: Record<string, any> = {},
   ): ForeignComponent<TProps> => ({
     mount(parent, data, ctx, locals: Vue3State) {
       const el = parent.appendChild(document.createElement(rootName));
-      const app = mountVue(root, data, ctx, captured);
+      const props = reactive({
+          ...captured,
+          ...data,
+      });
+      const app = mountVue(root, props, ctx);
       middlewares.forEach((middleware) => middleware(app));
       app.component(selector, createExtension(rootName));
       app.mount(el);
       locals.instance = app;
+      locals.props = props;
     },
     update(parent, data, ctx, locals: Vue3State) {
-      const appInstance = locals.instance._instance;
-
       for (const prop in data) {
-        appInstance.props[prop] = data[prop];
+          locals.props[prop] = data[prop];
       }
     },
     unmount(parent, locals: Vue3State) {
       locals.instance.unmount();
       parent.innerHTML = '';
       locals.instance = undefined;
+      locals.props = undefined;
     },
   });
   convert.Extension = Extension;

package/src/mount.ts

@@ -5,22 +5,16 @@ export function mountVue<T extends BaseComponentProps>(
   component: Component<T>,
   props: T,
   ctx: ComponentContext,
-  captured?: Record<string, any>,
 ) {
-  const data = {
-    ...captured,
-    ...props,
-  };
   const root: Component = {
     provide: {
       piral: props.piral,
       ...ctx,
     },
-    props: Object.keys(data),
     render() {
-      return h(component, this.$props);
+      return h(component, props);
     },
   };
 
-  return createApp(root, data);
+  return createApp(root);
 }