add px2rem-loader

Author: xpioneer

.eslintrc.js

@@ -51,6 +51,7 @@ module.exports = {
     'react/jsx-first-prop-new-line': 'off',
     'react/jsx-indent': [ 'error', 2 ],
     'react/jsx-indent-props': [2, 2],
+    'react/prop-types': 0,
 
     // @typescript-eslint 
     '@typescript-eslint/indent': [2, 2],

build/px2rem-loader.js

@@ -0,0 +1,23 @@
+const loaderUtils = require('loader-utils')
+
+const pxReg = /\b(\d+(\.\d+)?)PX\b/g
+
+module.exports = function(content) {
+
+  const options = loaderUtils.getOptions(this)
+
+  const config = Object.assign({}, {
+    remRoot: 40,
+    fixed: 4
+  }, options)
+
+  if(pxReg.test(content)) {
+    return content.replace(pxReg, ($0, $1) => {
+      let val = $1 / config.remRoot;
+      val = parseFloat(val.toFixed(config.fixed));
+      return val === 0 ? val : val + 'rem';
+    })
+  }
+
+  return content
+}

build/webpack.base.conf.js

@@ -26,6 +26,13 @@ module.exports = {
     filename: 'static/js/[name].[hash:8].js'
   },
 
+  resolveLoader: {
+    modules: [
+      resolve('build'),
+      'node_modules'
+    ]
+  },
+
   module: {
     rules: [
       // {
@@ -35,6 +42,14 @@ module.exports = {
       //     transpileOnly: true
       //   }
       // },
+      {
+        test: /\.(j|t)sx?$/,
+        loader: 'px2rem-loader',
+        options: {
+          remRoot: 40,
+          fixed: 6
+        }
+      },
       {
         test: /\.(j|t)sx?$/,
         include: [

package.json

@@ -81,10 +81,6 @@
     "src/**/*.{js,jsx,ts,tsx}": [
       "npm run lint:fix",
       "git add"
-    ],
-    "src/**/*.{css,less,json,html,md,markdown}": [
-      "prettier --write",
-      "git add"
     ]
   }
 }

src/index.html

@@ -12,9 +12,7 @@
     function getSize() {
       var w = _html.clientWidth;
       if(w <= 320) {
-        _html.style.fontSize = '17px';
-      } else if(w >= 750) {
-        _html.style.fontSize = '40px';
+        _html.style.fontSize = '17.06666666px';
       } else {
         _html.style.fontSize = w/750*40 + 'px';
       }

src/pages/app.tsx

@@ -8,24 +8,21 @@ const { lazy, Suspense } = React
 const Home = lazy(() => import( /* webpackChunkName:"home" */'@pages/home/home'))
 const Login = lazy(() => import( /* webpackChunkName:"login" */'@pages/login/login'))
 
-class App extends React.Component {
+const App: React.FC = () => {
 
-  render(){
-
-    return (
-      <Provider {...stores}>
-        <Router>
-          <Suspense fallback={<Loading size="large"/>}>
-            <Switch>
-              <Route path="/home" component={(props: any) => <Home {...props}/>}/>
-              <Route path="/login" exact component={(props: any) => <Login {...props}/>}/>
-              <Redirect to="/home"/>
-            </Switch>
-          </Suspense>
-        </Router>
-      </Provider>
-    )
-  }
+  return (
+    <Provider {...stores}>
+      <Router>
+        <Suspense fallback={<Loading size="large"/>}>
+          <Switch>
+            <Route path="/home" component={(props: any) => <Home {...props}/>}/>
+            <Route path="/login" exact component={(props: any) => <Login {...props}/>}/>
+            <Redirect to="/home"/>
+          </Switch>
+        </Suspense>
+      </Router>
+    </Provider>
+  )
 }
 
 export default App

src/pages/dashboard/dashboard.tsx

@@ -5,6 +5,8 @@ export default class Dashboard extends React.Component {
     return <div>
       <p>Welcome to Dashboard!</p>
       <div>GraphQL Application. </div>
+      <p style={{width: '400PX', height: 40, fontSize: '24px'}}>测试rem</p>
+      <div>66px</div>
     </div>
   }
 }

src/pages/demo/demoHooks.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react'
+import { Button } from 'antd'
+
+
+function useState<T>(initialValue: T): [T, (newState: T) => void] {
+  let state = initialValue
+
+  function setState(newState: T) {
+    state = newState
+    // render()
+  }
+  return [state, setState]
+}
+
+
+export const HookButton: React.FC = props => {
+
+  let [count, setCount] = React.useState(0)
+
+  React.useEffect(() => {
+    console.log(count, '_v')
+  }, [count > 5])
+  
+  return <Button onClick={() => setCount(++count)}>{count}</Button>
+}
+
+const AppContext = React.createContext(null)
+
+const { Provider, Consumer } = AppContext
+
+const DemoContextGrandson: React.FC = props => {
+
+  const msg = React.useContext(AppContext)
+  
+  return <div>孙子节点：{msg}</div>
+}
+
+const DemoContextSon: React.FC = props => {
+  
+  return <Consumer>
+    {/* <DemoContextGrandson></DemoContextGrandson> */}
+  </Consumer>
+}
+
+
+
+const DemoContext: React.FC = props => {
+  
+  return <Provider value="this is test context">
+    <DemoContextSon></DemoContextSon>
+  </Provider>
+}
+

src/pages/demo/demoRedux.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import { Row, Col, Button, Badge, Icon, Form, Input, Select } from 'antd'
 import { ReduxProvider, connect } from '../../plugins/react-redux'
 import { store, countActions } from './reducer'
+import { HookButton } from './demoHooks'
 
 console.log(store.getState(), '---store')
 
@@ -61,6 +62,7 @@ class DemoRedux extends React.Component<any> {
             <Button onClick={ADD}>
               <Icon type="plus" />
             </Button>
+            <HookButton></HookButton>
           </Col>
         </Row>
       </section>

src/plugins/react-redux/connect.tsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { ICreateStore } from '../redux'
+import {} from './provider'
 
 export function connect<T>(
   mapStateToProps?: Function,
@@ -53,4 +54,58 @@ export function connect<T>(
       }
     }
   }
-} 
+}
+
+
+export function connect1<T>(
+  mapStateToProps?: Function,
+  mapDispatchToProps?: Function
+) {
+  
+  return function connectWithComponent(WrappedComponent: React.ComponentType) {
+  
+    return class CustomeComponent extends Component {
+      
+      static contextTypes = {
+        store: PropTypes.shape({
+          subscribe: PropTypes.func.isRequired,
+          dispatch: PropTypes.func.isRequired,
+          getState: PropTypes.func.isRequired
+        }).isRequired
+      }
+
+      constructor(props: any, context: {store: ICreateStore}) {
+        super(props)
+        this.store = context.store
+        this.state = mapStateToProps(this.store.getState())
+        if(typeof mapDispatchToProps === 'function') {
+          this.mappedDispatch = mapDispatchToProps(this.store.dispatch)
+        }
+        console.log('connect....constructor', this.state, this.mappedDispatch)
+      }
+
+      state = {}
+
+      store = {} as ICreateStore
+      mappedDispatch: any = {}
+      unsub = () => {}
+    
+      componentDidMount() {
+        console.log('connect----componentDidMount', mapStateToProps(this.store.getState()))
+        this.unsub = this.store.subscribe(() => {
+          const mappedState = mapStateToProps(this.store.getState())
+          console.log(mappedState, '----mappedState')
+          this.setState(mappedState)
+        })
+      }
+    
+      componentWillUnmount() {
+        this.unsub()
+      }
+    
+      render() {
+        return <WrappedComponent {...this.props} {...this.state} {...this.mappedDispatch}/>
+      }
+    }
+  }
+}