diff --git a/.github/workflows/jsr.yml b/.github/workflows/jsr.yml index 492c3af..7632f49 100644 --- a/.github/workflows/jsr.yml +++ b/.github/workflows/jsr.yml @@ -17,7 +17,7 @@ jobs: - uses: actions/checkout@v4 - uses: denoland/setup-deno@v1 with: - deno-version: v1.x + deno-version: v2.x - uses: arduino/setup-task@v2 with: version: 3.x @@ -29,22 +29,22 @@ jobs: - run: task check - run: task test - # build-react: - # name: Build (React) - # runs-on: ubuntu-latest - # steps: - # - uses: actions/checkout@v4 - # - uses: denoland/setup-deno@v1 - # with: - # deno-version: v1.x - # - uses: arduino/setup-task@v2 - # with: - # version: 3.x - # repo-token: ${{ secrets.GITHUB_TOKEN }} - # - uses: actions/setup-node@v4 - # with: - # node-version: 20.x - # - run: npm install - # working-directory: ./react - # - run: task react:check - # - run: task react:test + build-react: + name: Build (React) + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: denoland/setup-deno@v1 + with: + deno-version: v1.x + - uses: arduino/setup-task@v2 + with: + version: 3.x + repo-token: ${{ secrets.GITHUB_TOKEN }} + - uses: actions/setup-node@v4 + with: + node-version: 20.x + - run: npm install + working-directory: ./react + - run: task react:check + - run: task react:test diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index d80fbe1..c235b41 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -14,7 +14,7 @@ jobs: - uses: actions/checkout@v4 - uses: denoland/setup-deno@v1 with: - deno-version: v1.x + deno-version: v2.x - uses: arduino/setup-task@v2 with: version: 3.x diff --git a/.github/workflows/publish_react.yml b/.github/workflows/publish_react.yml index 55bf793..cd2f779 100644 --- a/.github/workflows/publish_react.yml +++ b/.github/workflows/publish_react.yml @@ -14,7 +14,7 @@ jobs: - uses: actions/checkout@v4 - uses: denoland/setup-deno@v1 with: - deno-version: v1.x + deno-version: v2.x - uses: arduino/setup-task@v2 with: version: 3.x diff --git a/Taskfile.yml b/Taskfile.yml index dbe8592..55fbb52 100644 --- a/Taskfile.yml +++ b/Taskfile.yml @@ -1,6 +1,6 @@ version: "3" -include: +includes: react: taskfile: ./react dir: ./react diff --git a/react/.npmrc b/react/.npmrc new file mode 100644 index 0000000..41583e3 --- /dev/null +++ b/react/.npmrc @@ -0,0 +1 @@ +@jsr:registry=https://npm.jsr.io diff --git a/react/LICENSE b/react/LICENSE new file mode 100644 index 0000000..3774147 --- /dev/null +++ b/react/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 Michael + +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. diff --git a/react/README.md b/react/README.md new file mode 100644 index 0000000..ee20948 --- /dev/null +++ b/react/README.md @@ -0,0 +1,10 @@ +# pure-react +![JSR Version](https://img.shields.io/jsr/v/@pistonite/pure-react) + +React utilities (hooks) for [pure](https://jsr.io/@pistonite/pure) + +## Setup +Install the package from JSR with your package manager +```bash +npx jsr install @pistonite/pure @pisontite/pure-react +``` diff --git a/react/Taskfile.yml b/react/Taskfile.yml new file mode 100644 index 0000000..f231903 --- /dev/null +++ b/react/Taskfile.yml @@ -0,0 +1,19 @@ +version: '3' + +tasks: + check: + desc: Check the code + cmds: + - npx tsc + - deno lint + - npx jsr publish --dry-run + + test: + desc: Run the tests + cmds: + - echo "No tests" + + publish: + desc: Publish the package + cmds: + - npx jsr publish diff --git a/react/deno.jsonc b/react/deno.jsonc new file mode 100644 index 0000000..315f9e8 --- /dev/null +++ b/react/deno.jsonc @@ -0,0 +1,16 @@ +{ + "name": "@pistonite/pure-react", + "version": "0.0.1", + "exports": { + ".": "./src/index.ts", + }, + "publish": { + "exclude": ["package-lock.json", "node_modules/**", "Taskfile.yml"], + }, + "lint": { + "rules": { + "include": ["no-slow-types", "missing-explicit-return-type"], + "exclude": ["no-explicit-any"], + }, + }, +} diff --git a/react/package.json b/react/package.json new file mode 100644 index 0000000..116f2b4 --- /dev/null +++ b/react/package.json @@ -0,0 +1,12 @@ +{ + "peerDependencies": { + "@pistonite/pure": "npm:@jsr/pistonite__pure@^0.0.10", + "react": "^18" + }, + "devDependencies": { + "@pistonite/pure": "npm:@jsr/pistonite__pure@^0.0.10", + "@types/react": "^18.3.12", + "react": "^18", + "typescript": "^5.5.4" + } +} diff --git a/react/src/index.ts b/react/src/index.ts new file mode 100644 index 0000000..281eeb7 --- /dev/null +++ b/react/src/index.ts @@ -0,0 +1 @@ +export * from "./pref.ts"; diff --git a/react/src/pref.ts b/react/src/pref.ts new file mode 100644 index 0000000..cf0b581 --- /dev/null +++ b/react/src/pref.ts @@ -0,0 +1,87 @@ +/** + * # pure-react/pref + * + * React bindings for `pure/pref` + * + * ## Dark Mode + * The `useDark` hook returns the current dark mode state, and subscribes to changes. + * To set the dark mode, use `setDark` from `pure/pref`. + * ```tsx + * import { useDark } from "@pistonite/pure-react"; + * + * const MyComponent = () => { + * // will re-render when dark mode changes + * const dark = useDark(); + * + * return
{dark ? "Mode: Dark" : "Mode: Light"}
; + * }; + * ``` + * + * ## Locale + * The `useLocale` hook returns the current locale, and subscribes to changes. + * + * ```tsx + * import { useLocale } from "@pistonite/pure-react"; + * + * const MyComponent = () => { + * const locale = useLocale(); + * + * return
Current Locale is: {locale}
; + * }; + * ``` + * + * @module + */ + +import { useState, useEffect } from "react"; + +import { + addDarkSubscriber, + addLocaleSubscriber, + getLocale, + isDark, + removeDarkSubscriber, + removeLocaleSubscriber, +} from "@pistonite/pure/pref"; + +/** + * Hook to get the current dark mode state + */ +export const useDark = (): boolean => { + const [value, setValue] = useState(isDark); + useEffect(() => { + const dark = isDark(); + if (dark !== value) { + setValue(dark); + } + const subscriber = (dark: boolean) => { + setValue(dark); + }; + addDarkSubscriber(subscriber); + return () => { + removeDarkSubscriber(subscriber); + }; + }, []); + return value; +}; + +/** + * Hook to get the current locale + */ +export const useLocale = (): string => { + const [locale, setLocale] = useState(getLocale); + useEffect(() => { + const l = getLocale(); + if (l !== locale) { + setLocale(l); + } + const subscriber = (locale: string) => { + setLocale(locale); + }; + addLocaleSubscriber(subscriber); + return () => { + removeLocaleSubscriber(subscriber); + }; + }, []); + return locale; +}; diff --git a/react/tsconfig.json b/react/tsconfig.json new file mode 100644 index 0000000..6bbf0b7 --- /dev/null +++ b/react/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": ["ES2021", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"] +}