refactor: use valibot for type checking

README.md

@@ -6,12 +6,13 @@ Edmonton, Alberta)
 Built with [Fresh](https://fresh.deno.dev/) and [Deno](https://deno.land/)
 
 ```
-deno task start
+deno task dev
 ```
 
 Public data comes from City of Edmonton's open data portal.
 
 - `https://data.edmonton.ca/City-Administration/Property-Assessment-Data-Historical-/qi6a-xuwt`
+- `https://data.edmonton.ca/City-Administration/Property-Assessment-Data-Current-Calendar-Year-/q7d6-ambg`
 
 ### Bugs & features
 

deno.json

@@ -1,12 +1,13 @@
 {
   "tasks": {
-    "dev": "deno run -A --watch=static/,routes/ dev.ts",
+    "dev": "deno run -A --watch=sr/static/,src/routes/ src/dev.ts",
     "build": "deno run -A dev.ts build",
     "start": "deno run -A main.ts",
     "update": "deno run -A -r jsr:@fresh/update ."
   },
   "imports": {
     "$fresh/": "https://deno.land/x/[email protected]/",
+    "@valibot/valibot": "jsr:@valibot/valibot@^0.42.1",
     "chartjs": "https://esm.sh/[email protected]",
     "preact": "npm:preact@^10.24.1",
     "tailwindcss": "npm:tailwindcss@^3.4.14"
@@ -26,4 +27,4 @@
   "exclude": [
     "**/_fresh/*"
   ]
-}
+}

src/dev.ts

@@ -0,0 +1,4 @@
+import dev from "$fresh/dev.ts";
+import config from "../src/fresh.config.ts";
+
+await dev(import.meta.url, "./main.ts", config);

fresh.config.ts → src/fresh.config.ts

@@ -1,10 +1,10 @@
 import { defineConfig } from "$fresh/server.ts";
 import tailwind from "$fresh/plugins/tailwind.ts";
-import googleAnalyticsPlugin from "./plugins/google_analytics.ts";
+import googleAnalyticsPlugin from "./lib/plugins/google_analytics.ts";
 
 export default defineConfig({
   plugins: [
     tailwind(),
     googleAnalyticsPlugin("G-LG7XQ7H5RG"),
   ],
-});
+});

fresh.gen.ts → src/fresh.gen.ts

@@ -4,8 +4,11 @@
 
 import * as $_id_ from "./routes/[id].tsx";
 import * as $_app from "./routes/_app.tsx";
+import * as $_layout from "./routes/_layout.tsx";
 import * as $index from "./routes/index.tsx";
-import * as $address_search from "./islands/address_search.tsx";
+import * as $address_search_address_search from "./islands/address_search/address_search.tsx";
+import * as $address_search_search_input from "./islands/address_search/search_input.tsx";
+import * as $address_search_search_options from "./islands/address_search/search_options.tsx";
 import * as $assessment_chart from "./islands/assessment_chart.tsx";
 import * as $google_map from "./islands/google_map.tsx";
 import type { Manifest } from "$fresh/server.ts";
@@ -14,10 +17,15 @@ const manifest = {
   routes: {
     "./routes/[id].tsx": $_id_,
     "./routes/_app.tsx": $_app,
+    "./routes/_layout.tsx": $_layout,
     "./routes/index.tsx": $index,
   },
   islands: {
-    "./islands/address_search.tsx": $address_search,
+    "./islands/address_search/address_search.tsx":
+      $address_search_address_search,
+    "./islands/address_search/search_input.tsx": $address_search_search_input,
+    "./islands/address_search/search_options.tsx":
+      $address_search_search_options,
     "./islands/assessment_chart.tsx": $assessment_chart,
     "./islands/google_map.tsx": $google_map,
   },

islands/address_search.tsx → src/islands/address_search/address_search.tsx

@@ -1,9 +1,9 @@
 import { useState } from "preact/hooks";
-import SearchInput from "../components/search_input.tsx";
-import SearchOptions from "../components/search_options.tsx";
-import { useSearchResults } from "../src/use_search_results.ts";
+import { SearchInput } from "./search_input.tsx";
+import { SearchOptions } from "./search_options.tsx";
+import { useSearchResults } from "../../lib/use_search_results.ts";
 
-export default function AddressSearch() {
+export function AddressSearch() {
   const [search, setSearch] = useState<string>();
   const [searchDelay, setSearchDelay] = useState<number>(Number.NaN);
   const [loading, setLoading] = useState<boolean>(false);
@@ -54,7 +54,7 @@ export default function AddressSearch() {
 
         {!loading && results && results?.length > 0 &&
           (
-            <div class="mt-4" role="results">
+            <div class="mt-4">
               <SearchOptions searchResults={results} />
             </div>
           )}

components/search_input.tsx → src/islands/address_search/search_input.tsx

@@ -1,7 +1,7 @@
 import type { JSX } from "preact";
-import SearchIcon from "./icons/search_icon.tsx";
+import SearchIcon from "../../components/icons/search_icon.tsx";
 
-export default function SearchInput(
+export function SearchInput(
   props: JSX.HTMLAttributes<HTMLInputElement>,
 ) {
   return (

components/search_options.tsx → src/islands/address_search/search_options.tsx

@@ -1,7 +1,7 @@
-import { formatAddress } from "../src/format_address.ts";
-import type { PropertyInfo } from "../src/property_info.model.ts";
+import { formatAddress } from "../../lib/format_address.ts";
+import type { PropertyInfo } from "../../lib/data.edmonton.ca/property_info.type.ts";
 
-export default function SearchOptions(
+export function SearchOptions(
   { searchResults: properties }: { searchResults: PropertyInfo[] },
 ) {
   return (

islands/assessment_chart.tsx → src/islands/assessment_chart.tsx

@@ -5,10 +5,10 @@ import {
   type ChartOptions,
   registerables,
 } from "chartjs";
-import type { PropertyHistory } from "../src/property_history.model.ts";
+import type { Property } from "../lib/data.edmonton.ca/property.type.ts";
 
 export default function AssessmentChart(
-  props: { histories: PropertyHistory[] },
+  props: { histories?: Partial<Property>[] },
 ) {
   const canvas = useRef<HTMLCanvasElement>(null);
 
@@ -32,22 +32,18 @@ export default function AssessmentChart(
           {
             weight: 100,
             label: "assessment",
-            data: props.histories.map(asPoints),
+            data: props.histories?.map((history) => ({
+              x: history.assessment_year?.toString(),
+              y: history.assessed_value,
+            })),
             clip: 20,
             pointRadius: 4,
             cubicInterpolationMode: "monotone",
-          } as ChartDataset,
+          } as ChartDataset<"line", { x: string; y: number }[]>,
         ],
       },
     });
   }, [props.histories]);
 
   return <canvas ref={canvas} />;
 }
-
-function asPoints(history: PropertyHistory) {
-  return {
-    x: history.assessment_year,
-    y: history.assessed_value,
-  };
-}

src/lib/data.edmonton.ca/property.type.ts

@@ -0,0 +1,33 @@
+import * as v from "@valibot/valibot";
+
+/** Historical Property Data
+ * https://data.edmonton.ca/City-Administration/Property-Assessment-Data-Historical-/qi6a-xuwt
+ */
+export const PropertySchema = v.object({
+  account_number: v.string(),
+  assessment_year: v.pipe(v.string(), v.transform(Number)),
+  suite: v.string(),
+  house_number: v.string(),
+  street_name: v.string(),
+  legal_description: v.string(),
+  latitude: v.pipe(v.string(), v.transform(Number)),
+  longitude: v.pipe(v.string(), v.transform(Number)),
+  point_location: v.object({
+    type: v.string("Point"),
+    coordinates: v.tuple([v.number(), v.number()]),
+  }),
+  neighbourhood_name: v.string(),
+  year_built: v.pipe(v.string(), v.transform(Number)),
+  garage: v.union([v.literal("Y"), v.literal("N")]),
+  zoning: v.string(),
+  lot_size: v.pipe(v.string(), v.transform(Number)),
+  assessed_value: v.pipe(v.string(), v.transform(Number)),
+  mill_class_1: v.string(),
+  tax_class_pct_1: v.string(),
+  mill_class_2: v.string(),
+  tax_class_pct_2: v.string(),
+  mill_class_3: v.string(),
+  tax_class_pct_3: v.string(),
+});
+
+export type Property = v.InferOutput<typeof PropertySchema>;

src/property_info.model.ts → src/lib/data.edmonton.ca/property_info.type.ts

@@ -2,7 +2,7 @@
  * Property Information Current Calendar Year
  * https://data.edmonton.ca/City-Administration/Property-Information-Current-Calendar-Year-/dkk9-cj3x
  */
-export interface PropertyInfo {
+export type PropertyInfo = {
   account_number: string;
   suite: string;
   house_number: string;
@@ -18,4 +18,4 @@ export interface PropertyInfo {
   ward: string;
   latitude: number;
   longitude: number;
-}
+};

src/soda_client.ts → src/lib/data.edmonton.ca/soda_client.ts

@@ -9,9 +9,9 @@ interface SoqlComponents extends Record<string, string> {
   $limit: string;
 }
 
-export interface SodaOptions {
+export type SodaOptions = {
   datasetId: string;
-}
+};
 
 export const and = (...clause: string[]) => `AND (${clause.join(" ")})`;
 
@@ -84,12 +84,9 @@ class Query {
     return this;
   }
 
-  /**
-   * @returns https://data.edmonton.ca/resource/qi6a-xuwt.json
-   */
   getUrl() {
     const dataSite = this._consumer.dataSite;
-    const url = new URL(`${dataSite}/resource/${this._datasetId}.json`);
+    const url = new URL(`/resource/${this._datasetId}.json`, dataSite);
     url.search = this.buildSoqlQuery().toString();
     return url;
   }

src/format_address.ts → src/lib/format_address.ts

@@ -1,7 +1,7 @@
-import { PropertyHistory } from "./property_history.model.ts";
-import { PropertyInfo } from "./property_info.model.ts";
+import type { Property } from "./data.edmonton.ca/property.type.ts";
+import type { PropertyInfo } from "./data.edmonton.ca/property_info.type.ts";
 
-export function formatAddress(property: PropertyInfo | PropertyHistory) {
+export function formatAddress(property: PropertyInfo | Property) {
   let address = "";
   if (property.suite) {
     address += `#${property.suite} `;

plugins/google_analytics.ts → src/lib/plugins/google_analytics.ts

@@ -1,4 +1,4 @@
-import { Plugin } from "$fresh/server.ts";
+import type { Plugin } from "$fresh/server.ts";
 
 export default function googleAnalyticsPlugin(tag: string): Plugin {
   const googleAnalyticsScript = `data:application/javascript,