build: drop tsx in favor of Node.js type stripping

.nvmrc

@@ -1 +1 @@
-22.13.0
+22.22.3

.oxlintrc.json

@@ -1,6 +1,6 @@
 {
   "$schema": "./node_modules/oxlint/configuration_schema.json",
-  "plugins": ["eslint", "oxc", "react", "typescript", "unicorn"],
+  "plugins": ["eslint", "import", "oxc", "react", "typescript", "unicorn"],
   "options": {
     // can't enable this and upgrade to tsgo due to upstream @docusaurus/tsconfig incompatibility
     // https://github.com/facebook/docusaurus/issues/11893
@@ -10,12 +10,14 @@
     "correctness": "error"
   },
   "rules": {
+    "import/extensions": ["error", "always", { "ignorePackages": true }],
     "no-unused-vars": [
       "warn",
       {
         "varsIgnorePattern": "^_"
       }
-    ]
+    ],
+    "typescript/consistent-type-imports": "error"
   },
   "ignorePatterns": ["docs/**", "create-electron-documentation"]
 }

docusaurus.config.ts

@@ -1,22 +1,22 @@
 import fs from 'node:fs';
 import path from 'node:path';
 
-import logger from '@docusaurus/logger';
-import { Config } from '@docusaurus/types';
+import { logger } from '@docusaurus/logger';
+import type { Config } from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 import npm2yarn from '@docusaurus/remark-plugin-npm2yarn';
 import { themes as prismThemes } from 'prism-react-renderer';
 import remarkGithubAdmonitionsToDirectives, {
   DEFAULT_MAPPING,
 } from 'remark-github-admonitions-to-directives';
 
-import apiLabels from './src/transformers/api-labels';
-import apiOptionsClass from './src/transformers/api-options-class';
-import apiStructurePreviews from './src/transformers/api-structure-previews';
-import jsCodeBlocks from './src/transformers/js-code-blocks';
-import fiddleEmbedder from './src/transformers/fiddle-embedder';
-import githubContentsLinks from './src/transformers/github-content-links';
-import apiHistory from './src/transformers/api-history';
+import apiLabels from './src/transformers/api-labels.ts';
+import apiOptionsClass from './src/transformers/api-options-class.ts';
+import apiStructurePreviews from './src/transformers/api-structure-previews.ts';
+import jsCodeBlocks from './src/transformers/js-code-blocks.ts';
+import fiddleEmbedder from './src/transformers/fiddle-embedder.ts';
+import githubContentsLinks from './src/transformers/github-content-links.ts';
+import apiHistory from './src/transformers/api-history.ts';
 
 let docsSHA = undefined;
 

package.json

@@ -9,8 +9,8 @@
   "scripts": {
     "crowdin": "crowdin",
     "i18n:upload": "crowdin upload sources --delete-obsolete",
-    "i18n:download": "crowdin download --verbose && tsx scripts/prepare-i18n-content.ts",
-    "i18n:glossary": "tsx scripts/update-crowdin-glossary.ts",
+    "i18n:download": "crowdin download --verbose && node scripts/prepare-i18n-content.ts",
+    "i18n:glossary": "node scripts/update-crowdin-glossary.ts",
     "i18n:build": "docusaurus build",
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
@@ -21,13 +21,13 @@
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
-    "update-l10n-sources": "tsx scripts/update-l10n-sources.ts",
+    "update-l10n-sources": "node scripts/update-l10n-sources.ts",
     "lint:fmt": "oxfmt --check .",
-    "lint:oxlint": "oxlint src scripts",
+    "lint:oxlint": "oxlint docusaurus.config.ts src scripts",
     "lint:markdown": "markdownlint-cli2 \"**/*.md\"",
     "lint": "tsc --noEmit && npm run lint:fmt && npm run lint:oxlint && npm run lint:markdown",
     "lint:fix": "oxfmt --write . && npm run lint:oxlint -- --fix && npm run lint:markdown -- --fix",
-    "pre-build": "tsx ./scripts/pre-build.ts",
+    "pre-build": "node ./scripts/pre-build.ts",
     "prepare": "husky"
   },
   "dependencies": {
@@ -92,7 +92,6 @@
     "satori": "^0.25.0",
     "sharp": "^0.34.5",
     "tar-stream": "^2.2.0",
-    "tsx": "^4.19.3",
     "typescript": "^5.9.3",
     "unist-util-filter": "^5.0.1",
     "unist-util-visit-parents": "^6.0.1"

scripts/pre-build.ts

@@ -7,17 +7,17 @@ import { existsSync } from 'fs';
 import fs from 'fs/promises';
 import path from 'path';
 
-import logger from '@docusaurus/logger';
+import { logger } from '@docusaurus/logger';
 
-import { latestElectronVersion } from '../src/util/latest-electron-version';
+import { latestElectronVersion } from '../src/util/latest-electron-version.ts';
 
-import { copyLocalDocumentation, download } from './tasks/download-docs';
-import { addFrontmatterToAllDocs } from './tasks/add-frontmatter';
-import { fixContent } from './tasks/md-fixers';
-import { copyNewContent } from './tasks/copy-new-content';
-import { preprocessApiHistory } from './tasks/preprocess-api-history';
+import { copyLocalDocumentation, download } from './tasks/download-docs.ts';
+import { addFrontmatterToAllDocs } from './tasks/add-frontmatter.ts';
+import { fixContent } from './tasks/md-fixers.ts';
+import { copyNewContent } from './tasks/copy-new-content.ts';
+import { preprocessApiHistory } from './tasks/preprocess-api-history.ts';
 
-const DOCS_FOLDER = path.join(__dirname, '..', 'docs', 'latest');
+const DOCS_FOLDER = path.join(import.meta.dirname, '..', 'docs', 'latest');
 
 /**
  *

scripts/prepare-i18n-content.ts

@@ -6,16 +6,34 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
 
-import logger from '@docusaurus/logger';
+import { logger } from '@docusaurus/logger';
 
-import { addFrontmatterToAllDocs } from './tasks/add-frontmatter';
-import { fixContent } from './tasks/md-fixers';
-import config from '../docusaurus.config';
+import { addFrontmatterToAllDocs } from './tasks/add-frontmatter.ts';
+import { fixContent } from './tasks/md-fixers.ts';
 
 const DOCS_FOLDER = path.join('docs', 'latest');
 
 const start = async () => {
-  const locales = new Set(config.i18n.locales);
+  // TODO(dsanders11): This is a nasty hack to get around
+  // CJS vs ESM issues with Node.js type stripping. Once
+  // Docusaurus fully supports ESM, switch this back to
+  // just importing the config file directly and drop this.
+  const configPath = path.join(
+    import.meta.dirname,
+    '..',
+    'docusaurus.config.ts',
+  );
+  const configSource = await fs.readFile(configPath, 'utf8');
+  const localesMatch = configSource.match(/locales:\s*\[([^\]]*)\]/);
+  if (!localesMatch) {
+    throw new Error('Could not find locales array in docusaurus.config.ts');
+  }
+  const locales = new Set(
+    Array.from(
+      localesMatch[1].matchAll(/'([^']+)'|"([^"]+)"/g),
+      (m) => m[1] ?? m[2],
+    ),
+  );
   locales.delete('en');
   for (const locale of locales) {
     const localeDocs = path.join(

scripts/tasks/copy-new-content.ts

@@ -10,7 +10,7 @@ const newContent = new Map([['how-to-examples.md', 'tutorial/examples.md']]);
 export const copyNewContent = async (destination: string) => {
   for (const [source, target] of newContent) {
     await fs.copyFile(
-      path.join(__dirname, source),
+      path.join(import.meta.dirname, source),
       path.join(destination, target),
     );
   }

scripts/tasks/preprocess-api-history.ts

@@ -1,7 +1,7 @@
 import fs from 'node:fs/promises';
 
-import logger from '@docusaurus/logger';
-import Ajv, { JSONSchemaType, ValidateFunction } from 'ajv';
+import { logger } from '@docusaurus/logger';
+import Ajv, { type JSONSchemaType, type ValidateFunction } from 'ajv';
 import { readFile, writeFile } from 'fs/promises';
 import { fromHtml } from 'hast-util-from-html';
 import type { Html, Root } from 'mdast';

scripts/update-crowdin-glossary.ts

@@ -3,8 +3,8 @@ import fs from 'node:fs/promises';
 import path from 'node:path';
 
 import { Glossaries, UploadStorage } from '@crowdin/crowdin-api-client';
-import logger from '@docusaurus/logger';
-import {
+import { logger } from '@docusaurus/logger';
+import type {
   ParsedDocumentationResult,
   ClassDocumentationContainer,
   ModuleDocumentationContainer,
@@ -16,10 +16,10 @@ import { toString } from 'mdast-util-to-string';
 import remarkParse from 'remark-parse';
 import { unified } from 'unified';
 
-import { latestElectronVersion } from '../src/util/latest-electron-version';
+import { latestElectronVersion } from '../src/util/latest-electron-version.ts';
 
-import { convertToCSV } from './utils/csv';
-import { Parent, Text } from 'mdast';
+import { convertToCSV } from './utils/csv.ts';
+import type { Parent, Text } from 'mdast';
 
 dotenv.config();
 const GLOSSARY_ID = 66562;
@@ -118,7 +118,13 @@ async function collectElectronAPI() {
  */
 async function collectElectronGlossary() {
   // Generate a Markdown AST from remark
-  const source = path.join(__dirname, '..', 'docs', 'latest', 'glossary.md');
+  const source = path.join(
+    import.meta.dirname,
+    '..',
+    'docs',
+    'latest',
+    'glossary.md',
+  );
   const md = await fs.readFile(source, 'utf8');
   const syntaxTree = unified().use(remarkParse).parse(md);
 

scripts/update-l10n-sources.ts

@@ -1,14 +1,14 @@
 /**
- * This is a pre-hook task that checks if the files `docusaurus.config.js` or
+ * This is a pre-hook task that checks if the files `docusaurus.config.ts` or
  * `sidebars.js` have been modified and if so makes sure that the files
  * needed for localization are regenerated.
  */
-import logger from '@docusaurus/logger';
+import { logger } from '@docusaurus/logger';
 
-import { getChanges } from './utils/git-commands';
-import { execute } from './utils/execute';
+import { getChanges } from './utils/git-commands.ts';
+import { execute } from './utils/execute.ts';
 
-const files = ['docusaurus.config.js', 'sidebars.js'];
+const files = ['docusaurus.config.ts', 'sidebars.js'];
 
 const start = async () => {
   logger.info(`Checking if the following files have been modified:

scripts/utils/execute.ts

@@ -1,5 +1,5 @@
 import path from 'path';
-import execa, { Options } from 'execa';
+import execa, { type Options } from 'execa';
 
 /**
  * Groups all string arguments into a single one. E.g.:

scripts/utils/git-commands.ts

@@ -1,4 +1,4 @@
-import { execute } from './execute';
+import { execute } from './execute.ts';
 
 /**
  * Returns the current modified files in the repo.

src/components/ApiHistoryTable.tsx

@@ -3,11 +3,11 @@ import React from 'react';
 import ReactMarkdown from 'react-markdown';
 import * as semver from 'semver';
 
-import {
+import type {
   ApiHistory,
   PrReleaseVersions,
   PrReleaseVersionsContainer,
-} from '../transformers/api-history';
+} from '../transformers/api-history.ts';
 import styles from './ApiHistoryTable.module.scss';
 
 enum Change {

src/pages/fiddle/index.tsx

@@ -9,7 +9,7 @@ import LinuxLogo from '@site/static/assets/img/platform-linux.svg';
 import clsx from 'clsx';
 
 import { usePluginData } from '@docusaurus/useGlobalData';
-import { SemVer } from 'semver';
+import type { SemVer } from 'semver';
 
 export default function FiddlePage() {
   const [OS, setOS] = useState('win32');

src/pages/home/_components/Feature.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import React, { type PropsWithChildren } from 'react';
 import clsx from 'clsx';
 import styles from './Feature.module.scss';
 

src/pages/home/_components/FeaturedAppsCarousel.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import styles from './FeaturedAppsCarousel.module.scss';
 import { useColorMode } from '@docusaurus/theme-common';
-import type { FeaturedApp } from '../../../util/featured-apps';
+import type { FeaturedApp } from '../../../util/featured-apps.ts';
 
 interface FeaturedAppsCarouselProps {
   list: FeaturedApp[];

src/pages/home/_components/InstallSteps.tsx

@@ -3,8 +3,8 @@ import { usePluginData } from '@docusaurus/useGlobalData';
 import clsx from 'clsx';
 import styles from './InstallSteps.module.scss';
 import semver from 'semver';
-import CodeWindow from './CodeWindow';
-import { ReleasesPluginContent } from '../../../plugins/releases';
+import CodeWindow from './CodeWindow.tsx';
+import type { ReleasesPluginContent } from '../../../plugins/releases/index.tsx';
 
 export default function InstallSteps() {
   const [channel, setChannel] = useState('stable');

src/pages/home/_index.tsx

@@ -5,15 +5,15 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import clsx from 'clsx';
 
 import styles from './_index.module.scss';
-import { HeroAnimation } from './_components/Header';
-import AppsGrid from './_components/AppsGrid';
-import InstallSteps from './_components/InstallSteps';
-import Feature from './_components/Feature';
-import TechnologiesGrid from './_components/TechnologiesGrid';
-import CodeWindow from './_components/CodeWindow';
-import FeaturedAppsCarousel from './_components/FeaturedAppsCarousel';
+import { HeroAnimation } from './_components/Header.tsx';
+import AppsGrid from './_components/AppsGrid.tsx';
+import InstallSteps from './_components/InstallSteps.tsx';
+import Feature from './_components/Feature.tsx';
+import TechnologiesGrid from './_components/TechnologiesGrid.tsx';
+import CodeWindow from './_components/CodeWindow.tsx';
+import FeaturedAppsCarousel from './_components/FeaturedAppsCarousel.tsx';
 
-import { FEATURED_APPS, FEATURED_LOGOS } from '../../util/featured-apps';
+import { FEATURED_APPS, FEATURED_LOGOS } from '../../util/featured-apps.ts';
 import WhyCard from '@site/src/pages/home/_components/WhyCard';
 import {
   Activity,

src/pages/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Home from './home/_index';
+import Home from './home/_index.tsx';
 
 export default function HomeWrapper() {
   return <Home />;

src/plugins/apps/components/AppCard.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import * as React from 'react';
-import { App } from '..';
+import type { App } from '../index.tsx';
 
 import styles from './AppCard.module.scss';
 

src/plugins/apps/components/index.tsx

@@ -3,9 +3,9 @@ import Layout from '@theme/Layout';
 import clsx from 'clsx';
 
 import styles from './apps.module.scss';
-import AppCard from './AppCard';
+import AppCard from './AppCard.tsx';
 import { useState } from 'react';
-import { AppsPluginContent } from '..';
+import type { AppsPluginContent } from '../index.ts';
 
 const SORTS = {
   ALPHABETICAL: 'Alphabetical',

src/plugins/apps/index.ts

@@ -1,4 +1,4 @@
-import { Plugin } from '@docusaurus/types';
+import type { Plugin } from '@docusaurus/types';
 
 export interface App {
   category: string;

src/plugins/fiddle/index.ts

@@ -1,5 +1,5 @@
 import semver from 'semver';
-import { Plugin } from '@docusaurus/types';
+import type { Plugin } from '@docusaurus/types';
 
 module.exports = async function fiddleVersionPlugin() {
   const plugin: Plugin<string> = {

src/plugins/governance/components/index.tsx

@@ -5,7 +5,7 @@ import React, { useState } from 'react';
 import Translate from '@docusaurus/Translate';
 
 import styles from './governance.module.scss';
-import { WorkingGroup } from '../fetch-data';
+import type { WorkingGroup } from '../fetch-data.ts';
 
 export default function GovernancePage({
   governance,

src/plugins/governance/fetch-data.ts

@@ -1,8 +1,8 @@
 import { remark } from 'remark';
 import gfm from 'remark-gfm';
 import { toString } from 'mdast-util-to-string';
-import { Node, Parent } from 'unist';
-import { Table, Link } from 'mdast';
+import type { Node, Parent } from 'unist';
+import type { Table, Link } from 'mdast';
 
 export interface WorkingGroup {
   name: string;

src/plugins/governance/index.ts

@@ -1,4 +1,4 @@
-import { fetchData } from './fetch-data';
+import { fetchData } from './fetch-data.ts';
 
 module.exports = function governancePlugin() {
   return {