piral-vue-3 1.5.4-beta.6998 → 1.5.4-beta.7014

package/README.md

@@ -20,6 +20,49 @@ Transforms a standard Vue@3 component into a component that can be used in Piral
 
 The extension slot component to be used in Vue@3 components. This is not really needed, as it is made available automatically via a Vue@3 custom element named `extension-component`.
 
+### `defineVue3Middleware`
+
+This function is used to declare additional middleware such as plugins when setting up Vue3.
+
+Example in a standalone pilet:
+
+```ts
+import { fromVue3, defineVue3Middleware } from 'piral-vue-3/convert';
+import Page from './Page.vue';
+import i18next from 'i18next';
+import I18NextVue from 'i18next-vue';
+import type { PiletApi } from 'sample-piral';
+
+i18next.init({
+  lng: 'de',
+  interpolation: {
+    escapeValue: false
+  },
+  fallbackLng: false,
+  resources: {
+		en: {
+			translation: {
+				greeter: "Welcome",
+			},
+		},
+		de: {
+			translation: {
+				greeter: "Willkommen",
+			},
+		},
+  }
+});
+
+export function setup(app: PiletApi) {
+  defineVue3Middleware(vue => {
+    vue.use(I18NextVue, { i18next });
+  });
+  app.registerPage('/sample', fromVue3(Page));
+}
+```
+
+Here we integrate the `i18next` plugin using the `i18next-vue` package. By defining the middleware using the `defineVue3Middleware` and the provided callback, we can integrate the plugin without requiring any access to the original `app` instance of Vue.
+
 ## Usage
 
 ::: summary: For pilet authors

package/convert.d.ts

@@ -13,6 +13,7 @@ export interface Vue3Converter {
 export declare function createVue3Converter(...params: Parameters<typeof createConverter>): {
     from: Vue3Converter;
     Extension: Component<any>;
+    defineMiddleware: (setup: import("./esm/types").Vue3MiddlewareHandler) => void;
 };
-declare const fromVue3: Vue3Converter, Vue3Extension: Component<any>;
-export { fromVue3, Vue3Extension };
+declare const fromVue3: Vue3Converter, Vue3Extension: Component<any>, defineVue3Middleware: (setup: import("./esm/types").Vue3MiddlewareHandler) => void;
+export { fromVue3, Vue3Extension, defineVue3Middleware };

package/convert.js

@@ -6,11 +6,12 @@ export function createVue3Converter() {
     }
     var convert = createConverter.apply(void 0, params);
     var Extension = convert.Extension;
+    var defineMiddleware = convert.defineMiddleware;
     var from = function (root, captured) { return ({
         type: 'html',
         component: convert(root, captured),
     }); };
-    return { from: from, Extension: Extension };
+    return { from: from, Extension: Extension, defineMiddleware: defineMiddleware };
 }
-var _a = createVue3Converter(), fromVue3 = _a.from, Vue3Extension = _a.Extension;
-export { fromVue3, Vue3Extension };
+var _a = createVue3Converter(), fromVue3 = _a.from, Vue3Extension = _a.Extension, defineVue3Middleware = _a.defineMiddleware;
+export { fromVue3, Vue3Extension, defineVue3Middleware };

package/esm/converter.d.ts

@@ -1,5 +1,6 @@
 import type { ForeignComponent, BaseComponentProps } from 'piral-core';
 import { Component } from 'vue';
+import { Vue3MiddlewareHandler } from './types';
 export interface Vue3ConverterOptions {
     /**
      * Defines the name of the extension component.
@@ -15,4 +16,5 @@ export interface Vue3ConverterOptions {
 export declare function createConverter(config?: Vue3ConverterOptions): {
     <TProps extends BaseComponentProps>(root: Component<TProps>, captured?: Record<string, any>): ForeignComponent<TProps>;
     Extension: Component<import("piral-core").ExtensionSlotProps>;
+    defineMiddleware(setup: Vue3MiddlewareHandler): void;
 };

package/esm/converter.js

@@ -3,10 +3,12 @@ import { mountVue } from './mount';
 export function createConverter(config = {}) {
     const { rootName = 'piral-slot', selector = 'extension-component' } = config;
     const Extension = createExtension(rootName);
+    let middleware = () => { };
     const convert = (root, captured) => ({
         mount(parent, data, ctx, locals) {
             const el = parent.appendChild(document.createElement(rootName));
             const app = mountVue(root, data, ctx, captured);
+            middleware(app);
             app.component(selector, createExtension(rootName));
             app.mount(el);
             !app._props && (app._props = {});
@@ -24,6 +26,9 @@ export function createConverter(config = {}) {
         },
     });
     convert.Extension = Extension;
+    convert.defineMiddleware = (setup) => {
+        middleware = setup;
+    };
     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,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAmBnC,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,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,GAAG,CAAC,SAAS,CAAC,QAAQ,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC;YACnD,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YACd,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;YACjC,MAAM,CAAC,QAAQ,GAAG,GAAG,CAAC;QACxB,CAAC;QACD,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAiB;YACzC,KAAK,MAAM,IAAI,IAAI,IAAI,EAAE;gBACvB,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;aAC3C;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,OAAO,CAAC;AACjB,CAAC"}
+{"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,IAAI,UAAU,GAA0B,GAAG,EAAE,GAAE,CAAC,CAAC;IACjD,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,UAAU,CAAC,GAAG,CAAC,CAAC;YAChB,GAAG,CAAC,SAAS,CAAC,QAAQ,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC;YACnD,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YACd,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;YACjC,MAAM,CAAC,QAAQ,GAAG,GAAG,CAAC;QACxB,CAAC;QACD,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAiB;YACzC,KAAK,MAAM,IAAI,IAAI,IAAI,EAAE;gBACvB,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;aAC3C;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,KAA4B,EAAE,EAAE;QAC1D,UAAU,GAAG,KAAK,CAAC;IACrB,CAAC,CAAC;IACF,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/esm/create.js

@@ -15,6 +15,7 @@ export function createVue3Api(config = {}) {
                 };
             },
             Vue3Extension: convert.Extension,
+            defineVue3Middleware: convert.defineMiddleware,
         };
     };
 }

package/esm/create.js.map

@@ -1 +1 @@
-{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAwB,MAAM,aAAa,CAAC;AAQpE;;GAEG;AACH,MAAM,UAAU,aAAa,CAAC,SAAqB,EAAE;IACnD,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,MAAM,OAAO,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;QACxC,OAAO,CAAC,UAAU,CAAC,IAAI,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QAE1E,OAAO;YACL,QAAQ,CAAC,IAAI,EAAE,QAAQ;gBACrB,OAAO;oBACL,IAAI,EAAE,MAAM;oBACZ,IAAI;oBACJ,QAAQ;iBACT,CAAC;YACJ,CAAC;YACD,aAAa,EAAE,OAAO,CAAC,SAAS;SACjC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAwB,MAAM,aAAa,CAAC;AAQpE;;GAEG;AACH,MAAM,UAAU,aAAa,CAAC,SAAqB,EAAE;IACnD,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,MAAM,OAAO,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;QACxC,OAAO,CAAC,UAAU,CAAC,IAAI,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QAE1E,OAAO;YACL,QAAQ,CAAC,IAAI,EAAE,QAAQ;gBACrB,OAAO;oBACL,IAAI,EAAE,MAAM;oBACZ,IAAI;oBACJ,QAAQ;iBACT,CAAC;YACJ,CAAC;YACD,aAAa,EAAE,OAAO,CAAC,SAAS;YAChC,oBAAoB,EAAE,OAAO,CAAC,gBAAgB;SAC/C,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}

package/esm/types.d.ts

@@ -1,4 +1,4 @@
-import type { Component } from 'vue';
+import type { App, Component } from 'vue';
 import type { ForeignComponent, ExtensionSlotProps } from 'piral-core';
 declare module 'piral-core/lib/types/custom' {
     interface PiletCustomApi extends PiletVue3Api {
@@ -7,6 +7,15 @@ declare module 'piral-core/lib/types/custom' {
         vue3(component: Vue3Component<TProps>): ForeignComponent<TProps>;
     }
 }
+/**
+ * Defines a handler to set up Vue 3 middleware.
+ */
+export interface Vue3MiddlewareHandler {
+    /**
+     * Receives the app instance to integrate middleware.
+     */
+    (app: App<Element>): void;
+}
 export interface Vue3Component<TProps> {
     /**
      * The root component of Vue rendering tree.
@@ -36,4 +45,8 @@ export interface PiletVue3Api {
      * Vue component for displaying extensions of the given name.
      */
     Vue3Extension: Component<ExtensionSlotProps>;
+    /**
+     * Function to use for declaring a callback to setup additional middleware.
+     */
+    defineVue3Middleware(setup: Vue3MiddlewareHandler): void;
 }

package/lib/converter.d.ts

@@ -1,5 +1,6 @@
 import type { ForeignComponent, BaseComponentProps } from 'piral-core';
 import { Component } from 'vue';
+import { Vue3MiddlewareHandler } from './types';
 export interface Vue3ConverterOptions {
     /**
      * Defines the name of the extension component.
@@ -15,4 +16,5 @@ export interface Vue3ConverterOptions {
 export declare function createConverter(config?: Vue3ConverterOptions): {
     <TProps extends BaseComponentProps>(root: Component<TProps>, captured?: Record<string, any>): ForeignComponent<TProps>;
     Extension: Component<import("piral-core").ExtensionSlotProps>;
+    defineMiddleware(setup: Vue3MiddlewareHandler): void;
 };

package/lib/converter.js

@@ -6,10 +6,12 @@ const mount_1 = require("./mount");
 function createConverter(config = {}) {
     const { rootName = 'piral-slot', selector = 'extension-component' } = config;
     const Extension = (0, extension_1.createExtension)(rootName);
+    let middleware = () => { };
     const convert = (root, captured) => ({
         mount(parent, data, ctx, locals) {
             const el = parent.appendChild(document.createElement(rootName));
             const app = (0, mount_1.mountVue)(root, data, ctx, captured);
+            middleware(app);
             app.component(selector, (0, extension_1.createExtension)(rootName));
             app.mount(el);
             !app._props && (app._props = {});
@@ -27,6 +29,9 @@ function createConverter(config = {}) {
         },
     });
     convert.Extension = Extension;
+    convert.defineMiddleware = (setup) => {
+        middleware = setup;
+    };
     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,2CAA8C;AAC9C,mCAAmC;AAmBnC,SAAgB,eAAe,CAAC,SAA+B,EAAE;IAC/D,MAAM,EAAE,QAAQ,GAAG,YAAY,EAAE,QAAQ,GAAG,qBAAqB,EAAE,GAAG,MAAM,CAAC;IAC7E,MAAM,SAAS,GAAG,IAAA,2BAAe,EAAC,QAAQ,CAAC,CAAC;IAC5C,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,IAAA,gBAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC;YAChD,GAAG,CAAC,SAAS,CAAC,QAAQ,EAAE,IAAA,2BAAe,EAAC,QAAQ,CAAC,CAAC,CAAC;YACnD,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YACd,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;YACjC,MAAM,CAAC,QAAQ,GAAG,GAAG,CAAC;QACxB,CAAC;QACD,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAiB;YACzC,KAAK,MAAM,IAAI,IAAI,IAAI,EAAE;gBACvB,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;aAC3C;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,OAAO,CAAC;AACjB,CAAC;AA5BD,0CA4BC"}
+{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":";;;AAEA,2CAA8C;AAC9C,mCAAmC;AAoBnC,SAAgB,eAAe,CAAC,SAA+B,EAAE;IAC/D,MAAM,EAAE,QAAQ,GAAG,YAAY,EAAE,QAAQ,GAAG,qBAAqB,EAAE,GAAG,MAAM,CAAC;IAC7E,MAAM,SAAS,GAAG,IAAA,2BAAe,EAAC,QAAQ,CAAC,CAAC;IAC5C,IAAI,UAAU,GAA0B,GAAG,EAAE,GAAE,CAAC,CAAC;IACjD,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,IAAA,gBAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC;YAChD,UAAU,CAAC,GAAG,CAAC,CAAC;YAChB,GAAG,CAAC,SAAS,CAAC,QAAQ,EAAE,IAAA,2BAAe,EAAC,QAAQ,CAAC,CAAC,CAAC;YACnD,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YACd,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;YACjC,MAAM,CAAC,QAAQ,GAAG,GAAG,CAAC;QACxB,CAAC;QACD,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAiB;YACzC,KAAK,MAAM,IAAI,IAAI,IAAI,EAAE;gBACvB,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;aAC3C;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,KAA4B,EAAE,EAAE;QAC1D,UAAU,GAAG,KAAK,CAAC;IACrB,CAAC,CAAC;IACF,OAAO,OAAO,CAAC;AACjB,CAAC;AAjCD,0CAiCC"}

package/lib/create.js

@@ -18,6 +18,7 @@ function createVue3Api(config = {}) {
                 };
             },
             Vue3Extension: convert.Extension,
+            defineVue3Middleware: convert.defineMiddleware,
         };
     };
 }

package/lib/create.js.map

@@ -1 +1 @@
-{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":";;;AACA,2CAAoE;AAQpE;;GAEG;AACH,SAAgB,aAAa,CAAC,SAAqB,EAAE;IACnD,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,MAAM,OAAO,GAAG,IAAA,2BAAe,EAAC,MAAM,CAAC,CAAC;QACxC,OAAO,CAAC,UAAU,CAAC,IAAI,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QAE1E,OAAO;YACL,QAAQ,CAAC,IAAI,EAAE,QAAQ;gBACrB,OAAO;oBACL,IAAI,EAAE,MAAM;oBACZ,IAAI;oBACJ,QAAQ;iBACT,CAAC;YACJ,CAAC;YACD,aAAa,EAAE,OAAO,CAAC,SAAS;SACjC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAhBD,sCAgBC"}
+{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":";;;AACA,2CAAoE;AAQpE;;GAEG;AACH,SAAgB,aAAa,CAAC,SAAqB,EAAE;IACnD,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,MAAM,OAAO,GAAG,IAAA,2BAAe,EAAC,MAAM,CAAC,CAAC;QACxC,OAAO,CAAC,UAAU,CAAC,IAAI,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QAE1E,OAAO;YACL,QAAQ,CAAC,IAAI,EAAE,QAAQ;gBACrB,OAAO;oBACL,IAAI,EAAE,MAAM;oBACZ,IAAI;oBACJ,QAAQ;iBACT,CAAC;YACJ,CAAC;YACD,aAAa,EAAE,OAAO,CAAC,SAAS;YAChC,oBAAoB,EAAE,OAAO,CAAC,gBAAgB;SAC/C,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAjBD,sCAiBC"}

package/lib/types.d.ts

@@ -1,4 +1,4 @@
-import type { Component } from 'vue';
+import type { App, Component } from 'vue';
 import type { ForeignComponent, ExtensionSlotProps } from 'piral-core';
 declare module 'piral-core/lib/types/custom' {
     interface PiletCustomApi extends PiletVue3Api {
@@ -7,6 +7,15 @@ declare module 'piral-core/lib/types/custom' {
         vue3(component: Vue3Component<TProps>): ForeignComponent<TProps>;
     }
 }
+/**
+ * Defines a handler to set up Vue 3 middleware.
+ */
+export interface Vue3MiddlewareHandler {
+    /**
+     * Receives the app instance to integrate middleware.
+     */
+    (app: App<Element>): void;
+}
 export interface Vue3Component<TProps> {
     /**
      * The root component of Vue rendering tree.
@@ -36,4 +45,8 @@ export interface PiletVue3Api {
      * Vue component for displaying extensions of the given name.
      */
     Vue3Extension: Component<ExtensionSlotProps>;
+    /**
+     * Function to use for declaring a callback to setup additional middleware.
+     */
+    defineVue3Middleware(setup: Vue3MiddlewareHandler): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-vue-3",
-  "version": "1.5.4-beta.6998",
+  "version": "1.5.4-beta.7014",
   "description": "Plugin for integrating Vue@3 components in Piral.",
   "keywords": [
     "piral",
@@ -69,8 +69,8 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "devDependencies": {
-    "piral-core": "1.5.4-beta.6998",
+    "piral-core": "1.5.4-beta.7014",
     "vue": "^3.0.0"
   },
-  "gitHead": "51477ebb4b618de0d67c87d741448759437b43f6"
+  "gitHead": "ddd82bbabd5c2074e6c52df74383970ce4e28d45"
 }

package/src/converter.ts

@@ -2,6 +2,7 @@ import type { ForeignComponent, BaseComponentProps } from 'piral-core';
 import { Component, App } from 'vue';
 import { createExtension } from './extension';
 import { mountVue } from './mount';
+import { Vue3MiddlewareHandler } from './types';
 
 export interface Vue3ConverterOptions {
   /**
@@ -23,6 +24,7 @@ interface Vue3State {
 export function createConverter(config: Vue3ConverterOptions = {}) {
   const { rootName = 'piral-slot', selector = 'extension-component' } = config;
   const Extension = createExtension(rootName);
+  let middleware: Vue3MiddlewareHandler = () => {};
   const convert = <TProps extends BaseComponentProps>(
     root: Component<TProps>,
     captured?: Record<string, any>,
@@ -30,6 +32,7 @@ export function createConverter(config: Vue3ConverterOptions = {}) {
     mount(parent, data, ctx, locals: Vue3State) {
       const el = parent.appendChild(document.createElement(rootName));
       const app = mountVue(root, data, ctx, captured);
+      middleware(app);
       app.component(selector, createExtension(rootName));
       app.mount(el);
       !app._props && (app._props = {});
@@ -47,5 +50,8 @@ export function createConverter(config: Vue3ConverterOptions = {}) {
     },
   });
   convert.Extension = Extension;
+  convert.defineMiddleware = (setup: Vue3MiddlewareHandler) => {
+    middleware = setup;
+  };
   return convert;
 }

package/src/create.ts

@@ -24,6 +24,7 @@ export function createVue3Api(config: Vue3Config = {}): PiralPlugin<PiletVue3Api
         };
       },
       Vue3Extension: convert.Extension,
+      defineVue3Middleware: convert.defineMiddleware,
     };
   };
 }

package/src/types.ts

@@ -1,4 +1,4 @@
-import type { Component } from 'vue';
+import type { App, Component } from 'vue';
 import type { ForeignComponent, ExtensionSlotProps } from 'piral-core';
 
 declare module 'piral-core/lib/types/custom' {
@@ -9,6 +9,16 @@ declare module 'piral-core/lib/types/custom' {
   }
 }
 
+/**
+ * Defines a handler to set up Vue 3 middleware.
+ */
+export interface Vue3MiddlewareHandler {
+  /**
+   * Receives the app instance to integrate middleware.
+   */
+  (app: App<Element>): void;
+}
+
 export interface Vue3Component<TProps> {
   /**
    * The root component of Vue rendering tree.
@@ -39,4 +49,8 @@ export interface PiletVue3Api {
    * Vue component for displaying extensions of the given name.
    */
   Vue3Extension: Component<ExtensionSlotProps>;
+  /**
+   * Function to use for declaring a callback to setup additional middleware.
+   */
+  defineVue3Middleware(setup: Vue3MiddlewareHandler): void;
 }