@stacksjs/stx-vscode 0.2.351

package/LICENSE.md

@@ -0,0 +1,21 @@
+# MIT License
+
+Copyright (c) 2025 Stacks.js
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,33 @@
+# @stacksjs/stx-vscode
+
+stx language support for VS Code extensions to embed: the hovers, completions, diagnostics, go to definition, folding, semantic tokens, utility-class previews, grammar, snippets and language configuration behind the [stx extension](https://marketplace.visualstudio.com/items?itemName=Stacks.vscode-stx).
+
+It is built from the extension's own source, `packages/vscode/src`, so the extension and every extension embedding this package run the same code. The Stacks extension (`Stacks.vscode-stacks`) is the embedder it was made for.
+
+## Usage
+
+```ts
+import { join } from 'node:path'
+import { activateStxLanguage, STX_EXTENSION_ID } from '@stacksjs/stx-vscode'
+import * as vscode from 'vscode'
+
+export async function activate(context: vscode.ExtensionContext) {
+  await activateStxLanguage(context, {
+    // Copy node_modules/@stacksjs/stx-vscode/dist/assets here when you build.
+    assetsPath: join(context.extensionPath, 'dist', 'stx'),
+    // The stx extension contributes the snippets itself; offer them only without it.
+    snippets: !vscode.extensions.getExtension(STX_EXTENSION_ID),
+  })
+
+  // The stx extension stands down when it sees this from Stacks.vscode-stacks.
+  return { stx: { active: true } }
+}
+```
+
+The static half has to be in your extension's manifest, because VS Code reads grammars and language configurations only from there. `@stacksjs/stx-vscode/contributes.json` holds the `languages`, `grammars`, `snippets`, `commands` and `configuration` entries, with paths relative to `dist/assets`. Leave `snippets` out of the manifest and pass `snippets: true` instead if your extension can be installed next to the stx extension, or every snippet shows up twice.
+
+`vscode`, `prettier` and `@stacksjs/ts-css` are imported, not bundled: bundle the library into your extension.
+
+## License
+
+MIT

package/dist/assets/languages/stx.configuration.json

@@ -0,0 +1,67 @@
+{
+  "comments": {
+    "blockComment": [
+      "{{--",
+      "--}}"
+    ]
+  },
+  "wordPattern": "(@[a-zA-Z_][a-zA-Z0-9_]*)|([a-zA-Z_][a-zA-Z0-9_]*)",
+  "brackets": [
+    [
+      "{",
+      "}"
+    ],
+    [
+      "[",
+      "]"
+    ],
+    [
+      "(",
+      ")"
+    ]
+  ],
+  "autoClosingPairs": [
+    [
+      "{",
+      "}"
+    ],
+    [
+      "[",
+      "]"
+    ],
+    [
+      "(",
+      ")"
+    ],
+    [
+      "\"",
+      "\""
+    ],
+    [
+      "'",
+      "'"
+    ]
+  ],
+  "surroundingPairs": [
+    [
+      "{",
+      "}"
+    ],
+    [
+      "[",
+      "]"
+    ],
+    [
+      "(",
+      ")"
+    ],
+    [
+      "\"",
+      "\""
+    ],
+    [
+      "'",
+      "'"
+    ]
+  ]
+}

package/dist/assets/snippets/stx-components.json

@@ -0,0 +1,11 @@
+{
+  "component-template": {
+    "prefix": "stx-component",
+    "body": [
+      "<div class=\"component\">",
+      "  $1",
+      "</div>"
+    ],
+    "description": "stx Component Template"
+  }
+}

package/dist/assets/snippets/stx-directives.json

@@ -0,0 +1,74 @@
+{
+  "stx If Directive": {
+    "prefix": "@if",
+    "body": [
+      "@if($1)",
+      "  $2",
+      "@endif"
+    ],
+    "description": "Create an @if directive block"
+  },
+  "stx If-Else Directive": {
+    "prefix": "@ifelse",
+    "body": [
+      "@if($1)",
+      "  $2",
+      "@else",
+      "  $3",
+      "@endif"
+    ],
+    "description": "Create an @if-@else directive block"
+  },
+  "stx Foreach Directive": {
+    "prefix": "@foreach",
+    "body": [
+      "@foreach($1 as $2)",
+      "  $3",
+      "@endforeach"
+    ],
+    "description": "Create a @foreach loop"
+  },
+  "stx For Directive": {
+    "prefix": "@for",
+    "body": [
+      "@for($1; $2; $3)",
+      "  $4",
+      "@endfor"
+    ],
+    "description": "Create a @for loop"
+  },
+  "stx While Directive": {
+    "prefix": "@while",
+    "body": [
+      "@while($1)",
+      "  $2",
+      "@endwhile"
+    ],
+    "description": "Create a @while loop"
+  },
+  "stx Section Directive": {
+    "prefix": "@section",
+    "body": [
+      "@section('$1')",
+      "  $2",
+      "@endsection"
+    ],
+    "description": "Create a @section block"
+  },
+  "stx Include Directive": {
+    "prefix": "@include",
+    "body": [
+      "@include('$1'${2:, ['$3' => $4]})"
+    ],
+    "description": "Include a template"
+  },
+  "stx Component Directive": {
+    "prefix": "@component",
+    "body": [
+      "@component('$1'${2:, ['$3' => $4]})",
+      "  $5",
+      "@endcomponent"
+    ],
+    "description": "Create a @component block"
+  }
+}

package/dist/assets/snippets/stx.json

@@ -0,0 +1,479 @@
+{
+  "stx-comment": {
+    "description": "stx comment block",
+    "prefix": "{{--",
+    "body": [
+      "{{-- $1 --}}$0"
+    ]
+  },
+  "stx-raw": {
+    "description": "Displays content without processing expressions",
+    "prefix": "@raw",
+    "body": [
+      "@raw",
+      "\t$0",
+      "@endraw"
+    ]
+  },
+  "stx-markdown": {
+    "description": "Render markdown content as HTML",
+    "prefix": "@markdown",
+    "body": [
+      "@markdown",
+      "\t$0",
+      "@endmarkdown"
+    ]
+  },
+  "stx-verbatim": {
+    "description": "Displays content without processing directives",
+    "prefix": "@verbatim",
+    "body": [
+      "@verbatim",
+      "\t$0",
+      "@endverbatim"
+    ]
+  },
+  "stx-ts": {
+    "description": "Embeds TypeScript code block",
+    "prefix": "@ts",
+    "body": [
+      "@ts",
+      "\t$0",
+      "@endts"
+    ]
+  },
+  "stx-js": {
+    "description": "Embeds JavaScript code block",
+    "prefix": "@js",
+    "body": [
+      "@js",
+      "\t$0",
+      "@endjs"
+    ]
+  },
+  "stx-component": {
+    "description": "Include a component with props",
+    "prefix": "@component",
+    "body": [
+      "@component('${1:name}', { ${2:props} })$0"
+    ]
+  },
+  "stx-webcomponent": {
+    "description": "Include a web component",
+    "prefix": "@webcomponent",
+    "body": [
+      "@webcomponent('${1:name}')$0"
+    ]
+  },
+  "stx-translate": {
+    "description": "Translate a string using the i18n system",
+    "prefix": "@translate",
+    "body": [
+      "@translate('${1:key}', { ${2:params} })$0"
+    ]
+  },
+  "stx-t": {
+    "description": "Short alias for translate directive",
+    "prefix": "@t",
+    "body": [
+      "@t('${1:key}', { ${2:params} })$0"
+    ]
+  },
+  "stx-if": {
+    "description": "Conditional if statement",
+    "prefix": "@if",
+    "body": [
+      "@if(${1:condition})",
+      "\t$0",
+      "@endif"
+    ]
+  },
+  "stx-if-else": {
+    "description": "Conditional if-else statement",
+    "prefix": "@if-else",
+    "body": [
+      "@if(${1:condition})",
+      "\t$2",
+      "@else",
+      "\t$0",
+      "@endif"
+    ]
+  },
+  "stx-elseif": {
+    "description": "Else-if conditional branch",
+    "prefix": "@elseif",
+    "body": [
+      "@elseif(${1:condition})$0"
+    ]
+  },
+  "stx-unless": {
+    "description": "Inverse of if statement",
+    "prefix": "@unless",
+    "body": [
+      "@unless(${1:condition})",
+      "\t$0",
+      "@endunless"
+    ]
+  },
+  "stx-for": {
+    "description": "Traditional for loop",
+    "prefix": "@for",
+    "body": [
+      "@for(${1:let i = 0}; ${2:i < items.length}; ${3:i++})",
+      "\t$0",
+      "@endfor"
+    ]
+  },
+  "stx-foreach": {
+    "description": "Loop through items using forEach",
+    "prefix": "@foreach",
+    "body": [
+      "@foreach(${1:items} as ${2:item}${3:, ${4:index}})",
+      "\t$0",
+      "@endforeach"
+    ]
+  },
+  "stx-while": {
+    "description": "While loop statement",
+    "prefix": "@while",
+    "body": [
+      "@while(${1:condition})",
+      "\t$0",
+      "@endwhile"
+    ]
+  },
+  "stx-switch": {
+    "description": "Switch statement",
+    "prefix": "@switch",
+    "body": [
+      "@switch(${1:value})",
+      "\t@case(${2:option1})",
+      "\t\t$3",
+      "\t\t@break",
+      "\t@case(${4:option2})",
+      "\t\t$5",
+      "\t\t@break",
+      "\t@default",
+      "\t\t$0",
+      "@endswitch"
+    ]
+  },
+  "stx-case": {
+    "description": "Case for switch statement",
+    "prefix": "@case",
+    "body": [
+      "@case(${1:value})",
+      "\t$0",
+      "\t@break"
+    ]
+  },
+  "stx-default": {
+    "description": "Default case for switch statement",
+    "prefix": "@default",
+    "body": [
+      "@default",
+      "\t$0"
+    ]
+  },
+  "stx-break": {
+    "description": "Break from loop or switch",
+    "prefix": "@break",
+    "body": [
+      "@break$0"
+    ]
+  },
+  "stx-continue": {
+    "description": "Continue to next iteration in a loop",
+    "prefix": "@continue",
+    "body": [
+      "@continue$0"
+    ]
+  },
+  "stx-include": {
+    "description": "Include a partial template",
+    "prefix": "@include",
+    "body": [
+      "@include('${1:template}')$0"
+    ]
+  },
+  "stx-extends": {
+    "description": "Extend a base layout",
+    "prefix": "@extends",
+    "body": [
+      "@extends('${1:layout}')$0"
+    ]
+  },
+  "stx-section": {
+    "description": "Define a content section",
+    "prefix": "@section",
+    "body": [
+      "@section('${1:name}')",
+      "\t$0",
+      "@endsection"
+    ]
+  },
+  "stx-yield": {
+    "description": "Output the contents of a section",
+    "prefix": "@yield",
+    "body": [
+      "@yield('${1:section}')$0"
+    ]
+  },
+  "stx-transition": {
+    "description": "Apply transition animations to an element",
+    "prefix": "@transition",
+    "body": [
+      "@transition('${1|fade,slide,scale,flip,rotate,custom|}', ${2:400}, '${3|ease,ease-in,ease-out,ease-in-out,linear|}', ${4:0}, '${5|in,out,both|}')",
+      "\t$0",
+      "@endtransition"
+    ]
+  },
+  "stx-motion": {
+    "description": "Control animation display based on user preferences",
+    "prefix": "@motion",
+    "body": [
+      "@motion(${1|true,false|})",
+      "\t$0",
+      "@endmotion"
+    ]
+  },
+  "stx-animation-group": {
+    "description": "Group elements for coordinated animations",
+    "prefix": "@animationGroup",
+    "body": [
+      "@animationGroup('${1:groupName}'${2:, '${3:#selector1}'${4:, '${5:#selector2}'${6:, '${7:#selector3}'}}})"
+    ]
+  },
+  "stx-scroll-animate": {
+    "description": "Trigger animation when element scrolls into view",
+    "prefix": "@scrollAnimate",
+    "body": [
+      "@scrollAnimate('${1|fade,slide,scale,flip,rotate,custom|}', ${2:400}, '${3|ease,ease-in,ease-out,ease-in-out,linear|}', ${4:0.2}, ${5:0})",
+      "\t$0",
+      "@endscrollAnimate"
+    ]
+  },
+  "stx-css": {
+    "description": "Embed CSS code block",
+    "prefix": "@css",
+    "body": [
+      "@css",
+      "\t$0",
+      "@endcss"
+    ]
+  },
+  "stx-json": {
+    "description": "Output variable as JSON",
+    "prefix": "@json",
+    "body": [
+      "@json(${1:variable})$0"
+    ]
+  },
+  "stx-env": {
+    "description": "Check environment condition",
+    "prefix": "@env",
+    "body": [
+      "@env('${1:environment}')",
+      "\t$0",
+      "@endenv"
+    ]
+  },
+  "stx-locale": {
+    "description": "Set locale for content",
+    "prefix": "@locale",
+    "body": [
+      "@locale('${1:en}')$0"
+    ]
+  },
+  "stx-echo": {
+    "description": "Echo variable with escaping",
+    "prefix": "{{",
+    "body": [
+      "{{ ${1:variable} }}$0"
+    ]
+  },
+  "stx-echo-raw": {
+    "description": "Echo variable without escaping",
+    "prefix": "{!!",
+    "body": [
+      "{!! ${1:variable} !!}$0"
+    ]
+  },
+  "stx-echo-triple": {
+    "description": "Echo variable with triple braces",
+    "prefix": "{{{",
+    "body": [
+      "{{{ ${1:variable} }}}$0"
+    ]
+  },
+  "stx-component-block": {
+    "description": "Include a component with block content",
+    "prefix": "@component-block",
+    "body": [
+      "@component('${1:name}', { ${2:props} })",
+      "\t$0",
+      "@endcomponent"
+    ]
+  },
+  "stx-slot": {
+    "description": "Define a named slot in a component",
+    "prefix": "@slot",
+    "body": [
+      "@slot('${1:name}')",
+      "\t$0",
+      "@endslot"
+    ]
+  },
+  "stx-form": {
+    "description": "HTML form with submit handler",
+    "prefix": "stx-form",
+    "body": [
+      "<form @submit.prevent=\"${1:handleSubmit}\">",
+      "\t$0",
+      "\t<button type=\"submit\">${2:Submit}</button>",
+      "</form>"
+    ]
+  },
+  "stx-input": {
+    "description": "Form input element with binding",
+    "prefix": "stx-input",
+    "body": [
+      "<input type=\"${1|text,email,password,number,tel,url,date|}\" name=\"${2:name}\" @bind=\"${3:value}\" placeholder=\"${4:placeholder}\" />"
+    ]
+  },
+  "stx-layout": {
+    "description": "Basic HTML layout with stx structure",
+    "prefix": "stx-layout",
+    "body": [
+      "<!DOCTYPE html>",
+      "<html lang=\"${1:en}\">",
+      "<head>",
+      "\t<meta charset=\"UTF-8\">",
+      "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
+      "\t<title>${2:Title}</title>",
+      "\t<style>",
+      "\t\t$3",
+      "\t</style>",
+      "</head>",
+      "<body>",
+      "\t$0",
+      "\t<script>",
+      "\t\tmodule.exports = {",
+      "\t\t\t// component data here",
+      "\t\t};",
+      "\t</script>",
+      "</body>",
+      "</html>"
+    ]
+  },
+  "stx-once": {
+    "description": "Include content only once per rendering cycle",
+    "prefix": "@once",
+    "body": [
+      "@once",
+      "\t$0",
+      "@endonce"
+    ]
+  },
+  "stx-csrf": {
+    "description": "Include CSRF protection token",
+    "prefix": "@csrf",
+    "body": [
+      "@csrf$0"
+    ]
+  },
+  "stx-method": {
+    "description": "Specify form submission method",
+    "prefix": "@method",
+    "body": [
+      "@method('${1|GET,POST,PUT,PATCH,DELETE|}')$0"
+    ]
+  },
+  "stx-auth": {
+    "description": "Content only visible to authenticated users",
+    "prefix": "@auth",
+    "body": [
+      "@auth",
+      "\t$0",
+      "@endauth"
+    ]
+  },
+  "stx-guest": {
+    "description": "Content only visible to guests (non-authenticated users)",
+    "prefix": "@guest",
+    "body": [
+      "@guest",
+      "\t$0",
+      "@endguest"
+    ]
+  },
+  "stx Template": {
+    "prefix": "stx",
+    "body": [
+      "<template>",
+      "  $1",
+      "</template>",
+      "",
+      "<script>",
+      "export default {",
+      "  name: '$2',",
+      "  props: {",
+      "    $3",
+      "  },",
+      "  setup(props) {",
+      "    $4",
+      "    return {",
+      "      $5",
+      "    }",
+      "  }",
+      "}",
+      "</script>"
+    ],
+    "description": "Create a new stx template"
+  },
+  "stx Component": {
+    "prefix": "stxc",
+    "body": [
+      "<template>",
+      "  <div class=\"$1\">",
+      "    $2",
+      "  </div>",
+      "</template>",
+      "",
+      "<script>",
+      "export default {",
+      "  name: '$3',",
+      "  props: {",
+      "    $4",
+      "  }",
+      "}",
+      "</script>"
+    ],
+    "description": "Create a new stx component"
+  },
+  "stx Layout": {
+    "prefix": "stxl",
+    "body": [
+      "<template>",
+      "  <div class=\"layout\">",
+      "    <header>",
+      "      $1",
+      "    </header>",
+      "    <main>",
+      "      $2",
+      "    </main>",
+      "    <footer>",
+      "      $3",
+      "    </footer>",
+      "  </div>",
+      "</template>",
+      "",
+      "<script>",
+      "export default {",
+      "  name: '$4'",
+      "}",
+      "</script>"
+    ],
+    "description": "Create a new stx layout"
+  }
+}