@variousjs/create 0.3.3 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@variousjs/create",
-  "version": "0.3.3",
+  "version": "0.5.0",
   "description": "VariousJS boilerplate",
   "bin": "bin/create.js",
   "publishConfig": {
@@ -33,9 +33,10 @@
     "@babel/preset-typescript": "^7.15.0",
     "@types/react": "^17.0.27",
     "@types/react-dom": "^17.0.9",
+    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^4.31.2",
     "@typescript-eslint/parser": "^4.31.2",
-    "@variousjs/various": "^0.4.1",
+    "@variousjs/various": "^1.0.0",
     "babel-loader": "^8.2.2",
     "css-loader": "^6.3.0",
     "eslint": "^7.32.0",
@@ -50,6 +51,7 @@
     "typescript": "^4.4.3",
     "webpack": "^5.54.0",
     "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.3.0"
-  }
+    "webpack-dev-server": "^4.7.3"
+  },
+  "dependencies": {}
 }

package/package.json.copy

@@ -16,9 +16,10 @@
     "@babel/preset-typescript": "^7.15.0",
     "@types/react": "^17.0.27",
     "@types/react-dom": "^17.0.9",
+    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^4.31.2",
     "@typescript-eslint/parser": "^4.31.2",
-    "@variousjs/various": "^0.4.1",
+    "@variousjs/various": "^1.0.0",
     "babel-loader": "^8.2.2",
     "css-loader": "^6.3.0",
     "eslint": "^7.32.0",
@@ -33,7 +34,8 @@
     "typescript": "^4.4.3",
     "webpack": "^5.54.0",
     "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.3.0"
+    "webpack-dev-server": "^4.7.3"
   },
+  "dependencies": {},
   "private": true
 }

package/src/components/card.tsx

@@ -1,10 +1,11 @@
 import React, { FC } from 'react'
-import { ComponentProps } from '@variousjs/various'
+import { ComponentProps, Invoker } from '@variousjs/various'
+import { useParams } from 'react-router-dom'
 import { Card, Button, message } from 'antd'
 import csses from './card.less'
 
-const H: FC<ComponentProps> & { getName: (e: string) => any } = (props) => {
-  const id = props.$router?.match.params.id
+const H: FC<ComponentProps> & { getName: Invoker } = (props) => {
+  const { id } = useParams<{ id: string }>()
 
   return (
     <div className={csses.container}>
@@ -40,6 +41,6 @@ const H: FC<ComponentProps> & { getName: (e: string) => any } = (props) => {
   )
 }
 
-H.getName = (e) => message.info(e)
+H.getName = (e) => message.info(e.value)
 
 export default H

package/src/components/next.tsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { ComponentProps, Store, Connect as CT } from '@variousjs/various'
+import { ComponentProps, Store, Connect as CT, Invoker } from '@variousjs/various'
 import { Descriptions } from 'antd'
 import { Store as GlobalStore } from '../types'
 
@@ -9,16 +9,16 @@ type Connect = CT<S>
 const {
   createStore,
   connect,
-  dispatch,
+  emit,
   getStore,
 } = new Store<S>()
 
 createStore({ value: 0 })
 
 class X extends Component<Connect & ComponentProps<GlobalStore>> {
-  static setValue = async (value: number) => {
+  static setValue: Invoker = async ({ value }) => {
     const store = getStore()
-    dispatch({ value: value + store.value }, true)
+    emit({ value: value + store.value }, true)
   }
 
   render() {

package/src/components/top.tsx

@@ -0,0 +1,54 @@
+import React, { FC, useState, useEffect } from 'react'
+import { ComponentProps } from '@variousjs/various'
+import { useLocation, useHistory } from 'react-router-dom'
+import { Radio, Badge, Button } from 'antd'
+import { Config, Store } from '../types'
+
+const H: FC<ComponentProps<Store, Config>> = (props) => {
+  const { pathname } = useLocation()
+  const history = useHistory()
+  const [path, setPath] = useState('')
+
+  useEffect(() => {
+    setPath(pathname)
+  }, [])
+
+  const onRouterChange = (e: any) => {
+    history.push(e.target.value)
+    setPath(e.target.value)
+  }
+
+  return (
+    <>
+    <Radio.Group
+      size="large"
+      value={path}
+      onChange={onRouterChange}
+      buttonStyle="solid"
+    >
+      {
+        props.$config.links.map(({ path, name }) => (
+          <Radio.Button key={path} value={path}>
+            {name}
+          </Radio.Button>
+        ))
+      }
+    </Radio.Group>
+    <div>
+      Store:
+      <Badge
+        style={{ marginLeft: 10 }}
+        count={props.$store.user.name}
+      />
+        <Button
+          style={{ marginLeft: 10 }}
+          onClick={() => props.$dispatch('card', 'getName', 'Card')}
+        >
+          Card Name
+        </Button>
+      </div>
+    </>
+  )
+}
+
+export default H

package/src/entry/actions.ts

@@ -2,13 +2,13 @@ import { Actions } from '@variousjs/various'
 import { Store } from '../types'
 
 const actions: Actions<Store> = {
-  async setName({ dispatch, getStore }, value) {
+  async setName({ emit, getStore }, { value }) {
     await new Promise((r) => setTimeout(r, 1000))
     const { user } = getStore()
     user.name = value
-    dispatch({ user })
+    emit({ user })
   },
-  getName({ getStore }) {
+  async getName({ getStore }) {
     const { user } = getStore()
     return user.name
   },

package/src/entry/container.tsx

@@ -1,60 +1,20 @@
 import React, { Component, ComponentType } from 'react'
-import { ContainerProps, Router, Route } from '@variousjs/various'
-import { Radio, Badge, Button } from 'antd'
-import { Store, Config } from '../types'
+import { ContainerProps } from '@variousjs/various'
+import { HashRouter as Router, Route } from 'react-router-dom'
+import { Config } from '../types'
 import csses from './entry.less'
 
-class Container extends Component<ContainerProps<Store, Config>> {
-  state = {
-    path: '/'
-  }
-
-  onRouterChange = (e: any) => {
-    this.props.$router.history.push(e.target.value)
-    this.setState({ path: e.target.value })
-  }
-
-  componentDidMount() {
-    this.setState({ path: this.props.$router.location.pathname })
-  }
-
+class Container extends Component<ContainerProps<Config>> {
   render() {
-    const { $component, $config, $store } = this.props
+    const { $component, $config } = this.props
+    const Top = $component('top')
 
     return (
       <div className={csses.container}>
-        <div className={csses.top}>
-          <Radio.Group
-            size="large"
-            value={this.state.path}
-            onChange={this.onRouterChange}
-            buttonStyle="solid"
-          >
-            {
-              $config.links.map(({ path, name }) => (
-                <Radio.Button key={path} value={path}>
-                  {name}
-                </Radio.Button>
-              ))
-            }
-          </Radio.Group>
-
-          <div>
-            Store:
-            <Badge
-              style={{ marginLeft: 10 }}
-              count={$store.user.name}
-            />
-            <Button
-              style={{ marginLeft: 10 }}
-              onClick={() => this.props.$dispatch('card', 'getName', 'Card')}
-            >
-              Card Name
-            </Button>
-          </div>
-        </div>
-
         <Router>
+          <div className={csses.top}>
+            <Top />
+          </div>
           {
             $config.pages.map(({ path, components }) => {
               const cs = () => components.map((name) => {

package/webpack/base.js

@@ -8,6 +8,7 @@ const config = {
     // 组件入口定义
     card: path.join(__dirname, '../src/components/card.tsx'),
     next: path.join(__dirname, '../src/components/next.tsx'),
+    top: path.join(__dirname, '../src/components/top.tsx'),
   },
   output: {
     path: path.resolve(__dirname, '../demo/dist'),
@@ -26,6 +27,10 @@ const config = {
       root: 'ReactDOM',
       amd: 'react-dom',
     },
+    'react-router-dom': {
+      root: 'ReactRouterDOM',
+      amd: 'react-router-dom',
+    },
     '@variousjs/various': {
       root: 'various',
       amd: '@variousjs/various',