feat: add new store

Author: ascoders

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pri",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "types": "src/index.ts",
   "main": "built/index.js",
   "scripts": {

src/commands/dev/dashboard/client/pages/main/main.component.tsx

@@ -9,6 +9,7 @@ import { RoutesComponent } from './routes/routes.component'
 import { LayoutComponent } from './layout/layout.component'
 import { NotFoundComponent } from './not-found/not-found.component'
 import { ConfigComponent } from './config/config.component'
+import { StoresComponent } from './stores/stores.component'
 
 @Connect
 export class MainComponent extends PureComponent<Props, State> {
@@ -27,6 +28,8 @@ export class MainComponent extends PureComponent<Props, State> {
         return <NotFoundComponent />
       case 'config':
         return <ConfigComponent />
+      case 'stores':
+        return <StoresComponent />
       default:
         return null
     }

src/commands/dev/dashboard/client/pages/main/store/store.component.tsx

@@ -0,0 +1,19 @@
+import { Connect } from "dob-react"
+import * as React from "react"
+import { Props, State } from './store.type'
+import * as S from './store.style'
+import { PureComponent } from '../../../utils/react-helper'
+
+@Connect
+export class StoreComponent extends PureComponent<Props, State> {
+  static defaultProps = new Props()
+  state = new State()
+
+  render() {
+    return (
+      <S.Container>
+        Stores TODO
+      </S.Container>
+    )
+  }
+}

src/commands/dev/dashboard/client/pages/main/store/store.style.ts

@@ -0,0 +1,5 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+
+`

src/commands/dev/dashboard/client/pages/main/store/store.type.ts

@@ -0,0 +1,7 @@
+export class Props {
+
+}
+
+export class State {
+
+}

src/commands/dev/dashboard/client/pages/main/stores/stores.component.tsx

@@ -0,0 +1,19 @@
+import { Connect } from "dob-react"
+import * as React from "react"
+import { Props, State } from './stores.type'
+import * as S from './stores.style'
+import { PureComponent } from '../../../utils/react-helper'
+
+@Connect
+export class StoresComponent extends PureComponent<Props, State> {
+  static defaultProps = new Props()
+  state = new State()
+
+  render() {
+    return (
+      <S.Container>
+        Store TODO
+      </S.Container>
+    )
+  }
+}

src/commands/dev/dashboard/client/pages/main/stores/stores.style.ts

@@ -0,0 +1,5 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+
+`

src/commands/dev/dashboard/client/pages/main/stores/stores.type.ts

@@ -0,0 +1,7 @@
+export class Props {
+
+}
+
+export class State {
+
+}

src/commands/dev/dashboard/client/pages/menu/new-store/form.tsx

@@ -3,7 +3,7 @@ import * as React from "react"
 import { Props, State } from './new-store.type'
 import * as S from '../menu.style'
 import { PureComponent } from '../../../utils/react-helper'
-import { Form, Button, Input } from 'antd'
+import { Form, Button, Input, Switch } from 'antd'
 
 const FormItem = Form.Item
 
@@ -45,20 +45,32 @@ class FormComponent extends PureComponent<Props, State> {
       <Form onSubmit={this.handleSubmit}>
         <FormItem
           {...formItemLayout}
-          label="Path"
+          label="Name"
         >
-          {this.props.form.getFieldDecorator('path', {
-            initialValue: 'about',
+          {this.props.form.getFieldDecorator('name', {
+            initialValue: 'application',
             rules: [{
-              type: 'string', message: 'Path must be string!',
+              type: 'string', message: 'Name must be string!',
             }, {
-              required: true, message: 'Path is required!',
+              required: true, message: 'Name is required!',
             }],
           })(
             <Input />
           )}
         </FormItem>
 
+        <FormItem
+          {...formItemLayout}
+          label="With demo"
+        >
+          {this.props.form.getFieldDecorator('withDemo', {
+            initialValue: true,
+            valuePropName: "checked"
+          })(
+            <Switch />
+          )}
+        </FormItem>
+
         <FormItem {...tailFormItemLayout}>
           <Button
             type="primary"
@@ -72,7 +84,7 @@ class FormComponent extends PureComponent<Props, State> {
 
   private handleSubmit = async (e: any) => {
     e.preventDefault();
-    await this.props.ApplicationAction.addPage(this.props.form.getFieldsValue())
+    await this.props.ApplicationAction.addStore(this.props.form.getFieldsValue())
     this.props.onSuccess()
   }
 }

src/commands/dev/dashboard/client/pages/struct/struct.component.tsx

@@ -106,7 +106,14 @@ export class StructComponent extends PureComponent<Props, State> {
         key: 'stores',
         title: `Stores (${this.props.ApplciationStore.status.info.stores.length})`,
         icon: <TreeIcon type="database" />,
-        disabled: this.props.ApplciationStore.status.info.stores.length === 0
+        disabled: this.props.ApplciationStore.status.info.stores.length === 0,
+        children: this.props.ApplciationStore.status.info.stores.map(store => {
+          return {
+            key: 'store-' + store.filePath,
+            title: store.name,
+            icon: <TreeIcon type="database" />
+          }
+        })
       })
     }
 

src/commands/dev/dashboard/client/stores/application.ts

@@ -54,6 +54,13 @@ export class ApplicationAction {
     await this.fetch<typeof options>('addPage', options)
   }
 
+  @Action public async addStore(options: {
+    name: string
+    withDemo: boolean
+  }) {
+    await this.fetch<typeof options>('addStore', options)
+  }
+
   @Action public async createConfig() {
     await this.fetch('createConfig')
   }

src/commands/dev/dashboard/server/index.ts

@@ -83,6 +83,15 @@ io.on('connection', async (socket) => {
     }
   })
 
+  socketListen('addStore', async (data, resolve, reject) => {
+    try {
+      await projectManage.addStore(projectRootPath, data)
+      resolve()
+    } catch (error) {
+      reject(error)
+    }
+  })
+
   socketListen('createLayout', async (data, resolve, reject) => {
     try {
       await projectManage.createLayout(projectRootPath)

src/utils/analyse-project-interface.ts

@@ -14,6 +14,7 @@ export class IProjectInfo {
   public hasLayoutFile = false
   public has404File = false
   public stores: Array<{
-    path: string
+    filePath: string
+    name: string
   }> = []
 }

src/utils/analyse-project.ts

@@ -151,9 +151,8 @@ function judgeStoreFile(projectRootPath: string, dir: string, fileStats: WalkSta
     return null
   }
 
-  const prefix = '/' + path.relative(STORE_ROOT, relativePath)
-
   return {
-    path: prefix
+    filePath: path.join(dir, fileStats.name),
+    name: fileInfo.name
   }
 }

src/utils/create-entry.ts

@@ -4,6 +4,7 @@ import * as prettier from "prettier"
 import { IProjectInfo } from "./analyse-project-interface"
 import { md5 } from "./md5"
 import { IConfig } from "./project-config-interface"
+import * as _ from "lodash"
 
 interface IEntryInfo {
   pageImporter: string
@@ -13,17 +14,21 @@ interface IEntryInfo {
   notFoundRoute: string
   setEnv: string
   setCustomEnv: string
+  storesImporter: string
+  storesHelper: string
 }
 
 // Entry file content
-const entryFileContent = (entryInfo: IEntryInfo, env: string) => `
+const getEntryContent = (entryInfo: IEntryInfo, info: IProjectInfo, env: string) => `
   import { setEnvLocal, setEnvProd, setCustomEnv } from "pri"
   import * as React from "react"
   import * as ReactDOM from "react-dom"
   import Loadable from "react-loadable"
   import { Redirect, Route, Switch, Router } from "react-router-dom"
   import createBrowserHistory from 'history/createBrowserHistory'
 
+  ${entryInfo.storesImporter}
+
   const customHistory = createBrowserHistory()
 
   ${entryInfo.setEnv}
@@ -50,12 +55,14 @@ const entryFileContent = (entryInfo: IEntryInfo, env: string) => `
 
     public render() {
       return (
+        ${info.stores.length > 0 ? "<Provider {...stores}>" : ""}
         <Router history={customHistory}>
           <Switch>
             ${entryInfo.pageRoutes}
             ${entryInfo.notFoundRoute}
           </Switch>
         </Router>
+        ${info.stores.length > 0 ? "</Provider>" : ""}
       )
     }
   }
@@ -66,6 +73,15 @@ const entryFileContent = (entryInfo: IEntryInfo, env: string) => `
   )
 `
 
+const getHelperContent = (entryInfo: IEntryInfo, info: IProjectInfo, env: string) => `
+  /**
+   * Do not edit this file.
+   * This file is automatic generated to get type help.
+   */
+  
+   ${entryInfo.storesHelper}
+`
+
 export async function createEntry(info: IProjectInfo, projectRootPath: string, env: string, config: IConfig) {
   const entryInfo: IEntryInfo = {
     pageImporter: "",
@@ -74,7 +90,9 @@ export async function createEntry(info: IProjectInfo, projectRootPath: string, e
     notFoundImporter: "",
     notFoundRoute: "",
     setEnv: "",
-    setCustomEnv: ""
+    setCustomEnv: "",
+    storesImporter: "",
+    storesHelper: ""
   }
 
   // Set env
@@ -103,23 +121,61 @@ export async function createEntry(info: IProjectInfo, projectRootPath: string, e
 
     if (info.routes.length < 2) {
       // If only one page, don't need code splitting.
-      entryInfo.pageImporter += `
-        import ${componentName} from "${path.join(pathInfo.dir, pathInfo.name)}"
-      `
+      if (info.stores.length === 0) {
+        entryInfo.pageImporter += `
+          import ${componentName} from "${path.join(pathInfo.dir, pathInfo.name)}"
+        `
+      } else {
+        entryInfo.pageImporter += `
+          import ${componentName}Temp from "${path.join(pathInfo.dir, pathInfo.name)}"
+          ${componentName} = Connect()(${componentName}Temp)
+        `
+      }
     } else {
+      const importCode = info.stores.length === 0 ?
+        `import("${path.join(pathInfo.dir, pathInfo.name)}")` :
+        `import("${path.join(pathInfo.dir, pathInfo.name)}").then(res => Connect()(res.default))  `
+
       entryInfo.pageImporter += `
         const ${componentName} = Loadable({
-          loader: () => import("${path.join(pathInfo.dir, pathInfo.name)}"),
+          loader: () => ${importCode},
           loading: () => null
         })\n
       `
     }
 
     const routeComponent = info.layout ? "LayoutRoute" : "Route"
 
-    entryInfo.pageRoutes += `<${routeComponent} exact path="${route.path}" component={${componentName}} />\n`
+    entryInfo.pageRoutes += `
+      <${routeComponent} exact path="${route.path}" component={${componentName}} />\n
+    `
   })
 
+  // Set stores
+  const safeName = (str: string) => _.upperFirst(_.camelCase(str))
+  if (info.stores.length > 0) {
+    entryInfo.storesImporter += `import { useStrict } from "dob"\n`
+    entryInfo.storesImporter += `import { Connect, Provider } from "dob-react"\n`
+    entryInfo.storesImporter += `useStrict()\n`
+    entryInfo.storesImporter += `import { stores } from "../src/helper"\n`
+    entryInfo.storesHelper += `import { combineStores } from "dob"\n`
+    entryInfo.storesHelper += info.stores
+      .map(eachStore => {
+        const filePath = path.parse(eachStore.filePath)
+        const importAbsolutePath = path.join(filePath.dir, filePath.name)
+        const importRelativePath = path.relative(path.join(projectRootPath, "src"), importAbsolutePath)
+        return `import { ${safeName(eachStore.name)}Action, ${safeName(eachStore.name)}Store } from "./${importRelativePath}"`
+      })
+      .join("\n")
+    entryInfo.storesHelper += `
+      \nconst stores = combineStores({${info.stores.map(eachStore => {
+        return `${safeName(eachStore.name)}Action, ${safeName(eachStore.name)}Store`
+      }).join(',')}})
+      
+      export { stores }
+    `
+  }
+
   // Set layout
   if (info.layout) {
     const layoutPath = path.parse(info.layout.filePath)
@@ -149,10 +205,21 @@ export async function createEntry(info: IProjectInfo, projectRootPath: string, e
 
   // Create entry tsx file
   const entryPath = path.join(projectRootPath, ".temp/entry.tsx")
-  fs.outputFileSync(entryPath, prettier.format(entryFileContent(entryInfo, env), {
+  fs.outputFileSync(entryPath, prettier.format(getEntryContent(entryInfo, info, env), {
     semi: false,
     parser: "typescript"
   }))
 
+  // If has stores, create helper.ts
+  const helperPath = path.join(projectRootPath, "src/helper.ts")
+  if (info.stores.length > 0) {
+    fs.outputFileSync(helperPath, prettier.format(getHelperContent(entryInfo, info, env), {
+      semi: false,
+      parser: "typescript"
+    }))
+  } else {
+    fs.removeSync(helperPath)
+  }
+
   return entryPath
 }