piral-ngjs 1.0.0-pre.2036 → 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 NgJS](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-ngjs.svg?style=flat)](https://www.npmjs.com/package/piral-ngjs) [![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 NgJS](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-ngjs.svg?style=flat)](https://www.npmjs.com/package/piral-ngjs) [![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-ngjs` 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 `angular`. What `piral-ngjs` brings to the table is a set of Pilet API extensions that can be used with `piral` or `piral-core`.
 
 The set includes an Angular.js converter for any component registration, as well as a `fromNgjs` shortcut and a `NgjsExtension` component.
 
@@ -48,7 +48,7 @@ Alternatively, if `piral-ngjs` has not been added to the Piral instance you can
 
 ```ts
 import { PiletApi } from '<name-of-piral-instance>';
-import { fromNgjs, createNgjsExtension } from 'piral-ngjs';
+import { fromNgjs, createNgjsExtension } from 'piral-ngjs/convert';
 import { createAngularJsPage } from './AngularJsPage';
 
 export function setup(piral: PiletApi) {
@@ -62,7 +62,7 @@ export function setup(piral: PiletApi) {
 
 ::: summary: For Piral instance developers
 
-The provided library only brings API extensions for pilets to a Piral instance. The Piral instance still needs to be configured properly to support Angular.js 1.x.
+The provided library only brings API extensions for pilets to a Piral instance. The Piral instance still needs to be configured properly to support Angular.js 1.x. For this you'll need to install the `angular@^1.7` package.
 
 For the setup itself you'll need to import `createNgjsApi` from the `piral-ngjs` package.
 
@@ -84,10 +84,10 @@ The `angular` package should be shared with the pilets via the *package.json*:
 
 ```json
 {
-  "pilets": {
-    "externals": [
-      "angular"
-    ]
+  "importmap": {
+    "imports": {
+      "angular": ""
+    }
   }
 }
 ```

package/convert.d.ts

@@ -1,10 +1,19 @@
 /// <reference types="angular" />
-import type { HtmlComponent } from 'piral-core';
-import { createExtension } from './lib/extension';
-declare const convert: <TProps extends import("piral-core").BaseComponentProps>(name: string, root: import("angular").IModule) => 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 NgjsConverter {
-    (...params: Parameters<typeof convert>): HtmlComponent<any>;
+    (...params: Parameters<ReturnType<typeof createConverter>>): HtmlComponent<any>;
 }
-export declare const fromNgjs: NgjsConverter;
-export declare const createNgjsExtension: typeof createExtension;
-export {};
+export declare function createNgjsConverter(...params: Parameters<typeof createConverter>): {
+    from: NgjsConverter;
+    Extension: import("angular").IModule;
+};
+declare const fromNgjs: NgjsConverter, NgjsExtension: import("angular").IModule;
+export { fromNgjs, NgjsExtension };

package/convert.js

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

package/esm/converter.d.ts

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

package/esm/converter.js

@@ -0,0 +1,23 @@
+import { bootstrap } from 'angular';
+import { createExtension } from './extension';
+export function createConverter(config = {}) {
+    const { rootName = 'piral-slot' } = config;
+    const Extension = createExtension(rootName);
+    const convert = (name, root) => ({
+        mount(el, props, ctx, locals) {
+            el.appendChild(document.createElement(name));
+            root.value('props', props);
+            root.value('piral', props.piral);
+            root.value('ctx', ctx);
+            locals.injector = bootstrap(el, [root.name]);
+        },
+        unmount(el, locals) {
+            const rootScope = locals.injector.get('$rootScope');
+            rootScope.$destroy();
+            locals.injector = undefined;
+        },
+    });
+    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,SAAS,EAAW,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAc9C,MAAM,UAAU,eAAe,CAAC,SAA+B,EAAE;IAC/D,MAAM,EAAE,QAAQ,GAAG,YAAY,EAAE,GAAG,MAAM,CAAC;IAC3C,MAAM,SAAS,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,CAAoC,IAAY,EAAE,IAAa,EAA4B,EAAE,CAAC,CAAC;QAC7G,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAiB;YACrC,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;YAC7C,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;YAC3B,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;YACjC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;YACvB,MAAM,CAAC,QAAQ,GAAG,SAAS,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC/C,CAAC;QACD,OAAO,CAAC,EAAE,EAAE,MAAiB;YAC3B,MAAM,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;YACpD,SAAS,CAAC,QAAQ,EAAE,CAAC;YACrB,MAAM,CAAC,QAAQ,GAAG,SAAS,CAAC;QAC9B,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 { NgjsConverterOptions } from './converter';
+import type { PiletNgjsApi } from './types';
+/**
+ * Available configuration options for the Angular.js plugin.
+ */
+export interface NgjsConfig extends NgjsConverterOptions {
+}
+/**
+ * Creates the Pilet API extensions for Angular.js.
+ */
+export declare function createNgjsApi(config?: NgjsConfig): PiralPlugin<PiletNgjsApi>;

package/esm/create.js

@@ -0,0 +1,21 @@
+import { createConverter } from './converter';
+/**
+ * Creates the Pilet API extensions for Angular.js.
+ */
+export function createNgjsApi(config = {}) {
+    return (context) => {
+        const convert = createConverter(config);
+        context.converters.ngjs = ({ name, root }) => convert(name, root);
+        return {
+            NgjsExtension: convert.Extension,
+            fromNgjs(name, root) {
+                return {
+                    type: 'ngjs',
+                    name,
+                    root,
+                };
+            },
+        };
+    };
+}
+//# 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,EAAwB,MAAM,aAAa,CAAC;AAQpE;;GAEG;AACH,MAAM,UAAU,aAAa,CAAC,SAAqB,EAAE;IACnD,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,MAAM,OAAO,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;QACxC,OAAO,CAAC,UAAU,CAAC,IAAI,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAElE,OAAO;YACL,aAAa,EAAE,OAAO,CAAC,SAAS;YAChC,QAAQ,CAAC,IAAI,EAAE,IAAI;gBACjB,OAAO;oBACL,IAAI,EAAE,MAAM;oBACZ,IAAI;oBACJ,IAAI;iBACL,CAAC;YACJ,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}

package/esm/extension.d.ts

@@ -0,0 +1,2 @@
+import * as angular from 'angular';
+export declare function createExtension(rootName: string): angular.IModule;

package/esm/extension.js

@@ -0,0 +1,30 @@
+import * as angular from 'angular';
+export function createExtension(rootName) {
+    const NgjsExtension = angular.module(`piralExtension`, []);
+    NgjsExtension.component('extensionComponent', {
+        template: `<${rootName}></${rootName}>`,
+        bindings: {
+            empty: '<',
+            params: '<',
+            render: '<',
+            name: '@',
+        },
+        controller: [
+            '$element',
+            'piral',
+            function ($element, piral) {
+                this.$onInit = () => {
+                    const container = $element[0].querySelector(rootName);
+                    piral.renderHtmlExtension(container, {
+                        empty: this.empty,
+                        params: this.params,
+                        render: this.render,
+                        name: this.name,
+                    });
+                };
+            },
+        ],
+    });
+    return NgjsExtension;
+}
+//# sourceMappingURL=extension.js.map

package/esm/extension.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,SAAS,CAAC;AAEnC,MAAM,UAAU,eAAe,CAAC,QAAgB;IAC9C,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;IAC3D,aAAa,CAAC,SAAS,CAAC,oBAAoB,EAAE;QAC5C,QAAQ,EAAE,IAAI,QAAQ,MAAM,QAAQ,GAAG;QACvC,QAAQ,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,GAAG;YACX,IAAI,EAAE,GAAG;SACV;QACD,UAAU,EAAE;YACV,UAAU;YACV,OAAO;YACP,UAAU,QAAQ,EAAE,KAAK;gBACvB,IAAI,CAAC,OAAO,GAAG,GAAG,EAAE;oBAClB,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;oBACtD,KAAK,CAAC,mBAAmB,CAAC,SAAS,EAAE;wBACnC,KAAK,EAAE,IAAI,CAAC,KAAK;wBACjB,MAAM,EAAE,IAAI,CAAC,MAAM;wBACnB,MAAM,EAAE,IAAI,CAAC,MAAM;wBACnB,IAAI,EAAE,IAAI,CAAC,IAAI;qBAChB,CAAC,CAAC;gBACL,CAAC,CAAC;YACJ,CAAC;SACF;KACF,CAAC,CAAC;IACH,OAAO,aAAa,CAAC;AACvB,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/types.d.ts

@@ -0,0 +1,39 @@
+import type { IModule } from 'angular';
+import type { ForeignComponent } from 'piral-core';
+declare module 'piral-core/lib/types/custom' {
+    interface PiletCustomApi extends PiletNgjsApi {
+    }
+    interface PiralCustomComponentConverters<TProps> {
+        ngjs(component: NgjsComponent): ForeignComponent<TProps>;
+    }
+}
+export interface NgjsComponent {
+    /**
+     * The module root.
+     */
+    root: IModule;
+    /**
+     * The name of the component.
+     */
+    name: string;
+    /**
+     * The type of the Angular.js component.
+     */
+    type: 'ngjs';
+}
+/**
+ * Defines the provided set of Angular Pilet API extensions.
+ */
+export interface PiletNgjsApi {
+    /**
+     * Wraps an Angular.js module for use in Piral.
+     * @param name The name of the component.
+     * @param root The module root.
+     * @returns The Piral Ngjs component.
+     */
+    fromNgjs(name: string, root: IModule): NgjsComponent;
+    /**
+     * Angular.js component for displaying extensions of the given name.
+     */
+    NgjsExtension: IModule;
+}

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 type { ForeignComponent, BaseComponentProps } from 'piral-core';
 import { IModule } from 'angular';
-import { ForeignComponent, BaseComponentProps } from 'piral-core';
-export declare function createConverter(): <TProps extends BaseComponentProps>(name: string, root: IModule) => ForeignComponent<TProps>;
+export interface NgjsConverterOptions {
+    /**
+     * Defines the name of the root element.
+     * @default piral-slot
+     */
+    rootName?: string;
+}
+export declare function createConverter(config?: NgjsConverterOptions): {
+    <TProps extends BaseComponentProps>(name: string, root: IModule): ForeignComponent<TProps>;
+    Extension: IModule;
+};

package/lib/converter.js

@@ -1,25 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createConverter = void 0;
-var angular_1 = require("angular");
-function createConverter() {
-    var convert = function (name, root) {
-        var injector = undefined;
-        return {
-            mount: function (el, props, ctx) {
-                el.appendChild(document.createElement(name));
-                root.value('props', props);
-                root.value('piral', props.piral);
-                root.value('ctx', ctx);
-                injector = angular_1.bootstrap(el, [root.name]);
-            },
-            unmount: function (el) {
-                var rootScope = injector.get('$rootScope');
-                rootScope.$destroy();
-                injector = undefined;
-            },
-        };
-    };
+const angular_1 = require("angular");
+const extension_1 = require("./extension");
+function createConverter(config = {}) {
+    const { rootName = 'piral-slot' } = config;
+    const Extension = (0, extension_1.createExtension)(rootName);
+    const convert = (name, root) => ({
+        mount(el, props, ctx, locals) {
+            el.appendChild(document.createElement(name));
+            root.value('props', props);
+            root.value('piral', props.piral);
+            root.value('ctx', ctx);
+            locals.injector = (0, angular_1.bootstrap)(el, [root.name]);
+        },
+        unmount(el, locals) {
+            const rootScope = locals.injector.get('$rootScope');
+            rootScope.$destroy();
+            locals.injector = undefined;
+        },
+    });
+    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":";;;AAAA,mCAA6C;AAG7C,SAAgB,eAAe;IAC7B,IAAM,OAAO,GAAG,UAAoC,IAAY,EAAE,IAAa;QAC7E,IAAI,QAAQ,GAAQ,SAAS,CAAC;QAE9B,OAAO;YACL,KAAK,YAAC,EAAE,EAAE,KAAK,EAAE,GAAG;gBAClB,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;gBAC7C,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;gBAC3B,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;gBACjC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;gBACvB,QAAQ,GAAG,mBAAS,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YACxC,CAAC;YACD,OAAO,YAAC,EAAE;gBACR,IAAM,SAAS,GAAG,QAAQ,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;gBAC7C,SAAS,CAAC,QAAQ,EAAE,CAAC;gBACrB,QAAQ,GAAG,SAAS,CAAC;YACvB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;IACF,OAAO,OAAO,CAAC;AACjB,CAAC;AApBD,0CAoBC"}
+{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":";;;AACA,qCAA6C;AAC7C,2CAA8C;AAc9C,SAAgB,eAAe,CAAC,SAA+B,EAAE;IAC/D,MAAM,EAAE,QAAQ,GAAG,YAAY,EAAE,GAAG,MAAM,CAAC;IAC3C,MAAM,SAAS,GAAG,IAAA,2BAAe,EAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,CAAoC,IAAY,EAAE,IAAa,EAA4B,EAAE,CAAC,CAAC;QAC7G,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAiB;YACrC,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;YAC7C,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;YAC3B,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;YACjC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;YACvB,MAAM,CAAC,QAAQ,GAAG,IAAA,mBAAS,EAAC,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC/C,CAAC;QACD,OAAO,CAAC,EAAE,EAAE,MAAiB;YAC3B,MAAM,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;YACpD,SAAS,CAAC,QAAQ,EAAE,CAAC;YACrB,MAAM,CAAC,QAAQ,GAAG,SAAS,CAAC;QAC9B,CAAC;KACF,CAAC,CAAC;IACH,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;IAC9B,OAAO,OAAO,CAAC;AACjB,CAAC;AAnBD,0CAmBC"}

package/lib/create.d.ts

@@ -1,14 +1,10 @@
-import { PiralPlugin } from 'piral-core';
-import { PiletNgjsApi } from './types';
+import type { PiralPlugin } from 'piral-core';
+import { NgjsConverterOptions } from './converter';
+import type { PiletNgjsApi } from './types';
 /**
  * Available configuration options for the Angular.js plugin.
  */
-export interface NgjsConfig {
-    /**
-     * Defines the name of the root element.
-     * @default slot
-     */
-    rootName?: string;
+export interface NgjsConfig extends NgjsConverterOptions {
 }
 /**
  * Creates the Pilet API extensions for Angular.js.

package/lib/create.js

@@ -1,28 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createNgjsApi = void 0;
-var converter_1 = require("./converter");
-var extension_1 = require("./extension");
+const converter_1 = require("./converter");
 /**
  * Creates the Pilet API extensions for Angular.js.
  */
-function createNgjsApi(config) {
-    if (config === void 0) { config = {}; }
-    var rootName = config.rootName;
-    var NgjsExtension = extension_1.createExtension(rootName);
-    return function (context) {
-        var convert = converter_1.createConverter();
-        context.converters.ngjs = function (_a) {
-            var name = _a.name, root = _a.root;
-            return convert(name, root);
-        };
+function createNgjsApi(config = {}) {
+    return (context) => {
+        const convert = (0, converter_1.createConverter)(config);
+        context.converters.ngjs = ({ name, root }) => convert(name, root);
         return {
-            NgjsExtension: NgjsExtension,
-            fromNgjs: function (name, root) {
+            NgjsExtension: convert.Extension,
+            fromNgjs(name, root) {
                 return {
                     type: 'ngjs',
-                    name: name,
-                    root: root,
+                    name,
+                    root,
                 };
             },
         };

package/lib/create.js.map

@@ -1 +1 @@
-{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":";;;AACA,yCAA8C;AAE9C,yCAA8C;AAa9C;;GAEG;AACH,SAAgB,aAAa,CAAC,MAAuB;IAAvB,uBAAA,EAAA,WAAuB;IAC3C,IAAA,QAAQ,GAAK,MAAM,SAAX,CAAY;IAC5B,IAAM,aAAa,GAAG,2BAAe,CAAC,QAAQ,CAAC,CAAC;IAEhD,OAAO,UAAC,OAAO;QACb,IAAM,OAAO,GAAG,2BAAe,EAAE,CAAC;QAClC,OAAO,CAAC,UAAU,CAAC,IAAI,GAAG,UAAC,EAAc;gBAAZ,IAAI,UAAA,EAAE,IAAI,UAAA;YAAO,OAAA,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC;QAAnB,CAAmB,CAAC;QAElE,OAAO;YACL,aAAa,eAAA;YACb,QAAQ,YAAC,IAAI,EAAE,IAAI;gBACjB,OAAO;oBACL,IAAI,EAAE,MAAM;oBACZ,IAAI,MAAA;oBACJ,IAAI,MAAA;iBACL,CAAC;YACJ,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAnBD,sCAmBC"}
+{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":";;;AACA,2CAAoE;AAQpE;;GAEG;AACH,SAAgB,aAAa,CAAC,SAAqB,EAAE;IACnD,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,MAAM,OAAO,GAAG,IAAA,2BAAe,EAAC,MAAM,CAAC,CAAC;QACxC,OAAO,CAAC,UAAU,CAAC,IAAI,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAElE,OAAO;YACL,aAAa,EAAE,OAAO,CAAC,SAAS;YAChC,QAAQ,CAAC,IAAI,EAAE,IAAI;gBACjB,OAAO;oBACL,IAAI,EAAE,MAAM;oBACZ,IAAI;oBACJ,IAAI;iBACL,CAAC;YACJ,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAhBD,sCAgBC"}

package/lib/extension.d.ts

@@ -1,2 +1,2 @@
 import * as angular from 'angular';
-export declare function createExtension(rootName?: string): angular.IModule;
+export declare function createExtension(rootName: string): angular.IModule;

package/lib/extension.js

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createExtension = void 0;
-var angular = require("angular");
+const angular = require("angular");
 function createExtension(rootName) {
-    if (rootName === void 0) { rootName = 'slot'; }
-    var NgjsExtension = angular.module("piralExtension", []);
+    const NgjsExtension = angular.module(`piralExtension`, []);
     NgjsExtension.component('extensionComponent', {
-        template: "<" + rootName + "></" + rootName + ">",
+        template: `<${rootName}></${rootName}>`,
         bindings: {
             empty: '<',
             params: '<',
@@ -17,14 +16,13 @@ function createExtension(rootName) {
             '$element',
             'piral',
             function ($element, piral) {
-                var _this = this;
-                this.$onInit = function () {
-                    var container = $element[0].querySelector(rootName);
+                this.$onInit = () => {
+                    const container = $element[0].querySelector(rootName);
                     piral.renderHtmlExtension(container, {
-                        empty: _this.empty,
-                        params: _this.params,
-                        render: _this.render,
-                        name: _this.name,
+                        empty: this.empty,
+                        params: this.params,
+                        render: this.render,
+                        name: this.name,
                     });
                 };
             },

package/lib/extension.js.map

@@ -1 +1 @@
-{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":";;;AAAA,iCAAmC;AAEnC,SAAgB,eAAe,CAAC,QAAiB;IAAjB,yBAAA,EAAA,iBAAiB;IAC/C,IAAM,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;IAC3D,aAAa,CAAC,SAAS,CAAC,oBAAoB,EAAE;QAC5C,QAAQ,EAAE,MAAI,QAAQ,WAAM,QAAQ,MAAG;QACvC,QAAQ,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,GAAG;YACX,IAAI,EAAE,GAAG;SACV;QACD,UAAU,EAAE;YACV,UAAU;YACV,OAAO;YACP,UAAU,QAAQ,EAAE,KAAK;gBAAzB,iBAUC;gBATC,IAAI,CAAC,OAAO,GAAG;oBACb,IAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;oBACtD,KAAK,CAAC,mBAAmB,CAAC,SAAS,EAAE;wBACnC,KAAK,EAAE,KAAI,CAAC,KAAK;wBACjB,MAAM,EAAE,KAAI,CAAC,MAAM;wBACnB,MAAM,EAAE,KAAI,CAAC,MAAM;wBACnB,IAAI,EAAE,KAAI,CAAC,IAAI;qBAChB,CAAC,CAAC;gBACL,CAAC,CAAC;YACJ,CAAC;SACF;KACF,CAAC,CAAC;IACH,OAAO,aAAa,CAAC;AACvB,CAAC;AA3BD,0CA2BC"}
+{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":";;;AAAA,mCAAmC;AAEnC,SAAgB,eAAe,CAAC,QAAgB;IAC9C,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;IAC3D,aAAa,CAAC,SAAS,CAAC,oBAAoB,EAAE;QAC5C,QAAQ,EAAE,IAAI,QAAQ,MAAM,QAAQ,GAAG;QACvC,QAAQ,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,GAAG;YACX,IAAI,EAAE,GAAG;SACV;QACD,UAAU,EAAE;YACV,UAAU;YACV,OAAO;YACP,UAAU,QAAQ,EAAE,KAAK;gBACvB,IAAI,CAAC,OAAO,GAAG,GAAG,EAAE;oBAClB,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;oBACtD,KAAK,CAAC,mBAAmB,CAAC,SAAS,EAAE;wBACnC,KAAK,EAAE,IAAI,CAAC,KAAK;wBACjB,MAAM,EAAE,IAAI,CAAC,MAAM;wBACnB,MAAM,EAAE,IAAI,CAAC,MAAM;wBACnB,IAAI,EAAE,IAAI,CAAC,IAAI;qBAChB,CAAC,CAAC;gBACL,CAAC,CAAC;YACJ,CAAC;SACF;KACF,CAAC,CAAC;IACH,OAAO,aAAa,CAAC;AACvB,CAAC;AA3BD,0CA2BC"}

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-ngjs",
-  "version": "1.0.0-pre.2036",
+  "version": "1.0.1-beta.5640",
   "description": "Plugin for integrating Angular.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-ngjs.json src --exclude \"src/**/*.test.*\"",
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "devDependencies": {
     "@types/angular": "^1.6.45",
     "angular": "^1.7.9",
-    "piral-core": "^1.0.0-pre.2036"
-  },
-  "peerDependencies": {
-    "angular": "^1.7.0",
-    "piral-core": "1.x"
+    "piral-core": "1.0.1-beta.5640"
   },
-  "gitHead": "117e562b48802cdd4ddc5e9e6d42e91fa170daed"
+  "gitHead": "fa0a72b28fd0a20afec7ef491ec19e93c090fc72"
 }

package/src/converter.ts

@@ -1,24 +1,36 @@
+import type { ForeignComponent, BaseComponentProps } from 'piral-core';
 import { bootstrap, IModule } from 'angular';
-import { ForeignComponent, BaseComponentProps } from 'piral-core';
+import { createExtension } from './extension';
 
-export function createConverter() {
-  const convert = <TProps extends BaseComponentProps>(name: string, root: IModule): ForeignComponent<TProps> => {
-    let injector: any = undefined;
+export interface NgjsConverterOptions {
+  /**
+   * Defines the name of the root element.
+   * @default piral-slot
+   */
+  rootName?: string;
+}
+
+interface NgjsState {
+  injector: any;
+}
 
-    return {
-      mount(el, props, ctx) {
-        el.appendChild(document.createElement(name));
-        root.value('props', props);
-        root.value('piral', props.piral);
-        root.value('ctx', ctx);
-        injector = bootstrap(el, [root.name]);
-      },
-      unmount(el) {
-        const rootScope = injector.get('$rootScope');
-        rootScope.$destroy();
-        injector = undefined;
-      },
-    };
-  };
+export function createConverter(config: NgjsConverterOptions = {}) {
+  const { rootName = 'piral-slot' } = config;
+  const Extension = createExtension(rootName);
+  const convert = <TProps extends BaseComponentProps>(name: string, root: IModule): ForeignComponent<TProps> => ({
+    mount(el, props, ctx, locals: NgjsState) {
+      el.appendChild(document.createElement(name));
+      root.value('props', props);
+      root.value('piral', props.piral);
+      root.value('ctx', ctx);
+      locals.injector = bootstrap(el, [root.name]);
+    },
+    unmount(el, locals: NgjsState) {
+      const rootScope = locals.injector.get('$rootScope');
+      rootScope.$destroy();
+      locals.injector = undefined;
+    },
+  });
+  convert.Extension = Extension;
   return convert;
 }

package/src/create.ts

@@ -1,32 +1,22 @@
-import { PiralPlugin } from 'piral-core';
-import { createConverter } from './converter';
-import { PiletNgjsApi } from './types';
-import { createExtension } from './extension';
+import type { PiralPlugin } from 'piral-core';
+import { createConverter, NgjsConverterOptions } from './converter';
+import type { PiletNgjsApi } from './types';
 
 /**
  * Available configuration options for the Angular.js plugin.
  */
-export interface NgjsConfig {
-  /**
-   * Defines the name of the root element.
-   * @default slot
-   */
-  rootName?: string;
-}
+export interface NgjsConfig extends NgjsConverterOptions {}
 
 /**
  * Creates the Pilet API extensions for Angular.js.
  */
 export function createNgjsApi(config: NgjsConfig = {}): PiralPlugin<PiletNgjsApi> {
-  const { rootName } = config;
-  const NgjsExtension = createExtension(rootName);
-
   return (context) => {
-    const convert = createConverter();
+    const convert = createConverter(config);
     context.converters.ngjs = ({ name, root }) => convert(name, root);
 
     return {
-      NgjsExtension,
+      NgjsExtension: convert.Extension,
       fromNgjs(name, root) {
         return {
           type: 'ngjs',

package/src/extension.ts

@@ -1,6 +1,6 @@
 import * as angular from 'angular';
 
-export function createExtension(rootName = 'slot'): angular.IModule {
+export function createExtension(rootName: string): angular.IModule {
   const NgjsExtension = angular.module(`piralExtension`, []);
   NgjsExtension.component('extensionComponent', {
     template: `<${rootName}></${rootName}>`,

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 NgjsConverter {
-  (...params: Parameters<typeof convert>): HtmlComponent<any>;
-}
-
-export const fromNgjs: NgjsConverter = (name, root) => ({
-  type: 'html',
-  component: convert(name, root),
-});
-
-export const createNgjsExtension = createExtension;