piral-cycle 1.0.0-pre.2108 → 1.0.0

package/LICENSE

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

package/README.md

@@ -1,8 +1,8 @@
-[![Piral Logo](https://github.com/smapiot/piral/raw/master/docs/assets/logo.png)](https://piral.io)
+[![Piral Logo](https://github.com/smapiot/piral/raw/main/docs/assets/logo.png)](https://piral.io)
 
-# [Piral Cycle](https://piral.io) · [![GitHub License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/smapiot/piral/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/piral-cycle.svg?style=flat)](https://www.npmjs.com/package/piral-cycle) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://jestjs.io) [![Gitter Chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/piral-io/community)
+# [Piral Cycle](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-cycle.svg?style=flat)](https://www.npmjs.com/package/piral-cycle) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://jestjs.io) [![Gitter Chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/piral-io/community)
 
-This is a plugin that only has a peer dependency to `piral-core`. What `piral-cycle` brings to the table is a set of Pilet API extensions that can be used with `piral` or `piral-core`.
+This is a plugin that only has a peer dependency to `@cycle/dom` and related packages. What `piral-cycle` brings to the table is a set of Pilet API extensions that can be used with `piral` or `piral-core`.
 
 The set includes a Cycle.js converter for any component registration, as well as a `fromCycle` shortcut and a `CycleExtension` component.
 
@@ -37,7 +37,7 @@ export function setup(piral: PiletApi) {
 }
 ```
 
-Piral provides two drivers to your Cycle.js component. Here, `TProps` are properties provided by Piral, e.g. `TileComponentProps`.
+Piral provides two drivers to your Cycle.js component. Here, `TProps` are properties provided by Piral, e.g., `TileComponentProps`.
 
 ```ts
 export interface PiralDomDrivers<TProps> extends Drivers {
@@ -62,7 +62,7 @@ Alternatively, if `piral-cycle` has not been added to the Piral instance you can
 
 ```ts
 import { PiletApi } from '<name-of-piral-instance>';
-import { fromCycle } from 'piral-cycle';
+import { fromCycle } from 'piral-cycle/convert';
 import { CyclePage } from './CyclePage';
 
 export function setup(piral: PiletApi) {
@@ -94,12 +94,12 @@ The `@cycle/run`, `@cycle/dom` and `xstream` packages should be shared with the
 
 ```json
 {
-  "pilets": {
-    "externals": [
-      "@cycle/run",
-      "@cycle/dom",
-      "xstream"
-    ]
+  "importmap": {
+    "imports": {
+      "@cycle/run": "",
+      "@cycle/dom": "",
+      "xstream": ""
+    }
   }
 }
 ```

package/convert.d.ts

@@ -1,9 +1,18 @@
-import type { HtmlComponent } from 'piral-core';
-import { createExtension } from './lib/extension';
-declare const convert: <TProps extends import("piral-core").BaseComponentProps, M extends import("@cycle/run").MatchingMain<import("./lib/types").PiralDomDrivers<TProps>, M>>(main: M) => import("piral-core").ForeignComponent<TProps>;
+import { createConverter } from './esm/converter';
+export interface HtmlComponent<TProps> {
+    component: {
+        mount(element: HTMLElement, props: TProps, ctx: any, locals: any): void;
+        update?(element: HTMLElement, props: TProps, ctx: any, locals: any): void;
+        unmount?(element: HTMLElement, locals: any): void;
+    };
+    type: 'html';
+}
 export interface CycleConverter {
-    (...params: Parameters<typeof convert>): HtmlComponent<any>;
+    (...params: Parameters<ReturnType<typeof createConverter>>): HtmlComponent<any>;
 }
-export declare const fromCycle: CycleConverter;
-export declare const createCycleExtension: typeof createExtension;
-export {};
+export declare function createCycleConverter(...params: Parameters<typeof createConverter>): {
+    from: CycleConverter;
+    Extension: import("./esm/extension").CycleExtension;
+};
+declare const fromCycle: CycleConverter, CycleExtension: import("./esm/extension").CycleExtension;
+export { fromCycle, CycleExtension };

package/convert.js

@@ -1,11 +1,16 @@
-"use strict";
-exports.__esModule = true;
-exports.createCycleExtension = exports.fromCycle = void 0;
-var converter_1 = require("./lib/converter");
-var extension_1 = require("./lib/extension");
-var convert = converter_1.createConverter();
-exports.fromCycle = function (main) { return ({
-    type: 'html',
-    component: convert(main)
-}); };
-exports.createCycleExtension = extension_1.createExtension;
+import { createConverter } from './esm/converter';
+export function createCycleConverter() {
+    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 (main) { return ({
+        type: 'html',
+        component: convert(main),
+    }); };
+    return { from: from, Extension: Extension };
+}
+var _a = createCycleConverter(), fromCycle = _a.from, CycleExtension = _a.Extension;
+export { fromCycle, CycleExtension };

package/esm/converter.d.ts

@@ -1,4 +1,14 @@
-import { BaseComponentProps, ForeignComponent } from 'piral-core';
+import type { BaseComponentProps, ForeignComponent } from 'piral-core';
 import { MatchingMain } from '@cycle/run';
-import { PiralDomDrivers } from './types';
-export declare function createConverter(): <TProps extends BaseComponentProps, M extends MatchingMain<PiralDomDrivers<TProps>, M>>(main: M) => ForeignComponent<TProps>;
+import type { PiralDomDrivers } from './types';
+export interface CycleConverterOptions {
+    /**
+     * The tag name of the root element into which a CycleExtension is rendered.
+     * @default piral-slot
+     */
+    rootName?: string;
+}
+export declare function createConverter(config?: CycleConverterOptions): {
+    <TProps extends BaseComponentProps, M extends MatchingMain<PiralDomDrivers<TProps>, M>>(main: M): ForeignComponent<TProps>;
+    Extension: import("./extension").CycleExtension;
+};

package/esm/converter.js

@@ -1,32 +1,34 @@
 import { makeDOMDriver } from '@cycle/dom';
 import run from '@cycle/run';
 import xs from 'xstream';
-export function createConverter() {
-    return (main) => {
-        const props$ = xs.create();
-        let dispose = () => { };
-        return {
-            mount(parent, props) {
-                // The Cycle DOM element is not directly rendered into parent, but into a nested container.
-                // This is done because Cycle "erases" information on the host element. If parent was used,
-                // Piral related properties like data-portal-id could be removed, leading to things not working.
-                const host = document.createElement('slot');
-                parent.appendChild(host);
-                const drivers = {
-                    DOM: makeDOMDriver(host),
-                    props: () => props$,
-                };
-                dispose = run(main, drivers);
-                props$.shamefullySendNext(props);
-            },
-            update(_, props) {
-                props$.shamefullySendNext(props);
-            },
-            unmount() {
-                props$.shamefullySendComplete();
-                dispose();
-            },
-        };
-    };
+import { createExtension } from './extension';
+export function createConverter(config = {}) {
+    const { rootName = 'piral-slot' } = config;
+    const Extension = createExtension(rootName);
+    const convert = (main) => ({
+        mount(el, props, ctx, locals) {
+            locals.props$ = xs.create();
+            // The Cycle DOM element is not directly rendered into parent, but into a nested container.
+            // This is done because Cycle "erases" information on the host element. If parent was used,
+            // Piral related properties like data-portal-id could be removed, leading to things not working.
+            const host = el.appendChild(document.createElement(rootName));
+            const drivers = {
+                DOM: makeDOMDriver(host),
+                props: () => locals.props$,
+            };
+            locals.dispose = run(main, drivers);
+            locals.props$.shamefullySendNext(props);
+        },
+        update(el, props, ctx, locals) {
+            locals.props$.shamefullySendNext(props);
+        },
+        unmount(el, locals) {
+            locals.props$.shamefullySendComplete();
+            locals.dispose();
+            locals.props$ = undefined;
+        },
+    });
+    convert.Extension = Extension;
+    return convert;
 }
 //# sourceMappingURL=converter.js.map

package/esm/converter.js.map

@@ -1 +1 @@
-{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,GAA2B,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,MAAM,SAAS,CAAC;AAGzB,MAAM,UAAU,eAAe;IAC7B,OAAO,CACL,IAAO,EACmB,EAAE;QAC5B,MAAM,MAAM,GAAG,EAAE,CAAC,MAAM,EAAU,CAAC;QACnC,IAAI,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;QAEvB,OAAO;YACL,KAAK,CAAC,MAAM,EAAE,KAAK;gBACjB,2FAA2F;gBAC3F,2FAA2F;gBAC3F,gGAAgG;gBAChG,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;gBAC5C,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;gBAEzB,MAAM,OAAO,GAA4B;oBACvC,GAAG,EAAE,aAAa,CAAC,IAAI,CAAC;oBACxB,KAAK,EAAE,GAAG,EAAE,CAAC,MAAM;iBACpB,CAAC;gBAEF,OAAO,GAAG,GAAG,CAAC,IAAY,EAAE,OAAO,CAAC,CAAC;gBACrC,MAAM,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;YACnC,CAAC;YACD,MAAM,CAAC,CAAC,EAAE,KAAK;gBACb,MAAM,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;YACnC,CAAC;YACD,OAAO;gBACL,MAAM,CAAC,sBAAsB,EAAE,CAAC;gBAChC,OAAO,EAAE,CAAC;YACZ,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,GAA2B,MAAM,YAAY,CAAC;AACrD,OAAO,EAAc,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAgB9C,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,CACd,IAAO,EACmB,EAAE,CAAC,CAAC;QAC9B,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAA0B;YAC9C,MAAM,CAAC,MAAM,GAAG,EAAE,CAAC,MAAM,EAAU,CAAC;YAEpC,2FAA2F;YAC3F,2FAA2F;YAC3F,gGAAgG;YAChG,MAAM,IAAI,GAAG,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;YAE9D,MAAM,OAAO,GAA4B;gBACvC,GAAG,EAAE,aAAa,CAAC,IAAI,CAAC;gBACxB,KAAK,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM;aAC3B,CAAC;YAEF,MAAM,CAAC,OAAO,GAAG,GAAG,CAAC,IAAY,EAAE,OAAO,CAAC,CAAC;YAC5C,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAC1C,CAAC;QACD,MAAM,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAA0B;YAC/C,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAC1C,CAAC;QACD,OAAO,CAAC,EAAE,EAAE,MAA0B;YACpC,MAAM,CAAC,MAAM,CAAC,sBAAsB,EAAE,CAAC;YACvC,MAAM,CAAC,OAAO,EAAE,CAAC;YACjB,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC;QAC5B,CAAC;KACF,CAAC,CAAC;IAEH,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;IAC9B,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/esm/create.d.ts

@@ -1,14 +1,10 @@
 import type { PiralPlugin } from 'piral-core';
+import { CycleConverterOptions } from './converter';
 import type { PiletCycleApi } from './types';
 /**
  * Available configuration options for the Cycle.js plugin.
  */
-export interface CycleConfig {
-    /**
-     * The tag name of the root element into which a CycleExtension is rendered.
-     * @default slot
-     */
-    rootName?: string;
+export interface CycleConfig extends CycleConverterOptions {
 }
 /**
  * Creates new Pilet API extensions for integration of Cycle.

package/esm/create.js

@@ -1,22 +1,20 @@
-import { createExtension } from './extension';
 import { createConverter } from './converter';
 /**
  * Creates new Pilet API extensions for integration of Cycle.
  */
 export function createCycleApi(config = {}) {
-    const { rootName } = config;
     return (context) => {
-        const convert = createConverter();
+        const convert = createConverter(config);
         context.converters.cycle = ({ root }) => convert(root);
-        return (api) => ({
+        return {
             fromCycle(root) {
                 return {
                     type: 'cycle',
                     root,
                 };
             },
-            CycleExtension: createExtension(api, rootName),
-        });
+            CycleExtension: convert.Extension,
+        };
     };
 }
 //# sourceMappingURL=create.js.map

package/esm/create.js.map

@@ -1 +1 @@
-{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAc9C;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,SAAsB,EAAE;IACrD,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC;IAE5B,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,MAAM,OAAO,GAAG,eAAe,EAAE,CAAC;QAClC,OAAO,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAEvD,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;YACf,SAAS,CAAC,IAAI;gBACZ,OAAO;oBACL,IAAI,EAAE,OAAO;oBACb,IAAI;iBACL,CAAC;YACJ,CAAC;YACD,cAAc,EAAE,eAAe,CAAC,GAAG,EAAE,QAAQ,CAAC;SAC/C,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC"}
+{"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

@@ -1,6 +1,6 @@
 import { VNode } from '@cycle/dom';
-import type { PiletApi, ExtensionSlotProps } from 'piral-core';
+import type { ExtensionSlotProps } from 'piral-core';
 export interface CycleExtension {
     (props: ExtensionSlotProps<unknown>): VNode;
 }
-export declare function createExtension(api: PiletApi, rootName?: string): CycleExtension;
+export declare function createExtension(rootName: string): CycleExtension;

package/esm/extension.js

@@ -1,10 +1,16 @@
 import { h } from '@cycle/dom';
-export function createExtension(api, rootName = 'slot') {
+export function createExtension(rootName) {
     return (props) => h(rootName, {
         hook: {
             insert: (vnode) => {
                 if (vnode.elm instanceof HTMLElement) {
-                    api.renderHtmlExtension(vnode.elm, props);
+                    vnode.elm.dispatchEvent(new CustomEvent('render-html', {
+                        bubbles: true,
+                        detail: {
+                            target: vnode.elm,
+                            props,
+                        },
+                    }));
                 }
             },
         },

package/esm/extension.js.map

@@ -1 +1 @@
-{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAS,MAAM,YAAY,CAAC;AAOtC,MAAM,UAAU,eAAe,CAAC,GAAa,EAAE,QAAQ,GAAG,MAAM;IAC9D,OAAO,CAAC,KAAK,EAAE,EAAE,CACf,CAAC,CAAC,QAAQ,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;gBAChB,IAAI,KAAK,CAAC,GAAG,YAAY,WAAW,EAAE;oBACpC,GAAG,CAAC,mBAAmB,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;iBAC3C;YACH,CAAC;SACF;KACF,CAAC,CAAC;AACP,CAAC"}
+{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAS,MAAM,YAAY,CAAC;AAOtC,MAAM,UAAU,eAAe,CAAC,QAAgB;IAC9C,OAAO,CAAC,KAAK,EAAE,EAAE,CACf,CAAC,CAAC,QAAQ,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;gBAChB,IAAI,KAAK,CAAC,GAAG,YAAY,WAAW,EAAE;oBACpC,KAAK,CAAC,GAAG,CAAC,aAAa,CACrB,IAAI,WAAW,CAAC,aAAa,EAAE;wBAC7B,OAAO,EAAE,IAAI;wBACb,MAAM,EAAE;4BACN,MAAM,EAAE,KAAK,CAAC,GAAG;4BACjB,KAAK;yBACN;qBACF,CAAC,CACH,CAAC;iBACH;YACH,CAAC;SACF;KACF,CAAC,CAAC;AACP,CAAC"}

package/esm/types.d.ts

@@ -1,7 +1,7 @@
-import { Stream } from 'xstream';
-import { Driver, Drivers, MatchingMain, Main } from '@cycle/run';
-import { MainDOMSource, VNode } from '@cycle/dom';
-import { ForeignComponent, ExtensionSlotProps } from 'piral-core';
+import type { Stream } from 'xstream';
+import type { Driver, Drivers, MatchingMain, Main } from '@cycle/run';
+import type { MainDOMSource, VNode } from '@cycle/dom';
+import type { ForeignComponent, ExtensionSlotProps } from 'piral-core';
 declare module 'piral-core/lib/types/custom' {
     interface PiletCustomApi extends PiletCycleApi {
     }

package/lib/converter.d.ts

@@ -1,4 +1,14 @@
-import { BaseComponentProps, ForeignComponent } from 'piral-core';
+import type { BaseComponentProps, ForeignComponent } from 'piral-core';
 import { MatchingMain } from '@cycle/run';
-import { PiralDomDrivers } from './types';
-export declare function createConverter(): <TProps extends BaseComponentProps, M extends MatchingMain<PiralDomDrivers<TProps>, M>>(main: M) => ForeignComponent<TProps>;
+import type { PiralDomDrivers } from './types';
+export interface CycleConverterOptions {
+    /**
+     * The tag name of the root element into which a CycleExtension is rendered.
+     * @default piral-slot
+     */
+    rootName?: string;
+}
+export declare function createConverter(config?: CycleConverterOptions): {
+    <TProps extends BaseComponentProps, M extends MatchingMain<PiralDomDrivers<TProps>, M>>(main: M): ForeignComponent<TProps>;
+    Extension: import("./extension").CycleExtension;
+};

package/lib/converter.js

@@ -4,33 +4,35 @@ exports.createConverter = void 0;
 const dom_1 = require("@cycle/dom");
 const run_1 = require("@cycle/run");
 const xstream_1 = require("xstream");
-function createConverter() {
-    return (main) => {
-        const props$ = xstream_1.default.create();
-        let dispose = () => { };
-        return {
-            mount(parent, props) {
-                // The Cycle DOM element is not directly rendered into parent, but into a nested container.
-                // This is done because Cycle "erases" information on the host element. If parent was used,
-                // Piral related properties like data-portal-id could be removed, leading to things not working.
-                const host = document.createElement('slot');
-                parent.appendChild(host);
-                const drivers = {
-                    DOM: dom_1.makeDOMDriver(host),
-                    props: () => props$,
-                };
-                dispose = run_1.default(main, drivers);
-                props$.shamefullySendNext(props);
-            },
-            update(_, props) {
-                props$.shamefullySendNext(props);
-            },
-            unmount() {
-                props$.shamefullySendComplete();
-                dispose();
-            },
-        };
-    };
+const extension_1 = require("./extension");
+function createConverter(config = {}) {
+    const { rootName = 'piral-slot' } = config;
+    const Extension = (0, extension_1.createExtension)(rootName);
+    const convert = (main) => ({
+        mount(el, props, ctx, locals) {
+            locals.props$ = xstream_1.default.create();
+            // The Cycle DOM element is not directly rendered into parent, but into a nested container.
+            // This is done because Cycle "erases" information on the host element. If parent was used,
+            // Piral related properties like data-portal-id could be removed, leading to things not working.
+            const host = el.appendChild(document.createElement(rootName));
+            const drivers = {
+                DOM: (0, dom_1.makeDOMDriver)(host),
+                props: () => locals.props$,
+            };
+            locals.dispose = (0, run_1.default)(main, drivers);
+            locals.props$.shamefullySendNext(props);
+        },
+        update(el, props, ctx, locals) {
+            locals.props$.shamefullySendNext(props);
+        },
+        unmount(el, locals) {
+            locals.props$.shamefullySendComplete();
+            locals.dispose();
+            locals.props$ = undefined;
+        },
+    });
+    convert.Extension = Extension;
+    return convert;
 }
 exports.createConverter = createConverter;
 //# sourceMappingURL=converter.js.map

package/lib/converter.js.map

@@ -1 +1 @@
-{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":";;;AACA,oCAA2C;AAC3C,oCAAqD;AACrD,qCAAyB;AAGzB,SAAgB,eAAe;IAC7B,OAAO,CACL,IAAO,EACmB,EAAE;QAC5B,MAAM,MAAM,GAAG,iBAAE,CAAC,MAAM,EAAU,CAAC;QACnC,IAAI,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;QAEvB,OAAO;YACL,KAAK,CAAC,MAAM,EAAE,KAAK;gBACjB,2FAA2F;gBAC3F,2FAA2F;gBAC3F,gGAAgG;gBAChG,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;gBAC5C,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;gBAEzB,MAAM,OAAO,GAA4B;oBACvC,GAAG,EAAE,mBAAa,CAAC,IAAI,CAAC;oBACxB,KAAK,EAAE,GAAG,EAAE,CAAC,MAAM;iBACpB,CAAC;gBAEF,OAAO,GAAG,aAAG,CAAC,IAAY,EAAE,OAAO,CAAC,CAAC;gBACrC,MAAM,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;YACnC,CAAC;YACD,MAAM,CAAC,CAAC,EAAE,KAAK;gBACb,MAAM,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;YACnC,CAAC;YACD,OAAO;gBACL,MAAM,CAAC,sBAAsB,EAAE,CAAC;gBAChC,OAAO,EAAE,CAAC;YACZ,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAhCD,0CAgCC"}
+{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":";;;AACA,oCAA2C;AAC3C,oCAAqD;AACrD,qCAAqC;AACrC,2CAA8C;AAgB9C,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,CACd,IAAO,EACmB,EAAE,CAAC,CAAC;QAC9B,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAA0B;YAC9C,MAAM,CAAC,MAAM,GAAG,iBAAE,CAAC,MAAM,EAAU,CAAC;YAEpC,2FAA2F;YAC3F,2FAA2F;YAC3F,gGAAgG;YAChG,MAAM,IAAI,GAAG,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;YAE9D,MAAM,OAAO,GAA4B;gBACvC,GAAG,EAAE,IAAA,mBAAa,EAAC,IAAI,CAAC;gBACxB,KAAK,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM;aAC3B,CAAC;YAEF,MAAM,CAAC,OAAO,GAAG,IAAA,aAAG,EAAC,IAAY,EAAE,OAAO,CAAC,CAAC;YAC5C,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAC1C,CAAC;QACD,MAAM,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAA0B;YAC/C,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAC1C,CAAC;QACD,OAAO,CAAC,EAAE,EAAE,MAA0B;YACpC,MAAM,CAAC,MAAM,CAAC,sBAAsB,EAAE,CAAC;YACvC,MAAM,CAAC,OAAO,EAAE,CAAC;YACjB,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC;QAC5B,CAAC;KACF,CAAC,CAAC;IAEH,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;IAC9B,OAAO,OAAO,CAAC;AACjB,CAAC;AAlCD,0CAkCC"}

package/lib/create.d.ts

@@ -1,14 +1,10 @@
 import type { PiralPlugin } from 'piral-core';
+import { CycleConverterOptions } from './converter';
 import type { PiletCycleApi } from './types';
 /**
  * Available configuration options for the Cycle.js plugin.
  */
-export interface CycleConfig {
-    /**
-     * The tag name of the root element into which a CycleExtension is rendered.
-     * @default slot
-     */
-    rootName?: string;
+export interface CycleConfig extends CycleConverterOptions {
 }
 /**
  * Creates new Pilet API extensions for integration of Cycle.

package/lib/create.js

@@ -1,25 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createCycleApi = void 0;
-const extension_1 = require("./extension");
 const converter_1 = require("./converter");
 /**
  * Creates new Pilet API extensions for integration of Cycle.
  */
 function createCycleApi(config = {}) {
-    const { rootName } = config;
     return (context) => {
-        const convert = converter_1.createConverter();
+        const convert = (0, converter_1.createConverter)(config);
         context.converters.cycle = ({ root }) => convert(root);
-        return (api) => ({
+        return {
             fromCycle(root) {
                 return {
                     type: 'cycle',
                     root,
                 };
             },
-            CycleExtension: extension_1.createExtension(api, rootName),
-        });
+            CycleExtension: convert.Extension,
+        };
     };
 }
 exports.createCycleApi = createCycleApi;

package/lib/create.js.map

@@ -1 +1 @@
-{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":";;;AACA,2CAA8C;AAC9C,2CAA8C;AAc9C;;GAEG;AACH,SAAgB,cAAc,CAAC,SAAsB,EAAE;IACrD,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC;IAE5B,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,MAAM,OAAO,GAAG,2BAAe,EAAE,CAAC;QAClC,OAAO,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAEvD,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;YACf,SAAS,CAAC,IAAI;gBACZ,OAAO;oBACL,IAAI,EAAE,OAAO;oBACb,IAAI;iBACL,CAAC;YACJ,CAAC;YACD,cAAc,EAAE,2BAAe,CAAC,GAAG,EAAE,QAAQ,CAAC;SAC/C,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC;AAjBD,wCAiBC"}
+{"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

@@ -1,6 +1,6 @@
 import { VNode } from '@cycle/dom';
-import type { PiletApi, ExtensionSlotProps } from 'piral-core';
+import type { ExtensionSlotProps } from 'piral-core';
 export interface CycleExtension {
     (props: ExtensionSlotProps<unknown>): VNode;
 }
-export declare function createExtension(api: PiletApi, rootName?: string): CycleExtension;
+export declare function createExtension(rootName: string): CycleExtension;

package/lib/extension.js

@@ -2,12 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createExtension = void 0;
 const dom_1 = require("@cycle/dom");
-function createExtension(api, rootName = 'slot') {
-    return (props) => dom_1.h(rootName, {
+function createExtension(rootName) {
+    return (props) => (0, dom_1.h)(rootName, {
         hook: {
             insert: (vnode) => {
                 if (vnode.elm instanceof HTMLElement) {
-                    api.renderHtmlExtension(vnode.elm, props);
+                    vnode.elm.dispatchEvent(new CustomEvent('render-html', {
+                        bubbles: true,
+                        detail: {
+                            target: vnode.elm,
+                            props,
+                        },
+                    }));
                 }
             },
         },

package/lib/extension.js.map

@@ -1 +1 @@
-{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":";;;AAAA,oCAAsC;AAOtC,SAAgB,eAAe,CAAC,GAAa,EAAE,QAAQ,GAAG,MAAM;IAC9D,OAAO,CAAC,KAAK,EAAE,EAAE,CACf,OAAC,CAAC,QAAQ,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;gBAChB,IAAI,KAAK,CAAC,GAAG,YAAY,WAAW,EAAE;oBACpC,GAAG,CAAC,mBAAmB,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;iBAC3C;YACH,CAAC;SACF;KACF,CAAC,CAAC;AACP,CAAC;AAXD,0CAWC"}
+{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":";;;AAAA,oCAAsC;AAOtC,SAAgB,eAAe,CAAC,QAAgB;IAC9C,OAAO,CAAC,KAAK,EAAE,EAAE,CACf,IAAA,OAAC,EAAC,QAAQ,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;gBAChB,IAAI,KAAK,CAAC,GAAG,YAAY,WAAW,EAAE;oBACpC,KAAK,CAAC,GAAG,CAAC,aAAa,CACrB,IAAI,WAAW,CAAC,aAAa,EAAE;wBAC7B,OAAO,EAAE,IAAI;wBACb,MAAM,EAAE;4BACN,MAAM,EAAE,KAAK,CAAC,GAAG;4BACjB,KAAK;yBACN;qBACF,CAAC,CACH,CAAC;iBACH;YACH,CAAC;SACF;KACF,CAAC,CAAC;AACP,CAAC;AAnBD,0CAmBC"}

package/lib/types.d.ts

@@ -1,7 +1,7 @@
-import { Stream } from 'xstream';
-import { Driver, Drivers, MatchingMain, Main } from '@cycle/run';
-import { MainDOMSource, VNode } from '@cycle/dom';
-import { ForeignComponent, ExtensionSlotProps } from 'piral-core';
+import type { Stream } from 'xstream';
+import type { Driver, Drivers, MatchingMain, Main } from '@cycle/run';
+import type { MainDOMSource, VNode } from '@cycle/dom';
+import type { ForeignComponent, ExtensionSlotProps } from 'piral-core';
 declare module 'piral-core/lib/types/custom' {
     interface PiletCustomApi extends PiletCycleApi {
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-cycle",
-  "version": "1.0.0-pre.2108",
+  "version": "1.0.0",
   "description": "Plugin for integrating Cycle.js components in Piral.",
   "keywords": [
     "piral",
@@ -19,13 +19,32 @@
   "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.ts",
     "convert.js"
   ],
   "repository": {
@@ -36,8 +55,9 @@
     "url": "https://github.com/smapiot/piral/issues"
   },
   "scripts": {
+    "cleanup": "rimraf esm lib convert.d.ts convert.js",
     "build": "yarn build:commonjs && yarn build:esnext && yarn build:convert",
-    "build:convert": "tsc convert.ts --skipLibCheck --declaration",
+    "build:convert": "tsc convert.ts --skipLibCheck --declaration --module esnext",
     "build:commonjs": "tsc --project tsconfig.json --outDir lib --module commonjs",
     "build:esnext": "tsc --project tsconfig.json --outDir esm --module esnext",
     "typedoc": "typedoc --json ../../../docs/types/piral-cycle.json src --exclude \"src/**/*.test.*\"",
@@ -46,14 +66,13 @@
   "devDependencies": {
     "@cycle/dom": "^22.7.0",
     "@cycle/run": "^5.4.0",
-    "piral-core": "^1.0.0-pre.2108",
+    "piral-core": "^1.0.0",
     "xstream": "^11.12.0"
   },
   "peerDependencies": {
     "@cycle/dom": "^22.0.0",
     "@cycle/run": "^5.0.0",
-    "piral-core": "1.x",
     "xstream": "^11.0.0"
   },
-  "gitHead": "ef3c6274568822db4b8ccc95297254d05b0c7c0c"
+  "gitHead": "67d9a2920bd5231baf10bc87ae8985666b18fa3a"
 }

package/src/converter.ts

@@ -1,39 +1,55 @@
-import { BaseComponentProps, ForeignComponent } from 'piral-core';
+import type { BaseComponentProps, ForeignComponent } from 'piral-core';
 import { makeDOMDriver } from '@cycle/dom';
 import run, { MatchingMain, Main } from '@cycle/run';
-import xs from 'xstream';
-import { PiralDomDrivers } from './types';
+import xs, { Stream } from 'xstream';
+import { createExtension } from './extension';
+import type { PiralDomDrivers } from './types';
 
-export function createConverter() {
-  return <TProps extends BaseComponentProps, M extends MatchingMain<PiralDomDrivers<TProps>, M>>(
+export interface CycleConverterOptions {
+  /**
+   * The tag name of the root element into which a CycleExtension is rendered.
+   * @default piral-slot
+   */
+  rootName?: string;
+}
+
+interface CycleState<TProps> {
+  props$: Stream<TProps>;
+  dispose(): void;
+}
+
+export function createConverter(config: CycleConverterOptions = {}) {
+  const { rootName = 'piral-slot' } = config;
+  const Extension = createExtension(rootName);
+  const convert = <TProps extends BaseComponentProps, M extends MatchingMain<PiralDomDrivers<TProps>, M>>(
     main: M,
-  ): ForeignComponent<TProps> => {
-    const props$ = xs.create<TProps>();
-    let dispose = () => {};
+  ): ForeignComponent<TProps> => ({
+    mount(el, props, ctx, locals: CycleState<TProps>) {
+      locals.props$ = xs.create<TProps>();
+
+      // The Cycle DOM element is not directly rendered into parent, but into a nested container.
+      // This is done because Cycle "erases" information on the host element. If parent was used,
+      // Piral related properties like data-portal-id could be removed, leading to things not working.
+      const host = el.appendChild(document.createElement(rootName));
 
-    return {
-      mount(parent, props) {
-        // The Cycle DOM element is not directly rendered into parent, but into a nested container.
-        // This is done because Cycle "erases" information on the host element. If parent was used,
-        // Piral related properties like data-portal-id could be removed, leading to things not working.
-        const host = document.createElement('slot');
-        parent.appendChild(host);
+      const drivers: PiralDomDrivers<TProps> = {
+        DOM: makeDOMDriver(host),
+        props: () => locals.props$,
+      };
 
-        const drivers: PiralDomDrivers<TProps> = {
-          DOM: makeDOMDriver(host),
-          props: () => props$,
-        };
+      locals.dispose = run(main as Main, drivers);
+      locals.props$.shamefullySendNext(props);
+    },
+    update(el, props, ctx, locals: CycleState<TProps>) {
+      locals.props$.shamefullySendNext(props);
+    },
+    unmount(el, locals: CycleState<TProps>) {
+      locals.props$.shamefullySendComplete();
+      locals.dispose();
+      locals.props$ = undefined;
+    },
+  });
 
-        dispose = run(main as Main, drivers);
-        props$.shamefullySendNext(props);
-      },
-      update(_, props) {
-        props$.shamefullySendNext(props);
-      },
-      unmount() {
-        props$.shamefullySendComplete();
-        dispose();
-      },
-    };
-  };
+  convert.Extension = Extension;
+  return convert;
 }

package/src/create.ts

@@ -1,37 +1,28 @@
 import type { PiralPlugin } from 'piral-core';
-import { createExtension } from './extension';
-import { createConverter } from './converter';
+import { createConverter, CycleConverterOptions } from './converter';
 import type { PiletCycleApi } from './types';
 
 /**
  * Available configuration options for the Cycle.js plugin.
  */
-export interface CycleConfig {
-  /**
-   * The tag name of the root element into which a CycleExtension is rendered.
-   * @default slot
-   */
-  rootName?: string;
-}
+export interface CycleConfig extends CycleConverterOptions {}
 
 /**
  * Creates new Pilet API extensions for integration of Cycle.
  */
 export function createCycleApi(config: CycleConfig = {}): PiralPlugin<PiletCycleApi> {
-  const { rootName } = config;
-
   return (context) => {
-    const convert = createConverter();
+    const convert = createConverter(config);
     context.converters.cycle = ({ root }) => convert(root);
 
-    return (api) => ({
+    return {
       fromCycle(root) {
         return {
           type: 'cycle',
           root,
         };
       },
-      CycleExtension: createExtension(api, rootName),
-    });
+      CycleExtension: convert.Extension,
+    };
   };
 }

package/src/extension.ts

@@ -1,17 +1,25 @@
 import { h, VNode } from '@cycle/dom';
-import type { PiletApi, ExtensionSlotProps } from 'piral-core';
+import type { ExtensionSlotProps } from 'piral-core';
 
 export interface CycleExtension {
   (props: ExtensionSlotProps<unknown>): VNode;
 }
 
-export function createExtension(api: PiletApi, rootName = 'slot'): CycleExtension {
+export function createExtension(rootName: string): CycleExtension {
   return (props) =>
     h(rootName, {
       hook: {
         insert: (vnode) => {
           if (vnode.elm instanceof HTMLElement) {
-            api.renderHtmlExtension(vnode.elm, props);
+            vnode.elm.dispatchEvent(
+              new CustomEvent('render-html', {
+                bubbles: true,
+                detail: {
+                  target: vnode.elm,
+                  props,
+                },
+              }),
+            );
           }
         },
       },

package/src/types.ts

@@ -1,7 +1,7 @@
-import { Stream } from 'xstream';
-import { Driver, Drivers, MatchingMain, Main } from '@cycle/run';
-import { MainDOMSource, VNode } from '@cycle/dom';
-import { ForeignComponent, ExtensionSlotProps } from 'piral-core';
+import type { Stream } from 'xstream';
+import type { Driver, Drivers, MatchingMain, Main } from '@cycle/run';
+import type { MainDOMSource, VNode } from '@cycle/dom';
+import type { ForeignComponent, ExtensionSlotProps } from 'piral-core';
 
 declare module 'piral-core/lib/types/custom' {
   interface PiletCustomApi extends PiletCycleApi {}

package/convert.ts

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