[pnpm] Migrate bskyembed (#10482)

bskyembed/README.md

@@ -4,13 +4,13 @@ Install dependencies:
 
 ```bash
 cd bskyembed
-yarn
+pnpm
 ```
 
 Run the dev server:
 
 ```bash
-yarn dev
+pnpm dev
 ```
 
 You can see the embed homepage at http://localhost:5173
@@ -20,7 +20,7 @@ You can see the embed homepage at http://localhost:5173
 In another terminal window, run the snippet dev script:
 
 ```bash
-yarn dev-snippet
+pnpm dev-snippet
 ```
 
 You can then see the testbed page at http://localhost:5173/test

bskyembed/eslint.config.mjs

@@ -1,10 +1,12 @@
 // @ts-check
 import js from '@eslint/js'
+import { defineConfig } from 'eslint/config';
 import tseslint from 'typescript-eslint'
 import simpleImportSort from 'eslint-plugin-simple-import-sort'
+import { importX } from 'eslint-plugin-import-x'
 import globals from 'globals'
 
-export default tseslint.config(
+export default defineConfig(
   // Global ignores
   {
     ignores: ['dist/**', 'node_modules/**'],
@@ -14,7 +16,11 @@ export default tseslint.config(
   js.configs.recommended,
 
   // TypeScript rules with type checking
-  ...tseslint.configs.recommendedTypeChecked,
+  tseslint.configs.recommendedTypeChecked,
+
+  // import-x
+  importX.flatConfigs.recommended,
+  importX.flatConfigs.typescript,
 
   // Main configuration
   {

bskyembed/package.json

@@ -7,29 +7,33 @@
     "dev-snippet": "tsc --project tsconfig.snippet.json && serve -s dist -p 3000 -n",
     "build": "tsc && vite build",
     "build-snippet": "tsc --project tsconfig.snippet.json",
+    "analyze": "ANALYZE=1 vite build",
     "lint": "eslint --cache src",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "format": "prettier -w src"
   },
   "dependencies": {
     "@atproto/api": "^0.15.25",
     "preact": "^10.4.8"
   },
   "devDependencies": {
-    "@preact/preset-vite": "^2.10.2",
-    "@vitejs/plugin-legacy": "^7.0.0",
     "@eslint/js": "^9.18.0",
+    "@preact/preset-vite": "^2.10.2",
+    "@vitejs/plugin-legacy": "^8.0.1",
     "autoprefixer": "^10.4.19",
     "eslint": "^9.18.0",
-    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-import-x": "^4.16.2",
+    "eslint-plugin-simple-import-sort": "^13.0.0",
     "globals": "^15.14.0",
     "postcss": "^8.4.38",
-    "typescript-eslint": "^8.20.0",
+    "prettier": "^3.8.3",
     "serve": "^14.2.5",
     "tailwindcss": "^3.4.3",
     "terser": "^5.43.1",
-    "typescript": "^5.8.3",
+    "typescript": "^6.0.3",
-    "vite": "^7.0.4",
+    "typescript-eslint": "^8.20.0",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite": "^8.0.12",
+    "vite-bundle-analyzer": "^1.3.8"
   },
   "resolutions": {
     "@types/estree": "1.0.6"

bskyembed/pnpm-workspace.yaml

@@ -0,0 +1,8 @@
+allowBuilds:
+  "@sentry/cli": true
+  "core-js": true
+  "esbuild": true
+  "unrs-resolver": true
+minimumReleaseAgeExclude:
+  - '@atproto/*'
+  - '@bsky.app/*'

bskyembed/src/components/embed.tsx

@@ -416,6 +416,7 @@ function VideoEmbed({content}: {content: AppBskyEmbedVideo.View}) {
         controls
         playsinline
         preload="metadata"
+        // @ts-expect-error https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/video#loading
         loading="lazy"
         aria-label={content.alt || undefined}
         onClickCapture={evt => evt.stopPropagation()}

bskyembed/tsconfig.json

@@ -1,11 +1,10 @@
 {
   "compilerOptions": {
-    "target": "ES5",
+    "target": "ES2015",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "lib": ["DOM", "ESNext"],
     "types": ["vite/client"],
     "allowJs": false,
     "skipLibCheck": true,
-    "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
@@ -17,7 +16,6 @@
     "jsx": "react",
     "jsxFactory": "h",
     "jsxFragmentFactory": "Fragment",
-    "downlevelIteration": true
   },
-  "include": ["src", "snippet", "vite.config.ts", "*.config.cjs", ".eslintrc.cjs"]
+  "include": ["src", "snippet", "vite.config.ts", "*.config.cjs", "eslint.config.mjs"]
 }

bskyembed/tsconfig.snippet.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "target": "ES5",
+    "target": "ES2015",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "lib": ["DOM", "ESNext"],
     "strict": true,
     "outDir": "dist"
   },

bskyembed/vite.config.ts

@@ -1,10 +1,10 @@
 import fs from 'node:fs'
 import {resolve} from 'node:path'
 
-import preact from '@preact/preset-vite'
+import {preact} from '@preact/preset-vite'
 import legacy from '@vitejs/plugin-legacy'
 import type {Plugin, UserConfig} from 'vite'
-import paths from 'vite-tsconfig-paths'
+import {analyzer} from 'vite-bundle-analyzer'
 
 /**
  * World's hackiest router, for dev only. Serves `/post.html` to requests that start with `/embed/`
@@ -38,11 +38,13 @@ function devOnlyRouter(): Plugin {
 const config: UserConfig = {
   plugins: [
     preact(),
-    paths(),
     legacy({
       targets: ['defaults', 'not IE 11'],
     }),
     devOnlyRouter(),
+    analyzer({
+      enabled: process.env.ANALYZE === '1',
+    }),
   ],
   build: {
     assetsDir: 'static',
@@ -53,6 +55,9 @@ const config: UserConfig = {
       },
     },
   },
+  resolve: {
+    tsconfigPaths: true,
+  },
 }
 
 export default config