A port of the SolidJS Community VSCode snippets extension. Includes support for both JavaScript and Typescript.
Use your favorite vim plugin manager to install UltiSnips and the SolidJS snippets. Below is an example in vim-plug.
call plug#begin('~/.vim/plugged')
Plug 'SirVer/ultisnips'
Plug 'scdailey/vim-solidjs-snippets'
call plug#end()Once you have installed these you can load the snippets into a completion engine such as CoC.
Below you will find a table of the available snippets. This table has been pulled directly from the SolidJS Community plugin for VSCode.
| Trigger | Content | Languages |
|---|---|---|
sinput→ |
Input two-way binding | jsx, tsx |
Toggle Code Snippet<input type="${1:text}" value={${2:value}()} onInput={e => ${3:setValue}(e.currentTarget.value)}/> | ||
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 Snippetconst ${1:${TM_FILENAME_BASE}}: Component<{$2}> = (props) => {
$0
return <div></div>;
}; | ||
spcomp→ |
Solid empty Parent Component | tsx |
Toggle Code Snippetconst ${1:${TM_FILENAME_BASE}}: ParentComponent<{$2}> = (props) => {
$0
return <div>{props.children}</div>;
}; | ||
sfcomp→ |
Solid empty Flow Component | tsx |
Toggle Code Snippetconst ${1:${TM_FILENAME_BASE}}: FlowComponent<{$2}, ${3:JSX.Element}> = (props) => {
$0
return <div>{props.children}</div>;
}; | ||
svcomp→ |
Solid empty Void Component | tsx |
Toggle Code Snippetconst ${1:${TM_FILENAME_BASE}}: VoidComponent<{$2}> = (props) => {
$0
return <div></div>;
}; | ||
scompi→ |
Solid empty function component. With Imports | tsx |
Toggle Code Snippetimport { 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 Snippetimport { 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 Snippetimport { 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 Snippetimport { 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 Snippetimport { 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 Snippetconst ${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 Snippetimport { 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}>;
}; | ||
sctxp→ |
Solid Context Provider component | jsx |
Toggle Code Snippetimport { 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 Snippetimport { 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); | ||
ssig→ |
Simple createSignal | ts, tsx, js, jsx |
Toggle Code Snippetconst [${1:state}, set${1/(.*)/${1:/capitalize}/}] = createSignal(${2}); | ||
seff→ |
Simple createEffect | ts, tsx, js, jsx |
Toggle Code SnippetcreateEffect(() => {
const value = ${1:source}();
$0
}); | ||
seffon→ |
createEffect with explicit sources | ts, tsx, js, jsx |
Toggle Code SnippetcreateEffect(on(${1: source}, (value, prev) => {
$0
})); | ||
smemo→ |
Simple createMemo | ts, tsx, js, jsx |
Toggle Code Snippetconst ${1:value} = createMemo(() => $0); | ||
smemoon→ |
createMemo with explicit sources | ts, tsx, js, jsx |
Toggle Code Snippetconst ${1:value} = createMemo(on(${2:value}, (value, prev) => $0)); | ||