@granite-js/plugin-micro-frontend 2.5.4 → 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.
Files changed (9) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/README.md +6 -45
  3. package/dist/index.cjs +62 -63
  4. package/dist/index.js +62 -63
  5. package/dist/runtime/index.cjs +2 -2
  6. package/dist/runtime/index.d.cts +1 -1
  7. package/dist/runtime/index.d.ts +1 -1
  8. package/dist/runtime/index.js +2 -2
  9. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @granite-js/plugin-micro-frontend
2
2
 
3
+ ## 3.0.0
4
+
5
+ ### Patch Changes
6
+
7
+ - @granite-js/plugin-core@3.0.0
8
+ - @granite-js/utils@3.0.0
9
+
10
+ ## 2.5.5
11
+
12
+ ### Patch Changes
13
+
14
+ - @granite-js/plugin-core@2.5.5
15
+ - @granite-js/utils@2.5.5
16
+
3
17
  ## 2.5.4
4
18
 
5
19
  ### Patch Changes
@@ -105,6 +119,27 @@
105
119
  - @granite-js/plugin-core@2.0.0
106
120
  - @granite-js/utils@2.0.0
107
121
 
122
+ ## 1.0.45
123
+
124
+ ### Patch Changes
125
+
126
+ - @granite-js/plugin-core@1.0.45
127
+ - @granite-js/utils@1.0.45
128
+
129
+ ## 1.0.44
130
+
131
+ ### Patch Changes
132
+
133
+ - @granite-js/plugin-core@1.0.44
134
+ - @granite-js/utils@1.0.44
135
+
136
+ ## 1.0.43
137
+
138
+ ### Patch Changes
139
+
140
+ - @granite-js/plugin-core@1.0.43
141
+ - @granite-js/utils@1.0.43
142
+
108
143
  ## 1.0.42
109
144
 
110
145
  ### Patch Changes
package/README.md CHANGED
@@ -1,77 +1,38 @@
1
1
  # @granite-js/plugin-micro-frontend
2
2
 
3
- Plugin for sharing modules
3
+ Legacy Mpack plugin for sharing modules.
4
4
 
5
- ## Installation
5
+ ## Mpack (deprecated)
6
6
 
7
7
  ```bash
8
- # NPM
9
- npm install @granite-js/plugin-micro-frontend
10
-
11
- # pnpm
12
- pnpm add @granite-js/plugin-micro-frontend
13
-
14
- # yarn
15
8
  yarn add @granite-js/plugin-micro-frontend
16
9
  ```
17
10
 
18
- ## Usage
19
-
20
11
  ```ts
21
- import { defineConfig } from '@granite-js/react-native/config';
12
+ import { defineConfig } from '@granite-js/mpack/config';
22
13
  import { microFrontend } from '@granite-js/plugin-micro-frontend';
23
14
 
24
- // Example 1. Host container
25
15
  export default defineConfig({
26
16
  plugins: [
27
17
  microFrontend({
28
- /**
29
- * Container name
30
- */
31
18
  name: 'host',
32
- /**
33
- * Configuration for the remote field to emulate the internal `importLazy` behavior
34
- */
35
19
  remote: {
36
20
  host: 'localhost',
37
21
  port: 8082,
38
22
  },
39
- /**
40
- * Shared modules config
41
- */
42
23
  shared: {
43
- react: {
44
- /**
45
- * Whether the module is eager
46
- *
47
- * Specifies whether the module is eager; if true, it's bundled with the host, otherwise loaded from the shared registry
48
- */
49
- eager: true,
50
- },
51
- 'react-native': {
52
- eager: true,
53
- },
24
+ react: { eager: true },
25
+ 'react-native': { eager: true },
54
26
  },
55
27
  }),
56
28
  ],
57
29
  });
58
30
 
59
- // Example 2. Remote container
60
31
  export default defineConfig({
61
32
  plugins: [
62
33
  microFrontend({
63
- /**
64
- * Container name
65
- */
66
34
  name: 'remote',
67
- /**
68
- * Shared modules config
69
- */
70
- shared: [
71
- // Libraries are loaded from the shared registry
72
- 'react',
73
- 'react-native',
74
- ],
35
+ shared: ['react', 'react-native'],
75
36
  }),
76
37
  ],
77
38
  });
package/dist/index.cjs CHANGED
@@ -34,41 +34,75 @@ let _granite_js_utils = require("@granite-js/utils");
34
34
  let picocolors = require("picocolors");
35
35
  picocolors = __toESM(picocolors);
36
36
 
37
+ //#region src/utils/intoShared.ts
38
+ const SHARED_PRESETS = {
39
+ "react-native": [
40
+ "react-native/Libraries/BatchedBridge/BatchedBridge",
41
+ "react-native/Libraries/BatchedBridge/NativeModules",
42
+ "react-native/Libraries/BatchedBridge/MessageQueue",
43
+ "react-native/Libraries/NativeComponent/NativeComponentRegistry",
44
+ "react-native/Libraries/NativeComponent/NativeComponentRegistryUnstable",
45
+ "react-native/Libraries/NativeComponent/ViewConfigIgnore",
46
+ "react-native/Libraries/ReactNative/RendererProxy",
47
+ "react-native/Libraries/StyleSheet/PlatformColorValueTypes",
48
+ "react-native/Libraries/StyleSheet/normalizeColor",
49
+ "react-native/Libraries/StyleSheet/processColor",
50
+ "react-native/Libraries/TurboModule/TurboModuleRegistry",
51
+ "react-native/Libraries/Utilities/NativePlatformConstantsIOS",
52
+ "react-native/Libraries/Utilities/Platform",
53
+ "react-native/Libraries/Utilities/defineLazyObjectProperty"
54
+ ],
55
+ react: ["react/jsx-runtime", "react/jsx-dev-runtime"]
56
+ };
57
+ function intoShared(shared) {
58
+ if (shared == null) return;
59
+ const normalized = Array.isArray(shared) ? shared.reduce((acc, lib) => {
60
+ acc[lib] = {};
61
+ return acc;
62
+ }, {}) : { ...shared };
63
+ for (const [lib, subpaths] of Object.entries(SHARED_PRESETS)) {
64
+ const libConfig = normalized[lib];
65
+ if (libConfig == null) continue;
66
+ for (const subpath of subpaths) if (normalized[subpath] == null) normalized[subpath] = { ...libConfig };
67
+ }
68
+ return normalized;
69
+ }
70
+
71
+ //#endregion
37
72
  //#region src/prelude.ts
38
73
  function getPreludeConfig(options) {
39
- const registerStatements = Object.entries(options.shared ?? {}).filter(([_, config]) => config.eager === true).map(([libName], index) => {
74
+ const shared = intoShared(options.shared);
75
+ const registerStatements = Object.entries(shared ?? {}).filter(([_, config]) => config.eager === true).map(([libName], index) => {
40
76
  const identifier = `__mod${index}`;
41
- return `
42
- // ${libName}
43
- import * as ${identifier} from '${libName}';
44
- registerShared('${libName}', ${identifier});
45
- `;
77
+ return [
78
+ `// ${libName}`,
79
+ `import * as ${identifier} from '${libName}';`,
80
+ `registerShared('${libName}', ${identifier});`
81
+ ].join("\n");
46
82
  });
47
83
  const exposeStatements = Object.entries(options.exposes ?? {}).map(([exposeName, modulePath], index) => {
48
84
  const identifier = `__expose${index}`;
49
- return `
50
- import * as ${identifier} from '${path.default.resolve(modulePath)}';
51
- exposeModule(__container, '${exposeName}', ${identifier});
52
- `;
85
+ return [`import * as ${identifier} from '${path.default.resolve(modulePath)}';`, `exposeModule(__container, '${exposeName}', ${identifier});`].join("\n");
53
86
  });
87
+ const preludeScript = [
88
+ `import { registerShared, createContainer, exposeModule } from '@granite-js/plugin-micro-frontend/runtime';`,
89
+ `const __container = createContainer('${options.name}', ${JSON.stringify({
90
+ remote: options.remote,
91
+ shared
92
+ })});`,
93
+ ...registerStatements,
94
+ ...exposeStatements
95
+ ].join("\n");
54
96
  return {
55
- banner: `
56
- if (global.__MICRO_FRONTEND__ == null) {
57
- global.__MICRO_FRONTEND__ = {
58
- __SHARED__: {},
59
- __INSTANCES__: [],
60
- };
61
- }
62
- `,
63
- preludeScript: [
64
- `import { registerShared, createContainer, exposeModule } from '@granite-js/plugin-micro-frontend/runtime';`,
65
- `const __container = createContainer('${options.name}', ${JSON.stringify({
66
- remote: options.remote,
67
- shared: options.shared
68
- })});`,
69
- ...registerStatements,
70
- ...exposeStatements
71
- ].join("\n")
97
+ banner: [
98
+ "if (global.__MICRO_FRONTEND__ == null) {",
99
+ " global.__MICRO_FRONTEND__ = {",
100
+ " __SHARED__: {},",
101
+ " __INSTANCES__: [],",
102
+ " };",
103
+ "}"
104
+ ].join("\n"),
105
+ preludeScript
72
106
  };
73
107
  }
74
108
 
@@ -132,41 +166,6 @@ function virtualSharedConfig(moduleEntries) {
132
166
  };
133
167
  }
134
168
 
135
- //#endregion
136
- //#region src/utils/intoShared.ts
137
- const SHARED_PRESETS = {
138
- "react-native": [
139
- "react-native/Libraries/BatchedBridge/BatchedBridge",
140
- "react-native/Libraries/BatchedBridge/NativeModules",
141
- "react-native/Libraries/BatchedBridge/MessageQueue",
142
- "react-native/Libraries/NativeComponent/NativeComponentRegistry",
143
- "react-native/Libraries/NativeComponent/NativeComponentRegistryUnstable",
144
- "react-native/Libraries/NativeComponent/ViewConfigIgnore",
145
- "react-native/Libraries/ReactNative/RendererProxy",
146
- "react-native/Libraries/StyleSheet/PlatformColorValueTypes",
147
- "react-native/Libraries/StyleSheet/normalizeColor",
148
- "react-native/Libraries/StyleSheet/processColor",
149
- "react-native/Libraries/TurboModule/TurboModuleRegistry",
150
- "react-native/Libraries/Utilities/NativePlatformConstantsIOS",
151
- "react-native/Libraries/Utilities/Platform",
152
- "react-native/Libraries/Utilities/defineLazyObjectProperty"
153
- ],
154
- react: ["react/jsx-runtime", "react/jsx-dev-runtime"]
155
- };
156
- function intoShared(shared) {
157
- if (shared == null) return;
158
- const normalized = Array.isArray(shared) ? shared.reduce((acc, lib) => {
159
- acc[lib] = {};
160
- return acc;
161
- }, {}) : { ...shared };
162
- for (const [lib, subpaths] of Object.entries(SHARED_PRESETS)) {
163
- const libConfig = normalized[lib];
164
- if (libConfig == null) continue;
165
- for (const subpath of subpaths) if (normalized[subpath] == null) normalized[subpath] = { ...libConfig };
166
- }
167
- return normalized;
168
- }
169
-
170
169
  //#endregion
171
170
  //#region src/microFrontendPlugin.ts
172
171
  const microFrontendPlugin = async (options) => {
@@ -181,7 +180,7 @@ const microFrontendPlugin = async (options) => {
181
180
  const preludePath = path.join(localDir, "micro-frontend-runtime.js");
182
181
  fs.writeFileSync(preludePath, preludeConfig.preludeScript);
183
182
  /**
184
- * @TODO `MPACK_DEV_SERVER` flag should be removed after next version of bundle loader is released and load bundle dynamically at JS runtime.
183
+ * @TODO Remove `MPACK_DEV_SERVER` after the next bundle loader is released and let the JavaScript runtime load the bundle dynamically.
185
184
  */
186
185
  if (process.env.MPACK_DEV_SERVER === "true" && options.remote) await fetchRemoteBundle(options.remote);
187
186
  /**
package/dist/index.js CHANGED
@@ -4,41 +4,75 @@ import path from "path";
4
4
  import { prepareLocalDirectory } from "@granite-js/utils";
5
5
  import pc from "picocolors";
6
6
 
7
+ //#region src/utils/intoShared.ts
8
+ const SHARED_PRESETS = {
9
+ "react-native": [
10
+ "react-native/Libraries/BatchedBridge/BatchedBridge",
11
+ "react-native/Libraries/BatchedBridge/NativeModules",
12
+ "react-native/Libraries/BatchedBridge/MessageQueue",
13
+ "react-native/Libraries/NativeComponent/NativeComponentRegistry",
14
+ "react-native/Libraries/NativeComponent/NativeComponentRegistryUnstable",
15
+ "react-native/Libraries/NativeComponent/ViewConfigIgnore",
16
+ "react-native/Libraries/ReactNative/RendererProxy",
17
+ "react-native/Libraries/StyleSheet/PlatformColorValueTypes",
18
+ "react-native/Libraries/StyleSheet/normalizeColor",
19
+ "react-native/Libraries/StyleSheet/processColor",
20
+ "react-native/Libraries/TurboModule/TurboModuleRegistry",
21
+ "react-native/Libraries/Utilities/NativePlatformConstantsIOS",
22
+ "react-native/Libraries/Utilities/Platform",
23
+ "react-native/Libraries/Utilities/defineLazyObjectProperty"
24
+ ],
25
+ react: ["react/jsx-runtime", "react/jsx-dev-runtime"]
26
+ };
27
+ function intoShared(shared) {
28
+ if (shared == null) return;
29
+ const normalized = Array.isArray(shared) ? shared.reduce((acc, lib) => {
30
+ acc[lib] = {};
31
+ return acc;
32
+ }, {}) : { ...shared };
33
+ for (const [lib, subpaths] of Object.entries(SHARED_PRESETS)) {
34
+ const libConfig = normalized[lib];
35
+ if (libConfig == null) continue;
36
+ for (const subpath of subpaths) if (normalized[subpath] == null) normalized[subpath] = { ...libConfig };
37
+ }
38
+ return normalized;
39
+ }
40
+
41
+ //#endregion
7
42
  //#region src/prelude.ts
8
43
  function getPreludeConfig(options) {
9
- const registerStatements = Object.entries(options.shared ?? {}).filter(([_, config]) => config.eager === true).map(([libName], index) => {
44
+ const shared = intoShared(options.shared);
45
+ const registerStatements = Object.entries(shared ?? {}).filter(([_, config]) => config.eager === true).map(([libName], index) => {
10
46
  const identifier = `__mod${index}`;
11
- return `
12
- // ${libName}
13
- import * as ${identifier} from '${libName}';
14
- registerShared('${libName}', ${identifier});
15
- `;
47
+ return [
48
+ `// ${libName}`,
49
+ `import * as ${identifier} from '${libName}';`,
50
+ `registerShared('${libName}', ${identifier});`
51
+ ].join("\n");
16
52
  });
17
53
  const exposeStatements = Object.entries(options.exposes ?? {}).map(([exposeName, modulePath], index) => {
18
54
  const identifier = `__expose${index}`;
19
- return `
20
- import * as ${identifier} from '${path.resolve(modulePath)}';
21
- exposeModule(__container, '${exposeName}', ${identifier});
22
- `;
55
+ return [`import * as ${identifier} from '${path.resolve(modulePath)}';`, `exposeModule(__container, '${exposeName}', ${identifier});`].join("\n");
23
56
  });
57
+ const preludeScript = [
58
+ `import { registerShared, createContainer, exposeModule } from '@granite-js/plugin-micro-frontend/runtime';`,
59
+ `const __container = createContainer('${options.name}', ${JSON.stringify({
60
+ remote: options.remote,
61
+ shared
62
+ })});`,
63
+ ...registerStatements,
64
+ ...exposeStatements
65
+ ].join("\n");
24
66
  return {
25
- banner: `
26
- if (global.__MICRO_FRONTEND__ == null) {
27
- global.__MICRO_FRONTEND__ = {
28
- __SHARED__: {},
29
- __INSTANCES__: [],
30
- };
31
- }
32
- `,
33
- preludeScript: [
34
- `import { registerShared, createContainer, exposeModule } from '@granite-js/plugin-micro-frontend/runtime';`,
35
- `const __container = createContainer('${options.name}', ${JSON.stringify({
36
- remote: options.remote,
37
- shared: options.shared
38
- })});`,
39
- ...registerStatements,
40
- ...exposeStatements
41
- ].join("\n")
67
+ banner: [
68
+ "if (global.__MICRO_FRONTEND__ == null) {",
69
+ " global.__MICRO_FRONTEND__ = {",
70
+ " __SHARED__: {},",
71
+ " __INSTANCES__: [],",
72
+ " };",
73
+ "}"
74
+ ].join("\n"),
75
+ preludeScript
42
76
  };
43
77
  }
44
78
 
@@ -102,41 +136,6 @@ function virtualSharedConfig(moduleEntries) {
102
136
  };
103
137
  }
104
138
 
105
- //#endregion
106
- //#region src/utils/intoShared.ts
107
- const SHARED_PRESETS = {
108
- "react-native": [
109
- "react-native/Libraries/BatchedBridge/BatchedBridge",
110
- "react-native/Libraries/BatchedBridge/NativeModules",
111
- "react-native/Libraries/BatchedBridge/MessageQueue",
112
- "react-native/Libraries/NativeComponent/NativeComponentRegistry",
113
- "react-native/Libraries/NativeComponent/NativeComponentRegistryUnstable",
114
- "react-native/Libraries/NativeComponent/ViewConfigIgnore",
115
- "react-native/Libraries/ReactNative/RendererProxy",
116
- "react-native/Libraries/StyleSheet/PlatformColorValueTypes",
117
- "react-native/Libraries/StyleSheet/normalizeColor",
118
- "react-native/Libraries/StyleSheet/processColor",
119
- "react-native/Libraries/TurboModule/TurboModuleRegistry",
120
- "react-native/Libraries/Utilities/NativePlatformConstantsIOS",
121
- "react-native/Libraries/Utilities/Platform",
122
- "react-native/Libraries/Utilities/defineLazyObjectProperty"
123
- ],
124
- react: ["react/jsx-runtime", "react/jsx-dev-runtime"]
125
- };
126
- function intoShared(shared) {
127
- if (shared == null) return;
128
- const normalized = Array.isArray(shared) ? shared.reduce((acc, lib) => {
129
- acc[lib] = {};
130
- return acc;
131
- }, {}) : { ...shared };
132
- for (const [lib, subpaths] of Object.entries(SHARED_PRESETS)) {
133
- const libConfig = normalized[lib];
134
- if (libConfig == null) continue;
135
- for (const subpath of subpaths) if (normalized[subpath] == null) normalized[subpath] = { ...libConfig };
136
- }
137
- return normalized;
138
- }
139
-
140
139
  //#endregion
141
140
  //#region src/microFrontendPlugin.ts
142
141
  const microFrontendPlugin = async (options) => {
@@ -151,7 +150,7 @@ const microFrontendPlugin = async (options) => {
151
150
  const preludePath = path$1.join(localDir, "micro-frontend-runtime.js");
152
151
  fs.writeFileSync(preludePath, preludeConfig.preludeScript);
153
152
  /**
154
- * @TODO `MPACK_DEV_SERVER` flag should be removed after next version of bundle loader is released and load bundle dynamically at JS runtime.
153
+ * @TODO Remove `MPACK_DEV_SERVER` after the next bundle loader is released and let the JavaScript runtime load the bundle dynamically.
155
154
  */
156
155
  if (process.env.MPACK_DEV_SERVER === "true" && options.remote) await fetchRemoteBundle(options.remote);
157
156
  /**
package/dist/runtime/index.cjs CHANGED
@@ -21,8 +21,8 @@ function createContainer(name, config) {
21
21
  //#endregion
22
22
  //#region src/runtime/utils.ts
23
23
  function getContainer(instanceName) {
24
- const containerIndex = __MICRO_FRONTEND__.__INSTANCES__[instanceName];
25
- return typeof containerIndex === "number" ? __MICRO_FRONTEND__.__INSTANCES__[containerIndex] : null;
24
+ const containerIndex = global.__MICRO_FRONTEND__.__INSTANCES__[instanceName];
25
+ return typeof containerIndex === "number" ? global.__MICRO_FRONTEND__.__INSTANCES__[containerIndex] : null;
26
26
  }
27
27
  function normalizePath(path) {
28
28
  if (path.startsWith("./")) return path.slice(2);
package/dist/runtime/index.d.cts CHANGED
@@ -61,7 +61,7 @@ declare function registerShared(libName: string, module: Module): void;
61
61
  declare function exposeModule(container: Container, exposeName: string, module: Module): void;
62
62
  //#endregion
63
63
  //#region src/runtime/utils.d.ts
64
- declare function getContainer(instanceName: string): Container | null;
64
+ declare function getContainer(instanceName: string): any;
65
65
  declare function parseRemotePath(remotePath: string): {
66
66
  remoteName: string;
67
67
  modulePath: string;
package/dist/runtime/index.d.ts CHANGED
@@ -61,7 +61,7 @@ declare function registerShared(libName: string, module: Module): void;
61
61
  declare function exposeModule(container: Container, exposeName: string, module: Module): void;
62
62
  //#endregion
63
63
  //#region src/runtime/utils.d.ts
64
- declare function getContainer(instanceName: string): Container | null;
64
+ declare function getContainer(instanceName: string): any;
65
65
  declare function parseRemotePath(remotePath: string): {
66
66
  remoteName: string;
67
67
  modulePath: string;
package/dist/runtime/index.js CHANGED
@@ -19,8 +19,8 @@ function createContainer(name, config) {
19
19
  //#endregion
20
20
  //#region src/runtime/utils.ts
21
21
  function getContainer(instanceName) {
22
- const containerIndex = __MICRO_FRONTEND__.__INSTANCES__[instanceName];
23
- return typeof containerIndex === "number" ? __MICRO_FRONTEND__.__INSTANCES__[containerIndex] : null;
22
+ const containerIndex = global.__MICRO_FRONTEND__.__INSTANCES__[instanceName];
23
+ return typeof containerIndex === "number" ? global.__MICRO_FRONTEND__.__INSTANCES__[containerIndex] : null;
24
24
  }
25
25
  function normalizePath(path) {
26
26
  if (path.startsWith("./")) return path.slice(2);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@granite-js/plugin-micro-frontend",
3
3
  "type": "module",
4
- "version": "2.5.4",
4
+ "version": "3.0.0",
5
5
  "description": "Plugin for micro frontend",
6
6
  "scripts": {
7
7
  "prepack": "yarn build",
@@ -51,8 +51,8 @@
51
51
  "vitest": "^4.0.12"
52
52
  },
53
53
  "dependencies": {
54
- "@granite-js/plugin-core": "2.5.4",
55
- "@granite-js/utils": "2.5.4",
54
+ "@granite-js/plugin-core": "3.0.0",
55
+ "@granite-js/utils": "3.0.0",
56
56
  "es-toolkit": "^1.39.8",
57
57
  "picocolors": "^1.1.1"
58
58
  },