feat: add new snippets + improve naming & grouping

n6ai · Aug 22, 2023 · dc88fe3 · dc88fe3
1 parent 607a0f7
commit dc88fe3
Show file tree

Hide file tree

Showing 3 changed files with 134 additions and 45 deletions.
diff --git a/packages/minze-vscode/snippets/common.code-snippets b/packages/minze-vscode/snippets/common.code-snippets
@@ -1,56 +1,63 @@
 {
-  "static observedAttributes": {
+  "observedAttributes": {
     "scope": "javascript,typescript",
-    "prefix": "observedAttributes",
-    "body": ["static observedAttributes = ['${1:name}'$2]"],
+    "prefix": "_minze:observedAttributes",
+    "body": ["static observedAttributes = ['${1:name}'$0]"],
+    "description": "observed attributes"
+  },
+
+  "get": {
+    "scope": "javascript,typescript",
+    "prefix": "_minze:get",
+    "body": ["get ${1:getterName}() {\n\treturn $0\n}"],
     "description": "observed attributes"
   },
 
   "html": {
     "scope": "javascript,typescript",
-    "prefix": "html",
-    "body": ["html${1} = () => `${2:<slot></slot>}`"],
+    "prefix": "_minze:html",
+    "body": ["html${1} = () => `${0:<slot></slot>}`"],
     "description": "html template"
   },
 
   "css": {
     "scope": "javascript,typescript",
-    "prefix": "css",
-    "body": ["css${1} = () => `${2::host {\\}}`"],
+    "prefix": "_minze:css",
+    "body": ["css${1} = () => `${0::host {\\}}`"],
     "description": "css template"
   },
 
   "select": {
     "scope": "javascript,typescript",
-    "prefix": "select",
+    "prefix": "_minze:select",
     "body": ["this.select('$1')"],
     "description": "select method"
   },
 
   "selectAll": {
     "scope": "javascript,typescript",
-    "prefix": "selectAll",
+    "prefix": "_minze:selectAll",
     "body": ["this.selectAll('$1')"],
     "description": "selectAll method"
   },
 
   "slotted": {
     "scope": "javascript,typescript",
-    "prefix": "slotted",
+    "prefix": "_minze:slotted",
     "body": ["this.slotted('$1')"],
     "description": "slotted method"
   },
 
   "dispatch": {
     "scope": "javascript,typescript",
-    "prefix": "dispatch",
-    "body": ["this.dispatch('${1:event}', ${2:'detail'})"],
+    "prefix": "_minze:dispatch",
+    "body": ["this.dispatch('${1:minze:event}', ${2:'value'})"],
     "description": "dispatch method"
   },
 
   "hook": {
     "scope": "javascript,typescript",
-    "prefix": ["hook", "on", "before", "after"],
+    "prefix": "_minze:hook",
     "body": [
       "${1|onStart,onReactive,onReady,onDestory,onMove,beforeRender,afterRender,beforeAttributeChange,afterAttributeChange|}() {$2}"
     ],
@@ -59,36 +66,110 @@
 
   "debug": {
     "scope": "javascript,typescript",
-    "prefix": "debug",
+    "prefix": "_minze:debug",
     "body": ["debug = ${1:true}"],
     "description": "debug mode"
   },
 
   "options": {
     "scope": "javascript,typescript",
-    "prefix": "options",
+    "prefix": "_minze:options",
     "body": ["options = {$1}"],
-    "description": "options."
+    "description": "options"
   },
 
-  "options:cssreset": {
+  "option:cssreset": {
     "scope": "javascript,typescript",
-    "prefix": "options:cssreset",
+    "prefix": "_minze:option:cssreset",
     "body": ["options = { cssReset: ${1:true} }"],
     "description": "cssReset option"
   },
 
-  "options:exportparts": {
+  "option:exportparts": {
     "scope": "javascript,typescript",
-    "prefix": "options:exportparts",
+    "prefix": "_minze:option:exportparts",
     "body": ["options = { exposeAttrs: { exportparts: ${1:true} } }"],
     "description": "exportparts option"
   },
 
-  "options:rendered": {
+  "option:rendered": {
     "scope": "javascript,typescript",
-    "prefix": "options:rendered",
+    "prefix": "_minze:option:rendered",
     "body": ["options = { exposeAttrs: { rendered: ${1:true} } }"],
     "description": "rendered option"
+  },
+
+  "expression": {
+    "scope": "html,css",
+    "prefix": "_minze:expression",
+    "body": ["\\${this.${1:data}}"],
+    "description": "component property"
+  },
+
+  "expression:fallback": {
+    "scope": "html,css",
+    "prefix": "_minze:expression:fallback",
+    "body": ["\\${this.${1:data} ?? ${2:'value'}}"],
+    "description": "nullish coalescing"
+  },
+
+  "expression:ternary": {
+    "scope": "html,css",
+    "prefix": "_minze:expression:ternary",
+    "body": ["\\${this.${1:data} ? ${2:true} : ${3:false}}"],
+    "description": "ternary conditional"
+  },
+
+  "html:list": {
+    "scope": "html",
+    "prefix": "_minze:list",
+    "body": [
+      "<${1:ul}>",
+      "\t\\${this.${2:data}.map((item) => `<${3:li}>\\${item}</${3:li}>`).join('')}",
+      "</${1:ul}>"
+    ],
+    "description": "list rendering markup"
+  },
+
+  "html:slot": {
+    "scope": "html",
+    "prefix": "_minze:slot",
+    "body": ["<slot slot=\"${1:name}\" name=\"${1:name}\">$0</slot>"],
+    "description": "slot markup"
+  },
+
+  "attribute:on": {
+    "scope": "html",
+    "prefix": "_minze:attribute:on",
+    "body": ["on:${1:click}=\"${2:callback}\""],
+    "description": "on:event attribute"
+  },
+
+  "attribute:part": {
+    "scope": "html",
+    "prefix": "_minze:attribute:part",
+    "body": ["part=\"${1:name}\""],
+    "description": "part attribute"
+  },
+
+  "attribute:json": {
+    "scope": "html",
+    "prefix": "_minze:attribute:json",
+    "body": ["${1:data}=\\${JSON.stringify(this.${1:data})}"],
+    "description": "json attribute"
+  },
+
+  "attribute:no-css-reset": {
+    "scope": "html",
+    "prefix": "_minze:attribute:no-css-reset",
+    "body": ["no-css-reset"],
+    "description": "no-css-reset attribute"
+  },
+
+  "css:part": {
+    "scope": "css",
+    "prefix": "_minze:part",
+    "body": ["$1::part(${2:name}) {$0}"],
+    "description": "part attribute"
   }
 }
diff --git a/packages/minze-vscode/snippets/javascript.json b/packages/minze-vscode/snippets/javascript.json
@@ -1,40 +1,40 @@
 {
-  "minze:el": {
+  "el": {
     "isFileTemplate": true,
     "prefix": "minze:el",
     "body": [
       "import { MinzeElement } from 'minze'",
-      "\nexport class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Element extends MinzeElement {",
+      "\nexport class ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Element} extends MinzeElement {",
       "\t$0",
       "}"
     ],
-    "description": "barebones MinzeElement component"
+    "description": "MinzeElement component base"
   },
 
   "reactive": {
-    "prefix": "reactive",
-    "body": ["reactive = [['${1:name}', ${2:'value'}]$3]"],
+    "prefix": "_minze:reactive",
+    "body": ["reactive = [['${1:name}', ${2:'value'}]$0]"],
     "description": "reactive properties"
   },
 
   "attrs": {
-    "prefix": "attrs",
-    "body": ["attrs = [['${1:name}', ${2:'value'}]$3]"],
+    "prefix": "_minze:attrs",
+    "body": ["attrs = [['${1:name}', ${2:'value'}]$0]"],
     "description": "reactive attributes"
   },
 
   "watch": {
-    "prefix": "watch",
+    "prefix": "_minze:watch",
     "body": [
-      "watch = [['${1:name}', (${2:newValue, oldValue, key, target}) => {$3}]$4]"
+      "watch = [['${1:name}', (${2:newValue, oldValue, key, target}) => {$3}]$0]"
     ],
     "description": "reactive watch"
   },
 
   "eventListeners": {
-    "prefix": "eventListeners",
+    "prefix": "_minze:eventListeners",
     "body": [
-      "eventListeners = [[${1:this}, '${2:click}', (${3:event}) => {$4}]$5]"
+      "eventListeners = [[${1|'.class','#id','[attribute=\"value\"]',this,window|}, '${2:click}', (${3:event}) => {$4}]$0]"
     ],
     "description": "event listeners"
   }

diff --git a/packages/minze-vscode/snippets/typescript.json b/packages/minze-vscode/snippets/typescript.json
@@ -1,42 +1,50 @@
 {
-  "minze:el": {
+  "el": {
     "isFileTemplate": true,
     "prefix": "minze:el",
     "body": [
       "import type { Reactive, Attrs, Watch, EventListeners } from 'minze'",
       "import { MinzeElement } from 'minze'",
-      "\nexport interface ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Element {}",
-      "\nexport class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Element extends MinzeElement {",
+      "\nexport interface ${2:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Element} {}",
+      "\nexport class ${2:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Element} extends MinzeElement {",
       "\t$0",
       "}"
     ],
-    "description": "barebones MinzeElement component"
+    "description": "MinzeElement component base"
+  },
+
+  "types": {
+    "prefix": "minze:types",
+    "body": [
+      "import type { ${1:Reactive,} ${2:Attrs,} ${3:Watch,} ${4:EventListeners} } from 'minze'"
+    ],
+    "description": "MinzeElement types"
   },
 
   "reactive": {
-    "prefix": "reactive",
-    "body": ["reactive: Reactive = [['${1:name}', ${2:'value'}]$3]"],
+    "prefix": "_minze:reactive",
+    "body": ["reactive: Reactive = [['${1:name}', ${2:'value'}]$0]"],
     "description": "reactive properties"
   },
 
   "attrs": {
-    "prefix": "attrs",
-    "body": ["attrs: Attrs = [['${1:name}', ${2:'value'}]$3]"],
+    "prefix": "_minze:attrs",
+    "body": ["attrs: Attrs = [['${1:name}', ${2:'value'}]$0]"],
     "description": "reactive attributes"
   },
 
   "watch": {
-    "prefix": "watch",
+    "prefix": "_minze:watch",
     "body": [
-      "watch: Watch = [['${1:name}', (${2:newValue, oldValue, key, target}) => {$3}]$4]"
+      "watch: Watch = [['${1:name}', (${2:newValue, oldValue, key, target}) => {$3}]$0]"
     ],
     "description": "reactive watch"
   },
 
   "eventListeners": {
-    "prefix": "eventListeners",
+    "prefix": "_minze:eventListeners",
     "body": [
-      "eventListeners: EventListeners = [[${1:this}, '${2:click}', (${3:event: Event}) => {$4}]$5]"
+      "eventListeners: EventListeners = [[${1|'.class','#id','[attribute=\"value\"]',this,window|}, '${2:click}', (${3:event: Event}) => {$4}]$0]"
     ],
     "description": "event listeners"
   }