@fane_the_divine/react-signal 0.0.0 → 0.0.2

package/README.md

@@ -1,22 +1,18 @@
 # react-signal
 
-在react里使用signal, API参考solid,使用方法见[demo](src/index.tsx).
+在react里使用signal
 
-## API介绍
+API参考solid，使用方法见[demo](src/index.tsx).
 
-### defineComponent
+[npm包](https://www.npmjs.com/package/@fane_the_divine/react-signal)
 
-```tsx
-type CompProps = {
-  num: number
-}
-const Comp = defineComponent<CompProps>((props) => {
-  return () => <span>{props().num}</span>
-})
+```bash
+npm i @fane_the_divine/react-signal
 ```
 
-defineComponent接受一个setup函数 这个函数在组件整个生命周期内只执行一次(不包括热重载)  
-setup应当返回一个render函数 这个函数会执行多次
+使用时可能出现hmr失效的问题，需要重建组件或刷新网页
+
+## API介绍
 
 ### createSignal
 
@@ -34,6 +30,21 @@ count.value
 
 可以在任何位置使用createSignal
 
+### defineComponent
+
+```tsx
+type CompProps = {
+  num: () => number
+}
+const Comp = defineComponent<CompProps>((props) => {
+  // props对象是signal 参数也是signal
+  return () => <span>{props().num()}</span>
+})
+```
+
+defineComponent接受一个setup函数 这个函数在组件整个生命周期内只执行一次
+setup应当返回一个render函数 这个函数会执行多次
+
 ### createMemo
 
 创建一个派生signal
@@ -42,7 +53,7 @@ count.value
 // 参数为上一次的memo值
 const double = createMemo((prev) => {
   return count() * 2
-  // 第二个参数是自定义的比较眼熟
+  // 第二个参数是自定义的比较函数
 }, Object.is)
 
 // 访问其值

package/dist/react-signal.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react");let h;const y=()=>h;function E(o,t){const u=h;h=t;const s=o();return h=u,s}let p;const m=()=>p;function S(o,t){const u=p;p=t;const s=o();return p=u,s}function C(o){let t=o;const u=new Set;function s(){const n=y();return n&&!u.has(n)&&(u.add(n),n.listenRangeDestory(()=>u.delete(n))),t}Object.defineProperty(s,"value",{get(){return t}});function e(n){t!==n&&(t=n,u.forEach(l=>l.onSignalChange()))}return[s,e]}function v(o){const t=u=>{const[,s]=d.useReducer(()=>({}),null),e=d.useRef(null);if(e.current)e.current.propsSignal[1](u);else{const r={onSignalChange:()=>{var i;(i=e.current)!=null&&i.isRending||s()},listenRangeDestory:i=>{var c;(c=e.current)==null||c.cleanups.push(i)}},f={addEffectFn:i=>{var c;return(c=e.current)==null?void 0:c.effects.push(i)},addLayoutEffectFn:i=>{var c;return(c=e.current)==null?void 0:c.layoutEffects.push(i)}},g=C(u);e.current={reactivityRange:r,componentRange:f,cleanups:[],effects:[],layoutEffects:[],isRending:!1,propsSignal:g};const a=E(()=>S(()=>o(g[0]),f),r);e.current.render=a}d.useEffect(()=>()=>{if(!e.current)return;const r=e.current.cleanups;e.current=null,r.forEach(f=>f())},[]),d.useLayoutEffect(()=>{if(!e.current)return;const r=e.current.effects;e.current.effects=[],r.forEach(f=>f())}),d.useEffect(()=>{if(!e.current)return;const r=e.current.layoutEffects;e.current.layoutEffects=[],r.forEach(f=>f())});const{render:n,reactivityRange:l}=e.current;e.current.isRending=!0;const R=E(n,l);return e.current.isRending=!1,R};return d.memo(t)}function D(o,t,u){let s=[];function e(){s.forEach(c=>c()),s=[]}const n=y();n==null||n.listenRangeDestory(e);let l;const R={onSignalChange:()=>{f=!0},listenRangeDestory:c=>{s.push(c)}},r=m();let f=!0,g=!0;function a(){const{layoutEffect:c}=u??{};c?r==null||r.addLayoutEffectFn(i):r==null||r.addEffectFn(i)}function i(){a(),f&&(f=!1,e(),E(()=>{t==null||t.forEach(c=>c()),l=o(l,g),g=!1},R))}a()}function F(o,t=Object.is){let u=[];function s(){u.forEach(a=>a()),u=[]}const e=y();e==null||e.listenRangeDestory(s);let n,l=!0;const R={onSignalChange:()=>{l=!0},listenRangeDestory:a=>{u.push(a)}},r=new Set;function f(a=!0){if(!l)return;s();const i=n;E(()=>{n=o(i)},R),l=!1,!(!a||t(i,n))&&r.forEach(c=>c.onSignalChange())}function g(){f();const a=y();return a&&!r.has(a)&&(r.add(a),a.listenRangeDestory(()=>r.delete(a))),n}return Object.defineProperty(g,"value",{get(){return f(!1),n}}),g}function b(o){const t=y();t==null||t.listenRangeDestory(()=>E(o,void 0))}function M(o){return{current:o??null}}exports.createEffect=D;exports.createMemo=F;exports.createRef=M;exports.createSignal=C;exports.defineComponent=v;exports.onCleanup=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react");let h;const y=()=>h;function E(o,t){const u=h;h=t;const s=o();return h=u,s}let p;const m=()=>p;function S(o,t){const u=p;p=t;const s=o();return p=u,s}function C(o){let t=o;const u=new Set;function s(){const n=y();return n&&!u.has(n)&&(u.add(n),n.listenRangeDestory(()=>u.delete(n))),t}Object.defineProperty(s,"value",{get(){return t}});function e(n){t!==n&&(t=n,u.forEach(l=>l.onSignalChange()))}return[s,e]}function v(o){const t=u=>{const[,s]=d.useReducer(()=>({}),null),e=d.useRef(null);if(e.current)e.current.propsSignal[1](u);else{const r={onSignalChange:()=>{var i;(i=e.current)!=null&&i.isRending||s()},listenRangeDestory:i=>{var c;(c=e.current)==null||c.cleanups.push(i)}},f={addEffectFn:i=>{var c;return(c=e.current)==null?void 0:c.effects.push(i)},addLayoutEffectFn:i=>{var c;return(c=e.current)==null?void 0:c.layoutEffects.push(i)}},g=C(u);e.current={reactivityRange:r,componentRange:f,cleanups:[],effects:[],layoutEffects:[],isRending:!1,propsSignal:g};const a=E(()=>S(()=>o(g[0]),f),r);e.current.render=a}d.useEffect(()=>()=>{if(!e.current)return;const r=e.current.cleanups;e.current=null,r.forEach(f=>f())},[]),d.useLayoutEffect(()=>{if(!e.current)return;const r=e.current.layoutEffects;e.current.layoutEffects=[],r.forEach(f=>f())}),d.useEffect(()=>{if(!e.current)return;const r=e.current.effects;e.current.effects=[],r.forEach(f=>f())});const{render:n,reactivityRange:l}=e.current;e.current.isRending=!0;const R=E(n,l);return e.current.isRending=!1,R};return d.memo(t)}function D(o,t,u){let s=[];function e(){s.forEach(c=>c()),s=[]}const n=y();n==null||n.listenRangeDestory(e);let l;const R={onSignalChange:()=>{f=!0},listenRangeDestory:c=>{s.push(c)}},r=m();let f=!0,g=!0;function a(){const{layoutEffect:c}=u??{};c?r==null||r.addLayoutEffectFn(i):r==null||r.addEffectFn(i)}function i(){a(),f&&(f=!1,e(),E(()=>{t==null||t.forEach(c=>c()),l=o(l,g),g=!1},R))}a()}function F(o,t=Object.is){let u=[];function s(){u.forEach(a=>a()),u=[]}const e=y();e==null||e.listenRangeDestory(s);let n,l=!0;const R={onSignalChange:()=>{l=!0},listenRangeDestory:a=>{u.push(a)}},r=new Set;function f(a=!0){if(!l)return;s();const i=n;E(()=>{n=o(i)},R),l=!1,!(!a||t(i,n))&&r.forEach(c=>c.onSignalChange())}function g(){f();const a=y();return a&&!r.has(a)&&(r.add(a),a.listenRangeDestory(()=>r.delete(a))),n}return Object.defineProperty(g,"value",{get(){return f(!1),n}}),g}function b(o){const t=y();t==null||t.listenRangeDestory(()=>E(o,void 0))}function M(o){return{current:o??null}}exports.createEffect=D;exports.createMemo=F;exports.createRef=M;exports.createSignal=C;exports.defineComponent=v;exports.onCleanup=b;

package/dist/react-signal.d.ts

@@ -11,6 +11,9 @@ import { RefObject } from 'react';
  * @example
  * ```ts
  * defineComponent(() => {
+ *
+ *   // ...
+ *
  *   createEffect(
  *     // 允许 effect 函数返回一个值，并会输入到下一次 effect 函数
  *     // 可以从参数判断是否第一次调用
@@ -31,7 +34,8 @@ import { RefObject } from 'react';
  *     },
  *   )
  *
- *   return () => null
+ *  // ...
+ *
  * })
  * ```
  */
@@ -76,21 +80,19 @@ export declare function createSignal<T>(defaultValue: T): Signal<T>;
  * setup 在组件整个生命周期内只执行一次（不包括热重载），应返回一个 render 函数；render 会执行多次。
  * 入参 `props` 为 {@link SignalGetter}，在 setup 或 render 中用 `props()` 读取并追踪父组件传入的 props。
  *
- * @typeParam T - 组件 props 类型。
- *
- *
  * @example
  * ```tsx
  * type CompProps = {
- *   num: number
+ *   // 组件参数可以是signal
+ *   num: () => number
  * }
  * const Comp = defineComponent<CompProps>((props) => {
- *   // props也是signal
+ *   // props对象是signal
  *   // 组件销毁后执行
  *   onCleanup(()=> console.log('comp unmounted'))
  *   // render中用到的signal被自动收集 变化后更新组件
- *   // 如果通过.value访问值 则不会被收集
- *   return () => <span>{props().num}</span>
+ *   // 如果通过props().num.value访问值 则不会被收集
+ *   return () => <span>{props().num()}</span>
  * })
  * ```
  */

package/dist/react-signal.js

@@ -77,13 +77,13 @@ function L(a) {
       const n = e.current.cleanups;
       e.current = null, n.forEach((f) => f());
     }, []), S(() => {
-      if (!e.current) return;
-      const n = e.current.effects;
-      e.current.effects = [], n.forEach((f) => f());
-    }), p(() => {
       if (!e.current) return;
       const n = e.current.layoutEffects;
       e.current.layoutEffects = [], n.forEach((f) => f());
+    }), p(() => {
+      if (!e.current) return;
+      const n = e.current.effects;
+      e.current.effects = [], n.forEach((f) => f());
     });
     const { render: t, reactivityRange: l } = e.current;
     e.current.isRending = !0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fane_the_divine/react-signal",
-  "version": "0.0.0",
+  "version": "0.0.2",
   "type": "module",
   "description": "在react中使用signal",
   "license": "MIT",