feat: bundle webpack

.changeset/config.json

@@ -18,6 +18,7 @@
   "ignore": [
     "@examples/hackernews",
     "@examples/normal",
+    "@examples/normal-webpack",
     "@examples/qiankun-master",
     "@examples/qiankun-slave",
     "@examples/shadcn-cli",

.changeset/modern-cherries-draw.md

@@ -0,0 +1,5 @@
+---
+'@umijs/tnf': patch
+---
+
+feat: bundle webpack

examples/normal-webpack/.tnfrc.ts

@@ -0,0 +1,33 @@
+import { defineConfig } from '@umijs/tnf';
+
+export default defineConfig({
+  bundler: 'webpack',
+  router: {
+    defaultPreload: 'intent',
+    convention: {
+      routeFileIgnorePattern: 'components',
+    },
+  },
+  plugins: [
+    {
+      config: ({ command }) => {
+        console.log('config', command);
+        return {
+          // foo: 'bar',
+        };
+      },
+      configResolved: (config) => {
+        // console.log('configResolved', config);
+      },
+      buildStart: ({ command }) => {
+        console.log('buildStart', command);
+      },
+      buildEnd: ({ command, err }) => {
+        console.log('buildEnd', command, err);
+      },
+    },
+  ],
+  mock: { delay: '500-1000' },
+  // reactScan: {},
+  reactCompiler: {},
+});

examples/normal-webpack/mock/foo.js

@@ -0,0 +1,153 @@
+const data = {
+  "users": [
+      {
+          "id": 1,
+          "firstName": "Emily",
+          "lastName": "Johnson",
+          "maidenName": "Smith",
+          "age": 28,
+          "gender": "female",
+          "email": "[email protected]",
+          "phone": "+81 965-431-3024",
+          "username": "emilys",
+          "password": "emilyspass",
+          "birthDate": "1996-5-30",
+          "image": "https://dummyjson.com/icon/emilys/128",
+          "bloodGroup": "O-",
+          "height": 193.24,
+          "weight": 63.16,
+          "eyeColor": "Green",
+          "hair": {
+              "color": "Brown",
+              "type": "Curly"
+          },
+          "ip": "42.48.100.32",
+          "address": {
+              "address": "626 Main Street",
+              "city": "Phoenix",
+              "state": "Mississippi",
+              "stateCode": "MS",
+              "postalCode": "29112",
+              "coordinates": {
+                  "lat": -77.16213,
+                  "lng": -92.084824
+              },
+              "country": "United States"
+          },
+          "macAddress": "47:fa:41:18:ec:eb",
+          "university": "University of Wisconsin--Madison",
+          "bank": {
+              "cardExpire": "03/26",
+              "cardNumber": "9289760655481815",
+              "cardType": "Elo",
+              "currency": "CNY",
+              "iban": "YPUXISOBI7TTHPK2BR3HAIXL"
+          },
+          "company": {
+              "department": "Engineering",
+              "name": "Dooley, Kozey and Cronin",
+              "title": "Sales Manager",
+              "address": {
+                  "address": "263 Tenth Street",
+                  "city": "San Francisco",
+                  "state": "Wisconsin",
+                  "stateCode": "WI",
+                  "postalCode": "37657",
+                  "coordinates": {
+                      "lat": 71.814525,
+                      "lng": -161.150263
+                  },
+                  "country": "United States"
+              }
+          },
+          "ein": "977-175",
+          "ssn": "900-590-289",
+          "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36",
+          "crypto": {
+              "coin": "Bitcoin",
+              "wallet": "0xb9fc2fe63b2a6c003f1c324c3bfa53259162181a",
+              "network": "Ethereum (ERC20)"
+          },
+          "role": "admin"
+      },
+      {
+          "id": 2,
+          "firstName": "Michael",
+          "lastName": "Williams",
+          "maidenName": "",
+          "age": 35,
+          "gender": "male",
+          "email": "[email protected]",
+          "phone": "+49 258-627-6644",
+          "username": "michaelw",
+          "password": "michaelwpass",
+          "birthDate": "1989-8-10",
+          "image": "https://dummyjson.com/icon/michaelw/128",
+          "bloodGroup": "B+",
+          "height": 186.22,
+          "weight": 76.32,
+          "eyeColor": "Red",
+          "hair": {
+              "color": "Green",
+              "type": "Straight"
+          },
+          "ip": "12.13.116.142",
+          "address": {
+              "address": "385 Fifth Street",
+              "city": "Houston",
+              "state": "Alabama",
+              "stateCode": "AL",
+              "postalCode": "38807",
+              "coordinates": {
+                  "lat": 22.815468,
+                  "lng": 115.608581
+              },
+              "country": "United States"
+          },
+          "macAddress": "79:15:78:99:60:aa",
+          "university": "Ohio State University",
+          "bank": {
+              "cardExpire": "02/27",
+              "cardNumber": "6737807858721625",
+              "cardType": "Elo",
+              "currency": "SEK",
+              "iban": "83IDT77FWYLCJVR8ISDACFH0"
+          },
+          "company": {
+              "department": "Support",
+              "name": "Spinka - Dickinson",
+              "title": "Support Specialist",
+              "address": {
+                  "address": "395 Main Street",
+                  "city": "Los Angeles",
+                  "state": "New Hampshire",
+                  "stateCode": "NH",
+                  "postalCode": "73442",
+                  "coordinates": {
+                      "lat": 79.098326,
+                      "lng": -119.624845
+                  },
+                  "country": "United States"
+              }
+          },
+          "ein": "912-602",
+          "ssn": "108-953-962",
+          "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Edge/97.0.1072.76 Safari/537.36",
+          "crypto": {
+              "coin": "Bitcoin",
+              "wallet": "0xb9fc2fe63b2a6c003f1c324c3bfa53259162181a",
+              "network": "Ethereum (ERC20)"
+          },
+          "role": "admin"
+      },
+  ],
+  "total": 208,
+  "skip": 0,
+  "limit": 30
+}
+
+module.exports = {
+  'GET /api/foo': (req, res) => {
+    res.json(data);
+  },
+};

examples/normal-webpack/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@examples/normal-webpack",
+  "private": true,
+  "scripts": {
+    "build": "tnf build",
+    "dev": "tnf dev",
+    "preview": "tnf preview"
+  },
+  "dependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@umijs/bundler-webpack": "^4.4.2",
+    "@umijs/tnf": "workspace:*",
+    "unplugin-starter": "^0.1.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.3"
+  }
+}

examples/normal-webpack/src/client.tsx

@@ -0,0 +1,22 @@
+import { createRouter } from '@umijs/tnf/router';
+import { Client } from '@umijs/tnf/ssr';
+import { routeTree } from '../.tnf/routeTree.gen';
+
+export function createClient() {
+  const router = createRouter({
+    routeTree,
+    context: { root: '/' },
+    defaultPreload: 'intent',
+    defaultPreloadDelay: 50,
+    defaultPendingComponent: () => <div>Loading........</div>,
+    defaultPendingMs: 0,
+    defaultGcTime: 1000 * 60 * 5,
+    defaultStaleTime: 1000 * 60 * 2,
+  });
+  return {
+    Root: function Root() {
+      return <Client router={router} />;
+    },
+    router,
+  };
+}

examples/normal-webpack/src/pages/__root.tsx

@@ -0,0 +1,25 @@
+import { Link, Outlet, createRootRouteWithContext } from '@umijs/tnf/router';
+
+export const Route = createRootRouteWithContext<{
+  root: string;
+}>()({
+  // beforeLoad: () => {
+  //   return {
+  //     root: 'root',
+  //   };
+  // },
+  component: () => (
+    <>
+      <div>Hello "__root"!</div>
+      <ul>
+        <li>
+          <Link to="/">Home</Link>
+        </li>
+        <li>
+          <Link to="/foo">Foo</Link>
+        </li>
+      </ul>
+      <Outlet />
+    </>
+  ),
+});

examples/normal-webpack/src/pages/components/Home.module.less

@@ -0,0 +1,3 @@
+.foo {
+  color: green;
+}

examples/normal-webpack/src/pages/components/Home.tsx

@@ -0,0 +1,11 @@
+import styles from './Home.module.less';
+
+function Home() {
+  return (
+    <div className={styles.foo}>
+      <h3>Welcome Home!</h3>
+    </div>
+  );
+}
+
+export default Home;

examples/normal-webpack/src/pages/foo.bar.module.less

@@ -0,0 +1,3 @@
+.container {
+  color: #79f2d2;
+}

examples/normal-webpack/src/pages/foo.bar.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { createFileRoute, useLoaderData } from '@umijs/tnf/router';
+import styles from './foo.bar.module.less';
+
+export const Route = createFileRoute('/foo/bar')({
+  loader: async ({ context }) => {
+    return {
+      bar: 'bar',
+      ...context,
+    };
+  },
+  component: FooBar,
+});
+
+function FooBar() {
+  const { bar, foo, root } = useLoaderData({
+    from: '/foo/bar',
+  });
+  return (
+    <div className={styles.container}>
+      <h3>Welcome to Foo.bar Page!</h3>
+      <p>bar: {bar}</p>
+      <p>foo: {foo}</p>
+      <p>root: {root}</p>
+    </div>
+  );
+}

examples/normal-webpack/src/pages/foo.tsx

@@ -0,0 +1,40 @@
+import {
+  Link,
+  Outlet,
+  createFileRoute,
+  useLoaderData,
+} from '@umijs/tnf/router';
+
+export const Route = createFileRoute('/foo')({
+  component: Foo,
+  loader: async ({ context }) => {
+    // const res = await fetch('https://dummyjson.com/users');
+    const res = await fetch('/api/foo?delay=2000');
+    const data = await res.json();
+    return data;
+  },
+  beforeLoad: async () => {
+    return {
+      foo: 'foo',
+    };
+  },
+});
+
+function Foo() {
+  const { users } = useLoaderData({
+    from: '/foo',
+  });
+  return (
+    <div>
+      <h3>Welcome Foo!</h3>
+      <p>Users</p>
+      <ul>
+        {users.map((user: any) => (
+          <li key={user.id}>{user.firstName}</li>
+        ))}
+      </ul>
+      <Link to="/foo/bar">Go to Foo.bar</Link>
+      <Outlet />
+    </div>
+  );
+}

examples/normal-webpack/src/pages/index.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute } from '@umijs/tnf/router';
+import Home from './components/Home';
+
+export const Route = createFileRoute('/')({
+  loader: async ({ context, route }) => {
+    console.log('context', context.root);
+    // console.log('route', route.parentRoute);
+    return {
+      root: context.root,
+    };
+  },
+  component: () => {
+    return (
+      <>
+        <Home />
+      </>
+    );
+  },
+});

examples/normal-webpack/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./.tnf/tsconfig.json",
+  "compilerOptions": {}
+
+  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+  // from the referenced tsconfig.json - TypeScript does not merge them in
+}