@variousjs/create 1.2.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@variousjs/create",
-  "version": "1.2.0",
+  "version": "2.0.1",
   "description": "VariousJS boilerplate",
   "bin": "bin/create.js",
   "publishConfig": {
@@ -38,7 +38,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^4.31.2",
     "@typescript-eslint/parser": "^4.31.2",
-    "@variousjs/various": "^2.1.3",
+    "@variousjs/various": "^3.0.2",
     "babel-loader": "^8.2.2",
     "core-js": "^3.25.1",
     "css-loader": "^6.3.0",
@@ -52,7 +52,7 @@
     "less-loader": "^10.0.1",
     "style-loader": "^3.3.0",
     "typescript": "^4.4.3",
-    "webpack": "^5.54.0",
+    "webpack": "^5.78.0",
     "webpack-cli": "^4.8.0",
     "webpack-dev-server": "^4.7.3"
   },

package/package.json.copy

@@ -21,7 +21,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^4.31.2",
     "@typescript-eslint/parser": "^4.31.2",
-    "@variousjs/various": "^2.1.3",
+    "@variousjs/various": "^3.0.2",
     "babel-loader": "^8.2.2",
     "core-js": "^3.25.1",
     "css-loader": "^6.3.0",
@@ -35,7 +35,7 @@
     "less-loader": "^10.0.1",
     "style-loader": "^3.3.0",
     "typescript": "^4.4.3",
-    "webpack": "^5.54.0",
+    "webpack": "^5.78.0",
     "webpack-cli": "^4.8.0",
     "webpack-dev-server": "^4.7.3"
   },

package/src/components/card.tsx

@@ -47,6 +47,6 @@ const H: FC<ComponentProps<Store>> & { getName: Invoker } = (props) => {
   )
 }
 
-H.getName = (e) => message.info(e.value)
+H.getName = (e) => message.info(e)
 
 export default H

package/src/components/next.tsx

@@ -17,7 +17,7 @@ const {
 createStore({ value: 0 })
 
 class X extends Component<S & ComponentProps<GlobalStore>> {
-  static setValue: Invoker = async ({ value }) => {
+  static setValue: Invoker = async (value) => {
     const store = getStore()
     emit({ value: value + store.value }, true)
   }

package/src/components/top.tsx

@@ -1,10 +1,11 @@
 import React, { FC, useState, useEffect } from 'react'
-import { ComponentProps } from '@variousjs/various'
+import { ComponentProps, getConfig } 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 H: FC<ComponentProps<Store>> = (props) => {
+  const $config = getConfig() as Config
   const { pathname } = useLocation()
   const history = useHistory()
   const [path, setPath] = useState('')
@@ -27,7 +28,7 @@ const H: FC<ComponentProps<Store, Config>> = (props) => {
       buttonStyle="solid"
     >
       {
-        props.$config.links.map(({ path, name }) => (
+        $config.links.map(({ path, name }) => (
           <Radio.Button key={path} value={path}>
             {name}
           </Radio.Button>

package/src/entry/actions.ts

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

package/src/entry/container.tsx

@@ -1,13 +1,24 @@
-import React, { Component, ComponentType } from 'react'
-import { ContainerProps } from '@variousjs/various'
+import React, { Component, ComponentType, memo } from 'react'
+import { createComponent, getConfig } 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<Config>> {
+class Container extends Component {
+  config = getConfig() as Config
+
+  top = memo(createComponent('top'))
+
+  components = this.config.pages.reduce((prev, current) => {
+    current.components.forEach((item) => {
+      prev[item] = memo(createComponent(item))
+    })
+    return prev
+  }, {} as Record<string, ReturnType<typeof createComponent>>)
+
   render() {
-    const { $component, $config } = this.props
-    const Top = $component('top')
+    const Top = this.top
+    const $config = this.config
 
     return (
       <div className={csses.container}>
@@ -18,7 +29,7 @@ class Container extends Component<ContainerProps<Config>> {
           {
             $config.pages.map(({ path, components }) => {
               const cs = () => components.map((name) => {
-                const C = $component(name)
+                const C = this.components[name]
                 return (
                   <div
                     key={name}