piral-react 1.4.0-beta.6224

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 - 2023 smapiot
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+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,105 @@
+[![Piral Logo](https://github.com/smapiot/piral/raw/main/docs/assets/logo.png)](https://piral.io)
+
+# [Piral React](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-react.svg?style=flat)](https://www.npmjs.com/package/piral-react) [![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 `react@>=16` and `react-dom@>=16`. What `piral-react` brings to the table is a set of Pilet API extensions that can be used with `piral` or `piral-core`.
+
+The set includes a React 16+ converter for any component registration, as well as a `fromReact` shortcut and a `ReactExtension` 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.
+
+### `fromReact()`
+
+Transforms a standard React 16+ component into a component that can be used in Piral, essentially wrapping it with a reference to the corresponding converter.
+
+### `ReactExtension`
+
+The extension slot component to be used in React 16+ components.
+
+## Usage
+
+::: summary: For pilet authors
+
+You can use the `fromReact` function from the Pilet API to convert your React 16+ components to components usable by your Piral instance.
+
+Example use:
+
+```ts
+import { PiletApi } from '<name-of-piral-instance>';
+import { ReactPage } from './ReactPage';
+
+export function setup(piral: PiletApi) {
+  piral.registerPage('/sample', piral.fromReact(ReactPage));
+}
+```
+
+Within React 16+ components the Piral React 16+ extension component can be used by referring to `ReactExtension`, e.g.,
+
+```jsx
+<ReactExtension name="name-of-extension" />
+```
+
+Alternatively, if `piral-react` 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 { fromReact } from 'piral-react/convert';
+import { ReactPage } from './ReactPage';
+
+export function setup(piral: PiletApi) {
+  piral.registerPage('/sample', fromReact(ReactPage));
+}
+```
+
+:::
+
+::: summary: For Piral instance developers
+
+Using React 16+ with Piral is as simple as installing `piral-react` and `react`. For `react` add the following two packages to your project's dependencies:
+
+```json
+{
+  "dependencies": {
+    "react`": "^18",
+    "react-dom": "^18"
+  }
+}
+```
+
+Now you are ready to use the `piral-react` converter:
+
+```ts
+import { createReactApi } from 'piral-react';
+```
+
+The integration looks like:
+
+```ts
+const instance = createInstance({
+  // important part
+  plugins: [createReactApi()],
+  // ...
+});
+```
+
+The `react` package (or whatever alias you've chosen) should be shared with the pilets via the *package.json*:
+
+```json
+{
+  "importmap": {
+    "imports": {
+      "react": ""
+    }
+  }
+}
+```
+
+:::
+
+## 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 ReactConverter {
+    (...params: Parameters<ReturnType<typeof createConverter>>): HtmlComponent<any>;
+}
+export declare function createReactConverter(...params: Parameters<typeof createConverter>): {
+    from: ReactConverter;
+    Extension: any;
+};
+declare const fromReact: ReactConverter, ReactExtension: any;
+export { fromReact, ReactExtension };

package/convert.js

@@ -0,0 +1,16 @@
+import { createConverter } from './esm/converter';
+export function createReactConverter() {
+    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 = createReactConverter(), fromReact = _a.from, ReactExtension = _a.Extension;
+export { fromReact, ReactExtension };

package/esm/converter.d.ts

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

package/esm/converter.js

@@ -0,0 +1,20 @@
+import { createExtension } from './extension';
+import { mountReact, unmountReact } from './mount';
+export function createConverter(config = {}) {
+    const { rootName = 'piral-slot' } = config;
+    const Extension = createExtension(rootName);
+    const convert = (root) => ({
+        mount(el, props, ctx) {
+            mountReact(el, root, props, ctx);
+        },
+        update(el, props, ctx) {
+            mountReact(el, root, props, ctx);
+        },
+        unmount(el) {
+            unmountReact(el);
+        },
+    });
+    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,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAUnD,MAAM,UAAU,eAAe,CAAC,SAAgC,EAAE;IAChE,MAAM,EAAE,QAAQ,GAAG,YAAY,EAAE,GAAG,MAAM,CAAC;IAC3C,MAAM,SAAS,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,CAAoC,IAA2B,EAA4B,EAAE,CAAC,CAAC;QAC7G,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG;YAClB,UAAU,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;QACnC,CAAC;QACD,MAAM,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG;YACnB,UAAU,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;QACnC,CAAC;QACD,OAAO,CAAC,EAAE;YACR,YAAY,CAAC,EAAE,CAAC,CAAC;QACnB,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 { ReactConverterOptions } from './converter';
+import type { PiletReactApi } from './types';
+/**
+ * Available configuration options for the React 16+ plugin.
+ */
+export interface ReactConfig extends ReactConverterOptions {
+}
+/**
+ * Creates Pilet API extensions for integrating React 16+.
+ */
+export declare function createReactApi(config?: ReactConfig): PiralPlugin<PiletReactApi>;

package/esm/create.js

@@ -0,0 +1,20 @@
+import { createConverter } from './converter';
+/**
+ * Creates Pilet API extensions for integrating React 16+.
+ */
+export function createReactApi(config = {}) {
+    return (context) => {
+        const convert = createConverter(config);
+        context.converters.react = ({ root }) => convert(root);
+        return {
+            fromReact(root) {
+                return {
+                    type: 'react',
+                    root,
+                };
+            },
+            ReactExtension: 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,EAAyB,MAAM,aAAa,CAAC;AAQrE;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,SAAsB,EAAE;IACrD,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,MAAM,OAAO,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;QACxC,OAAO,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAEvD,OAAO;YACL,SAAS,CAAC,IAAI;gBACZ,OAAO;oBACL,IAAI,EAAE,OAAO;oBACb,IAAI;iBACL,CAAC;YACJ,CAAC;YACD,cAAc,EAAE,OAAO,CAAC,SAAS;SAClC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}

package/esm/extension.d.ts

@@ -0,0 +1 @@
+export declare function createExtension(rootName: string): any;

package/esm/extension.js

@@ -0,0 +1,57 @@
+import { __setFunctionName } from "tslib";
+import { createElement, Component } from 'react';
+import { anyPropType } from './mount';
+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) {
+    var _a;
+    const ReactExtension = (_a = class extends Component {
+            constructor() {
+                super(...arguments);
+                this.onRefChange = (element) => {
+                    if (element) {
+                        const { piral } = this.context;
+                        element.innerHTML = '';
+                        piral.renderHtmlExtension(element, this.props);
+                    }
+                };
+            }
+            shouldComponentUpdate(nextProps) {
+                return !compare(this.props, nextProps);
+            }
+            render() {
+                return createElement(rootName, {
+                    ref: this.onRefChange,
+                });
+            }
+        },
+        __setFunctionName(_a, "ReactExtension"),
+        _a.contextTypes = {
+            piral: anyPropType,
+        },
+        _a);
+    return ReactExtension;
+}
+//# sourceMappingURL=extension.js.map

package/esm/extension.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,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,MAAM,cAAc,SAAQ,KAAM,SAAQ,SAA6B;YAA3C;;gBAKlB,gBAAW,GAAG,CAAC,OAAoB,EAAE,EAAE;oBAC7C,IAAI,OAAO,EAAE;wBACX,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,OAA8B,CAAC;wBACtD,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC;wBACvB,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;qBAChD;gBACH,CAAC,CAAC;YAWJ,CAAC;YATC,qBAAqB,CAAC,SAA6B;gBACjD,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;YACzC,CAAC;YAED,MAAM;gBACJ,OAAO,aAAa,CAAC,QAAQ,EAAE;oBAC7B,GAAG,EAAE,IAAI,CAAC,WAAW;iBACtB,CAAC,CAAC;YACL,CAAC;SACF;;QArBQ,eAAY,GAAG;YACpB,KAAK,EAAE,WAAW;SAClB;WAmBH,CAAC;IAEF,OAAO,cAAc,CAAC;AACxB,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 type { BaseComponentProps } from 'piral-core';
+import { ComponentType } from 'react';
+export declare const anyPropType: () => any;
+export declare function mountReact<T extends BaseComponentProps>(el: HTMLElement, root: ComponentType<T>, props: T, ctx?: any): void;
+export declare function unmountReact(el: HTMLElement): void;

package/esm/mount.js

@@ -0,0 +1,25 @@
+import { render } from 'react-dom';
+import { createElement, Component } from 'react';
+// tslint:disable-next-line:no-null-keyword
+export const anyPropType = () => null;
+export function mountReact(el, root, props, ctx = {}) {
+    const contextTypes = {};
+    ['piral', ...Object.keys(ctx)].forEach((key) => {
+        contextTypes[key] = anyPropType;
+    });
+    class Provider extends Component {
+        getChildContext() {
+            return Object.assign({ piral: props.piral }, ctx);
+        }
+        render() {
+            return this.props.children;
+        }
+    }
+    Provider.childContextTypes = contextTypes;
+    render(createElement(Provider, {}, createElement(root, props)), el);
+}
+export function unmountReact(el) {
+    // tslint:disable-next-line:no-null-keyword
+    render(null, el);
+}
+//# sourceMappingURL=mount.js.map

package/esm/mount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mount.js","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,aAAa,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhE,2CAA2C;AAC3C,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC;AAEtC,MAAM,UAAU,UAAU,CACxB,EAAe,EACf,IAAsB,EACtB,KAAQ,EACR,MAAW,EAAE;IAEb,MAAM,YAAY,GAAG,EAAE,CAAC;IAExB,CAAC,OAAO,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QAC7C,YAAY,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC;IAClC,CAAC,CAAC,CAAC;IAEH,MAAM,QAAS,SAAQ,SAA6B;QAGlD,eAAe;YACb,uBACE,KAAK,EAAE,KAAK,CAAC,KAAK,IACf,GAAG,EACN;QACJ,CAAC;QAED,MAAM;YACJ,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;QAC7B,CAAC;;IAXM,0BAAiB,GAAG,YAAY,CAAC;IAc1C,MAAM,CAAC,aAAa,CAAC,QAAQ,EAAE,EAAE,EAAE,aAAa,CAAC,IAAW,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;AAC7E,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,EAAe;IAC1C,2CAA2C;IAC3C,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AACnB,CAAC"}

package/esm/types.d.ts

@@ -0,0 +1,34 @@
+import type { ForeignComponent, ExtensionSlotProps } from 'piral-core';
+import type { Component, ComponentType } from 'react';
+declare module 'piral-core/lib/types/custom' {
+    interface PiletCustomApi extends PiletReactApi {
+    }
+    interface PiralCustomComponentConverters<TProps> {
+        react(component: ReactComponent<TProps>): ForeignComponent<TProps>;
+    }
+}
+export interface ReactComponent<TProps> {
+    /**
+     * The component root.
+     */
+    root: ComponentType<TProps>;
+    /**
+     * The type of the React 16+ component.
+     */
+    type: 'react';
+}
+/**
+ * Defines the provided set of Pilet API extensions from the React 16+ plugin.
+ */
+export interface PiletReactApi {
+    /**
+     * Wraps an React 16+ component for use in Piral.
+     * @param component The component root.
+     * @returns The Piral React 16+ component.
+     */
+    fromReact<TProps>(component: ComponentType<TProps>): ReactComponent<TProps>;
+    /**
+     * React 16+ component for displaying extensions of the given name.
+     */
+    ReactExtension: Component<ExtensionSlotProps>;
+}

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 { ComponentType } from 'react';
+export interface ReactConverterOptions {
+    /**
+     * Defines the name of the root element.
+     * @default piral-slot
+     */
+    rootName?: string;
+}
+export declare function createConverter(config?: ReactConverterOptions): {
+    <TProps extends BaseComponentProps>(root: ComponentType<TProps>): ForeignComponent<TProps>;
+    Extension: any;
+};

package/lib/converter.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createConverter = void 0;
+const extension_1 = require("./extension");
+const mount_1 = require("./mount");
+function createConverter(config = {}) {
+    const { rootName = 'piral-slot' } = config;
+    const Extension = (0, extension_1.createExtension)(rootName);
+    const convert = (root) => ({
+        mount(el, props, ctx) {
+            (0, mount_1.mountReact)(el, root, props, ctx);
+        },
+        update(el, props, ctx) {
+            (0, mount_1.mountReact)(el, root, props, ctx);
+        },
+        unmount(el) {
+            (0, mount_1.unmountReact)(el);
+        },
+    });
+    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,2CAA8C;AAC9C,mCAAmD;AAUnD,SAAgB,eAAe,CAAC,SAAgC,EAAE;IAChE,MAAM,EAAE,QAAQ,GAAG,YAAY,EAAE,GAAG,MAAM,CAAC;IAC3C,MAAM,SAAS,GAAG,IAAA,2BAAe,EAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,CAAoC,IAA2B,EAA4B,EAAE,CAAC,CAAC;QAC7G,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG;YAClB,IAAA,kBAAU,EAAC,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;QACnC,CAAC;QACD,MAAM,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG;YACnB,IAAA,kBAAU,EAAC,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;QACnC,CAAC;QACD,OAAO,CAAC,EAAE;YACR,IAAA,oBAAY,EAAC,EAAE,CAAC,CAAC;QACnB,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 { ReactConverterOptions } from './converter';
+import type { PiletReactApi } from './types';
+/**
+ * Available configuration options for the React 16+ plugin.
+ */
+export interface ReactConfig extends ReactConverterOptions {
+}
+/**
+ * Creates Pilet API extensions for integrating React 16+.
+ */
+export declare function createReactApi(config?: ReactConfig): PiralPlugin<PiletReactApi>;

package/lib/create.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createReactApi = void 0;
+const converter_1 = require("./converter");
+/**
+ * Creates Pilet API extensions for integrating React 16+.
+ */
+function createReactApi(config = {}) {
+    return (context) => {
+        const convert = (0, converter_1.createConverter)(config);
+        context.converters.react = ({ root }) => convert(root);
+        return {
+            fromReact(root) {
+                return {
+                    type: 'react',
+                    root,
+                };
+            },
+            ReactExtension: convert.Extension,
+        };
+    };
+}
+exports.createReactApi = createReactApi;
+//# 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,2CAAqE;AAQrE;;GAEG;AACH,SAAgB,cAAc,CAAC,SAAsB,EAAE;IACrD,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,MAAM,OAAO,GAAG,IAAA,2BAAe,EAAC,MAAM,CAAC,CAAC;QACxC,OAAO,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAEvD,OAAO;YACL,SAAS,CAAC,IAAI;gBACZ,OAAO;oBACL,IAAI,EAAE,OAAO;oBACb,IAAI;iBACL,CAAC;YACJ,CAAC;YACD,cAAc,EAAE,OAAO,CAAC,SAAS;SAClC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAfD,wCAeC"}

package/lib/extension.d.ts

@@ -0,0 +1 @@
+export declare function createExtension(rootName: string): any;

package/lib/extension.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createExtension = void 0;
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const mount_1 = require("./mount");
+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) {
+    var _a;
+    const ReactExtension = (_a = class extends react_1.Component {
+            constructor() {
+                super(...arguments);
+                this.onRefChange = (element) => {
+                    if (element) {
+                        const { piral } = this.context;
+                        element.innerHTML = '';
+                        piral.renderHtmlExtension(element, this.props);
+                    }
+                };
+            }
+            shouldComponentUpdate(nextProps) {
+                return !compare(this.props, nextProps);
+            }
+            render() {
+                return (0, react_1.createElement)(rootName, {
+                    ref: this.onRefChange,
+                });
+            }
+        },
+        tslib_1.__setFunctionName(_a, "ReactExtension"),
+        _a.contextTypes = {
+            piral: mount_1.anyPropType,
+        },
+        _a);
+    return ReactExtension;
+}
+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":";;;;AACA,iCAAiD;AACjD,mCAAsC;AAEtC,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,MAAM,cAAc,SAAQ,KAAM,SAAQ,iBAA6B;YAA3C;;gBAKlB,gBAAW,GAAG,CAAC,OAAoB,EAAE,EAAE;oBAC7C,IAAI,OAAO,EAAE;wBACX,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,OAA8B,CAAC;wBACtD,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC;wBACvB,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;qBAChD;gBACH,CAAC,CAAC;YAWJ,CAAC;YATC,qBAAqB,CAAC,SAA6B;gBACjD,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;YACzC,CAAC;YAED,MAAM;gBACJ,OAAO,IAAA,qBAAa,EAAC,QAAQ,EAAE;oBAC7B,GAAG,EAAE,IAAI,CAAC,WAAW;iBACtB,CAAC,CAAC;YACL,CAAC;SACF;;QArBQ,eAAY,GAAG;YACpB,KAAK,EAAE,mBAAW;SAClB;WAmBH,CAAC;IAEF,OAAO,cAAc,CAAC;AACxB,CAAC;AA1BD,0CA0BC"}

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 type { BaseComponentProps } from 'piral-core';
+import { ComponentType } from 'react';
+export declare const anyPropType: () => any;
+export declare function mountReact<T extends BaseComponentProps>(el: HTMLElement, root: ComponentType<T>, props: T, ctx?: any): void;
+export declare function unmountReact(el: HTMLElement): void;

package/lib/mount.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unmountReact = exports.mountReact = exports.anyPropType = void 0;
+const react_dom_1 = require("react-dom");
+const react_1 = require("react");
+// tslint:disable-next-line:no-null-keyword
+const anyPropType = () => null;
+exports.anyPropType = anyPropType;
+function mountReact(el, root, props, ctx = {}) {
+    const contextTypes = {};
+    ['piral', ...Object.keys(ctx)].forEach((key) => {
+        contextTypes[key] = exports.anyPropType;
+    });
+    class Provider extends react_1.Component {
+        getChildContext() {
+            return Object.assign({ piral: props.piral }, ctx);
+        }
+        render() {
+            return this.props.children;
+        }
+    }
+    Provider.childContextTypes = contextTypes;
+    (0, react_dom_1.render)((0, react_1.createElement)(Provider, {}, (0, react_1.createElement)(root, props)), el);
+}
+exports.mountReact = mountReact;
+function unmountReact(el) {
+    // tslint:disable-next-line:no-null-keyword
+    (0, react_dom_1.render)(null, el);
+}
+exports.unmountReact = unmountReact;
+//# sourceMappingURL=mount.js.map

package/lib/mount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mount.js","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":";;;AACA,yCAAmC;AACnC,iCAAgE;AAEhE,2CAA2C;AACpC,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC;AAAzB,QAAA,WAAW,eAAc;AAEtC,SAAgB,UAAU,CACxB,EAAe,EACf,IAAsB,EACtB,KAAQ,EACR,MAAW,EAAE;IAEb,MAAM,YAAY,GAAG,EAAE,CAAC;IAExB,CAAC,OAAO,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QAC7C,YAAY,CAAC,GAAG,CAAC,GAAG,mBAAW,CAAC;IAClC,CAAC,CAAC,CAAC;IAEH,MAAM,QAAS,SAAQ,iBAA6B;QAGlD,eAAe;YACb,uBACE,KAAK,EAAE,KAAK,CAAC,KAAK,IACf,GAAG,EACN;QACJ,CAAC;QAED,MAAM;YACJ,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;QAC7B,CAAC;;IAXM,0BAAiB,GAAG,YAAY,CAAC;IAc1C,IAAA,kBAAM,EAAC,IAAA,qBAAa,EAAC,QAAQ,EAAE,EAAE,EAAE,IAAA,qBAAa,EAAC,IAAW,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;AAC7E,CAAC;AA5BD,gCA4BC;AAED,SAAgB,YAAY,CAAC,EAAe;IAC1C,2CAA2C;IAC3C,IAAA,kBAAM,EAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AACnB,CAAC;AAHD,oCAGC"}

package/lib/types.d.ts

@@ -0,0 +1,34 @@
+import type { ForeignComponent, ExtensionSlotProps } from 'piral-core';
+import type { Component, ComponentType } from 'react';
+declare module 'piral-core/lib/types/custom' {
+    interface PiletCustomApi extends PiletReactApi {
+    }
+    interface PiralCustomComponentConverters<TProps> {
+        react(component: ReactComponent<TProps>): ForeignComponent<TProps>;
+    }
+}
+export interface ReactComponent<TProps> {
+    /**
+     * The component root.
+     */
+    root: ComponentType<TProps>;
+    /**
+     * The type of the React 16+ component.
+     */
+    type: 'react';
+}
+/**
+ * Defines the provided set of Pilet API extensions from the React 16+ plugin.
+ */
+export interface PiletReactApi {
+    /**
+     * Wraps an React 16+ component for use in Piral.
+     * @param component The component root.
+     * @returns The Piral React 16+ component.
+     */
+    fromReact<TProps>(component: ComponentType<TProps>): ReactComponent<TProps>;
+    /**
+     * React 16+ component for displaying extensions of the given name.
+     */
+    ReactExtension: Component<ExtensionSlotProps>;
+}

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,73 @@
+{
+  "name": "piral-react",
+  "version": "1.4.0-beta.6224",
+  "description": "Plugin for integrating React 16+ components in Piral.",
+  "keywords": [
+    "piral",
+    "pilet-api",
+    "smapiot",
+    "portal",
+    "modules",
+    "api",
+    "plugin",
+    "plugin-converter",
+    "react",
+    "react16",
+    "react17",
+    "react18"
+  ],
+  "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-react.json src --exclude \"src/**/*.test.*\"",
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "devDependencies": {
+    "piral-core": "1.4.0-beta.6224"
+  },
+  "gitHead": "848d6e355c7d3ded789e5d54d853555822fd77ad"
+}

package/src/converter.ts

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

package/src/create.ts

@@ -0,0 +1,28 @@
+import type { PiralPlugin } from 'piral-core';
+import { createConverter, ReactConverterOptions } from './converter';
+import type { PiletReactApi } from './types';
+
+/**
+ * Available configuration options for the React 16+ plugin.
+ */
+export interface ReactConfig extends ReactConverterOptions {}
+
+/**
+ * Creates Pilet API extensions for integrating React 16+.
+ */
+export function createReactApi(config: ReactConfig = {}): PiralPlugin<PiletReactApi> {
+  return (context) => {
+    const convert = createConverter(config);
+    context.converters.react = ({ root }) => convert(root);
+
+    return {
+      fromReact(root) {
+        return {
+          type: 'react',
+          root,
+        };
+      },
+      ReactExtension: convert.Extension,
+    };
+  };
+}

package/src/extension.ts

@@ -0,0 +1,62 @@
+import type { ExtensionSlotProps, PiletApi } from 'piral-core';
+import { createElement, Component } from 'react';
+import { anyPropType } from './mount';
+
+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) {
+  const ReactExtension: any = class extends Component<ExtensionSlotProps> {
+    static contextTypes = {
+      piral: anyPropType,
+    };
+
+    private onRefChange = (element: HTMLElement) => {
+      if (element) {
+        const { piral } = this.context as { piral: PiletApi };
+        element.innerHTML = '';
+        piral.renderHtmlExtension(element, this.props);
+      }
+    };
+
+    shouldComponentUpdate(nextProps: ExtensionSlotProps) {
+      return !compare(this.props, nextProps);
+    }
+
+    render() {
+      return createElement(rootName, {
+        ref: this.onRefChange,
+      });
+    }
+  };
+
+  return ReactExtension;
+}

package/src/index.ts

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

package/src/mount.ts

@@ -0,0 +1,41 @@
+import type { BaseComponentProps } from 'piral-core';
+import { render } from 'react-dom';
+import { createElement, ComponentType, Component } from 'react';
+
+// tslint:disable-next-line:no-null-keyword
+export const anyPropType = () => null;
+
+export function mountReact<T extends BaseComponentProps>(
+  el: HTMLElement,
+  root: ComponentType<T>,
+  props: T,
+  ctx: any = {},
+) {
+  const contextTypes = {};
+
+  ['piral', ...Object.keys(ctx)].forEach((key) => {
+    contextTypes[key] = anyPropType;
+  });
+
+  class Provider extends Component<{ children?: any }> {
+    static childContextTypes = contextTypes;
+
+    getChildContext() {
+      return {
+        piral: props.piral,
+        ...ctx,
+      };
+    }
+
+    render() {
+      return this.props.children;
+    }
+  }
+
+  render(createElement(Provider, {}, createElement(root as any, props)), el);
+}
+
+export function unmountReact(el: HTMLElement) {
+  // tslint:disable-next-line:no-null-keyword
+  render(null, el);
+}

package/src/types.ts

@@ -0,0 +1,37 @@
+import type { ForeignComponent, ExtensionSlotProps } from 'piral-core';
+import type { Component, ComponentType } from 'react';
+
+declare module 'piral-core/lib/types/custom' {
+  interface PiletCustomApi extends PiletReactApi {}
+
+  interface PiralCustomComponentConverters<TProps> {
+    react(component: ReactComponent<TProps>): ForeignComponent<TProps>;
+  }
+}
+
+export interface ReactComponent<TProps> {
+  /**
+   * The component root.
+   */
+  root: ComponentType<TProps>;
+  /**
+   * The type of the React 16+ component.
+   */
+  type: 'react';
+}
+
+/**
+ * Defines the provided set of Pilet API extensions from the React 16+ plugin.
+ */
+export interface PiletReactApi {
+  /**
+   * Wraps an React 16+ component for use in Piral.
+   * @param component The component root.
+   * @returns The Piral React 16+ component.
+   */
+  fromReact<TProps>(component: ComponentType<TProps>): ReactComponent<TProps>;
+  /**
+   * React 16+ component for displaying extensions of the given name.
+   */
+  ReactExtension: Component<ExtensionSlotProps>;
+}