@flint.fyi/vue 0.0.1 → 0.1.1

package/LICENSE.md

@@ -0,0 +1,20 @@
+# MIT License
+
+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

@@ -1,45 +1,9 @@
-# @flint.fyi/vue
+<h1 align="center"><code>@flint.fyi/vue</code></h1>
 
-## ⚠️ IMPORTANT NOTICE ⚠️
+<p align="center">
+	[Experimental] Vue.js language plugin for Flint.
+	❤️‍🔥
+</p>
 
-**This package is created solely for the purpose of setting up OIDC (OpenID Connect) trusted publishing with npm.**
-
-This is **NOT** a functional package and contains **NO** code or functionality beyond the OIDC setup configuration.
-
-## Purpose
-
-This package exists to:
-1. Configure OIDC trusted publishing for the package name `@flint.fyi/vue`
-2. Enable secure, token-less publishing from CI/CD workflows
-3. Establish provenance for packages published under this name
-
-## What is OIDC Trusted Publishing?
-
-OIDC trusted publishing allows package maintainers to publish packages directly from their CI/CD workflows without needing to manage npm access tokens. Instead, it uses OpenID Connect to establish trust between the CI/CD provider (like GitHub Actions) and npm.
-
-## Setup Instructions
-
-To properly configure OIDC trusted publishing for this package:
-
-1. Go to [npmjs.com](https://www.npmjs.com/) and navigate to your package settings
-2. Configure the trusted publisher (e.g., GitHub Actions)
-3. Specify the repository and workflow that should be allowed to publish
-4. Use the configured workflow to publish your actual package
-
-## DO NOT USE THIS PACKAGE
-
-This package is a placeholder for OIDC configuration only. It:
-- Contains no executable code
-- Provides no functionality
-- Should not be installed as a dependency
-- Exists only for administrative purposes
-
-## More Information
-
-For more details about npm's trusted publishing feature, see:
-- [npm Trusted Publishing Documentation](https://docs.npmjs.com/generating-provenance-statements)
-- [GitHub Actions OIDC Documentation](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)
-
----
-
-**Maintained for OIDC setup purposes only**
+This is an internal package for Flint.
+Documentation will eventually be added.

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+import { vue } from "./plugin.js";
+export { vue };

package/lib/index.js

@@ -0,0 +1,2 @@
+import { vue } from "./plugin.js";
+export { vue };

package/lib/plugin.d.ts

@@ -0,0 +1,14 @@
+import * as _flint_fyi_core0 from "@flint.fyi/core";
+
+//#region src/plugin.d.ts
+declare const vue: _flint_fyi_core0.Plugin<_flint_fyi_core0.RuleAbout<string>, "all", [_flint_fyi_core0.Rule<{
+  readonly description: "Reports v-for directives without a valid key binding.";
+  readonly id: "vForKeys";
+  readonly presets: readonly ["logical"];
+} & {
+  readonly pluginId: string;
+  readonly url: string;
+}, "invalidKey" | "missingKey" | "staticKey", undefined>]>;
+//#endregion
+export { vue };
+//# sourceMappingURL=plugin.d.ts.map

package/lib/plugin.js

@@ -0,0 +1,13 @@
+import vForKeys_default from "./rules/vForKeys.js";
+import { createPlugin } from "@flint.fyi/core";
+import { ts } from "@flint.fyi/ts";
+//#region src/plugin.ts
+const vue = createPlugin({
+	files: { all: [ts.files.all, "**/*.vue"] },
+	name: "Vue.js",
+	rules: [vForKeys_default]
+});
+//#endregion
+export { vue };
+
+//# sourceMappingURL=plugin.js.map

package/lib/rules/ruleCreator.d.ts

@@ -0,0 +1,3 @@
+import { RuleCreator } from "@flint.fyi/core";
+export declare const ruleCreator: RuleCreator<"logical" | "logicalStrict" | "stylistic" | "stylisticStrict", import("@flint.fyi/core").RuleAbout<"logical" | "logicalStrict" | "stylistic" | "stylisticStrict">>;
+//# sourceMappingURL=ruleCreator.d.ts.map

package/lib/rules/ruleCreator.js

@@ -0,0 +1,16 @@
+import { RuleCreator } from "@flint.fyi/core";
+//#region src/rules/ruleCreator.ts
+const ruleCreator = new RuleCreator({
+	docs: (ruleId) => `https://flint.fyi/rules/vue/${ruleId.toLowerCase()}`,
+	pluginId: "vue",
+	presets: [
+		"logical",
+		"logicalStrict",
+		"stylistic",
+		"stylisticStrict"
+	]
+});
+//#endregion
+export { ruleCreator };
+
+//# sourceMappingURL=ruleCreator.js.map

package/lib/rules/vForKeys.d.ts

@@ -0,0 +1,10 @@
+declare const _default: import("@flint.fyi/core").Rule<{
+    readonly description: "Reports v-for directives without a valid key binding.";
+    readonly id: "vForKeys";
+    readonly presets: readonly ["logical"];
+} & {
+    readonly pluginId: string;
+    readonly url: string;
+}, "invalidKey" | "missingKey" | "staticKey", undefined>;
+export default _default;
+//# sourceMappingURL=vForKeys.d.ts.map

package/lib/rules/vForKeys.js

@@ -0,0 +1,139 @@
+import { ruleCreator } from "./ruleCreator.js";
+import { nullThrows } from "@flint.fyi/utils";
+import { reportSourceCode } from "@flint.fyi/volar-language";
+import { vueLanguage } from "@flint.fyi/vue-language";
+import * as vue from "@vue/compiler-dom";
+import ts from "typescript";
+//#region src/rules/vForKeys.ts
+var vForKeys_default = ruleCreator.createRule(vueLanguage, {
+	about: {
+		description: "Reports v-for directives without a valid key binding.",
+		id: "vForKeys",
+		presets: ["logical"]
+	},
+	messages: {
+		invalidKey: {
+			primary: "The :key on this v-for element does not reference the iteration variable.",
+			secondary: ["Keys must uniquely identify each item in the v-for loop to maintain object constancy.", "Using values unrelated to the loop can still lead to rendering issues during reordering."],
+			suggestions: ["Bind the :key to something derived from the v-for item, like item.id or the index if no unique identifier exists."]
+		},
+		missingKey: {
+			primary: "Elements using v-for must include a unique :key to ensure correct reactivity and DOM stability.",
+			secondary: ["A missing :key can cause unpredictable updates during rendering optimizations.", "Without a key, Vue may reuse or reorder elements incorrectly, which breaks expected behavior in transitions and stateful components."],
+			suggestions: ["Always provide a unique :key based on the v-for item, such as an id."]
+		},
+		staticKey: {
+			primary: "Static key values prevent Vue from tracking changes in v-for lists.",
+			secondary: ["Using key=\"literal\" means every item in the v-for shares the same key, which prevents Vue from tracking list updates correctly.", "This blocks proper reactivity, leading to stale DOM content and skipped updates."],
+			suggestions: ["Replace the static key with a dynamic and unique :key derived from the v-for item, such as item.id."]
+		}
+	},
+	setup(context) {
+		return { visitors: { SourceFile(node, services) {
+			if (services.vue == null) return;
+			const { map, sfc } = services.vue;
+			const toGeneratedLocation = (sourceLocation) => {
+				for (const [loc] of map.toGeneratedLocation(sourceLocation)) return loc;
+			};
+			const toGeneratedLocationOrThrow = (sourceLocation) => {
+				return nullThrows(toGeneratedLocation(sourceLocation), "Unable to map source location to generated location");
+			};
+			const templateBlock = sfc.children.find((c) => c.type === vue.NodeTypes.ELEMENT && c.tag === "template");
+			if (templateBlock == null) return {};
+			const propValueRange = (propValue) => {
+				const strip = propValue.loc.source === propValue.content ? 0 : 1;
+				return {
+					begin: propValue.loc.start.offset + strip,
+					end: propValue.loc.end.offset - strip
+				};
+			};
+			const checkFor = (forDirective, forParseResult, keyProp) => {
+				if (keyProp == null) {
+					reportSourceCode(context, {
+						message: "missingKey",
+						range: {
+							begin: forDirective.loc.start.offset,
+							end: forDirective.loc.start.offset + 5
+						}
+					});
+					return;
+				}
+				if (keyProp.type === vue.NodeTypes.ATTRIBUTE) {
+					if (keyProp.value == null) return;
+					reportSourceCode(context, {
+						message: "staticKey",
+						range: propValueRange(keyProp.value)
+					});
+					return;
+				}
+				let reportRange;
+				let valueRange;
+				if (keyProp.exp == null) {
+					reportRange = {
+						begin: keyProp.loc.start.offset,
+						end: keyProp.loc.end.offset
+					};
+					const valueMapping = nullThrows(Array.from(map.toGeneratedLocation(nullThrows(keyProp.arg, "Expected keyProp.arg to be non-null").loc.start.offset)).filter(([, m]) => nullThrows(m.lengths[0], "Expected mapping to have at least one range") > 0)[1], "Expected :key two have two mappings")[1];
+					const generatedBegin = nullThrows(valueMapping.generatedOffsets[0], "Expected mapping to have at least one range");
+					valueRange = {
+						begin: generatedBegin,
+						end: generatedBegin + nullThrows(valueMapping.lengths[0], "Expected mapping to have at least one range")
+					};
+				} else {
+					reportRange = {
+						begin: keyProp.exp.loc.start.offset,
+						end: keyProp.exp.loc.end.offset
+					};
+					valueRange = {
+						begin: toGeneratedLocationOrThrow(keyProp.exp.loc.start.offset),
+						end: toGeneratedLocationOrThrow(keyProp.exp.loc.end.offset)
+					};
+				}
+				const loopVariableRanges = [
+					forParseResult.value,
+					forParseResult.key,
+					forParseResult.index
+				].filter((v) => v != null).map((v) => ({
+					begin: toGeneratedLocationOrThrow(v.loc.start.offset),
+					end: toGeneratedLocationOrThrow(v.loc.end.offset)
+				}));
+				const find = (current) => {
+					const currentBegin = current.getStart(node);
+					const currentEnd = current.getEnd();
+					if (currentBegin > valueRange.end || currentEnd <= valueRange.begin) return false;
+					if (currentBegin >= valueRange.begin && currentEnd <= valueRange.end && ts.isIdentifier(current)) {
+						const symbol = services.typeChecker.getSymbolAtLocation(current);
+						if (symbol?.valueDeclaration == null) return false;
+						const declStart = symbol.valueDeclaration.getStart(node);
+						const declEnd = symbol.valueDeclaration.getEnd();
+						return loopVariableRanges.some(({ begin, end }) => declStart >= begin && declEnd <= end);
+					}
+					return current.getChildren(node).some(find);
+				};
+				if (!find(node)) reportSourceCode(context, {
+					message: "invalidKey",
+					range: reportRange
+				});
+			};
+			function visitTag(node) {
+				if (node.type === vue.NodeTypes.ELEMENT) {
+					let forDirective = null;
+					let forParseResult = null;
+					let keyProp = null;
+					for (const prop of node.props) if (prop.type === vue.NodeTypes.DIRECTIVE && prop.name === "for" && prop.forParseResult != null) {
+						forDirective = prop;
+						forParseResult = prop.forParseResult;
+					} else if (prop.type === vue.NodeTypes.DIRECTIVE && prop.name === "bind" && vue.isStaticArgOf(prop.arg, "key")) keyProp = prop;
+					else if (prop.type === vue.NodeTypes.ATTRIBUTE && prop.name === "key") keyProp = prop;
+					if (forDirective != null && forParseResult != null) checkFor(forDirective, forParseResult, keyProp);
+					for (const child of node.children) visitTag(child);
+				}
+			}
+			for (const child of templateBlock.children) visitTag(child);
+		} } };
+	}
+});
+//#endregion
+export { vForKeys_default as default };
+
+//# sourceMappingURL=vForKeys.js.map

package/package.json

@@ -1,10 +1,50 @@
 {
   "name": "@flint.fyi/vue",
-  "version": "0.0.1",
-  "description": "OIDC trusted publishing setup package for @flint.fyi/vue",
-  "keywords": [
-    "oidc",
-    "trusted-publishing",
-    "setup"
-  ]
-}
+  "version": "0.1.1",
+  "description": "[Experimental] Vue.js language plugin for Flint.",
+  "homepage": "https://flint.fyi/rules/vue",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/flint-fyi/flint.git",
+    "directory": "packages/vue"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "JoshuaKGoldberg",
+    "email": "npm@joshuakgoldberg.com"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": "./lib/index.js"
+  },
+  "files": [
+    "lib/",
+    "!lib/**/*.map"
+  ],
+  "dependencies": {
+    "@vue/compiler-dom": "^3.5.0",
+    "typescript": "^5.9.0 || ^6.0.0",
+    "@flint.fyi/core": "^0.21.2",
+    "@flint.fyi/ts": "^0.19.0",
+    "@flint.fyi/utils": "^0.14.1",
+    "@flint.fyi/volar-language": "^0.1.0",
+    "@flint.fyi/vue-language": "^0.1.0"
+  },
+  "devDependencies": {
+    "tsdown": "0.21.0",
+    "vitest": "4.1.0",
+    "vue": "3.5.30",
+    "@flint.fyi/rule-tester": "^0.16.2",
+    "@flint.fyi/typescript-language": "^0.18.1"
+  },
+  "engines": {
+    "node": ">=24.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "vitest --project vue"
+  }
+}