ice-lab · luhc228 · Aug 10, 2022 · Aug 10, 2022 · Aug 10, 2022 · Aug 11, 2022
diff --git a/examples/with-hooks-store/ice.config.mts b/examples/with-hooks-store/ice.config.mts
@@ -0,0 +1,8 @@
+import { defineConfig } from '@ice/app';
+import store from '@ice/plugin-hooks-store';
+
+export default defineConfig({
+  plugins: [
+    store(),
+  ],
+});
diff --git a/examples/with-hooks-store/package.json b/examples/with-hooks-store/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "with-hook-store",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "start": "ice start",
+    "build": "ice build"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@ice/app": "workspace:*",
+    "@ice/runtime": "workspace:*"
+  },
+  "devDependencies": {
+    "@ice/plugin-hooks-store": "workspace:*",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "browserslist": "^4.19.3",
+    "regenerator-runtime": "^0.13.9"
+  }
+}
diff --git a/examples/with-hooks-store/public/favicon.ico b/examples/with-hooks-store/public/favicon.ico
diff --git a/examples/with-hooks-store/src/app.tsx b/examples/with-hooks-store/src/app.tsx
@@ -0,0 +1,3 @@
+import { defineAppConfig } from 'ice';
+
+export default defineAppConfig({});
diff --git a/examples/with-hooks-store/src/document.tsx b/examples/with-hooks-store/src/document.tsx
@@ -0,0 +1,23 @@
+import { Meta, Title, Links, Main, Scripts } from 'ice';
+
+function Document() {
+  return (
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <link rel="icon" href="/favicon.ico" />
+        <meta name="description" content="with-store" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Title />
+        <Links />
+      </head>
+      <body>
+        <Main />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default Document;
diff --git a/examples/with-hooks-store/src/models/useTodo.ts b/examples/with-hooks-store/src/models/useTodo.ts
@@ -0,0 +1,12 @@
+import { useState } from 'react';
+
+function useTodo() {
+  const [todos, setTodos] = useState([{ name: 'ICE', id: 'ICE' }]);
+
+  return {
+    todos,
+    setTodos,
+  };
+}
+
+export default useTodo;
diff --git a/examples/with-hooks-store/src/pages/about/index.tsx b/examples/with-hooks-store/src/pages/about/index.tsx
@@ -0,0 +1,16 @@
+import { Link } from 'ice';
+import store from './store';
+
+function About() {
+  const { name, age } = store.useHook('useUser');
+  return (
+    <>
+      <div>name: {name}</div>
+      <div>age: {age}</div>
+
+      <Link to="/">Home</Link>
+    </>
+  );
+}
+
+export default About;
diff --git a/examples/with-hooks-store/src/pages/about/layout.tsx b/examples/with-hooks-store/src/pages/about/layout.tsx
@@ -0,0 +1,9 @@
+import { Outlet } from 'ice';
+
+export default function layout() {
+  return (
+    <>
+      <Outlet />
+    </>
+  );
+}
diff --git a/examples/with-hooks-store/src/pages/about/models/useUser.ts b/examples/with-hooks-store/src/pages/about/models/useUser.ts
@@ -0,0 +1,6 @@
+export default function useUser() {
+  return {
+    name: 'ICE 3',
+    age: 5,
+  };
+}
diff --git a/examples/with-hooks-store/src/pages/about/store.ts b/examples/with-hooks-store/src/pages/about/store.ts
@@ -0,0 +1,4 @@
+import { createStore } from 'ice';
+import useUser from './models/useUser';
+
+export default createStore({ useUser });
diff --git a/examples/with-hooks-store/src/pages/index.tsx b/examples/with-hooks-store/src/pages/index.tsx
@@ -0,0 +1,28 @@
+import { Link } from 'ice';
+import pageStore from './store';
+import appStore from '@/store';
+
+function Home() {
+  const { todos } = appStore.useHook('useTodo');
+  const { count, increment, decrement } = pageStore.useHook('useCounter');
+
+  return (
+    <>
+      <div>
+        ToDo List
+        <ul id="todos">
+          {todos.map(todo => (<li key={todo.id}>{todo.name}</li>))}
+        </ul>
+      </div>
+      <div>
+        <button type="button" onClick={() => increment()}>+</button>
+        <span>{count}</span>
+        <button type="button" onClick={() => decrement()}>-</button>
+      </div>
+      <Link to="/about">About</Link>
+    </>
+  );
+}
+
+
+export default Home;
diff --git a/examples/with-hooks-store/src/pages/models/useCounter.ts b/examples/with-hooks-store/src/pages/models/useCounter.ts
@@ -0,0 +1,15 @@
+import { useState } from 'react';
+
+function useCounter() {
+  const [count, setCount] = useState(0);
+  const increment = () => setCount(count + 1);
+  const decrement = () => setCount(count - 1);
+
+  return {
+    count,
+    increment,
+    decrement,
+  };
+}
+
+export default useCounter;
diff --git a/examples/with-hooks-store/src/pages/store.ts b/examples/with-hooks-store/src/pages/store.ts
@@ -0,0 +1,4 @@
+import { createStore } from 'ice';
+import useCounter from './models/useCounter';
+
+export default createStore({ useCounter });
diff --git a/examples/with-hooks-store/src/store.ts b/examples/with-hooks-store/src/store.ts
@@ -0,0 +1,4 @@
+import { createStore } from 'ice';
+import useTodo from './models/useTodo';
+
+export default createStore({ useTodo });
diff --git a/examples/with-hooks-store/tsconfig.json b/examples/with-hooks-store/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "buildOnSave": false,
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "build",
+    "module": "esnext",
+    "target": "es6",
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "rootDir": "./",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": false,
+    "importHelpers": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "ice": [".ice"]
+    }
+  },
+  "include": ["src", ".ice", "ice.config.*"],
+  "exclude": ["node_modules", "build", "public"]
+}
diff --git a/packages/plugin-hooks-store/CHANGELOG.md b/packages/plugin-hooks-store/CHANGELOG.md
@@ -0,0 +1,5 @@
+# CHANGELOG
+
+## 1.0.0
+
+- feat: init plugin
diff --git a/packages/plugin-hooks-store/README.md b/packages/plugin-hooks-store/README.md
@@ -0,0 +1,16 @@
+# @ice/plugin-hooks-store
+
+A plugin of lightweight React Hooks state management used in framework `ICE`.
+
+## Usage
+
+```ts
+import { defineConfig } from '@ice/app';
+import store from '@ice/plugin-hooks-store';
+
+export default defineConfig({
+  plugins: [
+    store(),
+  ],
+});
+```
diff --git a/packages/plugin-hooks-store/package.json b/packages/plugin-hooks-store/package.json
@@ -0,0 +1,56 @@
+{
+  "name": "@ice/plugin-hooks-store",
+  "version": "1.0.0",
+  "description": "A plugin of lightweight React Hooks state management based on @ice/hooks-store.",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./esm/index.d.ts",
+      "import": "./esm/index.js",
+      "default": "./esm/index.js"
+    },
+    "./runtime": {
+      "types": "./esm/runtime.d.ts",
+      "import": "./esm/runtime.js",
+      "default": "./esm/runtime.js"
+    },
+    "./api": {
+      "types": "./esm/api.d.ts",
+      "import": "./esm/api.js",
+      "default": "./esm/api.js"
+    }
+  },
+  "main": "./esm/index.js",
+  "types": "./esm/index.d.ts",
+  "files": [
+    "esm",
+    "!esm/**/*.map"
+  ],
+  "dependencies": {
+    "@ice/hooks-store": "^1.0.0-alpha.0",
+    "fast-glob": "^3.2.11",
+    "micromatch": "^4.0.5"
+  },
+  "devDependencies": {
+    "@ice/types": "^1.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@types/micromatch": "^4.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "regenerator-runtime": "^0.13.9"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "repository": {
+    "type": "http",
+    "url": "https://github.com/ice-lab/ice-next/tree/master/packages/plugin-hook-store"
+  },
+  "scripts": {
+    "watch": "tsc -w",
+    "build": "tsc"
+  }
+}
diff --git a/packages/plugin-hooks-store/src/_store.ts b/packages/plugin-hooks-store/src/_store.ts
@@ -0,0 +1,10 @@
+/**
+ * This file which is imported by the runtime.tsx, is to avoid TS error.
+ */
+import { createStore } from '@ice/hooks-store';
+
+const models = {};
+
+const store: ReturnType<typeof createStore> = createStore(models);
+
+export default store;
diff --git a/packages/plugin-hooks-store/src/api.ts b/packages/plugin-hooks-store/src/api.ts
@@ -0,0 +1 @@
+export { createStore } from '@ice/hooks-store';
diff --git a/packages/plugin-hooks-store/src/constants.ts b/packages/plugin-hooks-store/src/constants.ts
@@ -0,0 +1,2 @@
+export const PAGE_STORE_MODULE = '__PAGE_STORE__';
+export const PAGE_STORE_PROVIDER = '__PAGE_STORE_PROVIDER__';