refactor(basic-routes-rematch-new):用ts重新案例

example/basic-routes-rematch-new/src/client.js → example/basic-routes-rematch-new/src/client.tsx

@@ -13,7 +13,8 @@ ReactDOM.hydrate(
     </BrowserRouter>
   </Provider>
   , document.getElementById('root'));
-
+// @ts-ignore
 if (module.hot) {
+  // @ts-ignore
   module.hot.accept();
 }

example/basic-routes-rematch-new/src/models/demo.ts

@@ -0,0 +1,14 @@
+import { createModel } from "@rematch/core"
+import { RootModel } from "./index"
+
+export default createModel<RootModel>()({
+  name: "demo",
+  state: {
+    title: "demo 标题"
+  },
+  effects: () => ({
+    async very(_, store) {
+      console.log("打印 demo", store.demo.title)
+    }
+  })
+})

example/basic-routes-rematch-new/src/models/index.ts

@@ -0,0 +1,36 @@
+import login from "./login"
+import demo from "./demo"
+// @ts-ignore
+import {
+  init,
+  Models,
+  Model,
+  RematchRootState,
+  RematchDispatch,
+} from '@rematch/core';
+import loading, { ExtraModelsFromLoading } from '@rematch/loading';
+
+export const models = {
+  login,
+  demo,
+}
+
+export interface RootModel extends Models<RootModel> {
+  login: typeof login,
+  demo: typeof demo,
+}
+export type FullModel = ExtraModelsFromLoading<RootModel>
+
+export const store = init<RootModel, FullModel>({
+  models,
+  plugins: [loading()],
+});
+
+export const { dispatch, addModel } = store;
+export type Store = typeof store;
+export type AddModel = typeof addModel;
+export type Dispatch = RematchDispatch<RootModel>;
+export type RootState = RematchRootState<RootModel, FullModel>;
+export type ModelDefault<T = any> = Model<RootModel, T>;
+
+export default store;

example/basic-routes-rematch-new/src/models/login.js → example/basic-routes-rematch-new/src/models/login.ts

@@ -1,13 +1,14 @@
 import { createModel } from "@rematch/core"
+import { RootModel } from "./index"
 
-export default createModel()({
+export default createModel<RootModel>()({
   name: "login",
   state: {
     title: "login 标题"
   },
   effects: () => ({
-    async very(_, { login }) {
-      console.log("打印 login", login.title)
+    async very(_, store) {
+      console.log("打印 login", store.login.title)
     }
   }),
   reducers: {

example/basic-routes-rematch-new/src/routes/About/index.js → example/basic-routes-rematch-new/src/routes/About/index.tsx

@@ -1,9 +1,8 @@
 import React from "react";
 import { useSelector } from 'react-redux'
-
+import { RootState } from "./../../models"
 const About = () => {
-  const title = useSelector(({ demo }) => demo.title)
-
+  const title = useSelector<RootState>((store) => store.demo.title)
   return <div>About {title}</div>
 }
 export default About;

example/basic-routes-rematch-new/src/routes/Home/index.js → example/basic-routes-rematch-new/src/routes/Home/index.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import { useSelector } from 'react-redux'
+import { RootState } from "./../../models"
 
 const Home = () => {
-  const title = useSelector(({ login }) => login.title)
+  const title = useSelector<RootState>(({ login }) => login.title)
 
   const [count, setCount] = React.useState(1)
 

example/basic-routes-rematch-new/src/routes/index.js → example/basic-routes-rematch-new/src/routes/index.tsx

@@ -14,7 +14,8 @@ const Nav = () => {
 export default () => {
   return <Routes>
     <Route path="/" element={<Nav />} >
-      <Route index path="/home" element={<Home />} />
+      <Route index element={<Home />} />
+      <Route path="/home" element={<Home />} />
       <Route path="/about" element={<About />} />
       <Route path="*" element={<div>无页面</div>} />
     </Route>

example/basic-routes-rematch-new/src/server.js → example/basic-routes-rematch-new/src/server.ts

@@ -5,17 +5,19 @@ const logs = console.log; // eslint-disable-line
 
 const server = http.createServer(app);
 let currentApp = app;
-const PORT = parseInt(process.env.PORT || 3000) + 1;
+const PORT = parseInt(process.env.PORT || "3000") + 1;
 const HOST = process.env.HOST || 'localhost';
+// @ts-ignore
 server.listen(PORT, (error) => {
   if (error) {
     logs(error);
   }
   logs('🚀 started!', `PORT: http://${HOST}:${PORT}`);
 });
-
+// @ts-ignore
 if (module.hot) {
   logs('✅  Server-side HMR Enabled!');
+  // @ts-ignore
   module.hot.accept('./serverIndex', () => {
     logs('🔁  HMR Reloading `./serverIndex`...');
     server.removeListener('request', currentApp);

example/basic-routes-rematch-new/src/serverIndex.js → example/basic-routes-rematch-new/src/serverIndex.tsx

@@ -8,16 +8,16 @@ import { Provider } from 'react-redux';
 import store from "./models"
 import App from './routes';
 
-
+// @ts-ignore
 const assetsMainifest = new Function(`return ${FS.readFileSync(`${OUTPUT_PUBLIC_PATH}/asset-client-manifest.json`, "utf-8")}`)()
 
 
 const appDirectory = FS.realpathSync(process.cwd());
-const resolveApp = (relativePath) => Path.resolve(appDirectory, relativePath);
+const resolveApp = (relativePath: string) => Path.resolve(appDirectory, relativePath);
 const server = express();
 // server.use(express.static(resolveApp("dist")))
 
-const render = (props = {}) => {
+const render = (props: any = {}) => {
   const html = renderToString(
     <Provider store={store}>
       <StaticRouter location={props.url}>

example/basic-routes-rematch-new/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "lib": [
+      "esnext",
+      "dom"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "declaration": true,
+    "baseUrl": ".",
+    "jsx": "react-jsx",
+    "noFallthroughCasesInSwitch": true,
+    "noEmit": true,
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+    }
+  },
+  "include": [
+    "src/**/*",
+    ".kktssrrc.ts"
+  ]
+}

example/basic-routes/src/client.tsx

@@ -4,7 +4,7 @@ import { BrowserRouter } from "react-router-dom"
 // import { BrowserRouter } from "react-router"
 import App from './routes/index';
 
-ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
+ReactDOM.hydrate(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
 
 // @ts-ignore
 if (module.hot) {

example/basic-routes/src/server.ts

@@ -7,7 +7,11 @@ const server = http.createServer(app);
 let currentApp = app;
 const PORT = parseInt(process.env.PORT || "3000") + 1;
 const HOST = process.env.HOST || 'localhost';
-server.listen(PORT, () => {
+// @ts-ignore
+server.listen(PORT, (error) => {
+  if (error) {
+    logs(error);
+  }
   logs('🚀 started!', `PORT: http://${HOST}:${PORT}`);
 });
 // @ts-ignore

example/basic-routes/tsconfig.json

@@ -24,13 +24,10 @@
       "@/*": [
         "./src/*"
       ],
-      "@@/*": [
-        "./src/.uiw/*"
-      ]
     }
   },
   "include": [
     "src/**/*",
-    ".kktrc.ts"
+    ".kktssrrc.ts"
   ]
 }