@furystack/shades-mfe 2.0.11 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +37 -0
- package/README.md +2 -2
- package/esm/create-shades-micro-frontend.spec.js +6 -6
- package/esm/create-shades-micro-frontend.spec.js.map +1 -1
- package/esm/micro-frontend.js +1 -1
- package/esm/micro-frontend.js.map +1 -1
- package/esm/micro-frontend.spec.js +3 -3
- package/esm/micro-frontend.spec.js.map +1 -1
- package/package.json +3 -3
- package/src/create-shades-micro-frontend.spec.tsx +6 -6
- package/src/micro-frontend.spec.tsx +3 -3
- package/src/micro-frontend.tsx +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,42 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [3.0.0] - 2026-03-07
|
|
4
|
+
|
|
5
|
+
### ⬆️ Dependencies
|
|
6
|
+
|
|
7
|
+
- Updated `@types/node` from `^25.3.1` to `^25.3.5`
|
|
8
|
+
- Updated `@furystack/shades` dependency
|
|
9
|
+
|
|
10
|
+
### 💥 Breaking Changes
|
|
11
|
+
|
|
12
|
+
### `shadowDomName` renamed to `customElementName` in Shade component API
|
|
13
|
+
|
|
14
|
+
The `MicroFrontend` component and all Shade components created with `createShadesMicroFrontend()` now use `customElementName` instead of `shadowDomName`. This is a breaking change inherited from `@furystack/shades`.
|
|
15
|
+
|
|
16
|
+
**Examples:**
|
|
17
|
+
|
|
18
|
+
```typescript
|
|
19
|
+
// ❌ Before
|
|
20
|
+
const MyMfeComponent = Shade<MyMfeApi>({
|
|
21
|
+
shadowDomName: 'my-mfe-component',
|
|
22
|
+
render: ({ props }) => <div>{props.greeting}</div>,
|
|
23
|
+
})
|
|
24
|
+
|
|
25
|
+
// ✅ After
|
|
26
|
+
const MyMfeComponent = Shade<MyMfeApi>({
|
|
27
|
+
customElementName: 'my-mfe-component',
|
|
28
|
+
render: ({ props }) => <div>{props.greeting}</div>,
|
|
29
|
+
})
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### 📚 Documentation
|
|
33
|
+
|
|
34
|
+
- Updated README examples to use `customElementName`
|
|
35
|
+
|
|
36
|
+
### 🧪 Tests
|
|
37
|
+
|
|
38
|
+
- Updated all test cases to use the new `customElementName` property
|
|
39
|
+
|
|
3
40
|
## [2.0.11] - 2026-03-06
|
|
4
41
|
|
|
5
42
|
### ⬆️ Dependencies
|
package/README.md
CHANGED
|
@@ -27,7 +27,7 @@ type MyMfeApi = {
|
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
const MyMfeComponent = Shade<MyMfeApi>({
|
|
30
|
-
|
|
30
|
+
customElementName: 'my-mfe-component',
|
|
31
31
|
render: ({ props }) => (
|
|
32
32
|
<div>
|
|
33
33
|
<h1>{props.greeting}</h1>
|
|
@@ -53,7 +53,7 @@ type MyMfeApi = {
|
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
const HostApp = Shade({
|
|
56
|
-
|
|
56
|
+
customElementName: 'host-app',
|
|
57
57
|
render: () => (
|
|
58
58
|
<MicroFrontend<MyMfeApi>
|
|
59
59
|
api={{
|
|
@@ -13,7 +13,7 @@ describe('createShadesMicroFrontend', () => {
|
|
|
13
13
|
});
|
|
14
14
|
it('should return a CreateMicroFrontendService instance', () => {
|
|
15
15
|
const TestComponent = Shade({
|
|
16
|
-
|
|
16
|
+
customElementName: 'test-mfe-return-type',
|
|
17
17
|
render: ({ props }) => createComponent("div", null, props.value),
|
|
18
18
|
});
|
|
19
19
|
const result = createShadesMicroFrontend(TestComponent);
|
|
@@ -23,7 +23,7 @@ describe('createShadesMicroFrontend', () => {
|
|
|
23
23
|
});
|
|
24
24
|
it('should create a child injector when create is called', async () => {
|
|
25
25
|
const TestComponent = Shade({
|
|
26
|
-
|
|
26
|
+
customElementName: 'test-mfe-child-injector',
|
|
27
27
|
render: ({ props }) => createComponent("div", null, props.value),
|
|
28
28
|
});
|
|
29
29
|
await usingAsync(new Injector(), async (parentInjector) => {
|
|
@@ -43,7 +43,7 @@ describe('createShadesMicroFrontend', () => {
|
|
|
43
43
|
it('should render the component with the provided API props', async () => {
|
|
44
44
|
const testValue = crypto.randomUUID();
|
|
45
45
|
const TestComponent = Shade({
|
|
46
|
-
|
|
46
|
+
customElementName: 'test-mfe-render-props',
|
|
47
47
|
render: ({ props }) => createComponent("div", { "data-testid": "content" },
|
|
48
48
|
"Value: ",
|
|
49
49
|
props.value),
|
|
@@ -62,7 +62,7 @@ describe('createShadesMicroFrontend', () => {
|
|
|
62
62
|
});
|
|
63
63
|
it('should render the component into the provided root element', async () => {
|
|
64
64
|
const TestComponent = Shade({
|
|
65
|
-
|
|
65
|
+
customElementName: 'test-mfe-root-element',
|
|
66
66
|
render: () => createComponent("span", null, "MFE Content"),
|
|
67
67
|
});
|
|
68
68
|
await usingAsync(new Injector(), async (injector) => {
|
|
@@ -81,7 +81,7 @@ describe('createShadesMicroFrontend', () => {
|
|
|
81
81
|
it('should work with complex API types', async () => {
|
|
82
82
|
const clickHandler = vi.fn();
|
|
83
83
|
const TestComponent = Shade({
|
|
84
|
-
|
|
84
|
+
customElementName: 'test-mfe-complex-api',
|
|
85
85
|
render: ({ props }) => (createComponent("div", null,
|
|
86
86
|
createComponent("span", { "data-testid": "user-name" }, props.user.name),
|
|
87
87
|
createComponent("span", { "data-testid": "item-count" }, props.items.length),
|
|
@@ -110,7 +110,7 @@ describe('createShadesMicroFrontend', () => {
|
|
|
110
110
|
it('should use the child injector for the shade root', async () => {
|
|
111
111
|
let capturedInjector;
|
|
112
112
|
const TestComponent = Shade({
|
|
113
|
-
|
|
113
|
+
customElementName: 'test-mfe-injector-capture',
|
|
114
114
|
render: ({ injector }) => {
|
|
115
115
|
capturedInjector = injector;
|
|
116
116
|
return createComponent("div", null, "Test");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create-shades-micro-frontend.spec.js","sourceRoot":"","sources":["../src/create-shades-micro-frontend.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AACxE,OAAO,EAAE,0BAA0B,EAAE,MAAM,mCAAmC,CAAA;AAC9E,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAA;AAE7E,QAAQ,CAAC,2BAA2B,EAAE,GAAG,EAAE;IACzC,UAAU,CAAC,GAAG,EAAE;QACd,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,uBAAuB,CAAA;IACnD,CAAC,CAAC,CAAA;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAA;IAC9B,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,qDAAqD,EAAE,GAAG,EAAE;QAC7D,MAAM,aAAa,GAAG,KAAK,CAAoB;YAC7C,
|
|
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.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Shade, createComponent } from '@furystack/shades';
|
|
2
2
|
export const MicroFrontend = Shade({
|
|
3
|
-
|
|
3
|
+
customElementName: 'shade-micro-frontend',
|
|
4
4
|
render: ({ props, injector, useDisposable, useRef }) => {
|
|
5
5
|
const containerRef = useRef('mfeContainer');
|
|
6
6
|
useDisposable('mfe-loader', () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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,
|
|
1
|
+
{"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,iBAAiB,EAAE,sBAAsB;IACzC,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"}
|
|
@@ -15,7 +15,7 @@ describe('<MicroFrontend /> component', () => {
|
|
|
15
15
|
await usingAsync(new Injector(), async (injector) => {
|
|
16
16
|
const rootElement = document.getElementById('root');
|
|
17
17
|
const MfeComponent = Shade({
|
|
18
|
-
|
|
18
|
+
customElementName: 'mfe-test-example',
|
|
19
19
|
render: ({ props }) => createComponent("div", null,
|
|
20
20
|
"Loaded: ",
|
|
21
21
|
props.value),
|
|
@@ -36,7 +36,7 @@ describe('<MicroFrontend /> component', () => {
|
|
|
36
36
|
await usingAsync(new Injector(), async (injector) => {
|
|
37
37
|
const rootElement = document.getElementById('root');
|
|
38
38
|
const MfeComponent = Shade({
|
|
39
|
-
|
|
39
|
+
customElementName: 'mfe-test-example-w-loader',
|
|
40
40
|
render: ({ props }) => createComponent("div", null,
|
|
41
41
|
"Loaded: ",
|
|
42
42
|
props.value),
|
|
@@ -78,7 +78,7 @@ describe('<MicroFrontend /> component', () => {
|
|
|
78
78
|
const value = crypto.randomUUID();
|
|
79
79
|
const destroy = vi.fn();
|
|
80
80
|
const Host = Shade({
|
|
81
|
-
|
|
81
|
+
customElementName: 'mfe-test-example-w-destroy-host',
|
|
82
82
|
render: ({ useState }) => {
|
|
83
83
|
const [hasMfe, setHasMfe] = useState('hasMfe', true);
|
|
84
84
|
return (createComponent(createComponent, null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"micro-frontend.spec.js","sourceRoot":"","sources":["../src/micro-frontend.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAEzD,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAC7F,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAA;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAEnD,QAAQ,CAAC,6BAA6B,EAAE,GAAG,EAAE;IAC3C,UAAU,CAAC,GAAG,EAAE;QACd,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,uBAAuB,CAAA;IACnD,CAAC,CAAC,CAAA;IACF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAA;IAC9B,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;QACzC,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;YAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;YAErE,MAAM,YAAY,GAAG,KAAK,CAAoB;gBAC5C,
|
|
1
|
+
{"version":3,"file":"micro-frontend.spec.js","sourceRoot":"","sources":["../src/micro-frontend.spec.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@furystack/shades-mfe",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "Micro-Frontend support for FuryStack Shades",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
@@ -38,10 +38,10 @@
|
|
|
38
38
|
"homepage": "https://github.com/furystack/furystack",
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@furystack/inject": "^12.0.32",
|
|
41
|
-
"@furystack/shades": "^
|
|
41
|
+
"@furystack/shades": "^13.0.0"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@types/node": "^25.3.
|
|
44
|
+
"@types/node": "^25.3.5",
|
|
45
45
|
"typescript": "^5.9.3",
|
|
46
46
|
"vitest": "^4.0.18"
|
|
47
47
|
},
|
|
@@ -16,7 +16,7 @@ describe('createShadesMicroFrontend', () => {
|
|
|
16
16
|
|
|
17
17
|
it('should return a CreateMicroFrontendService instance', () => {
|
|
18
18
|
const TestComponent = Shade<{ value: string }>({
|
|
19
|
-
|
|
19
|
+
customElementName: 'test-mfe-return-type',
|
|
20
20
|
render: ({ props }) => <div>{props.value}</div>,
|
|
21
21
|
})
|
|
22
22
|
|
|
@@ -29,7 +29,7 @@ describe('createShadesMicroFrontend', () => {
|
|
|
29
29
|
|
|
30
30
|
it('should create a child injector when create is called', async () => {
|
|
31
31
|
const TestComponent = Shade<{ value: string }>({
|
|
32
|
-
|
|
32
|
+
customElementName: 'test-mfe-child-injector',
|
|
33
33
|
render: ({ props }) => <div>{props.value}</div>,
|
|
34
34
|
})
|
|
35
35
|
|
|
@@ -55,7 +55,7 @@ describe('createShadesMicroFrontend', () => {
|
|
|
55
55
|
const testValue = crypto.randomUUID()
|
|
56
56
|
|
|
57
57
|
const TestComponent = Shade<{ value: string }>({
|
|
58
|
-
|
|
58
|
+
customElementName: 'test-mfe-render-props',
|
|
59
59
|
render: ({ props }) => <div data-testid="content">Value: {props.value}</div>,
|
|
60
60
|
})
|
|
61
61
|
|
|
@@ -77,7 +77,7 @@ describe('createShadesMicroFrontend', () => {
|
|
|
77
77
|
|
|
78
78
|
it('should render the component into the provided root element', async () => {
|
|
79
79
|
const TestComponent = Shade<object>({
|
|
80
|
-
|
|
80
|
+
customElementName: 'test-mfe-root-element',
|
|
81
81
|
render: () => <span>MFE Content</span>,
|
|
82
82
|
})
|
|
83
83
|
|
|
@@ -108,7 +108,7 @@ describe('createShadesMicroFrontend', () => {
|
|
|
108
108
|
const clickHandler = vi.fn()
|
|
109
109
|
|
|
110
110
|
const TestComponent = Shade<ComplexApi>({
|
|
111
|
-
|
|
111
|
+
customElementName: 'test-mfe-complex-api',
|
|
112
112
|
render: ({ props }) => (
|
|
113
113
|
<div>
|
|
114
114
|
<span data-testid="user-name">{props.user.name}</span>
|
|
@@ -148,7 +148,7 @@ describe('createShadesMicroFrontend', () => {
|
|
|
148
148
|
let capturedInjector: Injector | undefined
|
|
149
149
|
|
|
150
150
|
const TestComponent = Shade<object>({
|
|
151
|
-
|
|
151
|
+
customElementName: 'test-mfe-injector-capture',
|
|
152
152
|
render: ({ injector }) => {
|
|
153
153
|
capturedInjector = injector
|
|
154
154
|
return <div>Test</div>
|
|
@@ -19,7 +19,7 @@ describe('<MicroFrontend /> component', () => {
|
|
|
19
19
|
const rootElement = document.getElementById('root') as HTMLDivElement
|
|
20
20
|
|
|
21
21
|
const MfeComponent = Shade<{ value: string }>({
|
|
22
|
-
|
|
22
|
+
customElementName: 'mfe-test-example',
|
|
23
23
|
render: ({ props }) => <div>Loaded: {props.value}</div>,
|
|
24
24
|
})
|
|
25
25
|
|
|
@@ -51,7 +51,7 @@ describe('<MicroFrontend /> component', () => {
|
|
|
51
51
|
const rootElement = document.getElementById('root') as HTMLDivElement
|
|
52
52
|
|
|
53
53
|
const MfeComponent = Shade<{ value: string }>({
|
|
54
|
-
|
|
54
|
+
customElementName: 'mfe-test-example-w-loader',
|
|
55
55
|
render: ({ props }) => <div>Loaded: {props.value}</div>,
|
|
56
56
|
})
|
|
57
57
|
|
|
@@ -117,7 +117,7 @@ describe('<MicroFrontend /> component', () => {
|
|
|
117
117
|
const destroy = vi.fn()
|
|
118
118
|
|
|
119
119
|
const Host = Shade({
|
|
120
|
-
|
|
120
|
+
customElementName: 'mfe-test-example-w-destroy-host',
|
|
121
121
|
render: ({ useState }) => {
|
|
122
122
|
const [hasMfe, setHasMfe] = useState('hasMfe', true)
|
|
123
123
|
return (
|
package/src/micro-frontend.tsx
CHANGED
|
@@ -9,7 +9,7 @@ type MicroFrontendProps<TApi> = {
|
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
export const MicroFrontend: <TApi>(props: MicroFrontendProps<TApi>) => JSX.Element = Shade({
|
|
12
|
-
|
|
12
|
+
customElementName: 'shade-micro-frontend',
|
|
13
13
|
render: ({ props, injector, useDisposable, useRef }) => {
|
|
14
14
|
const containerRef = useRef<HTMLDivElement>('mfeContainer')
|
|
15
15
|
|