Infer schema type from generator

Author: patrickgwsmith

app/model/schemas.ts

@@ -1,20 +1,43 @@
-export const identifiers = {
+export const types = {
   string: "string",
   number: "number",
+  array: "array",
 } as const;
 
-export const read = {
-  string: (name: string) => ({
-    type: identifiers.string,
+function readString(name: string) {
+  return {
+    type: types.string,
+    name,
+  };
+}
+
+function readNumber(name: string) {
+  return {
+    type: types.number,
     name,
-  }),
-  number: (name: string) => ({
-    type: identifiers.number,
+  };
+}
+
+function readArray(name: string, itemType: typeof types.string | typeof types.number) {
+  return {
+    type: types.array,
     name,
-  }),
+    itemType,
+  };
+}
+
+export const read = {
+  string: readString,
+  number: readNumber,
+  array: readArray,
 };
 
-export type SchemaMessage = ReturnType<typeof read.string | typeof read.number>;
+export type SchemaMessagePrimitive = ReturnType<
+  typeof readString | typeof readNumber
+>;
+export type SchemaMessage = ReturnType<
+  typeof readString | typeof readNumber | typeof readArray
+>;
 export type SchemaReply = string | number;
 // export type SchemaGenerator<Result> = Generator<ReturnType<typeof read.string>, Result, string> | Generator<ReturnType<typeof read.number>, Result, number>;
 export type SchemaGenerator<Result> = Generator<
@@ -24,7 +47,7 @@ export type SchemaGenerator<Result> = Generator<
 >;
 
 export function parseJSON<Result>(
-  source: Record<string, any>,
+  source: unknown,
   generator: () => SchemaGenerator<Result>
 ) {
   const gen = generator();
@@ -38,13 +61,21 @@ export function parseJSON<Result>(
 
     reply = undefined;
 
-    if (result.value.type === identifiers.string) {
-      if (typeof source[result.value.name] === "string") {
-        reply = source[result.value.name];
-      }
-    } else if (result.value.type === identifiers.number) {
-      if (typeof source[result.value.name] === "number") {
-        reply = source[result.value.name];
+    if (source instanceof Object && result.value.name in source) {
+      if (result.value.type === types.string) {
+        if (typeof (source as any)[result.value.name] === "string") {
+          reply = (source as any)[result.value.name];
+        }
+      } else if (result.value.type === types.number) {
+        if (typeof (source as any)[result.value.name] === "number") {
+          reply = (source as any)[result.value.name];
+        }
+      } else if (result.value.type === types.array) {
+        const itemType = result.value.itemType;
+        if (Array.isArray((source as any)[result.value.name])) {
+          const sanitizedItems = (source as any)[result.value.name].map((x: any) => typeof x === itemType ? x : null);
+          reply = sanitizedItems;
+        }
       }
     }
   }
@@ -65,11 +96,11 @@ export function parseFormData<Result>(
 
     reply = undefined;
 
-    if (result.value.type === identifiers.string) {
+    if (result.value.type === types.string) {
       if (source.has(result.value.name)) {
         reply = source.get(result.value.name) as string;
       }
-    } else if (result.value.type === identifiers.number) {
+    } else if (result.value.type === types.number) {
       if (source.has(result.value.name)) {
         reply = parseFloat(source.get(result.value.name) as string);
       }

app/routes/make/schema.tsx

@@ -14,10 +14,12 @@ import {
   parseJSON,
   read,
   SchemaGenerator,
+  types,
 } from "../../model/schemas";
 import { formatJavaScript } from "../../view/codeFormatting";
-import { Await } from "../../types/helpers";
+import { Await, FinalResult } from "../../types/helpers";
 import { fetchController, FetchGenerator, getJSON } from "../../model/fetching";
+import { useMemo } from "react";
 
 export let meta: MetaFunction = () => {
   return {
@@ -109,35 +111,41 @@ interface SwapiPersonData {
   name: string;
   height: string;
   mass: string;
+  films: string[];
 }
 function* SwapiPersonSchema(): SchemaGenerator<SwapiPersonData> {
   const name: string = yield read.string("name");
   const height: string = yield read.string("height");
   const mass: string = yield read.string("mass");
+  const films: string[] = yield read.array("films", types.string);
 
   return {
     name,
     height,
     mass,
+    films
   };
 }
-function* SwapiPersonResource(): FetchGenerator<SwapiPersonData> {
-  const rawData = yield getJSON(new URL(`https://swapi.py4e.com/api/people/1`));
+function* SwapiPersonResource() {
+  const rawData: unknown = yield getJSON(new URL(`https://swapi.py4e.com/api/people/1`));
 
   const parsedData = parseJSON(rawData, function* Schema() {
     const name: string = yield read.string("name");
     const height: string = yield read.string("height");
     const mass: string = yield read.string("mass");
+    const films: string[] = yield read.array("films", types.string);
 
     return {
       name,
       height,
-      mass: mass,
+      mass,
+      films
     };
   });
 
   return parsedData;
 }
+type SwapiPersonData2 = FinalResult<ReturnType<typeof SwapiPersonResource>>
 
 export default function MakeRenderer() {
   const data: Await<ReturnType<typeof loader>> = useRouteData();
@@ -167,7 +175,10 @@ export default function MakeRenderer() {
   const personData =
     personDataRaw != null ? parseJSON(personDataRaw, SwapiPersonSchema) : null;
 
-  const [personPromise] = useState(() => fetchController(new URL('https://swapi.py4e.com/'), SwapiPersonResource));
+  const personPromise = useMemo(
+    () => fetchController(new URL("https://swapi.py4e.com/"), SwapiPersonResource),
+    []
+  );
   const personData2 = usePromise(personPromise);
 
   return (

app/types/helpers.ts

@@ -1 +1,3 @@
 export type Await<Awaitable> = Awaitable extends Promise<infer Value> ? Value : Awaitable;
+
+export type FinalResult<Type> = Type extends Generator<any, infer Result> ? Result : Type;