Coder Social home page Coder Social logo

solidjs-community / solid-snippets Goto Github PK

View Code? Open in Web Editor NEW
29.0 2.0 2.0 134 KB

VSCode extension with helpful code snippets for SolidJS.

Home Page: https://marketplace.visualstudio.com/items?itemName=solidjs-community.solid-snippets

License: MIT License

JavaScript 100.00%
solid-js vscode-extension vscode-snippets

solid-snippets's Introduction

Solid Snippets

Solid Snippets

VSCode extension with helpful code snippets for SolidJS.

Available on:

Snippets

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

Contributing

This is an open source project open to everyone. Contributions are welcome. (github)

If you are contributing a snippet, please read about the naming convention below and update only the snippet files. (readme and package.json are updated automatically) You can use a Snippet Generator and Solid Playground 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 package manager. Once node modules are installed, you can use 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:

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

# 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

solid-snippets's People

Contributors

chrisanicolaou avatar maciejlys avatar thetarnav avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar

Forkers

dseeni maciejlys

solid-snippets's Issues

Export default for tsx files

Please add export default to tsx snippets, its annoying to add them by hand, any reason why they are excluded but they work in jsx files?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.