absolutejs-vscode 0.0.8

package/CHANGELOG.md

@@ -0,0 +1,22 @@
+# Changelog
+
+## 0.0.8
+
+- Add document-link support for AbsoluteJS style module imports so Ctrl-click opens the style file directly.
+
+## 0.0.7
+
+- Adds go-to-definition support for AbsoluteJS style module imports in JS/TS files.
+
+## 0.0.3
+
+- Adds HTML/HTMX custom-data and hover support for `<absolute-island>` and `<abs-htmx-stream-slot>`
+- Documents `src`, `trigger`, `swap`, and `target` for HTMX streaming
+- Documents the `data-absolute-slot` transport marker
+- Keeps existing `<absolute-island>` support
+
+## 0.0.1
+
+- Initial release
+- Adds HTML custom-data support for `<absolute-island>`
+- Documents `framework`, `component`, `hydrate`, and `props`

package/LICENSE

@@ -0,0 +1,88 @@
+# Business Source License 1.1
+
+**Licensor:** Alex Kahn
+
+**Licensed Work:** absolutejs-vscode (https://github.com/absolutejs/vscode-extension)
+
+**Change Date:** May 29, 2030
+
+**Change License:** Apache License, Version 2.0
+
+---
+
+## Terms
+
+The Licensor hereby grants you the right to copy, modify, create derivative
+works, redistribute, and make non-production use of the Licensed Work. The
+Licensor may make an Additional Use Grant, permitting limited production use.
+
+### Additional Use Grant
+
+You may use the Licensed Work in production, provided your use does not include
+any of the following:
+
+1. **Offering a Competing Service.** You may not offer the Licensed Work, or
+   any derivative or substantial portion of it, to third parties as a hosted or
+   managed service that competes with a hosted IDE or development environment that incorporates the Licensed Work as a primary feature (including, but not limited to, services like GitHub Codespaces, Gitpod, StackBlitz, CodeSandbox, or any similar cloud-IDE platform). This includes any
+   product whose primary value to its users is the functionality the Licensed
+   Work provides.
+
+2. **Resale or Redistribution as a Standalone Product.** You may not sell,
+   license, or distribute the Licensed Work, or any derivative or fork of it,
+   as a standalone commercial product.
+
+3. **Removal of Attribution.** Any derivative work, fork, or redistribution of
+   the Licensed Work must prominently credit AbsoluteJS and include a link to
+   the original project repository (https://github.com/absolutejs/vscode-extension).
+
+For clarity, the following uses are expressly permitted:
+
+- Using the Licensed Work to build and operate your own applications, websites,
+  internal tools, or SaaS products (whether commercial or non-commercial), so
+  long as the Licensed Work itself is not the primary product you are selling.
+- Using the Licensed Work as a dependency in commercial software you build and
+  sell, as long as the software is not itself a competing managed service of
+  the kind described in clause 1.
+- Providing consulting, development, or professional services to clients using
+  the Licensed Work.
+- Forking and modifying the Licensed Work for your own internal use, provided
+  attribution is maintained.
+
+### Change Date and Change License
+
+On the Change Date specified above, or on such other date as the Licensor may
+specify by written notice, the Licensed Work will be made available under the
+Change License (Apache License, Version 2.0). Until the Change Date, the terms
+of this Business Source License 1.1 apply.
+
+### Trademark
+
+This license does not grant you any rights to use the "AbsoluteJS" or
+"@absolutejs" name, logo, or any related trademarks. Forks and derivative works
+must not be named or branded in a manner that suggests endorsement by or
+affiliation with AbsoluteJS or the Licensor.
+
+### Notices
+
+You must not remove or obscure any licensing, copyright, or other notices
+included in the Licensed Work.
+
+### No Warranty
+
+THE LICENSED WORK IS PROVIDED "AS IS". THE LICENSOR HEREBY DISCLAIMS ALL
+WARRANTIES, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT. IN NO
+EVENT SHALL THE LICENSOR 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 LICENSED WORK OR THE USE OR OTHER DEALINGS IN THE
+LICENSED WORK.
+
+---
+
+## Contact
+
+For commercial licensing inquiries or additional permissions, contact:
+
+- **Alex Kahn**
+- alexkahndev@gmail.com
+- alexkahndev.github.io

package/README.md

@@ -0,0 +1,40 @@
+# AbsoluteJS VS Code Extension
+
+VS Code extension project for AbsoluteJS. It currently ships HTML and HTMX hover support for island authoring, HTMX-native streaming primitives, and style module import navigation.
+
+It adds hover and autocomplete support for:
+
+- `<absolute-island>`
+- `<abs-htmx-stream-slot>`
+- `framework`
+- `component`
+- `hydrate`
+- `props`
+- `data-absolute-slot`
+
+This project is the dedicated home for AbsoluteJS editor tooling. Today it focuses on plain `.html` files, where TypeScript declarations alone are not enough.
+
+## Install
+
+Install the packaged `.vsix` file from VS Code:
+
+1. Open Extensions
+2. Select `...`
+3. Choose `Install from VSIX...`
+
+Or use:
+
+```bash
+code --install-extension /home/alexkahn/abs/absolutejs-vscode-extension/absolutejs-vscode-0.0.8.vsix
+```
+
+## What it adds
+
+- Tag docs for `<absolute-island>` and `<abs-htmx-stream-slot>`
+- Attribute docs for island authoring, HTMX streaming authoring, and AbsoluteJS transport markers
+- Enumerated value suggestions for framework and hydrate modes
+- Go-to-definition from AbsoluteJS style module imports such as `*.module.scss`
+
+## Why this exists
+
+Raw HTML editors do not read framework runtime types or TypeScript DOM declarations for custom element hover the way TSX and SFC tooling does. VS Code HTML custom data is the correct integration point for this experience.

package/extension.js

@@ -0,0 +1,283 @@
+const vscode = require("vscode");
+const path = require("path");
+
+const SCRIPT_LANGUAGES = [
+  "javascript",
+  "javascriptreact",
+  "typescript",
+  "typescriptreact"
+];
+
+const STYLE_MODULE_PATTERN = /\.module\.(?:scss|sass|less|styl|stylus)$/i;
+
+const islandTagDoc = new vscode.MarkdownString(
+  [
+    "```html",
+    "<absolute-island framework=\"react\" component=\"ReactCounter\" hydrate=\"load\" props='{\"initialCount\":0}'></absolute-island>",
+    "```",
+    "",
+    "Platform-native AbsoluteJS island element for HTML and HTMX host pages.",
+    "AbsoluteJS lowers this element into SSR island markup and the client bootstrap hydrates it according to the `hydrate` mode."
+  ].join("\n")
+);
+islandTagDoc.isTrusted = false;
+
+const htmxStreamSlotTagDoc = new vscode.MarkdownString(
+  [
+    "```html",
+    "<abs-htmx-stream-slot src=\"/htmx/cards/summary\">",
+    "  <article class=\"card-fallback\">Loading...</article>",
+    "</abs-htmx-stream-slot>",
+    "```",
+    "",
+    "Platform-native AbsoluteJS HTMX streaming primitive.",
+    "AbsoluteJS lowers this element into native HTMX markup so the browser performs a normal `hx-get` fragment request."
+  ].join("\n")
+);
+htmxStreamSlotTagDoc.isTrusted = false;
+
+const islandAttributeDocs = new Map([
+  [
+    "framework",
+    "Target framework runtime for this island component. Valid values: `react`, `vue`, `svelte`, `angular`."
+  ],
+  [
+    "component",
+    "Registry component name to render for this island."
+  ],
+  [
+    "hydrate",
+    "Client hydration timing. `load` hydrates immediately, `idle` waits for idle time, `visible` waits for intersection, and `none` renders static HTML only."
+  ],
+  [
+    "props",
+    "JSON-serialized props payload passed to the island component. In HTML, prefer single quotes around the attribute so the JSON can keep its double quotes."
+  ]
+]);
+
+const globalAttributeDocs = new Map([
+  [
+    "data-absolute-slot",
+    "Marks a DOM node as an AbsoluteJS streaming slot placeholder or slot root. AbsoluteJS uses it to find and patch the correct region during out-of-order streaming."
+  ]
+]);
+
+const htmxStreamSlotAttributeDocs = new Map([
+  [
+    "src",
+    "HTMX fragment endpoint to request for this slot. AbsoluteJS lowers the tag to `hx-get`."
+  ],
+  [
+    "trigger",
+    "Optional HTMX trigger. Defaults to `load`."
+  ],
+  [
+    "swap",
+    "Optional HTMX swap strategy. Defaults to `outerHTML`."
+  ],
+  [
+    "target",
+    "Optional HTMX target selector. Defaults to `this`."
+  ]
+]);
+
+function buildHover(text) {
+  const markdown = new vscode.MarkdownString(text);
+  markdown.isTrusted = false;
+  return new vscode.Hover(markdown);
+}
+
+function getWordAt(document, position) {
+  const range = document.getWordRangeAtPosition(position, /[A-Za-z0-9_-]+/);
+  return range ? document.getText(range) : "";
+}
+
+function isInsideAbsoluteIsland(document, position) {
+  const line = document.lineAt(position.line).text;
+  const before = line.slice(0, position.character + 1);
+  return before.includes("<absolute-island") || before.includes("</absolute-island");
+}
+
+function isInsideAbsoluteHTMXStreamSlot(document, position) {
+  const line = document.lineAt(position.line).text;
+  const before = line.slice(0, position.character + 1);
+  return before.includes("<abs-htmx-stream-slot") || before.includes("</abs-htmx-stream-slot");
+}
+
+function provideHover(document, position) {
+  const word = getWordAt(document, position);
+  if (!word) return null;
+
+  if (word === "absolute-island") {
+    return new vscode.Hover(islandTagDoc);
+  }
+
+  const globalAttributeDoc = globalAttributeDocs.get(word);
+  if (globalAttributeDoc) {
+    return buildHover(`**${word}**\n\n${globalAttributeDoc}`);
+  }
+
+  if (word === "abs-htmx-stream-slot") {
+    return new vscode.Hover(htmxStreamSlotTagDoc);
+  }
+
+  if (isInsideAbsoluteIsland(document, position)) {
+    const attributeDoc = islandAttributeDocs.get(word);
+    if (!attributeDoc) return null;
+
+    return buildHover(`**${word}**\n\n${attributeDoc}`);
+  }
+
+
+  if (isInsideAbsoluteHTMXStreamSlot(document, position)) {
+    const attributeDoc = htmxStreamSlotAttributeDocs.get(word);
+    if (!attributeDoc) return null;
+
+    return buildHover(`**${word}**\n\n${attributeDoc}`);
+  }
+
+  return null;
+}
+
+function getQuotedStringRangeAtPosition(document, position) {
+  const line = document.lineAt(position.line).text;
+  const quoteRanges = [];
+  const quotePattern = /(['"])(?:(?=(\\?))\2.)*?\1/g;
+  let match;
+
+  while ((match = quotePattern.exec(line)) !== null) {
+    const raw = match[0];
+    const start = match.index;
+    const end = start + raw.length;
+    if (
+      position.character > start &&
+      position.character < end - 1
+    ) {
+      quoteRanges.push({
+        range: new vscode.Range(
+          position.line,
+          start + 1,
+          position.line,
+          end - 1
+        ),
+        text: raw.slice(1, -1)
+      });
+    }
+  }
+
+  return quoteRanges[0] ?? null;
+}
+
+function getQuotedStringRanges(document, lineNumber) {
+  const line = document.lineAt(lineNumber).text;
+  const quoteRanges = [];
+  const quotePattern = /(['"])(?:(?=(\\?))\2.)*?\1/g;
+  let match;
+
+  while ((match = quotePattern.exec(line)) !== null) {
+    const raw = match[0];
+    const start = match.index;
+    const end = start + raw.length;
+    quoteRanges.push({
+      range: new vscode.Range(
+        lineNumber,
+        start + 1,
+        lineNumber,
+        end - 1
+      ),
+      text: raw.slice(1, -1)
+    });
+  }
+
+  return quoteRanges;
+}
+
+function isImportLikeLine(document, position, range) {
+  const line = document.lineAt(position.line).text;
+  const before = line.slice(0, range.start.character);
+
+  return (
+    /\bfrom\s*$/.test(before) ||
+    /\bimport\s*\(\s*$/.test(before) ||
+    /\bimport\s*$/.test(before) ||
+    /\brequire\s*\(\s*$/.test(before)
+  );
+}
+
+function resolveStyleModuleUri(document, quoted) {
+  if (!STYLE_MODULE_PATTERN.test(quoted.text)) return null;
+  if (!quoted.text.startsWith(".")) return null;
+  if (!isImportLikeLine(document, quoted.range.start, quoted.range)) return null;
+
+  const targetPath = path.resolve(
+    path.dirname(document.uri.fsPath),
+    quoted.text
+  );
+
+  return vscode.Uri.file(targetPath);
+}
+
+async function uriExists(uri) {
+  try {
+    await vscode.workspace.fs.stat(uri);
+
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function provideStyleModuleDefinition(document, position) {
+  const quoted = getQuotedStringRangeAtPosition(document, position);
+  if (!quoted) return null;
+
+  const targetUri = resolveStyleModuleUri(document, quoted);
+  if (!targetUri) return null;
+  if (!(await uriExists(targetUri))) return null;
+
+  return new vscode.Location(targetUri, new vscode.Position(0, 0));
+}
+
+async function provideStyleModuleDocumentLinks(document) {
+  const links = [];
+
+  for (let lineNumber = 0; lineNumber < document.lineCount; lineNumber += 1) {
+    const quotedRanges = getQuotedStringRanges(document, lineNumber);
+
+    for (const quoted of quotedRanges) {
+      const targetUri = resolveStyleModuleUri(document, quoted);
+      if (!targetUri) continue;
+      if (!(await uriExists(targetUri))) continue;
+
+      const link = new vscode.DocumentLink(quoted.range, targetUri);
+      link.tooltip = "Open style module";
+      links.push(link);
+    }
+  }
+
+  return links;
+}
+
+function activate(context) {
+  const htmlSelector = [{ language: "html" }];
+  const scriptSelector = SCRIPT_LANGUAGES.map((language) => ({ language }));
+
+  context.subscriptions.push(
+    vscode.languages.registerHoverProvider(htmlSelector, {
+      provideHover
+    }),
+    vscode.languages.registerDefinitionProvider(scriptSelector, {
+      provideDefinition: provideStyleModuleDefinition
+    }),
+    vscode.languages.registerDocumentLinkProvider(scriptSelector, {
+      provideDocumentLinks: provideStyleModuleDocumentLinks
+    })
+  );
+}
+
+function deactivate() {}
+
+module.exports = {
+  activate,
+  deactivate
+};

package/html-custom-data.json

@@ -0,0 +1,83 @@
+{
+  "version": 1.1,
+  "tags": [
+    {
+      "name": "absolute-island",
+      "description": "Platform-native AbsoluteJS island element for HTML and HTMX host pages. AbsoluteJS server rendering lowers this element into SSR island markup and the client bootstrap hydrates it according to the hydrate mode.",
+      "attributes": [
+        {
+          "name": "framework",
+          "description": "Target framework runtime for this island component.",
+          "values": [
+            {
+              "name": "react"
+            },
+            {
+              "name": "svelte"
+            },
+            {
+              "name": "vue"
+            },
+            {
+              "name": "angular"
+            }
+          ]
+        },
+        {
+          "name": "component",
+          "description": "Registry component name to render for this island."
+        },
+        {
+          "name": "hydrate",
+          "description": "Client hydration timing. load hydrates immediately, idle waits for idle time, visible waits for intersection, and none renders static HTML only.",
+          "values": [
+            {
+              "name": "load"
+            },
+            {
+              "name": "idle"
+            },
+            {
+              "name": "visible"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "props",
+          "description": "JSON-serialized props payload passed to the target island component. In HTML, prefer single quotes around the attribute so the JSON can keep its double quotes."
+        }
+      ]
+    },
+    {
+      "name": "abs-htmx-stream-slot",
+      "description": "Platform-native AbsoluteJS HTMX streaming primitive. AbsoluteJS lowers this element into native HTMX markup so the browser performs a normal hx-get request for the resolved fragment.",
+      "attributes": [
+        {
+          "name": "src",
+          "description": "HTMX fragment endpoint to request for this slot. AbsoluteJS lowers the tag to hx-get=\"...\"."
+        },
+        {
+          "name": "trigger",
+          "description": "Optional HTMX trigger. Defaults to load."
+        },
+        {
+          "name": "swap",
+          "description": "Optional HTMX swap strategy. Defaults to outerHTML."
+        },
+        {
+          "name": "target",
+          "description": "Optional HTMX target selector. Defaults to this."
+        }
+      ]
+    }
+  ],
+  "globalAttributes": [
+    {
+      "name": "data-absolute-slot",
+      "description": "Marks a DOM node as an AbsoluteJS streaming slot placeholder or slot root. AbsoluteJS uses it to find and patch the correct region during out-of-order streaming."
+    }
+  ]
+}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "absolutejs-vscode",
+  "displayName": "AbsoluteJS",
+  "description": "VS Code support for AbsoluteJS projects, starting with HTML and HTMX island authoring.",
+  "version": "0.0.8",
+  "license": "BSL-1.1",
+  "publisher": "AbsoluteJS",
+  "main": "./extension.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/absolutejs/vscode-extension.git"
+  },
+  "homepage": "https://github.com/absolutejs/absolutejs",
+  "bugs": {
+    "url": "https://github.com/absolutejs/vscode-extension/issues"
+  },
+  "engines": {
+    "vscode": "^1.90.0"
+  },
+  "activationEvents": [
+    "onLanguage:html",
+    "onLanguage:javascript",
+    "onLanguage:javascriptreact",
+    "onLanguage:typescript",
+    "onLanguage:typescriptreact"
+  ],
+  "categories": [
+    "Programming Languages",
+    "Other"
+  ],
+  "keywords": [
+    "absolutejs",
+    "html",
+    "htmx",
+    "islands",
+    "custom-data",
+    "absolute-island",
+    "framework",
+    "editor"
+  ],
+  "files": [
+    "extension.js",
+    "html-custom-data.json",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE",
+    "package.json"
+  ],
+  "contributes": {
+    "html.customData": [
+      "./html-custom-data.json"
+    ]
+  },
+  "scripts": {
+    "config": "absolute config"
+  },
+  "devDependencies": {
+    "@absolutejs/absolute": "^0.19.0-beta.1051"
+  }
+}