@stubber/form-fields 2.0.13 → 2.0.14

package/dist/form-fields/Form.svelte

@@ -12,8 +12,12 @@ export let dynamic_field_type = false;
 setContext("dynamic_field_type", dynamic_field_type);
 let fields = [];
 let form_errors = {};
-$: rebuild_fields(initial_form, form);
 const rebuild_fields = (initial_form2, form2) => {
+  if (last_initial_form == initial_form2 && last_form == form2) {
+    return;
+  }
+  last_initial_form = initial_form2;
+  last_form = form2;
   if (initial_form2.data) {
     form2.update((data) => {
       return { ...data, ...initial_form2.data };
@@ -21,6 +25,9 @@ const rebuild_fields = (initial_form2, form2) => {
   }
   fields = build_fields(form2, attachments, dependencies, initial_form2.spec.fields);
 };
+let last_initial_form = null;
+let last_form = null;
+$: rebuild_fields(initial_form, form);
 $: validate_form($form);
 const validate_form = async (_) => {
   form_errors = {};
@@ -36,12 +43,7 @@ const validate_form = async (_) => {
 </script>
 
 <div class="flex flex-col gap-y-2">
-  {#key form}
-    {#key initial_form}
-      <!-- {count++} -->
-      {#each fields as fieldStore (getStoreValue(fieldStore).id)}
-        <FormField {fieldStore} />
-      {/each}
-    {/key}
-  {/key}
+  {#each fields as fieldStore (getStoreValue(fieldStore).id)}
+    <FormField {fieldStore} />
+  {/each}
 </div>

package/dist/form-fields/sub/field-builder-field.svelte

@@ -68,7 +68,6 @@ import { file_field_param_spec } from "./file-field.svelte";
 import { heading_field_param_spec } from "./heading-field.svelte";
 import { hidden_field_param_spec } from "./hidden-field.svelte";
 import { html_field_param_spec } from "./html-field.svelte";
-import JsonEditorBound from "./json-editor-bound.svelte";
 import { map_field_param_spec } from "./map-field.svelte";
 import { smart_text_field_param_spec } from "./smart-text-field.svelte";
 import { code_field_param_spec } from "./code-field.svelte";
@@ -85,6 +84,8 @@ import { max_files_param_spec } from "./screenrecorder-field.svelte";
 import { scroll_and_read_display_field_param_spec } from "./scroll-and-read-display-field.svelte";
 import { select_field_param_spec } from "./select-field.svelte";
 import { select_resource_field_param_spec } from "./selectresource-field.svelte";
+import { JSONEditor } from "svelte-jsoneditor";
+import { handle_editor_change_setter, handle_store_change } from "../../utils/json-editor-sync";
 export let fieldStore;
 let value = cloneDeep($fieldStore.value) || {
   details: {},
@@ -96,6 +97,8 @@ if (!value.details) {
 if (!value.initvalue) {
   value.initvalue = {};
 }
+let default_initvalue_editor;
+let override_initvalue_editor;
 $: update_fieldStore(value);
 function update_fieldStore(new_value) {
   const cleaned_value = omitBy(
@@ -116,6 +119,8 @@ function update_value(new_value) {
     };
     update_params_from_value(value.params);
     update_subfields_from_value(value.fields);
+    handle_store_change(value.initvalue.default, default_initvalue_editor);
+    handle_store_change(value.initvalue.override, override_initvalue_editor);
   }
 }
 const field_types = Object.keys(fields).map((key) => ({
@@ -467,14 +472,22 @@ let validations_open = false;
           <Checkbox id="has_default" bind:checked={value.initvalue.has_default} />
           <Label for="has_default">Has Default</Label>
         </div>
-        <JsonEditorBound bind:value={value.initvalue.default} />
+        <JSONEditor
+          bind:this={default_initvalue_editor}
+          onChange={(content) =>
+            handle_editor_change_setter(content, (new_val) => (value.initvalue.default = new_val))}
+        />
       </div>
       <div>
         <div class="flex w-full items-center space-x-2">
           <Checkbox id="has_override" bind:checked={value.initvalue.has_override} />
           <Label for="has_override">Has Override</Label>
         </div>
-        <JsonEditorBound bind:value={value.initvalue.override} />
+        <JSONEditor
+          bind:this={override_initvalue_editor}
+          onChange={(content) =>
+            handle_editor_change_setter(content, (new_val) => (value.initvalue.override = new_val))}
+        />
       </div>
     </Collapsible.Content>
   </Collapsible.Root>

package/dist/form-fields/sub/jsoneditor-field.svelte

@@ -11,13 +11,27 @@ export const jsoneditor_field_param_spec = {
 };
 </script>
 
-<script>import FieldLabel from "../FieldLabel.svelte";
+<script>import {
+  determine_content,
+  handle_editor_change_setter,
+  handle_store_change
+} from "../../utils/json-editor-sync";
+import { JSONEditor } from "svelte-jsoneditor";
+import FieldLabel from "../FieldLabel.svelte";
 import FieldMessage from "../FieldMessage.svelte";
-import JsonEditorBound from "./json-editor-bound.svelte";
 export let fieldStore;
+let initial_content = determine_content($fieldStore.value);
+let jsoneditor;
+$: handle_store_change($fieldStore.value, jsoneditor);
 let read_only = $fieldStore.params?.readOnly ?? false;
 </script>
 
 <FieldLabel {fieldStore} />
-<JsonEditorBound bind:value={$fieldStore.value} readOnly={read_only} />
+<JSONEditor
+  bind:this={jsoneditor}
+  content={initial_content}
+  readOnly={read_only}
+  onChange={(content) =>
+    handle_editor_change_setter(content, (new_val) => ($fieldStore.value = new_val))}
+/>
 <FieldMessage {fieldStore} />

package/dist/utils/json-editor-sync.d.ts

@@ -0,0 +1,6 @@
+import { JSONEditor, type Content } from "svelte-jsoneditor";
+import type { Writable } from "svelte/store";
+export declare const determine_content: (value: any) => Content;
+export declare const handle_store_change: (value: any, jsoneditor: JSONEditor) => void;
+export declare const handle_editor_change: (new_content: Content, store: Writable<any>) => void;
+export declare const handle_editor_change_setter: (new_content: Content, setter: (value: any) => void) => void;

package/dist/utils/json-editor-sync.js

@@ -0,0 +1,77 @@
+import { cloneDeep, isEqual } from "lodash-es";
+import { JSONEditor } from "svelte-jsoneditor";
+export const determine_content = (value) => {
+    if (typeof value === "string") {
+        return { text: value, json: undefined };
+    }
+    else if (typeof value === "object") {
+        return { text: undefined, json: value };
+    }
+    return { text: undefined, json: undefined };
+};
+export const handle_store_change = (value, jsoneditor) => {
+    if (jsoneditor) {
+        const current_content = jsoneditor.get();
+        let effective_content;
+        if ("text" in current_content && current_content.text !== undefined) {
+            try {
+                effective_content = JSON.parse(current_content.text);
+            }
+            catch (e) {
+                effective_content = current_content.text;
+            }
+        }
+        else if ("json" in current_content && current_content.json !== undefined) {
+            effective_content = current_content.json;
+        }
+        if (isEqual(effective_content, value)) {
+            // console.log("earliest return", { effective_content, value });
+            return;
+        }
+        if (value === undefined && effective_content === undefined) {
+            // console.log("early return");
+            return;
+        }
+        if (value === undefined) {
+            jsoneditor.updateProps({ content: { text: "" } });
+            // console.log("cleared jsoneditor");
+            return;
+        }
+        jsoneditor.update({ json: cloneDeep(value) });
+        // console.log("updated jsoneditor with value:", value);
+    }
+};
+export const handle_editor_change = (new_content, store) => {
+    if ("text" in new_content && new_content.text !== undefined) {
+        try {
+            const value = JSON.parse(new_content.text);
+            store.set(value);
+        }
+        catch (e) {
+            const value = new_content.text;
+            store.set(value);
+        }
+    }
+    else if ("json" in new_content && new_content.json !== undefined) {
+        const value = cloneDeep(new_content.json);
+        store.set(value);
+        // console.log("updated store with value:", value);
+    }
+};
+export const handle_editor_change_setter = (new_content, setter) => {
+    if ("text" in new_content && new_content.text !== undefined) {
+        try {
+            const value = JSON.parse(new_content.text);
+            setter(value);
+        }
+        catch (e) {
+            const value = new_content.text;
+            setter(value);
+        }
+    }
+    else if ("json" in new_content && new_content.json !== undefined) {
+        const value = cloneDeep(new_content.json);
+        setter(value);
+        // console.log("updated store with value:", value);
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stubber/form-fields",
-  "version": "2.0.13",
+  "version": "2.0.14",
   "description": "An automatic form builder based on field specifications",
   "keywords": [
     "components",
@@ -25,6 +25,7 @@
     "dev": "vite dev --host",
     "build": "vite build",
     "package": "svelte-kit sync && svelte-package && publint",
+    "package:watch": "svelte-kit sync && svelte-package --watch",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",

package/dist/form-fields/sub/json-editor-bound.svelte

@@ -1,50 +0,0 @@
-<script>import { cloneDeep, isEqual } from "lodash-es";
-import { JSONEditor } from "svelte-jsoneditor";
-export let value;
-let jsoneditor;
-$: update_content(value);
-function update_content(new_value) {
-  let new_content = null;
-  if (new_value === void 0) {
-    return;
-  }
-  if (!jsoneditor) {
-    return;
-  }
-  const content = jsoneditor.get();
-  if (typeof new_value === "string") {
-    if ("text" in content && content.text !== new_value) {
-      new_content = { text: new_value };
-    } else if ("json" in content) {
-      new_content = { text: new_value };
-    }
-  } else if (new_value !== void 0) {
-    try {
-      const current_json = "json" in content ? content.json : JSON.parse(content.text);
-      if (!isEqual(current_json, new_value)) {
-        new_content = { json: cloneDeep(new_value) };
-      }
-    } catch (e) {
-      new_content = { json: cloneDeep(new_value) };
-    }
-  }
-  if (new_content !== null) {
-    console.log("update_content set content to", new_content);
-    jsoneditor.set(new_content);
-  }
-}
-function handleChange(new_content) {
-  if ("text" in new_content && new_content.text !== void 0) {
-    try {
-      value = JSON.parse(new_content.text);
-    } catch (e) {
-      value = new_content.text;
-    }
-  } else if ("json" in new_content && new_content.json !== void 0) {
-    value = cloneDeep(new_content.json);
-  }
-  console.log("handleChange set value to", value);
-}
-</script>
-
-<JSONEditor bind:this={jsoneditor} onChange={handleChange} {...$$restProps} />

package/dist/form-fields/sub/json-editor-bound.svelte.d.ts

@@ -1,66 +0,0 @@
-import { SvelteComponent } from "svelte";
-import { type Content } from "svelte-jsoneditor";
-declare const __propDef: {
-    props: {
-        content?: Content;
-        selection?: import("svelte-jsoneditor").JSONEditorSelection | undefined;
-        readOnly?: boolean;
-        indentation?: number | string;
-        tabSize?: number;
-        mode?: import("svelte-jsoneditor").Mode;
-        mainMenuBar?: boolean;
-        navigationBar?: boolean;
-        statusBar?: boolean;
-        askToFormat?: boolean;
-        escapeControlCharacters?: boolean;
-        escapeUnicodeCharacters?: boolean;
-        flattenColumns?: boolean;
-        parser?: import("svelte-jsoneditor").JSONParser;
-        validator?: import("svelte-jsoneditor").Validator | undefined;
-        validationParser?: import("svelte-jsoneditor").JSONParser;
-        pathParser?: import("svelte-jsoneditor").JSONPathParser;
-        queryLanguages?: import("svelte-jsoneditor").QueryLanguage[];
-        queryLanguageId?: string;
-        onChangeQueryLanguage?: import("svelte-jsoneditor").OnChangeQueryLanguage;
-        onChange?: import("svelte-jsoneditor").OnChange | undefined;
-        onSelect?: import("svelte-jsoneditor").OnSelect | undefined;
-        onRenderValue?: import("svelte-jsoneditor").OnRenderValue;
-        onClassName?: import("svelte-jsoneditor").OnClassName;
-        onRenderMenu?: import("svelte-jsoneditor").OnRenderMenu;
-        onRenderContextMenu?: import("svelte-jsoneditor").OnRenderContextMenu;
-        onChangeMode?: import("svelte-jsoneditor").OnChangeMode;
-        onError?: import("svelte-jsoneditor").OnError;
-        onFocus?: import("svelte-jsoneditor").OnFocus;
-        onBlur?: import("svelte-jsoneditor").OnBlur;
-        get?: () => Content;
-        set?: (newContent: Content) => Promise<void>;
-        update?: (updatedContent: Content) => Promise<void>;
-        patch?: (operations: import("immutable-json-patch").JSONPatchDocument) => Promise<import("svelte-jsoneditor").JSONPatchResult>;
-        select?: (newSelection: import("svelte-jsoneditor").JSONEditorSelection | undefined) => Promise<void>;
-        expand?: (path: import("immutable-json-patch").JSONPath, callback?: import("svelte-jsoneditor").OnExpand) => Promise<void>;
-        collapse?: (path: import("immutable-json-patch").JSONPath, recursive?: boolean) => Promise<void>;
-        transform?: (options: import("svelte-jsoneditor").TransformModalOptions) => void;
-        validate?: () => import("svelte-jsoneditor").ContentErrors | undefined;
-        acceptAutoRepair?: () => Promise<Content>;
-        scrollTo?: (path: import("immutable-json-patch").JSONPath) => Promise<void>;
-        findElement?: (path: import("immutable-json-patch").JSONPath) => Element | undefined;
-        focus?: () => Promise<void>;
-        refresh?: () => Promise<void>;
-        updateProps?: (props: import("svelte-jsoneditor").JSONEditorPropsOptional) => Promise<void>;
-        destroy?: () => Promise<void>;
-    } & {
-        value: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type JsonEditorBoundProps = typeof __propDef.props;
-export type JsonEditorBoundEvents = typeof __propDef.events;
-export type JsonEditorBoundSlots = typeof __propDef.slots;
-export default class JsonEditorBound extends SvelteComponent<JsonEditorBoundProps, JsonEditorBoundEvents, JsonEditorBoundSlots> {
-}
-export {};