solid-ctrl-flow v1.0.56
solid-ctrl-flow
Control flow components for "solid-js". It's always under hard development
Components
SameContext
Makes its children inherit the Context
s 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 Signal
s
bind()
Creates a one-way binding between two
Signal
s
bindTwoWay()
Creates a two-way binding between two
Signal
s
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 ofunwrap()
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
22 days ago
22 days ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago