piral-vue 1.0.0-pre.2108 → 1.0.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 - 2021 smapiot
+Copyright (c) 2019 - 2023 smapiot
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,10 +1,10 @@
-[![Piral Logo](https://github.com/smapiot/piral/raw/master/docs/assets/logo.png)](https://piral.io)
+[![Piral Logo](https://github.com/smapiot/piral/raw/main/docs/assets/logo.png)](https://piral.io)
 
-# [Piral Vue](https://piral.io) · [![GitHub License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/smapiot/piral/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/piral-vue.svg?style=flat)](https://www.npmjs.com/package/piral-vue) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://jestjs.io) [![Gitter Chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/piral-io/community)
+# [Piral Vue](https://piral.io) · [![GitHub License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/smapiot/piral/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/piral-vue.svg?style=flat)](https://www.npmjs.com/package/piral-vue) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://jestjs.io) [![Gitter Chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/piral-io/community)
 
-This is a plugin that only has a peer dependency to `piral-core`. What `piral-vue` brings to the table is a set of Pilet API extensions that can be used with `piral` or `piral-core`.
+This is a plugin that only has a peer dependency to `vue`. What `piral-vue` brings to the table is a set of Pilet API extensions that can be used with `piral` or `piral-core`.
 
-The set includes a Vue converter for any component registration, as well as a `fromVue` shortcut and a `VueExtension` component.
+The set includes a Vue@2 converter for any component registration, as well as a `fromVue` shortcut and a `VueExtension` component.
 
 By default, these API extensions are not integrated in `piral`, so you'd need to add them to your Piral instance.
 
@@ -14,17 +14,17 @@ The following functions are brought to the Pilet API.
 
 ### `fromVue()`
 
-Transforms a standard Vue component into a component that can be used in Piral, essentially wrapping it with a reference to the corresponding converter.
+Transforms a standard Vue@2 component into a component that can be used in Piral, essentially wrapping it with a reference to the corresponding converter.
 
 ### `VueExtension`
 
-The extension slot component to be used in Vue components. This is not really needed, as it is made available automatically via a Vue custom element named `extension-component`.
+The extension slot component to be used in Vue@2 components. This is not really needed, as it is made available automatically via a Vue@2 custom element named `extension-component`.
 
 ## Usage
 
 ::: summary: For pilet authors
 
-You can use the `fromVue` function from the Pilet API to convert your Vue components to components usable by your Piral instance.
+You can use the `fromVue` function from the Pilet API to convert your Vue@2 components to components usable by your Piral instance.
 
 Example use:
 
@@ -37,7 +37,7 @@ export function setup(piral: PiletApi) {
 }
 ```
 
-Within Vue components the Piral Vue extension component can be used by referring to `extension-component`, e.g.,
+Within Vue@2 components the Piral Vue@2 extension component can be used by referring to `extension-component`, e.g.,
 
 ```html
 <extension-component name="name-of-extension"></extension-component>
@@ -47,7 +47,7 @@ Alternatively, if `piral-vue` has not been added to the Piral instance you can i
 
 ```ts
 import { PiletApi } from '<name-of-piral-instance>';
-import { fromVue } from 'piral-vue';
+import { fromVue } from 'piral-vue/convert';
 import VuePage from './Page.vue';
 
 export function setup(piral: PiletApi) {
@@ -62,7 +62,6 @@ export function setup(piral: PiletApi) {
 Using Vue with Piral is as simple as installing `piral-vue` and `vue`.
 
 ```ts
-import 'vue';
 import { createVueApi } from 'piral-vue';
 ```
 
@@ -80,16 +79,75 @@ The `vue` package should be shared with the pilets via the *package.json*:
 
 ```json
 {
-  "pilets": {
-    "externals": [
-      "vue"
-    ]
+  "importmap": {
+    "imports": {
+      "vue": ""
+    }
   }
 }
 ```
 
 :::
 
+## Development Setup
+
+For your bundler additional packages may be necessary. For instance, for Webpack the following setup is required:
+
+First, install the additional dev dependencies
+
+```sh
+npm i vue-loader@^15 @vue/compiler-sfc@^2 --save-dev
+```
+
+then add a *webpack.config.js* to use them
+
+```js
+const { VueLoaderPlugin } = require('vue-loader');
+
+module.exports = function (config) {
+  config.module.rules.unshift({
+    test: /\.vue$/,
+    use: 'vue-loader'
+  });
+  config.plugins.push(new VueLoaderPlugin());
+  return config;
+};
+```
+
+Now, *.vue* files are correctly picked up and handled.
+
+Alternatively, the Webpack configuration can be rather simplistic. In many cases you can use the convenience `extend-webpack` module.
+
+This is how your *webpack.config.js* can look like with the convenience module:
+
+```js
+const extendWebpack = require('piral-vue/extend-webpack');
+
+module.exports = extendWebpack({});
+```
+
+For using `piral-vue/extend-webpack` you must have installed:
+
+- `vue-loader` (at version 15)
+- `@vue/compiler-sfc^2`
+- `webpack`, e.g., via `piral-cli-webpack5`
+
+You can do that via:
+
+```sh
+npm i vue-loader@^15 @vue/compiler-sfc^2 piral-cli-webpack5 --save-dev
+```
+
+The available options for `piral-vue/extend-webpack` are the same as for the options of the `vue-loader`, e.g.:
+
+```js
+const extendWebpack = require('piral-vue/extend-webpack');
+
+module.exports = extendWebpack({
+  customElement: /\.ce\.vue$/,
+});
+```
+
 ## License
 
 Piral is released using the MIT license. For more information see the [license file](./LICENSE).

package/convert.d.ts

@@ -1,9 +1,18 @@
-import type { HtmlComponent } from 'piral-core';
-import { createExtension } from './lib/extension';
-declare const convert: <TProps extends import("piral-core").BaseComponentProps>(root: import("vue").Component<TProps, import("vue/types/options").DefaultMethods<never>, import("vue/types/options").DefaultComputed, Record<string, any>>, captured?: Record<string, any>) => import("piral-core").ForeignComponent<TProps>;
+import { createConverter } from './esm/converter';
+export interface HtmlComponent<TProps> {
+    component: {
+        mount(element: HTMLElement, props: TProps, ctx: any, locals: any): void;
+        update?(element: HTMLElement, props: TProps, ctx: any, locals: any): void;
+        unmount?(element: HTMLElement, locals: any): void;
+    };
+    type: 'html';
+}
 export interface VueConverter {
-    (...params: Parameters<typeof convert>): HtmlComponent<any>;
+    (...params: Parameters<ReturnType<typeof createConverter>>): HtmlComponent<any>;
 }
-export declare const fromVue: VueConverter;
-export declare const createVueExtension: typeof createExtension;
-export {};
+export declare function createVueConverter(...params: Parameters<typeof createConverter>): {
+    from: VueConverter;
+    Extension: Component<any>;
+};
+declare const fromVue: VueConverter, VueExtension: Component<any>;
+export { fromVue, VueExtension };

package/convert.js

@@ -1,11 +1,16 @@
-"use strict";
-exports.__esModule = true;
-exports.createVueExtension = exports.fromVue = void 0;
-var converter_1 = require("./lib/converter");
-var extension_1 = require("./lib/extension");
-var convert = converter_1.createConverter();
-exports.fromVue = function (root, captured) { return ({
-    type: 'html',
-    component: convert(root, captured)
-}); };
-exports.createVueExtension = extension_1.createExtension;
+import { createConverter } from './esm/converter';
+export function createVueConverter() {
+    var params = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        params[_i] = arguments[_i];
+    }
+    var convert = createConverter.apply(void 0, params);
+    var Extension = convert.Extension;
+    var from = function (root, captured) { return ({
+        type: 'html',
+        component: convert(root, captured),
+    }); };
+    return { from: from, Extension: Extension };
+}
+var _a = createVueConverter(), fromVue = _a.from, VueExtension = _a.Extension;
+export { fromVue, VueExtension };

package/esm/converter.d.ts

@@ -1,3 +1,18 @@
-import { ForeignComponent, BaseComponentProps } from 'piral-core';
+import type { ForeignComponent, BaseComponentProps } from 'piral-core';
 import { Component } from 'vue';
-export declare function createConverter(rootName?: string): <TProps extends BaseComponentProps>(root: Component<TProps, import("vue/types/options").DefaultMethods<never>, import("vue/types/options").DefaultComputed, Record<string, any>>, captured?: Record<string, any>) => ForeignComponent<TProps>;
+export interface VueConverterOptions {
+    /**
+     * Defines the name of the extension component.
+     * @default extension-component
+     */
+    selector?: string;
+    /**
+     * Defines the name of the root element.
+     * @default piral-slot
+     */
+    rootName?: string;
+}
+export declare function createConverter(config?: VueConverterOptions): {
+    <TProps extends BaseComponentProps>(root: Component<TProps>, captured?: Record<string, any>): ForeignComponent<TProps>;
+    Extension: Component<import("piral-core").ExtensionSlotProps>;
+};

package/esm/converter.js

@@ -1,25 +1,25 @@
 import { mountVue } from './mount';
-export function createConverter(rootName) {
-    if (rootName === void 0) { rootName = 'slot'; }
-    var convert = function (root, captured) {
-        var instance = undefined;
-        return {
-            mount: function (parent, data, ctx) {
-                var el = parent.appendChild(document.createElement(rootName));
-                instance = mountVue(el, root, data, ctx, captured);
-            },
-            update: function (_, data) {
-                for (var prop in data) {
-                    instance[prop] = data[prop];
-                }
-            },
-            unmount: function (el) {
-                instance.$destroy();
-                el.innerHTML = '';
-                instance = undefined;
-            },
-        };
-    };
+import { createExtension } from './extension';
+export function createConverter(config = {}) {
+    const { rootName = 'piral-slot', selector = 'extension-component' } = config;
+    const Extension = createExtension(rootName, selector);
+    const convert = (root, captured) => ({
+        mount(parent, data, ctx, locals) {
+            const el = parent.appendChild(document.createElement(rootName));
+            locals.instance = mountVue(el, root, data, ctx, captured);
+        },
+        update(parent, data, ctx, locals) {
+            for (const prop in data) {
+                locals.instance[prop] = data[prop];
+            }
+        },
+        unmount(parent, locals) {
+            locals.instance.$destroy();
+            parent.innerHTML = '';
+            locals.instance = undefined;
+        },
+    });
+    convert.Extension = Extension;
     return convert;
 }
 //# sourceMappingURL=converter.js.map

package/esm/converter.js.map

@@ -1 +1 @@
-{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,MAAM,UAAU,eAAe,CAAC,QAAiB;IAAjB,yBAAA,EAAA,iBAAiB;IAC/C,IAAM,OAAO,GAAG,UACd,IAAuB,EACvB,QAA8B;QAE9B,IAAI,QAAQ,GAAQ,SAAS,CAAC;QAE9B,OAAO;YACL,KAAK,YAAC,MAAM,EAAE,IAAI,EAAE,GAAG;gBACrB,IAAM,EAAE,GAAG,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;gBAChE,QAAQ,GAAG,QAAQ,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC;YACrD,CAAC;YACD,MAAM,YAAC,CAAC,EAAE,IAAI;gBACZ,KAAK,IAAM,IAAI,IAAI,IAAI,EAAE;oBACvB,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;iBAC7B;YACH,CAAC;YACD,OAAO,YAAC,EAAE;gBACR,QAAQ,CAAC,QAAQ,EAAE,CAAC;gBACpB,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC;gBAClB,QAAQ,GAAG,SAAS,CAAC;YACvB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;IACF,OAAO,OAAO,CAAC;AACjB,CAAC"}
+{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAmB9C,MAAM,UAAU,eAAe,CAAC,SAA8B,EAAE;IAC9D,MAAM,EAAE,QAAQ,GAAG,YAAY,EAAE,QAAQ,GAAG,qBAAqB,EAAE,GAAG,MAAM,CAAC;IAC7E,MAAM,SAAS,GAAG,eAAe,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IACtD,MAAM,OAAO,GAAG,CACd,IAAuB,EACvB,QAA8B,EACJ,EAAE,CAAC,CAAC;QAC9B,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAgB;YACvC,MAAM,EAAE,GAAG,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;YAChE,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC;QAC5D,CAAC;QACD,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAgB;YACxC,KAAK,MAAM,IAAI,IAAI,IAAI,EAAE;gBACvB,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;aACpC;QACH,CAAC;QACD,OAAO,CAAC,MAAM,EAAE,MAAgB;YAC9B,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;YAC3B,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,OAAO,CAAC;AACjB,CAAC"}

package/esm/create.d.ts

@@ -1,19 +1,9 @@
-import { PiralPlugin } from 'piral-core';
-import { PiletVueApi } from './types';
+import type { PiralPlugin } from 'piral-core';
+import type { PiletVueApi } from './types';
 /**
  * Available configuration options for the Vue plugin.
  */
 export interface VueConfig {
-    /**
-     * Defines the name of the extension component.
-     * @default extension-component
-     */
-    selector?: string;
-    /**
-     * Defines the name of the root element.
-     * @default slot
-     */
-    rootName?: string;
 }
 /**
  * Creates new Pilet API extensions for integration of Vue.

package/esm/create.js

@@ -1,26 +1,20 @@
 import { createConverter } from './converter';
-import { createExtension } from './extension';
 /**
  * Creates new Pilet API extensions for integration of Vue.
  */
-export function createVueApi(config) {
-    if (config === void 0) { config = {}; }
-    var rootName = config.rootName, selector = config.selector;
-    return function (context) {
-        var convert = createConverter(rootName);
-        context.converters.vue = function (_a) {
-            var root = _a.root, captured = _a.captured;
-            return convert(root, captured);
-        };
+export function createVueApi(config = {}) {
+    return (context) => {
+        const convert = createConverter(config);
+        context.converters.vue = ({ root, captured }) => convert(root, captured);
         return {
-            fromVue: function (root, captured) {
+            fromVue(root, captured) {
                 return {
                     type: 'vue',
-                    root: root,
-                    captured: captured,
+                    root,
+                    captured,
                 };
             },
-            VueExtension: createExtension(rootName, selector),
+            VueExtension: convert.Extension,
         };
     };
 }

package/esm/create.js.map

@@ -1 +1 @@
-{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAkB9C;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,MAAsB;IAAtB,uBAAA,EAAA,WAAsB;IACzC,IAAA,QAAQ,GAAe,MAAM,SAArB,EAAE,QAAQ,GAAK,MAAM,SAAX,CAAY;IAEtC,OAAO,UAAC,OAAO;QACb,IAAM,OAAO,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;QAC1C,OAAO,CAAC,UAAU,CAAC,GAAG,GAAG,UAAC,EAAkB;gBAAhB,IAAI,UAAA,EAAE,QAAQ,cAAA;YAAO,OAAA,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC;QAAvB,CAAuB,CAAC;QAEzE,OAAO;YACL,OAAO,YAAC,IAAI,EAAE,QAAQ;gBACpB,OAAO;oBACL,IAAI,EAAE,KAAK;oBACX,IAAI,MAAA;oBACJ,QAAQ,UAAA;iBACT,CAAC;YACJ,CAAC;YACD,YAAY,EAAE,eAAe,CAAC,QAAQ,EAAE,QAAQ,CAAC;SAClD,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAQ9C;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,SAAoB,EAAE;IACjD,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,MAAM,OAAO,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;QACxC,OAAO,CAAC,UAAU,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QAEzE,OAAO;YACL,OAAO,CAAC,IAAI,EAAE,QAAQ;gBACpB,OAAO;oBACL,IAAI,EAAE,KAAK;oBACX,IAAI;oBACJ,QAAQ;iBACT,CAAC;YACJ,CAAC;YACD,YAAY,EAAE,OAAO,CAAC,SAAS;SAChC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}

package/esm/extension.d.ts

@@ -1,3 +1,3 @@
 import type { ExtensionSlotProps } from 'piral-core';
 import type { Component } from 'vue';
-export declare function createExtension(rootName?: string, selector?: string): Component<ExtensionSlotProps>;
+export declare function createExtension(rootName: string, selector: string): Component<ExtensionSlotProps>;

package/esm/extension.js

@@ -1,15 +1,42 @@
 import { register } from './mount';
 export function createExtension(rootName, selector) {
-    if (rootName === void 0) { rootName = 'slot'; }
-    if (selector === void 0) { selector = 'extension-component'; }
-    var VueExtension = {
+    const VueExtension = {
         functional: false,
         props: ['name', 'empty', 'render', 'params'],
         inject: ['piral'],
-        render: function (createElement) {
+        render(createElement) {
             return createElement(rootName);
         },
-        mounted: function () {
+        watch: {
+            params(newValue, oldValue) {
+                if (newValue !== oldValue) {
+                    const newKeys = Object.keys(newValue);
+                    const oldKeys = Object.keys(oldValue);
+                    if (newKeys.length === oldKeys.length) {
+                        let changed = false;
+                        for (const key of newKeys) {
+                            if (!oldKeys.includes(key) || newValue[key] !== oldValue[key]) {
+                                changed = true;
+                                break;
+                            }
+                        }
+                        if (!changed) {
+                            return;
+                        }
+                    }
+                    const ev = new CustomEvent('extension-props-changed', {
+                        detail: {
+                            empty: this.empty,
+                            params: newValue,
+                            render: this.render,
+                            name: this.name,
+                        },
+                    });
+                    this.$el.dispatchEvent(ev);
+                }
+            },
+        },
+        mounted() {
             this.piral.renderHtmlExtension(this.$el, {
                 empty: this.empty,
                 params: this.params,

package/esm/extension.js.map

@@ -1 +1 @@
-{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,MAAM,UAAU,eAAe,CAAC,QAAiB,EAAE,QAAgC;IAAnD,yBAAA,EAAA,iBAAiB;IAAE,yBAAA,EAAA,gCAAgC;IACjF,IAAM,YAAY,GAAkC;QAClD,UAAU,EAAE,KAAK;QACjB,KAAK,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC;QAC5C,MAAM,EAAE,CAAC,OAAO,CAAC;QACjB,MAAM,YAAC,aAAa;YAClB,OAAO,aAAa,CAAC,QAAQ,CAAC,CAAC;QACjC,CAAC;QACD,OAAO;YACL,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,IAAI,CAAC,GAAG,EAAE;gBACvC,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,CAAC;QACL,CAAC;KACF,CAAC;IAEF,QAAQ,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IACjC,OAAO,YAAY,CAAC;AACtB,CAAC"}
+{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,MAAM,UAAU,eAAe,CAAC,QAAgB,EAAE,QAAgB;IAChE,MAAM,YAAY,GAAkC;QAClD,UAAU,EAAE,KAAK;QACjB,KAAK,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC;QAC5C,MAAM,EAAE,CAAC,OAAO,CAAC;QACjB,MAAM,CAAC,aAAa;YAClB,OAAO,aAAa,CAAC,QAAQ,CAAC,CAAC;QACjC,CAAC;QACD,KAAK,EAAE;YACL,MAAM,CAAC,QAAQ,EAAE,QAAQ;gBACvB,IAAI,QAAQ,KAAK,QAAQ,EAAE;oBACzB,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;oBACtC,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;oBAEtC,IAAI,OAAO,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE;wBACrC,IAAI,OAAO,GAAG,KAAK,CAAC;wBAEpB,KAAK,MAAM,GAAG,IAAI,OAAO,EAAE;4BACzB,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,GAAG,CAAC,KAAK,QAAQ,CAAC,GAAG,CAAC,EAAE;gCAC7D,OAAO,GAAG,IAAI,CAAC;gCACf,MAAM;6BACP;yBACF;wBAED,IAAI,CAAC,OAAO,EAAE;4BACZ,OAAO;yBACR;qBACF;oBAED,MAAM,EAAE,GAAG,IAAI,WAAW,CAAC,yBAAyB,EAAE;wBACpD,MAAM,EAAE;4BACN,KAAK,EAAE,IAAI,CAAC,KAAK;4BACjB,MAAM,EAAE,QAAQ;4BAChB,MAAM,EAAE,IAAI,CAAC,MAAM;4BACnB,IAAI,EAAE,IAAI,CAAC,IAAI;yBAChB;qBACF,CAAC,CAAC;oBACH,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;iBAC5B;YACH,CAAC;SACF;QACD,OAAO;YACL,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,IAAI,CAAC,GAAG,EAAE;gBACvC,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,CAAC;QACL,CAAC;KACF,CAAC;IAEF,QAAQ,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IACjC,OAAO,YAAY,CAAC;AACtB,CAAC"}

package/esm/mount.d.ts

@@ -1,4 +1,4 @@
 import Vue from 'vue';
-import { BaseComponentProps, ComponentContext } from 'piral-core';
+import type { BaseComponentProps, ComponentContext } from 'piral-core';
 export declare function register<T>(name: string, component: Vue.Component<T>): void;
-export declare function mountVue<T extends BaseComponentProps>(el: HTMLElement, root: Vue.Component<T>, props: T, ctx: ComponentContext, captured?: Record<string, any>): import("vue/types/vue").CombinedVueInstance<Vue, object, object, object, Record<never, any>>;
+export declare function mountVue<T extends BaseComponentProps>(el: HTMLElement, root: Vue.Component<T>, props: T, ctx: ComponentContext, captured?: Record<string, any>): import("vue/types/vue").CombinedVueInstance<Vue, object, object, object, Record<never, any>, {}>;

package/esm/mount.js

@@ -1,15 +1,14 @@
-import { __assign } from "tslib";
 import Vue from 'vue';
 export function register(name, component) {
     Vue.component(name, component);
 }
 export function mountVue(el, root, props, ctx, captured) {
     return new Vue({
-        el: el,
-        provide: __assign({ piral: props.piral }, ctx),
-        render: function (h) {
+        el,
+        provide: Object.assign({ piral: props.piral }, ctx),
+        render(h) {
             return h(root, {
-                props: __assign(__assign({}, captured), props),
+                props: Object.assign(Object.assign({}, captured), props),
             });
         },
     });

package/esm/mount.js.map

@@ -1 +1 @@
-{"version":3,"file":"mount.js","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":";AAAA,OAAO,GAAuB,MAAM,KAAK,CAAC;AAG1C,MAAM,UAAU,QAAQ,CAAI,IAAY,EAAE,SAA2B;IACnE,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,SAA2B,CAAC,CAAC;AACnD,CAAC;AAED,MAAM,UAAU,QAAQ,CACtB,EAAe,EACf,IAAsB,EACtB,KAAQ,EACR,GAAqB,EACrB,QAA8B;IAE9B,OAAO,IAAI,GAAG,CAAC;QACb,EAAE,IAAA;QACF,OAAO,aACL,KAAK,EAAE,KAAK,CAAC,KAAK,IACf,GAAG,CACP;QACD,MAAM,YAAC,CAAC;YACN,OAAO,CAAC,CAAC,IAAI,EAAE;gBACb,KAAK,wBACA,QAAQ,GACR,KAAK,CACT;aACF,CAAC,CAAC;QACL,CAAC;KACF,CAAC,CAAC;AACL,CAAC"}
+{"version":3,"file":"mount.js","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":"AAAA,OAAO,GAAuB,MAAM,KAAK,CAAC;AAG1C,MAAM,UAAU,QAAQ,CAAI,IAAY,EAAE,SAA2B;IACnE,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,SAA2B,CAAC,CAAC;AACnD,CAAC;AAED,MAAM,UAAU,QAAQ,CACtB,EAAe,EACf,IAAsB,EACtB,KAAQ,EACR,GAAqB,EACrB,QAA8B;IAE9B,OAAO,IAAI,GAAG,CAAC;QACb,EAAE;QACF,OAAO,kBACL,KAAK,EAAE,KAAK,CAAC,KAAK,IACf,GAAG,CACP;QACD,MAAM,CAAC,CAAC;YACN,OAAO,CAAC,CAAC,IAAI,EAAE;gBACb,KAAK,kCACA,QAAQ,GACR,KAAK,CACT;aACF,CAAC,CAAC;QACL,CAAC;KACF,CAAC,CAAC;AACL,CAAC"}

package/esm/types.d.ts

@@ -1,5 +1,5 @@
-import { Component } from 'vue';
-import { ForeignComponent, ExtensionSlotProps } from 'piral-core';
+import type { Component } from 'vue';
+import type { ForeignComponent, ExtensionSlotProps } from 'piral-core';
 declare module 'piral-core/lib/types/custom' {
     interface PiletCustomApi extends PiletVueApi {
     }

package/extend-webpack.js

@@ -0,0 +1,19 @@
+const { VueLoaderPlugin } = require('vue-loader');
+
+const vueLoader = require.resolve('vue-loader');
+
+module.exports =
+  (options = {}) =>
+  (config) => {
+    config.plugins.push(new VueLoaderPlugin());
+
+    config.module.rules.unshift({
+      test: /\.vue$/,
+      use: {
+        loader: vueLoader,
+        options,
+      },
+    });
+
+    return config;
+  };

package/lib/converter.d.ts

@@ -1,3 +1,18 @@
-import { ForeignComponent, BaseComponentProps } from 'piral-core';
+import type { ForeignComponent, BaseComponentProps } from 'piral-core';
 import { Component } from 'vue';
-export declare function createConverter(rootName?: string): <TProps extends BaseComponentProps>(root: Component<TProps, import("vue/types/options").DefaultMethods<never>, import("vue/types/options").DefaultComputed, Record<string, any>>, captured?: Record<string, any>) => ForeignComponent<TProps>;
+export interface VueConverterOptions {
+    /**
+     * Defines the name of the extension component.
+     * @default extension-component
+     */
+    selector?: string;
+    /**
+     * Defines the name of the root element.
+     * @default piral-slot
+     */
+    rootName?: string;
+}
+export declare function createConverter(config?: VueConverterOptions): {
+    <TProps extends BaseComponentProps>(root: Component<TProps>, captured?: Record<string, any>): ForeignComponent<TProps>;
+    Extension: Component<import("piral-core").ExtensionSlotProps>;
+};

package/lib/converter.js

@@ -1,28 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createConverter = void 0;
-var mount_1 = require("./mount");
-function createConverter(rootName) {
-    if (rootName === void 0) { rootName = 'slot'; }
-    var convert = function (root, captured) {
-        var instance = undefined;
-        return {
-            mount: function (parent, data, ctx) {
-                var el = parent.appendChild(document.createElement(rootName));
-                instance = mount_1.mountVue(el, root, data, ctx, captured);
-            },
-            update: function (_, data) {
-                for (var prop in data) {
-                    instance[prop] = data[prop];
-                }
-            },
-            unmount: function (el) {
-                instance.$destroy();
-                el.innerHTML = '';
-                instance = undefined;
-            },
-        };
-    };
+const mount_1 = require("./mount");
+const extension_1 = require("./extension");
+function createConverter(config = {}) {
+    const { rootName = 'piral-slot', selector = 'extension-component' } = config;
+    const Extension = (0, extension_1.createExtension)(rootName, selector);
+    const convert = (root, captured) => ({
+        mount(parent, data, ctx, locals) {
+            const el = parent.appendChild(document.createElement(rootName));
+            locals.instance = (0, mount_1.mountVue)(el, root, data, ctx, captured);
+        },
+        update(parent, data, ctx, locals) {
+            for (const prop in data) {
+                locals.instance[prop] = data[prop];
+            }
+        },
+        unmount(parent, locals) {
+            locals.instance.$destroy();
+            parent.innerHTML = '';
+            locals.instance = undefined;
+        },
+    });
+    convert.Extension = Extension;
     return convert;
 }
 exports.createConverter = createConverter;

package/lib/converter.js.map

@@ -1 +1 @@
-{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":";;;AAEA,iCAAmC;AAEnC,SAAgB,eAAe,CAAC,QAAiB;IAAjB,yBAAA,EAAA,iBAAiB;IAC/C,IAAM,OAAO,GAAG,UACd,IAAuB,EACvB,QAA8B;QAE9B,IAAI,QAAQ,GAAQ,SAAS,CAAC;QAE9B,OAAO;YACL,KAAK,YAAC,MAAM,EAAE,IAAI,EAAE,GAAG;gBACrB,IAAM,EAAE,GAAG,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;gBAChE,QAAQ,GAAG,gBAAQ,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC;YACrD,CAAC;YACD,MAAM,YAAC,CAAC,EAAE,IAAI;gBACZ,KAAK,IAAM,IAAI,IAAI,IAAI,EAAE;oBACvB,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;iBAC7B;YACH,CAAC;YACD,OAAO,YAAC,EAAE;gBACR,QAAQ,CAAC,QAAQ,EAAE,CAAC;gBACpB,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC;gBAClB,QAAQ,GAAG,SAAS,CAAC;YACvB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;IACF,OAAO,OAAO,CAAC;AACjB,CAAC;AAzBD,0CAyBC"}
+{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":";;;AAEA,mCAAmC;AACnC,2CAA8C;AAmB9C,SAAgB,eAAe,CAAC,SAA8B,EAAE;IAC9D,MAAM,EAAE,QAAQ,GAAG,YAAY,EAAE,QAAQ,GAAG,qBAAqB,EAAE,GAAG,MAAM,CAAC;IAC7E,MAAM,SAAS,GAAG,IAAA,2BAAe,EAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IACtD,MAAM,OAAO,GAAG,CACd,IAAuB,EACvB,QAA8B,EACJ,EAAE,CAAC,CAAC;QAC9B,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAgB;YACvC,MAAM,EAAE,GAAG,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;YAChE,MAAM,CAAC,QAAQ,GAAG,IAAA,gBAAQ,EAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC;QAC5D,CAAC;QACD,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAgB;YACxC,KAAK,MAAM,IAAI,IAAI,IAAI,EAAE;gBACvB,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;aACpC;QACH,CAAC;QACD,OAAO,CAAC,MAAM,EAAE,MAAgB;YAC9B,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;YAC3B,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,OAAO,CAAC;AACjB,CAAC;AAxBD,0CAwBC"}

package/lib/create.d.ts

@@ -1,19 +1,9 @@
-import { PiralPlugin } from 'piral-core';
-import { PiletVueApi } from './types';
+import type { PiralPlugin } from 'piral-core';
+import type { PiletVueApi } from './types';
 /**
  * Available configuration options for the Vue plugin.
  */
 export interface VueConfig {
-    /**
-     * Defines the name of the extension component.
-     * @default extension-component
-     */
-    selector?: string;
-    /**
-     * Defines the name of the root element.
-     * @default slot
-     */
-    rootName?: string;
 }
 /**
  * Creates new Pilet API extensions for integration of Vue.

package/lib/create.js

@@ -1,29 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createVueApi = void 0;
-var converter_1 = require("./converter");
-var extension_1 = require("./extension");
+const converter_1 = require("./converter");
 /**
  * Creates new Pilet API extensions for integration of Vue.
  */
-function createVueApi(config) {
-    if (config === void 0) { config = {}; }
-    var rootName = config.rootName, selector = config.selector;
-    return function (context) {
-        var convert = converter_1.createConverter(rootName);
-        context.converters.vue = function (_a) {
-            var root = _a.root, captured = _a.captured;
-            return convert(root, captured);
-        };
+function createVueApi(config = {}) {
+    return (context) => {
+        const convert = (0, converter_1.createConverter)(config);
+        context.converters.vue = ({ root, captured }) => convert(root, captured);
         return {
-            fromVue: function (root, captured) {
+            fromVue(root, captured) {
                 return {
                     type: 'vue',
-                    root: root,
-                    captured: captured,
+                    root,
+                    captured,
                 };
             },
-            VueExtension: extension_1.createExtension(rootName, selector),
+            VueExtension: convert.Extension,
         };
     };
 }

package/lib/create.js.map

@@ -1 +1 @@
-{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":";;;AACA,yCAA8C;AAE9C,yCAA8C;AAkB9C;;GAEG;AACH,SAAgB,YAAY,CAAC,MAAsB;IAAtB,uBAAA,EAAA,WAAsB;IACzC,IAAA,QAAQ,GAAe,MAAM,SAArB,EAAE,QAAQ,GAAK,MAAM,SAAX,CAAY;IAEtC,OAAO,UAAC,OAAO;QACb,IAAM,OAAO,GAAG,2BAAe,CAAC,QAAQ,CAAC,CAAC;QAC1C,OAAO,CAAC,UAAU,CAAC,GAAG,GAAG,UAAC,EAAkB;gBAAhB,IAAI,UAAA,EAAE,QAAQ,cAAA;YAAO,OAAA,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC;QAAvB,CAAuB,CAAC;QAEzE,OAAO;YACL,OAAO,YAAC,IAAI,EAAE,QAAQ;gBACpB,OAAO;oBACL,IAAI,EAAE,KAAK;oBACX,IAAI,MAAA;oBACJ,QAAQ,UAAA;iBACT,CAAC;YACJ,CAAC;YACD,YAAY,EAAE,2BAAe,CAAC,QAAQ,EAAE,QAAQ,CAAC;SAClD,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAlBD,oCAkBC"}
+{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":";;;AACA,2CAA8C;AAQ9C;;GAEG;AACH,SAAgB,YAAY,CAAC,SAAoB,EAAE;IACjD,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,MAAM,OAAO,GAAG,IAAA,2BAAe,EAAC,MAAM,CAAC,CAAC;QACxC,OAAO,CAAC,UAAU,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QAEzE,OAAO;YACL,OAAO,CAAC,IAAI,EAAE,QAAQ;gBACpB,OAAO;oBACL,IAAI,EAAE,KAAK;oBACX,IAAI;oBACJ,QAAQ;iBACT,CAAC;YACJ,CAAC;YACD,YAAY,EAAE,OAAO,CAAC,SAAS;SAChC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAhBD,oCAgBC"}

package/lib/extension.d.ts

@@ -1,3 +1,3 @@
 import type { ExtensionSlotProps } from 'piral-core';
 import type { Component } from 'vue';
-export declare function createExtension(rootName?: string, selector?: string): Component<ExtensionSlotProps>;
+export declare function createExtension(rootName: string, selector: string): Component<ExtensionSlotProps>;

package/lib/extension.js

@@ -1,18 +1,45 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createExtension = void 0;
-var mount_1 = require("./mount");
+const mount_1 = require("./mount");
 function createExtension(rootName, selector) {
-    if (rootName === void 0) { rootName = 'slot'; }
-    if (selector === void 0) { selector = 'extension-component'; }
-    var VueExtension = {
+    const VueExtension = {
         functional: false,
         props: ['name', 'empty', 'render', 'params'],
         inject: ['piral'],
-        render: function (createElement) {
+        render(createElement) {
             return createElement(rootName);
         },
-        mounted: function () {
+        watch: {
+            params(newValue, oldValue) {
+                if (newValue !== oldValue) {
+                    const newKeys = Object.keys(newValue);
+                    const oldKeys = Object.keys(oldValue);
+                    if (newKeys.length === oldKeys.length) {
+                        let changed = false;
+                        for (const key of newKeys) {
+                            if (!oldKeys.includes(key) || newValue[key] !== oldValue[key]) {
+                                changed = true;
+                                break;
+                            }
+                        }
+                        if (!changed) {
+                            return;
+                        }
+                    }
+                    const ev = new CustomEvent('extension-props-changed', {
+                        detail: {
+                            empty: this.empty,
+                            params: newValue,
+                            render: this.render,
+                            name: this.name,
+                        },
+                    });
+                    this.$el.dispatchEvent(ev);
+                }
+            },
+        },
+        mounted() {
             this.piral.renderHtmlExtension(this.$el, {
                 empty: this.empty,
                 params: this.params,
@@ -21,7 +48,7 @@ function createExtension(rootName, selector) {
             });
         },
     };
-    mount_1.register(selector, VueExtension);
+    (0, mount_1.register)(selector, VueExtension);
     return VueExtension;
 }
 exports.createExtension = createExtension;

package/lib/extension.js.map

@@ -1 +1 @@
-{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":";;;AAEA,iCAAmC;AAEnC,SAAgB,eAAe,CAAC,QAAiB,EAAE,QAAgC;IAAnD,yBAAA,EAAA,iBAAiB;IAAE,yBAAA,EAAA,gCAAgC;IACjF,IAAM,YAAY,GAAkC;QAClD,UAAU,EAAE,KAAK;QACjB,KAAK,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC;QAC5C,MAAM,EAAE,CAAC,OAAO,CAAC;QACjB,MAAM,YAAC,aAAa;YAClB,OAAO,aAAa,CAAC,QAAQ,CAAC,CAAC;QACjC,CAAC;QACD,OAAO;YACL,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,IAAI,CAAC,GAAG,EAAE;gBACvC,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,CAAC;QACL,CAAC;KACF,CAAC;IAEF,gBAAQ,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IACjC,OAAO,YAAY,CAAC;AACtB,CAAC;AApBD,0CAoBC"}
+{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":";;;AAEA,mCAAmC;AAEnC,SAAgB,eAAe,CAAC,QAAgB,EAAE,QAAgB;IAChE,MAAM,YAAY,GAAkC;QAClD,UAAU,EAAE,KAAK;QACjB,KAAK,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC;QAC5C,MAAM,EAAE,CAAC,OAAO,CAAC;QACjB,MAAM,CAAC,aAAa;YAClB,OAAO,aAAa,CAAC,QAAQ,CAAC,CAAC;QACjC,CAAC;QACD,KAAK,EAAE;YACL,MAAM,CAAC,QAAQ,EAAE,QAAQ;gBACvB,IAAI,QAAQ,KAAK,QAAQ,EAAE;oBACzB,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;oBACtC,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;oBAEtC,IAAI,OAAO,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE;wBACrC,IAAI,OAAO,GAAG,KAAK,CAAC;wBAEpB,KAAK,MAAM,GAAG,IAAI,OAAO,EAAE;4BACzB,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,GAAG,CAAC,KAAK,QAAQ,CAAC,GAAG,CAAC,EAAE;gCAC7D,OAAO,GAAG,IAAI,CAAC;gCACf,MAAM;6BACP;yBACF;wBAED,IAAI,CAAC,OAAO,EAAE;4BACZ,OAAO;yBACR;qBACF;oBAED,MAAM,EAAE,GAAG,IAAI,WAAW,CAAC,yBAAyB,EAAE;wBACpD,MAAM,EAAE;4BACN,KAAK,EAAE,IAAI,CAAC,KAAK;4BACjB,MAAM,EAAE,QAAQ;4BAChB,MAAM,EAAE,IAAI,CAAC,MAAM;4BACnB,IAAI,EAAE,IAAI,CAAC,IAAI;yBAChB;qBACF,CAAC,CAAC;oBACH,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;iBAC5B;YACH,CAAC;SACF;QACD,OAAO;YACL,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,IAAI,CAAC,GAAG,EAAE;gBACvC,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,CAAC;QACL,CAAC;KACF,CAAC;IAEF,IAAA,gBAAQ,EAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IACjC,OAAO,YAAY,CAAC;AACtB,CAAC;AArDD,0CAqDC"}

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./create"), exports);
 tslib_1.__exportStar(require("./types"), exports);
 //# sourceMappingURL=index.js.map

package/lib/mount.d.ts

@@ -1,4 +1,4 @@
 import Vue from 'vue';
-import { BaseComponentProps, ComponentContext } from 'piral-core';
+import type { BaseComponentProps, ComponentContext } from 'piral-core';
 export declare function register<T>(name: string, component: Vue.Component<T>): void;
-export declare function mountVue<T extends BaseComponentProps>(el: HTMLElement, root: Vue.Component<T>, props: T, ctx: ComponentContext, captured?: Record<string, any>): import("vue/types/vue").CombinedVueInstance<Vue, object, object, object, Record<never, any>>;
+export declare function mountVue<T extends BaseComponentProps>(el: HTMLElement, root: Vue.Component<T>, props: T, ctx: ComponentContext, captured?: Record<string, any>): import("vue/types/vue").CombinedVueInstance<Vue, object, object, object, Record<never, any>, {}>;

package/lib/mount.js

@@ -1,19 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.mountVue = exports.register = void 0;
-var tslib_1 = require("tslib");
-var vue_1 = require("vue");
+const vue_1 = require("vue");
 function register(name, component) {
     vue_1.default.component(name, component);
 }
 exports.register = register;
 function mountVue(el, root, props, ctx, captured) {
     return new vue_1.default({
-        el: el,
-        provide: tslib_1.__assign({ piral: props.piral }, ctx),
-        render: function (h) {
+        el,
+        provide: Object.assign({ piral: props.piral }, ctx),
+        render(h) {
             return h(root, {
-                props: tslib_1.__assign(tslib_1.__assign({}, captured), props),
+                props: Object.assign(Object.assign({}, captured), props),
             });
         },
     });

package/lib/mount.js.map

@@ -1 +1 @@
-{"version":3,"file":"mount.js","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":";;;;AAAA,2BAA0C;AAG1C,SAAgB,QAAQ,CAAI,IAAY,EAAE,SAA2B;IACnE,aAAG,CAAC,SAAS,CAAC,IAAI,EAAE,SAA2B,CAAC,CAAC;AACnD,CAAC;AAFD,4BAEC;AAED,SAAgB,QAAQ,CACtB,EAAe,EACf,IAAsB,EACtB,KAAQ,EACR,GAAqB,EACrB,QAA8B;IAE9B,OAAO,IAAI,aAAG,CAAC;QACb,EAAE,IAAA;QACF,OAAO,qBACL,KAAK,EAAE,KAAK,CAAC,KAAK,IACf,GAAG,CACP;QACD,MAAM,YAAC,CAAC;YACN,OAAO,CAAC,CAAC,IAAI,EAAE;gBACb,KAAK,wCACA,QAAQ,GACR,KAAK,CACT;aACF,CAAC,CAAC;QACL,CAAC;KACF,CAAC,CAAC;AACL,CAAC;AAtBD,4BAsBC"}
+{"version":3,"file":"mount.js","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":";;;AAAA,6BAA0C;AAG1C,SAAgB,QAAQ,CAAI,IAAY,EAAE,SAA2B;IACnE,aAAG,CAAC,SAAS,CAAC,IAAI,EAAE,SAA2B,CAAC,CAAC;AACnD,CAAC;AAFD,4BAEC;AAED,SAAgB,QAAQ,CACtB,EAAe,EACf,IAAsB,EACtB,KAAQ,EACR,GAAqB,EACrB,QAA8B;IAE9B,OAAO,IAAI,aAAG,CAAC;QACb,EAAE;QACF,OAAO,kBACL,KAAK,EAAE,KAAK,CAAC,KAAK,IACf,GAAG,CACP;QACD,MAAM,CAAC,CAAC;YACN,OAAO,CAAC,CAAC,IAAI,EAAE;gBACb,KAAK,kCACA,QAAQ,GACR,KAAK,CACT;aACF,CAAC,CAAC;QACL,CAAC;KACF,CAAC,CAAC;AACL,CAAC;AAtBD,4BAsBC"}

package/lib/types.d.ts

@@ -1,5 +1,5 @@
-import { Component } from 'vue';
-import { ForeignComponent, ExtensionSlotProps } from 'piral-core';
+import type { Component } from 'vue';
+import type { ForeignComponent, ExtensionSlotProps } from 'piral-core';
 declare module 'piral-core/lib/types/custom' {
     interface PiletCustomApi extends PiletVueApi {
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "piral-vue",
-  "version": "1.0.0-pre.2108",
-  "description": "Plugin for integrating Vue components in Piral.",
+  "version": "1.0.0",
+  "description": "Plugin for integrating Vue@2 components in Piral.",
   "keywords": [
     "piral",
     "pilet-api",
@@ -20,14 +20,37 @@
   "module": "esm/index.js",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./esm/index.js",
+      "require": "./lib/index.js"
+    },
+    "./convert": {
+      "import": "./convert.js"
+    },
+    "./extend-webpack": {
+      "require": "./extend-webpack.js"
+    },
+    "./esm/*": {
+      "import": "./esm/*"
+    },
+    "./lib/*": {
+      "require": "./lib/*"
+    },
+    "./_/*": {
+      "import": "./esm/*.js",
+      "require": "./lib/*.js"
+    },
+    "./package.json": "./package.json"
+  },
   "sideEffects": false,
   "files": [
     "esm",
     "lib",
     "src",
     "convert.d.ts",
-    "convert.ts",
-    "convert.js"
+    "convert.js",
+    "extend-webpack.js"
   ],
   "repository": {
     "type": "git",
@@ -37,20 +60,20 @@
     "url": "https://github.com/smapiot/piral/issues"
   },
   "scripts": {
+    "cleanup": "rimraf esm lib convert.d.ts convert.js",
     "build": "yarn build:commonjs && yarn build:esnext && yarn build:convert",
-    "build:convert": "tsc convert.ts --skipLibCheck --declaration",
+    "build:convert": "tsc convert.ts --skipLibCheck --declaration --module esnext",
     "build:commonjs": "tsc --project tsconfig.json --outDir lib --module commonjs",
     "build:esnext": "tsc --project tsconfig.json --outDir esm --module esnext",
     "typedoc": "typedoc --json ../../../docs/types/piral-vue.json src --exclude \"src/**/*.test.*\"",
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "devDependencies": {
-    "piral-core": "^1.0.0-pre.2108",
+    "piral-core": "^1.0.0",
     "vue": "^2.6.10"
   },
   "peerDependencies": {
-    "piral-core": "1.x",
     "vue": "^2.0.0"
   },
-  "gitHead": "ef3c6274568822db4b8ccc95297254d05b0c7c0c"
+  "gitHead": "67d9a2920bd5231baf10bc87ae8985666b18fa3a"
 }

package/src/converter.ts

@@ -1,30 +1,47 @@
-import { ForeignComponent, BaseComponentProps } from 'piral-core';
+import type { ForeignComponent, BaseComponentProps } from 'piral-core';
 import { Component } from 'vue';
 import { mountVue } from './mount';
+import { createExtension } from './extension';
 
-export function createConverter(rootName = 'slot') {
+export interface VueConverterOptions {
+  /**
+   * Defines the name of the extension component.
+   * @default extension-component
+   */
+  selector?: string;
+  /**
+   * Defines the name of the root element.
+   * @default piral-slot
+   */
+  rootName?: string;
+}
+
+interface VueState {
+  instance: any;
+}
+
+export function createConverter(config: VueConverterOptions = {}) {
+  const { rootName = 'piral-slot', selector = 'extension-component' } = config;
+  const Extension = createExtension(rootName, selector);
   const convert = <TProps extends BaseComponentProps>(
     root: Component<TProps>,
     captured?: Record<string, any>,
-  ): ForeignComponent<TProps> => {
-    let instance: any = undefined;
-
-    return {
-      mount(parent, data, ctx) {
-        const el = parent.appendChild(document.createElement(rootName));
-        instance = mountVue(el, root, data, ctx, captured);
-      },
-      update(_, data) {
-        for (const prop in data) {
-          instance[prop] = data[prop];
-        }
-      },
-      unmount(el) {
-        instance.$destroy();
-        el.innerHTML = '';
-        instance = undefined;
-      },
-    };
-  };
+  ): ForeignComponent<TProps> => ({
+    mount(parent, data, ctx, locals: VueState) {
+      const el = parent.appendChild(document.createElement(rootName));
+      locals.instance = mountVue(el, root, data, ctx, captured);
+    },
+    update(parent, data, ctx, locals: VueState) {
+      for (const prop in data) {
+        locals.instance[prop] = data[prop];
+      }
+    },
+    unmount(parent, locals: VueState) {
+      locals.instance.$destroy();
+      parent.innerHTML = '';
+      locals.instance = undefined;
+    },
+  });
+  convert.Extension = Extension;
   return convert;
 }

package/src/create.ts

@@ -1,32 +1,18 @@
-import { PiralPlugin, ExtensionSlotProps } from 'piral-core';
+import type { PiralPlugin } from 'piral-core';
 import { createConverter } from './converter';
-import { PiletVueApi } from './types';
-import { createExtension } from './extension';
+import type { PiletVueApi } from './types';
 
 /**
  * Available configuration options for the Vue plugin.
  */
-export interface VueConfig {
-  /**
-   * Defines the name of the extension component.
-   * @default extension-component
-   */
-  selector?: string;
-  /**
-   * Defines the name of the root element.
-   * @default slot
-   */
-  rootName?: string;
-}
+export interface VueConfig {}
 
 /**
  * Creates new Pilet API extensions for integration of Vue.
  */
 export function createVueApi(config: VueConfig = {}): PiralPlugin<PiletVueApi> {
-  const { rootName, selector } = config;
-
   return (context) => {
-    const convert = createConverter(rootName);
+    const convert = createConverter(config);
     context.converters.vue = ({ root, captured }) => convert(root, captured);
 
     return {
@@ -37,7 +23,7 @@ export function createVueApi(config: VueConfig = {}): PiralPlugin<PiletVueApi> {
           captured,
         };
       },
-      VueExtension: createExtension(rootName, selector),
+      VueExtension: convert.Extension,
     };
   };
 }

package/src/extension.ts

@@ -2,7 +2,7 @@ import type { ExtensionSlotProps } from 'piral-core';
 import type { Component } from 'vue';
 import { register } from './mount';
 
-export function createExtension(rootName = 'slot', selector = 'extension-component'): Component<ExtensionSlotProps> {
+export function createExtension(rootName: string, selector: string): Component<ExtensionSlotProps> {
   const VueExtension: Component<ExtensionSlotProps> = {
     functional: false,
     props: ['name', 'empty', 'render', 'params'],
@@ -10,6 +10,39 @@ export function createExtension(rootName = 'slot', selector = 'extension-compone
     render(createElement) {
       return createElement(rootName);
     },
+    watch: {
+      params(newValue, oldValue) {
+        if (newValue !== oldValue) {
+          const newKeys = Object.keys(newValue);
+          const oldKeys = Object.keys(oldValue);
+
+          if (newKeys.length === oldKeys.length) {
+            let changed = false;
+
+            for (const key of newKeys) {
+              if (!oldKeys.includes(key) || newValue[key] !== oldValue[key]) {
+                changed = true;
+                break;
+              }
+            }
+
+            if (!changed) {
+              return;
+            }
+          }
+
+          const ev = new CustomEvent('extension-props-changed', {
+            detail: {
+              empty: this.empty,
+              params: newValue,
+              render: this.render,
+              name: this.name,
+            },
+          });
+          this.$el.dispatchEvent(ev);
+        }
+      },
+    },
     mounted() {
       this.piral.renderHtmlExtension(this.$el, {
         empty: this.empty,

package/src/mount.ts

@@ -1,5 +1,5 @@
 import Vue, { VueConstructor } from 'vue';
-import { BaseComponentProps, ComponentContext } from 'piral-core';
+import type { BaseComponentProps, ComponentContext } from 'piral-core';
 
 export function register<T>(name: string, component: Vue.Component<T>) {
   Vue.component(name, component as VueConstructor);

package/src/types.ts

@@ -1,5 +1,5 @@
-import { Component } from 'vue';
-import { ForeignComponent, ExtensionSlotProps } from 'piral-core';
+import type { Component } from 'vue';
+import type { ForeignComponent, ExtensionSlotProps } from 'piral-core';
 
 declare module 'piral-core/lib/types/custom' {
   interface PiletCustomApi extends PiletVueApi {}

package/convert.ts

@@ -1,16 +0,0 @@
-import type { HtmlComponent } from 'piral-core';
-import { createConverter } from './lib/converter';
-import { createExtension } from './lib/extension';
-
-const convert = createConverter();
-
-export interface VueConverter {
-  (...params: Parameters<typeof convert>): HtmlComponent<any>;
-}
-
-export const fromVue: VueConverter = (root, captured) => ({
-  type: 'html',
-  component: convert(root, captured),
-});
-
-export const createVueExtension = createExtension;