refactor(types): use dts-buddy to generate types with map (#751)

* refactor(types): use dts-buddy to generate types with map, cleanup type definitions and tsconfig * chore: update generated types * fix: use .d.ts for type imports * fix: ignore .changesets/pre.json to prevent format check fails on main after release merge * fix: move types inside import condition to avoid masquerading as cjs warning * fix: types * bump dts-buddy * fix: regenerate types * fix: use correct type Options for plugin function arg * fix(types): reexport index.js from public.d.ts to ensure types and functions are properly exported through module declaration generated by dts-buddy; move dynamicCompileOptions to PluginOptions, rename SvelteOptions to SvelteConfig * fix: update lockfile * Update .changeset/metal-olives-wait.md Co-authored-by: Bjorn Lu <[email protected]> * fix: update types --------- Co-authored-by: Rich Harris <[email protected]> Co-authored-by: Bjorn Lu <[email protected]>
sveltejs · Oct 26, 2023 · 62afd80 · 62afd80
1 parent efd571f
commit 62afd80
Show file tree

Hide file tree

Showing 33 changed files with 475 additions and 151 deletions.
diff --git a/.changeset/gorgeous-hats-bathe.md b/.changeset/gorgeous-hats-bathe.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+fix(types): use correct type Options for svelte function arg
diff --git a/.changeset/many-cows-rescue.md b/.changeset/many-cows-rescue.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': major
+---
+
+breaking: remove package.json export
diff --git a/.changeset/metal-olives-wait.md b/.changeset/metal-olives-wait.md
@@ -0,0 +1,6 @@
+---
+'@sveltejs/vite-plugin-svelte-inspector': major
+'@sveltejs/vite-plugin-svelte': major
+---
+
+breaking(types): emit types with dts-buddy to include type map
diff --git a/.changeset/small-pears-accept.md b/.changeset/small-pears-accept.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': major
+---
+
+breaking(types): rename SvelteOptions to SvelteConfig
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -66,6 +66,9 @@ jobs:
       - name: publint
         if: (${{ success() }} || ${{ failure() }})
         run: pnpm check:publint
+      - name: generated types are up to date
+        if: (${{ success() }} || ${{ failure() }})
+        run: pnpm generate:types && [ "`git status --porcelain=v1`" == "" ]
 
   test:
     timeout-minutes: 10

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -43,7 +43,10 @@ jobs:
           cache-dependency-path: '**/pnpm-lock.yaml'
       - name: install
         run: pnpm install --frozen-lockfile --prefer-offline --ignore-scripts
-
+      - name: generated types are up to date
+        run: pnpm generate:types && [ "`git status --porcelain=v1`" == "" ]
+      - name: publint
+        run: pnpm check:publint
       - name: Creating .npmrc
         run: |
           cat << EOF > "$HOME/.npmrc"

diff --git a/.prettierrc.js b/.prettierrc.js
@@ -16,9 +16,13 @@ export default {
 		},
 		{
 			files: [
-				'**/vite.config.js.timestamp-*.mjs',
 				'**/CHANGELOG.md',
 				'.github/renovate.json5',
+				'**/types/index.d.ts',
+				'**/types/index.d.ts.map',
+				'**/pnpm-lock.yaml',
+				'.changeset/pre.json',
+				'**/vite.config.js.timestamp-*.mjs',
 				'packages/e2e-tests/dynamic-compile-options/src/components/A.svelte'
 			],
 			options: {

diff --git a/package.json b/package.json
@@ -18,7 +18,8 @@
     "fixup": "run-s lint format",
     "release": "pnpm changeset publish",
     "prepare": "husky install",
-    "playwright": "playwright-core"
+    "playwright": "playwright-core",
+    "generate:types": "pnpm --filter \"./packages/*\" --parallel generate:types"
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.2",
@@ -28,6 +29,7 @@
     "@typescript-eslint/eslint-plugin": "^6.8.0",
     "@typescript-eslint/parser": "^6.8.0",
     "cross-env": "^7.0.3",
+    "dts-buddy": "^0.3.0",
     "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-html": "^7.1.0",

diff --git a/packages/vite-plugin-svelte-inspector/package.json b/packages/vite-plugin-svelte-inspector/package.json
@@ -4,19 +4,23 @@
   "license": "MIT",
   "author": "dominikg",
   "files": [
-    "src"
+    "src",
+    "types"
   ],
   "type": "module",
-  "types": "src/index.d.ts",
+  "types": "types/index.d.ts",
   "exports": {
     ".": {
-      "types": "./src/index.d.ts",
-      "import": "./src/index.js"
+      "import": {
+        "types": "./types/index.d.ts",
+        "default": "./src/index.js"
+      }
     }
   },
   "scripts": {
     "check:publint": "publint --strict",
-    "check:types": "tsc --noEmit"
+    "check:types": "tsc --noEmit",
+    "generate:types": "dts-buddy -m \"@sveltejs/vite-plugin-svelte-inspector:src/public.d.ts\""
   },
   "engines": {
     "node": "^18.0.0 || >=20"

diff --git a/packages/vite-plugin-svelte-inspector/src/index.js b/packages/vite-plugin-svelte-inspector/src/index.js
@@ -14,14 +14,17 @@ function getInspectorPath() {
 	);
 }
 
-/** @type {import('.').svelteInspector} */
+/**
+ * @param {Partial<import('./public.d.ts').Options>} [options]
+ * @returns {import('vite').Plugin}
+ */
 export function svelteInspector(options) {
 	const inspectorPath = getInspectorPath();
 	debug(`svelte inspector path: ${inspectorPath}`);
 
 	/** @type {import('vite').ResolvedConfig} */
 	let viteConfig;
-	/** @type {import('.').Options} */
+	/** @type {import('./public.d.ts').Options} */
 	let inspectorOptions;
 	let disabled = false;
 

diff --git a/packages/vite-plugin-svelte-inspector/src/options.js b/packages/vite-plugin-svelte-inspector/src/options.js
@@ -1,7 +1,7 @@
 import { loadEnv } from 'vite';
 import { debug } from './debug.js';
 
-/** @type {import('.').Options} */
+/** @type {import('./public.d.ts').Options} */
 export const defaultInspectorOptions = {
 	toggleKeyCombo: process.platform === 'darwin' ? 'meta-shift' : 'control-shift',
 	navKeys: { parent: 'ArrowUp', child: 'ArrowDown', next: 'ArrowRight', prev: 'ArrowLeft' },
@@ -14,7 +14,7 @@ export const defaultInspectorOptions = {
 
 /**
  * @param {import('vite').ResolvedConfig} config
- * @returns {Partial<import('.').Options> | boolean | void}
+ * @returns {Partial<import('./public.d.ts').Options> | boolean | void}
  */
 export function parseEnvironmentOptions(config) {
 	const env = loadEnv(config.mode, config.envDir ?? process.cwd(), 'SVELTE_INSPECTOR');

diff --git a/...te-plugin-svelte-inspector/src/index.d.ts → ...e-plugin-svelte-inspector/src/public.d.ts b/...te-plugin-svelte-inspector/src/index.d.ts → ...e-plugin-svelte-inspector/src/public.d.ts
@@ -1,5 +1,3 @@
-import type { Plugin } from 'vite';
-
 export interface Options {
 	/**
 	 * define a key combo to toggle inspector,
@@ -63,11 +61,12 @@ export interface Options {
 
 	/**
 	 * internal options that are automatically set, not to be set or used by users
+	 * @internal
 	 */
 	__internal?: {
 		// vite base url
 		base: string;
 	};
 }
 
-export declare function svelteInspector(options?: Options): Plugin;
+export * from './index.js';
diff --git a/packages/vite-plugin-svelte-inspector/tsconfig.json b/packages/vite-plugin-svelte-inspector/tsconfig.json
@@ -1,21 +1,17 @@
 {
 	"include": ["src"],
-	"exclude": ["**/*.spec.ts"],
 	"compilerOptions": {
 		"noEmit": true,
 		"target": "ES2020",
-		"module": "ES2020",
+		"module": "ES2022",
 		"moduleResolution": "node",
 		"strict": true,
-		"declaration": true,
-		"sourceMap": true,
 		"noUnusedLocals": true,
-		"esModuleInterop": true,
 		"baseUrl": ".",
-		"resolveJsonModule": true,
 		// see https://devblogs.microsoft.com/typescript/announcing-typescript-4-4-beta/#use-unknown-catch-variables
 		"useUnknownInCatchVariables": false,
 		"allowJs": true,
-		"checkJs": true
+		"checkJs": true,
+		"allowSyntheticDefaultImports": true
 	}
 }
diff --git a/packages/vite-plugin-svelte-inspector/types/index.d.ts b/packages/vite-plugin-svelte-inspector/types/index.d.ts
@@ -0,0 +1,74 @@
+declare module '@sveltejs/vite-plugin-svelte-inspector' {
+	export interface Options {
+		/**
+		 * define a key combo to toggle inspector,
+		 * @default 'meta-shift' on mac, 'control-shift' on other os
+		 *
+		 * any number of modifiers `control` `shift` `alt` `meta` followed by zero or one regular key, separated by -
+		 * examples: control-shift, control-o, control-alt-s  meta-x control-meta
+		 * Some keys have native behavior (e.g. alt-s opens history menu on firefox).
+		 * To avoid conflicts or accidentally typing into inputs, modifier only combinations are recommended.
+		 */
+		toggleKeyCombo?: string;
+
+		/**
+		 * define keys to select elements with via keyboard
+		 * @default {parent: 'ArrowUp', child: 'ArrowDown', next: 'ArrowRight', prev: 'ArrowLeft' }
+		 *
+		 * improves accessibility and also helps when you want to select elements that do not have a hoverable surface area
+		 * due to tight wrapping
+		 *
+		 * A note for users of screen-readers:
+		 * If you are using arrow keys to navigate the page itself, change the navKeys to avoid conflicts.
+		 * e.g. navKeys: {parent: 'w', prev: 'a', child: 's', next: 'd'}
+		 *
+		 *
+		 * parent: select closest parent
+		 * child: select first child (or grandchild)
+		 * next: next sibling (or parent if no next sibling exists)
+		 * prev: previous sibling (or parent if no prev sibling exists)
+		 */
+		navKeys?: { parent: string; child: string; next: string; prev: string };
+
+		/**
+		 * define key to open the editor for the currently selected dom node
+		 *
+		 * @default 'Enter'
+		 */
+		openKey?: string;
+
+		/**
+		 * inspector is automatically disabled when releasing toggleKeyCombo after holding it for a longpress
+		 * @default true
+		 */
+		holdMode?: boolean;
+
+		/**
+		 * when to show the toggle button
+		 * @default 'active'
+		 */
+		showToggleButton?: 'always' | 'active' | 'never';
+
+		/**
+		 * where to display the toggle button
+		 * @default top-right
+		 */
+		toggleButtonPos?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+
+		/**
+		 * inject custom styles when inspector is active
+		 */
+		customStyles?: boolean;
+
+		/**
+		 * internal options that are automatically set, not to be set or used by users
+		 * */
+		__internal?: {
+			// vite base url
+			base: string;
+		};
+	}
+	export function svelteInspector(options?: Partial<Options> | undefined): import('vite').Plugin;
+}
+
+//# sourceMappingURL=index.d.ts.map
diff --git a/packages/vite-plugin-svelte-inspector/types/index.d.ts.map b/packages/vite-plugin-svelte-inspector/types/index.d.ts.map
@@ -0,0 +1,17 @@
+{
+	"version": 3,
+	"file": "index.d.ts",
+	"names": [
+		"Options",
+		"svelteInspector"
+	],
+	"sources": [
+		"../src/public.d.ts",
+		"../src/index.js"
+	],
+	"sourcesContent": [
+		null,
+		null
+	],
+	"mappings": ";kBAAiBA,OAAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBCoBRC,eAAeA"
+}
diff --git a/packages/vite-plugin-svelte/package.json b/packages/vite-plugin-svelte/package.json
@@ -4,20 +4,23 @@
   "license": "MIT",
   "author": "dominikg",
   "files": [
-    "src"
+    "src",
+    "types"
   ],
   "type": "module",
-  "types": "src/index.d.ts",
+  "types": "types/index.d.ts",
   "exports": {
     ".": {
-      "types": "./src/index.d.ts",
-      "import": "./src/index.js"
-    },
-    "./package.json": "./package.json"
+      "import": {
+        "types": "./types/index.d.ts",
+        "default": "./src/index.js"
+      }
+    }
   },
   "scripts": {
     "check:publint": "publint --strict",
-    "check:types": "tsc --noEmit"
+    "check:types": "tsc --noEmit",
+    "generate:types": "dts-buddy -m \"@sveltejs/vite-plugin-svelte:src/public.d.ts\""
   },
   "engines": {
     "node": "^18.0.0 || >=20"

diff --git a/packages/vite-plugin-svelte/src/index.js b/packages/vite-plugin-svelte/src/index.js
@@ -20,7 +20,10 @@ import { saveSvelteMetadata } from './utils/optimizer.js';
 import { VitePluginSvelteCache } from './utils/vite-plugin-svelte-cache.js';
 import { loadRaw } from './utils/load-raw.js';
 
-/** @type {import('./index.d.ts').svelte} */
+/**
+ * @param {Partial<import('./public.d.ts').Options>} [inlineOptions]
+ * @returns {import('vite').Plugin[]}
+ */
 export function svelte(inlineOptions) {
 	if (process.env.DEBUG != null) {
 		log.setLevel('debug');

diff --git a/packages/vite-plugin-svelte/src/preprocess.js b/packages/vite-plugin-svelte/src/preprocess.js
@@ -9,9 +9,12 @@ const supportedScriptLangs = ['ts'];
 
 export const lang_sep = '.vite-preprocess';
 
-/** @type {import('./index.d.ts').vitePreprocess} */
+/**
+ * @param {import('./public.d.ts').VitePreprocessOptions} opts
+ * @returns {import('svelte/compiler').PreprocessorGroup}
+ */
 export function vitePreprocess(opts) {
-	/** @type {import('svelte/types/compiler/preprocess').PreprocessorGroup} */
+	/** @type {import('svelte/compiler').PreprocessorGroup} */
 	const preprocessor = { name: 'vite-preprocess' };
 	if (opts?.script !== false) {
 		preprocessor.script = viteScript().script;
@@ -24,7 +27,7 @@ export function vitePreprocess(opts) {
 }
 
 /**
- * @returns {{ script: import('svelte/types/compiler/preprocess').Preprocessor }}
+ * @returns {{ script: import('svelte/compiler').Preprocessor }}
  */
 function viteScript() {
 	return {
@@ -55,12 +58,12 @@ function viteScript() {
 
 /**
  * @param {import('vite').ResolvedConfig | import('vite').InlineConfig} config
- * @returns {{ style: import('svelte/types/compiler/preprocess').Preprocessor }}
+ * @returns {{ style: import('svelte/compiler').Preprocessor }}
  */
 function viteStyle(config = {}) {
 	/** @type {CssTransform} */
 	let transform;
-	/** @type {import('svelte/types/compiler/preprocess').Preprocessor} */
+	/** @type {import('svelte/compiler').Preprocessor} */
 	const style = async ({ attributes, content, filename = '' }) => {
 		const ext = attributes.lang ? `.${attributes.lang}` : '.css';
 		if (attributes.lang && !isCSSRequest(ext)) return;