xinjs.code-snippets

{
  // xinjs snippets for vs-code
  // 
  // to use these:
  // 1. in VS Code > Settings > Configure User Snippets
  // 2. select new global snippets file
  // 3. name it whatever you like
  // 4. paste in the contents of this file
  "xin-html-component-stub": {
    "scope": "typescript",
    "prefix": "xinhtml",
    "body": [
      "import {elements, ElementCreator, ElementPart} from 'xinjs'",
      "const { div } = elements",
      "",
      "export const myHtmlComponent: ElementCreator<HTMLDivElement> = (...parts: ElementPart[]): HTMLDivElement => div(",
      "  ...parts",
      ")"
    ]
  },
  "xin-component-stub": {
    "scope": "typescript",
    "prefix": "xincomponent",
    "body": [
      "import { Component as WebComponent, elements, vars } from 'xinjs'",
      "",
      "const {fragment, h1, slot} = elements",
      "",
      "class ${1:TagName} extends WebComponent {",
      "  content = fragment(h1(), slot())",
      "}",
      "",
      "export const ${2:tagName} = ${1:TagName}.elementCreator({tag: '${3:tag-name}'})"
    ]
  },

  "xin-component-styleNode": {
    "scope": "typescript",
    "prefix": "xinstylenode",
    "body": [
      "styleNode = WebComponent.StyleNode({",
      "  ':host': {",
      "    display: 'block',",
      "    padding: vars.spacing",
      "  }",
      "})",
    ]
  },

  "xin-component-constructor": {
    "scope": "typescript",
    "prefix": "xinconstructor",
    "body": [
      "constructor() {",
      "  super()",
      "  this.initAttributes('anne', 'example')",
      "}"
    ]
  },

  "xin-component-connectedCallback": {
    "scope": "typescript",
    "prefix": "xinconnected",
    "body": [
      "connectedCallback(): void {",
      "  super.connectedCallback()",
      "}"
    ]
  },

  "xin-component-render": {
    "scope": "typescript",
    "prefix": "xinrender",
    "body": [
      "render(): void {",
      "  super.render()",
      "}"
    ]
  }
}