@variousjs/create 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@variousjs/create",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "VariousJS boilerplate",
   "bin": "bin/create.js",
   "publishConfig": {
@@ -8,8 +8,8 @@
   },
   "scripts": {
     "lint": "tsc --noemit && eslint . --ext .ts,.tsx,.js",
-    "start": "webpack --progress --config webpack.component.config.js & webpack serve --config webpack.entry.config.js --progress",
-    "build": "webpack --progress --config webpack.base.config.js",
+    "start": "webpack --progress --config ./webpack/component.js & webpack serve --config ./webpack/entry.js --progress",
+    "build": "webpack --progress --config ./webpack/base.js",
     "prepublishOnly": "node bin/copy.js"
   },
   "repository": {
@@ -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.3.0",
+    "@variousjs/various": "^0.5.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

@@ -4,8 +4,8 @@
   "description": "VariousJS boilerplate",
   "scripts": {
     "lint": "tsc --noemit && eslint . --ext .ts,.tsx,.js",
-    "start": "webpack --progress --config webpack.component.config.js & webpack serve --config webpack.entry.config.js --progress",
-    "build": "webpack --progress --config webpack.base.config.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",
@@ -16,10 +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.1",
+    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^4.31.2",
     "@typescript-eslint/parser": "^4.31.2",
-    "@variousjs/various": "^0.3.0",
+    "@variousjs/various": "^0.5.0",
     "babel-loader": "^8.2.2",
     "css-loader": "^6.3.0",
     "eslint": "^7.32.0",
@@ -34,7 +34,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"
   },
   "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.config.js → webpack/base.js}

@@ -3,14 +3,15 @@ const path = require('path')
 const config = {
   stats: 'minimal',
   entry: {
-    entry: path.join(__dirname, './src/entry'),
+    entry: path.join(__dirname, '../src/entry'),
 
     // 组件入口定义
-    card: path.join(__dirname, './src/components/card.tsx'),
-    next: path.join(__dirname, './src/components/next.tsx'),
+    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'),
+    path: path.resolve(__dirname, '../demo/dist'),
     publicPath: '/dist/',
     filename: '[name].js',
     libraryTarget: 'amd',
@@ -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,9 +52,8 @@ const config = {
     allowedHosts: 'all',
     port: 2333,
     host: '0.0.0.0',
-    https: true,
     static: {
-      directory: path.join(__dirname, './demo'),
+      directory: path.join(__dirname, '../demo'),
     },
     // 监听文件构建后重新刷新页面，包括 html 文件
     watchFiles: ['demo'],

package/{webpack.component.config.js → webpack/component.js}

@@ -1,4 +1,4 @@
-const base = require('./webpack.base.config')
+const base = require('./base')
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const { entry, ...rest } = base.entry

package/{webpack.entry.config.js → webpack/entry.js}

@@ -1,4 +1,4 @@
-const base = require('./webpack.base.config')
+const base = require('./base')
 
 const { entry } = base.entry
 const config = {