Blocked: Migrate lit-analyzer packages to ESM

dev/package.json

@@ -2,6 +2,7 @@
 	"name": "dev",
 	"version": "1.0.0",
 	"description": "",
+	"type": "module",
 	"dependencies": {
 		"lit-element": "^2.3.1",
 		"lit-html": "^1.2.1",

eslint.config.mjs → eslint.config.js

@@ -37,7 +37,9 @@ export default tseslint.config(
 			},
 			parserOptions: {
 				projectService: true,
-				tsconfigRootDir: import.meta.dirname
+				tsconfigRootDir: import.meta.dirname,
+				sourceType: "module",
+				ecmaVersion: "latest"
 			}
 		},
 		rules: {

package.json

@@ -5,6 +5,7 @@
 	"private": true,
 	"author": "JackRobards",
 	"license": "MIT",
+	"type": "module",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/JackRobards/lit-analyzer.git"

packages/lit-analyzer/src/lib/analyze/data/get-built-in-html-collection.ts

@@ -1,6 +1,6 @@
 import type { SimpleType } from "ts-simple-type";
 import type { HTMLDataV1 } from "vscode-html-languageservice";
-import htmlDataJson from "@vscode/web-custom-data/data/browsers.html-data.json";
+import htmlDataJson from "@vscode/web-custom-data/data/browsers.html-data.json" with { type: "json" };
 import type { HtmlAttr, HtmlDataCollection } from "../parse/parse-html-data/html-tag.js";
 import { parseVscodeHtmlData } from "../parse/parse-html-data/parse-vscode-html-data.js";
 import { lazy } from "../util/general-util.js";

packages/lit-analyzer/src/lib/analyze/parse/document/text-document/html-document/parse-html-p5/parse-html.ts

@@ -1,6 +1,5 @@
 import type { IP5CommentNode, IP5DocumentFragmentNode, IP5NodeBase, IP5TagNode, IP5TextNode, P5Node } from "./parse-html-types.js";
-
-const { parseFragment } = require("parse5");
+import { parseFragment } from "parse5";
 
 /**
  * Returns if a p5Node is a tag node.
@@ -39,5 +38,5 @@ export function isCommentNode(node: P5Node): node is IP5CommentNode {
  * @param html
  */
 export function parseHtml(html: string): IP5DocumentFragmentNode {
-	return parseFragment(html, { sourceCodeLocationInfo: true, locationInfo: true });
+	return parseFragment(html, { sourceCodeLocationInfo: true }) as IP5DocumentFragmentNode;
 }

packages/lit-analyzer/src/lib/analyze/util/find-best-match.ts

@@ -1,4 +1,3 @@
-// @ts-expect-error - need to upgrade to type module in package.json
 import didYouMean, * as dym from "didyoumean2";
 import type { Omit } from "./general-util.js";
 

packages/lit-analyzer/src/scripts/check-version.ts

@@ -1,7 +1,8 @@
 import * as fs from "fs";
 import * as path from "path";
+// @ts-expect-error - This script file is run in a different "scope" - where the package.json file is at a different relative location
+import pkg from "../package.json" with { type: "json" };
 
-const pkg = require("../package.json");
 const { version } = pkg;
 
 const constantsPath = path.resolve("src/lib/analyze/constants.ts");

packages/lit-analyzer/src/test/helpers/ts-test.ts

@@ -2,6 +2,8 @@ import type { ImplementationFn } from "ava";
 import test from "ava";
 import { dirname } from "path";
 import type * as tsModule from "typescript";
+import { createRequire } from "module";
+const require = createRequire(import.meta.url);
 import { setTypescriptModule } from "../../lib/analyze/ts-module.js";
 
 // Based on the `ava` types for test.only and test.skip. This matches the format of the tests in this repo

packages/lit-analyzer/tsconfig.json

@@ -1,6 +1,6 @@
 {
 	"extends": "../../tsconfig.json",
-	"include": ["./src"],
+	"include": ["./src", "./package.json"],
 	"exclude": [],
 	"compilerOptions": {
 		"rootDir": "./src",

packages/ts-lit-plugin/package.json

@@ -4,6 +4,7 @@
 	"description": "Typescript plugin that adds type checking and code completion to lit-html. Fork of the original ts-lit-plugin.",
 	"author": "JackRobards",
 	"license": "MIT",
+	"type": "module",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/JackRobards/lit-analyzer.git"
@@ -49,7 +50,7 @@
 			]
 		}
 	},
-	"main": "index.js",
+	"exports": "./index.js",
 	"files": [
 		"/lib/",
 		"/html-documentation/"

packages/ts-lit-plugin/src/index.ts

@@ -11,6 +11,7 @@ import { LitPluginContext } from "./ts-lit-plugin/lit-plugin-context.js";
 import { TsLitPlugin } from "./ts-lit-plugin/ts-lit-plugin.js";
 import { setTypescriptModule } from "./ts-module.js";
 
+const __dirname = import.meta.dirname;
 const tsHtmlPluginSymbol = Symbol.for("__tsHtmlPlugin__");
 
 let context: LitPluginContext | undefined = undefined;

packages/vscode-lit-plugin/esbuild.script.mjs

@@ -21,7 +21,7 @@ await esbuild.build({
 	external: ["typescript"],
 	minify: true,
 	target: "es2023",
-	format: "cjs",
+	format: "esm",
 	color: true,
 	mainFields: ["module", "main"]
 });

packages/vscode-lit-plugin/src/extension.ts

@@ -1,5 +1,5 @@
-import type { LitAnalyzerConfig } from "@jackolope/lit-analyzer";
-import { ALL_RULE_IDS } from "@jackolope/lit-analyzer";
+import type { LitAnalyzerConfig } from "@jackolope/lit-analyzer" with { "resolution-mode": "import" };
+const litAnalyzer = import("@jackolope/lit-analyzer");
 import { join } from "path";
 import { ColorProvider } from "./color-provider.js";
 import * as vscode from "vscode";
@@ -32,9 +32,9 @@ export async function activate(context: vscode.ExtensionContext): Promise<void>
 
 	// Subscribe to configuration change
 	vscode.workspace.onDidChangeConfiguration(
-		e => {
+		async e => {
 			if (e.affectsConfiguration(configurationSection) || e.affectsConfiguration(configurationExperimentalHtmlSection)) {
-				synchronizeConfig(api);
+				await synchronizeConfig(api);
 			}
 		},
 		undefined,
@@ -54,14 +54,14 @@ export async function activate(context: vscode.ExtensionContext): Promise<void>
 	);
 	context.subscriptions.push(registration);
 
-	synchronizeConfig(api);
+	await synchronizeConfig(api);
 }
 
-function synchronizeConfig(api: { configurePlugin: (pluginId: typeof tsLitPluginId, config: Partial<LitAnalyzerConfig>) => void }) {
-	api.configurePlugin(tsLitPluginId, getConfig());
+async function synchronizeConfig(api: { configurePlugin: (pluginId: typeof tsLitPluginId, config: Partial<LitAnalyzerConfig>) => void }) {
+	api.configurePlugin(tsLitPluginId, await getConfig());
 }
 
-function getConfig(): Partial<LitAnalyzerConfig> {
+async function getConfig(): Promise<Partial<LitAnalyzerConfig>> {
 	const config = vscode.workspace.getConfiguration(configurationSection);
 	const outConfig: Partial<LitAnalyzerConfig> = {};
 
@@ -151,6 +151,8 @@ function getConfig(): Partial<LitAnalyzerConfig> {
 	// Apply rules
 	const rules = outConfig.rules || {};
 
+	const ALL_RULE_IDS = (await litAnalyzer).ALL_RULE_IDS;
+
 	ALL_RULE_IDS.forEach(ruleName => {
 		withConfigValue(config, `rules.${ruleName}`, value => {
 			rules[ruleName] = value;

prettier.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
 	useTabs: true,
 	tabWidth: 2,
 	singleQuote: false,

tsconfig.json

@@ -38,7 +38,10 @@
 		"noImplicitReturns": true,
 		"outDir": "./lib",
 
-		"lib": ["es2023"]
+		"lib": ["es2023"],
+
+		"types": ["node"]
 	},
+
 	"exclude": ["node_modules"]
 }