Counter: {state.value}
9 | 12 | 13 | } 14 | 15 | -------------------------------------------------------------------------------- /plugins/subscribable/README.md: -------------------------------------------------------------------------------- 1 | # @hookstate/localstored 2 | 3 | [](https://img.shields.io/github/license/avkonst/hookstate) [](https://www.npmjs.com/package/@hookstate/subscribable) 4 | 5 | Plugin for @hookstate/core to make it easier to subscribe a custom callback to state changes. 6 | 7 | [Learn more...](https://hookstate.js.org/docs/extensions-subscribable) 8 | 9 | -------------------------------------------------------------------------------- /docs/demos/todolist/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon-32.png", 7 | "sizes": "32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "favicon-192.png", 12 | "sizes": "192x192 128x128 64x64", 13 | "type": "image/x-icon" 14 | } 15 | ], 16 | "start_url": ".", 17 | "display": "standalone", 18 | "theme_color": "#000000", 19 | "background_color": "#ffffff" 20 | } 21 | -------------------------------------------------------------------------------- /plugins/localstored/README.md: -------------------------------------------------------------------------------- 1 | # @hookstate/localstored 2 | 3 | [](https://img.shields.io/github/license/avkonst/hookstate) [](https://www.npmjs.com/package/@hookstate/localstored) 4 | 5 | Plugin for @hookstate/core to enable persistence of managed data states to browser's local storage. 6 | 7 | [Learn more...](https://hookstate.js.org/docs/extensions-localstored) 8 | 9 | -------------------------------------------------------------------------------- /plugins/clonable/src/unit.test.ts: -------------------------------------------------------------------------------- 1 | 2 | import { hookstate, State } from '@hookstate/core'; 3 | import { renderHook, act } from '@testing-library/react-hooks'; 4 | import { Clonable, clonable } from '../src' 5 | 6 | test('check typescript assignability', async () => { 7 | interface Task { 8 | name: string, 9 | snapshot: number 10 | } 11 | 12 | let a = hookstate([{ name: 'string', snapshot: 1 }], clonable(v => v)) 13 | let b: StatetaskState.name.set(e.target.value)} 21 | />
22 | } 23 | -------------------------------------------------------------------------------- /docs/index/src/css/custom.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Any CSS included here will be global. The classic template 3 | * bundles Infima by default. Infima is a CSS framework designed to 4 | * work well for content-centric websites. 5 | */ 6 | 7 | /* You can override the default Infima variables here. */ 8 | :root { 9 | --ifm-color-primary: rgb(0, 120, 190); 10 | --ifm-color-primary-dark: rgb(0, 111, 175); 11 | --ifm-color-primary-darker: rgb(0, 94, 148); 12 | --ifm-color-primary-darkest: rgb(0, 80, 126); 13 | --ifm-color-primary-light: rgb(7, 135, 209); 14 | --ifm-color-primary-lighter: rgb(30, 163, 240); 15 | --ifm-color-primary-lightest: rgb(49, 179, 255); 16 | --ifm-code-font-size: 95%; 17 | } 18 | 19 | .docusaurus-highlight-code-line { 20 | background-color: rgb(72, 77, 91); 21 | display: block; 22 | margin: 0 calc(-1 * var(--ifm-pre-padding)); 23 | padding: 0 var(--ifm-pre-padding); 24 | } -------------------------------------------------------------------------------- /docs/index/src/examples/global-getting-started-interface.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { hookstate, useHookstate, State } from '@hookstate/core'; 3 | 4 | // internal variables 5 | const globalState = hookstate(0); 6 | const wrapState = (s: State21 | Counter value: {state.get()} (watch +1 every 3 seconds) 22 | 23 |
24 | } 25 | -------------------------------------------------------------------------------- /core/rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from 'rollup-plugin-typescript2' 2 | import commonjs from '@rollup/plugin-commonjs' 3 | import external from 'rollup-plugin-peer-deps-external' 4 | import resolve from '@rollup/plugin-node-resolve' 5 | import url from '@rollup/plugin-url' 6 | 7 | import pkg from './package.json' 8 | 9 | export default { 10 | input: 'src/index.ts', 11 | output: [ 12 | { 13 | file: pkg.main, 14 | format: 'cjs', 15 | exports: 'named', 16 | sourcemap: true 17 | }, 18 | { 19 | file: pkg.module, 20 | format: 'es', 21 | exports: 'named', 22 | sourcemap: true 23 | } 24 | ], 25 | plugins: [ 26 | external(), 27 | url(), 28 | resolve(), 29 | typescript({ 30 | tsconfig: 'tsconfig.prod.json', 31 | rollupCommonJSResolveHack: true, 32 | clean: true 33 | }), 34 | commonjs() 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /docs/index/src/examples/local-async-state.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { useHookstate } from '@hookstate/core'; 3 | 4 | export const ExampleComponent = () => { 5 | const resourcePath = 'https://raw.githubusercontent.com/avkonst/hookstate/master/CNAME'; 6 | const fetchResource = () => fetch(resourcePath) 7 | .then(r => r.text()) 8 | const state = useHookstate(fetchResource); 9 | 10 | if (state.promised) { 11 | returnLoading {resourcePath}
; 12 | } 13 | 14 | if (state.error) { 15 | returnFailed to load {resourcePath}
16 | {state.error.toString()}
17 |
18 |
Loaded {resourcePath}
22 | {state.value}
23 |
24 |
17 | taskState.name.set(e.target.value)} 20 | /> 21 |
22 | })} 23 | 26 | 27 | } 28 | -------------------------------------------------------------------------------- /plugins/logged/rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from 'rollup-plugin-typescript2' 2 | import commonjs from '@rollup/plugin-commonjs' 3 | import external from 'rollup-plugin-peer-deps-external' 4 | import resolve from '@rollup/plugin-node-resolve' 5 | import url from '@rollup/plugin-url' 6 | 7 | import pkg from './package.json' 8 | 9 | export default { 10 | input: 'src/index.ts', 11 | output: [ 12 | { 13 | file: pkg.main, 14 | format: 'cjs', 15 | exports: 'named', 16 | sourcemap: true 17 | }, 18 | { 19 | file: pkg.module, 20 | format: 'es', 21 | exports: 'named', 22 | sourcemap: true 23 | } 24 | ], 25 | plugins: [ 26 | external(), 27 | url(), 28 | resolve(), 29 | typescript({ 30 | tsconfig: 'tsconfig.prod.json', 31 | rollupCommonJSResolveHack: true, 32 | clean: true 33 | }), 34 | commonjs() 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /plugins/broadcasted/rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from 'rollup-plugin-typescript2' 2 | import commonjs from '@rollup/plugin-commonjs' 3 | import external from 'rollup-plugin-peer-deps-external' 4 | import resolve from '@rollup/plugin-node-resolve' 5 | import url from '@rollup/plugin-url' 6 | 7 | import pkg from './package.json' 8 | 9 | export default { 10 | input: 'src/index.ts', 11 | output: [ 12 | { 13 | file: pkg.main, 14 | format: 'cjs', 15 | exports: 'named', 16 | sourcemap: true 17 | }, 18 | { 19 | file: pkg.module, 20 | format: 'es', 21 | exports: 'named', 22 | sourcemap: true 23 | } 24 | ], 25 | plugins: [ 26 | external(), 27 | url(), 28 | resolve(), 29 | typescript({ 30 | tsconfig: 'tsconfig.prod.json', 31 | rollupCommonJSResolveHack: true, 32 | clean: true 33 | }), 34 | commonjs() 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /plugins/clonable/rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from 'rollup-plugin-typescript2' 2 | import commonjs from '@rollup/plugin-commonjs' 3 | import external from 'rollup-plugin-peer-deps-external' 4 | import resolve from '@rollup/plugin-node-resolve' 5 | import url from '@rollup/plugin-url' 6 | 7 | import pkg from './package.json' 8 | 9 | export default { 10 | input: 'src/index.ts', 11 | output: [ 12 | { 13 | file: pkg.main, 14 | format: 'cjs', 15 | exports: 'named', 16 | sourcemap: true 17 | }, 18 | { 19 | file: pkg.module, 20 | format: 'es', 21 | exports: 'named', 22 | sourcemap: true 23 | } 24 | ], 25 | plugins: [ 26 | external(), 27 | url(), 28 | resolve(), 29 | typescript({ 30 | tsconfig: 'tsconfig.prod.json', 31 | rollupCommonJSResolveHack: true, 32 | clean: true 33 | }), 34 | commonjs() 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /plugins/comparable/rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from 'rollup-plugin-typescript2' 2 | import commonjs from '@rollup/plugin-commonjs' 3 | import external from 'rollup-plugin-peer-deps-external' 4 | import resolve from '@rollup/plugin-node-resolve' 5 | import url from '@rollup/plugin-url' 6 | 7 | import pkg from './package.json' 8 | 9 | export default { 10 | input: 'src/index.ts', 11 | output: [ 12 | { 13 | file: pkg.main, 14 | format: 'cjs', 15 | exports: 'named', 16 | sourcemap: true 17 | }, 18 | { 19 | file: pkg.module, 20 | format: 'es', 21 | exports: 'named', 22 | sourcemap: true 23 | } 24 | ], 25 | plugins: [ 26 | external(), 27 | url(), 28 | resolve(), 29 | typescript({ 30 | tsconfig: 'tsconfig.prod.json', 31 | rollupCommonJSResolveHack: true, 32 | clean: true 33 | }), 34 | commonjs() 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /plugins/devtools/rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from 'rollup-plugin-typescript2' 2 | import commonjs from '@rollup/plugin-commonjs' 3 | import external from 'rollup-plugin-peer-deps-external' 4 | import resolve from '@rollup/plugin-node-resolve' 5 | import url from '@rollup/plugin-url' 6 | 7 | import pkg from './package.json' 8 | 9 | export default { 10 | input: 'src/index.ts', 11 | output: [ 12 | { 13 | file: pkg.main, 14 | format: 'cjs', 15 | exports: 'named', 16 | sourcemap: true 17 | }, 18 | { 19 | file: pkg.module, 20 | format: 'es', 21 | exports: 'named', 22 | sourcemap: true 23 | } 24 | ], 25 | plugins: [ 26 | external(), 27 | url(), 28 | resolve(), 29 | typescript({ 30 | tsconfig: 'tsconfig.prod.json', 31 | rollupCommonJSResolveHack: true, 32 | clean: true 33 | }), 34 | commonjs() 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /plugins/localstored/rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from 'rollup-plugin-typescript2' 2 | import commonjs from '@rollup/plugin-commonjs' 3 | import external from 'rollup-plugin-peer-deps-external' 4 | import resolve from '@rollup/plugin-node-resolve' 5 | import url from '@rollup/plugin-url' 6 | 7 | import pkg from './package.json' 8 | 9 | export default { 10 | input: 'src/index.ts', 11 | output: [ 12 | { 13 | file: pkg.main, 14 | format: 'cjs', 15 | exports: 'named', 16 | sourcemap: true 17 | }, 18 | { 19 | file: pkg.module, 20 | format: 'es', 21 | exports: 'named', 22 | sourcemap: true 23 | } 24 | ], 25 | plugins: [ 26 | external(), 27 | url(), 28 | resolve(), 29 | typescript({ 30 | tsconfig: 'tsconfig.prod.json', 31 | rollupCommonJSResolveHack: true, 32 | clean: true 33 | }), 34 | commonjs() 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /plugins/validation/rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from 'rollup-plugin-typescript2' 2 | import commonjs from '@rollup/plugin-commonjs' 3 | import external from 'rollup-plugin-peer-deps-external' 4 | import resolve from '@rollup/plugin-node-resolve' 5 | import url from '@rollup/plugin-url' 6 | 7 | import pkg from './package.json' 8 | 9 | export default { 10 | input: 'src/index.ts', 11 | output: [ 12 | { 13 | file: pkg.main, 14 | format: 'cjs', 15 | exports: 'named', 16 | sourcemap: true 17 | }, 18 | { 19 | file: pkg.module, 20 | format: 'es', 21 | exports: 'named', 22 | sourcemap: true 23 | } 24 | ], 25 | plugins: [ 26 | external(), 27 | url(), 28 | resolve(), 29 | typescript({ 30 | tsconfig: 'tsconfig.prod.json', 31 | rollupCommonJSResolveHack: true, 32 | clean: true 33 | }), 34 | commonjs() 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /plugins/identifiable/rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from 'rollup-plugin-typescript2' 2 | import commonjs from '@rollup/plugin-commonjs' 3 | import external from 'rollup-plugin-peer-deps-external' 4 | import resolve from '@rollup/plugin-node-resolve' 5 | import url from '@rollup/plugin-url' 6 | 7 | import pkg from './package.json' 8 | 9 | export default { 10 | input: 'src/index.ts', 11 | output: [ 12 | { 13 | file: pkg.main, 14 | format: 'cjs', 15 | exports: 'named', 16 | sourcemap: true 17 | }, 18 | { 19 | file: pkg.module, 20 | format: 'es', 21 | exports: 'named', 22 | sourcemap: true 23 | } 24 | ], 25 | plugins: [ 26 | external(), 27 | url(), 28 | resolve(), 29 | typescript({ 30 | tsconfig: 'tsconfig.prod.json', 31 | rollupCommonJSResolveHack: true, 32 | clean: true 33 | }), 34 | commonjs() 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /plugins/initializable/rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from 'rollup-plugin-typescript2' 2 | import commonjs from '@rollup/plugin-commonjs' 3 | import external from 'rollup-plugin-peer-deps-external' 4 | import resolve from '@rollup/plugin-node-resolve' 5 | import url from '@rollup/plugin-url' 6 | 7 | import pkg from './package.json' 8 | 9 | export default { 10 | input: 'src/index.ts', 11 | output: [ 12 | { 13 | file: pkg.main, 14 | format: 'cjs', 15 | exports: 'named', 16 | sourcemap: true 17 | }, 18 | { 19 | file: pkg.module, 20 | format: 'es', 21 | exports: 'named', 22 | sourcemap: true 23 | } 24 | ], 25 | plugins: [ 26 | external(), 27 | url(), 28 | resolve(), 29 | typescript({ 30 | tsconfig: 'tsconfig.prod.json', 31 | rollupCommonJSResolveHack: true, 32 | clean: true 33 | }), 34 | commonjs() 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /plugins/serializable/rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from 'rollup-plugin-typescript2' 2 | import commonjs from '@rollup/plugin-commonjs' 3 | import external from 'rollup-plugin-peer-deps-external' 4 | import resolve from '@rollup/plugin-node-resolve' 5 | import url from '@rollup/plugin-url' 6 | 7 | import pkg from './package.json' 8 | 9 | export default { 10 | input: 'src/index.ts', 11 | output: [ 12 | { 13 | file: pkg.main, 14 | format: 'cjs', 15 | exports: 'named', 16 | sourcemap: true 17 | }, 18 | { 19 | file: pkg.module, 20 | format: 'es', 21 | exports: 'named', 22 | sourcemap: true 23 | } 24 | ], 25 | plugins: [ 26 | external(), 27 | url(), 28 | resolve(), 29 | typescript({ 30 | tsconfig: 'tsconfig.prod.json', 31 | rollupCommonJSResolveHack: true, 32 | clean: true 33 | }), 34 | commonjs() 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /plugins/snapshotable/rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from 'rollup-plugin-typescript2' 2 | import commonjs from '@rollup/plugin-commonjs' 3 | import external from 'rollup-plugin-peer-deps-external' 4 | import resolve from '@rollup/plugin-node-resolve' 5 | import url from '@rollup/plugin-url' 6 | 7 | import pkg from './package.json' 8 | 9 | export default { 10 | input: 'src/index.ts', 11 | output: [ 12 | { 13 | file: pkg.main, 14 | format: 'cjs', 15 | exports: 'named', 16 | sourcemap: true 17 | }, 18 | { 19 | file: pkg.module, 20 | format: 'es', 21 | exports: 'named', 22 | sourcemap: true 23 | } 24 | ], 25 | plugins: [ 26 | external(), 27 | url(), 28 | resolve(), 29 | typescript({ 30 | tsconfig: 'tsconfig.prod.json', 31 | rollupCommonJSResolveHack: true, 32 | clean: true 33 | }), 34 | commonjs() 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /plugins/subscribable/rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from 'rollup-plugin-typescript2' 2 | import commonjs from '@rollup/plugin-commonjs' 3 | import external from 'rollup-plugin-peer-deps-external' 4 | import resolve from '@rollup/plugin-node-resolve' 5 | import url from '@rollup/plugin-url' 6 | 7 | import pkg from './package.json' 8 | 9 | export default { 10 | input: 'src/index.ts', 11 | output: [ 12 | { 13 | file: pkg.main, 14 | format: 'cjs', 15 | exports: 'named', 16 | sourcemap: true 17 | }, 18 | { 19 | file: pkg.module, 20 | format: 'es', 21 | exports: 'named', 22 | sourcemap: true 23 | } 24 | ], 25 | plugins: [ 26 | external(), 27 | url(), 28 | resolve(), 29 | typescript({ 30 | tsconfig: 'tsconfig.prod.json', 31 | rollupCommonJSResolveHack: true, 32 | clean: true 33 | }), 34 | commonjs() 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /core/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "dist", 4 | "target": "es5", 5 | "lib": [ 6 | "dom", 7 | "dom.iterable", 8 | "esnext" 9 | ], 10 | "sourceMap": true, 11 | "noImplicitReturns": true, 12 | "noImplicitThis": true, 13 | "noImplicitAny": true, 14 | "strictNullChecks": true, 15 | "noUnusedLocals": false, 16 | "experimentalDecorators": true, 17 | "newLine": "LF", 18 | "allowJs": true, 19 | "skipLibCheck": true, 20 | "esModuleInterop": true, 21 | "allowSyntheticDefaultImports": true, 22 | "strict": true, 23 | "forceConsistentCasingInFileNames": true, 24 | "suppressImplicitAnyIndexErrors": true, 25 | "module": "esnext", 26 | "moduleResolution": "node", 27 | "resolveJsonModule": true, 28 | "isolatedModules": true, 29 | "noEmit": false, 30 | "jsx": "preserve" 31 | }, 32 | "include": [ 33 | "src", "src/__tests__" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /plugins/logged/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "dist", 4 | "target": "es5", 5 | "lib": [ 6 | "dom", 7 | "dom.iterable", 8 | "esnext" 9 | ], 10 | "sourceMap": true, 11 | "noImplicitReturns": true, 12 | "noImplicitThis": true, 13 | "noImplicitAny": true, 14 | "strictNullChecks": true, 15 | "noUnusedLocals": false, 16 | "experimentalDecorators": true, 17 | "newLine": "LF", 18 | "allowJs": true, 19 | "skipLibCheck": true, 20 | "esModuleInterop": true, 21 | "allowSyntheticDefaultImports": true, 22 | "strict": true, 23 | "forceConsistentCasingInFileNames": true, 24 | "suppressImplicitAnyIndexErrors": true, 25 | "module": "esnext", 26 | "moduleResolution": "node", 27 | "resolveJsonModule": true, 28 | "isolatedModules": true, 29 | "noEmit": false, 30 | "jsx": "preserve" 31 | }, 32 | "include": [ 33 | "src", "src/__tests__" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /nx.json: -------------------------------------------------------------------------------- 1 | { 2 | "implicitDependencies": { 3 | "package.json": { 4 | "dependencies": "*", 5 | "devDependencies": "*" 6 | }, 7 | "nx.json": "*" 8 | }, 9 | "npmScope": "@hookstate", 10 | "tasksRunnerOptions": { 11 | "default": { 12 | "runner": "@nrwl/workspace/tasks-runners/default", 13 | "options": { 14 | "cacheableOperations": ["build", "test", "lint", "e2e"], 15 | "parallel": 1 16 | } 17 | } 18 | }, 19 | "affected": { 20 | "defaultBase": "master" 21 | }, 22 | "targetDependencies": { 23 | "build": [ 24 | { 25 | "target": "build", 26 | "projects": "dependencies" 27 | } 28 | ], 29 | "test": [ 30 | { 31 | "target": "build", 32 | "projects": "dependencies" 33 | } 34 | ], 35 | "test:ci": [ 36 | { 37 | "target": "build", 38 | "projects": "dependencies" 39 | } 40 | ], 41 | "start": [ 42 | { 43 | "target": "build", 44 | "projects": "dependencies" 45 | } 46 | ], 47 | "release": [ 48 | { 49 | "target": "build", 50 | "projects": "self" 51 | } 52 | ] 53 | }, 54 | "defaultProject": "core" 55 | } 56 | -------------------------------------------------------------------------------- /plugins/broadcasted/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "dist", 4 | "target": "es5", 5 | "lib": [ 6 | "dom", 7 | "dom.iterable", 8 | "esnext" 9 | ], 10 | "sourceMap": true, 11 | "noImplicitReturns": true, 12 | "noImplicitThis": true, 13 | "noImplicitAny": true, 14 | "strictNullChecks": true, 15 | "noUnusedLocals": false, 16 | "experimentalDecorators": true, 17 | "newLine": "LF", 18 | "allowJs": true, 19 | "skipLibCheck": true, 20 | "esModuleInterop": true, 21 | "allowSyntheticDefaultImports": true, 22 | "strict": true, 23 | "forceConsistentCasingInFileNames": true, 24 | "suppressImplicitAnyIndexErrors": true, 25 | "module": "esnext", 26 | "moduleResolution": "node", 27 | "resolveJsonModule": true, 28 | "isolatedModules": true, 29 | "noEmit": false, 30 | "jsx": "preserve" 31 | }, 32 | "include": [ 33 | "src", "src/__tests__" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /plugins/clonable/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "dist", 4 | "target": "es5", 5 | "lib": [ 6 | "dom", 7 | "dom.iterable", 8 | "esnext" 9 | ], 10 | "sourceMap": true, 11 | "noImplicitReturns": true, 12 | "noImplicitThis": true, 13 | "noImplicitAny": true, 14 | "strictNullChecks": true, 15 | "noUnusedLocals": false, 16 | "experimentalDecorators": true, 17 | "newLine": "LF", 18 | "allowJs": true, 19 | "skipLibCheck": true, 20 | "esModuleInterop": true, 21 | "allowSyntheticDefaultImports": true, 22 | "strict": true, 23 | "forceConsistentCasingInFileNames": true, 24 | "suppressImplicitAnyIndexErrors": true, 25 | "module": "esnext", 26 | "moduleResolution": "node", 27 | "resolveJsonModule": true, 28 | "isolatedModules": true, 29 | "noEmit": false, 30 | "jsx": "preserve" 31 | }, 32 | "include": [ 33 | "src", "src/__tests__" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /plugins/comparable/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "dist", 4 | "target": "es5", 5 | "lib": [ 6 | "dom", 7 | "dom.iterable", 8 | "esnext" 9 | ], 10 | "sourceMap": true, 11 | "noImplicitReturns": true, 12 | "noImplicitThis": true, 13 | "noImplicitAny": true, 14 | "strictNullChecks": true, 15 | "noUnusedLocals": false, 16 | "experimentalDecorators": true, 17 | "newLine": "LF", 18 | "allowJs": true, 19 | "skipLibCheck": true, 20 | "esModuleInterop": true, 21 | "allowSyntheticDefaultImports": true, 22 | "strict": true, 23 | "forceConsistentCasingInFileNames": true, 24 | "suppressImplicitAnyIndexErrors": true, 25 | "module": "esnext", 26 | "moduleResolution": "node", 27 | "resolveJsonModule": true, 28 | "isolatedModules": true, 29 | "noEmit": false, 30 | "jsx": "preserve" 31 | }, 32 | "include": [ 33 | "src", "src/__tests__" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /plugins/devtools/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "dist", 4 | "target": "es5", 5 | "lib": [ 6 | "dom", 7 | "dom.iterable", 8 | "esnext" 9 | ], 10 | "sourceMap": true, 11 | "noImplicitReturns": true, 12 | "noImplicitThis": true, 13 | "noImplicitAny": true, 14 | "strictNullChecks": true, 15 | "noUnusedLocals": false, 16 | "experimentalDecorators": true, 17 | "newLine": "LF", 18 | "allowJs": true, 19 | "skipLibCheck": true, 20 | "esModuleInterop": true, 21 | "allowSyntheticDefaultImports": true, 22 | "strict": true, 23 | "forceConsistentCasingInFileNames": true, 24 | "suppressImplicitAnyIndexErrors": true, 25 | "module": "esnext", 26 | "moduleResolution": "node", 27 | "resolveJsonModule": true, 28 | "isolatedModules": true, 29 | "noEmit": false, 30 | "jsx": "preserve" 31 | }, 32 | "include": [ 33 | "src", "src/__tests__" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /plugins/identifiable/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "dist", 4 | "target": "es5", 5 | "lib": [ 6 | "dom", 7 | "dom.iterable", 8 | "esnext" 9 | ], 10 | "sourceMap": true, 11 | "noImplicitReturns": true, 12 | "noImplicitThis": true, 13 | "noImplicitAny": true, 14 | "strictNullChecks": true, 15 | "noUnusedLocals": false, 16 | "experimentalDecorators": true, 17 | "newLine": "LF", 18 | "allowJs": true, 19 | "skipLibCheck": true, 20 | "esModuleInterop": true, 21 | "allowSyntheticDefaultImports": true, 22 | "strict": true, 23 | "forceConsistentCasingInFileNames": true, 24 | "suppressImplicitAnyIndexErrors": true, 25 | "module": "esnext", 26 | "moduleResolution": "node", 27 | "resolveJsonModule": true, 28 | "isolatedModules": true, 29 | "noEmit": false, 30 | "jsx": "preserve" 31 | }, 32 | "include": [ 33 | "src", "src/__tests__" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /plugins/localstored/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "dist", 4 | "target": "es5", 5 | "lib": [ 6 | "dom", 7 | "dom.iterable", 8 | "esnext" 9 | ], 10 | "sourceMap": true, 11 | "noImplicitReturns": true, 12 | "noImplicitThis": true, 13 | "noImplicitAny": true, 14 | "strictNullChecks": true, 15 | "noUnusedLocals": false, 16 | "experimentalDecorators": true, 17 | "newLine": "LF", 18 | "allowJs": true, 19 | "skipLibCheck": true, 20 | "esModuleInterop": true, 21 | "allowSyntheticDefaultImports": true, 22 | "strict": true, 23 | "forceConsistentCasingInFileNames": true, 24 | "suppressImplicitAnyIndexErrors": true, 25 | "module": "esnext", 26 | "moduleResolution": "node", 27 | "resolveJsonModule": true, 28 | "isolatedModules": true, 29 | "noEmit": false, 30 | "jsx": "preserve" 31 | }, 32 | "include": [ 33 | "src", "src/__tests__" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /plugins/serializable/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "dist", 4 | "target": "es5", 5 | "lib": [ 6 | "dom", 7 | "dom.iterable", 8 | "esnext" 9 | ], 10 | "sourceMap": true, 11 | "noImplicitReturns": true, 12 | "noImplicitThis": true, 13 | "noImplicitAny": true, 14 | "strictNullChecks": true, 15 | "noUnusedLocals": false, 16 | "experimentalDecorators": true, 17 | "newLine": "LF", 18 | "allowJs": true, 19 | "skipLibCheck": true, 20 | "esModuleInterop": true, 21 | "allowSyntheticDefaultImports": true, 22 | "strict": true, 23 | "forceConsistentCasingInFileNames": true, 24 | "suppressImplicitAnyIndexErrors": true, 25 | "module": "esnext", 26 | "moduleResolution": "node", 27 | "resolveJsonModule": true, 28 | "isolatedModules": true, 29 | "noEmit": false, 30 | "jsx": "preserve" 31 | }, 32 | "include": [ 33 | "src", "src/__tests__" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /plugins/snapshotable/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "dist", 4 | "target": "es5", 5 | "lib": [ 6 | "dom", 7 | "dom.iterable", 8 | "esnext" 9 | ], 10 | "sourceMap": true, 11 | "noImplicitReturns": true, 12 | "noImplicitThis": true, 13 | "noImplicitAny": true, 14 | "strictNullChecks": true, 15 | "noUnusedLocals": false, 16 | "experimentalDecorators": true, 17 | "newLine": "LF", 18 | "allowJs": true, 19 | "skipLibCheck": true, 20 | "esModuleInterop": true, 21 | "allowSyntheticDefaultImports": true, 22 | "strict": true, 23 | "forceConsistentCasingInFileNames": true, 24 | "suppressImplicitAnyIndexErrors": true, 25 | "module": "esnext", 26 | "moduleResolution": "node", 27 | "resolveJsonModule": true, 28 | "isolatedModules": true, 29 | "noEmit": false, 30 | "jsx": "preserve" 31 | }, 32 | "include": [ 33 | "src", "src/__tests__" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /plugins/subscribable/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "dist", 4 | "target": "es5", 5 | "lib": [ 6 | "dom", 7 | "dom.iterable", 8 | "esnext" 9 | ], 10 | "sourceMap": true, 11 | "noImplicitReturns": true, 12 | "noImplicitThis": true, 13 | "noImplicitAny": true, 14 | "strictNullChecks": true, 15 | "noUnusedLocals": false, 16 | "experimentalDecorators": true, 17 | "newLine": "LF", 18 | "allowJs": true, 19 | "skipLibCheck": true, 20 | "esModuleInterop": true, 21 | "allowSyntheticDefaultImports": true, 22 | "strict": true, 23 | "forceConsistentCasingInFileNames": true, 24 | "suppressImplicitAnyIndexErrors": true, 25 | "module": "esnext", 26 | "moduleResolution": "node", 27 | "resolveJsonModule": true, 28 | "isolatedModules": true, 29 | "noEmit": false, 30 | "jsx": "preserve" 31 | }, 32 | "include": [ 33 | "src", "src/__tests__" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /plugins/validation/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "dist", 4 | "target": "es5", 5 | "lib": [ 6 | "dom", 7 | "dom.iterable", 8 | "esnext" 9 | ], 10 | "sourceMap": true, 11 | "noImplicitReturns": true, 12 | "noImplicitThis": true, 13 | "noImplicitAny": true, 14 | "strictNullChecks": true, 15 | "noUnusedLocals": false, 16 | "experimentalDecorators": true, 17 | "newLine": "LF", 18 | "allowJs": true, 19 | "skipLibCheck": true, 20 | "esModuleInterop": true, 21 | "allowSyntheticDefaultImports": true, 22 | "strict": true, 23 | "forceConsistentCasingInFileNames": true, 24 | "suppressImplicitAnyIndexErrors": true, 25 | "module": "esnext", 26 | "moduleResolution": "node", 27 | "resolveJsonModule": true, 28 | "isolatedModules": true, 29 | "noEmit": false, 30 | "jsx": "preserve" 31 | }, 32 | "include": [ 33 | "src", "src/__tests__" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /plugins/initializable/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "dist", 4 | "target": "es5", 5 | "lib": [ 6 | "dom", 7 | "dom.iterable", 8 | "esnext" 9 | ], 10 | "sourceMap": true, 11 | "noImplicitReturns": true, 12 | "noImplicitThis": true, 13 | "noImplicitAny": true, 14 | "strictNullChecks": true, 15 | "noUnusedLocals": false, 16 | "experimentalDecorators": true, 17 | "newLine": "LF", 18 | "allowJs": true, 19 | "skipLibCheck": true, 20 | "esModuleInterop": true, 21 | "allowSyntheticDefaultImports": true, 22 | "strict": true, 23 | "forceConsistentCasingInFileNames": true, 24 | "suppressImplicitAnyIndexErrors": true, 25 | "module": "esnext", 26 | "moduleResolution": "node", 27 | "resolveJsonModule": true, 28 | "isolatedModules": true, 29 | "noEmit": false, 30 | "jsx": "preserve" 31 | }, 32 | "include": [ 33 | "src", "src/__tests__" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /docs/index/docs/30x-writing-an-extension.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: writing-extension 3 | title: Writing your own extension 4 | sidebar_label: Writing an extension 5 | --- 6 | 7 | import { PreviewSample } from '../src/PreviewSample' 8 | 9 | An extension is effectively a factory of a set of callbacks. All callbacks are optional. 10 | 11 | `onCreate` callback returns implementation for extension methods and properties which are added to a State object, where this extension is activated. If your extension does not add any properties or methods, do not provide `onCreate` callback or return `{}` from it. 12 | 13 | Here is an example of an extension which has got all possible callbacks and prints console logs when callbacks are called. It also defines an extension method and an extension property. The example is relatively long, because we provided extensive comments and mentioned other available capabilities, 14 | which we did not use in this instance. 15 | 16 | For more information, check out how the existing standard plugins are implemented. In case of any issues, just raise a ticket on Github. 17 | 18 |Open console to see the subscription effect
17 |Counter A: {state.a.value}
18 |Counter B: {state.b.value}
19 | 22 | 25 | 26 | } 27 | 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019-2022 Andrey Konstantinov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/demos/todolist/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Andrey 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /plugins/clonable/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019-2022 Andrey Konstantinov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /plugins/comparable/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019-2022 Andrey Konstantinov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /plugins/devtools/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019-2022 Andrey Konstantinov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /plugins/logged/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019-2022 Andrey Konstantinov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /plugins/validation/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019-2022 Andrey Konstantinov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /plugins/broadcasted/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019-2022 Andrey Konstantinov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /plugins/identifiable/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019-2022 Andrey Konstantinov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /plugins/initializable/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019-2022 Andrey Konstantinov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /plugins/localstored/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019-2022 Andrey Konstantinov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /plugins/serializable/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019-2022 Andrey Konstantinov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /plugins/snapshotable/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019-2022 Andrey Konstantinov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /plugins/subscribable/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019-2022 Andrey Konstantinov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/index/src/examples/performance-demo-large-form.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { useHookstate, State } from '@hookstate/core'; 3 | 4 | export const ExampleComponent = () => { 5 | const state = useHookstate(Array.from(Array(5000).keys()).map(i => `Field #${i + 1} value`)); 6 | return <> 7 |17 | Last render at: {(new Date()).toISOString()} scopedState.set(e.target.value)} 20 | /> 21 |
22 | } 23 | 24 | function JsonDump(props: { state: State
27 | Last render at: {(new Date()).toISOString()} (JSON dump of the first 10 fields)
28 | :
{JSON.stringify(scopedState.get().slice(0, 10), undefined, 4)}
29 |
23 | taskState.name.set(e.target.value)} 26 | /> 27 |
28 | })} 29 | 32 | 33 | } 34 | -------------------------------------------------------------------------------- /docs/demos/strictmode/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@hookstate/strictmode", 3 | "version": "4.0.0-rc3", 4 | "private": true, 5 | "dependencies": { 6 | "@hookstate/core": "workspace:*", 7 | "@testing-library/jest-dom": "^5.16.4", 8 | "@testing-library/react": "^13.3.0", 9 | "@testing-library/user-event": "^14.2.1", 10 | "@types/jest": "^28.1.4", 11 | "@types/node": "^18.0.3", 12 | "@types/react": "^18.0.15", 13 | "@types/react-dom": "^18.0.6", 14 | "npm-check-updates": "15.2.1", 15 | "react": "^18.2.0", 16 | "react-dom": "^18.2.0", 17 | "react-scripts": "5.0.1", 18 | "serve": "14.1.2", 19 | "typescript": "^4.7.4", 20 | "web-vitals": "^2.1.4" 21 | }, 22 | "scripts": { 23 | "start": "react-scripts start", 24 | "build": "react-scripts build", 25 | "serve": "serve -s build", 26 | "test": "react-scripts test", 27 | "eject": "react-scripts eject", 28 | "update:deps": "ncu -u" 29 | }, 30 | "eslintConfig": { 31 | "extends": [ 32 | "react-app", 33 | "react-app/jest" 34 | ] 35 | }, 36 | "browserslist": { 37 | "production": [ 38 | ">0.2%", 39 | "not dead", 40 | "not op_mini all" 41 | ], 42 | "development": [ 43 | "last 1 chrome version", 44 | "last 1 firefox version", 45 | "last 1 safari version" 46 | ] 47 | } 48 | } -------------------------------------------------------------------------------- /docs/index/src/examples/with-use-effect.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { useHookstate } from '@hookstate/core'; 3 | 4 | export const ExampleComponent = () => { 5 | const state = useHookstate<{ field1: boolean, field2: boolean, field3?: {} }>({ 6 | field1: false, 7 | field2: false, 8 | field3: undefined 9 | }); 10 | React.useEffect(() => { 11 | console.log('#1 effect called') 12 | if (state.field1.value && state.field3.value) { 13 | console.log('#1 effect called: if => true') 14 | } 15 | }, [state.field1, state.field3]) 16 | 17 | React.useEffect(() => { 18 | console.log('#2 effect called') 19 | if (state.field2.value && state.field3.value) { 20 | console.log('#2 effect called: if => true') 21 | } 22 | }, [state.field2, state.field3]) 23 | 24 | let hide = { stealth: true } 25 | console.log(`rendered: field1: ${state.field1.get(hide)}, field2: ${state.field2.get(hide)}, field3: ${state.field3.get(hide)}`) 26 | 27 | return <> 28 |Checkout console logs when the effect callback runs
29 |30 |
31 | 32 | 33 | } -------------------------------------------------------------------------------- /docs/index/.netlify-redirects: -------------------------------------------------------------------------------- 1 | # The following is neccessary to reduce site duplication and improve SEO result 2 | # Redirect default Netlify subdomain to primary domain 3 | https://hookstate.netlify.com/* https://hookstate.js.org/:splat 301! 4 | 5 | # version.json is cached in the bundle, but checkline path is unknown for the bundle 6 | # this path is used by the app to check internet connectivity 7 | /checkline /version.json 200 8 | 9 | /demo-todolist/* /docs/getting-started 200 10 | /demo/* /docs/getting-started 200 11 | 12 | # route old code sample links: 13 | /global-getting-started /docs/global-state 14 | /global-getting-started-interface /docs/exporting-state 15 | /local-getting-started /docs/local-state 16 | /local-complex-from-documentation /docs/scoped-state 17 | /local-async-state /docs/asynchronous-state 18 | /local-complex-tree-structure /docs/recursive-state 19 | /performance-demo-large-table /docs/performance-frequent-updates 20 | /performance-demo-large-form /docs/performance-large-state 21 | /global-multiple-consumers-statefragment /docs/using-without-statehook 22 | /plugin-initial /docs/extensions-snapshotable 23 | /plugin-initial-statefragment /docs/extensions-snapshotable 24 | /plugin-touched /docs/extensions-snapshotable 25 | /plugin-persistence /docs/extensions-persistence 26 | /docs/extensions-persistence /docs/extensions-localstored 27 | /plugin-validation /docs/extensions-validation 28 | /plugin-untracked /docs/extensions 29 | /docs/extensions-touched /docs/extensions 30 | 31 | # the application handles routes internally, including non-existing pages 32 | /* /index.html 200 33 | -------------------------------------------------------------------------------- /docs/index/sidebars.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2017-present, Facebook, Inc. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | module.exports = { 9 | someSidebar: { 10 | Introduction: [ 11 | 'getting-started', 12 | 'migrating-to-v4', 13 | 'global-state', 14 | 'local-state', 15 | 'nested-state', 16 | 'scoped-state', 17 | 'nullable-state', 18 | 'asynchronous-state', 19 | 'recursive-state', 20 | 'exporting-state', 21 | 'state-with-non-json-objects', 22 | 'state-with-useeffect', 23 | 'state-without-usestate', 24 | 'server-side-rendering', 25 | ], 26 | Performance: [ 27 | 'performance-intro', 28 | 'performance-large-state', 29 | 'performance-frequent-updates', 30 | 'performance-batched-updates', 31 | 'performance-preact', 32 | ], 33 | Extensions: [ 34 | 'extensions-overview', 35 | 'extensions-validation', 36 | 'extensions-snapshotable', 37 | 'extensions-broadcasted', 38 | 'extensions-localstored', 39 | 'extensions-identifiable', 40 | 'extensions-subscribable', 41 | 'writing-extension' 42 | ], 43 | 'Development Tools': ['devtools'], 44 | 'API Reference': [ 45 | 'typedoc-hookstate-core', 46 | 'exceptions' 47 | ], 48 | }, 49 | }; 50 | -------------------------------------------------------------------------------- /docs/demos/todolist/src/components/SettingsState.ts: -------------------------------------------------------------------------------- 1 | import { hookstate, useHookstate } from '@hookstate/core'; 2 | import { devtools } from '@hookstate/devtools'; 3 | 4 | const settingsState = hookstate({ 5 | isEditableInline: true, 6 | isScopedUpdateEnabled: true, 7 | isHighlightUpdatesEnabled: true 8 | }, devtools({ key: 'settings' })) 9 | 10 | export function useSettingsState() { 11 | const state = useHookstate(settingsState) 12 | 13 | // This function wraps the state by an interface, 14 | // i.e. the state link is not accessible directly outside of this module. 15 | // The state for tasks in TasksState.ts exposes the state directly. 16 | // Both options are valid and you need to use one or another, 17 | // depending on your circumstances. Apply your engineering judgement 18 | // to choose the best option. If unsure, exposing the state directly 19 | // like it is done in the TasksState.ts is a safe bet. 20 | return ({ 21 | get isEditableInline() { 22 | return state.isEditableInline.get() 23 | }, 24 | toggleEditableInline() { 25 | state.isEditableInline.set(p => !p) 26 | }, 27 | get isScopedUpdateEnabled() { 28 | return state.isScopedUpdateEnabled.get() 29 | }, 30 | toggleScopedUpdate() { 31 | state.isScopedUpdateEnabled.set(p => !p) 32 | }, 33 | get isHighlightUpdateEnabled() { 34 | return state.isHighlightUpdatesEnabled.get() 35 | }, 36 | toggleHighlightUpdate() { 37 | state.isHighlightUpdatesEnabled.set(p => !p) 38 | } 39 | }) 40 | } 41 | -------------------------------------------------------------------------------- /docs/demos/todolist/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TasksViewer } from './components/TasksViewer'; 3 | import { SettingsViewer } from './components/SettingsViewer'; 4 | import { TasksTotal } from './components/TasksTotal'; 5 | 6 | const App: React.FC = () => { 7 | return ( 8 |
9 |
10 |
43 |
44 |
45 |
46 | );
47 | }
48 |
49 | export default App;
50 |
--------------------------------------------------------------------------------
/docs/index/docs/08-using-without-statehook.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: state-without-usestate
3 | title: Using state without useHookstate hook
4 | sidebar_label: Using state without useHookstate
5 | ---
6 |
7 | import { PreviewSample } from '../src/PreviewSample'
8 |
9 | You can use Hookstate without a hook. It is particularly useful for integration with old class-based React components.
10 | It works with [global](./global-state), [local](./local-state), [nested](./nested-state) and [scoped](./scoped-state) states the same way.
11 |
12 | The following example demonstrates how to use a global state without [useHookstate](typedoc-hookstate-core#useHookstate) hook:
13 |
14 | 2 | Hookstate 3 |
4 | 5 |6 | The most straightforward, extensible and incredibly fast state management that is based on React state hook. 7 |
8 |9 | 10 |
11 | Why? • 12 | Docs / Samples • 13 | Demo application • 14 | Extensions • 15 | Release notes 16 |
17 | 18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | 
36 |
37 |
38 | 
39 |
40 |
24 | {settingsState.isHighlightUpdateEnabled &&
25 |
32 | }
33 | {tasksState.promised ?
34 | <> :
35 |
46 | }
--------------------------------------------------------------------------------
/docs/index/docs/05-async-state.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: asynchronous-state
3 | title: Asynchronous state
4 | sidebar_label: Asynchronous state
5 | ---
6 |
7 | import { PreviewSample } from '../src/PreviewSample'
8 |
9 | The root state can be set to a promise value, either as an initial value for [hookstate](typedoc-hookstate-core#hookstate)/[useHookstate](typedoc-hookstate-core#usehookstate) or as a subsequent value via [State.set](typedoc-hookstate-core#set) method.
10 |
11 | ## Checking if state is loading
12 |
13 | While a promise is not resolved or rejected almost any operation will result in an exception. To check if underlying promise is resolved or rejected, use [State.promised](typedoc-hookstate-core#readonly-promised).
14 | To check if underlying promise is rejected, use [State.error](typedoc-hookstate-core#readonly-error). For example:
15 |
16 |
40 |
44 | }
45 | Total tasks: {tasksState.length}
41 | Done: {tasksState.filter(i => i.done.value).length}
42 | Remaining: {tasksState.filter(i => !i.done.value).length}
43 | State is loaded: {state.value}
47 | } 48 | ``` 49 | -------------------------------------------------------------------------------- /docs/demos/strictmode/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 |
15 |
55 | }
--------------------------------------------------------------------------------
/core/src/__tests__/Error.tsx:
--------------------------------------------------------------------------------
1 | import { useHookstate } from '../';
2 |
3 | import { renderHook } from '@testing-library/react-hooks';
4 |
5 | test('error: should not allow set to another state value', async () => {
6 | const state1 = renderHook(() => {
7 | return useHookstate({ prop1: [0, 0] })
8 | });
9 |
10 | const state2 = renderHook(() => {
11 | return useHookstate({ prop2: [0, 0] })
12 | });
13 |
14 | expect(() => {
15 | state2.result.current.prop2.set(p => state1.result.current.get().prop1);
16 | // tslint:disable-next-line: max-line-length
17 | }).toThrow(`Error: HOOKSTATE-102 [path: /prop2]. See https://hookstate.js.org/docs/exceptions#hookstate-102`);
18 | });
19 |
20 | test('error: should not allow create state from another state value', async () => {
21 | const state1 = renderHook(() => {
22 | return useHookstate({ prop1: [0, 0] })
23 | });
24 |
25 | const state2 = renderHook(() => {
26 | return useHookstate(state1.result.current.get().prop1)
27 | })
28 |
29 | expect(state2.result.error?.message)
30 | // tslint:disable-next-line: max-line-length
31 | .toEqual(`Error: HOOKSTATE-101 [path: /]. See https://hookstate.js.org/docs/exceptions#hookstate-101`)
32 | });
33 |
34 | test('error: should not allow create state from another state value (nested)', async () => {
35 | const state1 = renderHook(() => {
36 | return useHookstate({ prop1: [0, 0] })
37 | });
38 |
39 | const state2 = renderHook(() => {
40 | return useHookstate(state1.result.current)
41 | })
42 |
43 | const state3 = renderHook(() => {
44 | return useHookstate(state2.result.current.prop1.get())
45 | })
46 |
47 | expect(state3.result.error?.message)
48 | // tslint:disable-next-line: max-line-length
49 | .toEqual(`Error: HOOKSTATE-101 [path: /]. See https://hookstate.js.org/docs/exceptions#hookstate-101`)
50 | });
51 |
52 | test('error: should not allow serialization of statelink', async () => {
53 | const state1 = renderHook(() => {
54 | return useHookstate({ prop1: [0, 0] })
55 | });
56 |
57 | expect(() => JSON.stringify(state1))
58 | .toThrow('Error: HOOKSTATE-109 [path: /]. See https://hookstate.js.org/docs/exceptions#hookstate-109')
59 | });
60 |
--------------------------------------------------------------------------------
/docs/index/docs/40-devtools-overview.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: devtools
3 | title: Development Tools Overview
4 | sidebar_label: Overview
5 | ---
6 |
7 | ## Setting up
8 |
9 | * Devtools is an extension. Hookstate-4 requires it to be added explicitly to a state, by providing it as a second argument to `hookstate` or `useHookstate` functions.
10 | * If a state does not have `identifiable` extension attached as well, `devtools` extension should be initialized with the `key` option.
11 |
12 | ```tsx
13 | import { devtools } from '@hookstate/devtools'
14 | let state = hookstate(value, devtools({ key: 'my-state-label' }))
15 | ```
16 |
17 | ```tsx
18 | import { identifiable } from '@hookstate/identifiable'
19 | import { devtools } from '@hookstate/devtools'
20 | let state = hookstate(value, extend(identifiable('my-state-label'), devtools()))
21 | ```
22 |
23 | * Install [Chrome browser's extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en) and reload your app.
24 |
25 | There is no impact on performance in production. Development tools are activated only when the browser's extension is opened.
26 |
27 | ## Demo
28 |
29 | [Demo application](https://github.com/avkonst/hookstate/tree/master/docs/demos/todolist) has got DevTools integrated. Try it out!
30 |
31 | ## Set state value from the development tools
32 |
33 | You can set new value for a state at root or at a specific path using the development tools.
34 | Put content for an action in the 'Dispatch' form and click 'Dispatch' button.
35 |
36 | The easiest way to learn the content of a dispatch action is to inspect an action data for the state update, triggered within an application.
37 |
38 | ## Toggle breakpoint on state update
39 |
40 | Trigger a dispatch action from the Redux development tools with the following content:
41 |
42 | ```tsx
43 | {
44 | type: 'BREAKPOINT',
45 | }
46 | ```
47 |
48 | Now any event, which sets a state, will trigger a breakpoint in the browser.
49 |
50 | To disable the breakpoint, repeat the same dispatch action again.
51 |
52 | ## Pausing/Unpausing monitoring
53 |
54 | Click 'Pause recording' button (bottom row) in the development tools.
55 |
56 | ## Persist state on page reload
57 |
58 | Click 'Persist' button (bottom row) in the development tools.
59 |
--------------------------------------------------------------------------------
/docs/index/src/examples/local-complex-tree-structure.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useHookstate, State } from '@hookstate/core';
3 |
4 | interface Node { name: string; children?: Node[] }
5 |
6 | export const ExampleComponent = () => {
7 | const state = useHookstate
16 |
28 |
17 | settingsState.toggleEditableInline()}
22 | />
23 |
24 |
25 | edit inline
26 |
27 |
29 |
41 |
30 | settingsState.toggleScopedUpdate()}
35 | />
36 |
37 |
38 | use scoped state
39 |
40 |
42 |
54 |
43 | settingsState.toggleHighlightUpdate()}
48 | />
49 |
50 |
51 | highlight updates
52 |
53 | 31 | state.set(e.target.value)} 34 | /> Last render at: {(new Date()).toISOString()} 35 |
36 | 37 | } 38 | 39 | function NodeListEditor(props: { nodes: State
44 | {state.ornull && state.ornull.map((nodeState: State, i) =>
45 |
54 | }
55 |
56 | function JsonDump(props: { state: State
46 |
49 | )}
50 |
53 |
61 | Current state: {JSON.stringify(state.value)}
62 | Last render at: {(new Date()).toISOString()}
63 |
19 | Is this task list valid?: {state.valid().toString()}
20 | Is this task list valid (ignoring nested errors)?:
21 | {state.valid({ depth: 1 }).toString()}
22 | What are the errors and warnings?: {JSON.stringify(state.errors(), null, 4)}
23 | What is the first error or warning?: {JSON.stringify(state.firstError(), null, 4)}
24 | What is the first error (ignoring warnings and nested errors)?: {
25 | JSON.stringify(state.firstError(
26 | i => i.severity === 'error', 1), null, 4)}
27 |
33 | Is this task valid?: {taskState.valid().toString()}
34 | Is the name of the task valid?: {taskState.name.valid().toString()}
35 | This task validation errors and warnings: {JSON.stringify(taskState.errors())}
36 | taskState.name.set(e.target.value)}
39 | />
40 |