Migrate from JavaScript to TypeScript

[Copilot]

Converts all source files from JavaScript to TypeScript, providing static type checking, better developer tooling, and catching type errors at compile time rather than runtime.

New files

• tsconfig.json — uses moduleResolution: "node10" (required for Vue 2.7 wildcard declare module '*.vue' to resolve relative imports)
• src/types.ts — shared interfaces: EmbettyVueOptions, VideoData, VideoImpl
• src/env.d.ts — module augmentation (must have export {}) to extend Vue's ComponentCustomProperties with _embettyVueOptions
• src/shims-vue.d.ts — ambient declarations for *.vue imports and babel-preset-minify (must be a non-module file for wildcard matching to work on relative imports), using import('@babel/core').ConfigAPI/TransformOptions for proper Babel types

Migrated source files

• src/plugin.js → .ts using PluginObject<EmbettyVueOptions>
• src/browser-wrapper.js → .ts using VueConstructor from Vue's type exports
• src/main.js → .ts
• vite.config.js → .ts
• src/components/video-impl/*.js → .ts, each now implements the VideoImpl interface

Vue SFCs

All components updated to <script lang="ts"> with defineComponent. EmbettyTweet introduces a typed TweetData interface. All original JSDoc comments are preserved with @param, @returns, @override, and @throws tags — only the inline JSDoc type annotations are removed (as they are now managed by TypeScript).

Generated TypeScript declarations

• vite-plugin-dts is used to generate .d.ts declaration files during build:lib
• Generated files are placed in dist/ (alongside the compiled JS) and published via "files": ["dist"]
• package.json now exposes a "types" top-level field and a "types" condition (ordered before "import"/"require") in the "exports" entry:

"types": "./dist/embetty-vue.d.ts",
"exports": {
  ".": {
    "types": "./dist/embetty-vue.d.ts",
    "import": "./dist/embetty-vue.mjs",
    "require": "./dist/embetty-vue.cjs"
  }
}

Tooling

• eslint.config.js — adds typescript-eslint, eslint-plugin-package-json, replaces no-unused-vars with @typescript-eslint/no-unused-vars, configures vue-eslint-parser with the TypeScript inner parser for .vue files
• package.json — adds type-check script (tsc --noEmit), exports, files, sideEffects fields
• New dev deps: typescript, typescript-eslint, @types/node, @types/babel__preset-env, @types/babel__core, vite-plugin-dts, eslint-plugin-package-json

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Migrate from JavaScript to TypeScript</issue_title>
<issue_description>Should be done only after #333 is resolved.

TypeScript provides better developer tooling and prevents runtime errors.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Migrate from JavaScript to TypeScript #347

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[FloEdelmann]

@copilot resolve conflicts with master and add generated types to package.json exports

[Copilot]

@copilot resolve conflicts with master and add generated types to package.json exports

Done in 6fc92d0. Here's what was done:

Conflicts resolved with main:

• Merged exports, files, sideEffects fields from main into package.json
• Added eslint-plugin-package-json to both package.json and eslint.config.js
• Updated setup-node action to v6.3.0 in .github/workflows/release.yaml
• Kept TypeScript-specific additions (type-check script, typescript, typescript-eslint, @types/* devDeps)

Generated types added to package.json exports:

• Installed vite-plugin-dts which generates .d.ts files during build:lib
• The lib build now produces dist/embetty-vue.d.ts (entry), dist/plugin.d.ts, dist/types.d.ts, and dist/components/*.vue.d.ts (all within the published dist/ folder)
• Added a top-level "types" field and a "types" condition (before "import"/"require") in the . export entry:

"types": "./dist/embetty-vue.d.ts",
"exports": {
  ".": {
    "types": "./dist/embetty-vue.d.ts",
    "import": "./dist/embetty-vue.mjs",
    "require": "./dist/embetty-vue.cjs"
  },
  ...
}