@furystack/shades-mfe 1.0.27 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # Changelog
 
+## [2.0.0] - 2026-02-09
+
+### ⬆️ Dependencies
+
+- Updated peer dependency `@furystack/shades` to latest minor version
+- Peer dependency on `@furystack/shades` bumped to new major version
+- Updated `@furystack/shades` dependency
+
+### 💥 Breaking Changes
+
+### Requires `@furystack/shades` v3
+
+This package now depends on the new major version of `@furystack/shades` which removed the `constructed` callback.
+
+### Migrated from `element` to `useRef` for Container Management
+
+The `MicroFrontend` component no longer uses the `element` render option to access the host element. Instead, it uses `useRef` to create a container `<div>` inside the component, and the micro-frontend is mounted into that container.
+
+**Impact:** The internal mounting behavior has changed — micro-frontends are now mounted inside a child `<div>` rather than directly into the host custom element. This should be transparent for most consumers, but any code that relies on the MFE being a direct child of the `shade-micro-frontend` element may need adjustment.
+
+### ♻️ Refactoring
+
+- Migrated `MicroFrontend` component from async `constructed` callback to `useDisposable()` in `render`, using `[Symbol.asyncDispose]` for cleanup
+- Replaced `element` parameter with `useRef('mfeContainer')` and a container `<div>` for MFE mounting
+- MFE loader now defers initialization via `queueMicrotask` to ensure the ref is available after the first render
+- Added prop propagation to inner MFE elements for Shade-based micro-frontends
+
+### 🧪 Tests
+
+- Updated micro-frontend tests to work with microtask-based rendering
+- Refactored `createShadesMicroFrontend` and `MicroFrontend` tests to use `usingAsync` for proper `Injector` disposal
+- Updated tests to accommodate new rendering flow
+
+## [1.0.28] - 2026-02-01
+
+### ⬆️ Dependencies
+
+- Updated peer dependency `@furystack/shades` to include new CSS styling features
+
 ## [1.0.27] - 2026-01-26
 
 ### 🔧 Chores

package/esm/create-shades-micro-frontend.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=create-shades-micro-frontend.spec.d.ts.map

package/esm/create-shades-micro-frontend.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-shades-micro-frontend.spec.d.ts","sourceRoot":"","sources":["../src/create-shades-micro-frontend.spec.tsx"],"names":[],"mappings":""}

package/esm/create-shades-micro-frontend.spec.js

@@ -0,0 +1,134 @@
+import { Injector } from '@furystack/inject';
+import { createComponent, Shade } from '@furystack/shades';
+import { sleepAsync, usingAsync } from '@furystack/utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { CreateMicroFrontendService } from './create-microfrontend-service.js';
+import { createShadesMicroFrontend } from './create-shades-micro-frontend.js';
+describe('createShadesMicroFrontend', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('should return a CreateMicroFrontendService instance', () => {
+        const TestComponent = Shade({
+            shadowDomName: 'test-mfe-return-type',
+            render: ({ props }) => createComponent("div", null, props.value),
+        });
+        const result = createShadesMicroFrontend(TestComponent);
+        expect(result).toBeInstanceOf(CreateMicroFrontendService);
+        expect(result.create).toBeTypeOf('function');
+        expect(result.destroy).toBeUndefined();
+    });
+    it('should create a child injector when create is called', async () => {
+        const TestComponent = Shade({
+            shadowDomName: 'test-mfe-child-injector',
+            render: ({ props }) => createComponent("div", null, props.value),
+        });
+        await usingAsync(new Injector(), async (parentInjector) => {
+            const createChildSpy = vi.spyOn(parentInjector, 'createChild');
+            const mfeService = createShadesMicroFrontend(TestComponent);
+            const rootElement = document.getElementById('root');
+            mfeService.create({
+                api: { value: 'test' },
+                rootElement,
+                injector: parentInjector,
+            });
+            expect(createChildSpy).toHaveBeenCalledWith({
+                owner: createShadesMicroFrontend,
+            });
+        });
+    });
+    it('should render the component with the provided API props', async () => {
+        const testValue = crypto.randomUUID();
+        const TestComponent = Shade({
+            shadowDomName: 'test-mfe-render-props',
+            render: ({ props }) => createComponent("div", { "data-testid": "content" },
+                "Value: ",
+                props.value),
+        });
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const mfeService = createShadesMicroFrontend(TestComponent);
+            mfeService.create({
+                api: { value: testValue },
+                rootElement,
+                injector,
+            });
+            await sleepAsync(10);
+            expect(rootElement.innerHTML).toContain(`Value: ${testValue}`);
+        });
+    });
+    it('should render the component into the provided root element', async () => {
+        const TestComponent = Shade({
+            shadowDomName: 'test-mfe-root-element',
+            render: () => createComponent("span", null, "MFE Content"),
+        });
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const mfeService = createShadesMicroFrontend(TestComponent);
+            mfeService.create({
+                api: {},
+                rootElement,
+                injector,
+            });
+            await sleepAsync(10);
+            expect(rootElement.querySelector('test-mfe-root-element')).toBeTruthy();
+            expect(rootElement.innerHTML).toContain('MFE Content');
+        });
+    });
+    it('should work with complex API types', async () => {
+        const clickHandler = vi.fn();
+        const TestComponent = Shade({
+            shadowDomName: 'test-mfe-complex-api',
+            render: ({ props }) => (createComponent("div", null,
+                createComponent("span", { "data-testid": "user-name" }, props.user.name),
+                createComponent("span", { "data-testid": "item-count" }, props.items.length),
+                createComponent("button", { onclick: props.onClick }, "Click"))),
+        });
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const mfeService = createShadesMicroFrontend(TestComponent);
+            mfeService.create({
+                api: {
+                    user: { id: '123', name: 'John Doe' },
+                    onClick: clickHandler,
+                    items: ['a', 'b', 'c'],
+                },
+                rootElement,
+                injector,
+            });
+            await sleepAsync(10);
+            expect(rootElement.innerHTML).toContain('John Doe');
+            expect(rootElement.innerHTML).toContain('3');
+            const button = rootElement.querySelector('button');
+            button?.click();
+            expect(clickHandler).toHaveBeenCalled();
+        });
+    });
+    it('should use the child injector for the shade root', async () => {
+        let capturedInjector;
+        const TestComponent = Shade({
+            shadowDomName: 'test-mfe-injector-capture',
+            render: ({ injector }) => {
+                capturedInjector = injector;
+                return createComponent("div", null, "Test");
+            },
+        });
+        await usingAsync(new Injector(), async (parentInjector) => {
+            const rootElement = document.getElementById('root');
+            const mfeService = createShadesMicroFrontend(TestComponent);
+            mfeService.create({
+                api: {},
+                rootElement,
+                injector: parentInjector,
+            });
+            await sleepAsync(10);
+            expect(capturedInjector).toBeDefined();
+            // The component should receive a child injector, not the parent
+            expect(capturedInjector).not.toBe(parentInjector);
+        });
+    });
+});
+//# sourceMappingURL=create-shades-micro-frontend.spec.js.map

package/esm/create-shades-micro-frontend.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-shades-micro-frontend.spec.js","sourceRoot":"","sources":["../src/create-shades-micro-frontend.spec.tsx"],"names":[],"mappings":"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"}

package/esm/micro-frontend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"micro-frontend.d.ts","sourceRoot":"","sources":["../src/micro-frontend.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,mCAAmC,CAAA;AAEnF,KAAK,kBAAkB,CAAC,IAAI,IAAI;IAC9B,GAAG,EAAE,IAAI,CAAA;IACT,cAAc,EAAE,MAAM,OAAO,CAAC,0BAA0B,CAAC,IAAI,CAAC,CAAC,CAAA;IAC/D,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,OAAO,CAAA;CACpE,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,OAwCzE,CAAA"}
+{"version":3,"file":"micro-frontend.d.ts","sourceRoot":"","sources":["../src/micro-frontend.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,mCAAmC,CAAA;AAEnF,KAAK,kBAAkB,CAAC,IAAI,IAAI;IAC9B,GAAG,EAAE,IAAI,CAAA;IACT,cAAc,EAAE,MAAM,OAAO,CAAC,0BAA0B,CAAC,IAAI,CAAC,CAAC,CAAA;IAC/D,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,OAAO,CAAA;CACpE,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,OA6DzE,CAAA"}

package/esm/micro-frontend.js

@@ -1,37 +1,46 @@
-import { Shade } from '@furystack/shades';
+import { Shade, createComponent } from '@furystack/shades';
 export const MicroFrontend = Shade({
     shadowDomName: 'shade-micro-frontend',
-    constructed: async ({ props, element, injector }) => {
-        const tryCreateComponent = async () => {
-            const creatorService = await props.loaderCallback();
-            // TODO: Think about type checking
-            // if (!(creatorService instanceof CreateMicroFrontendService)) {
-            //   throw new Error('Invalid creator service')
-            // }
-            const childInjector = injector.createChild({
-                owner: creatorService,
+    render: ({ props, injector, useDisposable, useRef }) => {
+        const containerRef = useRef('mfeContainer');
+        useDisposable('mfe-loader', () => {
+            let destroyFn;
+            const tryCreateComponent = async () => {
+                const container = containerRef.current;
+                if (!container)
+                    return;
+                const creatorService = await props.loaderCallback();
+                const childInjector = injector.createChild({
+                    owner: creatorService,
+                });
+                container.innerHTML = '';
+                creatorService.create({
+                    api: props.api,
+                    rootElement: container,
+                    injector: childInjector,
+                });
+                destroyFn = () => creatorService.destroy?.({ api: props.api, injector: childInjector });
+            };
+            queueMicrotask(() => {
+                tryCreateComponent().catch((error) => {
+                    if (props.error && containerRef.current) {
+                        containerRef.current.appendChild(props.error(error, async () => {
+                            await tryCreateComponent();
+                        }));
+                    }
+                });
             });
-            element.innerHTML = '';
-            creatorService.create({
-                api: props.api,
-                rootElement: element,
-                injector: childInjector,
-            });
-            return () => creatorService.destroy?.({ api: props.api, injector: childInjector });
-        };
-        try {
-            return await tryCreateComponent();
-        }
-        catch (error) {
-            if (props.error) {
-                element.appendChild(props.error(error, async () => {
-                    await tryCreateComponent();
-                }));
-            }
+            return {
+                [Symbol.asyncDispose]: async () => destroyFn?.(),
+            };
+        });
+        // Propagate prop updates to the inner MFE element (for Shade-based MFEs)
+        const mfeElement = containerRef.current?.firstElementChild;
+        if (mfeElement?.updateComponent) {
+            mfeElement.props = props.api;
+            mfeElement.updateComponent();
         }
-    },
-    render: ({ props }) => {
-        return props.loader || null;
+        return (createComponent("div", { ref: containerRef, style: { display: 'contents' } }, props.loader || null));
     },
 });
 //# sourceMappingURL=micro-frontend.js.map

package/esm/micro-frontend.js.map

@@ -1 +1 @@
-{"version":3,"file":"micro-frontend.js","sourceRoot":"","sources":["../src/micro-frontend.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAUzC,MAAM,CAAC,MAAM,aAAa,GAA2D,KAAK,CAAC;IACzF,aAAa,EAAE,sBAAsB;IACrC,WAAW,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE;QAClD,MAAM,kBAAkB,GAAG,KAAK,IAAI,EAAE;YACpC,MAAM,cAAc,GAAG,MAAM,KAAK,CAAC,cAAc,EAAE,CAAA;YACnD,kCAAkC;YAClC,iEAAiE;YACjE,+CAA+C;YAC/C,IAAI;YAEJ,MAAM,aAAa,GAAG,QAAQ,CAAC,WAAW,CAAC;gBACzC,KAAK,EAAE,cAAc;aACtB,CAAC,CAAA;YAEF,OAAO,CAAC,SAAS,GAAG,EAAE,CAAA;YAEtB,cAAc,CAAC,MAAM,CAAC;gBACpB,GAAG,EAAE,KAAK,CAAC,GAAG;gBACd,WAAW,EAAE,OAAO;gBACpB,QAAQ,EAAE,aAAa;aACxB,CAAC,CAAA;YAEF,OAAO,GAAG,EAAE,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC,CAAA;QACpF,CAAC,CAAA;QAED,IAAI,CAAC;YACH,OAAO,MAAM,kBAAkB,EAAE,CAAA;QACnC,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;gBAChB,OAAO,CAAC,WAAW,CACjB,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,IAAI,EAAE;oBAC5B,MAAM,kBAAkB,EAAE,CAAA;gBAC5B,CAAC,CAAC,CACH,CAAA;YACH,CAAC;QACH,CAAC;IACH,CAAC;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;QACpB,OAAO,KAAK,CAAC,MAAM,IAAI,IAAI,CAAA;IAC7B,CAAC;CACF,CAAC,CAAA"}
+{"version":3,"file":"micro-frontend.js","sourceRoot":"","sources":["../src/micro-frontend.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAU1D,MAAM,CAAC,MAAM,aAAa,GAA2D,KAAK,CAAC;IACzF,aAAa,EAAE,sBAAsB;IACrC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,EAAE;QACrD,MAAM,YAAY,GAAG,MAAM,CAAiB,cAAc,CAAC,CAAA;QAE3D,aAAa,CAAC,YAAY,EAAE,GAAG,EAAE;YAC/B,IAAI,SAAmC,CAAA;YAEvC,MAAM,kBAAkB,GAAG,KAAK,IAAI,EAAE;gBACpC,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAA;gBACtC,IAAI,CAAC,SAAS;oBAAE,OAAM;gBAEtB,MAAM,cAAc,GAAG,MAAM,KAAK,CAAC,cAAc,EAAE,CAAA;gBAEnD,MAAM,aAAa,GAAG,QAAQ,CAAC,WAAW,CAAC;oBACzC,KAAK,EAAE,cAAc;iBACtB,CAAC,CAAA;gBAEF,SAAS,CAAC,SAAS,GAAG,EAAE,CAAA;gBAExB,cAAc,CAAC,MAAM,CAAC;oBACpB,GAAG,EAAE,KAAK,CAAC,GAAG;oBACd,WAAW,EAAE,SAAS;oBACtB,QAAQ,EAAE,aAAa;iBACxB,CAAC,CAAA;gBAEF,SAAS,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC,CAAA;YACzF,CAAC,CAAA;YAED,cAAc,CAAC,GAAG,EAAE;gBAClB,kBAAkB,EAAE,CAAC,KAAK,CAAC,CAAC,KAAc,EAAE,EAAE;oBAC5C,IAAI,KAAK,CAAC,KAAK,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;wBACxC,YAAY,CAAC,OAAO,CAAC,WAAW,CAC9B,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,IAAI,EAAE;4BAC5B,MAAM,kBAAkB,EAAE,CAAA;wBAC5B,CAAC,CAAC,CACH,CAAA;oBACH,CAAC;gBACH,CAAC,CAAC,CAAA;YACJ,CAAC,CAAC,CAAA;YAEF,OAAO;gBACL,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,KAAK,IAAI,EAAE,CAAC,SAAS,EAAE,EAAE;aACjD,CAAA;QACH,CAAC,CAAC,CAAA;QAEF,yEAAyE;QACzE,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,EAAE,iBAEjC,CAAA;QACR,IAAI,UAAU,EAAE,eAAe,EAAE,CAAC;YAChC,UAAU,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,CAAA;YAC5B,UAAU,CAAC,eAAe,EAAE,CAAA;QAC9B,CAAC;QAED,OAAO,CACL,yBAAK,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,IACnD,KAAK,CAAC,MAAM,IAAI,IAAI,CACjB,CACP,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}

package/esm/micro-frontend.spec.js

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject';
-import { sleepAsync } from '@furystack/utils';
-import { createComponent, initializeShadeRoot, Shade } from '@furystack/shades';
+import { sleepAsync, usingAsync } from '@furystack/utils';
+import { createComponent, flushUpdates, initializeShadeRoot, Shade } from '@furystack/shades';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { createShadesMicroFrontend } from './create-shades-micro-frontend.js';
 import { MicroFrontend } from './micro-frontend.js';
@@ -12,92 +12,100 @@ describe('<MicroFrontend /> component', () => {
         document.body.innerHTML = '';
     });
     it('Should render the MFE app', async () => {
-        const injector = new Injector();
-        const rootElement = document.getElementById('root');
-        const MfeComponent = Shade({
-            shadowDomName: 'mfe-test-example',
-            render: ({ props }) => createComponent("div", null,
-                "Loaded: ",
-                props.value),
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const MfeComponent = Shade({
+                shadowDomName: 'mfe-test-example',
+                render: ({ props }) => createComponent("div", null,
+                    "Loaded: ",
+                    props.value),
+            });
+            const value = crypto.randomUUID();
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: (createComponent(MicroFrontend, { api: { value }, loaderCallback: async () => {
+                        return createShadesMicroFrontend(MfeComponent);
+                    } })),
+            });
+            await flushUpdates();
+            await sleepAsync(1);
+            expect(document.body.innerHTML).toBe(`<div id="root"><shade-micro-frontend><div style="display: contents;"><mfe-test-example><div>Loaded: ${value}</div></mfe-test-example></div></shade-micro-frontend></div>`);
         });
-        const value = crypto.randomUUID();
-        initializeShadeRoot({
-            injector,
-            rootElement,
-            jsxElement: (createComponent(MicroFrontend, { api: { value }, loaderCallback: async () => {
-                    return createShadesMicroFrontend(MfeComponent);
-                } })),
-        });
-        await sleepAsync(1);
-        expect(document.body.innerHTML).toBe(`<div id="root"><shade-micro-frontend><mfe-test-example><div>Loaded: ${value}</div></mfe-test-example></shade-micro-frontend></div>`);
     });
     it('Should render the MFE app with a loader', async () => {
-        const injector = new Injector();
-        const rootElement = document.getElementById('root');
-        const MfeComponent = Shade({
-            shadowDomName: 'mfe-test-example-w-loader',
-            render: ({ props }) => createComponent("div", null,
-                "Loaded: ",
-                props.value),
-        });
-        const value = crypto.randomUUID();
-        initializeShadeRoot({
-            injector,
-            rootElement,
-            jsxElement: (createComponent(MicroFrontend, { loader: createComponent("div", null, "Loading..."), api: { value }, loaderCallback: async () => {
-                    await sleepAsync(10);
-                    return createShadesMicroFrontend(MfeComponent);
-                } })),
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const MfeComponent = Shade({
+                shadowDomName: 'mfe-test-example-w-loader',
+                render: ({ props }) => createComponent("div", null,
+                    "Loaded: ",
+                    props.value),
+            });
+            const value = crypto.randomUUID();
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: (createComponent(MicroFrontend, { loader: createComponent("div", null, "Loading..."), api: { value }, loaderCallback: async () => {
+                        await sleepAsync(10);
+                        return createShadesMicroFrontend(MfeComponent);
+                    } })),
+            });
+            await flushUpdates();
+            expect(document.body.innerHTML).toBe('<div id="root"><shade-micro-frontend><div style="display: contents;"><div>Loading...</div></div></shade-micro-frontend></div>');
+            await sleepAsync(20);
+            expect(document.body.innerHTML).toBe(`<div id="root"><shade-micro-frontend><div style="display: contents;"><mfe-test-example-w-loader><div>Loaded: ${value}</div></mfe-test-example-w-loader></div></shade-micro-frontend></div>`);
         });
-        expect(document.body.innerHTML).toBe('<div id="root"><shade-micro-frontend><div>Loading...</div></shade-micro-frontend></div>');
-        await sleepAsync(20);
-        expect(document.body.innerHTML).toBe(`<div id="root"><shade-micro-frontend><mfe-test-example-w-loader><div>Loaded: ${value}</div></mfe-test-example-w-loader></shade-micro-frontend></div>`);
     });
     it('Should render the MFE app with an error', async () => {
-        const injector = new Injector();
-        const rootElement = document.getElementById('root');
-        initializeShadeRoot({
-            injector,
-            rootElement,
-            jsxElement: (createComponent(MicroFrontend, { error: () => createComponent("div", null, "Error..."), api: {}, loaderCallback: async () => {
-                    throw Error(':(');
-                } })),
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: (createComponent(MicroFrontend, { error: () => createComponent("div", null, "Error..."), api: {}, loaderCallback: async () => {
+                        throw Error(':(');
+                    } })),
+            });
+            await flushUpdates();
+            await sleepAsync(10);
+            expect(document.body.innerHTML).toBe(`<div id="root"><shade-micro-frontend><div style="display: contents;"><div>Error...</div></div></shade-micro-frontend></div>`);
         });
-        await sleepAsync(10);
-        expect(document.body.innerHTML).toBe(`<div id="root"><shade-micro-frontend><div>Error...</div></shade-micro-frontend></div>`);
     });
     it('Should execute the destroy callback', async () => {
-        const injector = new Injector();
-        const rootElement = document.getElementById('root');
-        const value = crypto.randomUUID();
-        const destroy = vi.fn();
-        const Host = Shade({
-            shadowDomName: 'mfe-test-example-w-destroy-host',
-            render: ({ useState }) => {
-                const [hasMfe, setHasMfe] = useState('hasMfe', true);
-                return (createComponent(createComponent, null,
-                    createComponent("button", { onclick: () => {
-                            setHasMfe(false);
-                        } }, "Remove MFE"),
-                    hasMfe && (createComponent(MicroFrontend, { loader: createComponent("div", null, "Loading..."), api: { value }, loaderCallback: async () => {
-                            return {
-                                create: () => { },
-                                destroy,
-                            };
-                        } }))));
-            },
-        });
-        initializeShadeRoot({
-            injector,
-            rootElement,
-            jsxElement: createComponent(Host, null),
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const value = crypto.randomUUID();
+            const destroy = vi.fn();
+            const Host = Shade({
+                shadowDomName: 'mfe-test-example-w-destroy-host',
+                render: ({ useState }) => {
+                    const [hasMfe, setHasMfe] = useState('hasMfe', true);
+                    return (createComponent(createComponent, null,
+                        createComponent("button", { onclick: () => {
+                                setHasMfe(false);
+                            } }, "Remove MFE"),
+                        hasMfe && (createComponent(MicroFrontend, { loader: createComponent("div", null, "Loading..."), api: { value }, loaderCallback: async () => {
+                                return {
+                                    create: () => { },
+                                    destroy,
+                                };
+                            } }))));
+                },
+            });
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Host, null),
+            });
+            await flushUpdates();
+            await sleepAsync(10);
+            expect(document.body.innerHTML).toBe('<div id="root"><mfe-test-example-w-destroy-host><button>Remove MFE</button><shade-micro-frontend><div style="display: contents;"></div></shade-micro-frontend></mfe-test-example-w-destroy-host></div>');
+            document.querySelector('button').click();
+            await sleepAsync(10);
+            expect(destroy).toHaveBeenCalledWith({ api: { value }, injector: expect.any(Injector) });
+            expect(document.body.innerHTML).toBe(`<div id="root"><mfe-test-example-w-destroy-host><button>Remove MFE</button></mfe-test-example-w-destroy-host></div>`);
         });
-        await sleepAsync(10);
-        expect(document.body.innerHTML).toBe('<div id="root"><mfe-test-example-w-destroy-host><button>Remove MFE</button><shade-micro-frontend></shade-micro-frontend></mfe-test-example-w-destroy-host></div>');
-        document.querySelector('button').click();
-        await sleepAsync(10);
-        expect(destroy).toHaveBeenCalledWith({ api: { value }, injector: expect.any(Injector) });
-        expect(document.body.innerHTML).toBe(`<div id="root"><mfe-test-example-w-destroy-host><button>Remove MFE</button></mfe-test-example-w-destroy-host></div>`);
     });
 });
 //# sourceMappingURL=micro-frontend.spec.js.map

package/esm/micro-frontend.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"micro-frontend.spec.js","sourceRoot":"","sources":["../src/micro-frontend.spec.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"micro-frontend.spec.js","sourceRoot":"","sources":["../src/micro-frontend.spec.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@furystack/shades-mfe",
-  "version": "1.0.27",
+  "version": "2.0.0",
   "description": "Micro-Frontend support for FuryStack Shades",
   "type": "module",
   "scripts": {
@@ -37,8 +37,8 @@
   },
   "homepage": "https://github.com/furystack/furystack",
   "dependencies": {
-    "@furystack/inject": "^12.0.28",
-    "@furystack/shades": "^11.0.35"
+    "@furystack/inject": "^12.0.29",
+    "@furystack/shades": "^12.0.0"
   },
   "devDependencies": {
     "@types/node": "^25.0.10",

package/src/create-shades-micro-frontend.spec.tsx

@@ -0,0 +1,175 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, Shade } from '@furystack/shades'
+import { sleepAsync, usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { CreateMicroFrontendService } from './create-microfrontend-service.js'
+import { createShadesMicroFrontend } from './create-shades-micro-frontend.js'
+
+describe('createShadesMicroFrontend', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('should return a CreateMicroFrontendService instance', () => {
+    const TestComponent = Shade<{ value: string }>({
+      shadowDomName: 'test-mfe-return-type',
+      render: ({ props }) => <div>{props.value}</div>,
+    })
+
+    const result = createShadesMicroFrontend(TestComponent)
+
+    expect(result).toBeInstanceOf(CreateMicroFrontendService)
+    expect(result.create).toBeTypeOf('function')
+    expect(result.destroy).toBeUndefined()
+  })
+
+  it('should create a child injector when create is called', async () => {
+    const TestComponent = Shade<{ value: string }>({
+      shadowDomName: 'test-mfe-child-injector',
+      render: ({ props }) => <div>{props.value}</div>,
+    })
+
+    await usingAsync(new Injector(), async (parentInjector) => {
+      const createChildSpy = vi.spyOn(parentInjector, 'createChild')
+
+      const mfeService = createShadesMicroFrontend(TestComponent)
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      mfeService.create({
+        api: { value: 'test' },
+        rootElement,
+        injector: parentInjector,
+      })
+
+      expect(createChildSpy).toHaveBeenCalledWith({
+        owner: createShadesMicroFrontend,
+      })
+    })
+  })
+
+  it('should render the component with the provided API props', async () => {
+    const testValue = crypto.randomUUID()
+
+    const TestComponent = Shade<{ value: string }>({
+      shadowDomName: 'test-mfe-render-props',
+      render: ({ props }) => <div data-testid="content">Value: {props.value}</div>,
+    })
+
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      const mfeService = createShadesMicroFrontend(TestComponent)
+      mfeService.create({
+        api: { value: testValue },
+        rootElement,
+        injector,
+      })
+
+      await sleepAsync(10)
+
+      expect(rootElement.innerHTML).toContain(`Value: ${testValue}`)
+    })
+  })
+
+  it('should render the component into the provided root element', async () => {
+    const TestComponent = Shade<object>({
+      shadowDomName: 'test-mfe-root-element',
+      render: () => <span>MFE Content</span>,
+    })
+
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      const mfeService = createShadesMicroFrontend(TestComponent)
+      mfeService.create({
+        api: {},
+        rootElement,
+        injector,
+      })
+
+      await sleepAsync(10)
+
+      expect(rootElement.querySelector('test-mfe-root-element')).toBeTruthy()
+      expect(rootElement.innerHTML).toContain('MFE Content')
+    })
+  })
+
+  it('should work with complex API types', async () => {
+    type ComplexApi = {
+      user: { id: string; name: string }
+      onClick: () => void
+      items: string[]
+    }
+
+    const clickHandler = vi.fn()
+
+    const TestComponent = Shade<ComplexApi>({
+      shadowDomName: 'test-mfe-complex-api',
+      render: ({ props }) => (
+        <div>
+          <span data-testid="user-name">{props.user.name}</span>
+          <span data-testid="item-count">{props.items.length}</span>
+          <button onclick={props.onClick}>Click</button>
+        </div>
+      ),
+    })
+
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      const mfeService = createShadesMicroFrontend(TestComponent)
+      mfeService.create({
+        api: {
+          user: { id: '123', name: 'John Doe' },
+          onClick: clickHandler,
+          items: ['a', 'b', 'c'],
+        },
+        rootElement,
+        injector,
+      })
+
+      await sleepAsync(10)
+
+      expect(rootElement.innerHTML).toContain('John Doe')
+      expect(rootElement.innerHTML).toContain('3')
+
+      const button = rootElement.querySelector('button')
+      button?.click()
+
+      expect(clickHandler).toHaveBeenCalled()
+    })
+  })
+
+  it('should use the child injector for the shade root', async () => {
+    let capturedInjector: Injector | undefined
+
+    const TestComponent = Shade<object>({
+      shadowDomName: 'test-mfe-injector-capture',
+      render: ({ injector }) => {
+        capturedInjector = injector
+        return <div>Test</div>
+      },
+    })
+
+    await usingAsync(new Injector(), async (parentInjector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      const mfeService = createShadesMicroFrontend(TestComponent)
+      mfeService.create({
+        api: {},
+        rootElement,
+        injector: parentInjector,
+      })
+
+      await sleepAsync(10)
+
+      expect(capturedInjector).toBeDefined()
+      // The component should receive a child injector, not the parent
+      expect(capturedInjector).not.toBe(parentInjector)
+    })
+  })
+})

package/src/micro-frontend.spec.tsx

@@ -1,7 +1,7 @@
 import { Injector } from '@furystack/inject'
-import { sleepAsync } from '@furystack/utils'
+import { sleepAsync, usingAsync } from '@furystack/utils'
 
-import { createComponent, initializeShadeRoot, Shade } from '@furystack/shades'
+import { createComponent, flushUpdates, initializeShadeRoot, Shade } from '@furystack/shades'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { createShadesMicroFrontend } from './create-shades-micro-frontend.js'
 import { MicroFrontend } from './micro-frontend.js'
@@ -15,145 +15,153 @@ describe('<MicroFrontend /> component', () => {
   })
 
   it('Should render the MFE app', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-
-    const MfeComponent = Shade<{ value: string }>({
-      shadowDomName: 'mfe-test-example',
-      render: ({ props }) => <div>Loaded: {props.value}</div>,
-    })
-
-    const value = crypto.randomUUID()
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: (
-        <MicroFrontend
-          api={{ value }}
-          loaderCallback={async () => {
-            return createShadesMicroFrontend(MfeComponent)
-          }}
-        />
-      ),
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      const MfeComponent = Shade<{ value: string }>({
+        shadowDomName: 'mfe-test-example',
+        render: ({ props }) => <div>Loaded: {props.value}</div>,
+      })
+
+      const value = crypto.randomUUID()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <MicroFrontend
+            api={{ value }}
+            loaderCallback={async () => {
+              return createShadesMicroFrontend(MfeComponent)
+            }}
+          />
+        ),
+      })
+
+      await flushUpdates()
+      await sleepAsync(1)
+
+      expect(document.body.innerHTML).toBe(
+        `<div id="root"><shade-micro-frontend><div style="display: contents;"><mfe-test-example><div>Loaded: ${value}</div></mfe-test-example></div></shade-micro-frontend></div>`,
+      )
     })
-
-    await sleepAsync(1)
-
-    expect(document.body.innerHTML).toBe(
-      `<div id="root"><shade-micro-frontend><mfe-test-example><div>Loaded: ${value}</div></mfe-test-example></shade-micro-frontend></div>`,
-    )
   })
 
   it('Should render the MFE app with a loader', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-
-    const MfeComponent = Shade<{ value: string }>({
-      shadowDomName: 'mfe-test-example-w-loader',
-      render: ({ props }) => <div>Loaded: {props.value}</div>,
-    })
-
-    const value = crypto.randomUUID()
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: (
-        <MicroFrontend
-          loader={<div>Loading...</div>}
-          api={{ value }}
-          loaderCallback={async () => {
-            await sleepAsync(10)
-            return createShadesMicroFrontend(MfeComponent)
-          }}
-        />
-      ),
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      const MfeComponent = Shade<{ value: string }>({
+        shadowDomName: 'mfe-test-example-w-loader',
+        render: ({ props }) => <div>Loaded: {props.value}</div>,
+      })
+
+      const value = crypto.randomUUID()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <MicroFrontend
+            loader={<div>Loading...</div>}
+            api={{ value }}
+            loaderCallback={async () => {
+              await sleepAsync(10)
+              return createShadesMicroFrontend(MfeComponent)
+            }}
+          />
+        ),
+      })
+      await flushUpdates()
+      expect(document.body.innerHTML).toBe(
+        '<div id="root"><shade-micro-frontend><div style="display: contents;"><div>Loading...</div></div></shade-micro-frontend></div>',
+      )
+      await sleepAsync(20)
+      expect(document.body.innerHTML).toBe(
+        `<div id="root"><shade-micro-frontend><div style="display: contents;"><mfe-test-example-w-loader><div>Loaded: ${value}</div></mfe-test-example-w-loader></div></shade-micro-frontend></div>`,
+      )
     })
-    expect(document.body.innerHTML).toBe(
-      '<div id="root"><shade-micro-frontend><div>Loading...</div></shade-micro-frontend></div>',
-    )
-    await sleepAsync(20)
-    expect(document.body.innerHTML).toBe(
-      `<div id="root"><shade-micro-frontend><mfe-test-example-w-loader><div>Loaded: ${value}</div></mfe-test-example-w-loader></shade-micro-frontend></div>`,
-    )
   })
 
   it('Should render the MFE app with an error', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: (
-        <MicroFrontend
-          error={() => <div>Error...</div>}
-          api={{}}
-          loaderCallback={async () => {
-            throw Error(':(')
-          }}
-        />
-      ),
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <MicroFrontend
+            error={() => <div>Error...</div>}
+            api={{}}
+            loaderCallback={async () => {
+              throw Error(':(')
+            }}
+          />
+        ),
+      })
+      await flushUpdates()
+      await sleepAsync(10)
+      expect(document.body.innerHTML).toBe(
+        `<div id="root"><shade-micro-frontend><div style="display: contents;"><div>Error...</div></div></shade-micro-frontend></div>`,
+      )
     })
-    await sleepAsync(10)
-    expect(document.body.innerHTML).toBe(
-      `<div id="root"><shade-micro-frontend><div>Error...</div></shade-micro-frontend></div>`,
-    )
   })
 
   it('Should execute the destroy callback', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-
-    const value = crypto.randomUUID()
-
-    const destroy = vi.fn()
-
-    const Host = Shade({
-      shadowDomName: 'mfe-test-example-w-destroy-host',
-      render: ({ useState }) => {
-        const [hasMfe, setHasMfe] = useState('hasMfe', true)
-        return (
-          <>
-            <button
-              onclick={() => {
-                setHasMfe(false)
-              }}
-            >
-              Remove MFE
-            </button>
-            {hasMfe && (
-              <MicroFrontend
-                loader={<div>Loading...</div>}
-                api={{ value }}
-                loaderCallback={async () => {
-                  return {
-                    create: () => {},
-                    destroy,
-                  }
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      const value = crypto.randomUUID()
+
+      const destroy = vi.fn()
+
+      const Host = Shade({
+        shadowDomName: 'mfe-test-example-w-destroy-host',
+        render: ({ useState }) => {
+          const [hasMfe, setHasMfe] = useState('hasMfe', true)
+          return (
+            <>
+              <button
+                onclick={() => {
+                  setHasMfe(false)
                 }}
-              />
-            )}
-          </>
-        )
-      },
-    })
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <Host />,
+              >
+                Remove MFE
+              </button>
+              {hasMfe && (
+                <MicroFrontend
+                  loader={<div>Loading...</div>}
+                  api={{ value }}
+                  loaderCallback={async () => {
+                    return {
+                      create: () => {},
+                      destroy,
+                    }
+                  }}
+                />
+              )}
+            </>
+          )
+        },
+      })
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Host />,
+      })
+      await flushUpdates()
+      await sleepAsync(10)
+      expect(document.body.innerHTML).toBe(
+        '<div id="root"><mfe-test-example-w-destroy-host><button>Remove MFE</button><shade-micro-frontend><div style="display: contents;"></div></shade-micro-frontend></mfe-test-example-w-destroy-host></div>',
+      )
+      document.querySelector('button')!.click()
+      await sleepAsync(10)
+      expect(destroy).toHaveBeenCalledWith({ api: { value }, injector: expect.any(Injector) as Injector })
+      expect(document.body.innerHTML).toBe(
+        `<div id="root"><mfe-test-example-w-destroy-host><button>Remove MFE</button></mfe-test-example-w-destroy-host></div>`,
+      )
     })
-    await sleepAsync(10)
-    expect(document.body.innerHTML).toBe(
-      '<div id="root"><mfe-test-example-w-destroy-host><button>Remove MFE</button><shade-micro-frontend></shade-micro-frontend></mfe-test-example-w-destroy-host></div>',
-    )
-    document.querySelector('button')!.click()
-    await sleepAsync(10)
-    expect(destroy).toHaveBeenCalledWith({ api: { value }, injector: expect.any(Injector) as Injector })
-    expect(document.body.innerHTML).toBe(
-      `<div id="root"><mfe-test-example-w-destroy-host><button>Remove MFE</button></mfe-test-example-w-destroy-host></div>`,
-    )
   })
 })

package/src/micro-frontend.tsx

@@ -1,4 +1,4 @@
-import { Shade } from '@furystack/shades'
+import { Shade, createComponent } from '@furystack/shades'
 import type { CreateMicroFrontendService } from './create-microfrontend-service.js'
 
 type MicroFrontendProps<TApi> = {
@@ -10,42 +10,63 @@ type MicroFrontendProps<TApi> = {
 
 export const MicroFrontend: <TApi>(props: MicroFrontendProps<TApi>) => JSX.Element = Shade({
   shadowDomName: 'shade-micro-frontend',
-  constructed: async ({ props, element, injector }) => {
-    const tryCreateComponent = async () => {
-      const creatorService = await props.loaderCallback()
-      // TODO: Think about type checking
-      // if (!(creatorService instanceof CreateMicroFrontendService)) {
-      //   throw new Error('Invalid creator service')
-      // }
-
-      const childInjector = injector.createChild({
-        owner: creatorService,
-      })
+  render: ({ props, injector, useDisposable, useRef }) => {
+    const containerRef = useRef<HTMLDivElement>('mfeContainer')
 
-      element.innerHTML = ''
+    useDisposable('mfe-loader', () => {
+      let destroyFn: (() => void) | undefined
 
-      creatorService.create({
-        api: props.api,
-        rootElement: element,
-        injector: childInjector,
-      })
+      const tryCreateComponent = async () => {
+        const container = containerRef.current
+        if (!container) return
 
-      return () => creatorService.destroy?.({ api: props.api, injector: childInjector })
-    }
+        const creatorService = await props.loaderCallback()
+
+        const childInjector = injector.createChild({
+          owner: creatorService,
+        })
 
-    try {
-      return await tryCreateComponent()
-    } catch (error) {
-      if (props.error) {
-        element.appendChild(
-          props.error(error, async () => {
-            await tryCreateComponent()
-          }),
-        )
+        container.innerHTML = ''
+
+        creatorService.create({
+          api: props.api,
+          rootElement: container,
+          injector: childInjector,
+        })
+
+        destroyFn = () => creatorService.destroy?.({ api: props.api, injector: childInjector })
       }
+
+      queueMicrotask(() => {
+        tryCreateComponent().catch((error: unknown) => {
+          if (props.error && containerRef.current) {
+            containerRef.current.appendChild(
+              props.error(error, async () => {
+                await tryCreateComponent()
+              }),
+            )
+          }
+        })
+      })
+
+      return {
+        [Symbol.asyncDispose]: async () => destroyFn?.(),
+      }
+    })
+
+    // Propagate prop updates to the inner MFE element (for Shade-based MFEs)
+    const mfeElement = containerRef.current?.firstElementChild as
+      | (HTMLElement & { props?: unknown; updateComponent?: () => void })
+      | null
+    if (mfeElement?.updateComponent) {
+      mfeElement.props = props.api
+      mfeElement.updateComponent()
     }
-  },
-  render: ({ props }) => {
-    return props.loader || null
+
+    return (
+      <div ref={containerRef} style={{ display: 'contents' }}>
+        {props.loader || null}
+      </div>
+    )
   },
 })