@furystack/shades-mfe 1.0.27 → 1.0.28

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [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,129 @@
+import { Injector } from '@furystack/inject';
+import { createComponent, Shade } from '@furystack/shades';
+import { sleepAsync } 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', () => {
+        const TestComponent = Shade({
+            shadowDomName: 'test-mfe-child-injector',
+            render: ({ props }) => createComponent("div", null, props.value),
+        });
+        const parentInjector = new Injector();
+        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),
+        });
+        const injector = new 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"),
+        });
+        const injector = new 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"))),
+        });
+        const injector = new 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");
+            },
+        });
+        const parentInjector = new Injector();
+        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/package.json

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

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

@@ -0,0 +1,170 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, Shade } from '@furystack/shades'
+import { sleepAsync } 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', () => {
+    const TestComponent = Shade<{ value: string }>({
+      shadowDomName: 'test-mfe-child-injector',
+      render: ({ props }) => <div>{props.value}</div>,
+    })
+
+    const parentInjector = new Injector()
+    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>,
+    })
+
+    const injector = new 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>,
+    })
+
+    const injector = new 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>
+      ),
+    })
+
+    const injector = new 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>
+      },
+    })
+
+    const parentInjector = new Injector()
+    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)
+  })
+})