@merkur/plugin-component 0.34.0 → 0.36.0

package/lib/helpers.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+/**
+ * Utility function to iterate thorugh views returned from
+ * view factory and call callback function with view arguments
+ * on each them.
+ */
+async function mapViews(widget, viewFactory, callback) {
+    if (widget.$in.component.resolvedViews.has(viewFactory)) {
+        return mapResolvedViews(widget.$in.component.resolvedViews.get(viewFactory) ?? [], callback);
+    }
+    const { containerSelector } = widget;
+    const { View, ErrorView, slot = {} } = await viewFactory(widget);
+    // Add additional slot information to slot views
+    const slots = Object.keys(widget.slot ?? {}).reduce((acc, cur) => {
+        acc[cur] = {
+            ...slot[cur],
+            isSlot: true,
+            containerSelector: widget.slot[cur]?.containerSelector,
+            container: widget.slot[cur]?.container,
+        };
+        return acc;
+    }, {});
+    const views = [
+        {
+            View,
+            ErrorView,
+            containerSelector,
+            isSlot: false,
+            container: widget.container,
+        },
+        ...Object.values(slots),
+    ];
+    widget.$in.component.resolvedViews.set(viewFactory, views);
+    return mapResolvedViews(views, callback);
+}
+function mapResolvedViews(views, callback) {
+    return views.map(({ View, containerSelector, isSlot, container }) => {
+        callback({
+            View,
+            isSlot,
+            containerSelector,
+            container: (containerSelector && document?.querySelector(containerSelector)) ||
+                container ||
+                null,
+        });
+    });
+}
+
+exports.mapViews = mapViews;

package/lib/helpers.d.ts

@@ -0,0 +1,20 @@
+import { Widget } from '@merkur/core';
+import { ViewFactory, ViewFactorySlotType, ViewType } from '@merkur/plugin-component';
+export type MapViewArgs = {
+    View: ViewType;
+    ErrorView?: ViewType;
+    containerSelector: string;
+    container: Element | null;
+    isSlot: boolean;
+    slot?: Record<string, {
+        isSlot: boolean;
+        containerSelector?: string;
+        container?: Element;
+    } & ViewFactorySlotType>;
+};
+/**
+ * Utility function to iterate thorugh views returned from
+ * view factory and call callback function with view arguments
+ * on each them.
+ */
+export declare function mapViews<T>(widget: Widget, viewFactory: ViewFactory, callback: (viewArgs: MapViewArgs) => T): Promise<void[]>;

package/lib/helpers.es9.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+/**
+ * Utility function to iterate thorugh views returned from
+ * view factory and call callback function with view arguments
+ * on each them.
+ */
+async function mapViews(widget, viewFactory, callback) {
+    var _a, _b;
+    if (widget.$in.component.resolvedViews.has(viewFactory)) {
+        return mapResolvedViews((_a = widget.$in.component.resolvedViews.get(viewFactory)) !== null && _a !== void 0 ? _a : [], callback);
+    }
+    const { containerSelector } = widget;
+    const { View, ErrorView, slot = {} } = await viewFactory(widget);
+    // Add additional slot information to slot views
+    const slots = Object.keys((_b = widget.slot) !== null && _b !== void 0 ? _b : {}).reduce((acc, cur) => {
+        var _a, _b;
+        acc[cur] = {
+            ...slot[cur],
+            isSlot: true,
+            containerSelector: (_a = widget.slot[cur]) === null || _a === void 0 ? void 0 : _a.containerSelector,
+            container: (_b = widget.slot[cur]) === null || _b === void 0 ? void 0 : _b.container,
+        };
+        return acc;
+    }, {});
+    const views = [
+        {
+            View,
+            ErrorView,
+            containerSelector,
+            isSlot: false,
+            container: widget.container,
+        },
+        ...Object.values(slots),
+    ];
+    widget.$in.component.resolvedViews.set(viewFactory, views);
+    return mapResolvedViews(views, callback);
+}
+function mapResolvedViews(views, callback) {
+    return views.map(({ View, containerSelector, isSlot, container }) => {
+        callback({
+            View,
+            isSlot,
+            containerSelector,
+            container: (containerSelector && (document === null || document === void 0 ? void 0 : document.querySelector(containerSelector))) ||
+                container ||
+                null,
+        });
+    });
+}
+
+exports.mapViews = mapViews;

package/lib/helpers.es9.js

@@ -0,0 +1,52 @@
+'use strict';
+
+/**
+ * Utility function to iterate thorugh views returned from
+ * view factory and call callback function with view arguments
+ * on each them.
+ */
+async function mapViews(widget, viewFactory, callback) {
+    var _a, _b;
+    if (widget.$in.component.resolvedViews.has(viewFactory)) {
+        return mapResolvedViews((_a = widget.$in.component.resolvedViews.get(viewFactory)) !== null && _a !== void 0 ? _a : [], callback);
+    }
+    const { containerSelector } = widget;
+    const { View, ErrorView, slot = {} } = await viewFactory(widget);
+    // Add additional slot information to slot views
+    const slots = Object.keys((_b = widget.slot) !== null && _b !== void 0 ? _b : {}).reduce((acc, cur) => {
+        var _a, _b;
+        acc[cur] = {
+            ...slot[cur],
+            isSlot: true,
+            containerSelector: (_a = widget.slot[cur]) === null || _a === void 0 ? void 0 : _a.containerSelector,
+            container: (_b = widget.slot[cur]) === null || _b === void 0 ? void 0 : _b.container,
+        };
+        return acc;
+    }, {});
+    const views = [
+        {
+            View,
+            ErrorView,
+            containerSelector,
+            isSlot: false,
+            container: widget.container,
+        },
+        ...Object.values(slots),
+    ];
+    widget.$in.component.resolvedViews.set(viewFactory, views);
+    return mapResolvedViews(views, callback);
+}
+function mapResolvedViews(views, callback) {
+    return views.map(({ View, containerSelector, isSlot, container }) => {
+        callback({
+            View,
+            isSlot,
+            containerSelector,
+            container: (containerSelector && (document === null || document === void 0 ? void 0 : document.querySelector(containerSelector))) ||
+                container ||
+                null,
+        });
+    });
+}
+
+exports.mapViews = mapViews;

package/lib/helpers.es9.mjs

@@ -0,0 +1,50 @@
+/**
+ * Utility function to iterate thorugh views returned from
+ * view factory and call callback function with view arguments
+ * on each them.
+ */
+async function mapViews(widget, viewFactory, callback) {
+    var _a, _b;
+    if (widget.$in.component.resolvedViews.has(viewFactory)) {
+        return mapResolvedViews((_a = widget.$in.component.resolvedViews.get(viewFactory)) !== null && _a !== void 0 ? _a : [], callback);
+    }
+    const { containerSelector } = widget;
+    const { View, ErrorView, slot = {} } = await viewFactory(widget);
+    // Add additional slot information to slot views
+    const slots = Object.keys((_b = widget.slot) !== null && _b !== void 0 ? _b : {}).reduce((acc, cur) => {
+        var _a, _b;
+        acc[cur] = {
+            ...slot[cur],
+            isSlot: true,
+            containerSelector: (_a = widget.slot[cur]) === null || _a === void 0 ? void 0 : _a.containerSelector,
+            container: (_b = widget.slot[cur]) === null || _b === void 0 ? void 0 : _b.container,
+        };
+        return acc;
+    }, {});
+    const views = [
+        {
+            View,
+            ErrorView,
+            containerSelector,
+            isSlot: false,
+            container: widget.container,
+        },
+        ...Object.values(slots),
+    ];
+    widget.$in.component.resolvedViews.set(viewFactory, views);
+    return mapResolvedViews(views, callback);
+}
+function mapResolvedViews(views, callback) {
+    return views.map(({ View, containerSelector, isSlot, container }) => {
+        callback({
+            View,
+            isSlot,
+            containerSelector,
+            container: (containerSelector && (document === null || document === void 0 ? void 0 : document.querySelector(containerSelector))) ||
+                container ||
+                null,
+        });
+    });
+}
+
+export { mapViews };

package/lib/helpers.js

@@ -0,0 +1,50 @@
+'use strict';
+
+/**
+ * Utility function to iterate thorugh views returned from
+ * view factory and call callback function with view arguments
+ * on each them.
+ */
+async function mapViews(widget, viewFactory, callback) {
+    if (widget.$in.component.resolvedViews.has(viewFactory)) {
+        return mapResolvedViews(widget.$in.component.resolvedViews.get(viewFactory) ?? [], callback);
+    }
+    const { containerSelector } = widget;
+    const { View, ErrorView, slot = {} } = await viewFactory(widget);
+    // Add additional slot information to slot views
+    const slots = Object.keys(widget.slot ?? {}).reduce((acc, cur) => {
+        acc[cur] = {
+            ...slot[cur],
+            isSlot: true,
+            containerSelector: widget.slot[cur]?.containerSelector,
+            container: widget.slot[cur]?.container,
+        };
+        return acc;
+    }, {});
+    const views = [
+        {
+            View,
+            ErrorView,
+            containerSelector,
+            isSlot: false,
+            container: widget.container,
+        },
+        ...Object.values(slots),
+    ];
+    widget.$in.component.resolvedViews.set(viewFactory, views);
+    return mapResolvedViews(views, callback);
+}
+function mapResolvedViews(views, callback) {
+    return views.map(({ View, containerSelector, isSlot, container }) => {
+        callback({
+            View,
+            isSlot,
+            containerSelector,
+            container: (containerSelector && document?.querySelector(containerSelector)) ||
+                container ||
+                null,
+        });
+    });
+}
+
+exports.mapViews = mapViews;

package/lib/helpers.mjs

@@ -0,0 +1,48 @@
+/**
+ * Utility function to iterate thorugh views returned from
+ * view factory and call callback function with view arguments
+ * on each them.
+ */
+async function mapViews(widget, viewFactory, callback) {
+    if (widget.$in.component.resolvedViews.has(viewFactory)) {
+        return mapResolvedViews(widget.$in.component.resolvedViews.get(viewFactory) ?? [], callback);
+    }
+    const { containerSelector } = widget;
+    const { View, ErrorView, slot = {} } = await viewFactory(widget);
+    // Add additional slot information to slot views
+    const slots = Object.keys(widget.slot ?? {}).reduce((acc, cur) => {
+        acc[cur] = {
+            ...slot[cur],
+            isSlot: true,
+            containerSelector: widget.slot[cur]?.containerSelector,
+            container: widget.slot[cur]?.container,
+        };
+        return acc;
+    }, {});
+    const views = [
+        {
+            View,
+            ErrorView,
+            containerSelector,
+            isSlot: false,
+            container: widget.container,
+        },
+        ...Object.values(slots),
+    ];
+    widget.$in.component.resolvedViews.set(viewFactory, views);
+    return mapResolvedViews(views, callback);
+}
+function mapResolvedViews(views, callback) {
+    return views.map(({ View, containerSelector, isSlot, container }) => {
+        callback({
+            View,
+            isSlot,
+            containerSelector,
+            container: (containerSelector && document?.querySelector(containerSelector)) ||
+                container ||
+                null,
+        });
+    });
+}
+
+export { mapViews };

package/lib/index.cjs

@@ -29,6 +29,7 @@ function componentPlugin() {
         isMounted: false,
         isHydrated: false,
         suspendedTasks: [],
+        resolvedViews: new Map(),
       };
 
       core.assignMissingKeys(widget, componentAPI(), widgetProperties);
@@ -147,4 +148,45 @@ function componentAPI() {
   };
 }
 
+/**
+ * Typed helper to make it easier to define widget properties.
+ *
+ * @type import('@merkur/plugin-component').createSlotFactory
+ */
+function createSlotFactory(creator) {
+  return async (widget) => creator(widget);
+}
+
+/**
+ * Typed helper to make it easier to define widget properties.
+ *
+ * @type import('@merkur/plugin-component').createViewFactory
+ */
+function createViewFactory(creator) {
+  return async (widget) => {
+    const { slotFactories, ...restParams } = await creator(widget);
+
+    if (!slotFactories) {
+      return {
+        ...restParams,
+      };
+    }
+
+    const slot = (
+      await Promise.all(slotFactories.map((creator) => creator(widget)))
+    ).reduce((acc, cur) => {
+      acc[cur.name] = cur;
+
+      return acc;
+    }, {});
+
+    return {
+      ...restParams,
+      slot,
+    };
+  };
+}
+
 exports.componentPlugin = componentPlugin;
+exports.createSlotFactory = createSlotFactory;
+exports.createViewFactory = createViewFactory;

package/lib/index.es9.cjs

@@ -25,7 +25,8 @@ function componentPlugin() {
         lifeCycle,
         isMounted: false,
         isHydrated: false,
-        suspendedTasks: []
+        suspendedTasks: [],
+        resolvedViews: new Map()
       };
       core.assignMissingKeys(widget, componentAPI(), widgetProperties);
       widget = core.setDefaultValueForUndefined(widget, ['props', 'state']);
@@ -39,7 +40,6 @@ function componentPlugin() {
     }
   };
 }
-
 async function callLifeCycleMethod(widget, methodName, args) {
   const {
     lifeCycle
@@ -127,4 +127,42 @@ function componentAPI() {
     }
   };
 }
+
+/**
+ * Typed helper to make it easier to define widget properties.
+ *
+ * @type import('@merkur/plugin-component').createSlotFactory
+ */
+function createSlotFactory(creator) {
+  return async widget => creator(widget);
+}
+
+/**
+ * Typed helper to make it easier to define widget properties.
+ *
+ * @type import('@merkur/plugin-component').createViewFactory
+ */
+function createViewFactory(creator) {
+  return async widget => {
+    const {
+      slotFactories,
+      ...restParams
+    } = await creator(widget);
+    if (!slotFactories) {
+      return {
+        ...restParams
+      };
+    }
+    const slot = (await Promise.all(slotFactories.map(creator => creator(widget)))).reduce((acc, cur) => {
+      acc[cur.name] = cur;
+      return acc;
+    }, {});
+    return {
+      ...restParams,
+      slot
+    };
+  };
+}
 exports.componentPlugin = componentPlugin;
+exports.createSlotFactory = createSlotFactory;
+exports.createViewFactory = createViewFactory;

package/lib/index.es9.mjs

@@ -23,7 +23,8 @@ function componentPlugin() {
         lifeCycle,
         isMounted: false,
         isHydrated: false,
-        suspendedTasks: []
+        suspendedTasks: [],
+        resolvedViews: new Map()
       };
       assignMissingKeys(widget, componentAPI(), widgetProperties);
       widget = setDefaultValueForUndefined(widget, ['props', 'state']);
@@ -37,7 +38,6 @@ function componentPlugin() {
     }
   };
 }
-
 async function callLifeCycleMethod(widget, methodName, args) {
   const {
     lifeCycle
@@ -125,4 +125,40 @@ function componentAPI() {
     }
   };
 }
-export { componentPlugin };
+
+/**
+ * Typed helper to make it easier to define widget properties.
+ *
+ * @type import('@merkur/plugin-component').createSlotFactory
+ */
+function createSlotFactory(creator) {
+  return async widget => creator(widget);
+}
+
+/**
+ * Typed helper to make it easier to define widget properties.
+ *
+ * @type import('@merkur/plugin-component').createViewFactory
+ */
+function createViewFactory(creator) {
+  return async widget => {
+    const {
+      slotFactories,
+      ...restParams
+    } = await creator(widget);
+    if (!slotFactories) {
+      return {
+        ...restParams
+      };
+    }
+    const slot = (await Promise.all(slotFactories.map(creator => creator(widget)))).reduce((acc, cur) => {
+      acc[cur.name] = cur;
+      return acc;
+    }, {});
+    return {
+      ...restParams,
+      slot
+    };
+  };
+}
+export { componentPlugin, createSlotFactory, createViewFactory };

package/lib/index.js

@@ -29,6 +29,7 @@ function componentPlugin() {
         isMounted: false,
         isHydrated: false,
         suspendedTasks: [],
+        resolvedViews: new Map(),
       };
 
       core.assignMissingKeys(widget, componentAPI(), widgetProperties);
@@ -147,4 +148,45 @@ function componentAPI() {
   };
 }
 
+/**
+ * Typed helper to make it easier to define widget properties.
+ *
+ * @type import('@merkur/plugin-component').createSlotFactory
+ */
+function createSlotFactory(creator) {
+  return async (widget) => creator(widget);
+}
+
+/**
+ * Typed helper to make it easier to define widget properties.
+ *
+ * @type import('@merkur/plugin-component').createViewFactory
+ */
+function createViewFactory(creator) {
+  return async (widget) => {
+    const { slotFactories, ...restParams } = await creator(widget);
+
+    if (!slotFactories) {
+      return {
+        ...restParams,
+      };
+    }
+
+    const slot = (
+      await Promise.all(slotFactories.map((creator) => creator(widget)))
+    ).reduce((acc, cur) => {
+      acc[cur.name] = cur;
+
+      return acc;
+    }, {});
+
+    return {
+      ...restParams,
+      slot,
+    };
+  };
+}
+
 exports.componentPlugin = componentPlugin;
+exports.createSlotFactory = createSlotFactory;
+exports.createViewFactory = createViewFactory;

package/lib/index.mjs

@@ -27,6 +27,7 @@ function componentPlugin() {
         isMounted: false,
         isHydrated: false,
         suspendedTasks: [],
+        resolvedViews: new Map(),
       };
 
       assignMissingKeys(widget, componentAPI(), widgetProperties);
@@ -145,4 +146,43 @@ function componentAPI() {
   };
 }
 
-export { componentPlugin };
+/**
+ * Typed helper to make it easier to define widget properties.
+ *
+ * @type import('@merkur/plugin-component').createSlotFactory
+ */
+function createSlotFactory(creator) {
+  return async (widget) => creator(widget);
+}
+
+/**
+ * Typed helper to make it easier to define widget properties.
+ *
+ * @type import('@merkur/plugin-component').createViewFactory
+ */
+function createViewFactory(creator) {
+  return async (widget) => {
+    const { slotFactories, ...restParams } = await creator(widget);
+
+    if (!slotFactories) {
+      return {
+        ...restParams,
+      };
+    }
+
+    const slot = (
+      await Promise.all(slotFactories.map((creator) => creator(widget)))
+    ).reduce((acc, cur) => {
+      acc[cur.name] = cur;
+
+      return acc;
+    }, {});
+
+    return {
+      ...restParams,
+      slot,
+    };
+  };
+}
+
+export { componentPlugin, createSlotFactory, createViewFactory };

package/lib/index.umd.js

@@ -1 +1 @@
-function n(t){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n},n(t)}!function(n,t){if("function"==typeof define&&define.amd)define("@merkur/plugin-component",["exports","@merkur/core"],t);else if("undefined"!=typeof exports)t(exports,require("@merkur/core"));else{var e={exports:{}};t(e.exports,n.Merkur.Core),n.Merkur=n.Merkur||{},n.Merkur.Plugin=n.Merkur.Plugin||{},n.Merkur.Plugin.Component=e.exports}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:this,(function(t,e){Object.defineProperty(t,"__esModule",{value:!0}),t.componentPlugin=function(){return{setup:function(n,t){return s((function*(){var o=t.info,i=t.bootstrap,a=t.load,c=t.mount,l=t.unmount,y=t.update,d=function(n,t){if(null==n)return{};var e,r,o=function(n,t){if(null==n)return{};var e,r,o={},u=Object.keys(n);for(r=0;r<u.length;r++)e=u[r],t.indexOf(e)>=0||(o[e]=n[e]);return o}(n,t);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(n);for(r=0;r<u.length;r++)e=u[r],t.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(n,e)&&(o[e]=n[e])}return o}(t,r),m={info:o,bootstrap:i,load:a,mount:c,unmount:l,update:y};return n.$in.component={lifeCycle:m,isMounted:!1,isHydrated:!1,suspendedTasks:[]},(0,e.assignMissingKeys)(n,{info:function(n){var t=arguments;return s((function*(){for(var e=n.name,r=n.version,o=n.props,u=n.state,i=n.assets,a=n.containerSelector,c=t.length,l=new Array(c>1?c-1:0),s=1;s<c;s++)l[s-1]=t[s];return f({name:e,version:r,props:o,state:u,assets:i,containerSelector:a},(yield p(n,"info",l))||{})}))()},mount:function(n){var t=arguments;return s((function*(){for(var e=t.length,r=new Array(e>1?e-1:0),o=1;o<e;o++)r[o-1]=t[o];yield n.bootstrap.apply(n,r),yield n.load.apply(n,r);var i=yield p(n,"mount",r);n.$in.component.isMounted=!0;var a,f=function(n,t){var e="undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(!e){if(Array.isArray(n)||(e=u(n))||t&&n&&"number"==typeof n.length){e&&(n=e);var r=0,o=function(){};return{s:o,n:function(){return r>=n.length?{done:!0}:{done:!1,value:n[r++]}},e:function(n){throw n},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,a=!0,f=!1;return{s:function(){e=e.call(n)},n:function(){var n=e.next();return a=n.done,n},e:function(n){f=!0,i=n},f:function(){try{a||null==e.return||e.return()}finally{if(f)throw i}}}}(n.$in.component.suspendedTasks);try{for(f.s();!(a=f.n()).done;){var c=a.value;yield c()}}catch(n){f.e(n)}finally{f.f()}return i}))()},unmount:function(n){var t=arguments;return s((function*(){n.$in.component.isMounted=!1,n.$in.component.isHydrated=!1;for(var e=t.length,r=new Array(e>1?e-1:0),o=1;o<e;o++)r[o-1]=t[o];return p(n,"unmount",r)}))()},bootstrap:function(n){var t=arguments;return s((function*(){for(var e=t.length,r=new Array(e>1?e-1:0),o=1;o<e;o++)r[o-1]=t[o];return p(n,"bootstrap",r)}))()},load:function(n){var t=arguments;return s((function*(){var e=n.$in,r=n.state;if(!1===e.component.isMounted&&!1===e.component.isHydrated&&r&&0!==Object.keys(r).length)e.component.isHydrated=!0;else{for(var o=t.length,u=new Array(o>1?o-1:0),i=1;i<o;i++)u[i-1]=t[i];n.state=yield p(n,"load",u)}}))()},update:function(n){var t=arguments;return s((function*(){for(var e=t.length,r=new Array(e>1?e-1:0),o=1;o<e;o++)r[o-1]=t[o];if(n.$in.component.isMounted)return p(n,"update",r);n.$in.component.suspendedTasks.push((function(){return n.update.apply(n,r)}))}))()},setState:function(n,t){return s((function*(){return n.state=f(f({},n.state),"function"==typeof t?t(n.state):t),n.update()}))()},setProps:function(n,t){return s((function*(){if(n.$in.component.isMounted)return n.props=f(f({},n.props),"function"==typeof t?t(n.props):t),yield n.load(),n.update();n.$in.component.suspendedTasks.push((function(){return n.setProps(t)}))}))()}},d),n=(0,e.setDefaultValueForUndefined)(n,["props","state"]),n=(0,e.setDefaultValueForUndefined)(n,["assets"],[]),n=(0,e.setDefaultValueForUndefined)(n,["containerSelector"],null)}))()},create:function(n){return n}}};var r=["info","bootstrap","load","mount","unmount","update"];function o(n){return function(n){if(Array.isArray(n))return i(n)}(n)||function(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}(n)||u(n)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(n,t){if(n){if("string"==typeof n)return i(n,t);var e=Object.prototype.toString.call(n).slice(8,-1);return"Object"===e&&n.constructor&&(e=n.constructor.name),"Map"===e||"Set"===e?Array.from(n):"Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e)?i(n,t):void 0}}function i(n,t){(null==t||t>n.length)&&(t=n.length);for(var e=0,r=new Array(t);e<t;e++)r[e]=n[e];return r}function a(n,t){var e=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),e.push.apply(e,r)}return e}function f(n){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{};t%2?a(Object(e),!0).forEach((function(t){c(n,t,e[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(e)):a(Object(e)).forEach((function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(e,t))}))}return n}function c(t,e,r){return(e=function(t){var e=function(t,e){if("object"!==n(t)||null===t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var o=r.call(t,e||"default");if("object"!==n(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"===n(e)?e:String(e)}(e))in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function l(n,t,e,r,o,u,i){try{var a=n[u](i),f=a.value}catch(n){return void e(n)}a.done?t(f):Promise.resolve(f).then(r,o)}function s(n){return function(){var t=this,e=arguments;return new Promise((function(r,o){var u=n.apply(t,e);function i(n){l(u,r,o,i,a,"next",n)}function a(n){l(u,r,o,i,a,"throw",n)}i(void 0)}))}}function p(n,t,e){return y.apply(this,arguments)}function y(){return(y=s((function*(n,t,e){var r=n.$in.component.lifeCycle;if("function"==typeof r[t])return r[t].apply(r,[n].concat(o(e)))}))).apply(this,arguments)}}));
+function n(t){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n},n(t)}!function(n,t){if("function"==typeof define&&define.amd)define("@merkur/plugin-component",["exports","@merkur/core"],t);else if("undefined"!=typeof exports)t(exports,require("@merkur/core"));else{var e={exports:{}};t(e.exports,n.Merkur.Core),n.Merkur=n.Merkur||{},n.Merkur.Plugin=n.Merkur.Plugin||{},n.Merkur.Plugin.Component=e.exports}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:this,(function(t,e){Object.defineProperty(t,"__esModule",{value:!0}),t.componentPlugin=function(){return{setup:function(n,t){return y((function*(){var o=t.info,u=t.bootstrap,a=t.load,f=t.mount,l=t.unmount,p=t.update,m=s(t,r),v={info:o,bootstrap:u,load:a,mount:f,unmount:l,update:p};return n.$in.component={lifeCycle:v,isMounted:!1,isHydrated:!1,suspendedTasks:[],resolvedViews:new Map},(0,e.assignMissingKeys)(n,{info:function(n){var t=arguments;return y((function*(){for(var e=n.name,r=n.version,o=n.props,u=n.state,i=n.assets,a=n.containerSelector,f=t.length,l=new Array(f>1?f-1:0),s=1;s<f;s++)l[s-1]=t[s];return c({name:e,version:r,props:o,state:u,assets:i,containerSelector:a},(yield d(n,"info",l))||{})}))()},mount:function(n){var t=arguments;return y((function*(){for(var e=t.length,r=new Array(e>1?e-1:0),o=1;o<e;o++)r[o-1]=t[o];yield n.bootstrap.apply(n,r),yield n.load.apply(n,r);var u=yield d(n,"mount",r);n.$in.component.isMounted=!0;var a,f=function(n,t){var e="undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(!e){if(Array.isArray(n)||(e=i(n))||t&&n&&"number"==typeof n.length){e&&(n=e);var r=0,o=function(){};return{s:o,n:function(){return r>=n.length?{done:!0}:{done:!1,value:n[r++]}},e:function(n){throw n},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var u,a=!0,f=!1;return{s:function(){e=e.call(n)},n:function(){var n=e.next();return a=n.done,n},e:function(n){f=!0,u=n},f:function(){try{a||null==e.return||e.return()}finally{if(f)throw u}}}}(n.$in.component.suspendedTasks);try{for(f.s();!(a=f.n()).done;){var c=a.value;yield c()}}catch(n){f.e(n)}finally{f.f()}return u}))()},unmount:function(n){var t=arguments;return y((function*(){n.$in.component.isMounted=!1,n.$in.component.isHydrated=!1;for(var e=t.length,r=new Array(e>1?e-1:0),o=1;o<e;o++)r[o-1]=t[o];return d(n,"unmount",r)}))()},bootstrap:function(n){var t=arguments;return y((function*(){for(var e=t.length,r=new Array(e>1?e-1:0),o=1;o<e;o++)r[o-1]=t[o];return d(n,"bootstrap",r)}))()},load:function(n){var t=arguments;return y((function*(){var e=n.$in,r=n.state;if(!1===e.component.isMounted&&!1===e.component.isHydrated&&r&&0!==Object.keys(r).length)e.component.isHydrated=!0;else{for(var o=t.length,u=new Array(o>1?o-1:0),i=1;i<o;i++)u[i-1]=t[i];n.state=yield d(n,"load",u)}}))()},update:function(n){var t=arguments;return y((function*(){for(var e=t.length,r=new Array(e>1?e-1:0),o=1;o<e;o++)r[o-1]=t[o];if(n.$in.component.isMounted)return d(n,"update",r);n.$in.component.suspendedTasks.push((function(){return n.update.apply(n,r)}))}))()},setState:function(n,t){return y((function*(){return n.state=c(c({},n.state),"function"==typeof t?t(n.state):t),n.update()}))()},setProps:function(n,t){return y((function*(){if(n.$in.component.isMounted)return n.props=c(c({},n.props),"function"==typeof t?t(n.props):t),yield n.load(),n.update();n.$in.component.suspendedTasks.push((function(){return n.setProps(t)}))}))()}},m),n=(0,e.setDefaultValueForUndefined)(n,["props","state"]),n=(0,e.setDefaultValueForUndefined)(n,["assets"],[]),n=(0,e.setDefaultValueForUndefined)(n,["containerSelector"],null)}))()},create:function(n){return n}}},t.createSlotFactory=function(n){return function(){var t=y((function*(t){return n(t)}));return function(n){return t.apply(this,arguments)}}()},t.createViewFactory=function(n){return function(){var t=y((function*(t){var e=yield n(t),r=e.slotFactories,u=s(e,o);if(!r)return c({},u);var i=(yield Promise.all(r.map((function(n){return n(t)})))).reduce((function(n,t){return n[t.name]=t,n}),{});return c(c({},u),{},{slot:i})}));return function(n){return t.apply(this,arguments)}}()};var r=["info","bootstrap","load","mount","unmount","update"],o=["slotFactories"];function u(n){return function(n){if(Array.isArray(n))return a(n)}(n)||function(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}(n)||i(n)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(n,t){if(n){if("string"==typeof n)return a(n,t);var e=Object.prototype.toString.call(n).slice(8,-1);return"Object"===e&&n.constructor&&(e=n.constructor.name),"Map"===e||"Set"===e?Array.from(n):"Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e)?a(n,t):void 0}}function a(n,t){(null==t||t>n.length)&&(t=n.length);for(var e=0,r=new Array(t);e<t;e++)r[e]=n[e];return r}function f(n,t){var e=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),e.push.apply(e,r)}return e}function c(n){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{};t%2?f(Object(e),!0).forEach((function(t){l(n,t,e[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(e)):f(Object(e)).forEach((function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(e,t))}))}return n}function l(t,e,r){var o;return o=function(t,e){if("object"!=n(t)||!t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var o=r.call(t,e||"default");if("object"!=n(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(e,"string"),(e="symbol"==n(o)?o:o+"")in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function s(n,t){if(null==n)return{};var e,r,o=function(n,t){if(null==n)return{};var e={};for(var r in n)if(Object.prototype.hasOwnProperty.call(n,r)){if(t.indexOf(r)>=0)continue;e[r]=n[r]}return e}(n,t);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(n);for(r=0;r<u.length;r++)e=u[r],t.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(n,e)&&(o[e]=n[e])}return o}function p(n,t,e,r,o,u,i){try{var a=n[u](i),f=a.value}catch(n){return void e(n)}a.done?t(f):Promise.resolve(f).then(r,o)}function y(n){return function(){var t=this,e=arguments;return new Promise((function(r,o){var u=n.apply(t,e);function i(n){p(u,r,o,i,a,"next",n)}function a(n){p(u,r,o,i,a,"throw",n)}i(void 0)}))}}function d(n,t,e){return m.apply(this,arguments)}function m(){return(m=y((function*(n,t,e){var r=n.$in.component.lifeCycle;if("function"==typeof r[t])return r[t].apply(r,[n].concat(u(e)))}))).apply(this,arguments)}}));

package/package.json

@@ -1,24 +1,37 @@
 {
   "name": "@merkur/plugin-component",
-  "version": "0.34.0",
+  "version": "0.36.0",
   "description": "Merkur component plugin.",
   "main": "lib/index",
   "module": "lib/index",
+  "types": "./types.d.ts",
   "unpkg": "lib/index.umd.js",
   "sideEffects": false,
   "exports": {
     ".": {
+      "types": "./types.d.ts",
       "import": "./lib/index.mjs",
       "require": "./lib/index.cjs"
     },
+    "./helpers": {
+      "types": "./lib/helpers.d.ts",
+      "import": "./lib/helpers.mjs",
+      "require": "./lib/helpers.cjs"
+    },
     "./lib/index.es9.mjs": "./lib/index.es9.mjs",
-    "./lib/index.es9.cjs": "./lib/index.es9.cjs"
+    "./lib/index.es9.cjs": "./lib/index.es9.cjs",
+    "./lib/helpers.es9.mjs": "./lib/helpers.es9.mjs",
+    "./lib/helpers.es9.cjs": "./lib/helpers.es9.cjs"
   },
   "browser": {
     "./lib/index.js": "./lib/index.js",
     "./lib/index.cjs": "./lib/index.cjs",
     "./lib/index.mjs": "./lib/index.mjs",
-    "./lib/index.es9.mjs": "./lib/index.es9.mjs"
+    "./lib/index.es9.mjs": "./lib/index.es9.mjs",
+    "./lib/helpers.js": "./lib/helpers.js",
+    "./lib/helpers.cjs": "./lib/helpers.cjs",
+    "./lib/helpers.mjs": "./lib/helpers.mjs",
+    "./lib/helpers.es9.mjs": "./lib/helpers.es9.mjs"
   },
   "scripts": {
     "preversion": "npm test",
@@ -48,10 +61,10 @@
   },
   "homepage": "https://merkur.js.org/",
   "devDependencies": {
-    "@merkur/core": "^0.34.0"
+    "@merkur/core": "^0.36.0"
   },
   "peerDependencies": {
     "@merkur/core": "*"
   },
-  "gitHead": "3bc4a1efb8f8d5cee6bcf5f1454809747904153c"
+  "gitHead": "2471f91d8249ae75e49b2a0da8d0deb93062f014"
 }

package/rollup.config.mjs

@@ -2,10 +2,22 @@ import {
   createRollupESConfig,
   createRollupES9Config,
   createRollupUMDConfig,
+  createRollupTypescriptES9Config,
+  createRollupTypescriptConfig,
 } from '../../createRollupConfig.mjs';
 
 let esConfig = createRollupESConfig();
 let es9Config = createRollupES9Config();
 let umdConfig = createRollupUMDConfig();
 
-export default [esConfig, es9Config, umdConfig];
+export default [
+  esConfig,
+  es9Config,
+  umdConfig,
+  createRollupTypescriptConfig({
+    input: './src/helpers.ts',
+  }),
+  createRollupTypescriptES9Config({
+    input: './src/helpers.ts',
+  }),
+];

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "lib": [
+      "ES2018",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "types": [
+      "plugin-component"
+    ]
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "**/__tests__/**"
+  ]
+}

package/types.d.ts

@@ -0,0 +1,108 @@
+import { Widget } from '@merkur/core';
+
+export interface ViewType {
+  (widget: Widget): any;
+}
+
+export type MapViewArgs = {
+  View: ViewType;
+  ErrorView?: ViewType;
+  containerSelector: string;
+  container: Element | null;
+  isSlot: boolean;
+  slot?: Record<
+    string,
+    {
+      isSlot: boolean;
+      containerSelector?: string;
+      container?: Element;
+    } & ViewFactorySlotType
+  >;
+};
+
+export type SSRMountResult = {
+  html: string;
+  slot: Record<string, { name: string; html: string }>;
+};
+
+export interface WidgetState {}
+export interface WidgetProps {}
+
+declare module '@merkur/core' {
+  interface DefineWidgetArgs {
+    viewFactory: ViewFactory;
+  }
+
+  interface Widget {
+    container?: Element;
+    shouldHydrate: (viewArgs: MapViewArgs) => boolean;
+    mount: () => Promise<void | SSRMountResult>;
+    update: () => Promise<void>;
+    unmount: () => Promise<void>;
+    slot: Record<
+      string,
+      | {
+          name: string;
+          html: string;
+          containerSelector: string;
+          container?: Element;
+        }
+      | undefined
+    >;
+    state: WidgetState;
+    props: WidgetProps;
+  }
+
+  interface WidgetDefinition {
+    shouldHydrate: (widget: Widget, viewArgs: MapViewArgs) => boolean;
+    mount: (widget: Widget) => Promise<void | SSRMountResult>;
+    update: (widget: Widget) => Promise<void>;
+    unmount: (widget: Widget) => Promise<void>;
+  }
+  interface WidgetInternal {
+    component: {
+      lifeCycle: Record<string, function>;
+      isMounted: boolean;
+      isHydrated: boolean;
+      suspendedTasks: Array<function>;
+      resolvedViews: Map<ViewFactory, MapViewArgs[]>;
+    };
+  }
+}
+
+export interface SlotDefinition {
+  name: string;
+  View: ViewType;
+}
+
+export interface ViewDefinition {
+  View: ViewType;
+  ErrorView?: ViewType;
+  slotFactories: ((
+    widget: Widget,
+  ) => SlotDefinition | Promise<SlotDefinition>)[];
+}
+
+export interface ViewFactoryResult {
+  View: ViewType;
+  ErrorView?: ViewType;
+  slot?: Record<string, ViewFactorySlotType>;
+}
+
+export interface ViewFactorySlotType {
+  name: string;
+  View: ViewType;
+}
+
+export type ViewFactory = (widget: Widget) => Promise<ViewFactoryResult>;
+export type SlotFactory = (widget: Widget) => Promise<SlotDefinition>;
+
+export declare function createSlotFactory(
+  creator: (widget: Widget) => SlotDefinition | Promise<SlotDefinition>,
+): SlotFactory;
+
+export declare function createViewFactory(
+  creator: (widget: Widget) => ViewDefinition | Promise<ViewDefinition>,
+): ViewFactory;
+
+export declare function componentPlugin();