build(typescript): migrate library to typescript

.eslintignore

@@ -0,0 +1 @@
+dist/

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./node_modules/gts/"
+}

.prettierrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  ...require('gts/.prettierrc.json')
+}

package.json

@@ -2,12 +2,16 @@
   "name": "webdev-infra",
   "version": "1.0.2",
   "description": "This is a placeholder README for the webdev-infra repo, which will contain shared code for https://web.dev, https://developer.chrome.com and others.",
-  "main": "index.js",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
   "directories": {
     "doc": "docs"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "gts lint",
+    "build": "rimraf ./dist && tsc",
+    "prepare": "npm run compile"
   },
   "repository": {
     "type": "git",
@@ -22,5 +26,11 @@
   "homepage": "https://github.com/GoogleChrome/webdev-infra#readme",
   "dependencies": {
     "striptags": "^3.1.1"
+  },
+  "devDependencies": {
+    "@types/node": "^14.11.2",
+    "gts": "^3.1.0",
+    "typescript": "^4.0.3",
+    "rimraf": "^3.0.2"
   }
-}
+}

src/filters/index.ts

@@ -0,0 +1,2 @@
+export * from './svg';
+export * from './toc';

src/filters/svg.ts

@@ -25,12 +25,8 @@ let svgIndex = 0;
  * The basic issue is that SVGs use "#foo" references for clip-paths and so on,
  * however, when inlined these become global. We rewrite all IDs so they're
  * unique.
- *
- * @param {string} raw
- * @param {string} className
- * @return {string}
  */
-const updateSvgForInclude = (raw, className = '') => {
+export const updateSvgForInclude = (raw: string, className = ''): string => {
   if (!raw) {
     return '';
   }
@@ -60,5 +56,3 @@ const updateSvgForInclude = (raw, className = '') => {
 
   return raw;
 };
-
-module.exports = {updateSvgForInclude};

src/filters/toc.ts

@@ -26,7 +26,7 @@
  * (Don't try this at home).
  */
 
-const striptags = require('striptags');
+import * as striptags from 'striptags';
 
 // This matches a heading tag like `<h2 foo="bar">contents</h2>`. It uses backreferences so that
 // the regexp catches the correct closing tag (i.e., <h2> will be closed by the nearest upcoming
@@ -52,18 +52,13 @@ let options = {
   spanClass: 'toc__span',
 };
 
-/**
- * @typedef {{
- *   title: string,
- *   id?: string,
- *   children?: TocNodeType[],
- * }}
- */
-// eslint-disable-next-line no-unused-vars
-let TocNodeType;
+export interface TocNodeType {
+  title: string;
+  id?: string;
+  children?: TocNodeType[];
+}
 
-/** @param {TocNodeType} node */
-const renderNode = (node) => {
+const renderNode = (node: TocNodeType): string => {
   let escapedTitle = striptags(node.title);
 
   // Remove any hanging "#" which is generated by other code.
@@ -80,26 +75,23 @@ const renderNode = (node) => {
   return `<li class="${options.listItemClass}">${titlePart}${childrenPart}</li>`;
 };
 
-/** @param {TocNodeType[]} toplevel */
-const renderChildren = (toplevel) => {
+const renderChildren = (toplevel: TocNodeType[]): string => {
   return `<ul class="${options.listClass}">${toplevel
     .map(renderNode)
     .join('')}</ul>`;
 };
 
 /**
- * @param {string} raw inner HTML content of the page
- * @return {string} toc contents
+ * @param raw inner HTML content of the page
+ * @return toc contents
  */
-const toc = (raw, opts) => {
+export const toc = (raw: string, opts: TODO): string => {
   // Merge user configuration into top level options.
   options = {...options, ...opts};
 
-  /** @type {TocNodeType[]} */
-  let toplevel = [];
+  let toplevel: TocNodeType[] = [];
 
-  /** @type {TocNodeType|null} */
-  let current = null;
+  let current: TocNodeType | null = null;
 
   for (;;) {
     const headingMatch = headingRe.exec(raw);
@@ -138,7 +130,3 @@ const toc = (raw, opts) => {
   }
   return renderChildren(toplevel);
 };
-
-module.exports = {
-  toc,
-};

src/index.ts

@@ -0,0 +1 @@
+export * from './filters';

tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./node_modules/gts/tsconfig-google.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "dist",
+    "typesRoots": ["./types"]
+  },
+  "include": ["src/**/*.ts", "test/**/*.ts", "types/**/*"]
+}

types/utils/todo.d.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export type TODO = any; // eslint-disable-line @typescript-eslint/no-explicit-any
+}
+
+// empty export to keep file a module
+export {};