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": ["use-signals"] }],
+    "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-10
+### 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,51 @@
 # use-signals
+
+[![CI](https://img.shields.io/github/actions/workflow/status/dai-shi/use-signals/ci.yml?branch=main)](https://github.com/dai-shi/use-signals/actions?query=workflow%3ACI)
+[![npm](https://img.shields.io/npm/v/use-signals)](https://www.npmjs.com/package/use-signals)
+[![size](https://img.shields.io/bundlephobia/minzip/use-signals)](https://bundlephobia.com/result?p=use-signals)
+[![discord](https://img.shields.io/discord/627656437971288081)](https://discord.gg/MrQdmzd)
+
 An experimental React hook for TC39 signals
+
+## Install
+
+```bash
+npm install use-signals
+```
+
+## Usage
+
+```jsx
+import { Signal, useSignal } from 'use-signals';
+
+const counter = new Signal.State(0);
+
+const Counter = () => {
+  const count = useSignal(counter);
+  const inc = () => counter.set(counter.get() + 1);
+  return (
+    <>
+      <div>Count: {count}</div>
+      <button type="button" onClick={inc}>
+        +1
+      </button>
+    </>
+  );
+};
+```
+
+## Examples
+
+The [examples](examples) folder contains working examples.
+You can run one of them with
+
+```bash
+PORT=8080 yarn run examples:01_typescript
+```
+
+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-signals/tree/main/examples/01_counter)
+
+## Tweets

examples/01_counter/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "use-signals-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",
+    "use-signals": "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>use-signals example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

examples/01_counter/src/App.tsx

@@ -0,0 +1,27 @@
+import { Signal, useSignal } from 'use-signals';
+
+const counter = new Signal.State(0);
+const doubleCounter = new Signal.Computed(() => counter.get() * 2);
+
+const Counter = () => {
+  const count = useSignal(counter);
+  const doubleCount = useSignal(doubleCounter);
+  const inc = () => counter.set(counter.get() + 1);
+  return (
+    <>
+      <div>Count: {count}</div>
+      <div>Double Count: {doubleCount}</div>
+      <button type="button" onClick={inc}>
+        +1
+      </button>
+    </>
+  );
+};
+
+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>,
+  );
+}

package.json

@@ -0,0 +1,62 @@
+{
+  "name": "use-signals",
+  "description": "An experimental React hook for TC39 signals",
+  "version": "0.0.1",
+  "type": "module",
+  "author": "Daishi Kato",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dai-shi/use-signals.git"
+  },
+  "source": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "src",
+    "dist"
+  ],
+  "scripts": {
+    "compile": "tsc --project . --declaration",
+    "test": "run-s eslint tsc-test",
+    "eslint": "eslint --ext .js,.ts,.tsx .",
+    "tsc-test": "tsc --project . --noEmit",
+    "examples:01_counter": "DIR=01_counter EXT=tsx webpack serve"
+  },
+  "keywords": [
+    "react",
+    "hooks",
+    "signals"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^20.12.7",
+    "@types/react": "^18.2.75",
+    "@types/react-dom": "^18.2.24",
+    "@typescript-eslint/eslint-plugin": "^7.6.0",
+    "@typescript-eslint/parser": "^7.6.0",
+    "eslint": "^8.57.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
+    "html-webpack-plugin": "^5.6.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.4.4",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "dependencies": {
+    "signal-polyfill": "^0.1.0"
+  }
+}