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
gsoft-inc · Sep 17, 2024 · 52d57fc · 52d57fc
1 parent e1e41ef
commit 52d57fc
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 17 deletions.
diff --git a/.changeset/plenty-planes-camp.md 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
@@ -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
@@ -23,10 +23,10 @@ export * from "@workleap/webpack-configs";
 export {
  DefineHostModuleFederationPluginOptions,
  DefineRemoteModuleFederationPluginOptions,
+ defineRemoteModuleFederationPluginOptions,
  ModuleFederationPluginOptions,
  RemoteDefinition,
- Router,
- defineRemoteModuleFederationPluginOptions
+ Router
 };
 
 export type FireflyFeatures = Omit<Features, "router" | "msw">;

diff --git 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<string, unknown>]
- },
  transformIgnorePatterns: [
  "node_modules/(?!.pnpm|memoize|mimic-function)"
  ],
+ transform: {
+ "^.+\\.(js|ts|tsx)$": ["@swc/jest", swcConfig as Record<string, unknown>]
+ },
  moduleNameMapper: {
  ...pathsToModuleNameMapper(compilerOptions.paths, {
  prefix: "<rootDir>"

diff --git 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<DefineDevConfigOptions,
 // The function return type is mandatory, otherwise we got an error TS4058.
 export function defineDevHostConfig(swcConfig: SwcConfig, port: number, remotes: RemoteDefinition[], options: DefineDevHostConfigOptions = {}): webpack.Configuration {
  const {
- entry = path.resolve("./src/index.ts"),
+ entry = resolveEntryFilePath(HostEntryFilePaths),
  publicPath = "auto",
  cache,
  plugins = [],
@@ -262,7 +281,7 @@ export interface DefineBuildHostConfigOptions extends Omit<DefineBuildConfigOpti
 // The function return type is mandatory, otherwise we got an error TS4058.
 export function defineBuildHostConfig(swcConfig: SwcConfig, remotes: RemoteDefinition[], options: DefineBuildHostConfigOptions = {}): webpack.Configuration {
  const {
- entry = path.resolve("./src/index.ts"),
+ entry = resolveEntryFilePath(HostEntryFilePaths),
  publicPath = "auto",
  plugins = [],
  htmlWebpackPluginOptions,
@@ -293,6 +312,11 @@ export function defineBuildHostConfig(swcConfig: SwcConfig, remotes: RemoteDefin
 
 //////////////////////////// Remote /////////////////////////////
 
+const RemoteEntryFilePaths = [
+ "./src/register.tsx",
+ "./src/register.ts"
+];
+
 export interface DefineRemoteModuleFederationPluginOptions extends ModuleFederationPluginOptions {
  features?: Features;
 }
@@ -329,8 +353,8 @@ export function defineRemoteModuleFederationPluginOptions(applicationName: strin
  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
@@ -363,7 +387,7 @@ export interface DefineDevRemoteModuleConfigOptions extends Omit<DefineDevConfig
 // The function return type is mandatory, otherwise we got an error TS4058.
 export function defineDevRemoteModuleConfig(swcConfig: SwcConfig, applicationName: string, port: number, options: DefineDevRemoteModuleConfigOptions = {}): webpack.Configuration {
  const {
- entry = path.resolve("./src/register.tsx"),
+ entry = resolveEntryFilePath(RemoteEntryFilePaths),
  publicPath = "auto",
  cache,
  plugins = [],
@@ -408,7 +432,7 @@ export interface DefineBuildRemoteModuleConfigOptions extends DefineBuildConfigO
 // The function return type is mandatory, otherwise we got an error TS4058.
 export function defineBuildRemoteModuleConfig(swcConfig: SwcConfig, applicationName: string, options: DefineBuildRemoteModuleConfigOptions = {}): webpack.Configuration {
  const {
- entry = path.resolve("./src/register.tsx"),
+ entry = resolveEntryFilePath(RemoteEntryFilePaths),
  publicPath = "auto",
  plugins = [],
  htmlWebpackPlugin = false,