Skip to content

Latest commit

 

History

History
396 lines (328 loc) · 10.2 KB

README.md

File metadata and controls

396 lines (328 loc) · 10.2 KB
Raw

vim-solidjs-snippets

A port of the SolidJS Community VSCode snippets extension. Includes support for both JavaScript and Typescript.

Installation

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.

Snippets

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

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)}/>

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);

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));