stacks 0.53.1 → 0.56.3

package/ide/vscode/.vscode/stacks.code-snippets

@@ -0,0 +1,182 @@
+{
+	"Stacks Action": {
+		"scope": "typescript",
+		"prefix": "act",
+		"body": [
+			"public function $1($2)",
+			"{",
+			"    $3",
+			"}"
+		],
+		"description": "Bootstrap a Stacks Actions"
+	},
+	"Stacks Function": {
+		"scope": "typescript",
+		"prefix": "func",
+		"body": [
+			"public function $1($2)",
+			"{",
+			"    $3",
+			"}"
+		],
+		"description": "Bootstrap a Stacks Function"
+	},
+	"Stacks Method": {
+		"scope": "typescript",
+		"prefix": "met",
+		"body": [
+			"public function $1($2)",
+			"{",
+			"    $3",
+			"}"
+		],
+		"description": "Alias of the Stacks Function snippet"
+	},
+	"Stacks Protected Method": {
+		"scope": "typescript",
+		"prefix": "pmet",
+		"body": [
+			"protected function $1($2)",
+			"{",
+			"    $3",
+			"}"
+		],
+		"description": "Bootstrap a Protected Function"
+	},
+	"Stacks Protected Function": {
+		"scope": "typescript",
+		"prefix": "pfunct",
+		"body": [
+			"protected function $1($2)",
+			"{",
+			"    $3",
+			"}"
+		],
+		"description": "Alias of the Protected Function snippet"
+	},
+	"Print to console": {
+		"scope": "javascript,typescript",
+		"prefix": "clo",
+		"body": [
+			"// eslint-disable-next-line no-console",
+			"console.log('$1')$2",
+		],
+		"description": "Log output to console"
+	},
+	"Stacks Component": {
+		"prefix": "com",
+		"body": [
+			"<script setup lang=\"ts\">",
+			"\t$1",
+			"</script>",
+			"",
+			"<template>",
+			"",
+			"</template>",
+			"",
+			"<style scoped>",
+			"",
+			"</style>"
+		],
+	},
+	"Stacks v-for": {
+		"prefix": "vfor",
+		"body": [
+			"<${1:div} v-for=\"${2:item} in ${2:item}s\" :key=\"${2:item}.id\">",
+			"\t{{ ${2:item} }}",
+			"</${1:div}>"
+		],
+		"description": "vfor statement"
+	},
+	"Stacks v-model Directive": {
+		"prefix": "vmodel",
+		"body": [
+			"<input v-model=\"${1:data}\" type=\"text\" />"
+		],
+		"description": "v-model directive"
+	},
+	"Stacks v-model Number Directive": {
+		"prefix": "vmodel-num",
+		"body": [
+			"<input v-model.number=\"${1:numData}\" type=\"number\" step=\"1\" />"
+		],
+		"description": "v-model directive number input"
+	},
+	"Stacks v-on Shortcut Directive": {
+		"prefix": "von",
+		"body": [
+			"@click=\"${1:handler}(${2:arg}, $event)\""
+		],
+		"description": "v-on click handler with arguments"
+	},
+	"Stacks Component with Props Binding": {
+		"prefix": "vel-props",
+		"body": [
+			"<${1:component} :${1:propName}=\"${0}\"></${1:component}>"
+		],
+		"description": "component element with props"
+	},
+	"Stacks Named Slot": {
+		"prefix": "vslot-named",
+		"body": [
+			"<template v-slot:${0:name}>${1:defaultcontent}</template>"
+		],
+		"description": "named slot"
+	},
+	"Stacks Image Source Binding": {
+		"prefix": "vsrc",
+		"body": [
+			"<img :src=\"'/path/to/images/' + ${1:fileName}\" alt=\"${2:altText}\"/>"
+		],
+		"description": "image source binding"
+	},
+	"Stacks Style Binding": {
+		"prefix": "vstyle",
+		"body": [
+			"<${1:div} :style=\"{ fontSize: ${2:data} + 'px' }\"></${1:div}>"
+		],
+		"description": "vue inline style binding"
+	},
+	"Stacks Style Binding Object": {
+		"prefix": "vstyle-obj",
+		"body": [
+			"<${1:div} :style=\"[${2:styleObjectA}, ${3:styleObjectB]}\"></${1:div}>"
+		],
+		"description": "vue inline style binding, objects"
+	},
+	"Stacks Class Binding": {
+		"prefix": "vclass",
+		"body": [
+			"<${1:div} :class=\"{ ${2:className}: ${3:data} }\"></${1:div}>"
+		],
+		"description": "vue class binding"
+	},
+	"Stacks Class Binding Object": {
+		"prefix": "vclass-obj",
+		"body": [
+			"<${1:div} :class=\"[${2:classNameA}, ${3:classNameB}]\"></${1:div}>"
+		],
+		"description": "vue class binding"
+	},
+	"Stacks Multiple Conditional Class Bindings": {
+		"prefix": "vclass-obj-mult",
+		"body": [
+			"<${1:div} :class=\"[${2:classNameA}, {${3:classNameB} : ${4:condition}}]\"></${1:div}>"
+		],
+		"description": "vue multiple conditional class bindings"
+	},
+	"Stacks Emit from Child": {
+		"prefix": "vemit-child",
+		"body": [
+			"@change=\"$emit('change', $event.target.value)\""
+		],
+		"description": "Stacks Emit from Child Component"
+	},
+	"Stacks Emit to Parent": {
+		"prefix": "vemit-parent",
+		"body": [
+			"@change=\"${1:foo} = $$event\""
+		],
+		"description": "Stacks Emit to Parent Component"
+	}
+}

package/ide/vscode/README.md

@@ -0,0 +1,42 @@
+# Stacks VSCode Extension Pack
+
+A collection of extensions for working with Stacks Applications in VS Code to make application development easier and more fun.
+
+Please note, the Stacks framework auto-configures any extension that needs to be configured.
+
+## Extensions Included
+
+- [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) - Vue Language Features is a language support extension built for Vue, Vitepress and petite-vue. this is based on @vue/reactivity to calculate everything on-demand, to implement native TypeScript language service level performance ⚡
+- [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks) - Adds a bookmark to places you designate in your file, and allows you to quickly jump between them. Super helpful. Type `command + opt + K` to create a bookmark and `command + opt + J` to jump between them 🔖
+- [Jumpy](https://marketplace.visualstudio.com/items?itemName=wmaurer.vscode-jumpy) - We lose a lot of time scanning with a mouse, time we can get back by using our keyboard instead. Jumpy provides fast cursor movement by giving you a couple of keys that offer a hook to get to another part of the document.
+- [NPM Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense) - a plugin that auto-completes npm modules in import statements.
+- [ES6 Snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets) - quickly spin up ES6 JavaScript with only 3 or 4 characters.
+- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - Integrates ESLint into VS Code.
+- [Spelling Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - A simple source code spell checker for code.
+- [markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint) - Markdown/CommonMark linting and style checking for Visual Studio Code.
+- [UnoCSS](https://marketplace.visualstudio.com/items?itemName=antfu.unocss) - An atomic CSS framework.
+- [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) - This extension quickly searches (using ripgrep) your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the activity bar. The view can be dragged out of the activity bar into the explorer pane (or anywhere else you would prefer it to be).
+- [Log Output Colorizer](https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer) - Language extension for VS Code that adds syntax colorization for both the output/debug/extensions panel and *.log files.
+- [Vitest Explorer](https://marketplace.visualstudio.com/items?itemName=antfu.vitest-explorer) - A VS Code extension for the Vitest test runner.
+- [PostHTML Snippets](https://marketplace.visualstudio.com/items?itemName=cossssmin.posthtml) - Quickly build HTML emails with utility-first CSS.
+- [Goto Definition Alias](https://marketplace.visualstudio.com/items?itemName=antfu.goto-definition-alias) - An extension that allows you to jump to the definition of an aliased import.
+
+## Contributing
+
+We welcome contributions to this extension pack.
+
+## Local Usage
+
+```bash
+pnpm run package // to create a .vsix file
+code --install-extension stacks-vscode-0.44.2.vsix // to install the extension locally
+```
+
+_If you would like to add an extension, please open an issue or start a Discussion first 🙏🏼._
+
+## Relevant Links
+
+- [GitHub](https://github.com/stacksjs/stacks)
+- [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=stacks.vscode-stacks)
+
+**Enjoy!**

package/ide/vscode/package.json

@@ -0,0 +1,64 @@
+{
+  "publisher": "Stacks",
+  "name": "vscode-stacks",
+  "displayName": "Stacks",
+  "version": "0.52.10",
+  "description": "A modern Stacks development environment.",
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/chrisbbreuer",
+  "homepage": "https://github.com/stacksjs/stacks/tree/main/.stacks/vscode#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/stacksjs/stacks.git",
+    "directory": "./.stacks/vscode"
+  },
+  "bugs": {
+    "url": "https://github.com/stacksjs/stacks/issues"
+  },
+  "keywords": [
+    "stacks",
+    "stacksjs",
+    "extension pack",
+    "stacks extension collection"
+  ],
+  "categories": [
+    "Extension Packs"
+  ],
+  "icon": "logo.png",
+  "engines": {
+    "vscode": "^1.79.2"
+  },
+  "scripts": {
+    "package": "vsce package",
+    "release": "vsce publish"
+  },
+  "galleryBanner": {
+    "color": "#d7e4f5",
+    "theme": "light"
+  },
+  "extensionPack": [
+    "vue.volar",
+    "vue.vscode-typescript-vue-plugin",
+    "dbaeumer.vscode-eslint",
+    "streetsidesoftware.code-spell-checker",
+    "davidanson.vscode-markdownlint",
+    "antfu.unocss",
+    "alefragnani.Bookmarks",
+    "christian-kohler.npm-intellisense",
+    "wmaurer.vscode-jumpy",
+    "Gruntfuggly.todo-tree",
+    "IBM.output-colorizer",
+    "ZixuanChen.vitest-explorer",
+    "cossssmin.posthtml",
+    "mattpocock.ts-error-translator",
+    "amazonwebservices.aws-toolkit-vscode",
+    "rangav.vscode-thunder-client",
+    "antfu.goto-alias",
+    "mikestead.dotenv",
+    "pflannery.vscode-versionlens",
+    "foxundermoon.shell-format"
+  ],
+  "devDependencies": {
+    "@vscode/vsce": "^2.19.0"
+  }
+}

package/{components → libs/components}/vue/main.ts

@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
 
 // import Previewer from 'virtual:vue-component-preview'
-import Demo from '../../../components/Demo.vue'
+import Demo from '../../../../resources/components/Demo.vue'
 
 // prepare the messages object from the yaml language files
 // const messages = Object.fromEntries(

package/{components → libs/components}/vue/package.json

@@ -2,7 +2,7 @@
   "name": "hello-world-vue",
   "type": "module",
   "version": "",
-  "packageManager": "pnpm@8.5.1",
+  "packageManager": "pnpm@8.6.5",
   "description": "Your Vue component library description",
   "author": "Chris Breuer",
   "license": "MIT",

package/{components → libs/components}/web/package.json

@@ -2,7 +2,7 @@
   "name": "hello-world-elements",
   "type": "module",
   "version": "",
-  "packageManager": "pnpm@8.5.1",
+  "packageManager": "pnpm@8.6.5",
   "description": "Your framework agnostic web component library description.",
   "author": "Chris Breuer",
   "license": "MIT",

package/libs/examples/vue/App.vue

@@ -0,0 +1,12 @@
+<!--
+  This is how you would implement your generated
+  library into your own frontend. You may import
+  any of the components developed.
+-->
+<script setup lang="ts">
+import { Demo } from './dist/index.mjs'
+</script>
+
+<template>
+  <Demo />
+</template>

package/libs/examples/vue/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="./favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Stacks Vue Example</title>
+    <link rel="stylesheet" href="./dist/style.css">
+  </head>
+  <body>
+    <div id="app"></div>
+
+    <script type="module">
+      import { createApp } from 'vue'
+      import App from './App.vue'
+
+      createApp(App).mount('#app')
+    </script>
+  </body>
+</html>

package/libs/examples/web/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="./favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Stacks Web Component Example</title>
+  </head>
+  <body>
+    <script type="module" src="./dist/index.mjs"></script>
+    <hello-world></hello-world>
+  </body>
+</html>

package/libs/functions/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "hello-world-fx",
+  "type": "module",
+  "version": "",
+  "packageManager": "pnpm@8.6.5",
+  "description": "Your function library description.",
+  "author": "Chris Breuer",
+  "license": "MIT",
+  "homepage": "https://github.com/stacksjs/stacks/tree/main/functions#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stacksjs/stacks.git",
+    "directory": "functions"
+  },
+  "bugs": {
+    "url": "https://github.com/stacksjs/stacks/issues"
+  },
+  "keywords": ["functions", "composables", "library", "typescript", "javascript"],
+  "contributors": ["Chris Breuer <chris@ow3.org>"],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "vite build -c ../build/functions.ts",
+    "prepublishOnly": "pnpm run build"
+  },
+  "devDependencies": {
+    "stacks": "workspace:*"
+  }
+}