Migrate plugins to TypeScript and update configurations

docs/network.md

@@ -143,7 +143,7 @@ const App = () => {
   const getMovies = async () => {
     try {
       const response = await fetch('https://reactnative.dev/movies.json');
-      const json = await response.json();
+      const json = (await response.json()) as any;
       setData(json.movies);
     } catch (error) {
       console.error(error);

packages/lint-examples/bin/eslint-examples-jsx.js → packages/lint-examples/bin/eslint-examples-jsx.ts

@@ -8,7 +8,7 @@
  * @format
  */
 
-import lintExamples from '../src/lintExamples.js';
+import lintExamples from '../src/lintExamples.ts';
 
 console.log('Linting JSX docs code examples...');
 

packages/lint-examples/bin/eslint-examples-tsx.js → packages/lint-examples/bin/eslint-examples-tsx.ts

@@ -8,7 +8,7 @@
  * @format
  */
 
-import lintExamples from '../src/lintExamples.js';
+import lintExamples from '../src/lintExamples.ts';
 
 console.log('Linting TSX docs code examples...');
 

packages/lint-examples/bin/tsc-examples.js → packages/lint-examples/bin/tsc-examples.ts

@@ -8,7 +8,7 @@
  * @format
  */
 
-import lintExamples from '../src/lintExamples.js';
+import lintExamples from '../src/lintExamples.ts';
 
 console.log('Typechecking TSX docs code examples...');
 

packages/lint-examples/package.json

@@ -4,9 +4,9 @@
   "private": true,
   "type": "module",
   "bin": {
-    "eslint-examples-jsx": "./bin/eslint-examples-jsx.js",
-    "eslint-examples-tsx": "./bin/eslint-examples-tsx.js",
-    "tsc-examples": "./bin/tsc-examples.js"
+    "eslint-examples-jsx": "./bin/eslint-examples-jsx.ts",
+    "eslint-examples-tsx": "./bin/eslint-examples-tsx.ts",
+    "tsc-examples": "./bin/tsc-examples.ts"
   },
   "scripts": {
     "lint": "eslint"

packages/lint-examples/src/lintExamples.js → packages/lint-examples/src/lintExamples.ts

@@ -43,7 +43,17 @@ const validExtensions = ['js', 'tsx'];
  * @param opts.extension extension to treat the example as if it does not specify one
  * @param opts.writeBack whether to update examples with mutations made by the linter
  */
-async function lintExamples({command, args, extension, writeBack}) {
+async function lintExamples({
+  command,
+  args,
+  extension,
+  writeBack,
+}: {
+  command: string;
+  args?: string[];
+  extension: string;
+  writeBack: boolean;
+}) {
   if (!validExtensions.includes(extension)) {
     console.error(
       `Invalid extension "${extension}" (should be one of ${JSON.stringify(
@@ -73,12 +83,17 @@ async function lintExamples({command, args, extension, writeBack}) {
  *
  * @param extension extension to treat the example as if it does not specify
  */
-async function extractExamples(extension) {
+async function extractExamples(extension: string) {
   const documents = await glob.glob('**/*.md', {
     cwd: documentsRoot,
     absolute: true,
   });
-  const mappings = [];
+  const mappings: {
+    documentPath: string;
+    examplePath: string;
+    offset: number;
+    length: number;
+  }[] = [];
 
   await fs.mkdir(outputRoot, {recursive: true});
   await fs.rm(outputRoot, {recursive: true});
@@ -99,7 +114,10 @@ async function extractExamples(extension) {
  * @param filename absolute filename of the documents root
  * @param extension extension to treat the example as if it does not specify
  */
-async function extractExamplesFromDocument(filename, extension) {
+async function extractExamplesFromDocument(
+  filename: string,
+  extension: string,
+) {
   const fileContents = await fs.readFile(filename, {
     encoding: 'utf-8',
   });
@@ -167,7 +185,7 @@ async function extractExamplesFromDocument(filename, extension) {
  * @param command an npx command to run as the linter tool
  * @param args extra arguments to be passed to the linter
  */
-async function runLinter(command, args) {
+async function runLinter(command: string, args: string[]) {
   const combinedArgs = [...processArgs, ...args];
 
   try {
@@ -178,6 +196,7 @@ async function runLinter(command, args) {
 
     return 0;
   } catch (ex) {
+    // @ts-expect-error TODO: find proper type
     return ex.status;
   }
 }
@@ -187,8 +206,23 @@ async function runLinter(command, args) {
  *
  * @param mappings file mappings generated by extractExamples()
  */
-async function updateDocuments(mappings) {
-  const mappingsByDocument = {};
+async function updateDocuments(
+  mappings: {
+    documentPath: string;
+    examplePath: string;
+    offset: number;
+    length: number;
+  }[],
+) {
+  const mappingsByDocument: Record<
+    string,
+    {
+      documentPath: string;
+      examplePath: string;
+      offset: number;
+      length: number;
+    }[]
+  > = {};
   for (const mapping of mappings) {
     if (mappingsByDocument[mapping.documentPath] === undefined) {
       mappingsByDocument[mapping.documentPath] = [];

packages/lint-examples/tsconfig.json

@@ -1,4 +1,4 @@
 {
   "extends": "@react-native/typescript-config/tsconfig.json",
-  "include": ["./out"]
+  "include": ["./src", "./bin", "./out"]
 }

plugins/remark-codeblock-language-as-title/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "description": "Remark plugin for using codeblock language as title",
-  "main": "src/index.js",
+  "main": "src/index.ts",
   "type": "module",
   "keywords": [
     "remark",
@@ -20,6 +20,8 @@
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
-    "remark": "^15.0.1"
+    "@types/mdast": "^4.0.4",
+    "remark": "^15.0.1",
+    "typescript": "^5.9.2"
   }
 }

plugins/remark-codeblock-language-as-title/src/index.js → plugins/remark-codeblock-language-as-title/src/index.ts

@@ -5,12 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import {Root} from 'mdast';
+
 export default function codeblockLanguageAsTitleRemarkPlugin() {
-  /**
-   * @param {import('mdast').Root} root - The root node of the Markdown AST
-   * @returns {Promise<void>}
-   */
-  return async root => {
+  return async (root: Root) => {
     const {visit} = await import('unist-util-visit');
     visit(root, 'code', node => {
       if (node.lang) {

plugins/remark-codeblock-language-as-title/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@react-native/typescript-config/tsconfig.json",
+  "include": ["./src"],
+}

plugins/remark-lint-no-dead-urls/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "description": "Remark linter rule to check for dead urls",
-  "main": "src/index.js",
+  "main": "src/index.ts",
   "type": "module",
   "keywords": [
     "remark",
@@ -18,13 +18,14 @@
     "test": "yarn node --experimental-vm-modules $(yarn bin jest)"
   },
   "dependencies": {
-    "got": "^13.0.0",
+    "got": "^14.6.3",
     "unified-lint-rule": "^3.0.0",
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
     "dedent": "^1.5.3",
     "jest": "^29.4.3",
-    "remark": "^15.0.1"
+    "remark": "^15.0.1",
+    "typescript": "^5.9.2"
   }
 }

plugins/remark-lint-no-dead-urls/src/index.js → plugins/remark-lint-no-dead-urls/src/index.ts

@@ -11,8 +11,11 @@ import {URL} from 'node:url';
 import {lintRule} from 'unified-lint-rule';
 import {visit} from 'unist-util-visit';
 
+import {Root} from 'mdast';
 import {fetch} from './lib.js';
 
+import {Method} from 'got';
+
 const linkCache = new Map();
 
 const HTTP = {
@@ -23,12 +26,18 @@ const HTTP = {
 };
 
 const uri = {
-  isLocalhost: url => /^(https?:\/\/)(localhost|127\.0\.0\.1)(:\d+)?/.test(url),
-  isExternal: url => /(https?:\/\/)/.test(url),
-  isPath: url => /^\/.*/.test(url),
+  isLocalhost: (url: string) =>
+    /^(https?:\/\/)(localhost|127\.0\.0\.1)(:\d+)?/.test(url),
+  isExternal: (url: string) => /(https?:\/\/)/.test(url),
+  isPath: (url: string) => /^\/.*/.test(url),
 };
 
-async function cacheFetch(urlOrPath, method, options) {
+async function cacheFetch(
+  urlOrPath: string,
+  method: Method,
+  // @ts-expect-error TODO: find proper type
+  options: {[x: string]; baseUrl}
+) {
   if (linkCache.has(urlOrPath)) {
     return [urlOrPath, linkCache.get(urlOrPath)];
   }
@@ -42,7 +51,11 @@ async function cacheFetch(urlOrPath, method, options) {
   return [urlOrPath, code];
 }
 
-async function naiveLinkCheck(urls, options) {
+async function naiveLinkCheck(
+  urls: string[],
+  // @ts-expect-error TODO: find proper type
+  options: {[x: string]; baseUrl}
+) {
   return Promise.allSettled(
     urls.map(async url => {
       try {
@@ -52,9 +65,11 @@ async function naiveLinkCheck(urls, options) {
           // Fallback, some endpoints don't support HEAD requests
           return await cacheFetch(url, 'GET', options);
         } catch (e) {
+          // @ts-expect-error TODO: find proper type
           if (e.code === 'ERR_GOT_REQUEST_ERROR') {
             throw e;
           }
+          // @ts-expect-error TODO: find proper type
           const code = e.statusCode ?? e?.response?.statusCode ?? e.code;
           linkCache.set(url, code);
           return [url, code];
@@ -64,13 +79,24 @@ async function naiveLinkCheck(urls, options) {
   );
 }
 
-async function noDeadUrls(ast, file, options = {}) {
+async function noDeadUrls(
+  ast: Root,
+  // @ts-expect-error TODO: find proper type
+  file,
+  options: {
+    skipUrlPatterns?: string[];
+    baseUrl?: string;
+    // @ts-expect-error TODO: find proper type
+    [key: string];
+  } = {}
+) {
   const urlToNodes = new Map();
 
   const {skipUrlPatterns, ...clientOptions} = options;
 
   // Grab all possible urls from the markdown
   visit(ast, ['link', 'image', 'definition'], node => {
+    // @ts-expect-error TODO: find proper type
     const {url} = node;
     if (
       !url ||
@@ -95,8 +121,10 @@ async function noDeadUrls(ast, file, options = {}) {
     urlToNodes.get(url).push(node);
   });
 
+  // @ts-expect-error TODO: find proper type
   const results = await naiveLinkCheck([...urlToNodes.keys()], clientOptions);
 
+  // @ts-expect-error TODO: find proper type
   for (const {value} of results) {
     const [url, statusCode] = value;
     const nodes = urlToNodes.get(url) ?? [];

plugins/remark-lint-no-dead-urls/src/lib.js → plugins/remark-lint-no-dead-urls/src/lib.ts

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import got from 'got';
+import got, {Method} from 'got';
 
-export async function fetch(url, method, options = {}) {
+export async function fetch(url: string, method: Method, options = {}) {
   const {statusCode} = await got(url, {
     ...options,
     method,

plugins/remark-lint-no-dead-urls/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@react-native/typescript-config/tsconfig.json",
+  "include": ["./src"],
+}

plugins/remark-snackplayer/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "description": "Remark Expo Snack Plugin",
-  "main": "src/index.js",
+  "main": "src/index.ts",
   "type": "module",
   "keywords": [
     "remark",
@@ -17,16 +17,19 @@
   ],
   "scripts": {
     "lint": "eslint .",
-    "test": "yarn tape tests/index.js"
+    "test": "yarn tape tests/index.ts"
   },
   "dependencies": {
     "dedent": "^1.5.3",
     "object.fromentries": "^2.0.3",
     "unist-util-visit-parents": "^3.1.1"
   },
   "devDependencies": {
+    "@types/object.fromentries": "^2.0.4",
+    "@types/tape": "^5.8.1",
     "remark": "^15.0.1",
     "remark-mdx": "^3.1.0",
-    "tape": "^5.7.0"
+    "tape": "^5.7.0",
+    "typescript": "^5.9.2"
   }
 }