solid-ctrl-flow

Control flow components for "solid-js". It's always under hard development

Components

SameContext

Makes its children inherit the Contexts of the provided Owner

const owner = ...;
return <>
  <SameContext owner={owner}>
    ...
  </SameContext>
</>

Enfold

Eventually wraps its content into a template if a certain condition is met. The following code

const value = true;
return <>
  <Enfold when={value} template={c => <div style={{ background: "red" }}>{c()}</div>}>
    CONTENT
  </Enfold>
</>

Is equivalent to this

return <>
  <div style={{ background: "red" }}>
    CONTENT
  </div>
</>

And if value was falsish, it would have been equivalent to this

return <>CONTENT</>

If you are NOT wrapping the content with a context provider you can set the recycled attribute to true in order to NOT run again the whole content each time its template gets added/removed, in this case the Owner of the content won't be child of the template one

return <>
  <Enfold recycled when={value} template={c => <ctx.Provider value={2} children={c()} />}>
    {/* This won't be 2 */}
    {useContext(ctx)}
  </Enfold>
</>

On - Case

Allows you to not repeat the same condition across many Match components. The following code

const value = 1;
return <>
  <Switch>
    <On value={value}>
      <Case value={1}>One</Case>
      <Case value={2}>Two</Case>
      <Case pred={x => `${x}`.length === 3}>Long</Case>
    </On>
    <Match when>Default</Match>
  </Switch>
</>

Is equivalent to this

const value = 1;
return <>
  <Switch>
    <Match when={value === 1}>One</Match>
    <Match when={value === 2}>Two</Match>
    <Match when={`${value}`.length === 3}>Long</Match>
    <Match when>Default</Match>
  </Switch>
</>

createExtractor()

Creates a context for components that may need to be out of their parent in certain conditions. If you have this component

const myCustomExtractor = createExtractor();

function MyCustomComponent() {
  return <>
    1
    <myCustomExtractor.Source>
      2 {/* THIS WILL BE MOVED INSIDE THE "Dest" */}
    </myCustomExtractor.Source>
    3
  </>
}

If you use it normally it will output 4, 1, 2, 3, 5

return <>
  4
  <MyCustomComponent />
  5
</>

But if you use it together with a Dest and a Joint it will output 6, 7, 8, 2, 9, 10, 11, 1, 3, 12, 13, 14

return <>
  6
  <myCustomExtractor.Joint>
    7
    <div>
      8
      <myCustomExtractor.Dest /> {/* THE CONTENT OF "Source" WILL BE MOVED HERE */}
      9
    </div>
    10
    <div>
      11
      <MyCustomComponent />
      12
    </div>
    13
  </myCustomExtractor.Joint>
  14
</>

The Joint component is necessary for the Source and the Dest to communicate with each other. For example this will output 15, 16, 17, 18, 19, 1, 2, 3, 20, 21

return <>
  15
  <div>
    16
    <myCustomExtractor.Dest />
    17
  </div>
  18
  <div>
    19
    <MyCustomComponent />
    20
  </div>
  21
</>

Notice that you can use a Source component without adding it to the DOM:

<myCustomExtractor.Source>
  {/* This doesn't get returned, but still gets shown if there is an available "Dest" */}
  Something
</myCustomExtractor.Source>
return <>Something else</>

When something gets moved from a Source to a Dest, it will inherit contexts from its destination, UNLESS you use the sameContext attribute

return <>
  <myCustomExtractor.Source sameContext>
    ...
  </myCustomExtractor.Source>
</>

Utility

Bindings

Functions that create bindings between Signals

bind()

Creates a one-way binding between two Signals

bindTwoWay()

Creates a two-way binding between two Signals

toSetter()

Creates a full-fledged solid Setter from a normal one

toSignal()

Creates a Signal from a property of an object

unwrapSignal()

A Signal-specific version of unwrap() that allows the destructuring of its result

forceSignal()

Creates a Signal that behaves like the input one, with the only difference that each call to the setter will trigger the effects even if the value didn't change

ReactiveContext.create()

Method that creates a reactive version of a solid Context with some additional built-in functionalities

const ctx = ReactiveContext.create("SOMETHING");
const underlyingNormalContext = ctx.ctx;
const valueAccessorForTheCurrentOwner = ctx.get;
const value = ctx();

runWithContext()

Creates a context scope that persists for the duration of a function

unwrap()

Calls an Accessor maintaining its reactivity at 1 level

debug()

Allows you to define ui section that are only visible in debug or NOT in debug

const value = false;
return <>
  <debug.Provider value={value}>
    {/* (A LOT OF NESTING...) */}
    <Show when={debug()}>
      THIS WOULD BE VISIBLE IF "value" HAD BEEN {true}
    </Show>
  </debug.Provider>
</>

untrackCall()

Calls a function untracking what happens inside of it but not what gets passed as its argument

createReactiveResource()

Like createResource() but the provided function will be reactive

memoProps()

Creates a partial version of an object with memoized remaining properties

splitAndMemoProps()

Like splitProps() but memoizes the whole local part