{"id":20055495,"url":"https://github.com/solidjs-community/solid-snippets","last_synced_at":"2025-05-05T13:32:42.142Z","repository":{"id":39583775,"uuid":"496778951","full_name":"solidjs-community/solid-snippets","owner":"solidjs-community","description":"VSCode extension with helpful code snippets for SolidJS.","archived":false,"fork":false,"pushed_at":"2023-01-15T17:33:00.000Z","size":134,"stargazers_count":27,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-04-14T00:25:51.564Z","etag":null,"topics":["solid-js","vscode-extension","vscode-snippets"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=solidjs-community.solid-snippets","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/solidjs-community.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-26T21:38:45.000Z","updated_at":"2024-04-08T16:14:53.000Z","dependencies_parsed_at":"2023-02-09T23:00:34.684Z","dependency_job_id":null,"html_url":"https://github.com/solidjs-community/solid-snippets","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidjs-community%2Fsolid-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidjs-community%2Fsolid-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidjs-community%2Fsolid-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidjs-community%2Fsolid-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/solidjs-community","download_url":"https://codeload.github.com/solidjs-community/solid-snippets/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224452981,"owners_count":17313668,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["solid-js","vscode-extension","vscode-snippets"],"created_at":"2024-11-13T12:48:12.970Z","updated_at":"2025-05-05T13:32:42.135Z","avatar_url":"https://github.com/solidjs-community.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp\u003e\n  \u003ca href=\"https://github.com/solidjs-community/solid-snippets\"\u003e\n    \u003cimg width=\"100%\" src=\"https://assets.solidjs.com/banner?type=Snippets\u0026background=tiles\u0026project=%20\" alt=\"Solid Snippets\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n# Solid Snippets\n\nVSCode extension with helpful code snippets for SolidJS.\n\nAvailable on:\n\n- [**VSCode Marketplace**](https://marketplace.visualstudio.com/items?itemName=solidjs-community.solid-snippets)\n- [**Open VSX**](https://open-vsx.org/extension/solidjs-community/solid-snippets)\n\n## Snippets\n\n\u003c!-- ⛔️ GENERATE-SNIPPETS-TABLE:START — Do not remove or modify this section. --\u003e\n\n  \u003ctable\u003e\n    \u003cthead\u003e\n      \u003ctr\u003e\n        \u003cth\u003eTrigger\u003c/th\u003e\n        \u003cth\u003eContent\u003c/th\u003e\n        \u003cth\u003eLanguages\u003c/th\u003e\n      \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003ch3\u003eJSX\u003c/h3\u003e\u003c/td\u003e\u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003esinput→\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003eInput two-way binding\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003ejsx, tsx\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003cdetails\u003e\n      \u003csummary\u003e\u003csup\u003eToggle Code Snippet\u003c/sup\u003e\u003c/summary\u003e\n\n```tsx\n\u003cinput type=\"${1:text}\" value={${2:value}()} onInput={e =\u003e ${3:setValue}(e.currentTarget.value)}/\u003e\n```\n\n\u003c/details\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003ch3\u003eComponent\u003c/h3\u003e\u003c/td\u003e\u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003escomp→\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003eBase for an empty solidJS component\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003ejsx\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003cdetails\u003e\n      \u003csummary\u003e\u003csup\u003eToggle Code Snippet\u003c/sup\u003e\u003c/summary\u003e\n\n```tsx\n\n function ${1:${TM_FILENAME_BASE}}() {\n\n  return (\n    \u003cdiv\u003e${1:${TM_FILENAME_BASE}}\u003c/div\u003e\n  );\n}\n  export default ${1:${TM_FILENAME_BASE}};\n```\n\n\u003c/details\u003e\u003c/td\u003e\u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003escomp→\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003eSolid empty function component\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003etsx\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003cdetails\u003e\n      \u003csummary\u003e\u003csup\u003eToggle Code Snippet\u003c/sup\u003e\u003c/summary\u003e\n\n```tsx\nconst ${1:${TM_FILENAME_BASE}}: Component\u003c{$2}\u003e = (props) =\u003e {\n  $0\n  return \u003cdiv\u003e\u003c/div\u003e;\n};\n```\n\n\u003c/details\u003e\u003c/td\u003e\u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003espcomp→\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003eSolid empty Parent Component\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003etsx\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003cdetails\u003e\n      \u003csummary\u003e\u003csup\u003eToggle Code Snippet\u003c/sup\u003e\u003c/summary\u003e\n\n```tsx\nconst ${1:${TM_FILENAME_BASE}}: ParentComponent\u003c{$2}\u003e = (props) =\u003e {\n  $0\n  return \u003cdiv\u003e{props.children}\u003c/div\u003e;\n};\n```\n\n\u003c/details\u003e\u003c/td\u003e\u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003esfcomp→\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003eSolid empty Flow Component\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003etsx\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003cdetails\u003e\n      \u003csummary\u003e\u003csup\u003eToggle Code Snippet\u003c/sup\u003e\u003c/summary\u003e\n\n```tsx\nconst ${1:${TM_FILENAME_BASE}}: FlowComponent\u003c{$2}, ${3:JSX.Element}\u003e = (props) =\u003e {\n  $0\n  return \u003cdiv\u003e{props.children}\u003c/div\u003e;\n};\n```\n\n\u003c/details\u003e\u003c/td\u003e\u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003esvcomp→\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003eSolid empty Void Component\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003etsx\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003cdetails\u003e\n      \u003csummary\u003e\u003csup\u003eToggle Code Snippet\u003c/sup\u003e\u003c/summary\u003e\n\n```tsx\nconst ${1:${TM_FILENAME_BASE}}: VoidComponent\u003c{$2}\u003e = (props) =\u003e {\n  $0\n  return \u003cdiv\u003e\u003c/div\u003e;\n};\n```\n\n\u003c/details\u003e\u003c/td\u003e\u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003escompi→\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003eSolid empty function component. With Imports\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003etsx\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003cdetails\u003e\n      \u003csummary\u003e\u003csup\u003eToggle Code Snippet\u003c/sup\u003e\u003c/summary\u003e\n\n```tsx\nimport { Component } from \"solid-js\";\n\nconst ${1:${TM_FILENAME_BASE}}: Component\u003c{$2}\u003e = (props) =\u003e {\n  $0\n  return \u003cdiv\u003e\u003c/div\u003e;\n};\n```\n\n\u003c/details\u003e\u003c/td\u003e\u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003escompie→\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003eSolid empty function component. With Imports and default export\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003etsx\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003cdetails\u003e\n      \u003csummary\u003e\u003csup\u003eToggle Code Snippet\u003c/sup\u003e\u003c/summary\u003e\n\n```tsx\nimport { Component } from \"solid-js\";\n\nconst ${1:${TM_FILENAME_BASE}}: Component\u003c{$2}\u003e = (props) =\u003e {\n  $0\n  return \u003cdiv\u003e\u003c/div\u003e;\n};\n\nexport default ${1:${TM_FILENAME_BASE}};\n```\n\n\u003c/details\u003e\u003c/td\u003e\u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003espcompi→\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003eSolid empty Parent Component. With Imports\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003etsx\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003cdetails\u003e\n      \u003csummary\u003e\u003csup\u003eToggle Code Snippet\u003c/sup\u003e\u003c/summary\u003e\n\n```tsx\nimport { ParentComponent } from \"solid-js\";\n\nconst ${1:${TM_FILENAME_BASE}}: ParentComponent\u003c{$2}\u003e = (props) =\u003e {\n  $0\n  return \u003cdiv\u003e{props.children}\u003c/div\u003e;\n};\n```\n\n\u003c/details\u003e\u003c/td\u003e\u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003espcompie→\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003eSolid empty Parent Component. With Imports and default export\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003etsx\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003cdetails\u003e\n      \u003csummary\u003e\u003csup\u003eToggle Code Snippet\u003c/sup\u003e\u003c/summary\u003e\n\n```tsx\nimport { ParentComponent } from \"solid-js\";\n\nconst ${1:${TM_FILENAME_BASE}}: ParentComponent\u003c{$2}\u003e = (props) =\u003e {\n  $0\n  return \u003cdiv\u003e{props.children}\u003c/div\u003e;\n};\n\nexport default ${1:${TM_FILENAME_BASE}};\n```\n\n\u003c/details\u003e\u003c/td\u003e\u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003esfcompi→\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003eSolid empty Flow Component. With Imports\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003etsx\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003cdetails\u003e\n      \u003csummary\u003e\u003csup\u003eToggle Code Snippet\u003c/sup\u003e\u003c/summary\u003e\n\n```tsx\nimport { FlowComponent, JSX } from \"solid-js\";\n\nconst ${1:${TM_FILENAME_BASE}}: FlowComponent\u003c{$2}, ${3:JSX.Element}\u003e = (props) =\u003e {\n  $0\n  return \u003cdiv\u003e{props.children}\u003c/div\u003e;\n};\n```\n\n\u003c/details\u003e\u003c/td\u003e\u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003esfcompie→\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003eSolid empty Flow Component. With Imports and default export\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003etsx\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003cdetails\u003e\n      \u003csummary\u003e\u003csup\u003eToggle Code Snippet\u003c/sup\u003e\u003c/summary\u003e\n\n```tsx\nimport { FlowComponent, JSX } from \"solid-js\";\n\nconst ${1:${TM_FILENAME_BASE}}: FlowComponent\u003c{$2}, ${3:JSX.Element}\u003e = (props) =\u003e {\n  $0\n  return \u003cdiv\u003e{props.children}\u003c/div\u003e;\n};\n\nexport default ${1:${TM_FILENAME_BASE}};\n```\n\n\u003c/details\u003e\u003c/td\u003e\u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003esvcompi→\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003eSolid empty Void Component. With Imports\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003etsx\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003cdetails\u003e\n      \u003csummary\u003e\u003csup\u003eToggle Code Snippet\u003c/sup\u003e\u003c/summary\u003e\n\n```tsx\nimport { VoidComponent } from \"solid-js\";\n\nconst ${1:${TM_FILENAME_BASE}}: VoidComponent\u003c{$2}\u003e = (props) =\u003e {\n  $0\n  return \u003cdiv\u003e\u003c/div\u003e;\n};\n```\n\n\u003c/details\u003e\u003c/td\u003e\u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003esvcompie→\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003eSolid empty Void Component. With Imports and default export\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003etsx\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003cdetails\u003e\n      \u003csummary\u003e\u003csup\u003eToggle Code Snippet\u003c/sup\u003e\u003c/summary\u003e\n\n```tsx\nimport { VoidComponent } from \"solid-js\";\n\nconst ${1:${TM_FILENAME_BASE}}: VoidComponent\u003c{$2}\u003e = (props) =\u003e {\n  $0\n  return \u003cdiv\u003e\u003c/div\u003e;\n};\n\nexport default ${1:${TM_FILENAME_BASE}};\n```\n\n\u003c/details\u003e\u003c/td\u003e\u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003eshtmlcomp→\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003eComponent extending an HTML Element\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003etsx\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003cdetails\u003e\n      \u003csummary\u003e\u003csup\u003eToggle Code Snippet\u003c/sup\u003e\u003c/summary\u003e\n\n```tsx\nconst ${1:${TM_FILENAME_BASE}}: ParentComponent\u003c\n  ComponentProps\u003c\"${2:div}\"\u003e \u0026 {\n    $0\n  }\n\u003e = (props) =\u003e {\n  const [local, attrs] = splitProps(props, []);\n\n  return \u003c${2:div} {...attrs}\u003e{props.children}\u003c/${2:div}\u003e;\n};\n```\n\n\u003c/details\u003e\u003c/td\u003e\u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003eshtmlcompi→\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003eComponent extending an HTML Element. With Imports\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003etsx\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003cdetails\u003e\n      \u003csummary\u003e\u003csup\u003eToggle Code Snippet\u003c/sup\u003e\u003c/summary\u003e\n\n```tsx\nimport { ParentComponent, splitProps, ComponentProps } from \"solid-js\";\n\nconst ${1:${TM_FILENAME_BASE}}: ParentComponent\u003c\n  ComponentProps\u003c\"${2:div}\"\u003e \u0026 {\n    $0\n  }\n\u003e = (props) =\u003e {\n  const [local, attrs] = splitProps(props, []);\n\n  return \u003c${2:div} {...attrs}\u003e{props.children}\u003c/${2:div}\u003e;\n};\n```\n\n\u003c/details\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003ch3\u003eContext\u003c/h3\u003e\u003c/td\u003e\u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003esctxp→\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003eSolid Context Provider component\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003ejsx\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003cdetails\u003e\n      \u003csummary\u003e\u003csup\u003eToggle Code Snippet\u003c/sup\u003e\u003c/summary\u003e\n\n```tsx\nimport { createContext, createSignal, useContext } from \"solid-js\";\n\nconst ${TM_FILENAME_BASE/(.*?)\\Context.*/${1:/capitalize}/i}Context = createContext();\n\nexport function ${TM_FILENAME_BASE/(.*?)\\Context.*/${1:/capitalize}/i}Provider(props) {\n  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} || \"\"),\n    store = [${TM_FILENAME_BASE/(.*?)\\Context.*/${1:/downcase}/i}, set${TM_FILENAME_BASE/(.*?)\\Context.*/${1:/capitalize}/i}];\n\n  return (\n    \u003c${TM_FILENAME_BASE/(.*?)\\Context.*/${1:/capitalize}/i}Context.Provider value={store}\u003e{props.children}\u003c/${TM_FILENAME_BASE/(.*?)\\Context.*/${1:/capitalize}/i}Context.Provider\u003e\n  );\n}\n\nexport function use${TM_FILENAME_BASE/(.*?)\\Context.*/${1:/capitalize}/i}() {\n  return useContext(${TM_FILENAME_BASE/(.*?)\\Context.*/${1:/capitalize}/i}Context);\n}\n```\n\n\u003c/details\u003e\u003c/td\u003e\u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003esctxp→\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003eSolid Context Provider component\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003etsx\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003cdetails\u003e\n      \u003csummary\u003e\u003csup\u003eToggle Code Snippet\u003c/sup\u003e\u003c/summary\u003e\n\n```tsx\nimport { createContext, useContext, ParentComponent } from \"solid-js\";\nimport { createStore } from \"solid-js/store\";\n\nconst defaultState = {};\n\nconst ${1:Name}Context = createContext\u003c[state: typeof defaultState, actions: {}]\u003e([\n  defaultState,\n  {},\n]);\n\nexport const ${1/(.*)/${1:/capitalize}/}Provider: ParentComponent = (props) =\u003e {\n  const [state, setState] = createStore(defaultState);\n\n  return (\n    \u003c${1/(.*)/${1:/capitalize}/}Context.Provider value={[state, {}]}\u003e\n      {props.children}\n    \u003c/${1/(.*)/${1:/capitalize}/}Context.Provider\u003e\n  );\n};\n\nexport const use${1/(.*)/${1:/capitalize}/} = () =\u003e useContext(${1/(.*)/${1:/capitalize}/}Context);\n\n```\n\n\u003c/details\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003ch3\u003eReactivity\u003c/h3\u003e\u003c/td\u003e\u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003essig→\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003eSimple createSignal\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003ets, tsx, js, jsx\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003cdetails\u003e\n      \u003csummary\u003e\u003csup\u003eToggle Code Snippet\u003c/sup\u003e\u003c/summary\u003e\n\n```tsx\nconst [${1:state}, set${1/(.*)/${1:/capitalize}/}] = createSignal(${2});\n```\n\n\u003c/details\u003e\u003c/td\u003e\u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003eseff→\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003eSimple createEffect\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003ets, tsx, js, jsx\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003cdetails\u003e\n      \u003csummary\u003e\u003csup\u003eToggle Code Snippet\u003c/sup\u003e\u003c/summary\u003e\n\n```tsx\ncreateEffect(() =\u003e {\n  const value = ${1:source}();\n  $0\n});\n```\n\n\u003c/details\u003e\u003c/td\u003e\u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003eseffon→\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003ecreateEffect with explicit sources\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003ets, tsx, js, jsx\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003cdetails\u003e\n      \u003csummary\u003e\u003csup\u003eToggle Code Snippet\u003c/sup\u003e\u003c/summary\u003e\n\n```tsx\ncreateEffect(on(${1: source}, (value, prev) =\u003e {\n  $0\n}));\n```\n\n\u003c/details\u003e\u003c/td\u003e\u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003esmemo→\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003eSimple createMemo\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003ets, tsx, js, jsx\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003cdetails\u003e\n      \u003csummary\u003e\u003csup\u003eToggle Code Snippet\u003c/sup\u003e\u003c/summary\u003e\n\n```tsx\nconst ${1:value} = createMemo(() =\u003e $0);\n```\n\n\u003c/details\u003e\u003c/td\u003e\u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003esmemoon→\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003ecreateMemo with explicit sources\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003ets, tsx, js, jsx\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003cdetails\u003e\n      \u003csummary\u003e\u003csup\u003eToggle Code Snippet\u003c/sup\u003e\u003c/summary\u003e\n\n```tsx\nconst ${1:value} = createMemo(on(${2:value}, (value, prev) =\u003e $0));\n```\n\n\u003c/details\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\n\n\u003c!-- ⛔️ GENERATE-SNIPPETS-TABLE:END — Do not remove or modify this section. --\u003e\n\n## Contributing\n\nThis is an open source project open to everyone. Contributions are welcome. ([github](https://github.com/solidjs-community/solid-snippets))\n\nIf 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.\n\nDownloading 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)_\n\n### Naming Convention\n\nWhen creating new snippets, please name the files with according suffix representing the target language:\n\n```sh\nsnippets/\n  # snippets for \"Category Name\" category only for .ts and tsx files\n  Category-Name.ts.json\n  # \"Context\" snippets only for .jsx\n  context.jsx.json\n  # \"Component\" snippets only for .tsx\n  component.tsx.json\n  # \"Component\" snippets for both .jsx and .tsx\n  component.jsx.tsx.json\n  # universal snippets for all languages (js, jsx, ts, tsx)\n  effect.json\n```\n\n### CLI Scripts\n\n```sh\n# update snippets table \u0026 package.json config\npnpm run update-snippets\n\n# update snippets \u0026 build extension package\npnpm run build\n\n# install built extension package\npnpm run install-extension\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolidjs-community%2Fsolid-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsolidjs-community%2Fsolid-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolidjs-community%2Fsolid-snippets/lists"}