initial commit

.codesandbox/ci.json

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

.eslintignore

@@ -0,0 +1,2 @@
+/dist
+/src/vendor

.eslintrc.json

@@ -0,0 +1,64 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint",
+    "prettier"
+  ],
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "airbnb",
+    "plugin:prettier/recommended"
+  ],
+  "env": {
+    "browser": true
+  },
+  "globals": {
+    "JSX": "readonly"
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".ts", ".tsx"]
+      }
+    }
+  },
+  "rules": {
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "react/jsx-filename-extension": ["error", { "extensions": [".js", ".tsx"] }],
+    "react/prop-types": "off",
+    "react/jsx-one-expression-per-line": "off",
+    "import/extensions": ["error", "never"],
+    "import/prefer-default-export": "off",
+    "import/no-unresolved": ["error", { "ignore": ["zustand-slices"] }],
+    "no-param-reassign": "off",
+    "no-plusplus": "off",
+    "no-bitwise": "off",
+    "symbol-description": "off",
+    "prefer-object-spread": "off",
+    "no-use-before-define": "off",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": ["error", {
+      "varsIgnorePattern": "^(createElement|Fragment)$"
+    }],
+    "no-redeclare": "off",
+    "react/function-component-definition": ["error", { "namedComponents": "arrow-function" }]
+  },
+  "overrides": [{
+    "files": ["__tests__/**/*"],
+    "env": {
+      "jest": true
+    },
+    "rules": {
+      "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
+    }
+  }, {
+    "files": ["examples/**/*"],
+    "rules": {
+      "import/no-extraneous-dependencies": "off"
+    }
+  }]
+}

.github/workflows/cd.yml

@@ -0,0 +1,27 @@
+name: CD
+
+on:
+  push:
+    tags:
+      - v*
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.2.0
+      - uses: actions/setup-node@v3
+        with:
+          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

@@ -0,0 +1,21 @@
+name: CI
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.2.0
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'pnpm'
+          cache-dependency-path: '**/pnpm-lock.yaml'
+      - run: pnpm install --frozen-lockfile
+      - run: npm test

.gitignore

@@ -0,0 +1,4 @@
+*~
+*.swp
+node_modules
+/dist

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

CHANGELOG.md

@@ -0,0 +1,7 @@
+# Change Log
+
+## [Unreleased]
+
+## [0.0.1] - 2024-04-18
+### Added
+- Initial release

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 Daishi Kato
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -1,2 +1,77 @@
 # zustand-slices
+
+[![CI](https://img.shields.io/github/actions/workflow/status/zustandjs/zustand-slices/ci.yml?branch=main)](https://github.com/zustandjs/zustand-slices/actions?query=workflow%3ACI)
+[![npm](https://img.shields.io/npm/v/zustand-slices)](https://www.npmjs.com/package/zustand-slices)
+[![size](https://img.shields.io/bundlephobia/minzip/zustand-slices)](https://bundlephobia.com/result?p=zustand-slices)
+[![discord](https://img.shields.io/discord/627656437971288081)](https://discord.gg/MrQdmzd)
+
 A slice utility for Zustand
+
+## Install
+
+```bash
+npm install zustand zustand-slices
+```
+
+## Usage
+
+```jsx
+import { create } from 'zustand';
+import { createSlice, withSlices } from 'zustand-slices';
+
+const countSlice = createSlice({
+  name: 'count',
+  value: 0,
+  actions: {
+    inc: () => (prev) => prev + 1,
+    addBy: (n: number) => (prev) => prev + n,
+  },
+});
+
+const textSlice = createSlice({
+  name: 'text',
+  value: 'Hello',
+  actions: {
+    updateText: (newText: string) => () => newText,
+  },
+});
+
+const useCountStore = create(withSlices(countSlice, textSlice));
+
+const Counter = () => {
+  const count = useCountStore((state) => state.count);
+  const inc = useCountStore((state) => state.inc);
+  const addBy = useCountStore((state) => state.addBy);
+  const text = useCountStore((state) => state.text);
+  const updateText = useCountStore((state) => state.updateText);
+  return (
+    <>
+      <div>Count: {count}</div>
+      <button type="button" onClick={inc}>
+        +1
+      </button>
+      <button type="button" onClick={() => addBy(10)}>
+        +10
+      </button>
+      <input value={text} onChange={(e) => updateText(e.target.value)} />
+    </>
+  );
+};
+```
+
+## Examples
+
+The [examples](examples) folder contains working examples.
+You can run one of them with
+
+```bash
+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/zustandjs/zustand-slices/tree/main/examples/01_counter)
+
+## Tweets
+

__tests__/01_basic_spec.tsx

@@ -0,0 +1,8 @@
+import { createSlice, withSlices } from '../src/index';
+
+describe('basic spec', () => {
+  it('should export functions', () => {
+    expect(createSlice).toBeDefined();
+    expect(withSlices).toBeDefined();
+  });
+});

examples/01_counter/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "zustand-slices-example",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "typescript": "latest",
+    "zustand": "latest",
+    "zustand-slices": "latest"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "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_counter/public/index.html

@@ -0,0 +1,8 @@
+<html>
+  <head>
+    <title>zustand-slices example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

examples/01_counter/src/App.tsx

@@ -0,0 +1,49 @@
+import { create } from 'zustand';
+import { createSlice, withSlices } from 'zustand-slices';
+
+const countSlice = createSlice({
+  name: 'count',
+  value: 0,
+  actions: {
+    inc: () => (prev) => prev + 1,
+    addBy: (n: number) => (prev) => prev + n,
+  },
+});
+
+const textSlice = createSlice({
+  name: 'text',
+  value: 'Hello',
+  actions: {
+    updateText: (newText: string) => () => newText,
+  },
+});
+
+const useCountStore = create(withSlices(countSlice, textSlice));
+
+const Counter = () => {
+  const count = useCountStore((state) => state.count);
+  const inc = useCountStore((state) => state.inc);
+  const addBy = useCountStore((state) => state.addBy);
+  const text = useCountStore((state) => state.text);
+  const updateText = useCountStore((state) => state.updateText);
+  return (
+    <>
+      <div>Count: {count}</div>
+      <button type="button" onClick={inc}>
+        +1
+      </button>
+      <button type="button" onClick={() => addBy(10)}>
+        +10
+      </button>
+      <input value={text} onChange={(e) => updateText(e.target.value)} />
+    </>
+  );
+};
+
+const App = () => (
+  <div>
+    <Counter />
+  </div>
+);
+
+export default App;

examples/01_counter/src/index.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './App';
+
+const ele = document.getElementById('app');
+if (ele) {
+  createRoot(ele).render(
+    <StrictMode>
+      <App />
+    </StrictMode>,
+  );
+}