configured eslint and typescript; added prebuild linting and typechecking

.eslint-config-preact-nojest.cjs

@@ -0,0 +1,175 @@
+// Code taken from https://github.com/preactjs/eslint-config-preact/blob/v1.3.0/index.js
+// and modified to remove all jest mentions, because jest plugin is incompatible with typescript-eslint plugin v6
+// (see https://github.com/jest-community/eslint-plugin-jest/pull/1401 for more details)
+// and to change it from JSM to CJS
+
+module.exports = {
+    // TODO: this is really only required for class property initializer methods, which are seeing declining usage.
+    // At some point, we should un-ship the custom parser and let ESLint use esprima.
+    parser: require.resolve('@babel/eslint-parser'),
+
+    // Currently ignored due to the custom parser.
+    parserOptions: {
+        ecmaVersion: 2020,
+        sourceType: 'module',
+        ecmaFeatures: {
+            modules: true,
+            impliedStrict: true,
+            jsx: true,
+        },
+        requireConfigFile: false,
+        babelOptions: {
+            plugins: [
+                '@babel/plugin-syntax-class-properties',
+                [
+                    '@babel/plugin-syntax-decorators',
+                    { decoratorsBeforeExport: false },
+                ],
+                '@babel/plugin-syntax-jsx',
+            ],
+        },
+    },
+
+    // We don't use plugin:react/recommended here to avoid React-specific rules.
+    extends: ['eslint:recommended'],
+
+    // TODO: preact-cli ships Jest now, Mocha may be a candidate for removal.
+    plugins: ['compat', 'react', 'react-hooks'],
+
+    env: {
+        browser: true,
+        es6: true,
+        node: true,
+    },
+
+    globals: {
+        expect: true,
+        browser: true,
+        global: true,
+    },
+
+    settings: {
+        // Preact CLI provides these defaults
+        targets: ['last 2 versions'],
+        polyfills: ['fetch', 'Promise'],
+        react: {
+            // eslint-plugin-preact interprets this as "h.createElement",
+            // however we only care about marking h() as being a used variable.
+            pragma: 'h',
+            // We use "react 16.0" to avoid pushing folks to UNSAFE_ methods.
+            version: '16.0',
+        },
+    },
+
+    rules: {
+        /**
+         * Preact / JSX rules
+         */
+        'react/no-deprecated': 2,
+        'react/react-in-jsx-scope': 0, // handled this automatically
+        'react/display-name': [1, { ignoreTranspilerName: false }],
+        'react/jsx-no-bind': [
+            1,
+            {
+                ignoreRefs: true,
+                allowFunctions: true,
+                allowArrowFunctions: true,
+            },
+        ],
+        'react/jsx-no-comment-textnodes': 2,
+        'react/jsx-no-duplicate-props': 2,
+        'react/jsx-no-target-blank': 2,
+        'react/jsx-no-undef': 2,
+        'react/jsx-tag-spacing': [2, { beforeSelfClosing: 'always' }],
+        'react/jsx-uses-react': 2, // debatable
+        'react/jsx-uses-vars': 2,
+        'react/jsx-key': [2, { checkFragmentShorthand: true }],
+        'react/self-closing-comp': 2,
+        'react/prefer-es6-class': 2,
+        'react/prefer-stateless-function': 1,
+        'react/require-render-return': 2,
+        'react/no-danger': 1,
+        // Legacy APIs not supported in Preact:
+        'react/no-did-mount-set-state': 2,
+        'react/no-did-update-set-state': 2,
+        'react/no-find-dom-node': 2,
+        'react/no-is-mounted': 2,
+        'react/no-string-refs': 2,
+
+        /**
+         * Hooks
+         */
+        'react-hooks/rules-of-hooks': 2,
+        'react-hooks/exhaustive-deps': 1,
+
+        /**
+         * General JavaScript error avoidance
+         */
+        'constructor-super': 2,
+        'no-caller': 2,
+        'no-const-assign': 2,
+        'no-delete-var': 2,
+        'no-dupe-class-members': 2,
+        'no-dupe-keys': 2,
+        'no-duplicate-imports': 2,
+        'no-else-return': 1,
+        'no-empty-pattern': 0,
+        'no-empty': 0,
+        'no-extra-parens': 0,
+        'no-iterator': 2,
+        'no-lonely-if': 2,
+        'no-mixed-spaces-and-tabs': [1, 'smart-tabs'],
+        'no-multi-str': 1,
+        'no-new-wrappers': 2,
+        'no-proto': 2,
+        'no-redeclare': 2,
+        'no-shadow-restricted-names': 2,
+        'no-shadow': 0,
+        'no-spaced-func': 2,
+        'no-this-before-super': 2,
+        'no-undef-init': 2,
+        'no-unneeded-ternary': 2,
+        'no-unused-vars': [
+            2,
+            {
+                args: 'after-used',
+                ignoreRestSiblings: true,
+            },
+        ],
+        'no-useless-call': 1,
+        'no-useless-computed-key': 1,
+        'no-useless-concat': 1,
+        'no-useless-constructor': 1,
+        'no-useless-escape': 1,
+        'no-useless-rename': 1,
+        'no-var': 1,
+        'no-with': 2,
+
+        /**
+         * General JavaScript stylistic rules (disabled)
+         */
+        semi: 0,
+        strict: [2, 'never'], // assume type=module output (cli default)
+        'object-curly-spacing': [0, 'always'],
+        'rest-spread-spacing': 0,
+        'space-before-function-paren': [0, 'always'],
+        'space-in-parens': [0, 'never'],
+        'object-shorthand': 1,
+        'prefer-arrow-callback': 1,
+        'prefer-rest-params': 1,
+        'prefer-spread': 1,
+        'prefer-template': 1,
+        quotes: [
+            0,
+            'single',
+            {
+                avoidEscape: true,
+                allowTemplateLiterals: true,
+            },
+        ],
+        'quote-props': [2, 'as-needed'],
+        radix: 1, // parseInt(x, 10)
+        'unicode-bom': 2,
+        'valid-jsdoc': 0,
+    },
+};

.eslintrc.cjs

@@ -0,0 +1,33 @@
+module.exports = {
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        project: 'tsconfig.json',
+        tsconfigRootDir: __dirname,
+        sourceType: 'module',
+    },
+    plugins: ['@typescript-eslint/eslint-plugin'],
+    extends: [
+        './.eslint-config-preact-nojest.cjs',
+        'plugin:@typescript-eslint/strict-type-checked',
+        'plugin:prettier/recommended',
+    ],
+    root: true,
+    env: {
+        /*node: true,
+		jest: true,*/
+    },
+    ignorePatterns: ['.eslintrc.js'],
+    rules: {
+        '@typescript-eslint/no-confusing-void-expression': [
+            'error',
+            { ignoreArrowShorthand: true },
+        ],
+        /*'@typescript-eslint/no-invalid-void-type': [
+            'error',
+            { allowAsThisParameter: true },
+        ],
+        '@typescript-eslint/interface-name-prefix': 'off',
+        '@typescript-eslint/explicit-function-return-type': 'off',
+        '@typescript-eslint/explicit-module-boundary-types': 'off',*/
+    },
+};

.prettierrc

@@ -0,0 +1,5 @@
+{
+    "tabWidth": 4,
+    "singleQuote": true,
+    "trailingComma": "all"
+}

package.json

@@ -1,19 +1,34 @@
 {
-	"private": true,
+    "private": true,
-	"type": "module",
+    "type": "module",
-	"scripts": {
+    "scripts": {
-		"dev": "vite",
+        "dev": "vite",
-		"build": "vite build",
+        "build": "vite build",
-		"preview": "vite preview"
+        "lint": "eslint \"{src,test}/**/*.{ts,tsx}\"",
-	},
+		"typecheck": "tsc --noEmit",
-	"dependencies": {
+		"prebuild": "npm run lint && npm run typecheck",
-		"preact": "^10.13.1"
+        "preview": "vite preview"
-	},
+    },
-	"devDependencies": {
+    "dependencies": {
-		"@preact/preset-vite": "^2.5.0",
+        "preact": "^10.13.1"
-		"eslint": "^8.53.0",
+    },
-		"eslint-config-preact": "^1.3.0",
+    "devDependencies": {
-		"typescript": "^5.2.2",
+        "@babel/core": "^7.23.3",
-		"vite": "^4.3.2"
+        "@babel/eslint-parser": "^7.23.3",
-	}
+        "@babel/plugin-syntax-class-properties": "^7.12.13",
+        "@babel/plugin-syntax-decorators": "^7.23.3",
+        "@babel/plugin-syntax-jsx": "^7.23.3",
+        "@preact/preset-vite": "^2.5.0",
+        "@tsconfig/strictest": "^2.0.2",
+        "@typescript-eslint/eslint-plugin": "^6.11.0",
+        "@typescript-eslint/parser": "^6.11.0",
+        "eslint": "^8.53.0",
+        "eslint-config-prettier": "^9.0.0",
+        "eslint-plugin-compat": "^4.2.0",
+        "eslint-plugin-prettier": "^5.0.1",
+        "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "typescript": "^5.2.2",
+        "vite": "^4.3.2"
+    }
 }

src/index.tsx

@@ -1,42 +1,60 @@
 import { render } from 'preact';
+import { useState } from 'preact/hooks';
 import preactLogo from './assets/preact.svg';
 import './style.css';
 
 export function App() {
-	return (
+    const [value, setValue] = useState(0);
-		<div>
+
-			<a href="https://preactjs.com" target="_blank">
+    return (
-				<img src={preactLogo} alt="Preact logo" height="160" width="160" />
+        <div>
-			</a>
+            <a href="https://preactjs.com">
-			<h1>Get Started building Vite-powered Preact Apps </h1>
+                <img
-			<section>
+                    src={preactLogo}
-				<Resource
+                    alt="Preact logo"
-					title="Learn Preact"
+                    height="160"
-					description="If you're new to Preact, try the interactive tutorial to learn important concepts"
+                    width="160"
-					href="https://preactjs.com/tutorial"
+                />
-				/>
+            </a>
-				<Resource
+            <h1>Get Started building Vite-powered Preact Apps </h1>
-					title="Differences to React"
+            <section>
-					description="If you're coming from React, you may want to check out our docs to see where Preact differs"
+                <div>Counter: {value}</div>
-					href="https://preactjs.com/guide/v10/differences-to-react"
+                <button onClick={() => setValue(value + 1)}>Increment</button>
-				/>
+                <button onClick={() => setValue(value - 1)}>Decrement</button>
-				<Resource
+            </section>
-					title="Learn Vite"
+            <section>
-					description="To learn more about Vite and how you can customize it to fit your needs, take a look at their excellent documentation"
+                <Resource
-					href="https://vitejs.dev"
+                    title="Learn Preact"
-				/>
+                    description="If you're new to Preact, try the interactive tutorial to learn important concepts"
-			</section>
+                    href="https://preactjs.com/tutorial"
-		</div>
+                />
-	);
+                <Resource
+                    title="Differences to React"
+                    description="If you're coming from React, you may want to check out our docs to see where Preact differs"
+                    href="https://preactjs.com/guide/v10/differences-to-react"
+                />
+                <Resource
+                    title="Learn Vite"
+                    description="To learn more about Vite and how you can customize it to fit your needs, take a look at their excellent documentation"
+                    href="https://vitejs.dev"
+                />
+            </section>
+        </div>
+    );
 }
 
-function Resource(props) {
+function Resource(props: Record<'href' | 'title' | 'description', string>) {
-	return (
+    return (
-		<a href={props.href} target="_blank" class="resource">
+        <a href={props.href} class="resource">
-			<h2>{props.title}</h2>
+            <h2>{props.title}</h2>
-			<p>{props.description}</p>
+            <p>{props.description}</p>
-		</a>
+        </a>
-	);
+    );
 }
 
-render(<App />, document.getElementById('app'));
+const app = document.getElementById('app');
+if (app) {
+    render(<App />, app);
+} else {
+    console.error('Cannot find app container');
+}

tsconfig.json

@@ -1,4 +1,5 @@
 {
+	"extends": "@tsconfig/strictest/tsconfig.json",
 	"compilerOptions": {
 		"target": "ES2020",
 		"module": "ESNext",