chore: resolve linting errors & warnings

.eslintrc

@@ -1,11 +1,19 @@
 {
     "root": true,
     "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        }
+    },
     "plugins": ["@typescript-eslint", "prettier"],
     "extends": [
         "eslint:recommended",
         "plugin:@typescript-eslint/eslint-recommended",
         "plugin:@typescript-eslint/recommended",
         "plugin:prettier/recommended"
-    ]
+    ],
+    "rules": {
+        "@typescript-eslint/no-namespace": "off"
+    }
 }

src/build.ts

@@ -23,6 +23,7 @@ const renderPagesToHtml = async ({
 
         // Ensure that we don't cache page modules when running in dev server.
         purgeModuleAndDepsFromCache(srcPath);
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
         const pageSrc = require(srcPath);
         if (!("page" in pageSrc)) {
             throw new Error(

src/cli/index.ts

@@ -36,11 +36,12 @@ const parseArgs = (
         const opt = args.shift();
         switch (opt) {
             case "-h":
-            case "--help":
+            case "--help": {
                 options.showHelp = true;
                 break;
+            }
             case "-r":
-            case "--require":
+            case "--require": {
                 const moduleName = args.shift();
                 if (moduleName == null) {
                     throw new UsageError(
@@ -50,6 +51,7 @@ const parseArgs = (
                 }
                 options.require.push(moduleName);
                 break;
+            }
             default:
                 throw new UsageError(`unknown option ${opt}`, globalHelpText);
         }

src/component.ts

@@ -30,7 +30,9 @@ export type Element = HTMLElement | string | boolean | undefined | null;
 /**
  * Custom HTMLElement factory that can be parameterized by props.
  */
-export interface Component<P extends object = {}> {
+export interface Component<
+    P extends Record<string, unknown> = Record<string, never>
+> {
     (
         props: P & {
             children?: Element[];

src/config.ts

@@ -47,6 +47,7 @@ export interface Config {
     watch: string[];
 }
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => {};
 
 /**

src/create-element.ts

@@ -16,7 +16,7 @@ import { HTMLAttributes } from "./jsx";
  *
  * @return Fully-realized HTMLElement, ready for rendering.
  */
-export function createElement<P extends object>(
+export function createElement<P extends Record<string, unknown>>(
     comp: Component<P>,
     props: P,
     ...children: Element[]
@@ -37,8 +37,8 @@ export function createElement(
     ...children: Element[]
 ): HTMLElement;
 export function createElement(
-    type: string | Component<any>,
+    type: string | Component<Record<string, unknown>>,
-    props: (HTMLAttributes & Record<string, any>) | null,
+    props: HTMLAttributes | Record<string, unknown> | null,
     ...children: Element[]
 ): HTMLElement {
     // Flatten the children array so we can accept arrays as children.
@@ -50,5 +50,19 @@ export function createElement(
     if (type !== type.toLowerCase()) {
         console.warn(`constructed HTML5 tag with non-lowercase name ${type}`);
     }
-    return { tag: type, attributes: props || {}, children: normalizedChildren };
+    const attrs: Record<string, string | number | boolean> = {};
+    for (const [key, value] of Object.entries(props || {})) {
+        if (
+            typeof value !== "string" &&
+            typeof value !== "number" &&
+            typeof value !== "boolean"
+        ) {
+            console.warn(
+                `non-primitive attribute ${key} = ${JSON.stringify(value)}`
+            );
+            continue;
+        }
+        attrs[key] = value;
+    }
+    return { tag: type, attributes: attrs, children: normalizedChildren };
 }

src/index.ts

@@ -6,13 +6,4 @@
 export { HTMLElement, Component } from "./component";
 export { UserConfig as Config } from "./config";
 export { createElement } from "./create-element";
-
+export * from "./jsx";
-import { HTMLElement } from "./component";
-import { IntrinsicElements as JsxIntrinsics } from "./jsx";
-
-declare global {
-    namespace JSX {
-        type Element = HTMLElement;
-        type IntrinsicElements = JsxIntrinsics;
-    }
-}

src/jsx.ts

@@ -3,10 +3,13 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { HTMLElement } from "./component";
+
 export interface RdfaAttributes {
     about?: string;
     datatype?: string;
-    inlist?: any;
+    inlist?: boolean;
     prefix?: string;
     property?: string;
     resource?: string;
@@ -60,7 +63,7 @@ export interface HTMLAttributes extends RdfaAttributes, MicrodataAttributes {
     dir?: "auto" | "rtl" | "ltr";
     disabled?: boolean;
     disableRemotePlayback?: boolean;
-    download?: any;
+    download?: boolean | string;
     draggable?: boolean;
     encType?: string;
     form?: string;
@@ -154,7 +157,10 @@ export interface HTMLAttributes extends RdfaAttributes, MicrodataAttributes {
     wrap?: string;
 }
 
-export interface IntrinsicElements {
+declare global {
+    namespace JSX {
+        type Element = HTMLElement;
+        type IntrinsicElements = {
             a: HTMLAttributes;
             abbr: HTMLAttributes;
             address: HTMLAttributes;
@@ -270,4 +276,6 @@ export interface IntrinsicElements {
             var: HTMLAttributes;
             video: HTMLAttributes;
             wbr: HTMLAttributes;
+        };
+    }
 }

src/utils.ts

@@ -35,7 +35,7 @@ export const walkDir = async function* (
  * @param modName Name of the module to purge from the require cache.
  */
 export const purgeModuleAndDepsFromCache = (modName: string): void => {
-    var modPath = require.resolve(modName);
+    const modPath = require.resolve(modName);
     if (modPath == null) {
         return;
     }

test/lib/expect.ts

@@ -6,7 +6,7 @@
 import { areEqual, displayValue, matches } from "./utils";
 
 class ExpectError extends Error {
-    public constructor(reason: string, expected: any, actual: any) {
+    public constructor(reason: string, expected: unknown, actual: unknown) {
         super(
             `${reason}\n` +
                 `\texpected: ${displayValue(expected)}\n` +
@@ -45,7 +45,7 @@ export class Expect<T> {
      *
      * @throws ExpectError If the actual value does not equal the expected value.
      */
-    public toEqual(expected: T) {
+    public toEqual(expected: T): void {
         if (!areEqual(this.value, expected)) {
             throw new ExpectError(
                 `value does not equal expected`,
@@ -201,12 +201,12 @@ export function expect<T>(fn: () => T): FunctionExpect<T>;
  *
  * @param value Value to place expectations upon.
  */
-export function expect(value: any): Expect<any> {
+export function expect(value: unknown): Expect<unknown> {
     if (typeof value === "string") {
         return new StringExpect(value);
     }
     if (typeof value === "function") {
-        return new FunctionExpect(value);
+        return new FunctionExpect(value as () => unknown);
     }
     return new Expect(value);
 }

test/lib/utils.ts

@@ -31,7 +31,10 @@ const areArraysEqual = <T>(a: T[], b: T[]): boolean => {
     return true;
 };
 
-const areObjectsEqual = <T extends object>(a: T, b: T): boolean => {
+const areObjectsEqual = <T extends Record<string, unknown>>(
+    a: T,
+    b: T
+): boolean => {
     const aKeys = Object.keys(a) as Array<keyof T>;
     const bKeys = Object.keys(b) as Array<keyof T>;
     if (aKeys.length !== bKeys.length) {
@@ -62,7 +65,10 @@ export const areEqual = <T>(a: T, b: T): boolean => {
         return a.source === b.source;
     }
     if (typeof a === "object" && typeof b === "object") {
-        return areObjectsEqual(a as any, b);
+        return areObjectsEqual(
+            a as Record<string, unknown>,
+            b as Record<string, unknown>
+        );
     }
     return a === b;
 };
@@ -95,7 +101,7 @@ export const matches = (value: string, pattern: string | RegExp): boolean => {
  *
  * @return Rendered value to display.
  */
-export const displayValue = (value: any): string => {
+export const displayValue = (value: unknown): string => {
     if (value === undefined) {
         return "undefined";
     }