Merge pull request #38 from andrewiggins/jsconfig

Add jsconfig.json files for each workspace
andrewiggins · Oct 16, 2023 · 5986f72 · 5986f72
2 parents 5cf1bf3 + f0341c5
commit 5986f72
Show file tree

Hide file tree

Showing 58 changed files with 1,313 additions and 2,709 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -24,6 +24,7 @@ jobs:
         run: npm run build
       - name: test
         run: npm test
+      - run: npm run tsc
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:

diff --git a/frameworks/bundleHelpers.js b/frameworks/bundleHelpers.js
@@ -1,7 +1,7 @@
 const path = require("path");
 const { readdirSync, existsSync } = require("fs");
 const nodeResolve = require("@rollup/plugin-node-resolve").default;
-const terser = require("@rollup/plugin-terser");
+const { default: terser } = require("@rollup/plugin-terser");
 const visualizer = require("rollup-plugin-visualizer").default;
 
 const frameworkOutput = (...args) =>

diff --git a/frameworks/lit-html/jsconfig.json b/frameworks/lit-html/jsconfig.json
@@ -0,0 +1,4 @@
+{
+	"extends": "../../jsconfig.json",
+	"exclude": ["node_modules", "dist"]
+}
diff --git a/frameworks/lit-html/package.json b/frameworks/lit-html/package.json
@@ -5,7 +5,8 @@
   "license": "MIT",
   "scripts": {
     "build": "rollup -c rollup.config.js",
-    "watch": "rollup -c rollup.config.js --watch"
+    "watch": "rollup -c rollup.config.js --watch",
+    "tsc": "tsc -p ./jsconfig.json --noEmit"
   },
   "dependencies": {
     "lit-html": "^1.3.0"

diff --git a/frameworks/lit-html/src/7GUIs-flight-booker/index.js b/frameworks/lit-html/src/7GUIs-flight-booker/index.js
@@ -86,7 +86,7 @@ function update(tripType, departing, returning) {
 		returningError = "Returning date must be on or after departing date.";
 	}
 
-	const isBookDisabled = departingError || returningError;
+	const isBookDisabled = Boolean(departingError || returningError);
 
 	const setTripType = newTripType => update(newTripType, departing, returning);
 	const setDeparting = newDate => update(tripType, newDate, returning);

diff --git a/frameworks/lit-html/src/7GUIs-temp-converter/index.js b/frameworks/lit-html/src/7GUIs-temp-converter/index.js
@@ -10,14 +10,14 @@ const TempConverter = (c, f, setBothFromC, setBothFromF) => html`
 const container = document.getElementById("app");
 
 function update(c, f) {
-	/** @param {Event} e */
+	/** @param {Event & {target: HTMLInputElement}} e */
 	function setBothFromC(e) {
 		c = e.target.value;
 		f = +(32 + (9 / 5) * c).toFixed(1);
 		update(c, f);
 	}
 
-	/** @param {Event} e */
+	/** @param {Event & {target: HTMLInputElement}} e */
 	function setBothFromF(e) {
 		f = e.target.value;
 		c = +((5 / 9) * (f - 32)).toFixed(1);

diff --git a/frameworks/preact-hooks/jsconfig.json b/frameworks/preact-hooks/jsconfig.json
@@ -0,0 +1,10 @@
+{
+	"extends": "../../jsconfig.json",
+	"compilerOptions": {
+		"jsx": "react",
+		"jsxFactory": "createElement",
+		"jsxFragmentFactory": "Fragment"
+	},
+	"exclude": ["node_modules", "dist"],
+	"include": ["./**/*"]
+}
diff --git a/frameworks/preact-hooks/package.json b/frameworks/preact-hooks/package.json
@@ -5,7 +5,8 @@
   "license": "MIT",
   "scripts": {
     "build": "rollup -c rollup.config.js",
-    "watch": "rollup -c rollup.config.js --watch"
+    "watch": "rollup -c rollup.config.js --watch",
+    "tsc": "tsc -p jsconfig.json --noEmit"
   },
   "dependencies": {
     "preact": "^10.5.7"

diff --git a/frameworks/preact-hooks/src/7GUIs-flight-booker/DateEntry.jsx b/frameworks/preact-hooks/src/7GUIs-flight-booker/DateEntry.jsx
@@ -18,7 +18,7 @@ export function DateEntry({
 				class="form-input"
 				type="text"
 				value={date}
-				onInput={e => setDate(e.target.value)}
+				onInput={e => setDate(e.currentTarget.value)}
 				disabled={disabled}
 			/>
 			{errorMsg && <p class="form-input-hint">{errorMsg}</p>}

diff --git a/frameworks/preact-hooks/src/7GUIs-flight-booker/TripType.jsx b/frameworks/preact-hooks/src/7GUIs-flight-booker/TripType.jsx
@@ -13,7 +13,7 @@ export function TripType({ tripType, setTripType }) {
 				id="trip-type"
 				class="form-select"
 				value={tripType}
-				onInput={e => setTripType(e.target.value)}
+				onInput={e => setTripType(e.currentTarget.value)}
 			>
 				<option value={oneWayFlight}>one-way flight</option>
 				<option value={returnFlight}>return flight</option>

diff --git a/frameworks/preact-hooks/src/7GUIs-temp-converter/index.jsx b/frameworks/preact-hooks/src/7GUIs-temp-converter/index.jsx
@@ -19,13 +19,13 @@ function App() {
 		<>
 			<input
 				value={c}
-				onInput={e => setBothFromC(e.target.value)}
+				onInput={e => setBothFromC(e.currentTarget.value)}
 				type="number"
 			/>{" "}
 			°c ={" "}
 			<input
 				value={f}
-				onInput={e => setBothFromF(e.target.value)}
+				onInput={e => setBothFromF(e.currentTarget.value)}
 				type="number"
 			/>{" "}
 			°f

diff --git a/frameworks/preact-hooks/src/7GUIs-timer/index.jsx b/frameworks/preact-hooks/src/7GUIs-timer/index.jsx
@@ -37,7 +37,7 @@ function App() {
 					min="1"
 					max="20000"
 					value={duration}
-					onInput={e => setDuration(e.target.value)}
+					onInput={e => setDuration(e.currentTarget.valueAsNumber)}
 				/>
 			</label>
 			<div>

diff --git a/frameworks/preact/jsconfig.json b/frameworks/preact/jsconfig.json
@@ -0,0 +1,10 @@
+{
+	"extends": "../../jsconfig.json",
+	"compilerOptions": {
+		"jsx": "react",
+		"jsxFactory": "createElement",
+		"jsxFragmentFactory": "Fragment"
+	},
+	"exclude": ["node_modules", "dist"],
+	"include": ["./**/*"]
+}
diff --git a/frameworks/preact/package.json b/frameworks/preact/package.json
@@ -5,7 +5,8 @@
   "license": "MIT",
   "scripts": {
     "build": "rollup -c rollup.config.js",
-    "watch": "rollup -c rollup.config.js --watch"
+    "watch": "rollup -c rollup.config.js --watch",
+    "tsc": "tsc -p jsconfig.json --noEmit"
   },
   "dependencies": {
     "preact": "^10.5.7"

diff --git a/frameworks/preact/src/7GUIs-CRUD/FilterInput.jsx b/frameworks/preact/src/7GUIs-CRUD/FilterInput.jsx
@@ -1,7 +1,7 @@
 import { createElement } from "preact";
 
 /**
- * @param {{ value: string; onInput: (e: InputEvent) => void; }} props
+ * @param {{ value: string; onInput: preact.JSX.GenericEventHandler<HTMLInputElement>; }} props
  */
 export function FilterInput({ value, onInput }) {
 	return (

diff --git a/frameworks/preact/src/7GUIs-CRUD/NameInput.jsx b/frameworks/preact/src/7GUIs-CRUD/NameInput.jsx
@@ -1,7 +1,7 @@
 import { createElement } from "preact";
 
 /**
- * @param {{ id: string; value: string; onInput: (e: InputEvent) => void; label: string; required?: boolean; }} props
+ * @param {{ id: string; value: string; onInput: preact.JSX.GenericEventHandler<HTMLInputElement>; label: string; required?: boolean; }} props
  */
 export function NameInput({ id, value, onInput, label, required = false }) {
 	// TODO: Show error message if required == true but value == ""

diff --git a/frameworks/preact/src/7GUIs-CRUD/index.jsx b/frameworks/preact/src/7GUIs-CRUD/index.jsx
@@ -12,7 +12,7 @@ function Loading() {
 }
 
 /**
- * @typedef {{ id: number; name: string; surname: string; }} Person
+ * @typedef {import('lib/crud').Person} Person
  * @typedef { "initial" | "create" | "update" | "delete" | null } LoadingState;
  * @typedef {{ filter: string; name: string; surname: string; selectedPersonId: number; persons: Person[]; loading: LoadingState; }} State
  * @returns {State}

diff --git a/frameworks/preact/src/7GUIs-CRUD/util.js b/frameworks/preact/src/7GUIs-CRUD/util.js
@@ -1,10 +1,11 @@
 /**
- * @param {import('./index').Person} person
+ * @param {import('lib/crud').Person} person
  */
 export function getDisplayName(person) {
 	return `${person.surname}, ${person.name}`;
 }
 
+/** @type {import('lib/crud').Person} */
 export const EMPTY_PERSON = Object.freeze({
 	id: null,
 	name: "",

diff --git a/frameworks/preact/src/7GUIs-flight-booker/DateEntry.jsx b/frameworks/preact/src/7GUIs-flight-booker/DateEntry.jsx
@@ -18,7 +18,7 @@ export function DateEntry({
 				class="form-input"
 				type="text"
 				value={date}
-				onInput={e => setDate(e.target.value)}
+				onInput={e => setDate(e.currentTarget.value)}
 				disabled={disabled}
 			/>
 			{errorMsg && <p class="form-input-hint">{errorMsg}</p>}

diff --git a/frameworks/preact/src/7GUIs-flight-booker/TripType.jsx b/frameworks/preact/src/7GUIs-flight-booker/TripType.jsx
@@ -13,7 +13,7 @@ export function TripType({ tripType, setTripType }) {
 				id="trip-type"
 				class="form-select"
 				value={tripType}
-				onInput={e => setTripType(e.target.value)}
+				onInput={e => setTripType(e.currentTarget.value)}
 			>
 				<option value={oneWayFlight}>one-way flight</option>
 				<option value={returnFlight}>return flight</option>

diff --git a/frameworks/preact/src/7GUIs-temp-converter/index.jsx b/frameworks/preact/src/7GUIs-temp-converter/index.jsx
@@ -25,13 +25,13 @@ class App extends Component {
 			<>
 				<input
 					value={state.c}
-					onInput={e => this.setBothFromC(e.target.value)}
+					onInput={e => this.setBothFromC(e.currentTarget.value)}
 					type="number"
 				/>{" "}
 				°c ={" "}
 				<input
 					value={state.f}
-					onInput={e => this.setBothFromF(e.target.value)}
+					onInput={e => this.setBothFromF(e.currentTarget.value)}
 					type="number"
 				/>{" "}
 				°f

diff --git a/frameworks/preact/src/7GUIs-timer/index.jsx b/frameworks/preact/src/7GUIs-timer/index.jsx
@@ -55,7 +55,7 @@ class App extends Component {
 						min="1"
 						max="20000"
 						value={state.duration}
-						onInput={e => this.setState({ duration: e.target.value })}
+						onInput={e => this.setState({ duration: e.currentTarget.value })}
 					/>
 				</label>
 				<div>

diff --git a/frameworks/react-hooks/jsconfig.json b/frameworks/react-hooks/jsconfig.json
@@ -0,0 +1,10 @@
+{
+	"extends": "../../jsconfig.json",
+	"compilerOptions": {
+		"jsx": "react",
+		"jsxFactory": "React.createElement",
+		"jsxFragmentFactory": "React.Fragment"
+	},
+	"exclude": ["node_modules", "dist"],
+	"include": ["./**/*"]
+}
diff --git a/frameworks/react-hooks/package.json b/frameworks/react-hooks/package.json
@@ -5,7 +5,8 @@
   "license": "MIT",
   "scripts": {
     "build": "rollup -c rollup.config.js",
-    "watch": "rollup -c rollup.config.js --watch"
+    "watch": "rollup -c rollup.config.js --watch",
+    "tsc": "tsc -p jsconfig.json --noEmit"
   },
   "dependencies": {
     "react": "^17.0.1",
@@ -17,6 +18,8 @@
     "@babel/preset-react": "^7.12.10",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "25.0.0",
-    "@rollup/plugin-replace": "5.0.0"
+    "@rollup/plugin-replace": "5.0.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13"
   }
 }
diff --git a/frameworks/react-hooks/src/7GUIs-temp-converter/index.jsx b/frameworks/react-hooks/src/7GUIs-temp-converter/index.jsx
@@ -5,14 +5,25 @@ function App() {
 	const [f, setF] = useState("");
 	const [c, setC] = useState("");
 
+	// React doesn't support `valueAsNumber` on controlled inputs, so we have to
+	// manually do some formatting here.
+	//
+	// First format to have one fraction digit. Then convert back to number so
+	// we drop any unnecessary ".0" from the end of whole numbers. Finally
+	// convert back to string since that is the type our state expects. Our
+	// state is a string so the inputs can start with an empty state instead of
+	// a number.
+
 	function setBothFromC(value) {
+		const newC = +(32 + (9 / 5) * value).toFixed(1);
 		setC(value);
-		setF(+(32 + (9 / 5) * value).toFixed(1));
+		setF("" + newC);
 	}
 
 	function setBothFromF(value) {
+		const newF = +((5 / 9) * (value - 32)).toFixed(1);
 		setF(value);
-		setC(+((5 / 9) * (value - 32)).toFixed(1));
+		setC("" + newF);
 	}
 
 	return (

diff --git a/frameworks/react-hooks/src/7GUIs-timer/index.jsx b/frameworks/react-hooks/src/7GUIs-timer/index.jsx
@@ -43,7 +43,7 @@ function App() {
 					min="1"
 					max="20000"
 					value={duration}
-					onChange={e => setDuration(e.target.value)}
+					onChange={e => setDuration(e.currentTarget.valueAsNumber)}
 				/>
 			</label>
 			<div>

diff --git a/frameworks/react/jsconfig.json b/frameworks/react/jsconfig.json
@@ -0,0 +1,10 @@
+{
+	"extends": "../../jsconfig.json",
+	"compilerOptions": {
+		"jsx": "react",
+		"jsxFactory": "React.createElement",
+		"jsxFragmentFactory": "React.Fragment"
+	},
+	"exclude": ["node_modules", "dist"],
+	"include": ["./**/*"]
+}
diff --git a/frameworks/react/package.json b/frameworks/react/package.json
@@ -5,7 +5,8 @@
   "license": "MIT",
   "scripts": {
     "build": "rollup -c rollup.config.js",
-    "watch": "rollup -c rollup.config.js --watch"
+    "watch": "rollup -c rollup.config.js --watch",
+    "tsc": "tsc -p jsconfig.json --noEmit"
   },
   "dependencies": {
     "react": "^17.0.1",
@@ -17,6 +18,8 @@
     "@babel/preset-react": "^7.12.10",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "25.0.0",
-    "@rollup/plugin-replace": "5.0.0"
+    "@rollup/plugin-replace": "5.0.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13"
   }
 }
diff --git a/frameworks/react/src/7GUIs-temp-converter/index.jsx b/frameworks/react/src/7GUIs-temp-converter/index.jsx
@@ -26,13 +26,13 @@ class App extends React.Component {
 			<>
 				<input
 					value={this.state.c}
-					onInput={e => this.setBothFromC(e.target.value)}
+					onInput={e => this.setBothFromC(e.currentTarget.value)}
 					type="number"
 				/>{" "}
 				°c ={" "}
 				<input
 					value={this.state.f}
-					onInput={e => this.setBothFromF(e.target.value)}
+					onInput={e => this.setBothFromF(e.currentTarget.value)}
 					type="number"
 				/>{" "}
 				°f

diff --git a/frameworks/svelte/jsconfig.json b/frameworks/svelte/jsconfig.json
@@ -0,0 +1,4 @@
+{
+	"extends": "../../jsconfig.json",
+	"exclude": ["node_modules", "dist"]
+}
diff --git a/frameworks/svelte/package.json b/frameworks/svelte/package.json
@@ -5,7 +5,8 @@
   "license": "MIT",
   "scripts": {
     "build": "rollup -c rollup.config.js",
-    "watch": "rollup -c rollup.config.js --watch"
+    "watch": "rollup -c rollup.config.js --watch",
+    "tsc": "tsc -p ./jsconfig.json --noEmit"
   },
   "dependencies": {
     "svelte": "^3.31.0"

diff --git a/frameworks/svelte/rollup.config.js b/frameworks/svelte/rollup.config.js
@@ -4,12 +4,13 @@ const babel = require("@rollup/plugin-babel").default;
 const { generateConfigs } = require("../bundleHelpers");
 
 const plugins = () => [
+	// @ts-expect-error Bad mixing of COMMONJS and ESM
 	svelte({
 		extensions: [".html"]
 	}),
 	babel({
 		babelHelpers: "bundled",
-		extensions: DEFAULT_EXTENSIONS.concat([".html"])
+		extensions: [...DEFAULT_EXTENSIONS, ".html", ".svelte"]
 	})
 ];
 

diff --git a/frameworks/svelte/src/7GUIs-counter/Counter.html b/frameworks/svelte/src/7GUIs-counter/Counter.html
@@ -5,7 +5,7 @@
 <button
 	class="btn badge"
 	data-badge="{count}"
-	style="margin-top: 0.5rem;"
+	style="margin-top: 0.5rem"
 	on:click="{() => count += 1}"
 >
 	count: {count}

diff --git a/frameworks/svelte/svelte.d.ts b/frameworks/svelte/svelte.d.ts
@@ -0,0 +1,5 @@
+declare module "*.html" {
+	import { ComponentType } from "svelte";
+	const App: ComponentType;
+	export default App;
+}
diff --git a/frameworks/vue/jsconfig.json b/frameworks/vue/jsconfig.json
@@ -0,0 +1,4 @@
+{
+	"extends": "../../jsconfig.json",
+	"exclude": ["node_modules", "dist"]
+}