Merge branch 'main' into release-please--branches--main--components--…

…minze

.release-please-manifest.json

@@ -1,6 +1,6 @@
 {
   "packages/create-minze": "2.1.1",
   "packages/minze": "1.9.2",
-  "packages/minze-vscode": "0.3.1",
+  "packages/minze-vscode": "0.4.0",
   "packages/vite-plugin-minze": "1.1.5"
 }

docs/guide/advanced/syntax-highlighting.md

@@ -6,7 +6,7 @@ Once your HTML and CSS templates grow in size you might want to add some syntax
 
 ### [Minze VS Code Extension](https://marketplace.visualstudio.com/items?itemName=n6ai.minze-vscode)
 
-Minze VS Code extension adds auto-highlighting to class methods defined as arrow functions starting with `html` and `css` keyword. Additionally you can manually prefix any template literals with `/*html*/` to highlight HTML code inside them, or `/*css*/` to highlight CSS code.
+The Minze VS Code extension comes bundled with snippets for auto-completion. It also adds auto-highlighting to class methods defined as arrow functions starting with `html` and `css` keyword. Additionally you can manually prefix any template literals with `/*html*/` to highlight HTML code inside them, or `/*css*/` to highlight CSS code.
 
 ```js
 import { MinzeElement } from Minze

docs/guide/components/methods.md

@@ -10,12 +10,17 @@ Certain keywords are reserved for special functionality and shouldn't be overwri
 import { MinzeElement } from 'minze'
 
 class MyElement extends MinzeElement {
-  myMethod() {
+  firstMethod() {
     console.log('Hello Minze!')
   }
 
-  onReady() {
-    this.myMethod() // 'Hello Minze!'
+  secondMethod = () => {
+    console.log('Hello Minze again!')
+  }
+
+  onReady = () => {
+    this.firstMethod() // 'Hello Minze!'
+    this.secondMethod() // 'Hello Minze again!'
   }
 }
 

packages/minze-vscode/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [0.4.0](https://github.com/n6ai/minze/compare/minze-vscode-v0.3.1...minze-vscode-v0.4.0) (2023-08-21)
+
+
+### Features
+
+* add code-snippets ([d898f5f](https://github.com/n6ai/minze/commit/d898f5f39520fe3e6361840d6ca9376020697f0e))
+* improve snippet triggering ([66c5873](https://github.com/n6ai/minze/commit/66c5873856fe5086322472d9d129ade2afd0d918))
+
+
+### Bug Fixes
+
+* barebones snippet code ([99ebbb0](https://github.com/n6ai/minze/commit/99ebbb09cff14c685c7d66da1e1ebfe15f47b9a8))
+
 ## [0.3.1](https://github.com/n6ai/minze/compare/minze-vscode-v0.3.0...minze-vscode-v0.3.1) (2023-08-17)
 
 

packages/minze-vscode/README.md

@@ -11,7 +11,7 @@ Language support for Minze.
 
 ### Syntax Highlighting
 
-Minze VS Code extension adds auto-highlighting to class methods defined as arrow functions starting with `html` and `css` keyword. Additionally you can manually prefix any template literals with `/*html*/` to highlight HTML code inside them, or `/*css*/` to highlight CSS code.
+The Minze VS Code extension comes bundled with snippets for auto-completion. It also adds auto-highlighting to class methods defined as arrow functions starting with `html` and `css` keyword. Additionally you can manually prefix any template literals with `/*html*/` to highlight HTML code inside them, or `/*css*/` to highlight CSS code.
 
 **Example**
 

packages/minze-vscode/package.json

@@ -1,7 +1,7 @@
 {
   "name": "minze-vscode",
   "displayName": "Minze",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "license": "MIT",
   "publisher": "n6ai",
   "author": "Sergej Samsonenko",

packages/minze-vscode/snippets/common.code-snippets

@@ -1,7 +1,7 @@
 {
   "static observedAttributes": {
     "scope": "javascript,typescript",
-    "prefix": ["observedAttributes", "static observedAttributes"],
+    "prefix": "observedAttributes",
     "body": ["static observedAttributes = ['${1:name}'$2]"],
     "description": "observed attributes"
   },
@@ -22,104 +22,41 @@
 
   "select": {
     "scope": "javascript,typescript",
-    "prefix": ["select", "this.select"],
+    "prefix": "select",
     "body": ["this.select('$1')"],
     "description": "select method"
   },
 
   "selectAll": {
     "scope": "javascript,typescript",
-    "prefix": ["selectAll", "this.selectAll"],
+    "prefix": "selectAll",
     "body": ["this.selectAll('$1')"],
     "description": "selectAll method"
   },
 
   "slotted": {
     "scope": "javascript,typescript",
-    "prefix": ["slotted", "this.slotted"],
+    "prefix": "slotted",
     "body": ["this.slotted('$1')"],
     "description": "slotted method"
   },
 
   "dispatch": {
     "scope": "javascript,typescript",
-    "prefix": ["dispatch", "this.dispatch"],
+    "prefix": "dispatch",
     "body": ["this.dispatch('${1:event}', ${2:'detail'})"],
     "description": "dispatch method"
   },
 
   "hook": {
     "scope": "javascript,typescript",
-    "prefix": "hook",
+    "prefix": ["hook", "on", "before", "after"],
     "body": [
-      "${1|afterAttributeChange,afterRender,beforeAttributeChange,beforeRender,onDestory,onMove,onReactive,onReady,onStart|} = () => {$2}"
+      "${1|onStart,onReactive,onReady,onDestory,onMove,beforeRender,afterRender,beforeAttributeChange,afterAttributeChange|}() {$2}"
     ],
     "description": "all available hooks"
   },
 
-  "onStart": {
-    "scope": "javascript,typescript",
-    "prefix": "onStart",
-    "body": ["onStart = () => {$1}"],
-    "description": "onStart hook"
-  },
-
-  "onReactive": {
-    "scope": "javascript,typescript",
-    "prefix": "onReactive",
-    "body": ["onReactive = () => {$1}"],
-    "description": "onReactive hook"
-  },
-
-  "onReady": {
-    "scope": "javascript,typescript",
-    "prefix": "onReady",
-    "body": ["onReady = () => {$1}"],
-    "description": "onReady hook"
-  },
-
-  "onDestory": {
-    "scope": "javascript,typescript",
-    "prefix": "onDestory",
-    "body": ["onDestory = () => {$1}"],
-    "description": "onDestory hook"
-  },
-
-  "onMove": {
-    "scope": "javascript,typescript",
-    "prefix": "onMove",
-    "body": ["onMove = () => {$1}"],
-    "description": "onMove hook"
-  },
-
-  "beforeRender": {
-    "scope": "javascript,typescript",
-    "prefix": "beforeRender",
-    "body": ["beforeRender = () => {$1}"],
-    "description": "beforeRender hook"
-  },
-
-  "afterRender": {
-    "scope": "javascript,typescript",
-    "prefix": "afterRender",
-    "body": ["afterRender = () => {$1}"],
-    "description": "afterRender hook"
-  },
-
-  "beforeAttributeChange": {
-    "scope": "javascript,typescript",
-    "prefix": "beforeAttributeChange",
-    "body": ["beforeAttributeChange = (${1:name, oldValue, newValue}) => {$2}"],
-    "description": "beforeAttributeChange hook"
-  },
-
-  "afterAttributeChange": {
-    "scope": "javascript,typescript",
-    "prefix": "afterAttributeChange",
-    "body": ["afterAttributeChange = (${1:name, oldValue, newValue}) => {$2}"],
-    "description": "afterAttributeChange hook"
-  },
-
   "debug": {
     "scope": "javascript,typescript",
     "prefix": "debug",

packages/minze-vscode/snippets/javascript.json

@@ -1,10 +1,10 @@
 {
-  "minze:empty": {
+  "minze:el": {
     "isFileTemplate": true,
-    "prefix": "minze:empty",
+    "prefix": "minze:el",
     "body": [
       "import { MinzeElement } from 'minze'",
-      "\nexport class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends MinzeElement {",
+      "\nexport class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Element extends MinzeElement {",
       "\t$0",
       "}"
     ],

packages/minze-vscode/snippets/typescript.json

@@ -1,11 +1,12 @@
 {
-  "minze:empty": {
+  "minze:el": {
     "isFileTemplate": true,
-    "prefix": "minze:empty",
+    "prefix": "minze:el",
     "body": [
       "import type { Reactive, Attrs, Watch, EventListeners } from 'minze'",
       "import { MinzeElement } from 'minze'",
-      "\nexport class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends MinzeElement {",
+      "\nexport interface ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Element {}",
+      "\nexport class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Element extends MinzeElement {",
       "\t$0",
       "}"
     ],

packages/minze/src/lib/minze-element.ts

@@ -91,7 +91,7 @@ export class MinzeElement extends HTMLElement {
    * @example
    * ```
    * class MyElement extends MinzeElement {
-   *   onStart() {
+   *   onStart = () => {
    *     console.log(this.dashName) // my-element
    *   }
    * }
@@ -107,7 +107,7 @@ export class MinzeElement extends HTMLElement {
    * @example
    * ```
    * class MyElement extends MinzeElement {
-   *   onStart() {
+   *   onStart = () => {
    *     console.log(this.name) // MyElement
    *   }
    * }