example: rename rematch -> react-router.

.github/workflows/ci.yml

@@ -98,8 +98,8 @@ jobs:
           #   - compilerOptions.noEmit must be true
           git checkout -f ./tsconfig.json
 
-      - name: example @template/rematch
-        working-directory: example/rematch
+      - name: example @template/react-router
+        working-directory: example/react-router
         run: npm run build
 
       - name: example @template/rematch-tsx
@@ -222,10 +222,10 @@ jobs:
         working-directory: example/react-component-tsx
       - run: cp -rp example/react-component-tsx/react-component-tsx.zip ./zip
 
-      - name: Compress rematch Example.
-        run: zip -r -y rematch.zip . -x "node_modules/*" -x "build/*" -x "dist/*" -x "coverage/*" -x ".eslintcache" -x "sandbox.config.json"
-        working-directory: example/rematch
-      - run: cp -rp example/rematch/rematch.zip ./zip
+      - name: Compress react-router Example.
+        run: zip -r -y react-router.zip . -x "node_modules/*" -x "build/*" -x "dist/*" -x "coverage/*" -x ".eslintcache" -x "sandbox.config.json"
+        working-directory: example/react-router
+      - run: cp -rp example/react-router/react-router.zip ./zip
 
       - name: Compress rematch-tsx Example.
         run: zip -r -y rematch-tsx.zip . -x "node_modules/*" -x "build/*" -x "dist/*" -x "coverage/*" -x ".eslintcache" -x "sandbox.config.json"

core/README.md

@@ -75,7 +75,7 @@ You can download the following examples directly. [Download page](https://kktjs.
 - [**`markdown`**](https://github.com/kktjs/kkt/tree/master/example/markdown) - Use an example of `Markdown`. [`Open in CodeSandbox`](https://codesandbox.io/s/github/kktjs/kkt/tree/master/example/markdown)
 - [**`react-component-tsx`**](https://github.com/kktjs/kkt/tree/master/example/react-component-tsx) - Create a project containing the website for the react component library.
 - [**`rematch-tsx`**](https://github.com/kktjs/kkt/tree/master/example/rematch-tsx) - Use [`Rematch`](https://github.com/rematch/rematch) example for TypeScript. [`Open in CodeSandbox`](https://codesandbox.io/s/github/kktjs/kkt/tree/master/example/rematch-tsx)
-- [**`rematch`**](https://github.com/kktjs/kkt/tree/master/example/rematch) - Use [`Rematch`](https://github.com/rematch/rematch) for the project. [`Open in CodeSandbox`](https://codesandbox.io/s/github/kktjs/kkt/tree/master/example/rematch)
+- [**`react-router`**](https://github.com/kktjs/kkt/tree/master/example/react-router) - Use [`react-router`](https://github.com/remix-run/react-router) for the project. [`Open in CodeSandbox`](https://codesandbox.io/s/github/kktjs/kkt/tree/master/example/react-router)
 - [**`scss`**](https://github.com/kktjs/kkt/tree/master/example/scss) - Use an example of `Scss`. [`Open in CodeSandbox`](https://codesandbox.io/s/github/kktjs/kkt/tree/master/example/scss)
 - [**`stylus`**](https://github.com/kktjs/kkt/tree/master/example/stylus) - Use an example of `Stylus`. [`Open in CodeSandbox`](https://codesandbox.io/s/github/kktjs/kkt/tree/master/example/stylus)
 - [**`typescript`**](https://github.com/kktjs/kkt/tree/master/example/typescript) - Use an example of `TypeScript`. [`Open in CodeSandbox`](https://codesandbox.io/s/github/kktjs/kkt/tree/master/example/typescript)
@@ -94,6 +94,7 @@ npm install kkt --save-dev
 "dependencies": {
   ...
 -  "react-scripts": "4.0.1",
++  "kkt": "6.11.0",
   ....
 },
 "scripts": {

core/src/scripts/start.ts

@@ -72,7 +72,6 @@ export default async function start(argvs: StartArgs) {
         return overrideWebpackConf;
       };
     }
-
     // override config in memory
     require.cache[require.resolve(devServerConfigPath)].exports = (
       proxy: WebpackDevServer.ProxyArray,
@@ -98,11 +97,14 @@ export default async function start(argvs: StartArgs) {
         // middlewares before `redirectServedPath` otherwise will not have any effect
         // This lets us fetch source contents from webpack for the error overlay
         devServer.app.use(evalSourceMapMiddleware(devServer));
-
         if (fs.existsSync(paths.proxySetup)) {
           // This registers user provided middleware for proxy reasons
           require(paths.proxySetup)(devServer.app);
         }
+        // Configure the `proxySetup` configuration in `.kktrc`.
+        if (fs.existsSync(proxySetup)) {
+          require(proxySetup)(devServer.app);
+        }
 
         // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
         devServer.app.use(redirectServedPath(paths.publicUrlOrPath));

core/src/utils/proxySetup.ts

@@ -6,12 +6,12 @@ import { getCacheData } from './cacheData';
  * [Configuring the Proxy Manually](https://github.com/facebook/create-react-app/blob/3f699fd08044de9ab0ce1991a66b376d3e1956a8/docusaurus/docs/proxying-api-requests-in-development.md#configuring-the-proxy-manually),
  * The default is in the `src/setupProxy.js` directory, and now it is processed in `.kktrc.js` or `.kktrc.ts` through a special method.
  */
-export default (app: express.Application) => {
+export default function proxySetup(app: express.Application) {
   const { proxySetup } = getCacheData();
   if (proxySetup) {
     const opts = proxySetup(app);
     if (opts && opts.path) {
       apiMocker(app, opts.path, { ...opts.option });
     }
   }
-};
+}

core/tsconfig.json

@@ -12,5 +12,5 @@
     "outDir": "lib",
     "baseUrl": "."
   },
-  "include": ["src/**/*", "src/*", "src/global.d.ts"]
+  "include": ["src/**/*", "src/*"]
 }

example/less/public/index.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta name="theme-color" content="#000000">
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+  <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> -->
   <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
   <!--
     Notice the use of %PUBLIC_URL% in the tags above.

example/less/src/index.less

@@ -1,4 +1,5 @@
 body {
   margin: 0;
   padding: 0;
+  font-size: 12px;
 }

example/markdown/public/index.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta name="theme-color" content="#000000">
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+  <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> -->
   <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
   <!--
     Notice the use of %PUBLIC_URL% in the tags above.

example/markdown/src/app/App.js

@@ -1,30 +1,26 @@
-import React, { Component } from 'react';
+import React from 'react';
 import logo from './logo.svg';
 import styles from './App.module.less';
 import markdown from './App.md';
 
-class App extends Component {
-  render() {
-    return (
-      <div className={styles.App}>
-        <header className={styles.AppHeader}>
-          <img src={logo} className={styles.AppLogo} alt="logo" />
-          <p>
-            Edit <code>src/app/App.js</code> and save to reload.
-          </p>
-          <p>{markdown}</p>
-          <div>
-            <a className={styles.AppLink} href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
-              Learn React
-            </a>
-            <a className={styles.AppLink} href="https://github.com/kktjs/kkt" target="_blank" rel="noopener noreferrer">
-              Learn KKT
-            </a>
-          </div>
-        </header>
-      </div>
-    );
-  }
+export default function App() {
+  return (
+    <div className={styles.App}>
+      <header className={styles.AppHeader}>
+        <img src={logo} className={styles.AppLogo} alt="logo" />
+        <p>
+          Edit <code>src/app/App.js</code> and save to reload.
+        </p>
+        <p>{markdown}</p>
+        <div>
+          <a className={styles.AppLink} href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
+            Learn React
+          </a>
+          <a className={styles.AppLink} href="https://github.com/kktjs/kkt" target="_blank" rel="noopener noreferrer">
+            Learn KKT
+          </a>
+        </div>
+      </header>
+    </div>
+  );
 }
-
-export default App;

example/markdown/src/index.js

@@ -2,5 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './app/App';
 import './index.less';
+import './index.css';
 
 ReactDOM.render(<App />, document.getElementById('root'));

example/rematch/README.md → example/react-router/README.md

@@ -1,12 +1,12 @@
-Basic Example for rematch
+Basic Example for react-router
 ===
 
-Use [`Rematch`](https://github.com/rematch/rematch) for the project.
+Use [`react-router`](https://github.com/remix-run/react-router) for the project.
 
 ## Quick Start
 
 ```bash
-$ npx create-kkt my-app -e rematch
+$ npx create-kkt my-app -e react-router
 cd my-app
 npm install
 ```

example/rematch/package.json → example/react-router/package.json

@@ -14,16 +14,10 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@rematch/core": "2.2.0",
-    "@rematch/loading": "2.1.2",
-    "axios": "0.21.2",
-    "history": "5.0.1",
+    "axios": "0.24.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-dynamic-loadable": "3.0.0",
-    "react-redux": "7.2.5",
-    "react-router-dom": "5.2.0",
-    "redux": "4.1.1"
+    "react-router-dom": "6.2.1"
   },
   "devDependencies": {
     "@kkt/less-modules": "6.11.0",

example/rematch/public/index.html → example/react-router/public/index.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta name="theme-color" content="#000000">
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+  <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> -->
   <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
   <!--
     Notice the use of %PUBLIC_URL% in the tags above.

example/react-router/src/App.jsx

@@ -0,0 +1,8 @@
+import { useRoutes } from 'react-router-dom';
+import { AuthProvider } from './components/AuthProvider';
+import { routes } from './routers';
+
+export default function App() {
+  const element = useRoutes(routes);
+  return <AuthProvider>{element}</AuthProvider>;
+}

example/react-router/src/components/AuthProvider/index.jsx

@@ -0,0 +1,56 @@
+import { createContext, useState, useContext } from 'react';
+import { useLocation, Navigate } from 'react-router-dom';
+
+let AuthContext = createContext(null);
+/**
+ * This represents some generic auth provider API, like Firebase.
+ */
+const fakeAuthProvider = {
+  isAuthenticated: false,
+  signin(callback) {
+    fakeAuthProvider.isAuthenticated = true;
+    setTimeout(callback, 100); // fake async
+  },
+  signout(callback) {
+    fakeAuthProvider.isAuthenticated = false;
+    setTimeout(callback, 100);
+  },
+};
+
+export function AuthProvider({ children }) {
+  let [user, setUser] = useState(null);
+
+  let signin = ({ username, password }, callback) =>
+    fakeAuthProvider.signin(() => {
+      setUser(username);
+      callback();
+    });
+
+  let signout = (callback) => {
+    return fakeAuthProvider.signout(() => {
+      setUser(null);
+      callback();
+    });
+  };
+
+  return <AuthContext.Provider value={{ user, signin, signout }}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth() {
+  return useContext(AuthContext);
+}
+
+export function RequireAuth({ children }) {
+  let auth = useAuth();
+  let location = useLocation();
+
+  if (!auth.user) {
+    // Redirect them to the /login page, but save the current location they were
+    // trying to go to when they were redirected. This allows us to send them
+    // along to that page after they login, which is a nicer user experience
+    // than dropping them off on the home page.
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+
+  return children;
+}

example/react-router/src/components/Error.jsx

@@ -0,0 +1,3 @@
+export default function NoMatch() {
+  return <div>Error.</div>;
+}

example/react-router/src/components/GlobalHeader/index.js

@@ -0,0 +1,20 @@
+import { Link } from 'react-router-dom';
+import styles from './index.module.less';
+import { useAuth } from '../AuthProvider';
+
+export default function GlobalHeader() {
+  let auth = useAuth();
+  // let navigate = useNavigate();
+  // console.log('auth:', auth, navigate)
+  return (
+    <div className={styles.header}>
+      <div className={styles.inner}>
+        <Link to="/"> 首页 </Link>
+        <div className={styles.right}>
+          {auth.user ? <Link to="/"> 你好！{auth.user || '-'} </Link> : <Link to="/login"> 登录 </Link>}
+          {auth.user && <Link to="/login"> 退出登录 </Link>}
+        </div>
+      </div>
+    </div>
+  );
+}

example/react-router/src/components/SiderMenu/index.jsx

@@ -0,0 +1,5 @@
+import styles from './index.module.less';
+
+export default function SiderMenu() {
+  return <div className={styles.wapper}>菜单</div>;
+}

example/react-router/src/index.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import './styles/index.less';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
+  document.getElementById('root'),
+);

example/react-router/src/layouts/BasicLayout.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import SiderMenu from '../components/SiderMenu';
+import GlobalHeader from '../components/GlobalHeader';
+import styles from './BasicLayout.module.less';
+
+export default function BasicLayout() {
+  return (
+    <div className={styles.wapper}>
+      <SiderMenu />
+      <div className={styles.container}>
+        <GlobalHeader />
+        <Outlet />
+      </div>
+    </div>
+  );
+}

example/react-router/src/routers.jsx

@@ -0,0 +1,40 @@
+import { lazy, Suspense } from 'react';
+import BasicLayout from './layouts/BasicLayout';
+import LoginPage from './routes/login';
+import NoMatch from './routes/NoMatch';
+
+const Loadable = (Component) => (props) =>
+  (
+    <Suspense fallback={<div>Loading...</div>}>
+      <Component {...props} />
+    </Suspense>
+  );
+
+const Home = Loadable(lazy(() => import('./routes/home')));
+const Help = Loadable(lazy(() => import('./routes/help/dashboard')));
+
+export const routes = [
+  {
+    path: '/login',
+    element: <LoginPage />,
+  },
+  {
+    path: '/',
+    element: <BasicLayout />,
+    children: [
+      {
+        index: true,
+        element: <Home />,
+      },
+      {
+        path: '/home',
+        element: <Home />,
+      },
+      {
+        path: '/help',
+        element: <Help />,
+      },
+      { path: '*', element: <NoMatch /> },
+    ],
+  },
+];

example/react-router/src/routes/NoMatch/index.jsx

@@ -0,0 +1,12 @@
+import { Link } from 'react-router-dom';
+
+export default function NoMatch() {
+  return (
+    <div>
+      <h2>It looks like you're lost...</h2>
+      <p>
+        <Link to="/">Go to the home page</Link>
+      </p>
+    </div>
+  );
+}