From 52d57fcc8fcff7b7f6e84d7621724bad8ed9f2a9 Mon Sep 17 00:00:00 2001 From: Patrick Lafrance Date: Mon, 16 Sep 2024 22:45:10 -0400 Subject: [PATCH] feat: Webpack config now search for .ts and .tsx entry file (#202) * feat: Webpack config now search for .ts and .tsx entry file * Undo changes * Added changeset file * Fix docs typo --- .changeset/plenty-planes-camp.md | 5 ++ docs/reference/runtime/runtime-class.md | 2 +- packages/firefly-webpack-configs/src/index.ts | 4 +- packages/react-router/jest.config.ts | 6 +-- packages/webpack-configs/src/defineConfig.ts | 46 ++++++++++++++----- 5 files changed, 46 insertions(+), 17 deletions(-) create mode 100644 .changeset/plenty-planes-camp.md diff --git a/.changeset/plenty-planes-camp.md b/.changeset/plenty-planes-camp.md new file mode 100644 index 000000000..21d9efdc3 --- /dev/null +++ b/.changeset/plenty-planes-camp.md @@ -0,0 +1,5 @@ +--- +"@squide/webpack-configs": minor +--- + +Webpack config now automatically whether the entry file should be index.ts or index.tsx. diff --git a/docs/reference/runtime/runtime-class.md b/docs/reference/runtime/runtime-class.md index 0a589f7f3..3b03ecf60 100644 --- a/docs/reference/runtime/runtime-class.md +++ b/docs/reference/runtime/runtime-class.md @@ -322,7 +322,7 @@ runtime.registerNavigationItem({ // --- Nested Link // Link runtime.registerNavigationItem({ - $ley: "section", + $key: "section", $label: "Section", children: [ { diff --git a/packages/firefly-webpack-configs/src/index.ts b/packages/firefly-webpack-configs/src/index.ts index f685329a7..aed145ba3 100644 --- a/packages/firefly-webpack-configs/src/index.ts +++ b/packages/firefly-webpack-configs/src/index.ts @@ -23,10 +23,10 @@ export * from "@workleap/webpack-configs"; export { DefineHostModuleFederationPluginOptions, DefineRemoteModuleFederationPluginOptions, + defineRemoteModuleFederationPluginOptions, ModuleFederationPluginOptions, RemoteDefinition, - Router, - defineRemoteModuleFederationPluginOptions + Router }; export type FireflyFeatures = Omit; diff --git a/packages/react-router/jest.config.ts b/packages/react-router/jest.config.ts index ad75f0386..092a9b4af 100644 --- a/packages/react-router/jest.config.ts +++ b/packages/react-router/jest.config.ts @@ -5,12 +5,12 @@ import { compilerOptions } from "./tsconfig.json"; const config: Config = { testEnvironment: "jsdom", - transform: { - "^.+\\.(js|ts|tsx)$": ["@swc/jest", swcConfig as Record] - }, transformIgnorePatterns: [ "node_modules/(?!.pnpm|memoize|mimic-function)" ], + transform: { + "^.+\\.(js|ts|tsx)$": ["@swc/jest", swcConfig as Record] + }, moduleNameMapper: { ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: "" diff --git a/packages/webpack-configs/src/defineConfig.ts b/packages/webpack-configs/src/defineConfig.ts index beecb1e9a..df0140a17 100644 --- a/packages/webpack-configs/src/defineConfig.ts +++ b/packages/webpack-configs/src/defineConfig.ts @@ -3,12 +3,16 @@ import type { SwcConfig } from "@workleap/swc-configs"; import { defineBuildConfig, defineBuildHtmlWebpackPluginConfig, defineDevConfig, defineDevHtmlWebpackPluginConfig, type DefineBuildConfigOptions, type DefineDevConfigOptions, type WebpackConfig, type WebpackConfigTransformer } from "@workleap/webpack-configs"; import merge from "deepmerge"; import type HtmlWebpackPlugin from "html-webpack-plugin"; -import path from "node:path"; -import url from "node:url"; +import fs from "node:fs"; +import path, { dirname } from "node:path"; +import url, { fileURLToPath } from "node:url"; import type webpack from "webpack"; import { HostApplicationName } from "./shared.ts"; -const directoryName = url.fileURLToPath(new URL(".", import.meta.url)); +// Using import.meta.url instead of import.meta.dirname because Jest is throwing the following error: +// SyntaxError: Cannot use 'import.meta' outside a module +const applicationDirectory = dirname(fileURLToPath(import.meta.url)); +const packageDirectory = url.fileURLToPath(new URL(".", import.meta.url)); // Must be similar to the module name defined in @workleap/module-federation. const RemoteRegisterModuleName = "./register"; @@ -144,6 +148,16 @@ function createSetUniqueNameTransformer(uniqueName: string) { return transformer; } +function resolveEntryFilePath(entryPaths: string[]) { + for (const entryPath in entryPaths) { + if (fs.existsSync(path.resolve(applicationDirectory, entryPath))) { + return entryPath; + } + } + + return entryPaths[0]; +} + //////////////////////////// Host ///////////////////////////// export interface RemoteDefinition { @@ -153,6 +167,11 @@ export interface RemoteDefinition { url: string; } +const HostEntryFilePaths = [ + "./src/index.ts", + "./src/index.tsx" +]; + export interface DefineHostModuleFederationPluginOptions extends ModuleFederationPluginOptions { features?: Features; } @@ -191,8 +210,8 @@ export function defineHostModuleFederationPluginOptions(remotes: RemoteDefinitio shared ]) as ModuleFederationShared, runtimePlugins: [ - path.resolve(directoryName, "./sharedDependenciesResolutionPlugin.js"), - path.resolve(directoryName, "./nonCacheableRemoteEntryPlugin.js"), + path.resolve(packageDirectory, "./sharedDependenciesResolutionPlugin.js"), + path.resolve(packageDirectory, "./nonCacheableRemoteEntryPlugin.js"), ...runtimePlugins ], ...rest @@ -220,7 +239,7 @@ export interface DefineDevHostConfigOptions extends Omit