support webui, service, filesCheck, project analyse, create entry

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pri-plugin-dob",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "types": "src/index.ts",
   "main": "built/index.js",
   "scripts": {
@@ -11,5 +11,8 @@
   },
   "dependencies": {
     "pri": "*"
+  },
+  "pri": {
+    "web-entry": ["./built/web-store/index.js", "./built/web-menu/index.js"]
   }
-}
+}

src/index.tsx

@@ -4,14 +4,16 @@ import * as normalizePath from "normalize-path"
 import * as path from "path"
 import * as prettier from "prettier"
 import { helperPath, pri, storesPath, tempJsEntryPath } from "pri"
-import { md5 } from "./utils/md5"
+import { addStore } from "./methods"
 
 const LAYOUT_TEMP = "LayoutTempComponent"
 const LAYOUT = "LayoutComponent"
 
 const MARKDOWN_LAYOUT_TEMP = "MarkdownLayoutTempComponent"
 const MARKDOWN_LAYOUT = "MarkdownLayoutComponent"
 
+const whiteList = ["src/utils/helper.tsx"]
+
 const safeName = (str: string) => _.upperFirst(_.camelCase(str))
 
 interface IResult {
@@ -23,9 +25,19 @@ interface IResult {
   }
 }
 
-export default (instance: typeof pri) => {
+export default async (instance: typeof pri) => {
   const projectRootPath = instance.project.getProjectRootPath()
 
+  instance.project.whiteFileRules.add(file => {
+    return whiteList.some(whiteName => path.format(file) === path.join(projectRootPath, whiteName))
+  })
+
+  // src/stores/**
+  instance.project.whiteFileRules.add(file => {
+    const relativePath = path.relative(projectRootPath, file.dir)
+    return relativePath.startsWith("src/stores")
+  })
+
   instance.project.onAnalyseProject(files => {
     return {
       projectAnalyseDob: {
@@ -40,7 +52,10 @@ export default (instance: typeof pri) => {
             return true
           })
           .map(file => {
-            return { file, name: safeName(file.name) }
+            return {
+              file,
+              name: safeName(file.name)
+            }
           })
       }
     } as IResult
@@ -142,6 +157,16 @@ export default (instance: typeof pri) => {
       })
     )
   })
+
+  // Register service
+  instance.devService.on("addStore", async (data, resolve, reject) => {
+    try {
+      await addStore(projectRootPath, data)
+      resolve()
+    } catch (error) {
+      reject(error)
+    }
+  })
 }
 
 function getHelperContent(str: string) {

src/methods.ts

@@ -0,0 +1,54 @@
+import * as fs from "fs-extra"
+import * as _ from "lodash"
+import * as path from "path"
+import * as prettier from "prettier"
+import { storesPath } from "pri"
+
+export async function addStore(
+  projectRootPath: string,
+  options: {
+    name: string
+    withDemo: boolean
+  }
+) {
+  const camelName = _.camelCase(options.name)
+  const camelUpperFirstName = _.upperFirst(camelName)
+  const kebabName = _.kebabCase(options.name)
+  const fileFullPath = path.join(projectRootPath, storesPath.dir, kebabName) + ".tsx"
+
+  if (fs.existsSync(fileFullPath)) {
+    throw Error(`${kebabName} already exist!`)
+  }
+
+  fs.outputFileSync(
+    fileFullPath,
+    prettier.format(
+      `
+    import { observable, inject, Action } from "dob"
+
+    @observable
+    export class ${camelUpperFirstName}Store {
+      ${options.withDemo ? `public testValue = 1` : ""}
+    }
+
+    export class ${camelUpperFirstName}Action {
+      @inject(${camelUpperFirstName}Store) public ${camelName}Store: ${camelUpperFirstName}Store
+
+      ${
+        options.withDemo
+          ? `
+        @Action public test() {
+          this.${camelName}Store.testValue++
+        }
+      `
+          : ""
+      }
+    }
+  `,
+      {
+        semi: false,
+        parser: "typescript"
+      }
+    )
+  )
+}

src/utils/declare/npm.d.ts

@@ -1,6 +1,7 @@
 declare module "@babel/preset-env"
 declare module "@babel/preset-react"
 declare module "@babel/preset-stage-2"
+declare module "@babel/plugin-transform-runtime"
 declare module "opn"
 declare module "walk"
 declare module "colors"

src/web-menu/index.tsx

@@ -0,0 +1,23 @@
+import { Icon } from "antd"
+import { Connect } from "dob-react"
+import * as React from "react"
+import { NewStoreComponent } from "./new-store/new-store.component"
+import * as S from "./style"
+import { Props, State } from "./type"
+
+const TreeIcon = (props: any) => <Icon style={{ marginRight: 5 }} {...props} />
+
+@Connect
+class View extends React.Component<Props, State> {
+  public static defaultProps = new Props()
+  public state = new State()
+
+  public render() {
+    return <NewStoreComponent />
+  }
+}
+
+export default {
+  position: "menu",
+  view: View
+}

src/web-menu/new-store/form.tsx

@@ -0,0 +1,84 @@
+import { Button, Form, Input, Switch } from "antd"
+import { Connect } from "dob-react"
+import * as React from "react"
+import { Props, State } from "./new-store.type"
+import * as S from "./style"
+
+const FormItem = Form.Item
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 8 }
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 16 }
+  }
+}
+
+const tailFormItemLayout = {
+  wrapperCol: {
+    xs: {
+      span: 24,
+      offset: 0
+    },
+    sm: {
+      span: 16,
+      offset: 8
+    }
+  }
+}
+
+function hasErrors(fieldsError: any) {
+  return Object.keys(fieldsError).some((field: string) => fieldsError[field])
+}
+
+@Connect
+class FormComponent extends React.PureComponent<Props, State> {
+  public static defaultProps = new Props()
+  public state = new State()
+
+  public render() {
+    return (
+      <Form onSubmit={this.handleSubmit}>
+        <FormItem {...formItemLayout} label="Name">
+          {this.props.form.getFieldDecorator("name", {
+            initialValue: "application",
+            rules: [
+              {
+                type: "string",
+                message: "Name must be string!"
+              },
+              {
+                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" htmlType="submit" disabled={hasErrors(this.props.form.getFieldsError())}>
+            Ok
+          </Button>
+        </FormItem>
+      </Form>
+    )
+  }
+
+  private handleSubmit = async (e: any) => {
+    e.preventDefault()
+    await this.props.ApplicationAction.addStore(this.props.form.getFieldsValue())
+    this.props.onSuccess()
+  }
+}
+
+export default Form.create()(FormComponent as any) as any

src/web-menu/new-store/new-store.component.tsx

@@ -0,0 +1,50 @@
+import { Modal } from "antd"
+import { Connect } from "dob-react"
+import * as React from "react"
+import { Props, State } from "./new-store.type"
+import * as S from "./style"
+
+import FormComponent from "./form"
+
+@Connect
+export class NewStoreComponent extends React.PureComponent<Props, State> {
+  public static defaultProps = new Props()
+  public state = new State()
+
+  public render() {
+    return (
+      <S.Container>
+        <S.Button onClick={this.showModal}>
+          <S.MenuIcon type="plus" />
+          New Store
+        </S.Button>
+
+        <Modal
+          title="New Store"
+          visible={this.state.visible}
+          footer={null}
+          onOk={this.handleOk}
+          onCancel={this.handleCancel}
+        >
+          <FormComponent onSuccess={this.handleCancel} />
+        </Modal>
+      </S.Container>
+    )
+  }
+
+  private showModal = () => {
+    this.setState({
+      visible: true
+    })
+  }
+  private handleOk = () => {
+    this.setState({
+      visible: false
+    })
+  }
+  private handleCancel = () => {
+    this.setState({
+      visible: false
+    })
+  }
+}

src/web-menu/new-store/new-store.type.ts

@@ -0,0 +1,11 @@
+export class Props {
+  public form?: any
+  public onSuccess?: () => void = () => {
+    //
+  }
+  [x: string]: any
+}
+
+export class State {
+  public visible = false
+}

src/web-menu/new-store/style.tsx

@@ -0,0 +1,24 @@
+import { Icon } from "antd"
+import * as React from "react"
+import styled from "styled-components"
+
+export const MenuIcon = (props: any) => <Icon style={{ fontSize: 15, marginRight: 10 }} {...props} />
+
+export const Container = styled.div`
+  display: flex;
+`
+
+export const Button = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: #666;
+  border-right: 1px solid #eee;
+  padding: 0 10px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  &:hover {
+    background-color: whitesmoke;
+  }
+`

src/web-menu/style.ts

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

src/web-menu/type.ts

@@ -0,0 +1,5 @@
+export class Props {
+  [x: string]: any
+}
+
+export class State {}