[WIP] vscode plugin

docs/src/content/docs/getting-started/overview.mdx

@@ -1,12 +1,14 @@
 ---
 title: Overview
 ---
-import {Aside} from "@astrojs/starlight/components";
+
+import { Aside } from "@astrojs/starlight/components";
 
 <Aside>
 Want the TL;DR of the features?
 
 Read <a href={"/getting-started/why-viper"}>Why Viper?</a>
+
 </Aside>
 
 Viper supercharges Laravel and Vue to build fullstack applications faster than ever by removing tons of wiring/boilerplate code you would have to write yourself anyway.
@@ -16,7 +18,7 @@ Features include:
 - 📂 Filesystem routing served by laravel
 - ⚡️ SPA navigation with vue-router
 - 🤝 Write your props and actions inline (or alongside) your vue pages
-- 🔗 Fully typesafe queries and mutations powered by `@tanstack/vue-router` and  `spate/typescript-transformer`
+- 🔗 Fully typesafe queries and mutations powered by `@tanstack/vue-router` and `spate/typescript-transformer`
 
 Here's an example of an end-to-end typesafe route to update a users profile:
 
@@ -33,19 +35,19 @@ Here's an example of an end-to-end typesafe route to update a users profile:
 </template>
 
 <script setup lang="ts">
-import { usePage } from '@ozmos/viper-vue';
+import { usePage } from "@ozmos/viper-vue";
 
-const page = usePage<ViperGen.Example>();
+const page = usePage<ViperGen.UsersUserParamEdit>();
 
-const { data: user } = page.useProp('user');
+const { data: user } = page.useProp("user");
 
-const { mutate, state, isPending } = page.useForm('updateProfile', {
+const { mutate, state, isPending } = page.useForm("updateProfile", {
   state: {
     name: user.value.name,
   },
   onSuccess(data) {
     alert(`Updated name to ${data.name}`);
-  }
+  },
 });
 </script>
 

package.json

@@ -5,7 +5,8 @@
   "workspaces": ["packages/*"],
   "scripts": {
     "docs:dev": "cd docs && bun dev",
-    "docs:build": "cd docs && bun run build"
+    "docs:build": "cd docs && bun run build",
+    "vscode:build": "cd packages/viper-vscode && bun run compile"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4"

packages/viper-vscode/.gitignore

@@ -0,0 +1 @@
+.out/

packages/viper-vscode/.vscode/launch.json

@@ -0,0 +1,12 @@
+{
+  "version": "0.1.0",
+  "configurations": [
+    {
+      "name": "Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "runtimeExecutable": "${execPath}",
+      "args": ["--extensionDevelopmentPath=${workspaceFolder}"]
+    }
+  ]
+}

packages/viper-vscode/.vscodeignore

@@ -0,0 +1,7 @@
+src/**
+tsconfig.json
+node_modules/**
+.vscode/**
+.vscode-test/**
+*.map
+.gitignore 

packages/viper-vscode/README.md

@@ -0,0 +1,65 @@
+# PHP in Vue - VSCode Extension
+
+This extension provides PHP syntax highlighting and IntelliSense support for PHP code inside Vue files when using the `<php>` tag.
+
+## Features
+
+- **Syntax Highlighting**: Full PHP syntax highlighting within `<php>` tags in Vue files
+- **IntelliSense**: Auto-completion, hover information, and other language features powered by Intelephense
+- **Error Detection**: PHP syntax errors and warnings within Vue files
+
+## Requirements
+
+- [Intelephense](https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client) extension must be installed for IntelliSense features
+
+## Usage
+
+1. Install this extension
+2. Install the Intelephense extension
+3. Open a Vue file with PHP code blocks:
+
+```vue
+<template>
+  <div>{{ message }}</div>
+</template>
+
+<php>
+  $message = "Hello from PHP!";
+  echo $message;
+</php>
+```
+
+The PHP code inside `<php>` tags will have:
+
+- Syntax highlighting
+- Auto-completion
+- Hover information
+- Error detection
+
+## Configuration
+
+You can disable the extension by setting:
+
+```json
+{
+  "phpInVue.enable": false
+}
+```
+
+## Development
+
+To set up the development environment:
+
+1. Install dependencies: `npm install`
+2. Compile TypeScript: `npm run compile`
+3. Open in VSCode and press F5 to launch a new Extension Development Host window
+
+## Publishing
+
+```bash
+npm run publish
+```
+
+## License
+
+MIT

packages/viper-vscode/package.json

@@ -0,0 +1,51 @@
+{
+  "publisher": "ozmos",
+  "name": "viper-vscode",
+  "displayName": "PHP in Vue",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Get PHP syntax highlighting in Vue files for use with Viper",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ozmos-dev/viper"
+  },
+  "categories": ["Programming Languages"],
+  "engines": {
+    "vscode": "^1.83.1"
+  },
+  "main": "./out/extension.js",
+  "activationEvents": ["onLanguage:vue"],
+  "contributes": {
+    "grammars": [
+      {
+        "path": "./syntaxes/vue.php.tmLanguage.json",
+        "scopeName": "source.vue.php",
+        "injectTo": ["source.vue"]
+      }
+    ],
+    "configuration": {
+      "title": "PHP in Vue",
+      "properties": {
+        "phpInVue.enable": {
+          "type": "boolean",
+          "default": true,
+          "description": "Enable PHP IntelliSense in Vue files"
+        }
+      }
+    }
+  },
+  "scripts": {
+    "compile": "tsc -p ./",
+    "watch": "tsc -watch -p ./",
+    "publish": "vsce publish --no-dependencies"
+  },
+  "dependencies": {
+    "vscode-languageclient": "^9.0.1"
+  },
+  "devDependencies": {
+    "@types/vscode": "^1.83.1",
+    "@vscode/vsce": "^3.2.2",
+    "typescript": "^5.2.2"
+  }
+}