feat: handle stripping flow types from popular packages (#765)

* refactor: add getModulePaths to utils index * feat: add rules for transpiling flow typed modules * chore: add jsdocs for other rules as well * chore: add flow rule to v5 templates * fix: add flow rules to index * chore: add flow rule to testers * chore: add changeset
callstack · Oct 11, 2024 · efff0c2 · efff0c2
1 parent e433584
commit efff0c2
Show file tree

Hide file tree

Showing 12 changed files with 56 additions and 2 deletions.
diff --git a/.changeset/fast-falcons-joke.md b/.changeset/fast-falcons-joke.md
@@ -0,0 +1,5 @@
+---
+"@callstack/repack": minor
+---
+
+Add default rules for transpiling popular flow typed packages
diff --git a/apps/tester-app/rspack.config.mjs b/apps/tester-app/rspack.config.mjs
@@ -52,6 +52,7 @@ export default (env) => {
       rules: [
         Repack.REACT_NATIVE_LOADING_RULES,
         Repack.NODE_MODULES_LOADING_RULES,
+        Repack.FLOW_TYPED_MODULES_LOADING_RULES,
         {
           test: /\.[jt]sx?$/,
           exclude: [/node_modules/],

diff --git a/apps/tester-federation/rspack.config.host-app.mjs b/apps/tester-federation/rspack.config.host-app.mjs
@@ -55,6 +55,7 @@ export default (env) => {
       rules: [
         Repack.REACT_NATIVE_LOADING_RULES,
         Repack.NODE_MODULES_LOADING_RULES,
+        Repack.FLOW_TYPED_MODULES_LOADING_RULES,
         /* repack is symlinked to a local workspace */
         {
           test: /\.[jt]sx?$/,

diff --git a/apps/tester-federation/rspack.config.mini-app.mjs b/apps/tester-federation/rspack.config.mini-app.mjs
@@ -54,6 +54,7 @@ export default (env) => {
       rules: [
         Repack.REACT_NATIVE_LOADING_RULES,
         Repack.NODE_MODULES_LOADING_RULES,
+        Repack.FLOW_TYPED_MODULES_LOADING_RULES,
         /* repack is symlinked to a local workspace */
         {
           test: /\.[jt]sx?$/,

diff --git a/packages/repack/src/rules/flowTypedModulesLoadingRules.ts b/packages/repack/src/rules/flowTypedModulesLoadingRules.ts
@@ -0,0 +1,27 @@
+import type { RuleSetRule } from '@rspack/core';
+import { getModulePaths } from '../utils';
+
+/**
+ * @constant FLOW_TYPED_MODULES_LOADING_RULES
+ * @type {RuleSetRule}
+ * @description Module rule configuration for loading flow-typed modules.
+ */
+export const FLOW_TYPED_MODULES_LOADING_RULES: RuleSetRule = {
+  type: 'javascript/auto',
+  test: /\.jsx?$/,
+  include: getModulePaths([
+    'react-native-blob-util',
+    'react-native-pdf',
+    '@react-native-picker/picker',
+    'react-native-config',
+    'react-native-fs',
+    'react-native-image-size',
+    'react-native-performance',
+    'react-native-vector-icons',
+    '@react-native-community/datetimepicker',
+  ]),
+  use: {
+    loader: '@callstack/repack/flow-loader',
+    options: { all: true },
+  },
+};
diff --git a/packages/repack/src/rules/index.ts b/packages/repack/src/rules/index.ts
@@ -1,3 +1,4 @@
 export * from './reactNativeLoadingRules';
 export * from './reactNativeCodegenRules';
 export * from './nodeModulesLoadingRules';
+export * from './flowTypedModulesLoadingRules';
diff --git a/packages/repack/src/rules/nodeModulesLoadingRules.ts b/packages/repack/src/rules/nodeModulesLoadingRules.ts
@@ -1,6 +1,11 @@
 import type { RuleSetRule } from '@rspack/core';
-import { getModulePaths } from '../utils/getModulePaths';
+import { getModulePaths } from '../utils';
 
+/**
+ * @constant NODE_MODULES_LOADING_RULES
+ * @type {RuleSetRule}
+ * @description Module rule configuration for loading node_modules, excluding React Native Core & out-of-tree platform packages.
+ */
 export const NODE_MODULES_LOADING_RULES: RuleSetRule = {
   type: 'javascript/auto',
   test: /\.[cm]?[jt]sx?$/,

diff --git a/packages/repack/src/rules/reactNativeCodegenRules.ts b/packages/repack/src/rules/reactNativeCodegenRules.ts
@@ -1,5 +1,10 @@
 import type { RuleSetRule } from '@rspack/core';
 
+/**
+ * @constant REACT_NATIVE_CODEGEN_RULES
+ * @type {RuleSetRule}
+ * @description Module rule configuration for handling React Native codegen files.
+ */
 export const REACT_NATIVE_CODEGEN_RULES: RuleSetRule = {
   test: /(?:^|[\\/])(?:Native\w+|(\w+)NativeComponent)\.[jt]sx?$/,
   rules: [

diff --git a/packages/repack/src/rules/reactNativeLoadingRules.ts b/packages/repack/src/rules/reactNativeLoadingRules.ts
@@ -1,7 +1,12 @@
 import type { RuleSetRule } from '@rspack/core';
-import { getModulePaths } from '../utils/getModulePaths';
+import { getModulePaths } from '../utils';
 import { REACT_NATIVE_LAZY_IMPORTS } from './lazyImports';
 
+/**
+ * @constant REACT_NATIVE_LOADING_RULES
+ * @type {RuleSetRule}
+ * @description Module rule configuration for loading React Native Core & out-of-tree platform packages.
+ */
 export const REACT_NATIVE_LOADING_RULES: RuleSetRule = {
   type: 'javascript/dynamic',
   test: /\.jsx?$/,

diff --git a/packages/repack/src/utils/index.ts b/packages/repack/src/utils/index.ts
@@ -3,3 +3,4 @@ export * from './federated';
 export * from './getDirname';
 export * from './getPublicPath';
 export * from './getResolveOptions';
+export * from './getModulePaths';
diff --git a/templates_v5/rspack.config.cjs b/templates_v5/rspack.config.cjs
@@ -94,6 +94,7 @@ module.exports = (env) => {
       rules: [
         Repack.REACT_NATIVE_LOADING_RULES,
         Repack.NODE_MODULES_LOADING_RULES,
+        Repack.FLOW_TYPED_MODULES_LOADING_RULES,
         /** Here you can adjust loader that will process your files. */
         {
           test: /\.[jt]sx?$/,

diff --git a/templates_v5/rspack.config.mjs b/templates_v5/rspack.config.mjs
@@ -91,6 +91,7 @@ export default (env) => {
       rules: [
         Repack.REACT_NATIVE_LOADING_RULES,
         Repack.NODE_MODULES_LOADING_RULES,
+        Repack.FLOW_TYPED_MODULES_LOADING_RULES,
         /** Here you can adjust loader that will process your files. */
         {
           test: /\.[jt]sx?$/,