@variousjs/create 0.3.1 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@variousjs/create",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "description": "VariousJS boilerplate",
   "bin": "bin/create.js",
   "publishConfig": {
@@ -33,10 +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.1",
+    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^4.31.2",
     "@typescript-eslint/parser": "^4.31.2",
-    "@variousjs/various": "^0.4.0",
+    "@variousjs/various": "^0.6.0",
     "babel-loader": "^8.2.2",
     "css-loader": "^6.3.0",
     "eslint": "^7.32.0",
@@ -51,6 +51,6 @@
     "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"
   }
 }

package/package.json.copy

@@ -0,0 +1,40 @@
+{
+  "name": "variousjs",
+  "version": "0.1.0",
+  "description": "VariousJS boilerplate",
+  "scripts": {
+    "lint": "tsc --noemit && eslint . --ext .ts,.tsx,.js",
+    "start": "webpack --progress --config ./webpack/component.js & webpack serve --config ./webpack/entry.js --progress",
+    "build": "webpack --progress --config ./webpack/base.js"
+  },
+  "author": "LoeiFy <LoeiFy@gmail.com>",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.6",
+    "@babel/preset-react": "^7.14.5",
+    "@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.6.0",
+    "babel-loader": "^8.2.2",
+    "css-loader": "^6.3.0",
+    "eslint": "^7.32.0",
+    "eslint-import-resolver-typescript": "^2.5.0",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.26.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "less": "^4.1.1",
+    "less-loader": "^10.0.1",
+    "style-loader": "^3.3.0",
+    "typescript": "^4.4.3",
+    "webpack": "^5.54.0",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.7.3"
+  },
+  "private": true
+}

package/src/components/card.tsx

@@ -1,10 +1,11 @@
 import React, { FC } from 'react'
 import { ComponentProps } 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 { id } = useParams<{ id: string }>()
 
   return (
     <div className={csses.container}>

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/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',
@@ -47,7 +52,6 @@ const config = {
     allowedHosts: 'all',
     port: 2333,
     host: '0.0.0.0',
-    https: true,
     static: {
       directory: path.join(__dirname, '../demo'),
     },