{"_id":"signal-components","_rev":"26-a45365c256d0d7e1eccc6b267fd21c4d","name":"signal-components","description":"**Signal-components is the easy way to integrate real reactivity into your React app.**","dist-tags":{"latest":"0.12.0","alpha":"0.12.0-alpha.0"},"versions":{"0.0.1":{"name":"signal-components","version":"0.0.1","keywords":[],"author":"","license":"ISC","_id":"signal-components@0.0.1","maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"dist":{"shasum":"1a9527282e935e9d8a894ec80c902ccd287393f4","tarball":"https://registry.npmjs.org/signal-components/-/signal-components-0.0.1.tgz","fileCount":1,"integrity":"sha512-vxEjaNQO4OdiOtaDut5+gyYJNBI9j7fATktXmPEV+DyCPksR3F3Iv/C4Q/j9lk584F1a7/LYN3qxsIBjPGdCTQ==","signatures":[{"sig":"MEUCIQCiA1qPUOWrzWFGCgqlUBFs/I86Cjbn0bnMTL6VqX1IFAIgEp/m84vzXXuR02McCPuFiMH3h7IAnksLwPofQfi/XJk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231},"main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"xavescor","email":"xavescor@gmail.com"},"_npmVersion":"10.7.0","directories":{},"_nodeVersion":"20.11.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/signal-components_0.0.1_1714784224749_0.2921082249927942","host":"s3://npm-registry-packages"}},"0.0.2":{"name":"signal-components","version":"0.0.2","keywords":[],"author":"","license":"MIT","_id":"signal-components@0.0.2","maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"dist":{"shasum":"fe53824695eb5fb852079b4775bfe72bf2e0e5e5","tarball":"https://registry.npmjs.org/signal-components/-/signal-components-0.0.2.tgz","fileCount":8,"integrity":"sha512-dts3cD7AK/NBdHTXG6Mzha2r058+o0AerZyZJFdUJR3m8pnXIZ+4XyvmjG9k/+G9NbdQYmagDekmjyfP4woPFQ==","signatures":[{"sig":"MEUCIQDyyOa5AETv5OkxM7LEZtR8GWpI8lWZvyckymyr7+zvzgIgO4k2tDkZouRXG66oikL1q1nqu6uVS8Yh9V/MGYgOxcs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13063},"main":"./dist/index.cjs","type":"module","_from":"file:signal-components-0.0.2.tgz","types":"./dist/index.d.ts","module":"./dist/index.module.mjs","exports":"./dist/index.modern.mjs","scripts":{"test":"vitest --config vitest.config.ts","build":"microbundle -f modern,esm,cjs"},"_npmUser":{"name":"xavescor","email":"xavescor@gmail.com"},"_resolved":"/private/var/folders/8s/m_3by_0n0lg0rc65l7ngrk9w0000gn/T/53bccb7db1be67e1e24adaa24cd5d615/signal-components-0.0.2.tgz","_integrity":"sha512-dts3cD7AK/NBdHTXG6Mzha2r058+o0AerZyZJFdUJR3m8pnXIZ+4XyvmjG9k/+G9NbdQYmagDekmjyfP4woPFQ==","_npmVersion":"9.7.2","description":"","directories":{},"_nodeVersion":"18.16.1","dependencies":{"react":"^18.2.0","@reatom/core":"^3.8.0","@reatom/npm-react":"^3.8.6"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.0.0","vitest":"^1.6.0","prettier":"^3.2.5","react-dom":"^18.2.0","typescript":"^5.4.5","@types/react":"^18.3.2","@reatom/testing":"^3.4.5","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.2.1","@testing-library/react":"^15.0.7","@testing-library/jest-dom":"^6.4.5"},"_npmOperationalInternal":{"tmp":"tmp/signal-components_0.0.2_1716178220120_0.4210198889918242","host":"s3://npm-registry-packages"}},"0.1.0":{"name":"signal-components","version":"0.1.0","keywords":[],"author":"","license":"MIT","_id":"signal-components@0.1.0","maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"dist":{"shasum":"7fe229cd067b37dc4ac6d0fa8cc1b326e9b61d65","tarball":"https://registry.npmjs.org/signal-components/-/signal-components-0.1.0.tgz","fileCount":9,"integrity":"sha512-dq4GkyhwYO83fuvsCqN7C1mZ3WSzQy5cXjTbUtSSeCvIGqGWylCAiVkFmr86dfpBVAu1mGb/M3JbKnfVX2e6Qg==","signatures":[{"sig":"MEQCIBsXGXzEunL8bH+db4RWUjF0sl7Zj7mx8NfBm86WkoEsAiBFf48M0o2nnYCfqwtRd+GpM7pzpvDYeFYmpmMYws4gVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20052},"main":"./dist/index.cjs","type":"module","_from":"file:signal-components-0.1.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.module.mjs","exports":"./dist/index.modern.mjs","scripts":{"test":"vitest --config vitest.config.ts","build":"microbundle -f modern,esm,cjs"},"_npmUser":{"name":"xavescor","email":"xavescor@gmail.com"},"_resolved":"/private/var/folders/8s/m_3by_0n0lg0rc65l7ngrk9w0000gn/T/fbe06322eaf13fd7beffa61f1e820bba/signal-components-0.1.0.tgz","_integrity":"sha512-dq4GkyhwYO83fuvsCqN7C1mZ3WSzQy5cXjTbUtSSeCvIGqGWylCAiVkFmr86dfpBVAu1mGb/M3JbKnfVX2e6Qg==","_npmVersion":"9.7.2","description":"**Signal-components is the easy way to integrate real reactivity into your React app.**","directories":{},"_nodeVersion":"18.16.1","dependencies":{"react":"^18.2.0","@reatom/core":"^3.8.0","@reatom/npm-react":"^3.8.6"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.0.0","vitest":"^1.6.0","prettier":"^3.2.5","react-dom":"^18.2.0","typescript":"^5.4.5","@types/react":"^18.3.2","@reatom/testing":"^3.4.5","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.2.1","@testing-library/react":"^15.0.7","@testing-library/jest-dom":"^6.4.5"},"_npmOperationalInternal":{"tmp":"tmp/signal-components_0.1.0_1716230347649_0.6147456255956725","host":"s3://npm-registry-packages"}},"0.2.0":{"name":"signal-components","version":"0.2.0","keywords":[],"author":"","license":"MIT","_id":"signal-components@0.2.0","maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"dist":{"shasum":"bca2078e356d8889a2a32bbff1f07ec8e10a0c73","tarball":"https://registry.npmjs.org/signal-components/-/signal-components-0.2.0.tgz","fileCount":9,"integrity":"sha512-b6scFMz3yXOdkrdvd17G/4s2RxNvp/aL1MltmO9Dc2qyqE1BNX3jRsmEWZi2WVCeECOrI2HKVDN1Pm1228Yf3A==","signatures":[{"sig":"MEQCIEqc36cI5MiAhuhgA7LdTQi5M+y9LhT7mssi2DpDsltaAiBXjICp4Oi+Fhxd8yhFH3X1gR9mSx/1ObsjTWz7viXS5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22126},"main":"./dist/index.cjs","type":"module","_from":"file:signal-components-0.2.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.module.mjs","exports":"./dist/index.modern.mjs","scripts":{"test":"vitest --config vitest.config.ts","build":"microbundle -f modern,esm,cjs"},"_npmUser":{"name":"xavescor","email":"xavescor@gmail.com"},"_resolved":"/private/var/folders/8s/m_3by_0n0lg0rc65l7ngrk9w0000gn/T/7a6108489e470d2a441e1814b4e62376/signal-components-0.2.0.tgz","_integrity":"sha512-b6scFMz3yXOdkrdvd17G/4s2RxNvp/aL1MltmO9Dc2qyqE1BNX3jRsmEWZi2WVCeECOrI2HKVDN1Pm1228Yf3A==","_npmVersion":"9.7.2","description":"**Signal-components is the easy way to integrate real reactivity into your React app.**","directories":{},"_nodeVersion":"18.16.1","dependencies":{"react":"^18.2.0","@reatom/core":"^3.8.0","@reatom/npm-react":"^3.8.6"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.0.0","vitest":"^1.6.0","prettier":"^3.2.5","react-dom":"^18.2.0","typescript":"^5.4.5","@types/react":"^18.3.2","@reatom/testing":"^3.4.5","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.2.1","@testing-library/react":"^15.0.7","@testing-library/jest-dom":"^6.4.5"},"_npmOperationalInternal":{"tmp":"tmp/signal-components_0.2.0_1716349048355_0.16334135553510643","host":"s3://npm-registry-packages"}},"0.3.0":{"name":"signal-components","version":"0.3.0","keywords":[],"author":"","license":"MIT","_id":"signal-components@0.3.0","maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"dist":{"shasum":"0b8b15e570ac90e79dadacbaad4ddcbf348de5a6","tarball":"https://registry.npmjs.org/signal-components/-/signal-components-0.3.0.tgz","fileCount":12,"integrity":"sha512-2mmdbGGvio9E1b7G++N3lHE6deLZj+pyHTmWjPxC4mmLuqjOo+NUPorssearL+G3yjwFsF0S6qpbPUOeT+BFIQ==","signatures":[{"sig":"MEQCIBQNkrgA7y5a46WtqW1IuBOgRs1L7GDtLXlS61Y/NuY2AiBdz/LjMJ2HOJJ871aII8iC+izxlTakWY9QvHVUl//Rdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36428},"main":"./dist/index.cjs","type":"module","_from":"file:signal-components-0.3.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.module.mjs","exports":"./dist/index.modern.mjs","scripts":{"test":"vitest --config vitest.config.ts","build":"microbundle -f modern,esm,cjs"},"_npmUser":{"name":"xavescor","email":"xavescor@gmail.com"},"_resolved":"/private/var/folders/8s/m_3by_0n0lg0rc65l7ngrk9w0000gn/T/ce5170995fe23c8a40d942d77e093c70/signal-components-0.3.0.tgz","_integrity":"sha512-2mmdbGGvio9E1b7G++N3lHE6deLZj+pyHTmWjPxC4mmLuqjOo+NUPorssearL+G3yjwFsF0S6qpbPUOeT+BFIQ==","_npmVersion":"9.7.2","description":"**Signal-components is the easy way to integrate real reactivity into your React app.**","directories":{},"_nodeVersion":"18.16.1","dependencies":{"react":"^18.2.0","@reatom/core":"^3.8.0","@reatom/npm-react":"^3.8.6"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.0.0","vitest":"^1.6.0","prettier":"^3.2.5","react-dom":"^18.2.0","typescript":"^5.4.5","@types/react":"^18.3.2","@reatom/testing":"^3.4.5","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.2.1","@testing-library/react":"^15.0.7","@testing-library/jest-dom":"^6.4.5"},"_npmOperationalInternal":{"tmp":"tmp/signal-components_0.3.0_1716435378140_0.9057359493305872","host":"s3://npm-registry-packages"}},"0.3.1":{"name":"signal-components","version":"0.3.1","keywords":[],"author":"","license":"MIT","_id":"signal-components@0.3.1","maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"homepage":"https://github.com/XaveScor/signal-components#readme","bugs":{"url":"https://github.com/XaveScor/signal-components/issues"},"dist":{"shasum":"24cbfbb410cd41e0d82ad7af303458d9bfb2f969","tarball":"https://registry.npmjs.org/signal-components/-/signal-components-0.3.1.tgz","fileCount":12,"integrity":"sha512-7FB4W1I0ZV0KTNxSM/6uhEcgTndy80HSmuOnEQeqrYu2DklB0l1/yxxza/N0PcjjaJMS4imzPRiD/GXHmHjGYg==","signatures":[{"sig":"MEUCIEj5MBbfxb0wcWSDIDV9TP5rYj0Z8lLMO+n+aZroEtJTAiEAowqhWdtcjYZLyNMEVsCaTxiCjQ4YEcPb3FQT1rPf7jM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36551},"main":"./dist/index.cjs","type":"module","_from":"file:signal-components-0.3.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.module.mjs","exports":"./dist/index.modern.mjs","scripts":{"test":"vitest --config vitest.config.ts","build":"microbundle -f modern,esm,cjs"},"_npmUser":{"name":"xavescor","email":"xavescor@gmail.com"},"_resolved":"/private/var/folders/8s/m_3by_0n0lg0rc65l7ngrk9w0000gn/T/26cec5c835ca75ccf2dcb1b257446c11/signal-components-0.3.1.tgz","_integrity":"sha512-7FB4W1I0ZV0KTNxSM/6uhEcgTndy80HSmuOnEQeqrYu2DklB0l1/yxxza/N0PcjjaJMS4imzPRiD/GXHmHjGYg==","repository":{"url":"git+ssh://git@github.com/XaveScor/signal-components.git","type":"git"},"_npmVersion":"9.7.2","description":"**Signal-components is the easy way to integrate real reactivity into your React app.**","directories":{},"_nodeVersion":"18.16.1","dependencies":{"react":"^18.2.0","@reatom/core":"^3.8.0","@reatom/npm-react":"^3.8.6"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.0.0","vitest":"^1.6.0","prettier":"^3.2.5","react-dom":"^18.2.0","typescript":"^5.4.5","@types/react":"^18.3.2","@reatom/testing":"^3.4.5","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.2.1","@testing-library/react":"^15.0.7","@testing-library/jest-dom":"^6.4.5"},"_npmOperationalInternal":{"tmp":"tmp/signal-components_0.3.1_1716437320260_0.7561701900808375","host":"s3://npm-registry-packages"}},"0.4.0":{"name":"signal-components","version":"0.4.0","keywords":[],"author":"","license":"MIT","_id":"signal-components@0.4.0","maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"homepage":"https://github.com/XaveScor/signal-components#readme","bugs":{"url":"https://github.com/XaveScor/signal-components/issues"},"dist":{"shasum":"0d5e8ec5602bea94493cee94884ba3d17a8ed860","tarball":"https://registry.npmjs.org/signal-components/-/signal-components-0.4.0.tgz","fileCount":12,"integrity":"sha512-C+X9mo6xRM5PrTtol2a2T9Xje4wKPTZsFjdje9jZZ13a1qs5H/RMLCzvFsSYLn5z54DLfcB/630zX/Elqy9oKw==","signatures":[{"sig":"MEUCIFPgSs6NvVorcevgVpt/wekMHBXSK04p0Jt9ZB1T08bLAiEA41y6T70B2JvkMpfTWqrreHSsJGQXO0Y1BgAj26X2hr0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":41535},"main":"./dist/index.cjs","type":"module","_from":"file:signal-components-0.4.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.module.mjs","exports":"./dist/index.modern.mjs","scripts":{"test":"vitest --config vitest.config.ts","build":"microbundle -f modern,esm,cjs"},"_npmUser":{"name":"xavescor","email":"xavescor@gmail.com"},"_resolved":"/private/var/folders/8s/m_3by_0n0lg0rc65l7ngrk9w0000gn/T/ad85a74f532303e3fbfb538fc2d2d086/signal-components-0.4.0.tgz","_integrity":"sha512-C+X9mo6xRM5PrTtol2a2T9Xje4wKPTZsFjdje9jZZ13a1qs5H/RMLCzvFsSYLn5z54DLfcB/630zX/Elqy9oKw==","repository":{"url":"git+ssh://git@github.com/XaveScor/signal-components.git","type":"git"},"_npmVersion":"9.7.2","description":"**Signal-components is the easy way to integrate real reactivity into your React app.**","directories":{},"_nodeVersion":"18.16.1","dependencies":{"react":"^18.2.0","@reatom/core":"^3.8.0","@reatom/npm-react":"^3.8.6"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.0.0","vitest":"^1.6.0","prettier":"^3.2.5","react-dom":"^18.2.0","typescript":"^5.4.5","@types/react":"^18.3.2","@reatom/testing":"^3.4.5","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.2.1","@testing-library/react":"^15.0.7","@testing-library/jest-dom":"^6.4.5"},"_npmOperationalInternal":{"tmp":"tmp/signal-components_0.4.0_1716942695755_0.25828553177908486","host":"s3://npm-registry-packages"}},"0.5.0":{"name":"signal-components","version":"0.5.0","keywords":[],"author":"","license":"MIT","_id":"signal-components@0.5.0","maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"homepage":"https://github.com/XaveScor/signal-components#readme","bugs":{"url":"https://github.com/XaveScor/signal-components/issues"},"dist":{"shasum":"caeaa40afd67342717f8a95e5ef2b0f4d857b8b9","tarball":"https://registry.npmjs.org/signal-components/-/signal-components-0.5.0.tgz","fileCount":13,"integrity":"sha512-USzf57fBjsTsxr6MVlEwvlGrIgtBTOvYR347a64bnw4wTuzc1JX5iXoWwxDcDe59uGOaOFQoSLdJqYbN1oOW+A==","signatures":[{"sig":"MEYCIQD8COM55OGf5jn3ylfn0FrtOa0iuVkAme5i5WcqjjO6AgIhAMzQA/N2/X4cnA0GLxtkiD0tMMoRaCgND5UVMdRj0bgg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48253},"main":"./dist/index.cjs","type":"module","_from":"file:signal-components-0.5.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.module.mjs","exports":"./dist/index.modern.mjs","scripts":{"test":"vitest --config vitest.config.ts","build":"microbundle -f modern,esm,cjs"},"_npmUser":{"name":"xavescor","email":"xavescor@gmail.com"},"_resolved":"/private/var/folders/8s/m_3by_0n0lg0rc65l7ngrk9w0000gn/T/f2b27e4cfcff2f8ab59ca0dfef9d9424/signal-components-0.5.0.tgz","_integrity":"sha512-USzf57fBjsTsxr6MVlEwvlGrIgtBTOvYR347a64bnw4wTuzc1JX5iXoWwxDcDe59uGOaOFQoSLdJqYbN1oOW+A==","repository":{"url":"git+ssh://git@github.com/XaveScor/signal-components.git","type":"git"},"_npmVersion":"9.7.2","description":"**Signal-components is the easy way to integrate real reactivity into your React app.**","directories":{},"_nodeVersion":"18.16.1","dependencies":{"react":"^18.2.0","@reatom/core":"^3.8.0","@reatom/npm-react":"^3.8.6"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.0.0","vitest":"^1.6.0","prettier":"^3.2.5","react-dom":"^18.2.0","typescript":"^5.4.5","@types/react":"^18.3.2","@reatom/testing":"^3.4.5","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.2.1","@testing-library/react":"^15.0.7","@testing-library/jest-dom":"^6.4.5"},"_npmOperationalInternal":{"tmp":"tmp/signal-components_0.5.0_1717125449830_0.023294198029047974","host":"s3://npm-registry-packages"}},"0.5.1":{"name":"signal-components","version":"0.5.1","keywords":[],"author":"","license":"MIT","_id":"signal-components@0.5.1","maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"homepage":"https://github.com/XaveScor/signal-components#readme","bugs":{"url":"https://github.com/XaveScor/signal-components/issues"},"dist":{"shasum":"30d9df225739bb36ec22b5187b276e3618b5fe9f","tarball":"https://registry.npmjs.org/signal-components/-/signal-components-0.5.1.tgz","fileCount":13,"integrity":"sha512-MelBMO2vcEaHJop34Z7B/1HYx4Oc2oDKamnXFvqQBmFWs3mR/WN0gO5CQw5rszKJ9MT4coNS46We6LnkvW1EwA==","signatures":[{"sig":"MEUCIBAZI8Y5kWPIVxQ1AyLqjsqQ/Q1RtI9IAa24NEXUqXOpAiEAkWcSZ5xuTSOBKakW/6j27vA6ekh1ooC1EQx7JdkSrYU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48930},"main":"./dist/index.cjs","type":"module","_from":"file:signal-components-0.5.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.module.mjs","exports":"./dist/index.modern.mjs","scripts":{"test":"vitest --config vitest.config.ts","build":"microbundle -f modern,esm,cjs"},"_npmUser":{"name":"xavescor","email":"xavescor@gmail.com"},"_resolved":"/private/var/folders/8s/m_3by_0n0lg0rc65l7ngrk9w0000gn/T/09a9c6b62ebca830d2900b54ceb2bc20/signal-components-0.5.1.tgz","_integrity":"sha512-MelBMO2vcEaHJop34Z7B/1HYx4Oc2oDKamnXFvqQBmFWs3mR/WN0gO5CQw5rszKJ9MT4coNS46We6LnkvW1EwA==","repository":{"url":"git+ssh://git@github.com/XaveScor/signal-components.git","type":"git"},"_npmVersion":"9.7.2","description":"**Signal-components is the easy way to integrate real reactivity into your React app.**","directories":{},"_nodeVersion":"18.16.1","dependencies":{"react":"^18.2.0","@reatom/core":"^3.8.0","@reatom/npm-react":"^3.8.6"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.0.0","vitest":"^1.6.0","prettier":"^3.2.5","react-dom":"^18.2.0","typescript":"^5.4.5","@types/react":"^18.3.2","@reatom/testing":"^3.4.5","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.2.1","@testing-library/react":"^15.0.7","@testing-library/jest-dom":"^6.4.5"},"_npmOperationalInternal":{"tmp":"tmp/signal-components_0.5.1_1717175325988_0.6110075170860509","host":"s3://npm-registry-packages"}},"0.5.2":{"name":"signal-components","version":"0.5.2","keywords":[],"author":"","license":"MIT","_id":"signal-components@0.5.2","maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"homepage":"https://github.com/XaveScor/signal-components#readme","bugs":{"url":"https://github.com/XaveScor/signal-components/issues"},"dist":{"shasum":"31ed06c138d45cb29b4becb962aa2eabe96b413e","tarball":"https://registry.npmjs.org/signal-components/-/signal-components-0.5.2.tgz","fileCount":13,"integrity":"sha512-7dpxBI+BYIqLgPDFZTwtOy9Xl+2g4D6Fln+U6h3VnG6OLNXnu+UjQ1L6uz/FpKpd8/Q4weoqXpCjyY7x1lpEdA==","signatures":[{"sig":"MEUCIQC++dA677B4ByIw1eBhRqnMYl1i+Sg9sUiaJWG2IAGGFgIgB+oVOlF5C3qbrNn978cCRGE157JVgW7OPMrw4DhN9LE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49259},"main":"./dist/index.cjs","type":"module","_from":"file:signal-components-0.5.2.tgz","types":"./dist/index.d.ts","module":"./dist/index.module.mjs","exports":"./dist/index.modern.mjs","scripts":{"test":"vitest --config vitest.config.ts","build":"microbundle -f modern,esm,cjs"},"_npmUser":{"name":"xavescor","email":"xavescor@gmail.com"},"_resolved":"/private/var/folders/8s/m_3by_0n0lg0rc65l7ngrk9w0000gn/T/386301f7d8f442739af4cabc4204b731/signal-components-0.5.2.tgz","_integrity":"sha512-7dpxBI+BYIqLgPDFZTwtOy9Xl+2g4D6Fln+U6h3VnG6OLNXnu+UjQ1L6uz/FpKpd8/Q4weoqXpCjyY7x1lpEdA==","repository":{"url":"git+ssh://git@github.com/XaveScor/signal-components.git","type":"git"},"_npmVersion":"9.7.2","description":"**Signal-components is the easy way to integrate real reactivity into your React app.**","directories":{},"_nodeVersion":"18.16.1","dependencies":{"react":"^18.2.0","@reatom/core":"^3.8.0","@reatom/npm-react":"^3.8.6"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.0.0","vitest":"^1.6.0","prettier":"^3.2.5","react-dom":"^18.2.0","typescript":"^5.4.5","@types/react":"^18.3.2","@reatom/testing":"^3.4.5","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.2.1","@testing-library/react":"^15.0.7","@testing-library/jest-dom":"^6.4.5"},"_npmOperationalInternal":{"tmp":"tmp/signal-components_0.5.2_1717177173410_0.40221673843515027","host":"s3://npm-registry-packages"}},"0.5.3":{"name":"signal-components","version":"0.5.3","keywords":[],"author":"","license":"MIT","_id":"signal-components@0.5.3","maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"homepage":"https://github.com/XaveScor/signal-components#readme","bugs":{"url":"https://github.com/XaveScor/signal-components/issues"},"dist":{"shasum":"98e9f27227d01bcf849a6859c330273da1f0551a","tarball":"https://registry.npmjs.org/signal-components/-/signal-components-0.5.3.tgz","fileCount":13,"integrity":"sha512-R8/euX6dnglwHaFu4lEtvQB5h1q9Cexp4Oxm4KEAYhMCuqp4YpALB3AaomSSRToSZt6DQ2W+Q0kYeq81N7WckQ==","signatures":[{"sig":"MEUCIA4Jvy4ZqZigiibgQ3X2FpGgoZuhl8DhxWr1MkSZvwy+AiEAjRKp/QI/KJNoo+24DhPRjBfeblLBtT9p6n+WJEt8BUQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49259},"main":"./dist/index.cjs","type":"module","_from":"file:signal-components-0.5.3.tgz","types":"./dist/index.d.ts","module":"./dist/index.module.mjs","exports":"./dist/index.modern.mjs","scripts":{"test":"vitest --config vitest.config.ts","build":"microbundle -f modern,esm,cjs"},"_npmUser":{"name":"xavescor","email":"xavescor@gmail.com"},"_resolved":"/private/var/folders/8s/m_3by_0n0lg0rc65l7ngrk9w0000gn/T/81e1d320eb473c2dc4a9fce33e8c89bc/signal-components-0.5.3.tgz","_integrity":"sha512-R8/euX6dnglwHaFu4lEtvQB5h1q9Cexp4Oxm4KEAYhMCuqp4YpALB3AaomSSRToSZt6DQ2W+Q0kYeq81N7WckQ==","repository":{"url":"git+ssh://git@github.com/XaveScor/signal-components.git","type":"git"},"_npmVersion":"9.7.2","description":"**Signal-components is the easy way to integrate real reactivity into your React app.**","directories":{},"_nodeVersion":"18.16.1","dependencies":{"react":"^18.2.0","@reatom/core":"^3.8.0","@reatom/npm-react":"^3.8.6"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.0.0","vitest":"^1.6.0","prettier":"^3.2.5","react-dom":"^18.2.0","typescript":"^5.4.5","@types/react":"^18.3.2","@reatom/testing":"^3.4.5","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.2.1","@testing-library/react":"^15.0.7","@testing-library/jest-dom":"^6.4.5"},"_npmOperationalInternal":{"tmp":"tmp/signal-components_0.5.3_1717202669466_0.7912966955119525","host":"s3://npm-registry-packages"}},"0.6.0":{"name":"signal-components","version":"0.6.0","keywords":[],"author":"","license":"MIT","_id":"signal-components@0.6.0","maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"homepage":"https://github.com/XaveScor/signal-components#readme","bugs":{"url":"https://github.com/XaveScor/signal-components/issues"},"dist":{"shasum":"40b1e761635195e14f5765eda75782a8a75b9638","tarball":"https://registry.npmjs.org/signal-components/-/signal-components-0.6.0.tgz","fileCount":13,"integrity":"sha512-A6pvsgxj4Xvg/OI0xLVuxueAOjltcHFXG0xqcyrSlchQAUvHDvzvId8Eq/Z0bMUQlxclMYD5DQnDPWsNj3Ev+g==","signatures":[{"sig":"MEUCIQDf1qKphU2tiOV2PedtC2rVvCG74WiRfgBzzNv49nmkYwIgTA3DdSwZkRRYH231YiIBqlH+efzwEGdxTiw3Oxh1s68=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":53916},"main":"./dist/index.cjs","type":"module","_from":"file:signal-components-0.6.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.module.mjs","exports":"./dist/index.modern.mjs","scripts":{"test":"vitest --config vitest.config.ts","build":"microbundle -f modern,esm,cjs"},"_npmUser":{"name":"xavescor","email":"xavescor@gmail.com"},"_resolved":"/private/var/folders/8s/m_3by_0n0lg0rc65l7ngrk9w0000gn/T/212a9b8163e1cd163d608040227f9bcc/signal-components-0.6.0.tgz","_integrity":"sha512-A6pvsgxj4Xvg/OI0xLVuxueAOjltcHFXG0xqcyrSlchQAUvHDvzvId8Eq/Z0bMUQlxclMYD5DQnDPWsNj3Ev+g==","repository":{"url":"git+ssh://git@github.com/XaveScor/signal-components.git","type":"git"},"_npmVersion":"9.7.2","description":"**Signal-components is the easy way to integrate real reactivity into your React app.**","directories":{},"_nodeVersion":"18.16.1","dependencies":{"react":"^18.2.0","@reatom/core":"^3.8.0","@reatom/npm-react":"^3.8.6"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.0.0","vitest":"^1.6.0","prettier":"^3.2.5","react-dom":"^18.2.0","typescript":"^5.4.5","@types/react":"^18.3.2","@reatom/testing":"^3.4.5","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.2.1","@testing-library/react":"^15.0.7","@testing-library/jest-dom":"^6.4.5"},"_npmOperationalInternal":{"tmp":"tmp/signal-components_0.6.0_1717205536884_0.4646263567205289","host":"s3://npm-registry-packages"}},"0.7.0":{"name":"signal-components","version":"0.7.0","keywords":[],"author":"","license":"MIT","_id":"signal-components@0.7.0","maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"homepage":"https://github.com/XaveScor/signal-components#readme","bugs":{"url":"https://github.com/XaveScor/signal-components/issues"},"dist":{"shasum":"9b8aacaa81ccceee44b00bba2e746ea7ae3108e2","tarball":"https://registry.npmjs.org/signal-components/-/signal-components-0.7.0.tgz","fileCount":14,"integrity":"sha512-/WSDfHcnqkHQGcsyhNyAZy+VVGeOwA0vzI4IRbfrsJ9wwHq+Xn5spVEZGs0jtUinb89zbqvdDzHMRajfX0qEBg==","signatures":[{"sig":"MEUCIGI0WaFXkbljyM+uu7uUpOv2329RRCXNtI8Tqls7WU+XAiEA5Ncp5paZ+Bw2D9Ds+ZAGdtKL9QcI4tVsK0BAUA9I54Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":66302},"main":"./dist/index.cjs","type":"module","_from":"file:signal-components-0.7.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.module.mjs","exports":"./dist/index.modern.mjs","scripts":{"test":"vitest --config vitest.config.ts","build":"microbundle -f modern,esm,cjs"},"_npmUser":{"name":"xavescor","email":"xavescor@gmail.com"},"_resolved":"/private/var/folders/8s/m_3by_0n0lg0rc65l7ngrk9w0000gn/T/1b4fd533fde51caf9290b25a775b8711/signal-components-0.7.0.tgz","_integrity":"sha512-/WSDfHcnqkHQGcsyhNyAZy+VVGeOwA0vzI4IRbfrsJ9wwHq+Xn5spVEZGs0jtUinb89zbqvdDzHMRajfX0qEBg==","repository":{"url":"git+ssh://git@github.com/XaveScor/signal-components.git","type":"git"},"_npmVersion":"9.7.2","description":"**Signal-components is the easy way to integrate real reactivity into your React app.**","directories":{},"_nodeVersion":"18.16.1","dependencies":{"react":"^18.2.0","@reatom/core":"^3.8.0","@reatom/npm-react":"^3.8.6"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.0.0","vitest":"^1.6.0","prettier":"^3.2.5","react-dom":"^18.2.0","typescript":"^5.4.5","@types/react":"^18.3.2","@reatom/testing":"^3.4.5","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.2.1","@testing-library/react":"^15.0.7","@testing-library/jest-dom":"^6.4.5"},"_npmOperationalInternal":{"tmp":"tmp/signal-components_0.7.0_1717415175831_0.7879540077345097","host":"s3://npm-registry-packages"}},"0.8.0":{"name":"signal-components","version":"0.8.0","keywords":[],"author":"","license":"MIT","_id":"signal-components@0.8.0","maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"homepage":"https://github.com/XaveScor/signal-components#readme","bugs":{"url":"https://github.com/XaveScor/signal-components/issues"},"dist":{"shasum":"f6a0cacd1cdde5a5051ebf07a190c5d0ac34d3b1","tarball":"https://registry.npmjs.org/signal-components/-/signal-components-0.8.0.tgz","fileCount":14,"integrity":"sha512-mTQmYraphm9ogMwhgbxPsvMaBNOnhh2rETlqqVclPkmPE8FrbrLCnJrdycciWMizwvblE9Zq6VfMb4znCGgpug==","signatures":[{"sig":"MEUCIQDlxCCxg5m+GmjzqCDRFwGQl8iWtGOIN9HtW/NgH+AbggIgHv7lETIdd7dkU41AFlBRdq6Xj9oGafqYS2O4+fu3ggY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":69188},"main":"./dist/index.cjs","type":"module","_from":"file:signal-components-0.8.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.module.mjs","exports":"./dist/index.modern.mjs","scripts":{"test":"vitest --config vitest.config.ts","build":"microbundle -f modern,esm,cjs"},"_npmUser":{"name":"xavescor","email":"xavescor@gmail.com"},"_resolved":"/private/var/folders/8s/m_3by_0n0lg0rc65l7ngrk9w0000gn/T/55b689af964e06c805b52accc2137504/signal-components-0.8.0.tgz","_integrity":"sha512-mTQmYraphm9ogMwhgbxPsvMaBNOnhh2rETlqqVclPkmPE8FrbrLCnJrdycciWMizwvblE9Zq6VfMb4znCGgpug==","repository":{"url":"git+ssh://git@github.com/XaveScor/signal-components.git","type":"git"},"_npmVersion":"9.7.2","description":"**Signal-components is the easy way to integrate real reactivity into your React app.**","directories":{},"_nodeVersion":"18.16.1","dependencies":{"react":"^18.2.0","@reatom/core":"^3.8.0","@reatom/npm-react":"^3.8.6"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.0.0","vitest":"^1.6.0","prettier":"^3.2.5","react-dom":"^18.2.0","typescript":"^5.4.5","@types/react":"^18.3.2","@reatom/testing":"^3.4.5","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.2.1","@testing-library/react":"^15.0.7","@testing-library/jest-dom":"^6.4.5"},"_npmOperationalInternal":{"tmp":"tmp/signal-components_0.8.0_1717499795651_0.8874146596018317","host":"s3://npm-registry-packages"}},"0.9.0-alpha.1":{"name":"signal-components","version":"0.9.0-alpha.1","keywords":[],"author":"","license":"MIT","_id":"signal-components@0.9.0-alpha.1","maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"homepage":"https://github.com/XaveScor/signal-components#readme","bugs":{"url":"https://github.com/XaveScor/signal-components/issues"},"dist":{"shasum":"dc89b262d07e4a42e13017cf2de4446e5eb85c5d","tarball":"https://registry.npmjs.org/signal-components/-/signal-components-0.9.0-alpha.1.tgz","fileCount":17,"integrity":"sha512-98bktTOKd00Ov36cqqWIFnWgSWGp8jrc0eYirgWrexzs/ZGqCNstU+CTWhqvvnS4e/+ce5xJuaIY2yjB3aYAEQ==","signatures":[{"sig":"MEQCIDaRMSpgmfKcPl7UYO/BG3rww3HfMS0Uzk2jiRtdRpLLAiBMAlhAvA+cSqXjMwPIXGEri5Huqn8DSpHnxiYY9Lokvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":77191},"main":"./dist/index.cjs","type":"module","_from":"file:signal-components-0.9.0-alpha.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.module.mjs","readme":"**Signal-components is the easy way to integrate real reactivity into your React app.**\n\n## Goals\n\n- **Integration** - Provide the simplest way to integrate [any reactivity system](#Supported-Reactivity-Systems) into your React app.\n- **Type Safety** - Typescript is the first-class citizen in this project.\n\n## Documentation\n\n### Motivation\n\nReact is a great library for building user interfaces, but it lacks a built-in reactivity system.\nThey chose to use rerenders as a way to update the UI, which is not always the best solution.\n\nSignal-like reactivity systems are a great way to solve this problem. They don't trigger rerenders when the state changes,\nbut instead, they trigger only the components that depend on the changed state. But this way is not ideal too.\nAny reactivity system designed for describing the signals globally, and it's hard to integrate them into existing React app.\n\nSignal-components act as the glue between your hook-based components and the reactivity system.\n\n### Introduction\n\n```tsx\nimport {declareComponent} from 'signal-components';\n\ntype Props = {\n x: number;\n y: number;\n};\n\nconst Component = declareComponent(({x, y}, options) => {\n // ^\n // Inside props\n // x and y are Atom here\n const z = atom(ctx => ctx.spy(x) + ctx.spy(y));\n // init phase\n\n return ({spy}) => {\n // render phase\n return
{spy(z)}
\n }\n});\n\n // <- Outside props\n```\n\n### Phases\n\n- **Init phase** - This phase is called only once when the component is created. It's a good place to create atoms and functions.\n- **Render phase** - This phase is called every time the component is rendered. We delegate the rendering to React. It means you can use any React hooks and components inside the render phase.\n\n#### Init Phase\n- global function **wireHook**(callback: () => T): Atom\\. You can execute any React hooks code inside the callback. It is the good way to move to the reactive code.\n\n#### Render Phase\nYou have access to the functions in the render phase: \n- **spy** - This function is used to subscribe rerender to a received Atom. If value inside the Atom is changed, the React render call.\n- **component** - This function is the way to create a new component for a received Atom. If value inside the Atom is changed, the React rerender only created component. Nothing more. It is the good way to minimize the rerenders.\n- **reatomCtx** - reatom context to call your atoms and actions if needed\n### Props\n\n- **Outside props** - The public API of the component. You can pass T | Atom here. Signal-components will pass it to the init phase as an Atom.\n- **Inside props** - The internal API of the component. You always get Atom here inside props. Nothing will distract you from your reactive code.\n- **Props** - The types. Please, don't use Atom here. Only raw types. \n\n#### Stable functions\nProps with prefix `on[A-Z]` are called \"Stable functions\" in signal-components.\nThat means you receive the same function instance from the `insideProps`. Doesn't matter how many times the component is rendered and what you pass to the prop: different functions or the `undefined` value.\n\nStable functions benefits demo: https://codesandbox.io/p/sandbox/signal-components-stable-functions-7d4m34\n### Insights\n\n**Inside props** is the Proxy object. That's the reason because we have one significant limitation: you cannot get rest of the `inside props`.\n```tsx\nconst Component = declareComponent((insideProps, options) => {\n const {...rest} = insideProps; // <- Error here. Use `rest` operator instead\n // ...\n});\n```\n\n### Operators\n\n#### defaults\n\n**Defaults** operator is a way to provide default values for the __internal props__.\n```tsx\nconst Component = declareComponent((insideProps, options) => {\n const {x = atom(1)} = insideProps; // <- Error here because x is Atom. Not undefined\n const {x} = defaults(insideProps, {x: 1}); // <- Ok way\n // ...\n});\n```\n\n#### rest\n**Rest** operator is a way to get the rest of the __internal props__. See [Insights](#Insights) for more information.\n```tsx\nconst Component = declareComponent((insideProps, options) => {\n const {x, ...rest} = insideProps; // <- Error here. Use `rest` operator instead\n \n const {x} = insideProps; \n const restProps = rest(insideProps, ['x']); // <- Ok way\n // ...\n});\n```\n\n### getAllPropsSignal\n**getAllPropsSignal** is a way to get all props as a signal. It's useful when you start to rewrite your component.\n```tsx\nconst Component = declareComponent((insideProps, options) => {\n return ({spy}) => {\n const unwrappedProps = spy(getAllPropsSignal(insideProps));\n //...\n };\n});\n```\nWe recommend don't use this operator in your code, but it is useful for refactoring purposes\n\n## Supported Reactivity Systems\n\n- [Reatom](https://reatom.dev)\n- [Planning] [Effector](https://effector.dev)\n- [Planning] [MobX](https://mobx.js.org/)\n- [Planning] [Redux](https://redux.js.org/)\n","exports":"./dist/index.modern.mjs","scripts":{"test":"vitest --config vitest.config.ts","build":"microbundle -f modern,esm,cjs"},"_npmUser":{"name":"xavescor","email":"xavescor@gmail.com"},"_resolved":"/private/var/folders/8s/m_3by_0n0lg0rc65l7ngrk9w0000gn/T/01241ccf56323a7f9dd3794c85a6330e/signal-components-0.9.0-alpha.1.tgz","_integrity":"sha512-98bktTOKd00Ov36cqqWIFnWgSWGp8jrc0eYirgWrexzs/ZGqCNstU+CTWhqvvnS4e/+ce5xJuaIY2yjB3aYAEQ==","repository":{"url":"git+ssh://git@github.com/XaveScor/signal-components.git","type":"git"},"_npmVersion":"10.7.0","description":"**Signal-components is the easy way to integrate real reactivity into your React app.**","directories":{},"_nodeVersion":"22.2.0","dependencies":{"react":"^18.2.0","@reatom/core":"^3.8.0","@reatom/npm-react":"^3.8.6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdom":"^24.1.0","vitest":"^1.6.0","prettier":"^3.3.1","react-dom":"^18.2.0","typescript":"^5.4.5","microbundle":"^0.15.1","@types/react":"^18.3.3","@reatom/testing":"^3.4.5","@types/react-dom":"^18.3.0","@testing-library/dom":"^10.1.0","@vitejs/plugin-react":"^4.3.1","@testing-library/react":"^16.0.0","@testing-library/jest-dom":"^6.4.5"},"_npmOperationalInternal":{"tmp":"tmp/signal-components_0.9.0-alpha.1_1718383047037_0.9337808019342553","host":"s3://npm-registry-packages"}},"0.9.1":{"name":"signal-components","version":"0.9.1","keywords":[],"author":"","license":"MIT","_id":"signal-components@0.9.1","maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"homepage":"https://github.com/XaveScor/signal-components#readme","bugs":{"url":"https://github.com/XaveScor/signal-components/issues"},"dist":{"shasum":"c10a5e88046d8b26675d7b2c4504fe704e8d244d","tarball":"https://registry.npmjs.org/signal-components/-/signal-components-0.9.1.tgz","fileCount":17,"integrity":"sha512-oHd/EsXtfkjEB1BepFHXFgcYZTvrd2CdFovJkDYh6kADMtcom0IKFSj0Ep42Tsxz+nvReVyd0JRF0f2O9XAdIA==","signatures":[{"sig":"MEQCIEXdWVTs0LvhaxWTx57cEZ54cVBAEXovmzM5lDFX8m5WAiB0+pKzjpYsskIzgGzTr9lH1ZPAMhpJ1LWRsx4e+mZn/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":77183},"main":"./dist/index.cjs","type":"module","_from":"file:signal-components-0.9.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.module.mjs","exports":"./dist/index.modern.mjs","scripts":{"test":"vitest --config vitest.config.ts","build":"microbundle -f modern,esm,cjs"},"_npmUser":{"name":"xavescor","email":"xavescor@gmail.com"},"_resolved":"/private/var/folders/8s/m_3by_0n0lg0rc65l7ngrk9w0000gn/T/0434c44ddda9fa2b3638185463570bdd/signal-components-0.9.1.tgz","_integrity":"sha512-oHd/EsXtfkjEB1BepFHXFgcYZTvrd2CdFovJkDYh6kADMtcom0IKFSj0Ep42Tsxz+nvReVyd0JRF0f2O9XAdIA==","repository":{"url":"git+ssh://git@github.com/XaveScor/signal-components.git","type":"git"},"_npmVersion":"10.7.0","description":"**Signal-components is the easy way to integrate real reactivity into your React app.**","directories":{},"_nodeVersion":"22.2.0","dependencies":{"react":"^18.2.0","@reatom/core":"^3.8.0","@reatom/npm-react":"^3.8.6"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.1.0","vitest":"^1.6.0","prettier":"^3.3.1","react-dom":"^18.2.0","typescript":"^5.4.5","microbundle":"^0.15.1","@types/react":"^18.3.3","@reatom/testing":"^3.4.5","@types/react-dom":"^18.3.0","@testing-library/dom":"^10.1.0","@vitejs/plugin-react":"^4.3.1","@testing-library/react":"^16.0.0","@testing-library/jest-dom":"^6.4.5"},"_npmOperationalInternal":{"tmp":"tmp/signal-components_0.9.1_1718383546682_0.31524740031906195","host":"s3://npm-registry-packages"}},"0.10.0-alpha.0":{"name":"signal-components","version":"0.10.0-alpha.0","keywords":[],"author":"","license":"MIT","_id":"signal-components@0.10.0-alpha.0","maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"homepage":"https://github.com/XaveScor/signal-components#readme","bugs":{"url":"https://github.com/XaveScor/signal-components/issues"},"dist":{"shasum":"0b1aac76c558edd5354a24078b9e4d6c05e4445e","tarball":"https://registry.npmjs.org/signal-components/-/signal-components-0.10.0-alpha.0.tgz","fileCount":18,"integrity":"sha512-OId5adW1oIdyhV589C5QA8Cqp5I2PkTXzEtRqRcY5dlB+SDVUkt8d73KfmL9axLJYJXAHOT/RsRzPjH5pC+cMQ==","signatures":[{"sig":"MEUCIGUOoGaspanFEsIMppAU8dXqecFzQApD6eactqRITVrbAiEAxwCJYvaybE3itDa3p1w15d/QnI99LGD+2quhoVozSI0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":76838},"main":"./dist/index.cjs","type":"module","_from":"file:signal-components-0.10.0-alpha.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.module.mjs","exports":"./dist/index.modern.mjs","scripts":{"test":"vitest --config vitest.config.ts","build":"microbundle -f modern,esm,cjs"},"_npmUser":{"name":"xavescor","email":"xavescor@gmail.com"},"_resolved":"/private/var/folders/8s/m_3by_0n0lg0rc65l7ngrk9w0000gn/T/cf8dabbecce15fda9acfcc2242531048/signal-components-0.10.0-alpha.0.tgz","_integrity":"sha512-OId5adW1oIdyhV589C5QA8Cqp5I2PkTXzEtRqRcY5dlB+SDVUkt8d73KfmL9axLJYJXAHOT/RsRzPjH5pC+cMQ==","repository":{"url":"git+ssh://git@github.com/XaveScor/signal-components.git","type":"git"},"_npmVersion":"10.7.0","description":"**Signal-components is the easy way to integrate real reactivity into your React app.**","directories":{},"_nodeVersion":"22.2.0","dependencies":{"react":"^18.2.0","@reatom/core":"^3.8.0","@reatom/npm-react":"^3.8.6"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.1.0","vitest":"^1.6.0","prettier":"^3.3.1","react-dom":"^18.2.0","typescript":"^5.4.5","microbundle":"^0.15.1","@types/react":"^18.3.3","@reatom/testing":"^3.4.5","@types/react-dom":"^18.3.0","@testing-library/dom":"^10.1.0","@vitejs/plugin-react":"^4.3.1","@testing-library/react":"^16.0.0","@testing-library/jest-dom":"^6.4.5"},"_npmOperationalInternal":{"tmp":"tmp/signal-components_0.10.0-alpha.0_1718564893285_0.12093160927308255","host":"s3://npm-registry-packages"}},"0.10.0-alpha.1":{"name":"signal-components","version":"0.10.0-alpha.1","keywords":[],"author":"","license":"MIT","_id":"signal-components@0.10.0-alpha.1","maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"homepage":"https://github.com/XaveScor/signal-components#readme","bugs":{"url":"https://github.com/XaveScor/signal-components/issues"},"dist":{"shasum":"3db311e1bbb33eae67b7ad7ae9d29e4e51a556cd","tarball":"https://registry.npmjs.org/signal-components/-/signal-components-0.10.0-alpha.1.tgz","fileCount":20,"integrity":"sha512-PMb3OObF5I4OIFKjms1OabpGEYzsvs9/giS7VLUcbgRZa44oBEGM/8ubWVaz3rOvxnngDvcdO3zK72zpinqVEw==","signatures":[{"sig":"MEUCIDux49Iy15nB19NX871it/na6M3u2/mG1ApQ3PUqEBSDAiEAuB+Xmlzl0jagRNQMUuD6pCJFR3+EetFctomjFUlsRm4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100428},"main":"./dist/index.cjs","type":"module","_from":"file:signal-components-0.10.0-alpha.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.module.mjs","exports":"./dist/index.modern.mjs","scripts":{"test":"vitest --config vitest.config.ts","build":"microbundle -f modern,esm,cjs"},"_npmUser":{"name":"xavescor","email":"xavescor@gmail.com"},"_resolved":"/private/var/folders/8s/m_3by_0n0lg0rc65l7ngrk9w0000gn/T/d22abbf373f2fd56037ac5814b10b5ea/signal-components-0.10.0-alpha.1.tgz","_integrity":"sha512-PMb3OObF5I4OIFKjms1OabpGEYzsvs9/giS7VLUcbgRZa44oBEGM/8ubWVaz3rOvxnngDvcdO3zK72zpinqVEw==","repository":{"url":"git+ssh://git@github.com/XaveScor/signal-components.git","type":"git"},"_npmVersion":"10.7.0","description":"**Signal-components is the easy way to integrate real reactivity into your React app.**","directories":{},"_nodeVersion":"22.2.0","dependencies":{"react":"^18.2.0","@reatom/core":"^3.8.0","@reatom/npm-react":"^3.8.6"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.1.0","vitest":"^1.6.0","prettier":"^3.3.1","react-dom":"^18.2.0","typescript":"^5.4.5","microbundle":"^0.15.1","@types/react":"^18.3.3","@reatom/testing":"^3.4.5","@types/react-dom":"^18.3.0","@testing-library/dom":"^10.1.0","@vitejs/plugin-react":"^4.3.1","@testing-library/react":"^16.0.0","@testing-library/jest-dom":"^6.4.5"},"_npmOperationalInternal":{"tmp":"tmp/signal-components_0.10.0-alpha.1_1718565566722_0.9534405150678553","host":"s3://npm-registry-packages"}},"0.10.0":{"name":"signal-components","version":"0.10.0","keywords":[],"author":"","license":"MIT","_id":"signal-components@0.10.0","maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"homepage":"https://github.com/XaveScor/signal-components#readme","bugs":{"url":"https://github.com/XaveScor/signal-components/issues"},"dist":{"shasum":"d74feb2a587286c5d920ee60ae20a17e02e0362a","tarball":"https://registry.npmjs.org/signal-components/-/signal-components-0.10.0.tgz","fileCount":20,"integrity":"sha512-WSkIa2kFL8KkUe7wdRV28kIf1MFH+FGvNXEDY7w1bZ15H2alZmK+1DqylAtFafEaDlB6b9B5jETJk4JpCVA7mg==","signatures":[{"sig":"MEYCIQC1wDV5UTwg00k9/+O34YUlecYU0Z4sXXYaFNL7/8g1dAIhAIqwVEja7hflMq1dUphX1fb4IYt7eJmyBYh/KisIQWzJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100420},"main":"./dist/index.cjs","type":"module","_from":"file:signal-components-0.10.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.module.mjs","exports":"./dist/index.modern.mjs","scripts":{"test":"vitest --config vitest.config.ts","build":"microbundle -f modern,esm,cjs"},"_npmUser":{"name":"xavescor","email":"xavescor@gmail.com"},"_resolved":"/private/var/folders/8s/m_3by_0n0lg0rc65l7ngrk9w0000gn/T/ff387661da201a8635e69327258a7ea1/signal-components-0.10.0.tgz","_integrity":"sha512-WSkIa2kFL8KkUe7wdRV28kIf1MFH+FGvNXEDY7w1bZ15H2alZmK+1DqylAtFafEaDlB6b9B5jETJk4JpCVA7mg==","repository":{"url":"git+ssh://git@github.com/XaveScor/signal-components.git","type":"git"},"_npmVersion":"10.7.0","description":"**Signal-components is the easy way to integrate real reactivity into your React app.**","directories":{},"_nodeVersion":"22.2.0","dependencies":{"react":"^18.2.0","@reatom/core":"^3.8.0","@reatom/npm-react":"^3.8.6"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.1.0","vitest":"^1.6.0","prettier":"^3.3.1","react-dom":"^18.2.0","typescript":"^5.4.5","microbundle":"^0.15.1","@types/react":"^18.3.3","@reatom/testing":"^3.4.5","@types/react-dom":"^18.3.0","@testing-library/dom":"^10.1.0","@vitejs/plugin-react":"^4.3.1","@testing-library/react":"^16.0.0","@testing-library/jest-dom":"^6.4.5"},"_npmOperationalInternal":{"tmp":"tmp/signal-components_0.10.0_1718565916233_0.5964956584859338","host":"s3://npm-registry-packages"}},"0.11.0-alpha.0":{"name":"signal-components","version":"0.11.0-alpha.0","keywords":[],"author":"","license":"MIT","_id":"signal-components@0.11.0-alpha.0","maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"homepage":"https://github.com/XaveScor/signal-components#readme","bugs":{"url":"https://github.com/XaveScor/signal-components/issues"},"dist":{"shasum":"c4779025330286e3438f2e6457e58a9ab518e8fc","tarball":"https://registry.npmjs.org/signal-components/-/signal-components-0.11.0-alpha.0.tgz","fileCount":20,"integrity":"sha512-mCjiTFx+3OrGScJMXwG70ZE4fBk+8mTUXPodYCtSe1vDapfiPEYlT6n03C6GoV1+t9oaHGGiL6FyJryaX5A1Cg==","signatures":[{"sig":"MEYCIQDggszZjDl30dmt+r10VCqtdBZMusdK8DylJlQ/JjmVCAIhALEQaMMWigXOgMEdrbLHj35MjpS+nbqixooNWrpBmiPv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101188},"main":"./dist/index.cjs","type":"module","_from":"file:signal-components-0.11.0-alpha.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.module.mjs","readme":"**Signal-components is the easy way to integrate real reactivity into your React app.**\n\n## Goals\n\n- **Integration** - Provide the simplest way to integrate [any reactivity system](#Supported-Reactivity-Systems) into your React app.\n- **Type Safety** - Typescript is the first-class citizen in this project.\n\n## Documentation\n\n### Motivation\n\nReact is a great library for building user interfaces, but it lacks a built-in reactivity system.\nThey chose to use rerenders as a way to update the UI, which is not always the best solution.\n\nSignal-like reactivity systems are a great way to solve this problem. They don't trigger rerenders when the state changes,\nbut instead, they trigger only the components that depend on the changed state. But this way is not ideal too.\nAny reactivity system designed for describing the signals globally, and it's hard to integrate them into existing React app.\n\nSignal-components act as the glue between your hook-based components and the reactivity system.\n\n### Introduction\n\n```tsx\nimport {declareComponent} from 'signal-components';\n\ntype Props = {\n x: number;\n y: number;\n};\n\nconst Component = declareComponent(({x, y}, options) => {\n // ^\n // Inside props\n // x and y are Atom here\n const z = atom(ctx => ctx.spy(x) + ctx.spy(y));\n // init phase\n\n return ({spy}) => {\n // render phase\n return
{spy(z)}
\n }\n});\n\n // <- Outside props\n```\n\n### Phases\n\n- **Init phase** - This phase is called only once when the component is created. It's a good place to create atoms and functions.\n- **Render phase** - This phase is called every time the component is rendered. We delegate the rendering to React. It means you can use any React hooks and components inside the render phase.\n\n#### Init Phase\n- global function **wireHook**(callback: () => T): Atom\\. You can execute any React hooks code inside the callback. It is the good way to move to the reactive code.\n\n#### Render Phase\nYou have access to the functions in the render phase: \n- **spy** - This function is used to subscribe rerender to a received Atom. If value inside the Atom is changed, the React render call.\n- **component** - This function is the way to create a new component for a received Atom. If value inside the Atom is changed, the React rerender only created component. Nothing more. It is the good way to minimize the rerenders.\n- **reatomCtx** - reatom context to call your atoms and actions if needed\n### Props\n\n- **Outside props** - The public API of the component. You can pass T | Atom here. Signal-components will pass it to the init phase as an Atom.\n- **Inside props** - The internal API of the component. You always get Atom here inside props. Nothing will distract you from your reactive code.\n- **Props** - The types. Please, don't use Atom here. Only raw types. \n\n#### Stable functions\nProps with prefix `on[A-Z]` are called \"Stable functions\" in signal-components.\nThat means you receive the same function instance from the `insideProps`. Doesn't matter how many times the component is rendered and what you pass to the prop: different functions or the `undefined` value.\n\nStable functions benefits demo: https://codesandbox.io/p/sandbox/signal-components-stable-functions-7d4m34\n### Insights\n\n**Inside props** is the Proxy object. That's the reason because we have one significant limitation: you cannot get rest of the `inside props`.\n```tsx\nconst Component = declareComponent((insideProps, options) => {\n const {...rest} = insideProps; // <- Error here. Use `rest` operator instead\n // ...\n});\n```\n\n### Operators\n\n#### defaults\n\n**Defaults** operator is a way to provide default values for the __internal props__.\n```tsx\nconst Component = declareComponent((insideProps, options) => {\n const {x = atom(1)} = insideProps; // <- Error here because x is Atom. Not undefined\n const {x} = defaults(insideProps, {x: 1}); // <- Ok way\n // ...\n});\n```\n\n#### rest\n**Rest** operator is a way to get the rest of the __internal props__. See [Insights](#Insights) for more information.\n```tsx\nconst Component = declareComponent((insideProps, options) => {\n const {x, ...rest} = insideProps; // <- Error here. Use `rest` operator instead\n \n const {x} = insideProps; \n const restProps = rest(insideProps, ['x']); // <- Ok way\n // ...\n});\n```\n\n### getAllPropsSignal\n**getAllPropsSignal** is a way to get all props as a signal. It's useful when you start to rewrite your component.\n```tsx\nconst Component = declareComponent((insideProps, options) => {\n return ({spy}) => {\n const unwrappedProps = spy(getAllPropsSignal(insideProps));\n //...\n };\n});\n```\nWe recommend don't use this operator in your code, but it is useful for refactoring purposes\n\n## Supported Reactivity Systems\n\n- [Reatom](https://reatom.dev)\n- [Planning] [Effector](https://effector.dev)\n- [Planning] [MobX](https://mobx.js.org/)\n- [Planning] [Redux](https://redux.js.org/)\n","exports":"./dist/index.modern.mjs","scripts":{"test":"vitest --config vitest.config.ts","build":"microbundle -f modern,esm,cjs"},"_npmUser":{"name":"xavescor","email":"xavescor@gmail.com"},"_resolved":"/private/var/folders/8s/m_3by_0n0lg0rc65l7ngrk9w0000gn/T/d623b9a473212547cdba635508029c17/signal-components-0.11.0-alpha.0.tgz","_integrity":"sha512-mCjiTFx+3OrGScJMXwG70ZE4fBk+8mTUXPodYCtSe1vDapfiPEYlT6n03C6GoV1+t9oaHGGiL6FyJryaX5A1Cg==","repository":{"url":"git+ssh://git@github.com/XaveScor/signal-components.git","type":"git"},"_npmVersion":"10.7.0","description":"**Signal-components is the easy way to integrate real reactivity into your React app.**","directories":{},"_nodeVersion":"22.2.0","dependencies":{"react":"^18.2.0","@reatom/core":"^3.8.0","@reatom/npm-react":"^3.8.6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdom":"^24.1.0","vitest":"^1.6.0","prettier":"^3.3.1","react-dom":"^18.2.0","typescript":"^5.4.5","microbundle":"^0.15.1","@types/react":"^18.3.3","@reatom/testing":"^3.4.5","@types/react-dom":"^18.3.0","@testing-library/dom":"^10.1.0","@vitejs/plugin-react":"^4.3.1","@testing-library/react":"^16.0.0","@testing-library/jest-dom":"^6.4.5"},"_npmOperationalInternal":{"tmp":"tmp/signal-components_0.11.0-alpha.0_1718745731092_0.16147024580216196","host":"s3://npm-registry-packages"}},"0.11.0-alpha.1":{"name":"signal-components","version":"0.11.0-alpha.1","keywords":[],"author":"","license":"MIT","_id":"signal-components@0.11.0-alpha.1","maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"homepage":"https://github.com/XaveScor/signal-components#readme","bugs":{"url":"https://github.com/XaveScor/signal-components/issues"},"dist":{"shasum":"8168469ca7870049cf363299d7d25bb11f020aee","tarball":"https://registry.npmjs.org/signal-components/-/signal-components-0.11.0-alpha.1.tgz","fileCount":21,"integrity":"sha512-dkAizarlfuZ4cfU92PfcmRPX5yIxBXQJYVk0ADCZ11bEK3Z62rXZff+Jm5tGhxPXhW0b6XsKYStSAnWMnNpAFQ==","signatures":[{"sig":"MEYCIQD1dD65g0oGs2ZRdPKU7VqZcy+W85NDEhezJgsZcQkygAIhAOK9Uyn/3aGBKvShBNqYbEf/WMPkTiWUQGlgYAV/tnHi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105406},"main":"./dist/index.cjs","type":"module","_from":"file:signal-components-0.11.0-alpha.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.module.mjs","readme":"**Signal-components is the easy way to integrate real reactivity into your React app.**\n\n## Goals\n\n- **Integration** - Provide the simplest way to integrate [any reactivity system](#Supported-Reactivity-Systems) into your React app.\n- **Type Safety** - Typescript is the first-class citizen in this project.\n\n## Documentation\n\n### Motivation\n\nReact is a great library for building user interfaces, but it lacks a built-in reactivity system.\nThey chose to use rerenders as a way to update the UI, which is not always the best solution.\n\nSignal-like reactivity systems are a great way to solve this problem. They don't trigger rerenders when the state changes,\nbut instead, they trigger only the components that depend on the changed state. But this way is not ideal too.\nAny reactivity system designed for describing the signals globally, and it's hard to integrate them into existing React app.\n\nSignal-components act as the glue between your hook-based components and the reactivity system.\n\n### Introduction\n\n```tsx\nimport {declareComponent} from 'signal-components';\n\ntype Props = {\n x: number;\n y: number;\n};\n\nconst Component = declareComponent(({x, y}, options) => {\n // ^\n // Inside props\n // x and y are Atom here\n const z = atom(ctx => ctx.spy(x) + ctx.spy(y));\n // init phase\n\n return ({spy}) => {\n // render phase\n return
{spy(z)}
\n }\n});\n\n // <- Outside props\n```\n\n### Phases\n\n- **Init phase** - This phase is called only once when the component is created. It's a good place to create atoms and functions.\n- **Render phase** - This phase is called every time the component is rendered. We delegate the rendering to React. It means you can use any React hooks and components inside the render phase.\n\n#### Init Phase\n- global function **wireHook**(callback: () => T): Atom\\. You can execute any React hooks code inside the callback. It is the good way to move to the reactive code.\n\n#### Render Phase\nYou have access to the functions in the render phase: \n- **spy** - This function is used to subscribe rerender to a received Atom. If value inside the Atom is changed, the React render call.\n- **component** - This function is the way to create a new component for a received Atom. If value inside the Atom is changed, the React rerender only created component. Nothing more. It is the good way to minimize the rerenders.\n- **reatomCtx** - reatom context to call your atoms and actions if needed\n### Props\n\n- **Outside props** - The public API of the component. You can pass T | Atom here. Signal-components will pass it to the init phase as an Atom.\n- **Inside props** - The internal API of the component. You always get Atom here inside props. Nothing will distract you from your reactive code.\n- **Props** - The types. Please, don't use Atom here. Only raw types. \n\n#### Stable functions\nProps with prefix `on[A-Z]` are called \"Stable functions\" in signal-components.\nThat means you receive the same function instance from the `insideProps`. Doesn't matter how many times the component is rendered and what you pass to the prop: different functions or the `undefined` value.\n\nStable functions benefits demo: https://codesandbox.io/p/sandbox/signal-components-stable-functions-7d4m34\n### Insights\n\n**Inside props** is the Proxy object. That's the reason because we have one significant limitation: you cannot get rest of the `inside props`.\n```tsx\nconst Component = declareComponent((insideProps, options) => {\n const {...rest} = insideProps; // <- Error here. Use `rest` operator instead\n // ...\n});\n```\n\n### Operators\n\n#### defaults\n\n**Defaults** operator is a way to provide default values for the __internal props__.\n```tsx\nconst Component = declareComponent((insideProps, options) => {\n const {x = atom(1)} = insideProps; // <- Error here because x is Atom. Not undefined\n const {x} = defaults(insideProps, {x: 1}); // <- Ok way\n // ...\n});\n```\n\n#### rest\n**Rest** operator is a way to get the rest of the __internal props__. See [Insights](#Insights) for more information.\n```tsx\nconst Component = declareComponent((insideProps, options) => {\n const {x, ...rest} = insideProps; // <- Error here. Use `rest` operator instead\n \n const {x} = insideProps; \n const restProps = rest(insideProps, ['x']); // <- Ok way\n // ...\n});\n```\n\n### getAllPropsSignal\n**getAllPropsSignal** is a way to get all props as a signal. It's useful when you start to rewrite your component.\n```tsx\nconst Component = declareComponent((insideProps, options) => {\n return ({spy}) => {\n const unwrappedProps = spy(getAllPropsSignal(insideProps));\n //...\n };\n});\n```\nWe recommend don't use this operator in your code, but it is useful for refactoring purposes\n\n## Supported Reactivity Systems\n\n- [Reatom](https://reatom.dev)\n- [Planning] [Effector](https://effector.dev)\n- [Planning] [MobX](https://mobx.js.org/)\n- [Planning] [Redux](https://redux.js.org/)\n","exports":"./dist/index.modern.mjs","scripts":{"test":"vitest --config vitest.config.ts","build":"microbundle -f modern,esm,cjs"},"_npmUser":{"name":"xavescor","email":"xavescor@gmail.com"},"_resolved":"/private/var/folders/8s/m_3by_0n0lg0rc65l7ngrk9w0000gn/T/9a0a63bcc1092f8b1b712e6e72fe364f/signal-components-0.11.0-alpha.1.tgz","_integrity":"sha512-dkAizarlfuZ4cfU92PfcmRPX5yIxBXQJYVk0ADCZ11bEK3Z62rXZff+Jm5tGhxPXhW0b6XsKYStSAnWMnNpAFQ==","repository":{"url":"git+ssh://git@github.com/XaveScor/signal-components.git","type":"git"},"_npmVersion":"10.7.0","description":"**Signal-components is the easy way to integrate real reactivity into your React app.**","directories":{},"_nodeVersion":"22.2.0","dependencies":{"react":"^18.2.0","@reatom/core":"^3.8.0","@reatom/lens":"^3.11.0","@reatom/npm-react":"^3.8.6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdom":"^24.1.0","vitest":"^1.6.0","prettier":"^3.3.1","react-dom":"^18.2.0","typescript":"^5.4.5","microbundle":"^0.15.1","@types/react":"^18.3.3","@reatom/testing":"^3.4.5","@types/react-dom":"^18.3.0","@testing-library/dom":"^10.1.0","@vitejs/plugin-react":"^4.3.1","@testing-library/react":"^16.0.0","@testing-library/jest-dom":"^6.4.5"},"_npmOperationalInternal":{"tmp":"tmp/signal-components_0.11.0-alpha.1_1718748144266_0.1731633222404263","host":"s3://npm-registry-packages"}},"0.11.0-alpha.2":{"name":"signal-components","version":"0.11.0-alpha.2","keywords":[],"author":"","license":"MIT","_id":"signal-components@0.11.0-alpha.2","maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"homepage":"https://github.com/XaveScor/signal-components#readme","bugs":{"url":"https://github.com/XaveScor/signal-components/issues"},"dist":{"shasum":"0225b9d33a7594ba045f3ea5cf3548f8026841e7","tarball":"https://registry.npmjs.org/signal-components/-/signal-components-0.11.0-alpha.2.tgz","fileCount":21,"integrity":"sha512-ThUyDvwLmOQQJDpxg+pBq1ZgD8Mik5FYYYw0YYF2bhXm4j4rjfd/vokKbYSH4zkjca1BzW/yV03v5ChLmmQGgA==","signatures":[{"sig":"MEQCIF4osnH4HaxDL4deVOeZR/AZZu1Xoj81pO8TJWJnluO6AiBB3Iexe8sKnJ3kLEo635nkwM3tAcR76CC9phl2JVlShQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106650},"main":"./dist/index.cjs","type":"module","_from":"file:signal-components-0.11.0-alpha.2.tgz","types":"./dist/index.d.ts","module":"./dist/index.module.mjs","readme":"**Signal-components is the easy way to integrate real reactivity into your React app.**\n\n## Goals\n\n- **Integration** - Provide the simplest way to integrate [any reactivity system](#Supported-Reactivity-Systems) into your React app.\n- **Type Safety** - Typescript is the first-class citizen in this project.\n\n## Documentation\n\n### Motivation\n\nReact is a great library for building user interfaces, but it lacks a built-in reactivity system.\nThey chose to use rerenders as a way to update the UI, which is not always the best solution.\n\nSignal-like reactivity systems are a great way to solve this problem. They don't trigger rerenders when the state changes,\nbut instead, they trigger only the components that depend on the changed state. But this way is not ideal too.\nAny reactivity system designed for describing the signals globally, and it's hard to integrate them into existing React app.\n\nSignal-components act as the glue between your hook-based components and the reactivity system.\n\n### Introduction\n\n```tsx\nimport {declareComponent} from 'signal-components';\n\ntype Props = {\n x: number;\n y: number;\n};\n\nconst Component = declareComponent(({x, y}, options) => {\n // ^\n // Inside props\n // x and y are Atom here\n const z = atom(ctx => ctx.spy(x) + ctx.spy(y));\n // init phase\n\n return ({spy}) => {\n // render phase\n return
{spy(z)}
\n }\n});\n\n // <- Outside props\n```\n\n### Phases\n\n- **Init phase** - This phase is called only once when the component is created. It's a good place to create atoms and functions.\n- **Render phase** - This phase is called every time the component is rendered. We delegate the rendering to React. It means you can use any React hooks and components inside the render phase.\n\n#### Init Phase\n- global function **wireHook**(callback: () => T): Atom\\. You can execute any React hooks code inside the callback. It is the good way to move to the reactive code.\n\n#### Render Phase\nYou have access to the functions in the render phase: \n- **spy** - This function is used to subscribe rerender to a received Atom. If value inside the Atom is changed, the React render call.\n- **component** - This function is the way to create a new component for a received Atom. If value inside the Atom is changed, the React rerender only created component. Nothing more. It is the good way to minimize the rerenders.\n- **reatomCtx** - reatom context to call your atoms and actions if needed\n### Props\n\n- **Outside props** - The public API of the component. You can pass T | Atom here. Signal-components will pass it to the init phase as an Atom.\n- **Inside props** - The internal API of the component. You always get Atom here inside props. Nothing will distract you from your reactive code.\n- **Props** - The types. Please, don't use Atom here. Only raw types. \n\n#### Stable functions\nProps with prefix `on[A-Z]` are called \"Stable functions\" in signal-components.\nThat means you receive the same function instance from the `insideProps`. Doesn't matter how many times the component is rendered and what you pass to the prop: different functions or the `undefined` value.\n\nStable functions benefits demo: https://codesandbox.io/p/sandbox/signal-components-stable-functions-7d4m34\n### Insights\n\n**Inside props** is the Proxy object. That's the reason because we have one significant limitation: you cannot get rest of the `inside props`.\n```tsx\nconst Component = declareComponent((insideProps, options) => {\n const {...rest} = insideProps; // <- Error here. Use `rest` operator instead\n // ...\n});\n```\n\n### Operators\n\n#### defaults\n\n**Defaults** operator is a way to provide default values for the __internal props__.\n```tsx\nconst Component = declareComponent((insideProps, options) => {\n const {x = atom(1)} = insideProps; // <- Error here because x is Atom. Not undefined\n const {x} = defaults(insideProps, {x: 1}); // <- Ok way\n // ...\n});\n```\n\n#### rest\n**Rest** operator is a way to get the rest of the __internal props__. See [Insights](#Insights) for more information.\n```tsx\nconst Component = declareComponent((insideProps, options) => {\n const {x, ...rest} = insideProps; // <- Error here. Use `rest` operator instead\n \n const {x} = insideProps; \n const restProps = rest(insideProps, ['x']); // <- Ok way\n // ...\n});\n```\n\n### getAllPropsSignal\n**getAllPropsSignal** is a way to get all props as a signal. It's useful when you start to rewrite your component.\n```tsx\nconst Component = declareComponent((insideProps, options) => {\n return ({spy}) => {\n const unwrappedProps = spy(getAllPropsSignal(insideProps));\n //...\n };\n});\n```\nWe recommend don't use this operator in your code, but it is useful for refactoring purposes\n\n## Supported Reactivity Systems\n\n- [Reatom](https://reatom.dev)\n- [Planning] [Effector](https://effector.dev)\n- [Planning] [MobX](https://mobx.js.org/)\n- [Planning] [Redux](https://redux.js.org/)\n","exports":"./dist/index.modern.mjs","scripts":{"test":"vitest --config vitest.config.ts","build":"microbundle -f modern,esm,cjs"},"_npmUser":{"name":"xavescor","email":"xavescor@gmail.com"},"_resolved":"/private/var/folders/8s/m_3by_0n0lg0rc65l7ngrk9w0000gn/T/56658967f33adbbb7a68bb62c6d34ab5/signal-components-0.11.0-alpha.2.tgz","_integrity":"sha512-ThUyDvwLmOQQJDpxg+pBq1ZgD8Mik5FYYYw0YYF2bhXm4j4rjfd/vokKbYSH4zkjca1BzW/yV03v5ChLmmQGgA==","repository":{"url":"git+ssh://git@github.com/XaveScor/signal-components.git","type":"git"},"_npmVersion":"10.7.0","description":"**Signal-components is the easy way to integrate real reactivity into your React app.**","directories":{},"_nodeVersion":"22.2.0","dependencies":{"react":"^18.2.0","@reatom/core":"^3.8.0","@reatom/lens":"^3.11.0","@reatom/npm-react":"^3.8.6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdom":"^24.1.0","vitest":"^1.6.0","prettier":"^3.3.1","react-dom":"^18.2.0","typescript":"^5.4.5","microbundle":"^0.15.1","@types/react":"^18.3.3","@reatom/testing":"^3.4.5","@types/react-dom":"^18.3.0","@testing-library/dom":"^10.1.0","@vitejs/plugin-react":"^4.3.1","@testing-library/react":"^16.0.0","@testing-library/jest-dom":"^6.4.5"},"_npmOperationalInternal":{"tmp":"tmp/signal-components_0.11.0-alpha.2_1718748331082_0.3935125647362734","host":"s3://npm-registry-packages"}},"0.11.0":{"name":"signal-components","version":"0.11.0","keywords":[],"author":"","license":"MIT","_id":"signal-components@0.11.0","maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"homepage":"https://github.com/XaveScor/signal-components#readme","bugs":{"url":"https://github.com/XaveScor/signal-components/issues"},"dist":{"shasum":"fa2a129a75e93c5ff58e1150c5359a3ecbe98007","tarball":"https://registry.npmjs.org/signal-components/-/signal-components-0.11.0.tgz","fileCount":21,"integrity":"sha512-9YmZe1axNiotxdayntYktxXZ4zrHmGnE9bBaMfoxXALYfJMwTABuN1R0z0C2ikBBJq4nVkUCArb9hvuCOSH42A==","signatures":[{"sig":"MEQCIA+CE/IXuzeAtnl0jX0MEZEgnNgHqZbdWKVPb9JBhPqMAiAGndZLNV9uIrYeLvhJr0g8G5uXSgGXgqtbQ/r88rCb6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106643},"main":"./dist/index.cjs","type":"module","_from":"file:signal-components-0.11.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.module.mjs","exports":"./dist/index.modern.mjs","scripts":{"test":"vitest --config vitest.config.ts","build":"microbundle -f modern,esm,cjs"},"_npmUser":{"name":"xavescor","email":"xavescor@gmail.com"},"_resolved":"/private/var/folders/8s/m_3by_0n0lg0rc65l7ngrk9w0000gn/T/b0ee53e1cc984b378a07eb9b2223a6b8/signal-components-0.11.0.tgz","_integrity":"sha512-9YmZe1axNiotxdayntYktxXZ4zrHmGnE9bBaMfoxXALYfJMwTABuN1R0z0C2ikBBJq4nVkUCArb9hvuCOSH42A==","repository":{"url":"git+ssh://git@github.com/XaveScor/signal-components.git","type":"git"},"_npmVersion":"10.7.0","description":"**Signal-components is the easy way to integrate real reactivity into your React app.**","directories":{},"_nodeVersion":"22.2.0","dependencies":{"react":"^18.2.0","@reatom/core":"^3.8.0","@reatom/lens":"^3.11.0","@reatom/npm-react":"^3.8.6"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.1.0","vitest":"^1.6.0","prettier":"^3.3.1","react-dom":"^18.2.0","typescript":"^5.4.5","microbundle":"^0.15.1","@types/react":"^18.3.3","@reatom/testing":"^3.4.5","@types/react-dom":"^18.3.0","@testing-library/dom":"^10.1.0","@vitejs/plugin-react":"^4.3.1","@testing-library/react":"^16.0.0","@testing-library/jest-dom":"^6.4.5"},"_npmOperationalInternal":{"tmp":"tmp/signal-components_0.11.0_1718748490482_0.7796540213527736","host":"s3://npm-registry-packages"}},"0.12.0-alpha.0":{"name":"signal-components","version":"0.12.0-alpha.0","keywords":[],"author":"","license":"MIT","_id":"signal-components@0.12.0-alpha.0","maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"homepage":"https://github.com/XaveScor/signal-components#readme","bugs":{"url":"https://github.com/XaveScor/signal-components/issues"},"dist":{"shasum":"2aad150bd8de00cdbfa6434bd35cfef62b27c160","tarball":"https://registry.npmjs.org/signal-components/-/signal-components-0.12.0-alpha.0.tgz","fileCount":33,"integrity":"sha512-HM2IXeTX/u9z/hvSNZR7glbomvFgDDmJr9JH/J2HOD/bqw+BXJudqJY1MtaBNufaxsztHD7e+SpzQuUs97/rew==","signatures":[{"sig":"MEQCIDiNxeJNG1hhVECR4KEiE7TBvwYEsyTEUtWajMr8HPBqAiBVoif4lE7hj+2cfuH8m7iOoSXV+r8GOzivsBi82WcrUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110165},"main":"./dist/index.cjs","type":"module","_from":"file:signal-components-0.12.0-alpha.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.module.mjs","readme":"**Signal-components is the easy way to integrate real reactivity into your React app.**\n\n## Goals\n\n- **Integration** - Provide the simplest way to integrate [any reactivity system](#Supported-Reactivity-Systems) into your React app.\n- **Type Safety** - Typescript is the first-class citizen in this project.\n\n## Documentation\n\n### Motivation\n\nReact is a great library for building user interfaces, but it lacks a built-in reactivity system.\nThey chose to use rerenders as a way to update the UI, which is not always the best solution.\n\nSignal-like reactivity systems are a great way to solve this problem. They don't trigger rerenders when the state changes,\nbut instead, they trigger only the components that depend on the changed state. But this way is not ideal too.\nAny reactivity system designed for describing the signals globally, and it's hard to integrate them into existing React app.\n\nSignal-components act as the glue between your hook-based components and the reactivity system.\n\n### Introduction\n\n```tsx\nimport {declareComponent} from 'signal-components';\n\ntype Props = {\n x: number;\n y: number;\n};\n\nconst Component = declareComponent(({x, y}, options) => {\n // ^\n // Inside props\n // x and y are Atom here\n const z = atom(ctx => ctx.spy(x) + ctx.spy(y));\n // init phase\n\n return ({spy}) => {\n // render phase\n return
{spy(z)}
\n }\n});\n\n // <- Outside props\n```\n\n### Phases\n\n- **Init phase** - This phase is called only once when the component is created. It's a good place to create atoms and functions.\n- **Render phase** - This phase is called every time the component is rendered. We delegate the rendering to React. It means you can use any React hooks and components inside the render phase.\n\n#### Init Phase\n- global function **wireHook**(callback: () => T): Atom\\. You can execute any React hooks code inside the callback. It is the good way to move to the reactive code.\n\n#### Render Phase\nYou have access to the functions in the render phase: \n- **spy** - This function is used to subscribe rerender to a received Atom. If value inside the Atom is changed, the React render call.\n- **component** - This function is the way to create a new component for a received Atom. If value inside the Atom is changed, the React rerender only created component. Nothing more. It is the good way to minimize the rerenders.\n- **reatomCtx** - reatom context to call your atoms and actions if needed\n### Props\n\n- **Outside props** - The public API of the component. You can pass T | Atom here. Signal-components will pass it to the init phase as an Atom.\n- **Inside props** - The internal API of the component. You always get Atom here inside props. Nothing will distract you from your reactive code.\n- **Props** - The types. Please, don't use Atom here. Only raw types. \n\n#### Stable functions\nProps with prefix `on[A-Z]` are called \"Stable functions\" in signal-components.\nThat means you receive the same function instance from the `insideProps`. Doesn't matter how many times the component is rendered and what you pass to the prop: different functions or the `undefined` value.\n\nStable functions benefits demo: https://codesandbox.io/p/sandbox/signal-components-stable-functions-7d4m34\n### Insights\n\n**Inside props** is the Proxy object. That's the reason because we have one significant limitation: you cannot get rest of the `inside props`.\n```tsx\nconst Component = declareComponent((insideProps, options) => {\n const {...rest} = insideProps; // <- Error here. Use `rest` operator instead\n // ...\n});\n```\n\n### Operators\n\n#### defaults\n\n**Defaults** operator is a way to provide default values for the __internal props__.\n```tsx\nconst Component = declareComponent((insideProps, options) => {\n const {x = atom(1)} = insideProps; // <- Error here because x is Atom. Not undefined\n const {x} = defaults(insideProps, {x: 1}); // <- Ok way\n // ...\n});\n```\n\n#### rest\n**Rest** operator is a way to get the rest of the __internal props__. See [Insights](#Insights) for more information.\n```tsx\nconst Component = declareComponent((insideProps, options) => {\n const {x, ...rest} = insideProps; // <- Error here. Use `rest` operator instead\n \n const {x} = insideProps; \n const restProps = rest(insideProps, ['x']); // <- Ok way\n // ...\n});\n```\n\n### getAllPropsSignal\n**getAllPropsSignal** is a way to get all props as a signal. It's useful when you start to rewrite your component.\n```tsx\nconst Component = declareComponent((insideProps, options) => {\n return ({spy}) => {\n const unwrappedProps = spy(getAllPropsSignal(insideProps));\n //...\n };\n});\n```\nWe recommend don't use this operator in your code, but it is useful for refactoring purposes\n\n## Supported Reactivity Systems\n\n- [Reatom](https://reatom.dev)\n- [Planning] [Effector](https://effector.dev)\n- [Planning] [MobX](https://mobx.js.org/)\n- [Planning] [Redux](https://redux.js.org/)\n","exports":"./dist/index.modern.mjs","scripts":{"test":"vitest --config vitest.config.ts","build":"rm -rf ./dist && pnpm run microbundle && pnpm run copy-types","copy-types":"node ./copyTypesToDist.mjs","microbundle":"microbundle -f modern,esm,cjs"},"_npmUser":{"name":"xavescor","email":"xavescor@gmail.com"},"_resolved":"/private/var/folders/8s/m_3by_0n0lg0rc65l7ngrk9w0000gn/T/898cbb2b19a19f941219c99b9b4373a3/signal-components-0.12.0-alpha.0.tgz","_integrity":"sha512-HM2IXeTX/u9z/hvSNZR7glbomvFgDDmJr9JH/J2HOD/bqw+BXJudqJY1MtaBNufaxsztHD7e+SpzQuUs97/rew==","repository":{"url":"git+ssh://git@github.com/XaveScor/signal-components.git","type":"git"},"_npmVersion":"10.8.1","description":"**Signal-components is the easy way to integrate real reactivity into your React app.**","directories":{},"_nodeVersion":"22.3.0","dependencies":{"react":"^18.2.0","@reatom/core":"^3.8.0","@reatom/lens":"^3.11.0","@reatom/npm-react":"^3.8.6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdom":"^24.1.0","vitest":"^1.6.0","prettier":"^3.3.1","fast-glob":"^3.3.2","react-dom":"^18.2.0","typescript":"^5.4.5","microbundle":"^0.15.1","@types/react":"^18.3.3","@reatom/testing":"^3.4.5","@types/react-dom":"^18.3.0","@testing-library/dom":"^10.1.0","@vitejs/plugin-react":"^4.3.1","@testing-library/react":"^16.0.0","@testing-library/jest-dom":"^6.4.5"},"_npmOperationalInternal":{"tmp":"tmp/signal-components_0.12.0-alpha.0_1720093714957_0.6209428984875183","host":"s3://npm-registry-packages"}},"0.12.0":{"name":"signal-components","version":"0.12.0","description":"**Signal-components is the easy way to integrate real reactivity into your React app.**","repository":{"type":"git","url":"git+ssh://git@github.com/XaveScor/signal-components.git"},"module":"./dist/index.module.mjs","exports":"./dist/index.modern.mjs","main":"./dist/index.cjs","types":"./dist/index.d.ts","keywords":[],"author":"","type":"module","license":"MIT","devDependencies":{"@reatom/testing":"^3.4.5","@testing-library/dom":"^10.1.0","@testing-library/jest-dom":"^6.4.5","@testing-library/react":"^16.0.0","@types/react":"^18.3.3","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.3.1","fast-glob":"^3.3.2","jsdom":"^24.1.0","microbundle":"^0.15.1","prettier":"^3.3.1","react-dom":"^18.2.0","typescript":"^5.4.5","vitest":"^1.6.0"},"dependencies":{"@reatom/core":"^3.8.0","@reatom/lens":"^3.11.0","@reatom/npm-react":"^3.8.6","react":"^18.2.0"},"scripts":{"test":"vitest --config vitest.config.ts","microbundle":"microbundle -f modern,esm,cjs","copy-types":"node ./copyTypesToDist.mjs","build":"rm -rf ./dist && pnpm run microbundle && pnpm run copy-types"},"_id":"signal-components@0.12.0","bugs":{"url":"https://github.com/XaveScor/signal-components/issues"},"homepage":"https://github.com/XaveScor/signal-components#readme","_integrity":"sha512-VJ4SfbO3S8N2SjeI1jJxDC+bfz9s4n6v2/cGFac/x7JA6zaLlLG9n6HGH+7uGp/GzjN5o+cea8rigfkDv7skzw==","_resolved":"/private/var/folders/8s/m_3by_0n0lg0rc65l7ngrk9w0000gn/T/e344d429c53c7af6f20c8a43f2d7be51/signal-components-0.12.0.tgz","_from":"file:signal-components-0.12.0.tgz","_nodeVersion":"22.3.0","_npmVersion":"10.8.1","dist":{"integrity":"sha512-VJ4SfbO3S8N2SjeI1jJxDC+bfz9s4n6v2/cGFac/x7JA6zaLlLG9n6HGH+7uGp/GzjN5o+cea8rigfkDv7skzw==","shasum":"331987acb075e37fdb359598d3c8de6d0735bf08","tarball":"https://registry.npmjs.org/signal-components/-/signal-components-0.12.0.tgz","fileCount":33,"unpackedSize":110157,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDr9e/2npjbYBiND3cah8Dj8ShjClA3mOljpbSMfjGWIgIhAL+VSukrkXXxNF+/j7CSvzJl8zqgPVSQstu+YPtTEmvn"}]},"_npmUser":{"name":"xavescor","email":"xavescor@gmail.com"},"directories":{},"maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/signal-components_0.12.0_1720094332632_0.0014304918039345083"},"_hasShrinkwrap":false}},"time":{"created":"2024-05-04T00:57:04.659Z","modified":"2024-07-04T11:58:52.983Z","0.0.1":"2024-05-04T00:57:04.968Z","0.0.2":"2024-05-20T04:10:20.276Z","0.1.0":"2024-05-20T18:39:07.814Z","0.2.0":"2024-05-22T03:37:28.490Z","0.3.0":"2024-05-23T03:36:18.299Z","0.3.1":"2024-05-23T04:08:40.437Z","0.4.0":"2024-05-29T00:31:35.919Z","0.5.0":"2024-05-31T03:17:29.983Z","0.5.1":"2024-05-31T17:08:46.147Z","0.5.2":"2024-05-31T17:39:33.609Z","0.5.3":"2024-06-01T00:44:29.618Z","0.6.0":"2024-06-01T01:32:17.087Z","0.7.0":"2024-06-03T11:46:15.996Z","0.8.0":"2024-06-04T11:16:35.812Z","0.9.0":"2024-06-14T16:11:25.436Z","0.9.0-alpha.1":"2024-06-14T16:37:27.192Z","0.9.1":"2024-06-14T16:45:47.113Z","0.10.0-alpha.0":"2024-06-16T19:08:13.454Z","0.10.0-alpha.1":"2024-06-16T19:19:26.866Z","0.10.0":"2024-06-16T19:25:16.384Z","0.11.0-alpha.0":"2024-06-18T21:22:11.245Z","0.11.0-alpha.1":"2024-06-18T22:02:24.466Z","0.11.0-alpha.2":"2024-06-18T22:05:31.336Z","0.11.0":"2024-06-18T22:08:10.726Z","0.12.0-alpha.0":"2024-07-04T11:48:35.090Z","0.12.0":"2024-07-04T11:58:52.809Z"},"maintainers":[{"name":"xavescor","email":"xavescor@gmail.com"}],"repository":{"type":"git","url":"git+ssh://git@github.com/XaveScor/signal-components.git"},"keywords":[],"license":"MIT","homepage":"https://github.com/XaveScor/signal-components#readme","bugs":{"url":"https://github.com/XaveScor/signal-components/issues"},"readme":"**Signal-components is the easy way to integrate real reactivity into your React app.**\n\n## Goals\n\n- **Integration** - Provide the simplest way to integrate [any reactivity system](#Supported-Reactivity-Systems) into your React app.\n- **Type Safety** - Typescript is the first-class citizen in this project.\n\n## Documentation\n\n### Motivation\n\nReact is a great library for building user interfaces, but it lacks a built-in reactivity system.\nThey chose to use rerenders as a way to update the UI, which is not always the best solution.\n\nSignal-like reactivity systems are a great way to solve this problem. They don't trigger rerenders when the state changes,\nbut instead, they trigger only the components that depend on the changed state. But this way is not ideal too.\nAny reactivity system designed for describing the signals globally, and it's hard to integrate them into existing React app.\n\nSignal-components act as the glue between your hook-based components and the reactivity system.\n\n### Introduction\n\n```tsx\nimport {declareComponent} from 'signal-components';\n\ntype Props = {\n x: number;\n y: number;\n};\n\nconst Component = declareComponent(({x, y}, options) => {\n // ^\n // Inside props\n // x and y are Atom here\n const z = atom(ctx => ctx.spy(x) + ctx.spy(y));\n // init phase\n\n return ({spy}) => {\n // render phase\n return
{spy(z)}
\n }\n});\n\n // <- Outside props\n```\n\n### Phases\n\n- **Init phase** - This phase is called only once when the component is created. It's a good place to create atoms and functions.\n- **Render phase** - This phase is called every time the component is rendered. We delegate the rendering to React. It means you can use any React hooks and components inside the render phase.\n\n#### Init Phase\n- global function **wireHook**(callback: () => T): Atom\\. You can execute any React hooks code inside the callback. It is the good way to move to the reactive code.\n\n#### Render Phase\nYou have access to the functions in the render phase: \n- **spy** - This function is used to subscribe rerender to a received Atom. If value inside the Atom is changed, the React render call.\n- **component** - This function is the way to create a new component for a received Atom. If value inside the Atom is changed, the React rerender only created component. Nothing more. It is the good way to minimize the rerenders.\n- **reatomCtx** - reatom context to call your atoms and actions if needed\n### Props\n\n- **Outside props** - The public API of the component. You can pass T | Atom here. Signal-components will pass it to the init phase as an Atom.\n- **Inside props** - The internal API of the component. You always get Atom here inside props. Nothing will distract you from your reactive code.\n- **Props** - The types. Please, don't use Atom here. Only raw types. \n\n#### Stable functions\nProps with prefix `on[A-Z]` are called \"Stable functions\" in signal-components.\nThat means you receive the same function instance from the `insideProps`. Doesn't matter how many times the component is rendered and what you pass to the prop: different functions or the `undefined` value.\n\nStable functions benefits demo: https://codesandbox.io/p/sandbox/signal-components-stable-functions-7d4m34\n### Insights\n\n**Inside props** is the Proxy object. That's the reason because we have one significant limitation: you cannot get rest of the `inside props`.\n```tsx\nconst Component = declareComponent((insideProps, options) => {\n const {...rest} = insideProps; // <- Error here. Use `rest` operator instead\n // ...\n});\n```\n\n### Operators\n\n#### defaults\n\n**Defaults** operator is a way to provide default values for the __internal props__.\n```tsx\nconst Component = declareComponent((insideProps, options) => {\n const {x = atom(1)} = insideProps; // <- Error here because x is Atom. Not undefined\n const {x} = defaults(insideProps, {x: 1}); // <- Ok way\n // ...\n});\n```\n\n#### rest\n**Rest** operator is a way to get the rest of the __internal props__. See [Insights](#Insights) for more information.\n```tsx\nconst Component = declareComponent((insideProps, options) => {\n const {x, ...rest} = insideProps; // <- Error here. Use `rest` operator instead\n \n const {x} = insideProps; \n const restProps = rest(insideProps, ['x']); // <- Ok way\n // ...\n});\n```\n\n### getAllPropsSignal\n**getAllPropsSignal** is a way to get all props as a signal. It's useful when you start to rewrite your component.\n```tsx\nconst Component = declareComponent((insideProps, options) => {\n return ({spy}) => {\n const unwrappedProps = spy(getAllPropsSignal(insideProps));\n //...\n };\n});\n```\nWe recommend don't use this operator in your code, but it is useful for refactoring purposes\n\n## Supported Reactivity Systems\n\n- [Reatom](https://reatom.dev)\n- [Planning] [Effector](https://effector.dev)\n- [Planning] [MobX](https://mobx.js.org/)\n- [Planning] [Redux](https://redux.js.org/)\n","readmeFilename":"README.md"}