fix(helpers): fix getComponent function

pyoner · Jul 20, 2020 · e851d09 · e851d09
1 parent 869cb47
commit e851d09
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 32 deletions.
diff --git a/packages/app/src/samples/simple.ts b/packages/app/src/samples/simple.ts
@@ -11,51 +11,57 @@ export const schema = {
       title: "First name",
       default: "Chuck",
       $svelte: {
-        props: {
-          autofocus: true
-        }
-      }
+        field: {
+          props: {
+            autofocus: true,
+          },
+        },
+      },
     },
     lastName: {
       type: "string",
-      title: "Last name"
+      title: "Last name",
     },
     age: {
       type: "integer",
-      title: "Age"
+      title: "Age",
     },
     bio: {
       type: "string",
       title: "Bio",
       $svelte: {
-        component: extra.TextareaField
-      }
+        field: {
+          component: extra.TextareaField,
+        },
+      },
     },
     password: {
       type: "string",
       title: "Password",
       minLength: 3,
       $svelte: {
-        props: {
-          type: "password"
-        }
-      }
+        field: {
+          props: {
+            type: "password",
+          },
+        },
+      },
     },
     telephone: {
       type: "string",
       title: "Telephone",
-      minLength: 10
+      minLength: 10,
     },
     random: {
       type: "number",
-      title: "Random number"
-    }
-  }
+      title: "Random number",
+    },
+  },
 };
 
 export const value = {
   lastName: "Norris",
   age: 75,
   bio: "Roundhouse kicking asses since 1940",
-  password: "noneed"
+  password: "noneed",
 };
diff --git a/packages/lib/src/components/Form.svelte b/packages/lib/src/components/Form.svelte
@@ -6,11 +6,12 @@
   import {
     defaultValue,
     normalizeValue,
-    getSchemaComponent,
-    getSchemaComponentProps,
     getComponent,
-    getComponentProps,
+    getProps,
+    getComponentFromContainer,
+    getPropsFromContainer,
   } from "../helpers";
+  import Wrap from "./helpers/Wrap.svelte";
 
   type T = any;
   export let schema: JSONSchema;
@@ -47,19 +48,22 @@
   $: if (components && validator) {
     components = {
       ...components,
-      form: [getComponent(components.form), { validator, ...getComponentProps(components.form) }],
+      form: [
+        getComponentFromContainer(components.form),
+        { validator, ...getPropsFromContainer(components.form) },
+      ],
     };
   }
 </script>
 
 <form on:submit|preventDefault={submit} on:reset|preventDefault={reset}>
   <svelte:component
-    this={getComponent(components.layout)}
-    {...getComponentProps(components.layout)}>
+    this={getComponentFromContainer(components.layout)}
+    {...getPropsFromContainer(components.layout)}>
     <div slot="fields">
       <svelte:component
-        this={getSchemaComponent(schema, components)}
-        props={getSchemaComponentProps(schema, components)}
+        this={getComponent(schema, components.fields[schema.type], schema.type)}
+        props={getProps(schema, components.fields[schema.type], schema.type)}
         {components}
         {schema}
         bind:value

diff --git a/packages/lib/src/components/fields/ArrayField.svelte b/packages/lib/src/components/fields/ArrayField.svelte
@@ -65,8 +65,8 @@
       {#each value as v, i (i)}
         <div class="item">
           <svelte:component
-            this={getComponent(schema.items, components.fields[schema.items.type], schema.items.type)}
-            props={getProps(schema.items, components.fields[schema.items.type], schema.items.type)}
+            this={getComponent(schema.items, components.fields[schema.items.type], 'field')}
+            props={getProps(schema.items, components.fields[schema.items.type], 'field')}
             {components}
             schema={schema.items}
             bind:value={v}

diff --git a/packages/lib/src/components/fields/ObjectField.svelte b/packages/lib/src/components/fields/ObjectField.svelte
@@ -20,8 +20,8 @@
   <Wrap {schema} {errors} component={components.wrapper}>
     {#each Object.entries(schema.properties) as [key, propSchema] (key)}
       <svelte:component
-        this={getComponent(propSchema, components.fields[propSchema.type], propSchema.type)}
-        props={getProps(propSchema, components.fields[propSchema.type], propSchema.type)}
+        this={getComponent(propSchema, components.fields[propSchema.type], 'field')}
+        props={getProps(propSchema, components.fields[propSchema.type], 'field')}
         {components}
         schema={propSchema}
         bind:value={value[key]}

diff --git a/packages/lib/src/helpers.ts b/packages/lib/src/helpers.ts
@@ -1,4 +1,4 @@
-import { isObject, isFunction } from "is-what";
+import { isObject } from "is-what";
 import { SvelteComponent } from "svelte";
 
 import type { JSONObject, JSONSchema } from "@pyoner/svelte-form-common";
@@ -13,6 +13,7 @@ import type {
   FuncProps,
   FuncComponent,
 } from "./types";
+import { SvelteComponentDev } from "svelte/internal";
 
 export function createProps<T extends any, E extends Errors = Error[]>(
   value: T | null = null
@@ -126,6 +127,10 @@ export function getProps(
   return getPropsFromContainer(container);
 }
 
+export function isSvelteComponent(obj: any): obj is typeof SvelteComponentDev {
+  return Object.getPrototypeOf(obj) === SvelteComponentDev;
+}
+
 export function getComponent(
   schema: SvelteSchema,
   container: SvelteComponentProps,
@@ -135,8 +140,8 @@ export function getComponent(
   const component = getComponentFromSchema(schema, key);
 
   if (component) {
-    if (isFunction(component)) {
-      return (component as FuncComponent)(defaultComponent);
+    if (!isSvelteComponent(component)) {
+      return component(defaultComponent);
     }
     return component;
   }