feat: support mock (#506)

raxjs · Nov 30, 2020 · a6cc811 · a6cc811
1 parent 126051c
commit a6cc811
Show file tree

Hide file tree

Showing 16 changed files with 226 additions and 1 deletion.
diff --git a/examples/basic-compat-react/package.json b/examples/basic-compat-react/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "with-rax",
+  "name": "basic-compat-react",
   "description": "rax example",
   "dependencies": {
     "rax": "^1.1.0",

diff --git a/examples/basic-compat-react/tsconfig.json b/examples/basic-compat-react/tsconfig.json
@@ -0,0 +1,33 @@
+{
+  "compileOnSave": false,
+  "buildOnSave": false,
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "build",
+    "module": "esnext",
+    "target": "es6",
+    "jsx": "preserve",
+    "jsxFactory": "createElement",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "rootDir": "./",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": false,
+    "importHelpers": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "rax-app": [".rax/index.ts"]
+    }
+  },
+  "include": ["src", ".rax"],
+  "exclude": ["node_modules", "build", "public"]
+}
diff --git a/examples/basic-mock/README.md b/examples/basic-mock/README.md
@@ -0,0 +1 @@
+# basic mock
diff --git a/examples/basic-mock/build.json b/examples/basic-mock/build.json
@@ -0,0 +1,3 @@
+{
+  "targets": ["web"]
+}
diff --git a/examples/basic-mock/mock/index.js b/examples/basic-mock/mock/index.js
@@ -0,0 +1,18 @@
+module.exports = {
+  // 同时支持 GET 和 POST
+  '/api/users/1': { data: {} },
+  '/api/foo/bar': { data: {} },
+
+  // 支持标准 HTTP
+  'GET /api/users': (req, res) => {
+    const { id } = req.query;
+    res.send({ id: id });
+  },
+  'DELETE /api/users': { users: [1, 2] },
+
+  // 支持参数
+  'POST /api/users/:id': (req, res) => {
+    const { id } = req.params;
+    res.send({ id: id });
+  },
+};
diff --git a/examples/basic-mock/package.json b/examples/basic-mock/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "basic-mock",
+  "description": "rax example",
+  "dependencies": {
+    "rax": "^1.1.0",
+    "rax-document": "^0.1.0",
+    "rax-image": "^2.0.0",
+    "rax-link": "^1.0.1",
+    "rax-text": "^1.0.0",
+    "rax-view": "^1.0.0",
+    "universal-request": "^2.2.0"
+  },
+  "devDependencies": {
+    "@types/rax": "^1.0.0"
+  },
+  "scripts": {
+    "start": "rax-app start",
+    "build": "rax-app build"
+  },
+  "engines": {
+    "node": ">=8.0.0"
+  }
+}
diff --git a/examples/basic-mock/src/app.json b/examples/basic-mock/src/app.json
@@ -0,0 +1,11 @@
+{
+  "routes": [
+    {
+      "path": "/",
+      "source": "pages/Home/index"
+    }
+  ],
+  "window": {
+    "title": "Rax App"
+  }
+}
diff --git a/examples/basic-mock/src/app.tsx b/examples/basic-mock/src/app.tsx
@@ -0,0 +1,4 @@
+import { createElement } from 'rax';
+import { runApp } from 'rax-app';
+
+runApp({});
diff --git a/examples/basic-mock/src/components/Logo/index.css b/examples/basic-mock/src/components/Logo/index.css
@@ -0,0 +1,5 @@
+.logo {
+  width: 200rpx;
+  height: 180rpx;
+  margin-bottom: 20rpx;
+}
diff --git a/examples/basic-mock/src/components/Logo/index.tsx b/examples/basic-mock/src/components/Logo/index.tsx
@@ -0,0 +1,21 @@
+import { createElement, PureComponent } from 'rax';
+import Image from 'rax-image';
+
+import './index.css';
+
+class Logo extends PureComponent {
+  render() {
+    const source = {
+      uri: `${process.env.PUBLIC_URL}/rax.png`,
+    };
+    console.log('with router =>', this.props);
+    return (
+      <Image
+        className="logo"
+        source={source}
+      />
+    );
+  }
+}
+
+export default Logo;
diff --git a/examples/basic-mock/src/document/index.jsx b/examples/basic-mock/src/document/index.jsx
@@ -0,0 +1,22 @@
+import { createElement } from 'rax';
+import { Root, Style, Script, Data } from 'rax-document';
+
+function Document(props) {
+  return (
+    <html>
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover" />
+        <title>@ali/demo-app</title>
+        <Style />
+      </head>
+      <body>
+        {/* root container */}
+        <Root />
+        <Data />
+        <Script />
+      </body>
+    </html>
+  );
+}
+export default Document;
diff --git a/examples/basic-mock/src/pages/Home/index.css b/examples/basic-mock/src/pages/Home/index.css
@@ -0,0 +1,16 @@
+.home {
+  align-items: center;
+  margin-top: 200rpx;
+}
+
+.title {
+  font-size: 35rpx;
+  font-weight: bold;
+  margin: 20rpx 0;
+}
+
+.info {
+  font-size: 36rpx;
+  margin: 8rpx 0;
+  color: #555;
+}
diff --git a/examples/basic-mock/src/pages/Home/index.tsx b/examples/basic-mock/src/pages/Home/index.tsx
@@ -0,0 +1,28 @@
+import { createElement, useEffect } from 'rax';
+import View from 'rax-view';
+import Text from 'rax-text';
+import request from 'universal-request';
+import Logo from '@/components/Logo';
+
+import './index.css';
+
+export default function Home() {
+  useEffect(() => {
+    request({
+      url: '/api/users',
+      data: {
+        id: 123
+      }
+    }).then(res => {
+      console.log('res', res)
+    });
+  }, []);
+
+  return (
+    <View className="home">
+      <Logo />
+      <Text className="title">Welcome to Your Rax App</Text>
+      <Text className="info">More information about Rax</Text>
+    </View>
+  );
+}
diff --git a/examples/basic-mock/tsconfig.json b/examples/basic-mock/tsconfig.json
@@ -0,0 +1,33 @@
+{
+  "compileOnSave": false,
+  "buildOnSave": false,
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "build",
+    "module": "esnext",
+    "target": "es6",
+    "jsx": "preserve",
+    "jsxFactory": "createElement",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "rootDir": "./",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": false,
+    "importHelpers": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "rax-app": [".rax/index.ts"]
+    }
+  },
+  "include": ["src", ".rax"],
+  "exclude": ["node_modules", "build", "public"]
+}
diff --git a/examples/with-rax/src/global.css b/examples/with-rax/src/global.css
@@ -0,0 +1,3 @@
+.home {
+  color: red
+}
diff --git a/packages/plugin-rax-web/src/setDev.js b/packages/plugin-rax-web/src/setDev.js
@@ -3,7 +3,11 @@
 const HTMLAssetPath = 'index.html';
 
 module.exports = (config) => {
+  const devServerBeforeHook = config.devServer.get('before');
   config.devServer.set('before', (app, devServer) => {
+    if (typeof devServerBeforeHook === 'function') {
+      devServerBeforeHook(app, devServer);
+    }
     // Get web compiler for intercept AppHistoryFallback
     const compiler = devServer.compiler.compilers[0];
     const httpResponseQueue = [];