piral-million 0.15.0-beta.4574

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 - 2022 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
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,95 @@
+[![Piral Logo](https://github.com/smapiot/piral/raw/main/docs/assets/logo.png)](https://piral.io)
+
+# [Piral Million](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-million.svg?style=flat)](https://www.npmjs.com/package/piral-million) [![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 `million`. What `piral-million` brings to the table is a set of Pilet API extensions that can be used with `piral` or `piral-core`.
+
+The set includes a Million converter for any component registration, as well as a `fromMillion` shortcut and a `MillionExtension` component.
+
+By default, these API extensions are not integrated in `piral`, so you'd need to add them to your Piral instance.
+
+## Documentation
+
+The following functions are brought to the Pilet API.
+
+### `fromMillion()`
+
+Transforms a standard Million component into a component that can be used in Piral, essentially wrapping it with a reference to the corresponding converter.
+
+### `MillionExtension`
+
+The extension slot component to be used in Million component.
+
+## Usage
+
+::: summary: For pilet authors
+
+You can use the `fromMillion` function from the Pilet API to convert your Million components to components usable by your Piral instance.
+
+Example use:
+
+```ts
+import { PiletApi } from '<name-of-piral-instance>';
+import { MillionPage } from './MillionPage';
+
+export function setup(piral: PiletApi) {
+  piral.registerPage('/sample', piral.fromMillion(MillionPage));
+}
+```
+
+Within Million components the Piral Million extension component can be used by referring to `MillionExtension`, e.g.,
+
+```jsx
+<MillionExtension name="name-of-extension" />
+```
+
+Alternatively, if `piral-million` has not been added to the Piral instance you can install and use the package also from a pilet directly.
+
+```ts
+import { PiletApi } from '<name-of-piral-instance>';
+import { fromMillion } from 'piral-million/convert';
+import { MillionPage } from './MillionPage';
+
+export function setup(piral: PiletApi) {
+  piral.registerPage('/sample', fromMillion(MillionPage));
+}
+```
+
+:::
+
+::: summary: For Piral instance developers
+
+Using Million with Piral is as simple as installing `piral-million` and `million`.
+
+```ts
+import 'million';
+import { createMillionApi } from 'piral-million';
+```
+
+The integration looks like:
+
+```ts
+const instance = createInstance({
+  // important part
+  plugins: [createMillionApi()],
+  // ...
+});
+```
+
+The `million` package should be shared with the pilets via the *package.json*:
+
+```json
+{
+  "pilets": {
+    "externals": [
+      "million"
+    ]
+  }
+}
+```
+
+:::
+
+## License
+
+Piral is released using the MIT license. For more information see the [license file](./LICENSE).

package/convert.d.ts

@@ -0,0 +1,18 @@
+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 MillionConverter {
+    (...params: Parameters<ReturnType<typeof createConverter>>): HtmlComponent<any>;
+}
+export declare function createMillionConverter(...params: Parameters<typeof createConverter>): {
+    from: MillionConverter;
+    Extension: (props: any) => VNode;
+};
+declare const fromMillion: MillionConverter, MillionExtension: (props: any) => VNode;
+export { fromMillion, MillionExtension };

package/convert.js

@@ -0,0 +1,16 @@
+import { createConverter } from './esm/converter';
+export function createMillionConverter() {
+    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) { return ({
+        type: 'html',
+        component: convert(root)
+    }); };
+    return { from: from, Extension: Extension };
+}
+var _a = createMillionConverter(), fromMillion = _a.from, MillionExtension = _a.Extension;
+export { fromMillion, MillionExtension };

package/esm/converter.d.ts

@@ -0,0 +1,13 @@
+import type { ForeignComponent, BaseComponentProps } from 'piral-core';
+import type { VNode } from 'million';
+export interface MillionConverterOptions {
+    /**
+     * Defines the name of the root element.
+     * @default slot
+     */
+    rootName?: string;
+}
+export declare function createConverter(config?: MillionConverterOptions): {
+    <TProps extends BaseComponentProps>(root: (props: TProps) => VNode): ForeignComponent<TProps>;
+    Extension: (props: import("piral-core").ExtensionSlotProps<string>) => VNode;
+};

package/esm/converter.js

@@ -0,0 +1,20 @@
+import { mountMillion, updateMillion, unmountMillion } from './mount';
+import { createExtension } from './extension';
+export function createConverter(config = {}) {
+    const { rootName = 'slot' } = config;
+    const Extension = createExtension(rootName);
+    const convert = (root) => ({
+        mount(el, props, ctx, locals) {
+            locals.node = mountMillion(el, root, props);
+        },
+        update(el, props, ctx, locals) {
+            locals.node = updateMillion(el, root, props, locals.node);
+        },
+        unmount(el, locals) {
+            unmountMillion(el, locals.node);
+        },
+    });
+    convert.Extension = Extension;
+    return convert;
+}
+//# sourceMappingURL=converter.js.map

package/esm/converter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAU9C,MAAM,UAAU,eAAe,CAAC,SAAkC,EAAE;IAClE,MAAM,EAAE,QAAQ,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC;IACrC,MAAM,SAAS,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,CAAoC,IAA8B,EAA4B,EAAE,CAAC,CAAC;QAChH,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM;YAC1B,MAAM,CAAC,IAAI,GAAG,YAAY,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;QAC9C,CAAC;QACD,MAAM,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM;YAC3B,MAAM,CAAC,IAAI,GAAG,aAAa,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;QAC5D,CAAC;QACD,OAAO,CAAC,EAAE,EAAE,MAAM;YAChB,cAAc,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;QAClC,CAAC;KACF,CAAC,CAAC;IACH,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;IAC9B,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/esm/create.d.ts

@@ -0,0 +1,12 @@
+import type { PiralPlugin } from 'piral-core';
+import { MillionConverterOptions } from './converter';
+import type { PiletMillionApi } from './types';
+/**
+ * Available configuration options for the Million plugin.
+ */
+export interface MillionConfig extends MillionConverterOptions {
+}
+/**
+ * Creates new Pilet API extensions for integrating Million.
+ */
+export declare function createMillionApi(config?: MillionConfig): PiralPlugin<PiletMillionApi>;

package/esm/create.js

@@ -0,0 +1,20 @@
+import { createConverter } from './converter';
+/**
+ * Creates new Pilet API extensions for integrating Million.
+ */
+export function createMillionApi(config = {}) {
+    return (context) => {
+        const convert = createConverter(config);
+        context.converters.million = ({ root }) => convert(root);
+        return {
+            fromMillion(root) {
+                return {
+                    type: 'million',
+                    root,
+                };
+            },
+            MillionExtension: convert.Extension,
+        };
+    };
+}
+//# sourceMappingURL=create.js.map

package/esm/create.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAA2B,MAAM,aAAa,CAAC;AAQvE;;GAEG;AACH,MAAM,UAAU,gBAAgB,CAAC,SAAwB,EAAE;IACzD,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,MAAM,OAAO,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;QACxC,OAAO,CAAC,UAAU,CAAC,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAEzD,OAAO;YACL,WAAW,CAAC,IAAI;gBACd,OAAO;oBACL,IAAI,EAAE,SAAS;oBACf,IAAI;iBACL,CAAC;YACJ,CAAC;YACD,gBAAgB,EAAE,OAAO,CAAC,SAAS;SACpC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}

package/esm/extension.d.ts

@@ -0,0 +1,3 @@
+import { VNode } from 'million';
+import type { ExtensionSlotProps } from 'piral-core';
+export declare function createExtension(rootName: string): (props: ExtensionSlotProps) => VNode;

package/esm/extension.js

@@ -0,0 +1,45 @@
+import { m, _ } from 'million';
+function compareObjects(a, b) {
+    for (const i in a) {
+        if (!(i in b)) {
+            return false;
+        }
+    }
+    for (const i in b) {
+        if (!compare(a[i], b[i])) {
+            return false;
+        }
+    }
+    return true;
+}
+function compare(a, b) {
+    if (a !== b) {
+        const ta = typeof a;
+        const tb = typeof b;
+        if (ta === tb && ta === 'object' && a && b) {
+            return compareObjects(a, b);
+        }
+        return false;
+    }
+    return true;
+}
+export function createExtension(rootName) {
+    return (props) => {
+        return m(rootName, props, _, _, _, {
+            create(node) {
+                const { piral } = props;
+                node.textContent = '';
+                node.childNodes.forEach((n) => node.removeChild(n));
+                piral.renderHtmlExtension(node, this.props);
+                return true;
+            },
+            update(node, newNode, oldNode) {
+                if (!compare(newNode.props, oldNode.props)) {
+                    //TODO render extension
+                }
+                return true;
+            },
+        });
+    };
+}
+//# sourceMappingURL=extension.js.map

package/esm/extension.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAS,CAAC,EAAE,MAAM,SAAS,CAAC;AAGtC,SAAS,cAAc,CAAC,CAAM,EAAE,CAAM;IACpC,KAAK,MAAM,CAAC,IAAI,CAAC,EAAE;QACjB,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE;YACb,OAAO,KAAK,CAAC;SACd;KACF;IAED,KAAK,MAAM,CAAC,IAAI,CAAC,EAAE;QACjB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;YACxB,OAAO,KAAK,CAAC;SACd;KACF;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,OAAO,CAAI,CAAI,EAAE,CAAI;IAC5B,IAAI,CAAC,KAAK,CAAC,EAAE;QACX,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC;QACpB,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC;QAEpB,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,EAAE;YAC1C,OAAO,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;SAC7B;QAED,OAAO,KAAK,CAAC;KACd;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,QAAgB;IAC9C,OAAO,CAAC,KAAK,EAAE,EAAE;QACf,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;YACjC,MAAM,CAAC,IAAI;gBACT,MAAM,EAAE,KAAK,EAAE,GAAG,KAAY,CAAC;gBAC/B,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;gBACtB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;gBACpD,KAAK,CAAC,mBAAmB,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC5C,OAAO,IAAI,CAAC;YACd,CAAC;YACD,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO;gBAC3B,IAAI,CAAC,OAAO,CAAE,OAAe,CAAC,KAAK,EAAG,OAAe,CAAC,KAAK,CAAC,EAAE;oBAC5D,uBAAuB;iBACxB;gBACD,OAAO,IAAI,CAAC;YACd,CAAC;SACF,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC"}

package/esm/index.d.ts

@@ -0,0 +1,2 @@
+export * from './create';
+export * from './types';

package/esm/index.js

@@ -0,0 +1,3 @@
+export * from './create';
+export * from './types';
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}

package/esm/mount.d.ts

@@ -0,0 +1,5 @@
+import { VNode } from 'million';
+import type { BaseComponentProps } from 'piral-core';
+export declare function mountMillion<T extends BaseComponentProps>(el: HTMLElement, root: (props: T) => VNode, props: T): import("million/dist/types-1b5601ee").a;
+export declare function updateMillion<T extends BaseComponentProps>(el: HTMLElement, root: (props: T) => VNode, props: T, oldNode: VNode): import("million/dist/types-1b5601ee").a;
+export declare function unmountMillion(el: HTMLElement, oldNode: VNode): void;

package/esm/mount.js

@@ -0,0 +1,15 @@
+import { render, m } from 'million';
+export function mountMillion(el, root, props) {
+    const node = m(root, props);
+    render(el, node);
+    return node;
+}
+export function updateMillion(el, root, props, oldNode) {
+    const newNode = m(root, props);
+    render(el, newNode, oldNode);
+    return newNode;
+}
+export function unmountMillion(el, oldNode) {
+    render(el, '', oldNode);
+}
+//# sourceMappingURL=mount.js.map

package/esm/mount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mount.js","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,CAAC,EAAS,MAAM,SAAS,CAAC;AAG3C,MAAM,UAAU,YAAY,CAA+B,EAAe,EAAE,IAAyB,EAAE,KAAQ;IAC7G,MAAM,IAAI,GAAG,CAAC,CAAC,IAAW,EAAE,KAAK,CAAC,CAAC;IACnC,MAAM,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;IACjB,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,aAAa,CAC3B,EAAe,EACf,IAAyB,EACzB,KAAQ,EACR,OAAc;IAEd,MAAM,OAAO,GAAG,CAAC,CAAC,IAAW,EAAE,KAAK,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IAC7B,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,EAAe,EAAE,OAAc;IAC5D,MAAM,CAAC,EAAE,EAAE,EAAE,EAAE,OAAO,CAAC,CAAC;AAC1B,CAAC"}

package/esm/types.d.ts

@@ -0,0 +1,34 @@
+import type { VNode } from 'million';
+import type { ForeignComponent, ExtensionSlotProps } from 'piral-core';
+declare module 'piral-core/lib/types/custom' {
+    interface PiletCustomApi extends PiletMillionApi {
+    }
+    interface PiralCustomComponentConverters<TProps> {
+        million(component: MillionComponent<TProps>): ForeignComponent<TProps>;
+    }
+}
+export interface MillionComponent<TProps> {
+    /**
+     * The component root.
+     */
+    root: (props: TProps) => VNode;
+    /**
+     * The type of the Million component.
+     */
+    type: 'million';
+}
+/**
+ * Defines the provided set of Million Pilet API extensions.
+ */
+export interface PiletMillionApi {
+    /**
+     * Wraps an Million component for use in Piral.
+     * @param component The component root.
+     * @returns The Piral Million component.
+     */
+    fromMillion<TProps>(component: (props: TProps) => VNode): MillionComponent<TProps>;
+    /**
+     * Million component for displaying extensions of the given name.
+     */
+    MillionExtension: (props: ExtensionSlotProps) => VNode;
+}

package/esm/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/esm/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/lib/converter.d.ts

@@ -0,0 +1,13 @@
+import type { ForeignComponent, BaseComponentProps } from 'piral-core';
+import type { VNode } from 'million';
+export interface MillionConverterOptions {
+    /**
+     * Defines the name of the root element.
+     * @default slot
+     */
+    rootName?: string;
+}
+export declare function createConverter(config?: MillionConverterOptions): {
+    <TProps extends BaseComponentProps>(root: (props: TProps) => VNode): ForeignComponent<TProps>;
+    Extension: (props: import("piral-core").ExtensionSlotProps<string>) => VNode;
+};

package/lib/converter.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createConverter = void 0;
+const mount_1 = require("./mount");
+const extension_1 = require("./extension");
+function createConverter(config = {}) {
+    const { rootName = 'slot' } = config;
+    const Extension = (0, extension_1.createExtension)(rootName);
+    const convert = (root) => ({
+        mount(el, props, ctx, locals) {
+            locals.node = (0, mount_1.mountMillion)(el, root, props);
+        },
+        update(el, props, ctx, locals) {
+            locals.node = (0, mount_1.updateMillion)(el, root, props, locals.node);
+        },
+        unmount(el, locals) {
+            (0, mount_1.unmountMillion)(el, locals.node);
+        },
+    });
+    convert.Extension = Extension;
+    return convert;
+}
+exports.createConverter = createConverter;
+//# sourceMappingURL=converter.js.map

package/lib/converter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":";;;AAEA,mCAAsE;AACtE,2CAA8C;AAU9C,SAAgB,eAAe,CAAC,SAAkC,EAAE;IAClE,MAAM,EAAE,QAAQ,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC;IACrC,MAAM,SAAS,GAAG,IAAA,2BAAe,EAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,CAAoC,IAA8B,EAA4B,EAAE,CAAC,CAAC;QAChH,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM;YAC1B,MAAM,CAAC,IAAI,GAAG,IAAA,oBAAY,EAAC,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;QAC9C,CAAC;QACD,MAAM,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM;YAC3B,MAAM,CAAC,IAAI,GAAG,IAAA,qBAAa,EAAC,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;QAC5D,CAAC;QACD,OAAO,CAAC,EAAE,EAAE,MAAM;YAChB,IAAA,sBAAc,EAAC,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;QAClC,CAAC;KACF,CAAC,CAAC;IACH,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;IAC9B,OAAO,OAAO,CAAC;AACjB,CAAC;AAhBD,0CAgBC"}

package/lib/create.d.ts

@@ -0,0 +1,12 @@
+import type { PiralPlugin } from 'piral-core';
+import { MillionConverterOptions } from './converter';
+import type { PiletMillionApi } from './types';
+/**
+ * Available configuration options for the Million plugin.
+ */
+export interface MillionConfig extends MillionConverterOptions {
+}
+/**
+ * Creates new Pilet API extensions for integrating Million.
+ */
+export declare function createMillionApi(config?: MillionConfig): PiralPlugin<PiletMillionApi>;

package/lib/create.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createMillionApi = void 0;
+const converter_1 = require("./converter");
+/**
+ * Creates new Pilet API extensions for integrating Million.
+ */
+function createMillionApi(config = {}) {
+    return (context) => {
+        const convert = (0, converter_1.createConverter)(config);
+        context.converters.million = ({ root }) => convert(root);
+        return {
+            fromMillion(root) {
+                return {
+                    type: 'million',
+                    root,
+                };
+            },
+            MillionExtension: convert.Extension,
+        };
+    };
+}
+exports.createMillionApi = createMillionApi;
+//# sourceMappingURL=create.js.map

package/lib/create.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":";;;AACA,2CAAuE;AAQvE;;GAEG;AACH,SAAgB,gBAAgB,CAAC,SAAwB,EAAE;IACzD,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,MAAM,OAAO,GAAG,IAAA,2BAAe,EAAC,MAAM,CAAC,CAAC;QACxC,OAAO,CAAC,UAAU,CAAC,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAEzD,OAAO;YACL,WAAW,CAAC,IAAI;gBACd,OAAO;oBACL,IAAI,EAAE,SAAS;oBACf,IAAI;iBACL,CAAC;YACJ,CAAC;YACD,gBAAgB,EAAE,OAAO,CAAC,SAAS;SACpC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAfD,4CAeC"}

package/lib/extension.d.ts

@@ -0,0 +1,3 @@
+import { VNode } from 'million';
+import type { ExtensionSlotProps } from 'piral-core';
+export declare function createExtension(rootName: string): (props: ExtensionSlotProps) => VNode;

package/lib/extension.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createExtension = void 0;
+const million_1 = require("million");
+function compareObjects(a, b) {
+    for (const i in a) {
+        if (!(i in b)) {
+            return false;
+        }
+    }
+    for (const i in b) {
+        if (!compare(a[i], b[i])) {
+            return false;
+        }
+    }
+    return true;
+}
+function compare(a, b) {
+    if (a !== b) {
+        const ta = typeof a;
+        const tb = typeof b;
+        if (ta === tb && ta === 'object' && a && b) {
+            return compareObjects(a, b);
+        }
+        return false;
+    }
+    return true;
+}
+function createExtension(rootName) {
+    return (props) => {
+        return (0, million_1.m)(rootName, props, million_1._, million_1._, million_1._, {
+            create(node) {
+                const { piral } = props;
+                node.textContent = '';
+                node.childNodes.forEach((n) => node.removeChild(n));
+                piral.renderHtmlExtension(node, this.props);
+                return true;
+            },
+            update(node, newNode, oldNode) {
+                if (!compare(newNode.props, oldNode.props)) {
+                    //TODO render extension
+                }
+                return true;
+            },
+        });
+    };
+}
+exports.createExtension = createExtension;
+//# sourceMappingURL=extension.js.map

package/lib/extension.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":";;;AAAA,qCAAsC;AAGtC,SAAS,cAAc,CAAC,CAAM,EAAE,CAAM;IACpC,KAAK,MAAM,CAAC,IAAI,CAAC,EAAE;QACjB,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE;YACb,OAAO,KAAK,CAAC;SACd;KACF;IAED,KAAK,MAAM,CAAC,IAAI,CAAC,EAAE;QACjB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;YACxB,OAAO,KAAK,CAAC;SACd;KACF;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,OAAO,CAAI,CAAI,EAAE,CAAI;IAC5B,IAAI,CAAC,KAAK,CAAC,EAAE;QACX,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC;QACpB,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC;QAEpB,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,EAAE;YAC1C,OAAO,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;SAC7B;QAED,OAAO,KAAK,CAAC;KACd;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAgB,eAAe,CAAC,QAAgB;IAC9C,OAAO,CAAC,KAAK,EAAE,EAAE;QACf,OAAO,IAAA,WAAC,EAAC,QAAQ,EAAE,KAAK,EAAE,WAAC,EAAE,WAAC,EAAE,WAAC,EAAE;YACjC,MAAM,CAAC,IAAI;gBACT,MAAM,EAAE,KAAK,EAAE,GAAG,KAAY,CAAC;gBAC/B,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;gBACtB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;gBACpD,KAAK,CAAC,mBAAmB,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC5C,OAAO,IAAI,CAAC;YACd,CAAC;YACD,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO;gBAC3B,IAAI,CAAC,OAAO,CAAE,OAAe,CAAC,KAAK,EAAG,OAAe,CAAC,KAAK,CAAC,EAAE;oBAC5D,uBAAuB;iBACxB;gBACD,OAAO,IAAI,CAAC;YACd,CAAC;SACF,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC;AAlBD,0CAkBC"}

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from './create';
+export * from './types';

package/lib/index.js

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

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,mDAAyB;AACzB,kDAAwB"}

package/lib/mount.d.ts

@@ -0,0 +1,5 @@
+import { VNode } from 'million';
+import type { BaseComponentProps } from 'piral-core';
+export declare function mountMillion<T extends BaseComponentProps>(el: HTMLElement, root: (props: T) => VNode, props: T): import("million/dist/types-1b5601ee").a;
+export declare function updateMillion<T extends BaseComponentProps>(el: HTMLElement, root: (props: T) => VNode, props: T, oldNode: VNode): import("million/dist/types-1b5601ee").a;
+export declare function unmountMillion(el: HTMLElement, oldNode: VNode): void;

package/lib/mount.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unmountMillion = exports.updateMillion = exports.mountMillion = void 0;
+const million_1 = require("million");
+function mountMillion(el, root, props) {
+    const node = (0, million_1.m)(root, props);
+    (0, million_1.render)(el, node);
+    return node;
+}
+exports.mountMillion = mountMillion;
+function updateMillion(el, root, props, oldNode) {
+    const newNode = (0, million_1.m)(root, props);
+    (0, million_1.render)(el, newNode, oldNode);
+    return newNode;
+}
+exports.updateMillion = updateMillion;
+function unmountMillion(el, oldNode) {
+    (0, million_1.render)(el, '', oldNode);
+}
+exports.unmountMillion = unmountMillion;
+//# sourceMappingURL=mount.js.map

package/lib/mount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mount.js","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":";;;AAAA,qCAA2C;AAG3C,SAAgB,YAAY,CAA+B,EAAe,EAAE,IAAyB,EAAE,KAAQ;IAC7G,MAAM,IAAI,GAAG,IAAA,WAAC,EAAC,IAAW,EAAE,KAAK,CAAC,CAAC;IACnC,IAAA,gBAAM,EAAC,EAAE,EAAE,IAAI,CAAC,CAAC;IACjB,OAAO,IAAI,CAAC;AACd,CAAC;AAJD,oCAIC;AAED,SAAgB,aAAa,CAC3B,EAAe,EACf,IAAyB,EACzB,KAAQ,EACR,OAAc;IAEd,MAAM,OAAO,GAAG,IAAA,WAAC,EAAC,IAAW,EAAE,KAAK,CAAC,CAAC;IACtC,IAAA,gBAAM,EAAC,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IAC7B,OAAO,OAAO,CAAC;AACjB,CAAC;AATD,sCASC;AAED,SAAgB,cAAc,CAAC,EAAe,EAAE,OAAc;IAC5D,IAAA,gBAAM,EAAC,EAAE,EAAE,EAAE,EAAE,OAAO,CAAC,CAAC;AAC1B,CAAC;AAFD,wCAEC"}

package/lib/types.d.ts

@@ -0,0 +1,34 @@
+import type { VNode } from 'million';
+import type { ForeignComponent, ExtensionSlotProps } from 'piral-core';
+declare module 'piral-core/lib/types/custom' {
+    interface PiletCustomApi extends PiletMillionApi {
+    }
+    interface PiralCustomComponentConverters<TProps> {
+        million(component: MillionComponent<TProps>): ForeignComponent<TProps>;
+    }
+}
+export interface MillionComponent<TProps> {
+    /**
+     * The component root.
+     */
+    root: (props: TProps) => VNode;
+    /**
+     * The type of the Million component.
+     */
+    type: 'million';
+}
+/**
+ * Defines the provided set of Million Pilet API extensions.
+ */
+export interface PiletMillionApi {
+    /**
+     * Wraps an Million component for use in Piral.
+     * @param component The component root.
+     * @returns The Piral Million component.
+     */
+    fromMillion<TProps>(component: (props: TProps) => VNode): MillionComponent<TProps>;
+    /**
+     * Million component for displaying extensions of the given name.
+     */
+    MillionExtension: (props: ExtensionSlotProps) => VNode;
+}

package/lib/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/lib/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "piral-million",
+  "version": "0.15.0-beta.4574",
+  "description": "Plugin for integrating Million components in Piral.",
+  "keywords": [
+    "piral",
+    "pilet-api",
+    "smapiot",
+    "portal",
+    "modules",
+    "api",
+    "plugin",
+    "plugin-converter",
+    "million"
+  ],
+  "author": "smapiot",
+  "homepage": "https://piral.io",
+  "license": "MIT",
+  "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"
+    },
+    "./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.js"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/smapiot/piral.git"
+  },
+  "bugs": {
+    "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 --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-million.json src --exclude \"src/**/*.test.*\"",
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "devDependencies": {
+    "million": "^1.12.0",
+    "piral-core": "0.15.0-beta.4574"
+  },
+  "peerDependencies": {
+    "million": "^1.0.0"
+  },
+  "gitHead": "914a7b4c14d9b161731f80756f3e175f0444e874"
+}

package/src/converter.ts

@@ -0,0 +1,30 @@
+import type { ForeignComponent, BaseComponentProps } from 'piral-core';
+import type { VNode } from 'million';
+import { mountMillion, updateMillion, unmountMillion } from './mount';
+import { createExtension } from './extension';
+
+export interface MillionConverterOptions {
+  /**
+   * Defines the name of the root element.
+   * @default slot
+   */
+  rootName?: string;
+}
+
+export function createConverter(config: MillionConverterOptions = {}) {
+  const { rootName = 'slot' } = config;
+  const Extension = createExtension(rootName);
+  const convert = <TProps extends BaseComponentProps>(root: (props: TProps) => VNode): ForeignComponent<TProps> => ({
+    mount(el, props, ctx, locals) {
+      locals.node = mountMillion(el, root, props);
+    },
+    update(el, props, ctx, locals) {
+      locals.node = updateMillion(el, root, props, locals.node);
+    },
+    unmount(el, locals) {
+      unmountMillion(el, locals.node);
+    },
+  });
+  convert.Extension = Extension;
+  return convert;
+}

package/src/create.ts

@@ -0,0 +1,28 @@
+import type { PiralPlugin } from 'piral-core';
+import { createConverter, MillionConverterOptions } from './converter';
+import type { PiletMillionApi } from './types';
+
+/**
+ * Available configuration options for the Million plugin.
+ */
+export interface MillionConfig extends MillionConverterOptions {}
+
+/**
+ * Creates new Pilet API extensions for integrating Million.
+ */
+export function createMillionApi(config: MillionConfig = {}): PiralPlugin<PiletMillionApi> {
+  return (context) => {
+    const convert = createConverter(config);
+    context.converters.million = ({ root }) => convert(root);
+
+    return {
+      fromMillion(root) {
+        return {
+          type: 'million',
+          root,
+        };
+      },
+      MillionExtension: convert.Extension,
+    };
+  };
+}

package/src/extension.ts

@@ -0,0 +1,53 @@
+import { m, VNode, _ } from 'million';
+import type { ExtensionSlotProps } from 'piral-core';
+
+function compareObjects(a: any, b: any) {
+  for (const i in a) {
+    if (!(i in b)) {
+      return false;
+    }
+  }
+
+  for (const i in b) {
+    if (!compare(a[i], b[i])) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function compare<T>(a: T, b: T) {
+  if (a !== b) {
+    const ta = typeof a;
+    const tb = typeof b;
+
+    if (ta === tb && ta === 'object' && a && b) {
+      return compareObjects(a, b);
+    }
+
+    return false;
+  }
+
+  return true;
+}
+
+export function createExtension(rootName: string): (props: ExtensionSlotProps) => VNode {
+  return (props) => {
+    return m(rootName, props, _, _, _, {
+      create(node) {
+        const { piral } = props as any;
+        node.textContent = '';
+        node.childNodes.forEach((n) => node.removeChild(n));
+        piral.renderHtmlExtension(node, this.props);
+        return true;
+      },
+      update(node, newNode, oldNode) {
+        if (!compare((newNode as any).props, (oldNode as any).props)) {
+          //TODO render extension
+        }
+        return true;
+      },
+    });
+  };
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './create';
+export * from './types';

package/src/mount.ts

@@ -0,0 +1,23 @@
+import { render, m, VNode } from 'million';
+import type { BaseComponentProps } from 'piral-core';
+
+export function mountMillion<T extends BaseComponentProps>(el: HTMLElement, root: (props: T) => VNode, props: T) {
+  const node = m(root as any, props);
+  render(el, node);
+  return node;
+}
+
+export function updateMillion<T extends BaseComponentProps>(
+  el: HTMLElement,
+  root: (props: T) => VNode,
+  props: T,
+  oldNode: VNode,
+) {
+  const newNode = m(root as any, props);
+  render(el, newNode, oldNode);
+  return newNode;
+}
+
+export function unmountMillion(el: HTMLElement, oldNode: VNode) {
+  render(el, '', oldNode);
+}

package/src/types.ts

@@ -0,0 +1,37 @@
+import type { VNode } from 'million';
+import type { ForeignComponent, ExtensionSlotProps } from 'piral-core';
+
+declare module 'piral-core/lib/types/custom' {
+  interface PiletCustomApi extends PiletMillionApi {}
+
+  interface PiralCustomComponentConverters<TProps> {
+    million(component: MillionComponent<TProps>): ForeignComponent<TProps>;
+  }
+}
+
+export interface MillionComponent<TProps> {
+  /**
+   * The component root.
+   */
+  root: (props: TProps) => VNode;
+  /**
+   * The type of the Million component.
+   */
+  type: 'million';
+}
+
+/**
+ * Defines the provided set of Million Pilet API extensions.
+ */
+export interface PiletMillionApi {
+  /**
+   * Wraps an Million component for use in Piral.
+   * @param component The component root.
+   * @returns The Piral Million component.
+   */
+  fromMillion<TProps>(component: (props: TProps) => VNode): MillionComponent<TProps>;
+  /**
+   * Million component for displaying extensions of the given name.
+   */
+  MillionExtension: (props: ExtensionSlotProps) => VNode;
+}