@yors/nano-signal v0.1.2

nano's reative signal

File size

Features

Usage

• You can import directly via npm cdn

<!-- unpkg.com/:package@:version/:file -->
<script src="https://unpkg.com/@yors/nano-signal@0.1.2/dist/main.js"></script>

<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/@yors/nano-signal@0.1.2/dist/main.js"></script>

• You can install it via the npm library tool

npm i @yors/nano-signal

yarn add @yors/nano-signal

pnpm add @yors/nano-signal

import { createSignal, createEffect, createMemo } from "../lib/main.ts";
// const [count, setCount] = createSignal(0);
// // double 为 count 的派生值
// const double = () => count() * 2;

// https://juejin.cn/post/7206667711077761085

function fibonacci(n: number) {
  let n1 = 1;
  let n2 = 1;
  for (let i = 2; i < n; i++) {
    [n1, n2] = [n2, n1 + n2];
  }
  return n2;
}

// control debug with sinal
const [isdebug, setDebug] = createSignal(true);
function info_msg(s) {
  if (isdebug()) {
    console.log(s);
  }
}
function info_set(s) {
  // isdebug = s;
  setDebug(s);
}

// control count with signal
const [count, setCount] = createSignal(10);
const fib = () => {
  console.count("fibonacci run");
  return fibonacci(count());
};

createEffect(() => {
  info_msg(`[effect] let fibonacci run with count 50`);
  return Array(50)
    .fill(fib)
    .forEach((l) => l());
});

createMemo(() => {
  info_msg(`[memo] let fibonacci run with count 50`);
  return Array(50)
    .fill(fib)
    .forEach((l) => l());
});

// window.addEventListener("mousemove", function (event) {
//   setCount(count() + 1);
//   info_msg(`[info] count fibonacci: ${count()}`);
// });

// pnpm