diff --git a/packages/examples/vue3-demo-esm-shared-store/__tests__/vue3-demo-esm-shared-styled.serve.spec.ts b/packages/examples/vue3-demo-esm-shared-store/__tests__/vue3-demo-esm-shared-styled.serve.spec.ts new file mode 100644 index 00000000..65603cc1 --- /dev/null +++ b/packages/examples/vue3-demo-esm-shared-store/__tests__/vue3-demo-esm-shared-styled.serve.spec.ts @@ -0,0 +1,30 @@ +import { expect, test } from 'vitest' +import path from 'node:path' +import fs from 'node:fs' + +function readFileWithRegexPattern(dirPath, regexPattern) { + // Get all files in the directory + const files = fs.readdirSync(dirPath); + + // Find the file that matches the regex pattern + const matchedFile = files.find(file => regexPattern.test(file)); + + if (!matchedFile) { + throw new Error(`No file found matching pattern: ${regexPattern}`); + } + + // Read and return the file content + return fs.readFileSync(path.join(dirPath, matchedFile), 'utf-8'); +} + +test('should have css imported', () => { + const dirPath = path.resolve(__dirname, '../host/dist/assets'); + const regexPattern = /^__federation_shared_shared-styled-.*\.js$/; + try { + const css = readFileWithRegexPattern(dirPath, regexPattern) + expect(css).toMatch(/import.+\.css';/) + } catch (error) { + console.error(error) + } +}) + diff --git a/packages/examples/vue3-demo-esm-shared-store/host/package.json b/packages/examples/vue3-demo-esm-shared-store/host/package.json index 4701d033..d42e677a 100644 --- a/packages/examples/vue3-demo-esm-shared-store/host/package.json +++ b/packages/examples/vue3-demo-esm-shared-store/host/package.json @@ -10,7 +10,8 @@ }, "dependencies": { "vue": "^3.2.45", - "pinia": "^2.0.21" + "pinia": "^2.0.21", + "shared-styled": "file:./shared-styled" }, "devDependencies": { "@vitejs/plugin-vue": "^4.0.0", diff --git a/packages/examples/vue3-demo-esm-shared-store/host/shared-styled/index.js b/packages/examples/vue3-demo-esm-shared-store/host/shared-styled/index.js new file mode 100644 index 00000000..03c618ab --- /dev/null +++ b/packages/examples/vue3-demo-esm-shared-store/host/shared-styled/index.js @@ -0,0 +1,3 @@ +import './style.css' + +export {} diff --git a/packages/examples/vue3-demo-esm-shared-store/host/shared-styled/package.json b/packages/examples/vue3-demo-esm-shared-store/host/shared-styled/package.json new file mode 100644 index 00000000..8432962d --- /dev/null +++ b/packages/examples/vue3-demo-esm-shared-store/host/shared-styled/package.json @@ -0,0 +1,5 @@ +{ + "name": "shared-styled", + "version": "1.0.0", + "main": "index.js" +} diff --git a/packages/examples/vue3-demo-esm-shared-store/host/shared-styled/style.css b/packages/examples/vue3-demo-esm-shared-store/host/shared-styled/style.css new file mode 100644 index 00000000..a15c877a --- /dev/null +++ b/packages/examples/vue3-demo-esm-shared-store/host/shared-styled/style.css @@ -0,0 +1,3 @@ +.foo { + color: red; +} diff --git a/packages/examples/vue3-demo-esm-shared-store/host/src/main.js b/packages/examples/vue3-demo-esm-shared-store/host/src/main.js index 415898ce..eee7ad83 100644 --- a/packages/examples/vue3-demo-esm-shared-store/host/src/main.js +++ b/packages/examples/vue3-demo-esm-shared-store/host/src/main.js @@ -1,5 +1,6 @@ import { createApp} from "vue"; import { createPinia } from 'pinia' +import 'shared-styled' import App from "./App.vue"; const app = createApp(App); diff --git a/packages/examples/vue3-demo-esm-shared-store/host/vite.config.ts b/packages/examples/vue3-demo-esm-shared-store/host/vite.config.ts index 30609bc8..8294b8e3 100644 --- a/packages/examples/vue3-demo-esm-shared-store/host/vite.config.ts +++ b/packages/examples/vue3-demo-esm-shared-store/host/vite.config.ts @@ -34,7 +34,8 @@ export default defineConfig({ myStore: { packagePath: './src/store.js', modulePreload: true, - } + }, + 'shared-styled': {} } }) ], diff --git a/packages/lib/src/prod/shared-production.ts b/packages/lib/src/prod/shared-production.ts index 848fa0ed..68874263 100644 --- a/packages/lib/src/prod/shared-production.ts +++ b/packages/lib/src/prod/shared-production.ts @@ -13,11 +13,14 @@ // SPDX-License-Identifier: MulanPSL-2.0 // ***************************************************************************** +import MagicString from 'magic-string' import type { PluginHooks } from '../../types/pluginHooks' import { NAME_CHAR_REG, parseSharedOptions, removeNonRegLetter } from '../utils' -import { parsedOptions } from '../public' +import { parsedOptions, builderInfo } from '../public' import type { ConfigTypeSet, VitePluginFederationOptions } from 'types' -import { basename, join, resolve } from 'path' +import type { RenderedChunk } from 'rollup' +import type { ChunkMetadata } from 'vite' +import { basename, join, resolve, relative, dirname } from 'path' import { readdirSync, readFileSync, statSync } from 'fs' const sharedFilePathReg = /__federation_shared_(.+)-.{8}\.js$/ import federation_fn_import from './federation_fn_import.js?raw' @@ -151,6 +154,38 @@ export function prodSharedPlugin( } }, + renderChunk(this, code, _chunk) { + if (builderInfo.isShared) { + const chunk = _chunk as RenderedChunk & { viteMetadata?: ChunkMetadata } + const regRst = sharedFilePathReg.exec(chunk.fileName) + if ( + regRst && + shareName2Prop.get(removeNonRegLetter(regRst[1], NAME_CHAR_REG)) + ?.generate !== false && + chunk.type === 'chunk' && + chunk.viteMetadata?.importedCss.size + ) { + /** + * Inject the referenced style files at the top of the chunk. + */ + const magicString = new MagicString(code) + for (const cssFileName of chunk.viteMetadata.importedCss) { + let cssFilePath = relative(dirname(chunk.fileName), cssFileName) + cssFilePath = cssFilePath.startsWith('.') + ? cssFilePath + : `./${cssFilePath}` + + magicString.prepend(`import '${cssFilePath}';`) + } + + return { + code: magicString.toString(), + map: magicString.generateMap({ hires: true }) + } + } + } + }, + outputOptions: function (outputOption) { // remove rollup generated empty imports,like import './filename.js' outputOption.hoistTransitiveImports = false diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 50b356f9..36a85df0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -430,7 +430,7 @@ importers: version: 7.18.6(@babel/core@7.20.7) babel-loader: specifier: ^9.1.0 - version: 9.1.0(@babel/core@7.20.7)(webpack@5.76.0(webpack-cli@5.0.1)) + version: 9.1.0(@babel/core@7.20.7)(webpack@5.76.0) npm-run-all: specifier: 4.1.5 version: 4.1.5 @@ -645,6 +645,9 @@ importers: pinia: specifier: ^2.0.21 version: 2.0.21(typescript@4.9.4)(vue@3.2.45) + shared-styled: + specifier: file:./shared-styled + version: link:shared-styled vue: specifier: ^3.2.45 version: 3.2.45 @@ -656,6 +659,8 @@ importers: specifier: ^4.0.5 version: 4.0.5(@types/node@18.6.4)(terser@5.14.1) + packages/examples/vue3-demo-esm-shared-store/host/shared-styled: {} + packages/examples/vue3-demo-esm-shared-store/remote-A: dependencies: pinia: @@ -875,7 +880,7 @@ importers: version: 7.20.7 babel-loader: specifier: ^9.1.0 - version: 9.1.0(@babel/core@7.20.7)(webpack@5.76.0(webpack-cli@5.0.1)) + version: 9.1.0(@babel/core@7.20.7)(webpack@5.76.0) serve: specifier: ^14.0.0 version: 14.0.1 @@ -885,22 +890,22 @@ importers: devDependencies: css-loader: specifier: ^6.7.1 - version: 6.7.1(webpack@5.76.0(webpack-cli@5.0.1)) + version: 6.7.1(webpack@5.76.0) file-loader: specifier: ^6.2.0 - version: 6.2.0(webpack@5.76.0(webpack-cli@5.0.1)) + version: 6.2.0(webpack@5.76.0) html-webpack-plugin: specifier: ^5.3.2 - version: 5.3.2(webpack@5.76.0(webpack-cli@5.0.1)) + version: 5.3.2(webpack@5.76.0) mini-css-extract-plugin: specifier: ^2.6.1 - version: 2.6.1(webpack@5.76.0(webpack-cli@5.0.1)) + version: 2.6.1(webpack@5.76.0) url-loader: specifier: ^4.1.1 - version: 4.1.1(file-loader@6.2.0(webpack@5.76.0(webpack-cli@5.0.1)))(webpack@5.76.0(webpack-cli@5.0.1)) + version: 4.1.1(file-loader@6.2.0(webpack@5.76.0))(webpack@5.76.0) vue-loader: specifier: ^17.0.0 - version: 17.0.0(webpack@5.76.0(webpack-cli@5.0.1)) + version: 17.0.0(webpack@5.76.0) webpack: specifier: ^5.76.0 version: 5.76.0(webpack-cli@5.0.1) @@ -943,7 +948,7 @@ importers: version: 7.20.7 babel-loader: specifier: ^9.1.0 - version: 9.1.0(@babel/core@7.20.7)(webpack@5.76.0(webpack-cli@5.0.1)) + version: 9.1.0(@babel/core@7.20.7)(webpack@5.76.0) serve: specifier: ^14.0.0 version: 14.0.1 @@ -953,22 +958,22 @@ importers: devDependencies: css-loader: specifier: 6.3.0 - version: 6.3.0(webpack@5.76.0(webpack-cli@5.0.1)) + version: 6.3.0(webpack@5.76.0) file-loader: specifier: 6.2.0 - version: 6.2.0(webpack@5.76.0(webpack-cli@5.0.1)) + version: 6.2.0(webpack@5.76.0) html-webpack-plugin: specifier: 5.3.2 - version: 5.3.2(webpack@5.76.0(webpack-cli@5.0.1)) + version: 5.3.2(webpack@5.76.0) mini-css-extract-plugin: specifier: 2.6.1 - version: 2.6.1(webpack@5.76.0(webpack-cli@5.0.1)) + version: 2.6.1(webpack@5.76.0) url-loader: specifier: 4.1.1 - version: 4.1.1(file-loader@6.2.0(webpack@5.76.0(webpack-cli@5.0.1)))(webpack@5.76.0(webpack-cli@5.0.1)) + version: 4.1.1(file-loader@6.2.0(webpack@5.76.0))(webpack@5.76.0) vue-loader: specifier: 17.0.0 - version: 17.0.0(webpack@5.76.0(webpack-cli@5.0.1)) + version: 17.0.0(webpack@5.76.0) webpack: specifier: ^5.76.0 version: 5.76.0(webpack-cli@5.0.1) @@ -1014,7 +1019,7 @@ importers: version: 7.20.7 babel-loader: specifier: ^9.1.0 - version: 9.1.0(@babel/core@7.20.7)(webpack@5.76.0(webpack-cli@5.0.1)) + version: 9.1.0(@babel/core@7.20.7)(webpack@5.76.0) serve: specifier: ^14.0.0 version: 14.0.1 @@ -1024,22 +1029,22 @@ importers: devDependencies: css-loader: specifier: 6.3.0 - version: 6.3.0(webpack@5.76.0(webpack-cli@5.0.1)) + version: 6.3.0(webpack@5.76.0) file-loader: specifier: 6.2.0 - version: 6.2.0(webpack@5.76.0(webpack-cli@5.0.1)) + version: 6.2.0(webpack@5.76.0) html-webpack-plugin: specifier: 5.3.2 - version: 5.3.2(webpack@5.76.0(webpack-cli@5.0.1)) + version: 5.3.2(webpack@5.76.0) mini-css-extract-plugin: specifier: 2.6.1 - version: 2.6.1(webpack@5.76.0(webpack-cli@5.0.1)) + version: 2.6.1(webpack@5.76.0) url-loader: specifier: 4.1.1 - version: 4.1.1(file-loader@6.2.0(webpack@5.76.0(webpack-cli@5.0.1)))(webpack@5.76.0(webpack-cli@5.0.1)) + version: 4.1.1(file-loader@6.2.0(webpack@5.76.0))(webpack@5.76.0) vue-loader: specifier: 17.0.0 - version: 17.0.0(webpack@5.76.0(webpack-cli@5.0.1)) + version: 17.0.0(webpack@5.76.0) webpack: specifier: ^5.76.0 version: 5.76.0(webpack-cli@5.0.1) @@ -1095,13 +1100,13 @@ importers: version: 7.18.6(@babel/core@7.20.7) babel-loader: specifier: ^9.1.0 - version: 9.1.0(@babel/core@7.20.7)(webpack@5.76.0(webpack-cli@5.0.1)) + version: 9.1.0(@babel/core@7.20.7)(webpack@5.76.0) css-loader: specifier: ^6.7.3 - version: 6.7.3(webpack@5.76.0(webpack-cli@5.0.1)) + version: 6.7.3(webpack@5.76.0) html-webpack-plugin: specifier: ^5.5.0 - version: 5.5.0(webpack@5.76.0(webpack-cli@5.0.1)) + version: 5.5.0(webpack@5.76.0) npm-run-all: specifier: 4.1.5 version: 4.1.5 @@ -7215,34 +7220,24 @@ snapshots: '@webassemblyjs/ast': 1.11.1 '@xtuc/long': 4.2.2 - '@webpack-cli/configtest@2.0.1(webpack-cli@5.0.1(webpack-dev-server@4.11.1)(webpack@5.76.0))(webpack@5.76.0(webpack-cli@5.0.1))': + '@webpack-cli/configtest@2.0.1(webpack-cli@5.0.1)(webpack@5.76.0)': dependencies: webpack: 5.76.0(webpack-cli@5.0.1) webpack-cli: 5.0.1(webpack-dev-server@4.11.1)(webpack@5.76.0) - '@webpack-cli/configtest@2.0.1(webpack-cli@5.0.1(webpack@5.76.0))(webpack@5.76.0(webpack-cli@5.0.1))': - dependencies: - webpack: 5.76.0(webpack-cli@5.0.1) - webpack-cli: 5.0.1(webpack@5.76.0) - - '@webpack-cli/info@2.0.1(webpack-cli@5.0.1(webpack-dev-server@4.11.1)(webpack@5.76.0))(webpack@5.76.0(webpack-cli@5.0.1))': + '@webpack-cli/info@2.0.1(webpack-cli@5.0.1)(webpack@5.76.0)': dependencies: webpack: 5.76.0(webpack-cli@5.0.1) webpack-cli: 5.0.1(webpack-dev-server@4.11.1)(webpack@5.76.0) - '@webpack-cli/info@2.0.1(webpack-cli@5.0.1(webpack@5.76.0))(webpack@5.76.0(webpack-cli@5.0.1))': - dependencies: - webpack: 5.76.0(webpack-cli@5.0.1) - webpack-cli: 5.0.1(webpack@5.76.0) - - '@webpack-cli/serve@2.0.1(webpack-cli@5.0.1(webpack-dev-server@4.11.1)(webpack@5.76.0))(webpack-dev-server@4.11.1(webpack-cli@5.0.1)(webpack@5.76.0))(webpack@5.76.0(webpack-cli@5.0.1))': + '@webpack-cli/serve@2.0.1(webpack-cli@5.0.1)(webpack-dev-server@4.11.1)(webpack@5.76.0)': dependencies: webpack: 5.76.0(webpack-cli@5.0.1) webpack-cli: 5.0.1(webpack-dev-server@4.11.1)(webpack@5.76.0) optionalDependencies: webpack-dev-server: 4.11.1(webpack-cli@5.0.1)(webpack@5.76.0) - '@webpack-cli/serve@2.0.1(webpack-cli@5.0.1(webpack@5.76.0))(webpack@5.76.0(webpack-cli@5.0.1))': + '@webpack-cli/serve@2.0.1(webpack-cli@5.0.1)(webpack@5.76.0)': dependencies: webpack: 5.76.0(webpack-cli@5.0.1) webpack-cli: 5.0.1(webpack@5.76.0) @@ -7374,7 +7369,7 @@ snapshots: postcss: 8.4.31 postcss-value-parser: 4.2.0 - babel-loader@9.1.0(@babel/core@7.20.7)(webpack@5.76.0(webpack-cli@5.0.1)): + babel-loader@9.1.0(@babel/core@7.20.7)(webpack@5.76.0): dependencies: '@babel/core': 7.20.7 find-cache-dir: 3.3.2 @@ -7783,7 +7778,7 @@ snapshots: shebang-command: 2.0.0 which: 2.0.2 - css-loader@6.3.0(webpack@5.76.0(webpack-cli@5.0.1)): + css-loader@6.3.0(webpack@5.76.0): dependencies: icss-utils: 5.1.0(postcss@8.4.31) postcss: 8.4.31 @@ -7795,7 +7790,7 @@ snapshots: semver: 7.3.8 webpack: 5.76.0(webpack-cli@5.0.1) - css-loader@6.7.1(webpack@5.76.0(webpack-cli@5.0.1)): + css-loader@6.7.1(webpack@5.76.0): dependencies: icss-utils: 5.1.0(postcss@8.4.31) postcss: 8.4.31 @@ -7807,7 +7802,7 @@ snapshots: semver: 7.3.8 webpack: 5.76.0(webpack-cli@5.0.1) - css-loader@6.7.3(webpack@5.76.0(webpack-cli@5.0.1)): + css-loader@6.7.3(webpack@5.76.0): dependencies: icss-utils: 5.1.0(postcss@8.4.31) postcss: 8.4.31 @@ -8274,7 +8269,7 @@ snapshots: dependencies: flat-cache: 3.0.4 - file-loader@6.2.0(webpack@5.76.0(webpack-cli@5.0.1)): + file-loader@6.2.0(webpack@5.76.0): dependencies: loader-utils: 2.0.2 schema-utils: 3.1.1 @@ -8513,7 +8508,7 @@ snapshots: relateurl: 0.2.7 terser: 5.14.1 - html-webpack-plugin@5.3.2(webpack@5.76.0(webpack-cli@5.0.1)): + html-webpack-plugin@5.3.2(webpack@5.76.0): dependencies: '@types/html-minifier-terser': 5.1.2 html-minifier-terser: 5.1.1 @@ -8522,7 +8517,7 @@ snapshots: tapable: 2.2.1 webpack: 5.76.0(webpack-cli@5.0.1) - html-webpack-plugin@5.5.0(webpack@5.76.0(webpack-cli@5.0.1)): + html-webpack-plugin@5.5.0(webpack@5.76.0): dependencies: '@types/html-minifier-terser': 6.1.0 html-minifier-terser: 6.1.0 @@ -8984,7 +8979,7 @@ snapshots: mimic-fn@4.0.0: {} - mini-css-extract-plugin@2.6.1(webpack@5.76.0(webpack-cli@5.0.1)): + mini-css-extract-plugin@2.6.1(webpack@5.76.0): dependencies: schema-utils: 4.0.0 webpack: 5.76.0(webpack-cli@5.0.1) @@ -9923,7 +9918,7 @@ snapshots: esbuild: 0.17.19 optional: true - terser-webpack-plugin@5.3.3(webpack@5.76.0(webpack-cli@5.0.1)): + terser-webpack-plugin@5.3.3(webpack@5.76.0): dependencies: '@jridgewell/trace-mapping': 0.3.14 jest-worker: 27.5.1 @@ -10083,14 +10078,14 @@ snapshots: url-join@2.0.5: {} - url-loader@4.1.1(file-loader@6.2.0(webpack@5.76.0(webpack-cli@5.0.1)))(webpack@5.76.0(webpack-cli@5.0.1)): + url-loader@4.1.1(file-loader@6.2.0(webpack@5.76.0))(webpack@5.76.0): dependencies: loader-utils: 2.0.2 mime-types: 2.1.35 schema-utils: 3.1.1 webpack: 5.76.0(webpack-cli@5.0.1) optionalDependencies: - file-loader: 6.2.0(webpack@5.76.0(webpack-cli@5.0.1)) + file-loader: 6.2.0(webpack@5.76.0) util-deprecate@1.0.2: {} @@ -10191,7 +10186,7 @@ snapshots: dependencies: vue: 3.2.45 - vue-loader@17.0.0(webpack@5.76.0(webpack-cli@5.0.1)): + vue-loader@17.0.0(webpack@5.76.0): dependencies: chalk: 4.1.2 hash-sum: 2.0.0 @@ -10234,9 +10229,9 @@ snapshots: webpack-cli@5.0.1(webpack-dev-server@4.11.1)(webpack@5.76.0): dependencies: '@discoveryjs/json-ext': 0.5.7 - '@webpack-cli/configtest': 2.0.1(webpack-cli@5.0.1(webpack-dev-server@4.11.1)(webpack@5.76.0))(webpack@5.76.0(webpack-cli@5.0.1)) - '@webpack-cli/info': 2.0.1(webpack-cli@5.0.1(webpack-dev-server@4.11.1)(webpack@5.76.0))(webpack@5.76.0(webpack-cli@5.0.1)) - '@webpack-cli/serve': 2.0.1(webpack-cli@5.0.1(webpack-dev-server@4.11.1)(webpack@5.76.0))(webpack-dev-server@4.11.1(webpack-cli@5.0.1)(webpack@5.76.0))(webpack@5.76.0(webpack-cli@5.0.1)) + '@webpack-cli/configtest': 2.0.1(webpack-cli@5.0.1)(webpack@5.76.0) + '@webpack-cli/info': 2.0.1(webpack-cli@5.0.1)(webpack@5.76.0) + '@webpack-cli/serve': 2.0.1(webpack-cli@5.0.1)(webpack-dev-server@4.11.1)(webpack@5.76.0) colorette: 2.0.19 commander: 9.4.1 cross-spawn: 7.0.3 @@ -10253,9 +10248,9 @@ snapshots: webpack-cli@5.0.1(webpack@5.76.0): dependencies: '@discoveryjs/json-ext': 0.5.7 - '@webpack-cli/configtest': 2.0.1(webpack-cli@5.0.1(webpack@5.76.0))(webpack@5.76.0(webpack-cli@5.0.1)) - '@webpack-cli/info': 2.0.1(webpack-cli@5.0.1(webpack@5.76.0))(webpack@5.76.0(webpack-cli@5.0.1)) - '@webpack-cli/serve': 2.0.1(webpack-cli@5.0.1(webpack@5.76.0))(webpack@5.76.0(webpack-cli@5.0.1)) + '@webpack-cli/configtest': 2.0.1(webpack-cli@5.0.1)(webpack@5.76.0) + '@webpack-cli/info': 2.0.1(webpack-cli@5.0.1)(webpack@5.76.0) + '@webpack-cli/serve': 2.0.1(webpack-cli@5.0.1)(webpack@5.76.0) colorette: 2.0.19 commander: 9.4.1 cross-spawn: 7.0.3 @@ -10267,7 +10262,7 @@ snapshots: webpack: 5.76.0(webpack-cli@5.0.1) webpack-merge: 5.8.0 - webpack-dev-middleware@5.3.3(webpack@5.76.0(webpack-cli@5.0.1)): + webpack-dev-middleware@5.3.3(webpack@5.76.0): dependencies: colorette: 2.0.19 memfs: 3.4.7 @@ -10306,7 +10301,7 @@ snapshots: sockjs: 0.3.24 spdy: 4.0.2 webpack: 5.76.0(webpack-cli@5.0.1) - webpack-dev-middleware: 5.3.3(webpack@5.76.0(webpack-cli@5.0.1)) + webpack-dev-middleware: 5.3.3(webpack@5.76.0) ws: 8.8.0 optionalDependencies: webpack-cli: 5.0.1(webpack-dev-server@4.11.1)(webpack@5.76.0) @@ -10380,7 +10375,7 @@ snapshots: neo-async: 2.6.2 schema-utils: 3.1.1 tapable: 2.2.1 - terser-webpack-plugin: 5.3.3(webpack@5.76.0(webpack-cli@5.0.1)) + terser-webpack-plugin: 5.3.3(webpack@5.76.0) watchpack: 2.4.0 webpack-sources: 3.2.3 optionalDependencies: