module-first setup (#5)

* module-first setup

* update README and CHANGELOG

* simplify example

* update CHANGELOG

.codesandbox/ci.json

@@ -1,5 +1,5 @@
 {
   "buildCommand": "compile",
   "sandboxes": ["new", "react-typescript-react-ts"],
-  "node": "14"
+  "node": "18"
 }

.eslintrc.cjs

@@ -0,0 +1,39 @@
+/* eslint-env node */
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+    'plugin:jsx-a11y/recommended',
+    'prettier',
+  ],
+  ignorePatterns: ['dist/'],
+  settings: {
+    'import/resolver': {
+      typescript: true,
+    },
+    react: { version: 'detect' },
+  },
+  rules: {
+    'import/no-unresolved': ['error', { ignore: ['use-zustand'] }],
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        args: 'all',
+        argsIgnorePattern: '^_',
+        caughtErrors: 'all',
+        caughtErrorsIgnorePattern: '^_',
+        destructuredArrayIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        ignoreRestSiblings: true,
+      },
+    ],
+  },
+};

.github/workflows/cd.yml

@@ -9,36 +9,19 @@ jobs:
   publish:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-
-      - name: Setup Node
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
         with:
-          node-version: '14.x'
-          registry-url: 'https://registry.npmjs.org'
-
-      - name: Get yarn cache
-        id: yarn-cache
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - name: Cache dependencies
-        uses: actions/cache@v1
+          version: 8.2.0
+      - uses: actions/setup-node@v3
         with:
-          path: ${{ steps.yarn-cache.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
-      - name: Install dependencies
-        run: yarn install
-
-      - name: Test
-        run: yarn test
-
-      - name: Compile
-        run: yarn run compile
-
-      - name: Publish
-        run: npm publish
+          node-version: 18
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'pnpm'
+          cache-dependency-path: '**/pnpm-lock.yaml'
+      - run: pnpm install --frozen-lockfile
+      - run: npm test
+      - run: npm run compile
+      - run: npm publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/ci.yml

@@ -8,27 +8,14 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-
-      - name: Setup Node
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
         with:
-          node-version: '14.x'
-
-      - name: Get yarn cache
-        id: yarn-cache
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - name: Cache dependencies
-        uses: actions/cache@v1
+          version: 8.2.0
+      - uses: actions/setup-node@v3
         with:
-          path: ${{ steps.yarn-cache.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
-      - name: Install dependencies
-        run: yarn install
-
-      - name: Test
-        run: yarn test
+          node-version: 18
+          cache: 'pnpm'
+          cache-dependency-path: '**/pnpm-lock.yaml'
+      - run: pnpm install --frozen-lockfile
+      - run: npm test

.prettierignore

@@ -0,0 +1,2 @@
+/pnpm-lock.yaml
+/dist

CHANGELOG.md

@@ -2,18 +2,31 @@
 
 ## [Unreleased]
 
+### Changed
+
+- fix a long-lived bug #6
+- Module-first setup #5
+
 ## [0.0.4] - 2023-01-30
+
 ### Changed
+
 - fix: reduce calling selector for updates #4
 
 ## [0.0.3] - 2023-01-30
+
 ### Changed
+
 - fix: a bug in #2 #3
 
 ## [0.0.2] - 2023-01-29
+
 ### Changed
+
 - fix: inline selectors #2
 
 ## [0.0.1] - 2022-10-16
+
 ### Added
+
 - Initial release

README.md

@@ -1,6 +1,6 @@
 # use-zustand
 
-[![CI](https://img.shields.io/github/actions/workflow/status/dai-shi/use-zustand/ci.yml?branch=main)](https://github.com/dai-shi/use-zustand/actions?query=workflow%3ACI)
+[![CI](https://img.shields.io/github/actions/workflow/status/zustandjs/use-zustand/ci.yml?branch=main)](https://github.com/zustandjs/use-zustand/actions?query=workflow%3ACI)
 [![npm](https://img.shields.io/npm/v/use-zustand)](https://www.npmjs.com/package/use-zustand)
 [![size](https://img.shields.io/bundlephobia/minzip/use-zustand)](https://bundlephobia.com/result?p=use-zustand)
 [![discord](https://img.shields.io/discord/627656437971288081)](https://discord.gg/MrQdmzd)
@@ -65,11 +65,11 @@ The [examples](examples) folder contains working examples.
 You can run one of them with
 
 ```bash
-PORT=8080 yarn run examples:01_typescript
+PORT=8080 yarn run examples:01_counter
 ```
 
 and open <http://localhost:8080> in your web browser.
 
 You can also try them in codesandbox.io:
-[01](https://codesandbox.io/s/github/dai-shi/use-zustand/tree/main/examples/01_typescript)
-[02](https://codesandbox.io/s/github/dai-shi/use-zustand/tree/main/examples/02_suspense)
+[01](https://codesandbox.io/s/github/zustandjs/use-zustand/tree/main/examples/01_counter)
+[02](https://codesandbox.io/s/github/zustandjs/use-zustand/tree/main/examples/02_suspense)

examples/01_typescript/package.json → examples/01_counter/package.json

@@ -1,12 +1,13 @@
 {
-  "name": "use-zustand-example",
-  "version": "0.1.0",
+  "name": "example",
+  "version": "0.0.0",
   "private": true,
+  "type": "commonjs",
   "dependencies": {
     "@types/react": "latest",
     "@types/react-dom": "latest",
-    "react": "experimental",
-    "react-dom": "experimental",
+    "react": "beta",
+    "react-dom": "beta",
     "react-scripts": "latest",
     "typescript": "latest",
     "use-zustand": "latest",
@@ -17,11 +18,5 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
-  },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
+  }
 }

examples/01_typescript/public/index.html → examples/01_counter/public/index.html

@@ -1,6 +1,6 @@
 <html>
   <head>
-    <title>use-zustand example</title>
+    <title>example</title>
   </head>
   <body>
     <div id="app"></div>

examples/01_typescript/src/App.tsx → examples/01_counter/src/app.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { createStore } from 'zustand/vanilla';
 import { useZustand } from 'use-zustand';
 

examples/01_typescript/src/index.tsx → examples/01_counter/src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 
-import App from './App';
+import App from './app';
 
 const ele = document.getElementById('app');
 if (ele) {

examples/02_suspense/package.json

@@ -1,12 +1,13 @@
 {
-  "name": "use-zustand-example",
-  "version": "0.1.0",
+  "name": "example",
+  "version": "0.0.0",
   "private": true,
+  "type": "commonjs",
   "dependencies": {
     "@types/react": "latest",
     "@types/react-dom": "latest",
-    "react": "experimental",
-    "react-dom": "experimental",
+    "react": "beta",
+    "react-dom": "beta",
     "react-scripts": "latest",
     "typescript": "latest",
     "use-zustand": "latest",
@@ -17,11 +18,5 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
-  },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
+  }
 }

examples/02_suspense/public/index.html

@@ -1,6 +1,6 @@
 <html>
   <head>
-    <title>use-zustand example</title>
+    <title>example</title>
   </head>
   <body>
     <div id="app"></div>

examples/02_suspense/src/App.tsx → examples/02_suspense/src/app.tsx

@@ -1,6 +1,6 @@
-/// <reference types="react/experimental" />
+/// <reference types="react/canary" />
 
-import React, { Suspense, use, useTransition } from 'react';
+import { Suspense, use, useTransition } from 'react';
 
 import { createStore } from 'zustand/vanilla';
 import { useZustand } from 'use-zustand';
@@ -34,10 +34,9 @@ const Post = () => {
 
 const App = () => {
   const [isPending, startTransition] = useTransition();
-  const fetchPostOrig = useZustand(postStore, (state) => state.fetchPost);
   const fetchPost = (id: number) => {
     startTransition(() => {
-      fetchPostOrig(id);
+      postStore.getState().fetchPost(id);
     });
   };
   return (

examples/02_suspense/src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 
-import App from './App';
+import App from './app';
 
 const ele = document.getElementById('app');
 if (ele) {