tsdx monorepo structure / example parcel build

fix astok store array proxy not set error
kayw · Jan 27, 2021 · 2451126 · 2451126
1 parent 774f2b3
commit 2451126
Show file tree

Hide file tree

Showing 15 changed files with 106 additions and 103 deletions.
diff --git a/packages/astore/.eslintrc.js → .eslintrc.js b/packages/astore/.eslintrc.js → .eslintrc.js
diff --git a/examples/todomvc/craco.config.js b/examples/todomvc/craco.config.js
diff --git a/examples/todomvc/package.json b/examples/todomvc/package.json
@@ -3,22 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@craco/craco": "^6.0.0",
-    "@types/react": "^17.0.0",
     "classnames": "^2.2.6",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "react-scripts": "^4.0.1",
-    "todomvc-app-css": "^2.3.0",
-    "typescript": "3.7.4"
+    "parcel": "^2.0.0-beta.1",
+    "todomvc-app-css": "^2.3.0"
   },
   "scripts": {
-    "start": "craco start",
-    "build": "craco build",
+    "start": "parcel public/index.html",
+    "build": "parcel build public/index.html",
     "test": "craco test"
   },
-  "eslintConfig": {
-    "extends": "react-app"
+  "alias": {
+    "@astok/store": "../../packages/astore",
+    "react": "../../node_modules/react",
+    "react-dom": "../../node_modules/react-dom/profiling"
   },
   "browserslist": {
     "production": [

diff --git a/examples/todomvc/public/index.html b/examples/todomvc/public/index.html
@@ -2,14 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="shortcut icon" href="./favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="./manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -34,5 +34,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script src="../src/index.tsx"></script>
   </body>
 </html>
diff --git a/examples/todomvc/src/components/MainSection.tsx b/examples/todomvc/src/components/MainSection.tsx
@@ -4,10 +4,15 @@ import TodoList from './TodoList'
 import useTodos from '../hooks/todos.hooks'
 
 const MainSection = () => {
-  const { todosCount: todosCountFn, completedCount: ccFn, completeAllTodos, clearCompleted } = useTodos()
+  const {
+    todosCount: todosCountFn,
+    completedCount: ccFn,
+    completeAllTodos,
+    clearCompleted,
+  } = useTodos()
 
-const todosCount = todosCountFn()
-const completedCount = ccFn()
+  const todosCount = todosCountFn()
+  const completedCount = ccFn()
   return (
     <section className="main">
       <React.Fragment>

diff --git a/examples/todomvc/src/components/TodoList.tsx b/examples/todomvc/src/components/TodoList.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import TodoItem from './TodoItem'
 import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants/TodoFilters'
-import useTodos, {Todo } from '../hooks/todos.hooks'
+import useTodos, { Todo } from '../hooks/todos.hooks'
 import useVisibilityFilter from '../hooks/visibilityFilter.hooks'
 
 function getVisibleTodos(todos: Todo[], visibilityFilter: string) {
@@ -26,7 +26,6 @@ const TodoList: React.SFC = () => {
   const { todos } = useTodos()
   const { visibilityFilter } = useVisibilityFilter()
   const visibleTodos = getVisibleTodos(todos, visibilityFilter)
-
   return (
     <ul className="todo-list">
       <React.Fragment>

diff --git a/examples/todomvc/src/hooks/todos.hooks.ts b/examples/todomvc/src/hooks/todos.hooks.ts
@@ -1,4 +1,4 @@
-import { useStore as createStore } from '../../../../packages/astore/src'
+import { useStore as createStore } from '@astok/store/src'
 
 export interface Todo {
   text: string
@@ -7,7 +7,8 @@ export interface Todo {
 }
 
 const todoState = {
-  todos: [{
+  todos: [
+    {
       text: 'Use Stook',
       completed: false,
       id: 0,
@@ -22,37 +23,37 @@ const todoState = {
   },
 
   addTodo(text: string) {
-      this.todos.push({
-        id: this.todos.reduce((maxId, todo) => Math.max(todo.id, maxId), -1) + 1,
-        completed: false,
-        text,
-      })
+    this.todos.push({
+      id: this.todos.reduce((maxId, todo) => Math.max(todo.id, maxId), -1) + 1,
+      completed: false,
+      text,
+    })
   },
 
   deleteTodo(id: number) {
     this.todos = this.todos.filter(todo => todo.id !== id)
   },
 
-  editTodo ({ id, text }: Todo) {
-    this.todos= this.todos.map(todo => (todo.id === id ? { ...todo, text } : todo))
+  editTodo({ id, text }: Todo) {
+    this.todos = this.todos.map(todo => (todo.id === id ? { ...todo, text } : todo))
   },
 
-  completeTodo(id: number)  {
+  completeTodo(id: number) {
     this.todos = this.todos.map(todo =>
       todo.id === id ? { ...todo, completed: !todo.completed } : todo,
     )
   },
 
-  completeAllTodos ()  {
+  completeAllTodos() {
     const areAllMarked = this.todos.every(todo => todo.completed)
     this.todos = this.todos.map(todo => ({
       ...todo,
       completed: !areAllMarked,
     }))
   },
 
-  clearCompleted ()  {
-    this.todos= this.todos.filter(todo => todo.completed === false)
+  clearCompleted() {
+    this.todos = this.todos.filter(todo => todo.completed === false)
   },
 }
 

diff --git a/examples/todomvc/src/hooks/visibilityFilter.hooks.ts b/examples/todomvc/src/hooks/visibilityFilter.hooks.ts
@@ -1,4 +1,4 @@
-import { useStore as createStore } from '../../../../packages/astore/src'
+import { useStore as createStore } from '@astok/store'
 
 export default createStore( {
   visibilityFilter: 'show_all',

diff --git a/package.json b/package.json
@@ -1,13 +1,39 @@
 {
   "name": "astok-project",
+  "author": "kayw",
+  "license": "MIT",
   "prettier": {
     "printWidth": 100,
     "tabWidth": 2,
     "semi": false,
     "singleQuote": true,
     "trailingComma": "all"
   },
+  "scripts": {
+    "lerna": "lerna",
+    "start": "lerna run start --stream --parallel",
+    "test": "lerna run test --",
+    "lint": "lerna run lint -- --fix",
+    "build": "lerna run build",
+    "prepublish": "lerna run prepublish",
+    "example": "npm run build && cd examples/todomvc && npm start",
+    "cypress": "cypress run",
+    "cypress:open": "cypress open",
+    "changeset": "changeset",
+    "@changesets/changelog-github": "^0.2.7",
+    "@changesets/cli": "^2.10.3",
+    "release": "changeset publish",
+    "version:canary": "changeset version --snapshot canary",
+    "release:canary": "changeset publish --tag canary"
+  },
   "devDependencies": {
-    "lerna": "^3.20.2"
+    "@testing-library/react": "^10.4.3",
+    "@testing-library/react-hooks": "^3.3.0",
+    "@types/react": "^17.0.0",
+    "lerna": "^3.22.1",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "react-test-renderer": "^17.0.1",
+    "tsdx": "^0.14.1"
   }
 }
diff --git a/packages/astore/package.json b/packages/astore/package.json
@@ -1,8 +1,10 @@
 {
   "name": "astok-store",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "astok store hook management",
-  "main": "index.js",
+  "main": "dist/index.js",
+  "module": "dist/astok-store.esm.js",
+  "files": ["dist"],
   "scripts": {
     "start": "tsdx watch",
     "build": "tsdx build",
@@ -11,20 +13,7 @@
     "test:cov": "tsdx test --coverage",
     "lint": "tsdx lint"
   },
-  "author": "kayw",
-  "license": "MIT",
-  "devDependencies": {
-    "@testing-library/react": "^10.4.3",
-    "@testing-library/react-hooks": "^3.3.0",
-    "@types/react": "^17.0.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "tsdx": "^0.14.1"
-  },
   "peerDependencies": {
     "react": ">=16.9.0"
-  },
-  "dependencies": {
-    "react-test-renderer": "^17.0.1"
   }
 }
diff --git a/packages/astore/src/astore-hook.spec.tsx b/packages/astore/src/astore-hook.spec.tsx
@@ -46,10 +46,13 @@ describe('useStore', () => {
         this.nullObj = { name: 'not null' }
         this.updates.push(name)
       },
+      pushArray() {
+        this.updates.push('name')
+      },
     })
     const { result } = renderHook(() => useUser())
 
-    const { name, setName } = result.current
+    const { name, setName, pushArray } = result.current
     expect(name).toBe('bar')
 
     act(() => {
@@ -61,6 +64,11 @@ describe('useStore', () => {
     expect(result.current.nullObj?.name).toBe('not null')
     expect(result.current.updates.length).toBe(1)
     expect(result.current.updates[0]).toBe('foo')
+    act(() => {
+      pushArray()
+    })
+    expect(result.current.updates.length).toBe(2)
+    expect(result.current.updates[1]).toBe('name')
   })
 
   it('use store multiple effects no stale state', () => {

diff --git a/packages/astore/src/store-hook.ts b/packages/astore/src/store-hook.ts
@@ -19,9 +19,7 @@ const addProxy = (o: any, handler: ProxyHandler<any>) => {
     })
   } else if (isObject(o)) {
     Object.keys(o).forEach(key => {
-      if (isObject(o[key])) {
-        o[key] = addProxy(o[key], handler)
-      }
+      o[key] = addProxy(o[key], handler)
     })
   } else {
     return o

diff --git a/packages/astore/tsconfig.json b/packages/astore/tsconfig.json
diff --git a/tsconfig.build.json b/tsconfig.build.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["dom", "esnext"],
+    "importHelpers": true,
+    "declaration": true,
+    "sourceMap": true,   
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "jsx": "react",
+    "esModuleInterop": true
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.build.json",
+  "include": ["packages", "types", "scripts", "example"],
+  "compilerOptions": {
+    "allowJs": false,
+    "baseUrl": ".",
+    "typeRoots": ["./node_modules/@types", "./types"],
+    "paths": {
+      "@astok/store": ["packages/astore/src"],
+      "$test/*": ["test/*"]
+    }
+  }
+}