feat(wrap): replace wrapper boilerplate code

#27
pyoner · Jul 20, 2020 · 869cb47 · 869cb47
1 parent 6421818
commit 869cb47
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 86 deletions.
diff --git a/packages/lib/src/components/fields/ArrayField.svelte b/packages/lib/src/components/fields/ArrayField.svelte
@@ -2,12 +2,13 @@
   import type { ErrorRecord } from "@pyoner/svelte-form-common";
   import {
     createProps,
-    getSchemaComponent,
-    getSchemaComponentProps,
     defaultValue,
     getComponent,
-    getComponentProps,
+    getProps,
+    getComponentFromContainer,
+    getPropsFromContainer,
   } from "../../helpers";
+  import Wrap from "../helpers/Wrap.svelte";
 
   type T = Array<any>;
   const p = createProps<T, ErrorRecord>([]);
@@ -59,16 +60,13 @@
 </script>
 
 {#if components && schema && schema.items && schema.items.type}
-  <svelte:component
-    this={getComponent(components.wrapper)}
-    {...getComponentProps(components.wrapper)}
-    {schema}>
+  <Wrap {schema} {errors} component={components.wrapper}>
     {#if value}
       {#each value as v, i (i)}
         <div class="item">
           <svelte:component
-            this={getSchemaComponent(schema.items, components)}
-            props={getSchemaComponentProps(schema.items, components)}
+            this={getComponent(schema.items, components.fields[schema.items.type], schema.items.type)}
+            props={getProps(schema.items, components.fields[schema.items.type], schema.items.type)}
             {components}
             schema={schema.items}
             bind:value={v}
@@ -102,8 +100,8 @@
 
     {#if showItemForm}
       <svelte:component
-        this={getComponent(components.form)}
-        {...getComponentProps(components.form)}
+        this={getComponentFromContainer(components.form)}
+        {...getPropsFromContainer(components.form)}
         schema={schema.items}
         {components}
         on:submit={submit}
@@ -113,5 +111,5 @@
       </svelte:component>
     {/if}
     <button type="button" on:click={renderItemForm}>New</button>
-  </svelte:component>
+  </Wrap>
 {/if}
diff --git a/packages/lib/src/components/fields/BooleanField.svelte b/packages/lib/src/components/fields/BooleanField.svelte
@@ -1,26 +1,23 @@
 <script lang="ts">
-  import { createProps, defaultValue, getComponent, getComponentProps } from '../../helpers'
+  import { createProps, defaultValue } from "../../helpers";
+  import Wrap from "../helpers/Wrap.svelte";
 
-  type T = boolean
-  const p = createProps<T>()
-  export let value = p.value
-  export let errors = p.errors
-  export let schema = p.schema
-  export let components = p.components
-  export let props = p.props
+  type T = boolean;
+  const p = createProps<T>();
+  export let value = p.value;
+  export let errors = p.errors;
+  export let schema = p.schema;
+  export let components = p.components;
+  export let props = p.props;
 
   /* recalc a default value */
   $: if (schema && value == null) {
-    value = defaultValue<T>(schema, value)
+    value = defaultValue<T>(schema, value);
   }
 </script>
 
 {#if schema && components}
-  <svelte:component
-    this={getComponent(components.wrapper)}
-    {...getComponentProps(components.wrapper)}
-    {schema}
-    {errors}>
+  <Wrap {schema} {errors} component={components.wrapper}>
     <input {...props} type="checkbox" bind:checked={value} />
-  </svelte:component>
+  </Wrap>
 {/if}
diff --git a/packages/lib/src/components/fields/NullField.svelte b/packages/lib/src/components/fields/NullField.svelte
@@ -1,22 +1,19 @@
 <script lang="ts">
-  import { createProps, getComponent, getComponentProps } from '../../helpers'
+  import { createProps, defaultValue } from "../../helpers";
+  import Wrap from "../helpers/Wrap.svelte";
 
-  const p = createProps<null>()
-  export let value = p.value
-  export let errors = p.errors
-  export let schema = p.schema
-  export let components = p.components
-  export let props = p.props
+  const p = createProps<null>();
+  export let value = p.value;
+  export let errors = p.errors;
+  export let schema = p.schema;
+  export let components = p.components;
+  export let props = p.props;
 
-  let checked = false
+  let checked = false;
 </script>
 
 {#if schema && components}
-  <svelte:component
-    this={getComponent(components.wrapper)}
-    {...getComponentProps(components.wrapper)}
-    {schema}
-    {errors}>
+  <Wrap {schema} {errors} component={components.wrapper}>
     <input {...props} type="checkbox" bind:checked />
-  </svelte:component>
+  </Wrap>
 {/if}
diff --git a/packages/lib/src/components/fields/NumberField.svelte b/packages/lib/src/components/fields/NumberField.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { createProps, defaultValue, getComponent, getComponentProps } from "../../helpers";
+  import { createProps, defaultValue } from "../../helpers";
   import Wrap from "../helpers/Wrap.svelte";
 
   type T = number;
@@ -18,12 +18,6 @@
 
 {#if schema && components}
   <Wrap {schema} {errors} component={components.wrapper}>
-    <svelte:component
-      this={getComponent(components.wrapper)}
-      {...getComponentProps(components.wrapper)}
-      {schema}
-      {errors}>
-      <input {...props} type="number" step={props.step || 'any'} bind:value />
-    </svelte:component>
+    <input {...props} type="number" step={props.step || 'any'} bind:value />
   </Wrap>
 {/if}
diff --git a/packages/lib/src/components/fields/ObjectField.svelte b/packages/lib/src/components/fields/ObjectField.svelte
@@ -1,13 +1,7 @@
 <script lang="ts">
   import type { ErrorRecord } from "../../types";
-  import {
-    createProps,
-    getSchemaComponent,
-    getSchemaComponentProps,
-    defaultValue,
-    getComponent,
-    getComponentProps,
-  } from "../../helpers";
+  import { createProps, defaultValue, getComponent, getProps } from "../../helpers";
+  import Wrap from "../helpers/Wrap.svelte";
 
   type T = object;
   const p = createProps<T, ErrorRecord>({});
@@ -23,18 +17,15 @@
 </script>
 
 {#if schema && components}
-  <svelte:component
-    this={getComponent(components.wrapper)}
-    {...getComponentProps(components.wrapper)}
-    {schema}>
+  <Wrap {schema} {errors} component={components.wrapper}>
     {#each Object.entries(schema.properties) as [key, propSchema] (key)}
       <svelte:component
-        this={getSchemaComponent(propSchema, components)}
-        props={getSchemaComponentProps(propSchema, components)}
+        this={getComponent(propSchema, components.fields[propSchema.type], propSchema.type)}
+        props={getProps(propSchema, components.fields[propSchema.type], propSchema.type)}
         {components}
         schema={propSchema}
         bind:value={value[key]}
         errors={errors && errors[key]} />
     {/each}
-  </svelte:component>
+  </Wrap>
 {/if}
diff --git a/packages/lib/src/components/fields/StringField.svelte b/packages/lib/src/components/fields/StringField.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { createProps, defaultValue, getComponent, getComponentProps } from "../../helpers";
+  import { createProps, defaultValue } from "../../helpers";
+  import Wrap from "../helpers/Wrap.svelte";
 
   type T = string;
   const p = createProps<T>();
@@ -19,11 +20,7 @@
 </script>
 
 {#if schema && components}
-  <svelte:component
-    this={getComponent(components.wrapper)}
-    {...getComponentProps(components.wrapper)}
-    {schema}
-    {errors}>
+  <Wrap {schema} {errors} component={components.wrapper}>
     {#if format == 'date-time'}
       <input {...props} type="datetime" bind:value />
     {:else if format == 'date'}
@@ -33,5 +30,5 @@
     {:else}
       <input type="text" {...props} bind:value />
     {/if}
-  </svelte:component>
+  </Wrap>
 {/if}
diff --git a/packages/lib/src/components/fields/extra/TextareaField.svelte b/packages/lib/src/components/fields/extra/TextareaField.svelte
@@ -1,26 +1,23 @@
 <script lang="ts">
-  import { createProps, defaultValue, getComponent, getComponentProps } from '../../../helpers'
+  import { createProps, defaultValue } from "../../../helpers";
+  import Wrap from "../../helpers/Wrap.svelte";
 
-  type T = string
-  const p = createProps<T>()
-  export let value = p.value
-  export let errors = p.errors
-  export let schema = p.schema
-  export let components = p.components
-  export let props = p.props
+  type T = string;
+  const p = createProps<T>();
+  export let value = p.value;
+  export let errors = p.errors;
+  export let schema = p.schema;
+  export let components = p.components;
+  export let props = p.props;
 
   /* recalc a default value */
   $: if (schema && value == null) {
-    value = defaultValue<T>(schema, value)
+    value = defaultValue<T>(schema, value);
   }
 </script>
 
 {#if schema && components}
-  <svelte:component
-    this={getComponent(components.wrapper)}
-    {...getComponentProps(components.wrapper)}
-    {schema}
-    {errors}>
+  <Wrap {schema} {errors} component={components.wrapper}>
     <textarea {...props} bind:value />
-  </svelte:component>
+  </Wrap>
 {/if}