piral-lazy 1.0.0-pre.2085 → 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,6 +1,6 @@
-[![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 Lazy](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-lazy.svg?style=flat)](https://www.npmjs.com/package/piral-lazy) [![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 Lazy](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-lazy.svg?style=flat)](https://www.npmjs.com/package/piral-lazy) [![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-lazy` brings to the table is a set of Pilet API extensions that can be used with `piral` or `piral-core`.
 
@@ -8,6 +8,19 @@ The set includes a `fromLazy` shortcut.
 
 By default, these API extensions are not integrated in `piral`, so you'd need to add them to your Piral instance. We recommend integrating `piral-lazy` when you think about an opt-in for *any* third-party framework (e.g., `piral-vue`, `piral-ng`, ...).
 
+## Why and When
+
+Lazy loading of data or other dependencies can be crucial in more complex scenarios. It should not be necessary to include everything in one load to bring a pilet or components of it to live.
+
+`piral-lazy` allows defining generic dependencies that will be loaded *before* loading/using a component. The provided helpers which are exposed via the pilet API give you the power to
+
+1. define new dependencies (given by a unique name and a loader function) and
+2. rely on defined dependencies before actually loading/trying to render a component.
+
+If your pilets use lazy loading in some way then `piral-lazy` may be the right choice. Also, if your pilets are too large and could benefit from further resource sharing and lazy loading then this plugin could be helpful. `piral-lazy` remains framework agnostic and thus works beyond React.
+
+Alternative: Just define/use what is there out of the box. By using `React.lazy` together with bundle splitting most of the things may be already properly transported. Remember that you could also lazy load context that provide your dependencies - thus making `React.lazy` a single solution (if your framework is "React").
+
 ## Documentation
 
 The following functions are brought to the Pilet API.

package/esm/create.d.ts

@@ -0,0 +1,3 @@
+import { PiralPlugin } from 'piral-core';
+import { PiletLazyApi } from './types';
+export declare function createLazyApi(): PiralPlugin<PiletLazyApi>;

package/esm/create.js

@@ -0,0 +1,39 @@
+import { lazy, createElement } from 'react';
+import { withApi } from 'piral-core';
+export function createLazyApi() {
+    return (context) => {
+        return (api) => {
+            const cache = {};
+            const getDependency = (name) => {
+                var _a;
+                const dep = cache[name];
+                if (!dep) {
+                    throw new Error(`The given dependency "${name}" cannot be found. Please add it first using "defineDependency"`);
+                }
+                return (_a = dep.result) !== null && _a !== void 0 ? _a : (dep.result = dep.loader());
+            };
+            return {
+                defineDependency(name, loader) {
+                    cache[name] = {
+                        loader,
+                        result: undefined,
+                    };
+                },
+                fromLazy(load, deps = []) {
+                    return lazy(() => Promise.all(deps.map(getDependency)).then((values) => {
+                        const depMap = deps.reduce((obj, name, index) => {
+                            obj[name] = values[index];
+                            return obj;
+                        }, {});
+                        return load()
+                            .then((comp) => withApi(context, comp, api, 'unknown'))
+                            .then((compWithApi) => ({
+                            default: (props) => createElement(compWithApi, Object.assign({ deps: depMap }, props)),
+                        }));
+                    }));
+                },
+            };
+        };
+    };
+}
+//# sourceMappingURL=create.js.map

package/esm/create.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,aAAa,EAAiB,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAe,OAAO,EAAE,MAAM,YAAY,CAAC;AAUlD,MAAM,UAAU,aAAa;IAC3B,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,OAAO,CAAC,GAAG,EAAE,EAAE;YACb,MAAM,KAAK,GAAoB,EAAE,CAAC;YAElC,MAAM,aAAa,GAAG,CAAC,IAAY,EAAE,EAAE;;gBACrC,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;gBAExB,IAAI,CAAC,GAAG,EAAE;oBACR,MAAM,IAAI,KAAK,CACb,yBAAyB,IAAI,iEAAiE,CAC/F,CAAC;iBACH;gBAED,OAAO,MAAA,GAAG,CAAC,MAAM,mCAAI,CAAC,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC;YACnD,CAAC,CAAC;YAEF,OAAO;gBACL,gBAAgB,CAAC,IAAI,EAAE,MAAM;oBAC3B,KAAK,CAAC,IAAI,CAAC,GAAG;wBACZ,MAAM;wBACN,MAAM,EAAE,SAAS;qBAClB,CAAC;gBACJ,CAAC;gBACD,QAAQ,CAAC,IAAI,EAAE,IAAI,GAAG,EAAE;oBACtB,OAAO,IAAI,CAAC,GAAG,EAAE,CACf,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;wBACnD,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;4BAC9C,GAAG,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;4BAC1B,OAAO,GAAG,CAAC;wBACb,CAAC,EAAE,EAAE,CAAC,CAAC;wBACP,OAAO,IAAI,EAAE;6BACV,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC;6BACtD,IAAI,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;4BACtB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,WAA4B,kBAAI,IAAI,EAAE,MAAM,IAAK,KAAK,EAAG;yBAC5F,CAAC,CAAC,CAAC;oBACR,CAAC,CAAC,CACH,CAAC;gBACJ,CAAC;aACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}

package/esm/index.d.ts

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

package/esm/index.js

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

package/esm/index.js.map

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

package/esm/types.d.ts

@@ -0,0 +1,32 @@
+import type { ComponentType } from 'react';
+import type { AnyComponent, BaseComponentProps } from 'piral-core';
+declare module 'piral-core/lib/types/custom' {
+    interface PiletCustomApi extends PiletLazyApi {
+    }
+}
+export interface LazyComponentLoader<TProps> {
+    (): Promise<AnyComponent<TProps>>;
+}
+export interface LazyDependencyLoader {
+    (): Promise<any>;
+}
+/**
+ * Defines the provided set of lazy loading Pilet API extensions.
+ */
+export interface PiletLazyApi {
+    /**
+     * Defines a dependency for lazy loading.
+     * @param name The name of the dependency.
+     * @param loader The associated dependency loader.
+     */
+    defineDependency(name: string, loader: LazyDependencyLoader): void;
+    /**
+     * Properly introduces a lazy loaded foreign component.
+     * @param cb The callback to trigger when the component should be loaded.
+     * @param deps The optional names of the dependencies to load beforehand.
+     * @returns The lazy loading component.
+     */
+    fromLazy<T extends BaseComponentProps>(cb: LazyComponentLoader<T>, deps?: Array<string>): ComponentType<T & {
+        deps?: Record<string, any>;
+    }>;
+}

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/create.js

@@ -1,33 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createLazyApi = void 0;
-var react_1 = require("react");
-var piral_core_1 = require("piral-core");
+const react_1 = require("react");
+const piral_core_1 = require("piral-core");
 function createLazyApi() {
-    return function (context) {
-        return function (api) {
-            var cache = {};
-            var getDependency = function (name) {
+    return (context) => {
+        return (api) => {
+            const cache = {};
+            const getDependency = (name) => {
                 var _a;
-                var dep = cache[name];
+                const dep = cache[name];
                 if (!dep) {
-                    throw new Error("The given dependency \"" + name + "\" cannot be found. Please add it first using \"defineDependency\"");
+                    throw new Error(`The given dependency "${name}" cannot be found. Please add it first using "defineDependency"`);
                 }
                 return (_a = dep.result) !== null && _a !== void 0 ? _a : (dep.result = dep.loader());
             };
-            var wrapComponent = function (comp) { return ({
-                default: piral_core_1.withApi(context, comp, api, 'unknown'),
-            }); };
             return {
-                defineDependency: function (name, loader) {
+                defineDependency(name, loader) {
                     cache[name] = {
-                        loader: loader,
+                        loader,
                         result: undefined,
                     };
                 },
-                fromLazy: function (load, deps) {
-                    if (deps === void 0) { deps = []; }
-                    return react_1.lazy(function () { return Promise.all(deps.map(getDependency)).then(load).then(wrapComponent); });
+                fromLazy(load, deps = []) {
+                    return (0, react_1.lazy)(() => Promise.all(deps.map(getDependency)).then((values) => {
+                        const depMap = deps.reduce((obj, name, index) => {
+                            obj[name] = values[index];
+                            return obj;
+                        }, {});
+                        return load()
+                            .then((comp) => (0, piral_core_1.withApi)(context, comp, api, 'unknown'))
+                            .then((compWithApi) => ({
+                            default: (props) => (0, react_1.createElement)(compWithApi, Object.assign({ deps: depMap }, props)),
+                        }));
+                    }));
                 },
             };
         };

package/lib/create.js.map

@@ -1 +1 @@
-{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":";;;AAAA,+BAA6B;AAC7B,yCAAiE;AAUjE,SAAgB,aAAa;IAC3B,OAAO,UAAC,OAAO;QACb,OAAO,UAAC,GAAG;YACT,IAAM,KAAK,GAAoB,EAAE,CAAC;YAElC,IAAM,aAAa,GAAG,UAAC,IAAY;;gBACjC,IAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;gBAExB,IAAI,CAAC,GAAG,EAAE;oBACR,MAAM,IAAI,KAAK,CACb,4BAAyB,IAAI,uEAAiE,CAC/F,CAAC;iBACH;gBAED,aAAO,GAAG,CAAC,MAAM,mCAAI,CAAC,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC;YACnD,CAAC,CAAC;YACF,IAAM,aAAa,GAAG,UAAI,IAAsB,IAAK,OAAA,CAAC;gBACpD,OAAO,EAAE,oBAAO,CAAC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,CAAC;aAChD,CAAC,EAFmD,CAEnD,CAAC;YAEH,OAAO;gBACL,gBAAgB,YAAC,IAAI,EAAE,MAAM;oBAC3B,KAAK,CAAC,IAAI,CAAC,GAAG;wBACZ,MAAM,QAAA;wBACN,MAAM,EAAE,SAAS;qBAClB,CAAC;gBACJ,CAAC;gBACD,QAAQ,YAAC,IAAI,EAAE,IAAS;oBAAT,qBAAA,EAAA,SAAS;oBACtB,OAAO,YAAI,CAAC,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,EAAnE,CAAmE,CAAC,CAAC;gBACzF,CAAC;aACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAjCD,sCAiCC"}
+{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":";;;AAAA,iCAA2D;AAC3D,2CAAkD;AAUlD,SAAgB,aAAa;IAC3B,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,OAAO,CAAC,GAAG,EAAE,EAAE;YACb,MAAM,KAAK,GAAoB,EAAE,CAAC;YAElC,MAAM,aAAa,GAAG,CAAC,IAAY,EAAE,EAAE;;gBACrC,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;gBAExB,IAAI,CAAC,GAAG,EAAE;oBACR,MAAM,IAAI,KAAK,CACb,yBAAyB,IAAI,iEAAiE,CAC/F,CAAC;iBACH;gBAED,OAAO,MAAA,GAAG,CAAC,MAAM,mCAAI,CAAC,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC;YACnD,CAAC,CAAC;YAEF,OAAO;gBACL,gBAAgB,CAAC,IAAI,EAAE,MAAM;oBAC3B,KAAK,CAAC,IAAI,CAAC,GAAG;wBACZ,MAAM;wBACN,MAAM,EAAE,SAAS;qBAClB,CAAC;gBACJ,CAAC;gBACD,QAAQ,CAAC,IAAI,EAAE,IAAI,GAAG,EAAE;oBACtB,OAAO,IAAA,YAAI,EAAC,GAAG,EAAE,CACf,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;wBACnD,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;4BAC9C,GAAG,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;4BAC1B,OAAO,GAAG,CAAC;wBACb,CAAC,EAAE,EAAE,CAAC,CAAC;wBACP,OAAO,IAAI,EAAE;6BACV,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAA,oBAAO,EAAC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC;6BACtD,IAAI,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;4BACtB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAA,qBAAa,EAAC,WAA4B,kBAAI,IAAI,EAAE,MAAM,IAAK,KAAK,EAAG;yBAC5F,CAAC,CAAC,CAAC;oBACR,CAAC,CAAC,CACH,CAAC;gBACJ,CAAC;aACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AA1CD,sCA0CC"}

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/types.d.ts

@@ -1,11 +1,11 @@
-import { ComponentType, LazyExoticComponent } from 'react';
-import { FirstParametersOf, ComponentConverters } from 'piral-core';
+import type { ComponentType } from 'react';
+import type { AnyComponent, BaseComponentProps } from 'piral-core';
 declare module 'piral-core/lib/types/custom' {
     interface PiletCustomApi extends PiletLazyApi {
     }
 }
 export interface LazyComponentLoader<TProps> {
-    (): Promise<FirstParametersOf<ComponentConverters<TProps>>>;
+    (): Promise<AnyComponent<TProps>>;
 }
 export interface LazyDependencyLoader {
     (): Promise<any>;
@@ -26,5 +26,7 @@ export interface PiletLazyApi {
      * @param deps The optional names of the dependencies to load beforehand.
      * @returns The lazy loading component.
      */
-    fromLazy<T>(cb: LazyComponentLoader<T>, deps?: Array<string>): LazyExoticComponent<ComponentType<T>>;
+    fromLazy<T extends BaseComponentProps>(cb: LazyComponentLoader<T>, deps?: Array<string>): ComponentType<T & {
+        deps?: Record<string, any>;
+    }>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-lazy",
-  "version": "1.0.0-pre.2085",
+  "version": "1.0.0",
   "description": "Plugin for lazy loading third-party framework components in Piral.",
   "keywords": [
     "piral",
@@ -16,12 +16,32 @@
   "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"
+    },
+    "./esm/*": {
+      "import": "./esm/*"
+    },
+    "./lib/*": {
+      "require": "./lib/*"
+    },
+    "./_/*": {
+      "import": "./esm/*.js",
+      "require": "./lib/*.js"
+    },
+    "./package.json": "./package.json"
+  },
   "sideEffects": false,
   "files": [
+    "esm",
     "lib",
-    "src"
+    "src",
+    "piral-lazy.min.js"
   ],
   "repository": {
     "type": "git",
@@ -31,15 +51,22 @@
     "url": "https://github.com/smapiot/piral/issues"
   },
   "scripts": {
-    "build": "tsc",
+    "cleanup": "rimraf esm lib piral-lazy.min.js",
+    "build": "yarn build:bundle && yarn build:commonjs && yarn build:esnext",
+    "build:bundle": "esbuild src/index.ts --outfile=piral-lazy.min.js --bundle --external:piral-core --external:react --minify --global-name=piralLazy",
+    "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-lazy.json src --exclude \"src/**/*.test.*\"",
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "devDependencies": {
-    "piral-core": "^1.0.0-pre.2085"
+    "@types/react": "^18.0.0",
+    "piral-core": "^1.0.0",
+    "react": "^18.0.0"
   },
   "peerDependencies": {
-    "piral-core": "1.x"
+    "piral-core": "0.14.x || 0.15.x",
+    "react": ">=16.8.0"
   },
-  "gitHead": "140092491c51e02c298804e87070f56c8f6ce0fc"
+  "gitHead": "67d9a2920bd5231baf10bc87ae8985666b18fa3a"
 }

package/piral-lazy.min.js

@@ -0,0 +1 @@
+var piralLazy=(()=>{var D=Object.create;var p=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames,y=Object.getOwnPropertySymbols,C=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable;var s=(e,n,r)=>n in e?p(e,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[n]=r,f=(e,n)=>{for(var r in n||(n={}))l.call(n,r)&&s(e,r,n[r]);if(y)for(var r of y(n))x.call(n,r)&&s(e,r,n[r]);return e};var m=e=>p(e,"__esModule",{value:!0});var h=(e=>typeof require!="undefined"?require:typeof Proxy!="undefined"?new Proxy(e,{get:(n,r)=>(typeof require!="undefined"?require:n)[r]}):e)(function(e){if(typeof require!="undefined")return require.apply(this,arguments);throw new Error('Dynamic require of "'+e+'" is not supported')});var T=(e,n)=>{m(e);for(var r in n)p(e,r,{get:n[r],enumerable:!0})},E=(e,n,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of A(n))!l.call(e,o)&&o!=="default"&&p(e,o,{get:()=>n[o],enumerable:!(r=w(n,o))||r.enumerable});return e},P=e=>E(m(p(e!=null?D(C(e)):{},"default",e&&e.__esModule&&"default"in e?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e);var v={};T(v,{createLazyApi:()=>k});var d=P(h("react")),L=P(h("piral-core"));function k(){return e=>n=>{let r={},o=a=>{var c;let t=r[a];if(!t)throw new Error(`The given dependency "${a}" cannot be found. Please add it first using "defineDependency"`);return(c=t.result)!=null?c:t.result=t.loader()};return{defineDependency(a,t){r[a]={loader:t,result:void 0}},fromLazy(a,t=[]){return(0,d.lazy)(()=>Promise.all(t.map(o)).then(c=>{let g=t.reduce((i,u,z)=>(i[u]=c[z],i),{});return a().then(i=>(0,L.withApi)(e,i,n,"unknown")).then(i=>({default:u=>(0,d.createElement)(i,f({deps:g},u))}))}))}}}}return v;})();

package/src/create.test.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import create from 'zustand';
+import { render, act } from '@testing-library/react';
+import { StateContext } from 'piral-core';
+import { createLazyApi } from './create';
+
+function createMockContainer() {
+  const state = create(() => ({
+    app: {
+      publicPath: '/',
+    },
+    components: {},
+    errorComponents: {},
+    portals: {},
+    registry: {
+      wrappers: {},
+    },
+  }));
+  return {
+    context: {
+      on: jest.fn(),
+      off: jest.fn(),
+      emit: jest.fn(),
+      defineActions() {},
+      state,
+      converters: {
+        html: ({ component }) => component,
+      },
+      navigation: {
+        router: undefined,
+      },
+      readState(read) {
+        return read(state.getState());
+      },
+      destroyPortal() {},
+      dispatch(update) {
+        state.setState(update(state.getState()));
+      },
+    } as any,
+    api: {
+      meta: {
+        name: 'sample-pilet',
+      },
+    } as any,
+  };
+}
+
+describe('Piral-Lazy create module', () => {
+  it('appends lazy loading for a DOM component', async () => {
+    const mount = jest.fn();
+    const MyComponent = { component: { mount }, type: 'html' };
+    const load = async () => await Promise.resolve(MyComponent);
+    const { context, api } = createMockContainer();
+    const apiCreator: any = createLazyApi()(context);
+    const { fromLazy, defineDependency } = apiCreator(api);
+    defineDependency('testName', () => {});
+    const LazyComponent = fromLazy(load, ['testName']);
+    render(
+      <StateContext.Provider value={context}>
+        <React.Suspense fallback="anything">
+          <LazyComponent />
+        </React.Suspense>
+      </StateContext.Provider>,
+    );
+    await act(() => Promise.resolve());
+    expect(LazyComponent).not.toBeUndefined();
+  });
+});

package/src/create.ts

@@ -1,5 +1,5 @@
-import { lazy } from 'react';
-import { PiralPlugin, withApi, HtmlComponent } from 'piral-core';
+import { lazy, createElement, ComponentType } from 'react';
+import { PiralPlugin, withApi } from 'piral-core';
 import { PiletLazyApi, LazyDependencyLoader } from './types';
 
 interface DependencyCache {
@@ -25,9 +25,6 @@ export function createLazyApi(): PiralPlugin<PiletLazyApi> {
 
         return dep.result ?? (dep.result = dep.loader());
       };
-      const wrapComponent = <T>(comp: HtmlComponent<T>) => ({
-        default: withApi(context, comp, api, 'unknown'),
-      });
 
       return {
         defineDependency(name, loader) {
@@ -37,7 +34,19 @@ export function createLazyApi(): PiralPlugin<PiletLazyApi> {
           };
         },
         fromLazy(load, deps = []) {
-          return lazy(() => Promise.all(deps.map(getDependency)).then(load).then(wrapComponent));
+          return lazy(() =>
+            Promise.all(deps.map(getDependency)).then((values) => {
+              const depMap = deps.reduce((obj, name, index) => {
+                obj[name] = values[index];
+                return obj;
+              }, {});
+              return load()
+                .then((comp) => withApi(context, comp, api, 'unknown'))
+                .then((compWithApi) => ({
+                  default: (props) => createElement(compWithApi as ComponentType, { deps: depMap, ...props }),
+                }));
+            }),
+          );
         },
       };
     };

package/src/types.ts

@@ -1,12 +1,12 @@
-import { ComponentType, LazyExoticComponent } from 'react';
-import { FirstParametersOf, ComponentConverters } from 'piral-core';
+import type { ComponentType } from 'react';
+import type { AnyComponent, BaseComponentProps } from 'piral-core';
 
 declare module 'piral-core/lib/types/custom' {
   interface PiletCustomApi extends PiletLazyApi {}
 }
 
 export interface LazyComponentLoader<TProps> {
-  (): Promise<FirstParametersOf<ComponentConverters<TProps>>>;
+  (): Promise<AnyComponent<TProps>>;
 }
 
 export interface LazyDependencyLoader {
@@ -29,5 +29,8 @@ export interface PiletLazyApi {
    * @param deps The optional names of the dependencies to load beforehand.
    * @returns The lazy loading component.
    */
-  fromLazy<T>(cb: LazyComponentLoader<T>, deps?: Array<string>): LazyExoticComponent<ComponentType<T>>;
+  fromLazy<T extends BaseComponentProps>(
+    cb: LazyComponentLoader<T>,
+    deps?: Array<string>,
+  ): ComponentType<T & { deps?: Record<string, any> }>;
 }

package/src/create.test.ts

@@ -1,34 +0,0 @@
-import { Atom, swap } from '@dbeining/react-atom';
-import { createLazyApi } from './create';
-
-function createMockContainer() {
-  const state = Atom.of({});
-  return {
-    context: {
-      converters: {},
-      on: jest.fn(),
-      off: jest.fn(),
-      emit: jest.fn(),
-      defineActions() {},
-      state,
-      readState(read) {
-        return read(state);
-      },
-      dispatch(update) {
-        swap(state, update);
-      },
-    } as any,
-    api: {} as any,
-  };
-}
-
-describe('Piral-Lazy create module', () => {
-  it('appends lazy loading for a DOM component', () => {
-    const { context } = createMockContainer();
-    const load = () => Promise.resolve({});
-    const apiCreator: any = createLazyApi()(context);
-    const { fromLazy } = apiCreator();
-    const lazyComponent = fromLazy(load);
-    expect(lazyComponent).not.toBeUndefined();
-  });
-});