@madenowhere/phaze-tsplugin 0.0.1

package/README.md

@@ -0,0 +1,47 @@
+# @madenowhere/phaze-tsplugin
+
+TypeScript language-service plugin that teaches editors (VS Code, etc.) about Phaze JSX `use:directive` attributes — silences false-positive "unused binding" diagnostics when an import is consumed only via a `use:NAME` JSX attribute.
+
+## The problem
+
+phaze-compile rewrites this:
+
+```tsx
+<input use:autofocus={true} />
+```
+
+into this (post-AST):
+
+```tsx
+((__el) => (autofocus(__el, () => true), __el))(<input />)
+```
+
+The rewritten code references `autofocus` like any other function call. But TypeScript's source-level analysis only sees the `use:autofocus` JSX namespaced attribute — which it doesn't count as a variable reference. With `noUnusedLocals: true` (or VS Code's "show unused" hints), the editor flags the import as unused even though it's the canonical consumer for the directive.
+
+## What this plugin does
+
+Filters out `TS6133` / `TS6192` / `TS6196` diagnostics whose unused name matches a binding consumed via a `use:NAME` JSX attribute somewhere in the same file. Other unused-binding warnings still fire — only the directive false-positive is suppressed.
+
+## Installation
+
+```sh
+pnpm add -D @madenowhere/phaze-tsplugin
+```
+
+Then add to your `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "plugins": [{ "name": "@madenowhere/phaze-tsplugin" }]
+  }
+}
+```
+
+VS Code picks it up automatically via its bundled TypeScript server. Restart the TS server (`Cmd+Shift+P → "TypeScript: Restart TS Server"`) after first install, then any time you change tsconfig plugins.
+
+## Limitations
+
+- **IDE only.** TypeScript language-service plugins run inside the language server (editor flow). They do **not** affect `tsc` CLI behavior. If your CI runs `tsc --noEmit` with `noUnusedLocals: true`, those checks will still flag directive imports. Workarounds: scope `noUnusedLocals` to source files only, or use eslint-based unused-imports checking with a Phaze-aware rule.
+- **Per-file scope.** The plugin scans only the source file the diagnostic is emitted in. If a directive import is in `a.ts` and the `use:NAME` reference is in `b.ts`, the import in `a.ts` would still appear unused — which is correct (re-exporting through an unused intermediate file isn't a Phaze idiom).
+- **Name-based matching.** The plugin matches on the local binding name as it appears in TS's diagnostic message. Aliasing imports (`import { autofocus as _af }`) means the JSX has to use `use:_af` to match — TS still tracks the local name, so this works as expected.

package/dist/index.cjs

@@ -0,0 +1,104 @@
+"use strict";
+// @madenowhere/phaze-tsplugin
+// ─────────────────────────────────────────────────────────────────────────────
+// TypeScript language-service plugin that teaches the IDE about Phaze
+// JSX `use:directive` attributes.
+//
+// Problem: phaze-compile rewrites `<el use:foo={value}>` to
+//   ((__el) => (foo(__el, () => value), __el))(<el />)
+// post-AST. The rewritten code references `foo` as a regular call, but
+// TypeScript's source-level analysis only sees the `use:foo` JSX
+// namespace attribute — which TS doesn't count as a variable
+// reference. Result: when a file imports a directive only to use it
+// via `use:`, TypeScript flags the import as TS6133 ("'foo' is
+// declared but its value is never read") and the editor shows it
+// fading / red.
+//
+// Fix: this plugin wraps the language service's `getSemanticDiagnostics`
+// and filters out TS6133 / TS6192 diagnostics whose unused name
+// matches a binding that the file consumes via a `use:NAME` JSX
+// attribute. Other unused-binding warnings still surface — only the
+// false-positive directive case is suppressed.
+//
+// Wiring:
+//   tsconfig.json:
+//     {
+//       "compilerOptions": {
+//         "plugins": [{ "name": "@madenowhere/phaze-tsplugin" }]
+//       }
+//     }
+//
+// VS Code picks up the plugin automatically via its bundled TypeScript
+// language server. No restart required for the plugin itself when
+// rebuilt — VS Code reloads when its TS server restarts.
+// TS error codes for "declared but never used":
+//   6133 — local declaration unused
+//   6192 — all imports unused
+//   6196 — declared but only used in type position (rarer)
+const UNUSED_DIAGNOSTIC_CODES = new Set([6133, 6192, 6196]);
+const init = (arg) => ({
+    create(info) {
+        const ts = arg.typescript;
+        const ls = info.languageService;
+        // Walk a SourceFile and collect every local name referenced via a
+        // `use:NAME` JSX namespaced attribute. The set is computed per
+        // semantic-diagnostics call — small files, fast walk, no caching
+        // concerns.
+        const collectUseDirectiveNames = (sf) => {
+            const names = new Set();
+            const visit = (node) => {
+                if (ts.isJsxAttribute(node) &&
+                    node.name &&
+                    ts.isJsxNamespacedName(node.name) &&
+                    node.name.namespace.text === 'use') {
+                    names.add(node.name.name.text);
+                }
+                ts.forEachChild(node, visit);
+            };
+            visit(sf);
+            return names;
+        };
+        const extractUnusedName = (d) => {
+            // The diagnostic's primary text contains the unused identifier's
+            // name in single quotes. Pull it out via regex — TS doesn't expose
+            // the binding directly on the Diagnostic object, but the message
+            // shape is stable across TS versions:
+            //   "'foo' is declared but its value is never read."
+            //   "'foo' is declared but never used."
+            const text = typeof d.messageText === 'string'
+                ? d.messageText
+                : d.messageText.messageText;
+            const m = text.match(/^'([^']+)' is declared/);
+            return m?.[1];
+        };
+        return new Proxy(ls, {
+            get(target, key) {
+                if (key !== 'getSemanticDiagnostics') {
+                    return Reflect.get(target, key);
+                }
+                return (fileName) => {
+                    const diags = target.getSemanticDiagnostics(fileName);
+                    if (diags.length === 0)
+                        return diags;
+                    if (!diags.some((d) => UNUSED_DIAGNOSTIC_CODES.has(d.code)))
+                        return diags;
+                    const sf = target.getProgram()?.getSourceFile(fileName);
+                    if (!sf)
+                        return diags;
+                    const useNames = collectUseDirectiveNames(sf);
+                    if (useNames.size === 0)
+                        return diags;
+                    return diags.filter((d) => {
+                        if (!UNUSED_DIAGNOSTIC_CODES.has(d.code))
+                            return true;
+                        const name = extractUnusedName(d);
+                        // Suppress only when the unused binding name matches a
+                        // directive consumed via use:NAME in this file.
+                        return !name || !useNames.has(name);
+                    });
+                };
+            },
+        });
+    },
+});
+module.exports = init;

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import type tsTypes from 'typescript/lib/tsserverlibrary';
+interface PluginCreateInfo {
+    languageService: tsTypes.LanguageService;
+    serverHost: tsTypes.server.ServerHost;
+    project: tsTypes.server.Project;
+    config: {
+        [key: string]: unknown;
+    };
+}
+interface PluginInitArg {
+    typescript: typeof tsTypes;
+}
+interface PluginModuleFactory {
+    (arg: PluginInitArg): {
+        create(info: PluginCreateInfo): tsTypes.LanguageService;
+    };
+}
+declare const init: PluginModuleFactory;
+export = init;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiCA,OAAO,KAAK,OAAO,MAAM,gCAAgC,CAAA;AAEzD,UAAU,gBAAgB;IACxB,eAAe,EAAE,OAAO,CAAC,eAAe,CAAA;IACxC,UAAU,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,CAAA;IACrC,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,CAAA;IAC/B,MAAM,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAA;CACnC;AAED,UAAU,aAAa;IACrB,UAAU,EAAE,OAAO,OAAO,CAAA;CAC3B;AAED,UAAU,mBAAmB;IAC3B,CAAC,GAAG,EAAE,aAAa,GAAG;QACpB,MAAM,CAAC,IAAI,EAAE,gBAAgB,GAAG,OAAO,CAAC,eAAe,CAAA;KACxD,CAAA;CACF;AAQD,QAAA,MAAM,IAAI,EAAE,mBAgEV,CAAA;AAEF,SAAS,IAAI,CAAA"}

package/dist/index.js

@@ -0,0 +1,104 @@
+"use strict";
+// @madenowhere/phaze-tsplugin
+// ─────────────────────────────────────────────────────────────────────────────
+// TypeScript language-service plugin that teaches the IDE about Phaze
+// JSX `use:directive` attributes.
+//
+// Problem: phaze-compile rewrites `<el use:foo={value}>` to
+//   ((__el) => (foo(__el, () => value), __el))(<el />)
+// post-AST. The rewritten code references `foo` as a regular call, but
+// TypeScript's source-level analysis only sees the `use:foo` JSX
+// namespace attribute — which TS doesn't count as a variable
+// reference. Result: when a file imports a directive only to use it
+// via `use:`, TypeScript flags the import as TS6133 ("'foo' is
+// declared but its value is never read") and the editor shows it
+// fading / red.
+//
+// Fix: this plugin wraps the language service's `getSemanticDiagnostics`
+// and filters out TS6133 / TS6192 diagnostics whose unused name
+// matches a binding that the file consumes via a `use:NAME` JSX
+// attribute. Other unused-binding warnings still surface — only the
+// false-positive directive case is suppressed.
+//
+// Wiring:
+//   tsconfig.json:
+//     {
+//       "compilerOptions": {
+//         "plugins": [{ "name": "@madenowhere/phaze-tsplugin" }]
+//       }
+//     }
+//
+// VS Code picks up the plugin automatically via its bundled TypeScript
+// language server. No restart required for the plugin itself when
+// rebuilt — VS Code reloads when its TS server restarts.
+// TS error codes for "declared but never used":
+//   6133 — local declaration unused
+//   6192 — all imports unused
+//   6196 — declared but only used in type position (rarer)
+const UNUSED_DIAGNOSTIC_CODES = new Set([6133, 6192, 6196]);
+const init = (arg) => ({
+    create(info) {
+        const ts = arg.typescript;
+        const ls = info.languageService;
+        // Walk a SourceFile and collect every local name referenced via a
+        // `use:NAME` JSX namespaced attribute. The set is computed per
+        // semantic-diagnostics call — small files, fast walk, no caching
+        // concerns.
+        const collectUseDirectiveNames = (sf) => {
+            const names = new Set();
+            const visit = (node) => {
+                if (ts.isJsxAttribute(node) &&
+                    node.name &&
+                    ts.isJsxNamespacedName(node.name) &&
+                    node.name.namespace.text === 'use') {
+                    names.add(node.name.name.text);
+                }
+                ts.forEachChild(node, visit);
+            };
+            visit(sf);
+            return names;
+        };
+        const extractUnusedName = (d) => {
+            // The diagnostic's primary text contains the unused identifier's
+            // name in single quotes. Pull it out via regex — TS doesn't expose
+            // the binding directly on the Diagnostic object, but the message
+            // shape is stable across TS versions:
+            //   "'foo' is declared but its value is never read."
+            //   "'foo' is declared but never used."
+            const text = typeof d.messageText === 'string'
+                ? d.messageText
+                : d.messageText.messageText;
+            const m = text.match(/^'([^']+)' is declared/);
+            return m?.[1];
+        };
+        return new Proxy(ls, {
+            get(target, key) {
+                if (key !== 'getSemanticDiagnostics') {
+                    return Reflect.get(target, key);
+                }
+                return (fileName) => {
+                    const diags = target.getSemanticDiagnostics(fileName);
+                    if (diags.length === 0)
+                        return diags;
+                    if (!diags.some((d) => UNUSED_DIAGNOSTIC_CODES.has(d.code)))
+                        return diags;
+                    const sf = target.getProgram()?.getSourceFile(fileName);
+                    if (!sf)
+                        return diags;
+                    const useNames = collectUseDirectiveNames(sf);
+                    if (useNames.size === 0)
+                        return diags;
+                    return diags.filter((d) => {
+                        if (!UNUSED_DIAGNOSTIC_CODES.has(d.code))
+                            return true;
+                        const name = extractUnusedName(d);
+                        // Suppress only when the unused binding name matches a
+                        // directive consumed via use:NAME in this file.
+                        return !name || !useNames.has(name);
+                    });
+                };
+            },
+        });
+    },
+});
+module.exports = init;

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@madenowhere/phaze-tsplugin",
+  "version": "0.0.1",
+  "description": "TypeScript language-service plugin that teaches the IDE about Phaze JSX `use:` directives — suppresses TS6133 'unused binding' diagnostics when the binding is consumed by a `use:X` JSX attribute.",
+  "license": "MIT",
+  "author": "madenowhere",
+  "homepage": "https://phaze.build",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/madenowhere/phaze.git",
+    "directory": "packages/phaze-tsplugin"
+  },
+  "bugs": "https://github.com/madenowhere/phaze/issues",
+  "main": "dist/index.cjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json && node -e \"const fs=require('fs');const c=fs.readFileSync('dist/index.js','utf8').replace(/export\\s*=\\s*(\\w+);?/,'module.exports=$1;');fs.writeFileSync('dist/index.cjs',c);\"",
+    "dev":   "tsc -p tsconfig.json --watch"
+  },
+  "peerDependencies": {
+    "typescript": ">=5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "typescript": { "optional": false }
+  },
+  "devDependencies": {
+    "typescript": "^6.0.0"
+  },
+  "keywords": [
+    "phaze",
+    "typescript",
+    "language-service",
+    "plugin",
+    "jsx",
+    "directives"
+  ]
+}