Component |
scomp→ |
Base for an empty solidJS component |
jsx |
Toggle Code Snippet
function ${1:${TM_FILENAME_BASE}}() {
return (
<div>${1:${TM_FILENAME_BASE}}</div>
);
}
export default ${1:${TM_FILENAME_BASE}};
|
scomp→ |
Solid empty function component |
tsx |
Toggle Code Snippet
const ${1:${TM_FILENAME_BASE}}: Component<{$2}> = (props) => {
$0
return <div></div>;
};
|
spcomp→ |
Solid empty Parent Component |
tsx |
Toggle Code Snippet
const ${1:${TM_FILENAME_BASE}}: ParentComponent<{$2}> = (props) => {
$0
return <div>{props.children}</div>;
};
|
sfcomp→ |
Solid empty Flow Component |
tsx |
Toggle Code Snippet
const ${1:${TM_FILENAME_BASE}}: FlowComponent<{$2}, ${3:JSX.Element}> = (props) => {
$0
return <div>{props.children}</div>;
};
|
svcomp→ |
Solid empty Void Component |
tsx |
Toggle Code Snippet
const ${1:${TM_FILENAME_BASE}}: VoidComponent<{$2}> = (props) => {
$0
return <div></div>;
};
|
scompi→ |
Solid empty function component. With Imports |
tsx |
Toggle Code Snippet
import { Component } from "solid-js";
const ${1:${TM_FILENAME_BASE}}: Component<{$2}> = (props) => {
$0
return <div></div>;
};
|
scompie→ |
Solid empty function component. With Imports and default export |
tsx |
Toggle Code Snippet
import { Component } from "solid-js";
const ${1:${TM_FILENAME_BASE}}: Component<{$2}> = (props) => {
$0
return <div></div>;
};
export default ${1:${TM_FILENAME_BASE}};
|
spcompi→ |
Solid empty Parent Component. With Imports |
tsx |
Toggle Code Snippet
import { ParentComponent } from "solid-js";
const ${1:${TM_FILENAME_BASE}}: ParentComponent<{$2}> = (props) => {
$0
return <div>{props.children}</div>;
};
|
sfcompi→ |
Solid empty Flow Component. With Imports |
tsx |
Toggle Code Snippet
import { FlowComponent, JSX } from "solid-js";
const ${1:${TM_FILENAME_BASE}}: FlowComponent<{$2}, ${3:JSX.Element}> = (props) => {
$0
return <div>{props.children}</div>;
};
|
svcompi→ |
Solid empty Void Component. With Imports |
tsx |
Toggle Code Snippet
import { VoidComponent } from "solid-js";
const ${1:${TM_FILENAME_BASE}}: VoidComponent<{$2}> = (props) => {
$0
return <div></div>;
};
|
shtmlcomp→ |
Component extending an HTML Element |
tsx |
Toggle Code Snippet
const ${1:${TM_FILENAME_BASE}}: ParentComponent<
ComponentProps<"${2:div}"> & {
$0
}
> = (props) => {
const [local, attrs] = splitProps(props, []);
return <${2:div} {...attrs}>{props.children}</${2:div}>;
};
|
shtmlcompi→ |
Component extending an HTML Element. With Imports |
tsx |
Toggle Code Snippet
import { ParentComponent, splitProps, ComponentProps } from "solid-js";
const ${1:${TM_FILENAME_BASE}}: ParentComponent<
ComponentProps<"${2:div}"> & {
$0
}
> = (props) => {
const [local, attrs] = splitProps(props, []);
return <${2:div} {...attrs}>{props.children}</${2:div}>;
};
|
Context |
sctxp→ |
Solid Context Provider component |
jsx |
Toggle Code Snippet
import { createContext, createSignal, useContext } from "solid-js";
const ${TM_FILENAME_BASE/(.*?)\Context.*/${1:/capitalize}/i}Context = createContext();
export function ${TM_FILENAME_BASE/(.*?)\Context.*/${1:/capitalize}/i}Provider(props) {
const [${TM_FILENAME_BASE/(.*?)\Context.*/${1:/downcase}/i}, set${TM_FILENAME_BASE/(.*?)\Context.*/${1:/capitalize}/i}] = createSignal(props.${TM_FILENAME_BASE/(.*?)\Context.*/${1:/downcase}/i} || ""),
store = [${TM_FILENAME_BASE/(.*?)\Context.*/${1:/downcase}/i}, set${TM_FILENAME_BASE/(.*?)\Context.*/${1:/capitalize}/i}];
return (
<${TM_FILENAME_BASE/(.*?)\Context.*/${1:/capitalize}/i}Context.Provider value={store}>{props.children}</${TM_FILENAME_BASE/(.*?)\Context.*/${1:/capitalize}/i}Context.Provider>
);
}
export function use${TM_FILENAME_BASE/(.*?)\Context.*/${1:/capitalize}/i}() {
return useContext(${TM_FILENAME_BASE/(.*?)\Context.*/${1:/capitalize}/i}Context);
}
|
sctxp→ |
Solid Context Provider component |
tsx |
Toggle Code Snippet
import { createContext, useContext, ParentComponent } from "solid-js";
import { createStore } from "solid-js/store";
const defaultState = {};
const ${1:Name}Context = createContext<[state: typeof defaultState, actions: {}]>([
defaultState,
{},
]);
export const ${1/(.*)/${1:/capitalize}/}Provider: ParentComponent = (props) => {
const [state, setState] = createStore(defaultState);
return (
<${1/(.*)/${1:/capitalize}/}Context.Provider value={[state, {}]}>
{props.children}
</${1/(.*)/${1:/capitalize}/}Context.Provider>
);
};
export const use${1/(.*)/${1:/capitalize}/} = () => useContext(${1/(.*)/${1:/capitalize}/}Context);
|
JSX |
sinput→ |
Input two-way binding |
jsx, tsx |
Toggle Code Snippet
<input type="${1:text}" value={${2:value}()} onInput={e => ${3:setValue}(e.currentTarget.value)}/>
|
Reactivity |
ssig→ |
Simple createSignal |
ts, tsx, js, jsx |
Toggle Code Snippet
const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = createSignal(${2});
|
seff→ |
Simple createEffect |
ts, tsx, js, jsx |
Toggle Code Snippet
createEffect(() => {
const value = ${1:source}();
$0
});
|
seffon→ |
createEffect with explicit sources |
ts, tsx, js, jsx |
Toggle Code Snippet
createEffect(on(${1: source}, (value, prev) => {
$0
}));
|
smemo→ |
Simple createMemo |
ts, tsx, js, jsx |
Toggle Code Snippet
const ${1:value} = createMemo(() => $0);
|
smemoon→ |
createMemo with explicit sources |
ts, tsx, js, jsx |
Toggle Code Snippet
const ${1:value} = createMemo(on(${2:value}, (value, prev) => $0));
|
