helium-sdx

helium-sdx

SDx is short for "Source Derivation," and it's a relationship between "source" variables and "deriver" functions. Deriver functions run every time their source dependencies update.

import {Source, derive} from "helium-sdx";

const source = new Source(1);

derive(() => console.log(source.get())); // outputs "1";

source.set(2): // outputs "2";

---

Website: helium-ui.tech

---

Quick Reference Example (QRE)

Here's most of the general functionality

import { 
  Source, derive, Sourcify, SourceArray, 
  SourceMap, deriverSwitch, DerivationManager, 
  awaitSource, DdxSource 
} from "helium-sdx";

const source = new Source(1);
const sourceArray = new SourceArray([1, 2, 3]);
const sourceMap = new SourceMap([["a", 1], ["b", 2], ["c", 3]]);
const state = Sourcify({
  a: 1,
  b: {
    c: 3,
    d: [1, 2, 3]
  }
});

// will run any time source, sourceArray[2], or sourceMap["c"] change
derive(() => {
  console.log(
    source.get() 
    + sourceArray.get(2)
    + sourceMap.get("c")
  )
});

// verbose derivation args
derive({
  // if given an anchor, deriver will only run when that anchor allows it
  anchor: "NO_ANCHOR",
  // how long to allow for sources to change before responding
  batching: "fiveSec",
  // will run again if a source is updated to have the same value as it already has
  allowEqualValueUpdates: true,
  // performance hack for derivers with no conditionally accessed sources
  dependenciesNeverChange: true,
  fn: () => {
    // this deriver will now output debug data
    DerivationManager.debugDeriver(); 
    console.log(state.a + state.b.c);
  }
});


// switch will only output "even" or "odd" when it switches from one to the other
deriverSwitch({
  watch: () => (source.get() + state.a) % 2,
  responses: [
    { match: 0, action: () => console.log("even")},
    { test: /1/, action: () => "TRY_NEXT_ACTION"},
    { match: 1, action: () => console.log("odd")}
  ]
});


// similar to above with a "DdxSource" instead
const ddxSource = new DdxSource(
  () => (source.get() + state.a) % 2
);
derive(() => 
  console.log(ddxSource.get() === 0 ? "even" : "odd")
)


// a way to handle async in SDx
derive(() => {
  const asyncVal = awaitSource("someId", () => 
    new Promise<number>((res) => setTimeout(res, 1500))
  );
  // first run
  if (asyncVal === undefined) {
    console.log("Waiting for promise to resolve");
  } else {
    // 1.5 seconds later
    console.log(asyncVal);
  }
})

---

For web app stuff, checkout helium-ui

P.S. I hope something good happens to you today