feat(pf): migrate PF mapper to TS

Author: Hyperkid123

package.json

@@ -20,7 +20,7 @@
     "start-demo": "nx run @data-driven-forms/react-renderer-demo:start",
     "lint": "npm run lint:js && npm run lint:typescript",
     "lint:js": "npx eslint ./packages/*/src --ext .js",
-    "lint:typescript": "eslint packages/react-form-renderer/src/**/* packages/react-form-renderer/demo/**/* --ext .ts,.tsx,.js,.jsx",
+    "lint:typescript": "eslint packages/react-form-renderer/src/**/* packages/react-form-renderer/demo/**/* packages/pf4-component-mapper/src/**/* packages/pf4-component-mapper/demo/**/* --ext .ts,.tsx,.js,.jsx",
     "generate-template": "node ./scripts/generate-mapper.js",
     "clean-build": "node ./scripts/clean-build.js",
     "prebuild": "node ./scripts/clean-build.js"

packages/pf4-component-mapper/.gitignore

@@ -77,6 +77,7 @@ vendor
 !src/*
 !demo/*
 !config
+!config/rspack.config.js
 !.npmignore
 !.gitignore
 !.nxignore
@@ -87,7 +88,10 @@ vendor
 !project.json
 !README.md
 !tsconfig.json
+!tsconfig.cjs.json
+!tsconfig.esm.json
 !tsconfig.spec.json
+!tsconfig.demo.json
 !jest.config.ts
 !generate-typings.js
 !rollup.config.js

packages/pf4-component-mapper/config/rspack.config.js

@@ -0,0 +1,90 @@
+//@ts-check
+
+const { defineConfig } = require('@rspack/cli');
+const { HtmlRspackPlugin, DefinePlugin, ProvidePlugin } = require('@rspack/core');
+const resolve = require('path').resolve;
+
+module.exports = defineConfig({
+  mode: 'development',
+  entry: { app: resolve('./demo/index.tsx') },
+  output: {
+    path: resolve('../dist'),
+    filename: '[name].[hash].js'
+  },
+  devtool: 'eval-source-map',
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+  },
+  plugins: [
+    new HtmlRspackPlugin({
+      template: './demo/index.html',
+      filename: './index.html'
+    }),
+    new DefinePlugin({
+      'process.env.NODE_ENV': '"development"',
+    }),
+    new ProvidePlugin({
+      process: 'process/browser.js'
+    })
+  ],
+  devServer: {
+    port: 3001, // Different port from renderer to avoid conflicts
+    hot: true,
+    open: true,
+  },
+  module: {
+    rules: [
+      // TypeScript files with ts-loader for proper config support
+      {
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'ts-loader',
+          options: {
+            configFile: 'tsconfig.demo.json'
+          }
+        },
+      },
+      // JavaScript files (if any remain)
+      {
+        test: /\.js$/,
+        exclude: /(node_modules)/,
+        use: {
+          loader: 'builtin:swc-loader',
+          options: {
+            sourceMap: true,
+            jsc: {
+              parser: {
+                syntax: 'ecmascript',
+                jsx: true,
+              },
+              transform: {
+                react: {
+                  runtime: 'automatic',
+                },
+              },
+            },
+          },
+        },
+      },
+      // CSS/SCSS - using RSpack built-in support
+      {
+        test: /\.css$/,
+        type: 'css'
+      },
+      {
+        test: /\.(sa|sc)ss$/,
+        use: ['sass-loader'],
+        type: 'css'
+      },
+      // Assets
+      {
+        test: /\.(png|jpg|gif|svg|woff|ttf|eot)$/,
+        type: 'asset/resource'
+      },
+    ]
+  },
+  experiments: {
+    css: true,
+  }
+});