getContext inside untrack is undefined about signals

[mihar-22]

• Effects in this library are immedately executed so no need to call tick.

• Creating a context API would look like this:

import { getContext, setContext } from '@maverick-js/signals';


interface Context<T> {
  readonly id: symbol;
  readonly defaultValue: T;
}

function createContext<T>(defaultValue?: T): Context<T> {
  const id = Symbol();
  return {
    id,
    defaultValue
  }
}

function provideContext<T>(context: Context<T>, value?: T) {
  setContext(context.id, value ?? context.defaultValue);
}

function useContext<T>(context: Context<T>): T {
  return getContext(context.id);
}

Context works within scopes which you can create via createRoot(fn). As long as you're executing within a scope then context will work. You can also create a scope yourself scope = createScope() and then execute a function later by scoped(fn, scope).

[mihar-22]

Untrack in this library removes the current scope (i.e., context). The peek function is what you're looking for.

[titoBouzout]

I am trying to implement a context provider around the lines of solid. Question, a renderEffect can be written as follows?

function renderEffect(fn) {
  effect(()=>{
     fn()
  })
  tick()
}

Roughly what I have is this:

import { root, getContext, setContext, peek, tick } from "@maverick-js/signals";

function Context(defaultValue = undefined) {
	const id = Symbol();
	function Context(newValue, fn) {
		if (newValue === undefined) {
			return getContext(id) ?? defaultValue;
		} else {
			let res;
			effect(() => {
				setContext(id, newValue);
				peek(() => {
					res = fn();
				});
			});
			tick();

			return res;
		}
	}

	return Context;
}

function context(defaultValue = undefined) {
	const ctx = Context(defaultValue);
	ctx.Provider = (props) => ctx(props.value, () => toHTML(props.children));

	return ctx;
}

// used in js as

const MyContext = context("test");

MyContext("new value", function () {
	const value = MyContext();
	console.log("value is", value);
});

// jsx

function Component() {
	return (
		<MyContext.Provider value="other value">
			<Display />
		</MyContext.Provider>
	);
}

function Display() {
	const value = MyContext();
	return value;
}

[titoBouzout]

@mihar-22 can you please give an example of how you implement a context provider and a renderEffect? Thanks!