Skip to content

Commit

Permalink
feat: Improve/Update Code Snippets (QwikDev#1060)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nnelgxorz
nnelgxorz authored Sep 26, 2022
1 parent 6f23816 commit 3294cb9
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 60 deletions.
61 changes: 31 additions & 30 deletions .vscode/qwik.code-snippets
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,35 @@
{
"Qwik component": {
"scope": "typescriptreact",
"prefix": "component$",
"description": "Qwik counter component",
"prefix": "q:component w/props",
"description": "Qwik component w/ props",
"body": [
"export interface ${1:MyCmp}Props {",
" step: number;",
"export interface ${1:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}}Props {",
" $2",
"}",
"",
"export const ${1:MyCmp} = component$((props: ${1:MyCmp}Props) => {",
"export const $1 = component$((props: $1Props) => {",
" const state = useStore({",
" count: 0",
" $3",
" });",
" $0",
" return (",
" <div>",
" <button onClick$={() => state.count += props.step}>",
" {state.count}",
" </button>",
" </div>",
" );",
" ",
" return <${4:button} on${5:Click}$={(${6:e}) => {$7}}>$8</${4}>",
"});"
]
},
"Qwik component (basic)": {
"Qwik component (simple)": {
"scope": "javascriptreact,typescriptreact",
"prefix": "component$basic",
"description": "Basic Qwik component",
"prefix": "q:component simple",
"description": "Simple Qwik component",
"body": [
"export const ${1:MyCmp} = component$(() => {",
" return (",
" <div>",
" ${1:MyCmp}",
" </div>",
" );",
"export const ${1:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}} = component$(() => {",
" return <${2:button}>$4</$2>",
"});"
]
},
"Qwik state": {
"scope": "javascriptreact,typescriptreact",
"prefix": "useStore$",
"prefix": "q:useStore$",
"description": "useStore() declaration",
"body": [
"const ${1:state} = useStore({",
Expand All @@ -50,7 +40,7 @@
},
"$ hook": {
"scope": "javascriptreact,typescriptreact",
"prefix": "$",
"prefix": "q:$",
"description": "$() function hook",
"body": [
"$(() => {",
Expand All @@ -61,30 +51,41 @@
},
"useClientEffect": {
"scope": "javascriptreact,typescriptreact",
"prefix": "useClientEffect",
"prefix": "q:useClientEffect",
"description": "useClientEffect$() function hook",
"body": [
"useClientEffect$(({track}) => {",
"useClientEffect$(({ track }) => {",
" $0",
"});",
""
]
},
"useWatch": {
"scope": "javascriptreact,typescriptreact",
"prefix": "useWatch",
"prefix": "q:useWatch",
"description": "useWatch$() function hook",
"body": [
"useWatch$(({track}) => {",
"useWatch$(({ track }) => {",
" track($1);",
" $0",
"});",
""
]
},
"useResource": {
"scope": "javascriptreact,typescriptreact",
"prefix": "q:useResource$",
"description": "useResource$() declaration",
"body": [
"const $1 = useResource$(({ track, previous, cleanup }) => {",
" $0",
"});",
""
]
},
"useServerMount": {
"scope": "javascriptreact,typescriptreact",
"prefix": "useServerMount",
"prefix": "q:useServerMount",
"description": "useServerMount$() function hook",
"body": [
"useServerMount$(() => {",
Expand Down
32 changes: 32 additions & 0 deletions starters/apps/base/.vscode/qwik-city.code-snippets
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
{
"onGet": {
"scope": "javascriptreact,typescriptreact",
"prefix": "q:onGet",
"description": "onGet function for a route index",
"body": [
"export const onGet: RequestHandler = (request) => {",
" $0",
"};"
]
},
"onGet (typed)": {
"scope": "javascriptreact,typescriptreact",
"prefix": "q:onGet typed",
"description": "onGet function for a route index",
"body": [
"export interface ${1:PageData} {",
" $2",
"};",
"",
"export const onGet: RequestHandler<$1> = (request) => {",
" $4",
"};"
]
},
"useEndpoint": {
"scope": "javascriptreact,typescriptreact",
"prefix": "q:useEndpoint",
"description": "useEndpoint declaration",
"body": "const $1 = useEndpoint<typeof onGet>();"
}
}
59 changes: 29 additions & 30 deletions starters/apps/base/.vscode/qwik.code-snippets
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,35 @@
{
"Qwik component": {
"scope": "typescriptreact",
"prefix": "component$",
"description": "Qwik counter component",
"prefix": "q:component w/props",
"description": "Qwik component w/ props",
"body": [
"export interface ${1:MyCmp}Props {",
" step: number;",
"export interface ${1:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}}Props {",
" $2",
"}",
"",
"export const ${1:MyCmp} = component$((props: ${1:MyCmp}Props) => {",
"export const $1 = component$((props: $1Props) => {",
" const state = useStore({",
" count: 0",
" $3",
" });",
" $0",
" return (",
" <div>",
" <button onClick$={() => state.count += props.step}>",
" {state.count}",
" </button>",
" </div>",
" );",
" ",
" return <${4:button} on${5:Click}$={(${6:e}) => {$7}}>$8</${4}>",
"});"
]
},
"Qwik component (basic)": {
"Qwik component (simple)": {
"scope": "javascriptreact,typescriptreact",
"prefix": "component$basic",
"description": "Basic Qwik component",
"prefix": "q:component simple",
"description": "Simple Qwik component",
"body": [
"export const ${1:MyCmp} = component$(() => {",
" return (",
" <div>",
" <div>",
" ${1:MyCmp}",
" </div>",
" </div>",
" );",
"export const ${1:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}} = component$(() => {",
" return <${2:button}>$4</$2>",
"});"
]
},
"Qwik state": {
"scope": "javascriptreact,typescriptreact",
"prefix": "useStore$",
"prefix": "q:useStore$",
"description": "useStore() declaration",
"body": [
"const ${1:state} = useStore({",
Expand All @@ -52,7 +40,7 @@
},
"$ hook": {
"scope": "javascriptreact,typescriptreact",
"prefix": "$",
"prefix": "q:$",
"description": "$() function hook",
"body": [
"$(() => {",
Expand All @@ -63,7 +51,7 @@
},
"useClientEffect": {
"scope": "javascriptreact,typescriptreact",
"prefix": "useClientEffect",
"prefix": "q:useClientEffect",
"description": "useClientEffect$() function hook",
"body": [
"useClientEffect$(({ track }) => {",
Expand All @@ -74,7 +62,7 @@
},
"useWatch": {
"scope": "javascriptreact,typescriptreact",
"prefix": "useWatch",
"prefix": "q:useWatch",
"description": "useWatch$() function hook",
"body": [
"useWatch$(({ track }) => {",
Expand All @@ -84,9 +72,20 @@
""
]
},
"useResource": {
"scope": "javascriptreact,typescriptreact",
"prefix": "q:useResource$",
"description": "useResource$() declaration",
"body": [
"const $1 = useResource$(({ track, previous, cleanup }) => {",
" $0",
"});",
""
]
},
"useServerMount": {
"scope": "javascriptreact,typescriptreact",
"prefix": "useServerMount",
"prefix": "q:useServerMount",
"description": "useServerMount$() function hook",
"body": [
"useServerMount$(() => {",
Expand Down

0 comments on commit 3294cb9

Please sign in to comment.