Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/solidjs-community/solid-snippets

VSCode extension with helpful code snippets for SolidJS.
https://github.com/solidjs-community/solid-snippets

solid-js vscode-extension vscode-snippets

Last synced: 2 months ago
JSON representation

VSCode extension with helpful code snippets for SolidJS.

Host: GitHub
URL: https://github.com/solidjs-community/solid-snippets
Owner: solidjs-community
License: mit
Created: 2022-05-26T21:38:45.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2023-01-15T17:33:00.000Z (about 2 years ago)
Last Synced: 2024-04-14T00:25:51.564Z (9 months ago)
Topics: solid-js, vscode-extension, vscode-snippets
Language: JavaScript
Homepage: https://marketplace.visualstudio.com/items?itemName=solidjs-community.solid-snippets
Size: 131 KB
Stars: 27
Watchers: 2
Forks: 2
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

        


  

    

  



# Solid Snippets

VSCode extension with helpful code snippets for SolidJS.

Available on:

- [**VSCode Marketplace**](https://marketplace.visualstudio.com/items?itemName=solidjs-community.solid-snippets)

- [**Open VSX**](https://open-vsx.org/extension/solidjs-community/solid-snippets)

## Snippets

  

    

      

        Trigger

        Content

        Languages

      

    

    
JSX

      

        sinput→

        Input two-way binding

        jsx, tsx

      

      

      ^{Toggle Code Snippet}

```tsx

 ${3:setValue}(e.currentTarget.value)}/>

```

Component

      

        scomp→

        Base for an empty solidJS component

        jsx

      

      

      ^{Toggle Code Snippet}

```tsx

 function ${1:${TM_FILENAME_BASE}}() {

  return (

    
${1:${TM_FILENAME_BASE}}

  );

}

  export default ${1:${TM_FILENAME_BASE}};

```

      

        scomp→

        Solid empty function component

        tsx

      

      

      ^{Toggle Code Snippet}

```tsx

const ${1:${TM_FILENAME_BASE}}: Component<{$2}> = (props) => {

  $0

  return 
;

};

```

      

        spcomp→

        Solid empty Parent Component

        tsx

      

      

      ^{Toggle Code Snippet}

```tsx

const ${1:${TM_FILENAME_BASE}}: ParentComponent<{$2}> = (props) => {

  $0

  return 
{props.children};

};

```

      

        sfcomp→

        Solid empty Flow Component

        tsx

      

      

      ^{Toggle Code Snippet}

```tsx

const ${1:${TM_FILENAME_BASE}}: FlowComponent<{$2}, ${3:JSX.Element}> = (props) => {

  $0

  return 
{props.children};

};

```

      

        svcomp→

        Solid empty Void Component

        tsx

      

      

      ^{Toggle Code Snippet}

```tsx

const ${1:${TM_FILENAME_BASE}}: VoidComponent<{$2}> = (props) => {

  $0

  return 
;

};

```

      

        scompi→

        Solid empty function component. With Imports

        tsx

      

      

      ^{Toggle Code Snippet}

```tsx

import { Component } from "solid-js";

const ${1:${TM_FILENAME_BASE}}: Component<{$2}> = (props) => {

  $0

  return 
;

};

```

      

        scompie→

        Solid empty function component. With Imports and default export

        tsx

      

      

      ^{Toggle Code Snippet}

```tsx

import { Component } from "solid-js";

const ${1:${TM_FILENAME_BASE}}: Component<{$2}> = (props) => {

  $0

  return 
;

};

export default ${1:${TM_FILENAME_BASE}};

```

      

        spcompi→

        Solid empty Parent Component. With Imports

        tsx

      

      

      ^{Toggle Code Snippet}

```tsx

import { ParentComponent } from "solid-js";

const ${1:${TM_FILENAME_BASE}}: ParentComponent<{$2}> = (props) => {

  $0

  return 
{props.children};

};

```

      

        sfcompi→

        Solid empty Flow Component. With Imports

        tsx

      

      

      ^{Toggle Code Snippet}

```tsx

import { FlowComponent, JSX } from "solid-js";

const ${1:${TM_FILENAME_BASE}}: FlowComponent<{$2}, ${3:JSX.Element}> = (props) => {

  $0

  return 
{props.children};

};

```

      

        svcompi→

        Solid empty Void Component. With Imports

        tsx

      

      

      ^{Toggle Code Snippet}

```tsx

import { VoidComponent } from "solid-js";

const ${1:${TM_FILENAME_BASE}}: VoidComponent<{$2}> = (props) => {

  $0

  return 
;

};

```

      

        shtmlcomp→

        Component extending an HTML Element

        tsx

      

      

      ^{Toggle Code Snippet}

```tsx

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}

```tsx

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}

```tsx

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}

```tsx

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}

```tsx

const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = createSignal(${2});

```

      

        seff→

        Simple createEffect

        ts, tsx, js, jsx

      

      

      ^{Toggle Code Snippet}

```tsx

createEffect(() => {

  const value = ${1:source}();

  $0

});

```

      

        seffon→

        createEffect with explicit sources

        ts, tsx, js, jsx

      

      

      ^{Toggle Code Snippet}

```tsx

createEffect(on(${1: source}, (value, prev) => {

  $0

}));

```

      

        smemo→

        Simple createMemo

        ts, tsx, js, jsx

      

      

      ^{Toggle Code Snippet}

```tsx

const ${1:value} = createMemo(() => $0);

```

      

        smemoon→

        createMemo with explicit sources

        ts, tsx, js, jsx

      

      

      ^{Toggle Code Snippet}

```tsx

const ${1:value} = createMemo(on(${2:value}, (value, prev) => $0));

```

## Contributing

This is an open source project open to everyone. Contributions are welcome. ([github](https://github.com/solidjs-community/solid-snippets))

If you are contributing a snippet, please read about the [naming convention](#naming-convention) below and update only the snippet files. _(readme and package.json are updated automatically)_ You can use a [Snippet Generator](https://snippet-generator.app) and [Solid Playground](https://playground.solidjs.com) to get desired code.

Downloading and installing the repository isn't required to work on snippets. But if you want to test your changes before commiting, we use a [pnpm](https://pnpm.io) package manager. Once node modules are installed, you can use [CLI Scripts](#cli-scripts) to build and install locally built extension. _(You might have to reload your vscode window to apply extension update)_

### Naming Convention

When creating new snippets, please name the files with according suffix representing the target language:

```sh

snippets/

  # snippets for "Category Name" category only for .ts and tsx files

  Category-Name.ts.json

  # "Context" snippets only for .jsx

  context.jsx.json

  # "Component" snippets only for .tsx

  component.tsx.json

  # "Component" snippets for both .jsx and .tsx

  component.jsx.tsx.json

  # universal snippets for all languages (js, jsx, ts, tsx)

  effect.json

```

### CLI Scripts

```sh

# update snippets table & package.json config

pnpm run update-snippets

# update snippets & build extension package

pnpm run build

# install built extension package

pnpm run install-extension

```