Solid Bytes for VSCode

This Visual Studio Code extension offers a comprehensive collection of Solid snippets designed to boost the productivity of developers. With a focus on flexibility, these snippets cater to a wide range of Solid functionalities, from component creation and reactive utilities to context management and stores. While the snippets are not customizable, their design ensures they can be seamlessly integrated into various coding styles and project requirements.

Features

• 🛠️ Component Creation: Effortlessly scaffold Solid components, including context providers and consumers, lazy-loaded components, and unique ID generators.
• ⚡ Reactive Utilities: Access snippets for creating signals, effects, memos, resources, and more, streamlining state management and reactive programming.
• 🗃️ Store Integration: Utilize snippets for creating and managing Solid stores, enhancing global state management across your application.
• 🛡️ Error Handling and Resource Loading: Implement error boundaries and suspense components for a more robust and performant application.
• 🌟 Flexible and Intuitive: Designed to be flexible, these snippets fit a wide array of use cases and coding practices, ensuring developers can quickly adapt them to their needs.
• 🚀 Advanced Templating: Take advantage of features like automatic capitalization and insertion of selected text to speed up development.

Installation

1. Open Visual Studio Code.
2. Press Ctrl+P (Windows/Linux) or Cmd+P (macOS) to open the Quick Open dialog.
3. Type ext install solid-bytes
4. Hit Enter to install the extension.

Alternatively, search for "Solid Bytes" in the Extensions view (Ctrl+Shift+X or Cmd+Shift+X).

Usage

To efficiently use a snippet within your Solid projects, simply start typing its prefix in your project files. The extension will display a list of snippets that match the typed prefix. When you select a snippet, it inserts the code into your file, positioning the cursor right at the end of the function or component name.

This cursor placement is specifically designed to streamline the importing process, allowing you to quickly import the necessary functions or components using cmd + . without having to do it manually.

For the full list scroll to here

Contributing

Contributions are welcome! If you have ideas for new snippets, improvements, or find any issues, please open an issue or submit a pull request on our GitHub repository.

License

This extension is released under the MIT License.

Acknowledgments

Thank you to the Solid community and all contributors. Your support and contributions are greatly appreciated.

---

Stay tuned for updates as we continue to expand the snippet collection and improve the extension.

Full List

createSignal • createSignal.ts • createEffect • createEffect.ts • createMemo • createMemo.ts • createResource • Solid Component • Solid Component.ts • Solid Component Export • Solid Component Export.ts • Dynamic • ErrorBoundary • For • Index • Portal • Show • Switch / Match • Suspense • SuspenseList • children • context • createUniqueId • lazy • createStore • createStore.ts • batch • catchError •

createSignal

^{View Details}

Creates a simple reactive state with a getter and setter

"SSignal" js,jsx

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

_{Back to top}

createSignal.ts

^{View Details}

Creates a simple reactive state with a getter and setter

"SSignal" ts,tsx

const [${3:state}, set${3/(.*)/${1:/capitalize}/}] = createSignal${1}<${2}>(${4:null})

_{Back to top}

createEffect

^{View Details}

Creates a reactive computation that runs after the render phase

"SEffect" js,jsx

createEffect${1}(() => { ${2} })

_{Back to top}

createEffect.ts

^{View Details}

Creates a reactive computation that runs after the render phase

"SEffect" ts,tsx

createEffect${1}<${2}>(() => { ${3} })

_{Back to top}

createMemo

^{View Details}

Creates a readonly derived reactive memoized signal

"SMemo" js,jsx

const ${2:value} = createMemo${1}(() => ${3})

_{Back to top}

createMemo.ts

^{View Details}

Creates a readonly derived reactive memoized signal

"SMemo" ts,tsx

const ${3:value} = createMemo${1}<${2}>(() => {$4})

_{Back to top}

createResource

^{View Details}

Creates a resource that wraps a repeated promise in a reactive pattern

"SResource" js,jsx

const [${2:data}, { mutate, refetch }] = createResource${1}(${3})

_{Back to top}

Solid Component

^{View Details}

Solid Component

"SComponent" js,jsx

const ${1:${TM_FILENAME_BASE}} = () => {
  return <div>${1:${TM_FILENAME_BASE}}</div>
}

_{Back to top}

Solid Component.ts

^{View Details}

Solid Component

"SComponent" ts,tsx

type ${1:${TM_FILENAME_BASE}}Props = {}
const ${1:${TM_FILENAME_BASE}}: Component<${1:${TM_FILENAME_BASE}}Props> = (props) => {
  return <div>${1:${TM_FILENAME_BASE}}</div>
}

_{Back to top}

Solid Component Export

^{View Details}

Solid Component Export

"SExportComponent" js,jsx

export const ${1:${TM_FILENAME_BASE}} = () => {
  return <div>${1:${TM_FILENAME_BASE}}</div>
}

_{Back to top}

Solid Component Export.ts

^{View Details}

Solid Component Export

"SExportComponent" ts,tsx

type ${1:${TM_FILENAME_BASE}}Props = {}
export const ${1:${TM_FILENAME_BASE}}: Component<${1:${TM_FILENAME_BASE}}Props> = (props) => {
  return <div>${1:${TM_FILENAME_BASE}}</div>
}

_{Back to top}

Dynamic

^{View Details}

Renders an arbitrary custom or native component and passes the other props

"SDynamic" js,jsx

<Dynamic${1} component={${2:<MyComponent />}} ${3} /

_{Back to top}

ErrorBoundary

^{View Details}

Catches uncaught errors inside components and renders a fallback content. Errors thrown from the fallback can be caught by a parent ErrorBoundary

"SErrorBoundary" js,jsx

<ErrorBoundary${1} fallback={(error, reset) => <div onClick={reset}>Error: {error.toString()}</div>}>
  ${2:${TM_SELECTED_TEXT}}
</ErrorBoundary>

_{Back to top}

For

^{View Details}

Creates a list of elements from a list. It receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned

"SFor" js,jsx

<For${1} each={${2:list}()} fallback={<div>Loading...</div>}>
  {(${3:item}) => (
   ${4:<li>{${5:item.name}\}</li>}
  )}
</For>

_{Back to top}

Index

^{View Details}

Non-keyed iteration over a list creating elements from its items. To be used if you have a list with fixed indices, but changing values. If you have a list with changing indices, better use ``

"SIndex" js,jsx

<Index${1} each={${2:list}()} fallback={<div>Loading...</div>}>
  {(${3:item}) => (
    ${4:<li>{${5:item.name}\}</li>}
  )}
</Index>

_{Back to top}

Portal

^{View Details}

Useful for inserting modals and tooltips outside of an cropping layout. If no mount point is given, the portal is inserted in document.body; it is wrapped in a `

` unless the target is document.head or `isSVG` is true. setting `useShadow` to true places the element in a shadow root to isolate styles

"SPortal" js,jsx

<Portal${1} mount={document.getElementById("${2}")}>
  ${3:<div>${4:My Content}</div>}
</Portal>

_{Back to top}

Show

^{View Details}

Conditionally render its children or an optional fallback componentConditionally render its children or an optional fallback componentConditionally render its children or an optional fallback component

"SShow" js,jsx

<Show${1} when=${2:state.count > 0} fallback={<div>Loading...</div>}>
  ${3:<div>$4:My Content}</div>}
</Show>

_{Back to top}

Switch / Match

^{View Details}

Switches between content based on mutually exclusive conditions. Selects a content based on condition when inside a `Switch` control flow

"SSwitch" js,jsx

<Switch${1} fallback={<div>Not Found</div>}>
  <Match${2} when={${3:state.route === "home"}}>
    ${4:<Home />}
  </Match>
  <Match when={${5:state.route === "settings"}}>
    ${6:<Settings />}
  </Match>
</Switch>

_{Back to top}

Suspense

^{View Details}

Tracks all resources inside a component and renders a fallback until they are all resolved

"SSuspense" js,jsx

<Suspense${1} fallback={<div>Loading...</div>}>
  ${2:${TM_SELECTED_TEXT}}
</Suspense>

_{Back to top}

SuspenseList

^{View Details}

**[experimental]** Controls the order in which suspended content is rendered

"SSuspenseList" js,jsx

<SuspenseList${1} revealOrder="${3|forwards,backwards,together|}" tail="${4|collapsed,hidden|}">
  <Suspense${2} fallback={<h2>Loading...</h2>}>
    ${5:<div>{resource.user\}</div>}
  </Suspense>
</SuspenseList>

_{Back to top}

children

^{View Details}

Resolves child elements to help interact with children

"SChildren" js,jsx

const ${2} = children${1}(() => ${3:props.children})

_{Back to top}

context

^{View Details}

Creates a Context to handle a state scoped for the children of a component. use a context to receive a scoped state from a parent's Context.Provider

"SContext" js,jsx

export const ${2}Context = createContext${1}(${3})
export function use${2}Context() {
  const context = useContext${1}(${2}Context)
  if (!context) {
    throw new Error("use${2}Context: cannot find a ${2}Context")
  }
  return context
}
export function ${2:Counter}Provider() {
  return (
    <${2:Counter}Context.Provider value={${3:counter}}>
      {props.children}
    </${2:Counter}Context.Provider>
  )
}

_{Back to top}

createUniqueId

^{View Details}

A universal id generator that is stable across server/browser. Note: on the server this only works under hydratable components

"SUuid" js,jsx

const ${2:id} = createUniqueId${1}()

_{Back to top}

lazy

^{View Details}

Used to lazy load components to allow for code splitting. Components are not loaded until rendered

"SLazy" js,jsx

const ${2} = lazy${1}(() => import("${3}"))

_{Back to top}

createStore

^{View Details}

Creates a reactive store that can be read through a proxy object and written with a setter function

"SStore" js,jsx

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

_{Back to top}

createStore.ts

^{View Details}

Creates a reactive store that can be read through a proxy object and written with a setter function

"SStore" ts,tsx

const [${3:state}, set${3/(.*)/${1:/capitalize}/}] = createStore${1}<$2>(${4})

_{Back to top}

batch

^{View Details}

Execute a callback that will not side-effect until its top-most batch is completed

"SBatch" js,jsx

batch${1}(() => { ${2:set${3:State}(${4})} });

_{Back to top}

catchError

^{View Details}

Run an effect whenever an error is thrown within the context of the child scopes

"SCatchError" js,jsx

const ${4:result} = catchError${1}(${2:() => {${3}\}});

_{Back to top}