release: WRNexusJS 0.2.32
This commit is contained in:
@@ -22,7 +22,7 @@
|
||||
|
||||
"WRN dynamic page": {
|
||||
"prefix": ["wrn-dynamic-page", "dynamic-page"],
|
||||
"description": "Create a WRN page with a route parameter",
|
||||
"description": "Create a WRN page using a route parameter",
|
||||
"body": [
|
||||
"page ${1:DynamicPage} {",
|
||||
" layout = \"${2:default}\"",
|
||||
@@ -40,13 +40,15 @@
|
||||
|
||||
"WRN component": {
|
||||
"prefix": ["wrn-component", "component"],
|
||||
"description": "Create a WRN component",
|
||||
"description": "Create a reusable WRN component",
|
||||
"body": [
|
||||
"component ${1:ComponentName} {",
|
||||
" props {",
|
||||
" ${2:title} = \"${3:Title}\"",
|
||||
" }",
|
||||
"",
|
||||
" state ${4:ready} = false",
|
||||
"",
|
||||
" view {",
|
||||
" <div>",
|
||||
" <h2>{${2:title}}</h2>",
|
||||
@@ -56,9 +58,43 @@
|
||||
]
|
||||
},
|
||||
|
||||
"WRN reactive component": {
|
||||
"prefix": ["wrn-reactive-component", "reactive-component"],
|
||||
"description": "Create a component with functions, lifecycle hooks, and a watcher",
|
||||
"body": [
|
||||
"component ${1:ComponentName} {",
|
||||
" state ${2:active} = false",
|
||||
"",
|
||||
" functions {",
|
||||
" function ${3:updateState}() {",
|
||||
" ${2:active} = true",
|
||||
" }",
|
||||
" }",
|
||||
"",
|
||||
" lifecycle {",
|
||||
" mount {",
|
||||
" ${3:updateState}()",
|
||||
" }",
|
||||
"",
|
||||
" unmount {",
|
||||
" $0",
|
||||
" }",
|
||||
" }",
|
||||
"",
|
||||
" watch ${2:active} {",
|
||||
" console.log(value, previous)",
|
||||
" }",
|
||||
"",
|
||||
" view {",
|
||||
" <div>{${2:active}}</div>",
|
||||
" }",
|
||||
"}"
|
||||
]
|
||||
},
|
||||
|
||||
"WRN layout": {
|
||||
"prefix": ["wrn-layout", "layout"],
|
||||
"description": "Create a WRN layout",
|
||||
"description": "Create a reusable WRN layout",
|
||||
"body": [
|
||||
"layout ${1:LayoutName} {",
|
||||
" view {",
|
||||
@@ -76,6 +112,74 @@
|
||||
"body": ["state ${1:name} = ${2:\"value\"}"]
|
||||
},
|
||||
|
||||
"WRN functions block": {
|
||||
"prefix": ["wrn-functions", "functions"],
|
||||
"description": "Create a browser-side functions block",
|
||||
"body": ["functions {", " function ${1:handler}(${2}) {", " $0", " }", "}"]
|
||||
},
|
||||
|
||||
"WRN function": {
|
||||
"prefix": ["wrn-function", "function"],
|
||||
"description": "Create a function inside a functions block",
|
||||
"body": ["function ${1:name}(${2}) {", " $0", "}"]
|
||||
},
|
||||
|
||||
"WRN async function": {
|
||||
"prefix": ["wrn-async-function", "async-function"],
|
||||
"description": "Create an asynchronous component function",
|
||||
"body": ["async function ${1:name}(${2}) {", " $0", "}"]
|
||||
},
|
||||
|
||||
"WRN lifecycle": {
|
||||
"prefix": ["wrn-lifecycle", "lifecycle"],
|
||||
"description": "Create mount, update, and unmount lifecycle hooks",
|
||||
"body": [
|
||||
"lifecycle {",
|
||||
" mount {",
|
||||
" ${1}",
|
||||
" }",
|
||||
"",
|
||||
" update {",
|
||||
" ${2}",
|
||||
" }",
|
||||
"",
|
||||
" unmount {",
|
||||
" $0",
|
||||
" }",
|
||||
"}"
|
||||
]
|
||||
},
|
||||
|
||||
"WRN mount hook": {
|
||||
"prefix": ["wrn-mount", "mount"],
|
||||
"description": "Create a component mount lifecycle hook",
|
||||
"body": ["mount {", " $0", "}"]
|
||||
},
|
||||
|
||||
"WRN update hook": {
|
||||
"prefix": ["wrn-update", "update-hook"],
|
||||
"description": "Create a batched component update lifecycle hook",
|
||||
"body": ["update {", " $0", "}"]
|
||||
},
|
||||
|
||||
"WRN unmount hook": {
|
||||
"prefix": ["wrn-unmount", "unmount"],
|
||||
"description": "Create a component unmount lifecycle hook",
|
||||
"body": ["unmount {", " $0", "}"]
|
||||
},
|
||||
|
||||
"WRN watcher": {
|
||||
"prefix": ["wrn-watch", "watch"],
|
||||
"description": "Watch a declared state value",
|
||||
"body": ["watch ${1:stateName} {", " console.log(value, previous)", " $0", "}"]
|
||||
},
|
||||
|
||||
"WRN watcher with condition": {
|
||||
"prefix": ["wrn-watch-if", "watch-if"],
|
||||
"description": "Watch state and react to a specific value",
|
||||
"body": ["watch ${1:stateName} {", " if (value === ${2:true}) {", " $0", " }", "}"]
|
||||
},
|
||||
|
||||
"WRN SEO block": {
|
||||
"prefix": ["wrn-seo", "seo"],
|
||||
"description": "Create SEO metadata",
|
||||
@@ -127,12 +231,36 @@
|
||||
"body": ["class:${1:border-indigo-500}=\"${2:condition}\""]
|
||||
},
|
||||
|
||||
"WRN conditional class pair": {
|
||||
"prefix": ["wrn-class-toggle", "class-toggle"],
|
||||
"description": "Toggle two classes from one condition",
|
||||
"body": ["class:${1:opacity-100}=\"${3:visible}\"", "class:${2:opacity-0}=\"!${3:visible}\""]
|
||||
},
|
||||
|
||||
"WRN click event": {
|
||||
"prefix": ["wrn-click", "click"],
|
||||
"description": "Add a click handler",
|
||||
"description": "Add a click event handler",
|
||||
"body": ["@click=\"${1:handler()}\""]
|
||||
},
|
||||
|
||||
"WRN window scroll event": {
|
||||
"prefix": ["wrn-window-scroll", "window-scroll"],
|
||||
"description": "Add a window scroll event handler",
|
||||
"body": ["@window:scroll=\"${1:handler()}\""]
|
||||
},
|
||||
|
||||
"WRN window resize event": {
|
||||
"prefix": ["wrn-window-resize", "window-resize"],
|
||||
"description": "Add a window resize event handler",
|
||||
"body": ["@window:resize=\"${1:handler()}\""]
|
||||
},
|
||||
|
||||
"WRN document event": {
|
||||
"prefix": ["wrn-document-event", "document-event"],
|
||||
"description": "Add a document-level event handler",
|
||||
"body": ["@document:${1:click}=\"${2:handler()}\""]
|
||||
},
|
||||
|
||||
"WRN show directive": {
|
||||
"prefix": ["wrn-show", "show"],
|
||||
"description": "Conditionally show an element",
|
||||
@@ -158,7 +286,7 @@
|
||||
"api GET ${1:/api/resource} {",
|
||||
" return Response.json({",
|
||||
" ${2:success}: true",
|
||||
" });",
|
||||
" })",
|
||||
"}"
|
||||
]
|
||||
},
|
||||
@@ -168,32 +296,19 @@
|
||||
"description": "Create a POST API route",
|
||||
"body": [
|
||||
"api POST ${1:/api/resource} {",
|
||||
" const body = await ctx.request.json();",
|
||||
" const body = await ctx.request.json()",
|
||||
"",
|
||||
" return Response.json({",
|
||||
" success: true,",
|
||||
" data: body",
|
||||
" });",
|
||||
"}"
|
||||
]
|
||||
},
|
||||
|
||||
"WRN middleware": {
|
||||
"prefix": ["wrn-middleware", "middleware"],
|
||||
"description": "Create middleware",
|
||||
"body": [
|
||||
"middleware ${1:auth} {",
|
||||
" async function handle(ctx, next) {",
|
||||
" ${2}",
|
||||
" return await next();",
|
||||
" }",
|
||||
" })",
|
||||
"}"
|
||||
]
|
||||
},
|
||||
|
||||
"WRN loading state": {
|
||||
"prefix": ["wrn-loading", "loading-state"],
|
||||
"description": "Create loading state and button",
|
||||
"description": "Create loading state and a reactive button",
|
||||
"body": [
|
||||
"state loading = false",
|
||||
"",
|
||||
@@ -206,5 +321,64 @@
|
||||
" {loading ? \"Loading...\" : \"${1:Submit}\"}",
|
||||
"</button>"
|
||||
]
|
||||
},
|
||||
|
||||
"WRN BackToTop component": {
|
||||
"prefix": ["wrn-back-to-top", "back-to-top"],
|
||||
"description": "Create an optimized BackToTop component using lifecycle cleanup",
|
||||
"body": [
|
||||
"component BackToTop {",
|
||||
" state visible = false",
|
||||
"",
|
||||
" functions {",
|
||||
" function updateBackToTopVisibility() {",
|
||||
" visible = window.scrollY > ${1:500}",
|
||||
" }",
|
||||
"",
|
||||
" function scrollToTop() {",
|
||||
" window.scrollTo({",
|
||||
" top: 0,",
|
||||
" behavior: \"smooth\"",
|
||||
" })",
|
||||
" }",
|
||||
" }",
|
||||
"",
|
||||
" lifecycle {",
|
||||
" mount {",
|
||||
" updateBackToTopVisibility()",
|
||||
"",
|
||||
" window.addEventListener(",
|
||||
" \"scroll\",",
|
||||
" updateBackToTopVisibility,",
|
||||
" { passive: true }",
|
||||
" )",
|
||||
" }",
|
||||
"",
|
||||
" unmount {",
|
||||
" window.removeEventListener(",
|
||||
" \"scroll\",",
|
||||
" updateBackToTopVisibility",
|
||||
" )",
|
||||
" }",
|
||||
" }",
|
||||
"",
|
||||
" view {",
|
||||
" <button",
|
||||
" type=\"button\"",
|
||||
" @click=\"scrollToTop()\"",
|
||||
" aria-label=\"Back to top\"",
|
||||
" class=\"fixed bottom-5 right-5\"",
|
||||
" class:pointer-events-none=\"!visible\"",
|
||||
" class:translate-y-4=\"!visible\"",
|
||||
" class:opacity-0=\"!visible\"",
|
||||
" class:pointer-events-auto=\"visible\"",
|
||||
" class:translate-y-0=\"visible\"",
|
||||
" class:opacity-100=\"visible\"",
|
||||
" >",
|
||||
" ${2:Back to top}",
|
||||
" </button>",
|
||||
" }",
|
||||
"}"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user