piral-ember 1.0.0-pre.2098 → 1.0.1-beta.5640

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 Ember](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-ember.svg?style=flat)](https://www.npmjs.com/package/piral-ember) [![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 Ember](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-ember.svg?style=flat)](https://www.npmjs.com/package/piral-ember) [![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-ember` 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 `ember-source`. What `piral-ember` brings to the table is a set of Pilet API extensions that can be used with `piral` or `piral-core`.
 
 The set includes an Ember.js converter for any component registration, as well as a `fromEmber` shortcut and a `EmberExtension` component.
 
@@ -16,10 +16,6 @@ The following functions are brought to the Pilet API.
 
 Transforms a standard Ember.js component into a component that can be used in Piral, essentially wrapping it with a reference to the corresponding converter.
 
-### `EmberExtension`
-
-(tbd)
-
 ## Usage
 
 ::: summary: For pilet authors
@@ -47,7 +43,7 @@ Alternatively, if `piral-ember` has not been added to the Piral instance you can
 
 ```ts
 import { PiletApi } from '<name-of-piral-instance>';
-import { fromEmber } from 'piral-ember';
+import { fromEmber } from 'piral-ember/convert';
 import { Page } from './Page';
 
 export function setup(piral: PiletApi) {
@@ -59,7 +55,7 @@ export function setup(piral: PiletApi) {
 
 ::: summary: For Piral instance developers
 
-Using Ember.js with Piral is as simple as installing `piral-ember` and `ember-source`.
+Using Ember.js with Piral is as simple as installing `piral-ember` and `ember-source@^3`.
 
 ```ts
 import { createEmberApi } from 'piral-ember';

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>(App: import("./lib/types").EmberModule<TProps>, opts: any) => 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 EmberConverter {
-    (...params: Parameters<typeof convert>): HtmlComponent<any>;
+    (...params: Parameters<ReturnType<typeof createConverter>>): HtmlComponent<any>;
 }
-export declare const fromEmber: EmberConverter;
-export declare const createEmberExtension: typeof createExtension;
-export {};
+export declare function createEmberConverter(...params: Parameters<typeof createConverter>): {
+    from: EmberConverter;
+    Extension: string;
+};
+declare const fromEmber: EmberConverter, EmberExtension: string;
+export { fromEmber, EmberExtension };

package/convert.js

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

package/esm/converter.d.ts

@@ -0,0 +1,13 @@
+import type { ForeignComponent, BaseComponentProps } from 'piral-core';
+import type { EmberModule } from './types';
+export interface EmberConverterOptions {
+    /**
+     * Defines the name of the extension component.
+     * @default ember-extension
+     */
+    selector?: string;
+}
+export declare function createConverter(config?: EmberConverterOptions): {
+    <TProps extends BaseComponentProps>(App: EmberModule<TProps>, opts: any): ForeignComponent<TProps>;
+    Extension: string;
+};

package/esm/converter.js

@@ -0,0 +1,26 @@
+import { createExtension } from './extension';
+export function createConverter(config = {}) {
+    const { selector = 'ember-extension' } = config;
+    const Extension = createExtension(selector);
+    const convert = (App, opts) => ({
+        mount(rootElement, props, ctx, locals) {
+            locals.app = App.create(Object.assign(Object.assign({}, opts), { rootElement,
+                props,
+                ctx }));
+        },
+        update(rootElement, props, ctx, locals) {
+            locals.app.setProperties({
+                props,
+                ctx,
+            });
+        },
+        unmount(rootElement, locals) {
+            locals.app.destroy();
+            locals.app = undefined;
+            rootElement.innerHTML = '';
+        },
+    });
+    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":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAe9C,MAAM,UAAU,eAAe,CAAC,SAAgC,EAAE;IAChE,MAAM,EAAE,QAAQ,GAAG,iBAAiB,EAAE,GAAG,MAAM,CAAC;IAEhD,MAAM,SAAS,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IAE5C,MAAM,OAAO,GAAG,CACd,GAAwB,EACxB,IAAS,EACiB,EAAE,CAAC,CAAC;QAC9B,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,GAAG,EAAE,MAA0B;YACvD,MAAM,CAAC,GAAG,GAAG,GAAG,CAAC,MAAM,iCAClB,IAAI,KACP,WAAW;gBACX,KAAK;gBACL,GAAG,IACH,CAAC;QACL,CAAC;QACD,MAAM,CAAC,WAAW,EAAE,KAAK,EAAE,GAAG,EAAE,MAA0B;YACxD,MAAM,CAAC,GAAG,CAAC,aAAa,CAAC;gBACvB,KAAK;gBACL,GAAG;aACJ,CAAC,CAAC;QACL,CAAC;QACD,OAAO,CAAC,WAAW,EAAE,MAA0B;YAC7C,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;YACrB,MAAM,CAAC,GAAG,GAAG,SAAS,CAAC;YACvB,WAAW,CAAC,SAAS,GAAG,EAAE,CAAC;QAC7B,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 { EmberConverterOptions } from './converter';
+import type { PiletEmberApi } from './types';
+/**
+ * Available configuration options for the Ember.js plugin.
+ */
+export interface EmberConfig extends EmberConverterOptions {
+}
+/**
+ * Creates Pilet API extensions for integrating Ember.js.
+ */
+export declare function createEmberApi(config?: EmberConfig): PiralPlugin<PiletEmberApi>;

package/esm/create.js

@@ -0,0 +1,23 @@
+import { loadEmberApp } from './load';
+import { createConverter } from './converter';
+/**
+ * Creates Pilet API extensions for integrating Ember.js.
+ */
+export function createEmberApi(config = {}) {
+    return (context) => {
+        const convert = createConverter(config);
+        context.converters.ember = ({ App, opts }) => convert(App, opts);
+        return {
+            fromEmber(App, opts) {
+                return {
+                    type: 'ember',
+                    App,
+                    opts,
+                };
+            },
+            loadEmberApp,
+            EmberExtension: 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,YAAY,EAAE,MAAM,QAAQ,CAAC;AACtC,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,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QAEjE,OAAO;YACL,SAAS,CAAC,GAAG,EAAE,IAAI;gBACjB,OAAO;oBACL,IAAI,EAAE,OAAO;oBACb,GAAG;oBACH,IAAI;iBACL,CAAC;YACJ,CAAC;YACD,YAAY;YACZ,cAAc,EAAE,OAAO,CAAC,SAAS;SAClC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}

package/esm/extension.d.ts

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

package/esm/extension.js

@@ -0,0 +1,11 @@
+export function createExtension(selector) {
+    const defaultExtensionSelector = 'piral-extension';
+    if ('customElements' in window && selector && selector !== defaultExtensionSelector) {
+        const ExtensionBase = customElements.get(defaultExtensionSelector);
+        class AliasExtension extends ExtensionBase {
+        }
+        customElements.define(selector, AliasExtension);
+    }
+    return selector || defaultExtensionSelector;
+}
+//# 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,MAAM,UAAU,eAAe,CAAC,QAAgB;IAC9C,MAAM,wBAAwB,GAAG,iBAAiB,CAAC;IAEnD,IAAI,gBAAgB,IAAI,MAAM,IAAI,QAAQ,IAAI,QAAQ,KAAK,wBAAwB,EAAE;QACnF,MAAM,aAAa,GAAG,cAAc,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;QACnE,MAAM,cAAe,SAAQ,aAAa;SAAG;QAC7C,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;KACjD;IAED,OAAO,QAAQ,IAAI,wBAAwB,CAAC;AAC9C,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/load.d.ts

@@ -0,0 +1 @@
+export declare function loadEmberApp(appName: string, appUrl: string, vendorUrl?: string): Promise<any>;

package/esm/load.js

@@ -0,0 +1,26 @@
+export function loadEmberApp(appName, appUrl, vendorUrl) {
+    return new Promise((resolve, reject) => {
+        if (vendorUrl) {
+            const scriptVendor = document.createElement('script');
+            scriptVendor.src = vendorUrl;
+            scriptVendor.async = true;
+            scriptVendor.onload = loadApp;
+            scriptVendor.onerror = reject;
+            document.head.appendChild(scriptVendor);
+        }
+        else {
+            loadApp();
+        }
+        function loadApp() {
+            const scriptEl = document.createElement('script');
+            scriptEl.src = appUrl;
+            scriptEl.async = true;
+            scriptEl.onload = () => {
+                resolve(window.require(appName + '/app'));
+            };
+            scriptEl.onerror = reject;
+            document.head.appendChild(scriptEl);
+        }
+    });
+}
+//# sourceMappingURL=load.js.map

package/esm/load.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"load.js","sourceRoot":"","sources":["../src/load.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,YAAY,CAAC,OAAe,EAAE,MAAc,EAAE,SAAkB;IAC9E,OAAO,IAAI,OAAO,CAAM,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;QAC1C,IAAI,SAAS,EAAE;YACb,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YACtD,YAAY,CAAC,GAAG,GAAG,SAAS,CAAC;YAC7B,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC;YAC1B,YAAY,CAAC,MAAM,GAAG,OAAO,CAAC;YAC9B,YAAY,CAAC,OAAO,GAAG,MAAM,CAAC;YAC9B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;SACzC;aAAM;YACL,OAAO,EAAE,CAAC;SACX;QAED,SAAS,OAAO;YACd,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAClD,QAAQ,CAAC,GAAG,GAAG,MAAM,CAAC;YACtB,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC;YACtB,QAAQ,CAAC,MAAM,GAAG,GAAG,EAAE;gBACrB,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC;YAC5C,CAAC,CAAC;YACF,QAAQ,CAAC,OAAO,GAAG,MAAM,CAAC;YAC1B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QACtC,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC"}

package/esm/types.d.ts

@@ -0,0 +1,57 @@
+import type { ForeignComponent } from 'piral-core';
+declare module 'piral-core/lib/types/custom' {
+    interface PiletCustomApi extends PiletEmberApi {
+    }
+    interface PiralCustomComponentConverters<TProps> {
+        ember(component: PiralEmberComponent<TProps>): ForeignComponent<TProps>;
+    }
+}
+export interface EmberOptions<TProps> {
+    props: TProps;
+    ctx: any;
+}
+export interface EmberInstance<TProps> {
+    setProperties(opts: EmberOptions<TProps>): void;
+    destroy(): void;
+}
+export interface EmberModule<TProps> {
+    create(opts: EmberOptions<TProps>): EmberInstance<TProps>;
+}
+export interface PiralEmberComponent<TProps> {
+    /**
+     * The Ember.js component App.
+     */
+    App: EmberModule<TProps>;
+    /**
+     * The Ember.js component options.
+     */
+    opts: any;
+    /**
+     * The type of the Ember.js component.
+     */
+    type: 'ember';
+}
+/**
+ * Defines the provided set of Pilet API extensions from the Ember.js plugin.
+ */
+export interface PiletEmberApi {
+    /**
+     * Loads an ember application via it's URLs.
+     * @param appName The name of the ember application.
+     * @param appUrl The URL of the main ember application.
+     * @param vendorUrl The optional URL of the (shared) ember vendor bundle.
+     * @returns The promise resolving to the loaded ember application.
+     */
+    loadEmberApp<T = any>(appName: string, appUrl: string, vendorUrl?: string): Promise<T>;
+    /**
+     * Wraps an Emberjs component for use in Piral.
+     * @param App The component root.
+     * @param opts The component options.
+     * @returns The Piral Ember.js component.
+     */
+    fromEmber<TProps>(App: EmberModule<TProps>, opts: any): PiralEmberComponent<TProps>;
+    /**
+     * Gets the name of the Ember.js extension.
+     */
+    EmberExtension: string;
+}

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

@@ -1,3 +1,13 @@
-import { ForeignComponent, BaseComponentProps } from 'piral-core';
-import { EmberModule } from './types';
-export declare function createConverter(): <TProps extends BaseComponentProps>(App: EmberModule<TProps>, opts: any) => ForeignComponent<TProps>;
+import type { ForeignComponent, BaseComponentProps } from 'piral-core';
+import type { EmberModule } from './types';
+export interface EmberConverterOptions {
+    /**
+     * Defines the name of the extension component.
+     * @default ember-extension
+     */
+    selector?: string;
+}
+export declare function createConverter(config?: EmberConverterOptions): {
+    <TProps extends BaseComponentProps>(App: EmberModule<TProps>, opts: any): ForeignComponent<TProps>;
+    Extension: string;
+};

package/lib/converter.js

@@ -1,33 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createConverter = void 0;
-var tslib_1 = require("tslib");
-function createConverter() {
-    var convert = function (App, opts) {
-        var app = undefined;
-        return {
-            mount: function (rootElement, props, ctx) {
-                rootElement.addEventListener('render-html', function (ev) {
-                    var piral = props.piral;
-                    piral.renderHtmlExtension(ev.detail.target, ev.detail.props);
-                }, false);
-                app = App.create(tslib_1.__assign(tslib_1.__assign({}, opts), { rootElement: rootElement,
-                    props: props,
-                    ctx: ctx }));
-            },
-            update: function (_, props, ctx) {
-                app.setProperties({
-                    props: props,
-                    ctx: ctx,
-                });
-            },
-            unmount: function (rootElement) {
-                app.destroy();
-                app = undefined;
-                rootElement.innerHTML = '';
-            },
-        };
-    };
+const extension_1 = require("./extension");
+function createConverter(config = {}) {
+    const { selector = 'ember-extension' } = config;
+    const Extension = (0, extension_1.createExtension)(selector);
+    const convert = (App, opts) => ({
+        mount(rootElement, props, ctx, locals) {
+            locals.app = App.create(Object.assign(Object.assign({}, opts), { rootElement,
+                props,
+                ctx }));
+        },
+        update(rootElement, props, ctx, locals) {
+            locals.app.setProperties({
+                props,
+                ctx,
+            });
+        },
+        unmount(rootElement, locals) {
+            locals.app.destroy();
+            locals.app = undefined;
+            rootElement.innerHTML = '';
+        },
+    });
+    convert.Extension = Extension;
     return convert;
 }
 exports.createConverter = createConverter;

package/lib/converter.js.map

@@ -1 +1 @@
-{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":";;;;AAGA,SAAgB,eAAe;IAC7B,IAAM,OAAO,GAAG,UACd,GAAwB,EACxB,IAAS;QAET,IAAI,GAAG,GAA0B,SAAS,CAAC;QAE3C,OAAO;YACL,KAAK,EAAL,UAAM,WAAW,EAAE,KAAK,EAAE,GAAG;gBAC3B,WAAW,CAAC,gBAAgB,CAC1B,aAAa,EACb,UAAC,EAAe;oBACN,IAAA,KAAK,GAAK,KAAK,MAAV,CAAW;oBACxB,KAAK,CAAC,mBAAmB,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBAC/D,CAAC,EACD,KAAK,CACN,CAAC;gBACF,GAAG,GAAG,GAAG,CAAC,MAAM,uCACX,IAAI,KACP,WAAW,aAAA;oBACX,KAAK,OAAA;oBACL,GAAG,KAAA,IACH,CAAC;YACL,CAAC;YACD,MAAM,YAAC,CAAC,EAAE,KAAK,EAAE,GAAG;gBAClB,GAAG,CAAC,aAAa,CAAC;oBAChB,KAAK,OAAA;oBACL,GAAG,KAAA;iBACJ,CAAC,CAAC;YACL,CAAC;YACD,OAAO,YAAC,WAAW;gBACjB,GAAG,CAAC,OAAO,EAAE,CAAC;gBACd,GAAG,GAAG,SAAS,CAAC;gBAChB,WAAW,CAAC,SAAS,GAAG,EAAE,CAAC;YAC7B,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;IACF,OAAO,OAAO,CAAC;AACjB,CAAC;AAtCD,0CAsCC"}
+{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":";;;AACA,2CAA8C;AAe9C,SAAgB,eAAe,CAAC,SAAgC,EAAE;IAChE,MAAM,EAAE,QAAQ,GAAG,iBAAiB,EAAE,GAAG,MAAM,CAAC;IAEhD,MAAM,SAAS,GAAG,IAAA,2BAAe,EAAC,QAAQ,CAAC,CAAC;IAE5C,MAAM,OAAO,GAAG,CACd,GAAwB,EACxB,IAAS,EACiB,EAAE,CAAC,CAAC;QAC9B,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,GAAG,EAAE,MAA0B;YACvD,MAAM,CAAC,GAAG,GAAG,GAAG,CAAC,MAAM,iCAClB,IAAI,KACP,WAAW;gBACX,KAAK;gBACL,GAAG,IACH,CAAC;QACL,CAAC;QACD,MAAM,CAAC,WAAW,EAAE,KAAK,EAAE,GAAG,EAAE,MAA0B;YACxD,MAAM,CAAC,GAAG,CAAC,aAAa,CAAC;gBACvB,KAAK;gBACL,GAAG;aACJ,CAAC,CAAC;QACL,CAAC;QACD,OAAO,CAAC,WAAW,EAAE,MAA0B;YAC7C,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;YACrB,MAAM,CAAC,GAAG,GAAG,SAAS,CAAC;YACvB,WAAW,CAAC,SAAS,GAAG,EAAE,CAAC;QAC7B,CAAC;KACF,CAAC,CAAC;IACH,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;IAC9B,OAAO,OAAO,CAAC;AACjB,CAAC;AA/BD,0CA+BC"}

package/lib/create.d.ts

@@ -1,14 +1,10 @@
 import type { PiralPlugin } from 'piral-core';
+import { EmberConverterOptions } from './converter';
 import type { PiletEmberApi } from './types';
 /**
  * Available configuration options for the Ember.js plugin.
  */
-export interface EmberConfig {
-    /**
-     * Defines the name of the extension component.
-     * @default ember-extension
-     */
-    selector?: string;
+export interface EmberConfig extends EmberConverterOptions {
 }
 /**
  * Creates Pilet API extensions for integrating Ember.js.

package/lib/create.js

@@ -1,32 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createEmberApi = void 0;
-var load_1 = require("./load");
-var converter_1 = require("./converter");
-var extension_1 = require("./extension");
+const load_1 = require("./load");
+const converter_1 = require("./converter");
 /**
  * Creates Pilet API extensions for integrating Ember.js.
  */
-function createEmberApi(config) {
-    if (config === void 0) { config = {}; }
-    var selector = config.selector;
-    return function (context) {
-        var convert = converter_1.createConverter();
-        context.converters.ember = function (_a) {
-            var App = _a.App, opts = _a.opts;
-            return convert(App, opts);
-        };
-        extension_1.createExtension(selector);
+function createEmberApi(config = {}) {
+    return (context) => {
+        const convert = (0, converter_1.createConverter)(config);
+        context.converters.ember = ({ App, opts }) => convert(App, opts);
         return {
-            fromEmber: function (App, opts) {
+            fromEmber(App, opts) {
                 return {
                     type: 'ember',
-                    App: App,
-                    opts: opts,
+                    App,
+                    opts,
                 };
             },
             loadEmberApp: load_1.loadEmberApp,
-            EmberExtension: selector,
+            EmberExtension: convert.Extension,
         };
     };
 }

package/lib/create.js.map

@@ -1 +1 @@
-{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":";;;AACA,+BAAsC;AACtC,yCAA8C;AAC9C,yCAA8C;AAc9C;;GAEG;AACH,SAAgB,cAAc,CAAC,MAAwB;IAAxB,uBAAA,EAAA,WAAwB;IAC7C,IAAA,QAAQ,GAAK,MAAM,SAAX,CAAY;IAE5B,OAAO,UAAC,OAAO;QACb,IAAM,OAAO,GAAG,2BAAe,EAAE,CAAC;QAClC,OAAO,CAAC,UAAU,CAAC,KAAK,GAAG,UAAC,EAAa;gBAAX,GAAG,SAAA,EAAE,IAAI,UAAA;YAAO,OAAA,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC;QAAlB,CAAkB,CAAC;QAEjE,2BAAe,CAAC,QAAQ,CAAC,CAAC;QAE1B,OAAO;YACL,SAAS,YAAC,GAAG,EAAE,IAAI;gBACjB,OAAO;oBACL,IAAI,EAAE,OAAO;oBACb,GAAG,KAAA;oBACH,IAAI,MAAA;iBACL,CAAC;YACJ,CAAC;YACD,YAAY,qBAAA;YACZ,cAAc,EAAE,QAAQ;SACzB,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AArBD,wCAqBC"}
+{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":";;;AACA,iCAAsC;AACtC,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,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QAEjE,OAAO;YACL,SAAS,CAAC,GAAG,EAAE,IAAI;gBACjB,OAAO;oBACL,IAAI,EAAE,OAAO;oBACb,GAAG;oBACH,IAAI;iBACL,CAAC;YACJ,CAAC;YACD,YAAY,EAAZ,mBAAY;YACZ,cAAc,EAAE,OAAO,CAAC,SAAS;SAClC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAjBD,wCAiBC"}

package/lib/extension.d.ts

@@ -1 +1 @@
-export declare function createExtension(selector?: string): void;
+export declare function createExtension(selector: string): string;

package/lib/extension.js

@@ -1,32 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createExtension = void 0;
-var tslib_1 = require("tslib");
 function createExtension(selector) {
-    if (selector === void 0) { selector = 'ember-extension'; }
-    if ('customElements' in window) {
-        var EmberExtension = /** @class */ (function (_super) {
-            tslib_1.__extends(EmberExtension, _super);
-            function EmberExtension() {
-                return _super !== null && _super.apply(this, arguments) || this;
-            }
-            EmberExtension.prototype.connectedCallback = function () {
-                if (this.isConnected) {
-                    this.dispatchEvent(new CustomEvent('render-html', {
-                        bubbles: true,
-                        detail: {
-                            target: this,
-                            props: {
-                                name: this.getAttribute('name'),
-                            },
-                        },
-                    }));
-                }
-            };
-            return EmberExtension;
-        }(HTMLElement));
-        customElements.define(selector, EmberExtension);
+    const defaultExtensionSelector = 'piral-extension';
+    if ('customElements' in window && selector && selector !== defaultExtensionSelector) {
+        const ExtensionBase = customElements.get(defaultExtensionSelector);
+        class AliasExtension extends ExtensionBase {
+        }
+        customElements.define(selector, AliasExtension);
     }
+    return selector || defaultExtensionSelector;
 }
 exports.createExtension = createExtension;
 //# sourceMappingURL=extension.js.map

package/lib/extension.js.map

@@ -1 +1 @@
-{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":";;;;AAAA,SAAgB,eAAe,CAAC,QAA4B;IAA5B,yBAAA,EAAA,4BAA4B;IAC1D,IAAI,gBAAgB,IAAI,MAAM,EAAE;QAC9B;YAA6B,0CAAW;YAAxC;;YAgBA,CAAC;YAfC,0CAAiB,GAAjB;gBACE,IAAI,IAAI,CAAC,WAAW,EAAE;oBACpB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;wBAC7B,OAAO,EAAE,IAAI;wBACb,MAAM,EAAE;4BACN,MAAM,EAAE,IAAI;4BACZ,KAAK,EAAE;gCACL,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;6BAChC;yBACF;qBACF,CAAC,CACH,CAAC;iBACH;YACH,CAAC;YACH,qBAAC;QAAD,CAAC,AAhBD,CAA6B,WAAW,GAgBvC;QAED,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;KACjD;AACH,CAAC;AAtBD,0CAsBC"}
+{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":";;;AAAA,SAAgB,eAAe,CAAC,QAAgB;IAC9C,MAAM,wBAAwB,GAAG,iBAAiB,CAAC;IAEnD,IAAI,gBAAgB,IAAI,MAAM,IAAI,QAAQ,IAAI,QAAQ,KAAK,wBAAwB,EAAE;QACnF,MAAM,aAAa,GAAG,cAAc,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;QACnE,MAAM,cAAe,SAAQ,aAAa;SAAG;QAC7C,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;KACjD;IAED,OAAO,QAAQ,IAAI,wBAAwB,CAAC;AAC9C,CAAC;AAVD,0CAUC"}

package/lib/index.js

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

package/lib/load.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadEmberApp = void 0;
 function loadEmberApp(appName, appUrl, vendorUrl) {
-    return new Promise(function (resolve, reject) {
+    return new Promise((resolve, reject) => {
         if (vendorUrl) {
-            var scriptVendor = document.createElement('script');
+            const scriptVendor = document.createElement('script');
             scriptVendor.src = vendorUrl;
             scriptVendor.async = true;
             scriptVendor.onload = loadApp;
@@ -15,10 +15,10 @@ function loadEmberApp(appName, appUrl, vendorUrl) {
             loadApp();
         }
         function loadApp() {
-            var scriptEl = document.createElement('script');
+            const scriptEl = document.createElement('script');
             scriptEl.src = appUrl;
             scriptEl.async = true;
-            scriptEl.onload = function () {
+            scriptEl.onload = () => {
                 resolve(window.require(appName + '/app'));
             };
             scriptEl.onerror = reject;

package/lib/load.js.map

@@ -1 +1 @@
-{"version":3,"file":"load.js","sourceRoot":"","sources":["../src/load.ts"],"names":[],"mappings":";;;AAAA,SAAgB,YAAY,CAAC,OAAe,EAAE,MAAc,EAAE,SAAkB;IAC9E,OAAO,IAAI,OAAO,CAAM,UAAC,OAAO,EAAE,MAAM;QACtC,IAAI,SAAS,EAAE;YACb,IAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YACtD,YAAY,CAAC,GAAG,GAAG,SAAS,CAAC;YAC7B,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC;YAC1B,YAAY,CAAC,MAAM,GAAG,OAAO,CAAC;YAC9B,YAAY,CAAC,OAAO,GAAG,MAAM,CAAC;YAC9B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;SACzC;aAAM;YACL,OAAO,EAAE,CAAC;SACX;QAED,SAAS,OAAO;YACd,IAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAClD,QAAQ,CAAC,GAAG,GAAG,MAAM,CAAC;YACtB,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC;YACtB,QAAQ,CAAC,MAAM,GAAG;gBAChB,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC;YAC5C,CAAC,CAAC;YACF,QAAQ,CAAC,OAAO,GAAG,MAAM,CAAC;YAC1B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QACtC,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC;AAxBD,oCAwBC"}
+{"version":3,"file":"load.js","sourceRoot":"","sources":["../src/load.ts"],"names":[],"mappings":";;;AAAA,SAAgB,YAAY,CAAC,OAAe,EAAE,MAAc,EAAE,SAAkB;IAC9E,OAAO,IAAI,OAAO,CAAM,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;QAC1C,IAAI,SAAS,EAAE;YACb,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YACtD,YAAY,CAAC,GAAG,GAAG,SAAS,CAAC;YAC7B,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC;YAC1B,YAAY,CAAC,MAAM,GAAG,OAAO,CAAC;YAC9B,YAAY,CAAC,OAAO,GAAG,MAAM,CAAC;YAC9B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;SACzC;aAAM;YACL,OAAO,EAAE,CAAC;SACX;QAED,SAAS,OAAO;YACd,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAClD,QAAQ,CAAC,GAAG,GAAG,MAAM,CAAC;YACtB,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC;YACtB,QAAQ,CAAC,MAAM,GAAG,GAAG,EAAE;gBACrB,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC;YAC5C,CAAC,CAAC;YACF,QAAQ,CAAC,OAAO,GAAG,MAAM,CAAC;YAC1B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QACtC,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC;AAxBD,oCAwBC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-ember",
-  "version": "1.0.0-pre.2098",
+  "version": "1.0.1-beta.5640",
   "description": "Plugin for integrating Ember.js components in Piral.",
   "keywords": [
     "piral",
@@ -16,14 +16,35 @@
   "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.ts",
     "convert.js"
   ],
   "repository": {
@@ -34,18 +55,18 @@
     "url": "https://github.com/smapiot/piral/issues"
   },
   "scripts": {
-    "build": "tsc && tsc convert.ts --skipLibCheck --declaration",
+    "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-ember.json src --exclude \"src/**/*.test.*\"",
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "devDependencies": {
     "@types/ember": "^3.1.1",
     "ember-source": "^3.15.0",
-    "piral-core": "^1.0.0-pre.2098"
-  },
-  "peerDependencies": {
-    "ember-source": "^3.0.0",
-    "piral-core": "1.x"
+    "piral-core": "1.0.1-beta.5640"
   },
-  "gitHead": "cbb7df31a4361db11c2c250a37ca8f2c610539fc"
+  "gitHead": "fa0a72b28fd0a20afec7ef491ec19e93c090fc72"
 }

package/src/converter.ts

@@ -1,42 +1,48 @@
-import { ForeignComponent, BaseComponentProps } from 'piral-core';
-import { EmberInstance, EmberModule } from './types';
+import type { ForeignComponent, BaseComponentProps } from 'piral-core';
+import { createExtension } from './extension';
+import type { EmberInstance, EmberModule } from './types';
+
+export interface EmberConverterOptions {
+  /**
+   * Defines the name of the extension component.
+   * @default ember-extension
+   */
+  selector?: string;
+}
+
+interface EmberState<TProps> {
+  app: EmberInstance<TProps>;
+}
+
+export function createConverter(config: EmberConverterOptions = {}) {
+  const { selector = 'ember-extension' } = config;
+
+  const Extension = createExtension(selector);
 
-export function createConverter() {
   const convert = <TProps extends BaseComponentProps>(
     App: EmberModule<TProps>,
     opts: any,
-  ): ForeignComponent<TProps> => {
-    let app: EmberInstance<TProps> = undefined;
-
-    return {
-      mount(rootElement, props, ctx) {
-        rootElement.addEventListener(
-          'render-html',
-          (ev: CustomEvent) => {
-            const { piral } = props;
-            piral.renderHtmlExtension(ev.detail.target, ev.detail.props);
-          },
-          false,
-        );
-        app = App.create({
-          ...opts,
-          rootElement,
-          props,
-          ctx,
-        });
-      },
-      update(_, props, ctx) {
-        app.setProperties({
-          props,
-          ctx,
-        });
-      },
-      unmount(rootElement) {
-        app.destroy();
-        app = undefined;
-        rootElement.innerHTML = '';
-      },
-    };
-  };
+  ): ForeignComponent<TProps> => ({
+    mount(rootElement, props, ctx, locals: EmberState<TProps>) {
+      locals.app = App.create({
+        ...opts,
+        rootElement,
+        props,
+        ctx,
+      });
+    },
+    update(rootElement, props, ctx, locals: EmberState<TProps>) {
+      locals.app.setProperties({
+        props,
+        ctx,
+      });
+    },
+    unmount(rootElement, locals: EmberState<TProps>) {
+      locals.app.destroy();
+      locals.app = undefined;
+      rootElement.innerHTML = '';
+    },
+  });
+  convert.Extension = Extension;
   return convert;
 }

package/src/create.ts

@@ -1,32 +1,21 @@
 import type { PiralPlugin } from 'piral-core';
 import { loadEmberApp } from './load';
-import { createConverter } from './converter';
-import { createExtension } from './extension';
+import { createConverter, EmberConverterOptions } from './converter';
 import type { PiletEmberApi } from './types';
 
 /**
  * Available configuration options for the Ember.js plugin.
  */
-export interface EmberConfig {
-  /**
-   * Defines the name of the extension component.
-   * @default ember-extension
-   */
-  selector?: string;
-}
+export interface EmberConfig extends EmberConverterOptions {}
 
 /**
  * Creates Pilet API extensions for integrating Ember.js.
  */
 export function createEmberApi(config: EmberConfig = {}): PiralPlugin<PiletEmberApi> {
-  const { selector } = config;
-
   return (context) => {
-    const convert = createConverter();
+    const convert = createConverter(config);
     context.converters.ember = ({ App, opts }) => convert(App, opts);
 
-    createExtension(selector);
-
     return {
       fromEmber(App, opts) {
         return {
@@ -36,7 +25,7 @@ export function createEmberApi(config: EmberConfig = {}): PiralPlugin<PiletEmber
         };
       },
       loadEmberApp,
-      EmberExtension: selector,
+      EmberExtension: convert.Extension,
     };
   };
 }

package/src/extension.ts

@@ -1,23 +1,11 @@
-export function createExtension(selector = 'ember-extension') {
-  if ('customElements' in window) {
-    class EmberExtension extends HTMLElement {
-      connectedCallback() {
-        if (this.isConnected) {
-          this.dispatchEvent(
-            new CustomEvent('render-html', {
-              bubbles: true,
-              detail: {
-                target: this,
-                props: {
-                  name: this.getAttribute('name'),
-                },
-              },
-            }),
-          );
-        }
-      }
-    }
+export function createExtension(selector: string) {
+  const defaultExtensionSelector = 'piral-extension';
 
-    customElements.define(selector, EmberExtension);
+  if ('customElements' in window && selector && selector !== defaultExtensionSelector) {
+    const ExtensionBase = customElements.get(defaultExtensionSelector);
+    class AliasExtension extends ExtensionBase {}
+    customElements.define(selector, AliasExtension);
   }
+
+  return selector || defaultExtensionSelector;
 }

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 EmberConverter {
-  (...params: Parameters<typeof convert>): HtmlComponent<any>;
-}
-
-export const fromEmber: EmberConverter = (App, opts) => ({
-  type: 'html',
-  component: convert(App, opts),
-});
-
-export const createEmberExtension = createExtension;