@stubber/form-fields 2.0.23 → 2.1.1

package/README.md

@@ -3,9 +3,9 @@
 ## How to use
 
 ```
-git clone git@github.com:stubber/stubber-form-fields-pkg.git form-fields-pkg
+git clone git@github.com:stubber/stubber-public-form-fields-pkg.git form-fields-pkg
 cd form-fields-pkg
-cp .env_dev .env
+cp .env_staging .env
 pnpm install
 pnpm run dev
 ```
@@ -32,54 +32,7 @@ fix: fix button color
 
 See default ruleset [here](https://github.com/semantic-release/commit-analyzer/blob/master/lib/default-release-rules.js)
 
-Conversion Progress:
+# Quick Testing
 
-| Component            | TS DONE    | IS STRING |
-| -------------------- | ---------- | --------- |
-| AgGrid               | x          |           |
-| Arraybuilder         | x          |           |
-| Checkbox             | x          |           |
-| CheckboxAutocomplete | x          |           |
-| Code                 | x          |           |
-| Contactselector      | x          |           |
-| Currency             | x          |           |
-| Dataindication       | x          |           |
-| Date                 | x          |           |
-| Datetime             | x          |           |
-| Email                | x          |           |
-| Fieldbuilder         | x          |           |
-| Fieldsbuilder        | deprecated |           |
-| File                 | x          |           |
-| Heading              | x          |           |
-| Hidden               | x          |           |
-| Hiddenlocation       | x          |           |
-| Html                 | x          |           |
-| Jsoneditor           | x          |           |
-| Map                  | x          |           |
-| Multicheckbox        | x          |           |
-| Multistep            | x          |           |
-| Note                 | x          |           |
-| Number               | x          |           |
-| Objectbuilder        | x          |           |
-| Qrcodescanner        | x          |           |
-| Radio                | x          |           |
-| Renderfield          | deprecated |           |
-| Screenrecorder       | x          |           |
-| Screenshot           | x          |           |
-| Scrollandreaddisplay | x          |           |
-| Section              | x          |           |
-| Select               | x          |           |
-| Selectresource       | x          |           |
-| Signature            | x          |           |
-| Slider               | x          |           |
-| SmartText            | x          |           |
-| Telephone            | x          |           |
-| Text                 | x          |           |
-| Voicenote            | x          |           |
-
-## TS Refactor
-
-For now src/lib/fields2 exports a refactored and rewritten form fields implementation.
-The existing implementation is still present for now, but will be removed in future.
-
-This allows us to slowly switch editor/squared over to the new implementation without breaking everything at once.
+A preview of all fields and some edge cases are available to test on the sveltekit app.  
+On staging, it's hosted at https://form-fields-pkg.staging.stubber.zone

package/dist/form-fields/Form.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { type Writable } from "svelte/store";
+import type { Writable } from "svelte/store";
 import type { UploadedFile } from "./fileserver";
 import type { IFormDependencies, IInitialForm } from "./interfaces";
 declare const __propDef: {

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

@@ -11,41 +11,37 @@ export const code_field_param_spec = {
 };
 </script>
 
-<script>import {
-  acceptCompletion,
-  autocompletion,
-  CompletionContext,
-  completionKeymap,
-  startCompletion
-} from "@codemirror/autocomplete";
-import { javascript, javascriptLanguage } from "@codemirror/lang-javascript";
-import { EditorState } from "@codemirror/state";
-import { EditorView, keymap } from "@codemirror/view";
-import { basicSetup } from "codemirror";
-import { getContext } from "svelte";
+<script>import { getContext } from "svelte";
 import FieldLabel from "../FieldLabel.svelte";
 import FieldMessage from "../FieldMessage.svelte";
 export let fieldStore;
 const code_fields_ctx_store = getContext("code_fields_ctx");
 let value = $fieldStore.value || "";
 let editor_view;
-const custom_completion_keymap = completionKeymap.filter((binding) => binding.key != "Enter").concat([
-  {
-    key: "Enter",
-    run: () => {
-      return false;
-    }
-  },
-  {
-    key: "Tab",
-    run: acceptCompletion
-  },
-  {
-    key: "Ctrl-Space",
-    run: startCompletion,
-    stopPropagation: true
+let codemirror_loader;
+function loadCodeMirror() {
+  if (!codemirror_loader) {
+    codemirror_loader = Promise.all([
+      import("@codemirror/autocomplete"),
+      import("@codemirror/lang-javascript"),
+      import("@codemirror/state"),
+      import("@codemirror/view"),
+      import("codemirror")
+    ]).then(([autocomplete, javascript, state, view, codemirror]) => ({
+      acceptCompletion: autocomplete.acceptCompletion,
+      autocompletion: autocomplete.autocompletion,
+      completionKeymap: autocomplete.completionKeymap,
+      startCompletion: autocomplete.startCompletion,
+      javascript: javascript.javascript,
+      javascriptLanguage: javascript.javascriptLanguage,
+      EditorState: state.EditorState,
+      EditorView: view.EditorView,
+      keymap: view.keymap,
+      basicSetup: codemirror.basicSetup
+    }));
   }
-]);
+  return codemirror_loader;
+}
 function keysFor(obj) {
   return Object.keys(obj ?? {});
 }
@@ -78,46 +74,92 @@ function globalCompletions(ctx) {
     // keep suggestions stable while typing
   };
 }
-const stubber_completions = javascriptLanguage.data.of({
-  autocomplete: globalCompletions
-});
 function bind_codemirror(el) {
-  const min_height_editor = EditorView.theme({
-    ".cm-content, .cm-gutter": { minHeight: "200px" },
-    "&": { maxHeight: "300px" },
-    ".cm-scroller": { overflow: "auto" }
-  });
-  editor_view = new EditorView({
-    state: EditorState.create({
-      doc: value,
-      extensions: [
-        basicSetup,
-        javascript(),
-        stubber_completions,
-        autocompletion({ defaultKeymap: false }),
-        keymap.of(custom_completion_keymap),
-        min_height_editor,
-        update_listener
-      ]
-    }),
-    parent: el
-  });
-}
-const update_listener = EditorView.updateListener.of((update) => {
-  if (update.docChanged) {
-    const new_value = update.state.doc.toString();
-    if (new_value !== value) {
-      value = new_value;
+  let disposed = false;
+  let local_editor_view;
+  void loadCodeMirror().then(
+    ({
+      acceptCompletion,
+      autocompletion,
+      completionKeymap,
+      startCompletion,
+      javascript,
+      javascriptLanguage,
+      EditorState,
+      EditorView,
+      keymap,
+      basicSetup
+    }) => {
+      if (disposed) return;
+      const custom_completion_keymap = completionKeymap.filter((binding) => binding.key != "Enter").concat([
+        {
+          key: "Enter",
+          run: () => {
+            return false;
+          }
+        },
+        {
+          key: "Tab",
+          run: acceptCompletion
+        },
+        {
+          key: "Ctrl-Space",
+          run: startCompletion,
+          stopPropagation: true
+        }
+      ]);
+      const stubber_completions = javascriptLanguage.data.of({
+        autocomplete: globalCompletions
+      });
+      const min_height_editor = EditorView.theme({
+        ".cm-content, .cm-gutter": { minHeight: "200px" },
+        "&": { maxHeight: "300px" },
+        ".cm-scroller": { overflow: "auto" }
+      });
+      const update_listener = EditorView.updateListener.of((update) => {
+        if (update.docChanged) {
+          const new_value = update.state.doc.toString();
+          if (new_value !== value) {
+            value = new_value;
+          }
+        }
+      });
+      local_editor_view = new EditorView({
+        state: EditorState.create({
+          doc: value,
+          extensions: [
+            basicSetup,
+            javascript(),
+            stubber_completions,
+            autocompletion({ defaultKeymap: false }),
+            keymap.of(custom_completion_keymap),
+            min_height_editor,
+            update_listener
+          ]
+        }),
+        parent: el
+      });
+      editor_view = local_editor_view;
     }
-  }
-});
+  );
+  return {
+    destroy() {
+      disposed = true;
+      local_editor_view?.destroy();
+      if (editor_view === local_editor_view) {
+        editor_view = void 0;
+      }
+    }
+  };
+}
 $: sync_field_to_editor(value);
 const sync_field_to_editor = (new_value) => {
-  if (editor_view && editor_view.state.doc.toString() !== new_value) {
-    editor_view.dispatch({
+  const current_editor_view = editor_view;
+  if (current_editor_view && current_editor_view.state.doc.toString() !== new_value) {
+    current_editor_view.dispatch({
       changes: {
         from: 0,
-        to: editor_view.state.doc.length,
+        to: current_editor_view.state.doc.length,
         insert: new_value
       }
     });
@@ -130,11 +172,12 @@ $: sync_field_to_value($fieldStore.value);
 const sync_field_to_value = (new_value) => {
   if (new_value !== value) {
     value = new_value;
-    if (editor_view?.state.doc.toString() !== new_value) {
-      editor_view.dispatch({
+    const current_editor_view = editor_view;
+    if (current_editor_view && current_editor_view.state.doc.toString() !== new_value) {
+      current_editor_view.dispatch({
         changes: {
           from: 0,
-          to: editor_view.state.doc.length,
+          to: current_editor_view.state.doc.length,
           insert: new_value
         }
       });

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

@@ -84,7 +84,6 @@ 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) || {
@@ -472,22 +471,32 @@ let validations_open = false;
           <Checkbox id="has_default" bind:checked={value.initvalue.has_default} />
           <Label for="has_default">Has Default</Label>
         </div>
-        <JSONEditor
-          bind:this={default_initvalue_editor}
-          onChange={(content) =>
-            handle_editor_change_setter(content, (new_val) => (value.initvalue.default = new_val))}
-        />
+        {#await import("svelte-jsoneditor") then JSONEditorModule}
+          <JSONEditorModule.JSONEditor
+            bind:this={default_initvalue_editor}
+            onChange={(content) =>
+              handle_editor_change_setter(
+                content,
+                (new_val) => (value.initvalue.default = new_val)
+              )}
+          />
+        {/await}
       </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>
-        <JSONEditor
-          bind:this={override_initvalue_editor}
-          onChange={(content) =>
-            handle_editor_change_setter(content, (new_val) => (value.initvalue.override = new_val))}
-        />
+        {#await import("svelte-jsoneditor") then JSONEditorModule}
+          <JSONEditorModule.JSONEditor
+            bind:this={override_initvalue_editor}
+            onChange={(content) =>
+              handle_editor_change_setter(
+                content,
+                (new_val) => (value.initvalue.override = new_val)
+              )}
+          />
+        {/await}
       </div>
     </Collapsible.Content>
   </Collapsible.Root>

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

@@ -15,10 +15,7 @@
 };
 </script>
 
-<script>import { createGrid, GridApi } from "ag-grid-community";
-import "ag-grid-community/styles/ag-grid.css";
-import "ag-grid-community/styles/ag-theme-material.css";
-import { onMount } from "svelte";
+<script>import { onMount } from "svelte";
 import FieldLabel from "../FieldLabel.svelte";
 import FieldMessage from "../FieldMessage.svelte";
 export let fieldStore;
@@ -45,12 +42,25 @@ const gridOptions = {
   // Column Definitions: Defines & controls grid columns.
   columnDefs: []
 };
-onMount(() => {
+async function initializeGrid(cancelled) {
+  const [{ createGrid }] = await Promise.all([
+    import("ag-grid-community"),
+    import("ag-grid-community/styles/ag-grid.css"),
+    import("ag-grid-community/styles/ag-theme-material.css")
+  ]);
+  if (cancelled()) return;
   let columnDefs = $fieldStore.params?.columnDefs;
   if (columnDefs) gridOptions.columnDefs = columnDefs;
   let rowData = $fieldStore.value;
   if (Array.isArray(rowData)) gridOptions.rowData = rowData;
   createGrid(gridDiv, gridOptions);
+}
+onMount(() => {
+  let cancelled = false;
+  void initializeGrid(() => cancelled);
+  return () => {
+    cancelled = true;
+  };
 });
 </script>
 

package/dist/form-fields/sub/grid-field.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+import type { ColDef } from "ag-grid-community";
 import type { Writable } from "svelte/store";
 import type { IBaseField, IBuiltField, IInitialForm } from "../interfaces";
 interface IGridParams {
@@ -8,9 +9,6 @@ export declare const grid_field_param_spec: IInitialForm;
 export interface IGridField extends IBaseField<IGridParams> {
     fieldtype: "grid";
 }
-import { type ColDef } from "ag-grid-community";
-import "ag-grid-community/styles/ag-grid.css";
-import "ag-grid-community/styles/ag-theme-material.css";
 declare const __propDef: {
     props: {
         fieldStore: Writable<IBuiltField<IGridParams>>;

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

@@ -16,7 +16,6 @@ export const jsoneditor_field_param_spec = {
   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";
 export let fieldStore;
@@ -27,11 +26,13 @@ let read_only = $fieldStore.params?.readOnly ?? false;
 </script>
 
 <FieldLabel {fieldStore} />
-<JSONEditor
-  bind:this={jsoneditor}
-  content={initial_content}
-  readOnly={read_only}
-  onChange={(content) =>
-    handle_editor_change_setter(content, (new_val) => ($fieldStore.value = new_val))}
-/>
+{#await import("svelte-jsoneditor") then JSONEditorModule}
+  <JSONEditorModule.JSONEditor
+    bind:this={jsoneditor}
+    content={initial_content}
+    readOnly={read_only}
+    onChange={(content) =>
+      handle_editor_change_setter(content, (new_val) => ($fieldStore.value = new_val))}
+  />
+{/await}
 <FieldMessage {fieldStore} />

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

@@ -5,10 +5,24 @@ export const map_field_param_spec = {
   spec: {
     fields: {
       hide_geolocate_button: {
-        fieldtype: "checkbox"
+        fieldtype: "checkbox",
+        without_value_details: true
       },
       auto_set_location: {
-        fieldtype: "checkbox"
+        fieldtype: "checkbox",
+        without_value_details: true
+      },
+      address_mode: {
+        fieldtype: "select",
+        without_value_details: true,
+        params: {
+          options: [
+            { label: "None", value: "none" },
+            { label: "Hidden", value: "hidden" },
+            { label: "Readonly", value: "readonly" },
+            { label: "Editable", value: "editable" }
+          ]
+        }
       }
     }
   }
@@ -17,10 +31,14 @@ export const map_field_param_spec = {
 
 <script>import { controls, Geocoder, Map, Marker } from "@beyonk/svelte-mapbox";
 import FieldLabel from "../FieldLabel.svelte";
+import { mapValues, omit } from "lodash-es";
+import { Input } from "@stubber/ui/input";
+import { Label } from "@stubber/ui/label";
 const { GeolocateControl } = controls;
 export let fieldStore;
 const initial_value = $fieldStore.value;
 let params = $fieldStore.params;
+let reverse_geocode_enabled = params?.address_mode && params?.address_mode !== "none";
 let hide_geolocate_button = params?.hide_geolocate_button || false;
 let auto_set_location = params?.auto_set_location || false;
 let dependencies = $fieldStore?.formDependencies;
@@ -58,6 +76,39 @@ function setValueCoords(lat, lng, force = false) {
       lng: lng ?? null,
       latlng: `${lat ?? null},${lng ?? null}`
     };
+    reverse_geocode(lat, lng);
+  }
+}
+async function reverse_geocode(lat, lng) {
+  if (!mapboxAccessToken || !reverse_geocode_enabled) return;
+  try {
+    const response = await fetch(
+      `https://api.mapbox.com/search/geocode/v6/reverse?longitude=${lng}&latitude=${lat}&access_token=${mapboxAccessToken}`
+    );
+    const data = await response.json();
+    if (data?.features?.length > 0) {
+      const feature = data?.features[0];
+      if (feature?.properties?.feature_type === "address") {
+        const full_address = feature?.properties?.full_address;
+        const cleaned_context = mapValues(
+          feature?.properties?.context,
+          (v) => omit(v, ["mapbox_id", "wikidata_id", "alternate"])
+        );
+        const address = {};
+        if (full_address) {
+          address.full_address = full_address;
+        }
+        if (cleaned_context) {
+          address["context"] = cleaned_context;
+        }
+        $fieldStore.value = {
+          ...$fieldStore.value,
+          address
+        };
+      }
+    }
+  } catch (error) {
+    console.error("reverse geocode error", error);
   }
 }
 function resetValues() {
@@ -79,22 +130,34 @@ function handle_geolocate(o) {
   const coords = o?.detail?.coords || {};
   setValueCoords(coords.latitude, coords.longitude);
 }
+function handle_address_change(e) {
+  const new_address = e?.target?.value || "";
+  if (new_address && $fieldStore.value.address.full_address !== new_address) {
+    $fieldStore.value = {
+      ...$fieldStore.value,
+      address: {
+        ...$fieldStore.value.address,
+        full_address: new_address
+      }
+    };
+  }
+}
 </script>
 
 <FieldLabel {fieldStore} />
 {#if mapboxAccessToken}
-  <div class="flex flex-col w-full">
+  <div class="flex w-full flex-col">
     <div>
       <button
         type="button"
         on:click={resetValues}
-        class="text-sm text-surface-300 hover:underline hover:text-surface-500"
+        class="text-sm text-surface-300 hover:text-surface-500 hover:underline"
       >
         <i class="fa-regular fa-undo" /> Reset
       </button>
     </div>
     <div class="relative mt-2 rounded-md">
-      <div class="w-full h-72">
+      <div class="h-72 w-full">
         <Map
           bind:center
           zoom={14}
@@ -114,31 +177,60 @@ function handle_geolocate(o) {
             <GeolocateControl position="top-right" on:geolocate={handle_geolocate} />
           {/if}
           {#if browserLocation}
-            <Marker lat={browserLocation.lat} lng={browserLocation.lng}>
-              <div class="relative w-0">
-                <div
-                  class="bg-surface-0 p-4 rounded-xl rounded-bl-none shadow-2xl border absolute bottom-0 whitespace-nowrap"
-                >
-                  <i class="fa-solid fa-user text-4xl" />
-                </div>
+            <Marker
+              lat={browserLocation.lat}
+              lng={browserLocation.lng}
+              markerOptions={{ anchor: "center" }}
+            >
+              <div class="relative flex flex-col items-center">
+                <span class="fa-stack fa-2x">
+                  <i
+                    class="fa-solid fa-circle fa-stack-2x text-[1.3em] leading-[inherit] text-white"
+                  />
+                  <i class="fa-solid fa-user fa-stack-1x text-blue-600" />
+                </span>
               </div>
             </Marker>
           {/if}
           {#if $fieldStore.value?.lat && $fieldStore.value?.lng}
-            <Marker lat={$fieldStore.value.lat} lng={$fieldStore.value.lng} popup={false}>
-              <div class="relative w-0">
+            <Marker
+              lat={$fieldStore.value.lat}
+              lng={$fieldStore.value.lng}
+              popup={false}
+              markerOptions={{ anchor: "bottom" }}
+            >
+              <div class="relative flex flex-col items-center">
                 <div
-                  class="bg-surface-0 p-4 rounded-xl rounded-bl-none shadow-2xl border absolute bottom-0 whitespace-nowrap"
+                  class="rounded-xl bg-white px-2 py-1 text-sm font-medium text-slate-800 shadow-lg ring-1 ring-black/20"
                 >
-                  lat: {$fieldStore.value.lat?.toString()?.substring(0, 6)} <br />
-                  lng: {$fieldStore.value.lng?.toString()?.substring(0, 6)}
+                  <div>lat: {$fieldStore.value.lat?.toString()?.substring(0, 7)}</div>
+                  <div>lng: {$fieldStore.value.lng?.toString()?.substring(0, 7)}</div>
                 </div>
+
+                <span class="fa-stack fa-2x h-[1.5em]">
+                  <i
+                    class="fa-solid fa-location-pin fa-stack-2x text-[1.2em] leading-[inherit] text-white"
+                  />
+                  <i class="fa-solid fa-location-dot fa-stack-1x text-green-600" />
+                </span>
               </div>
             </Marker>
           {/if}
         </Map>
       </div>
     </div>
+    {#if params?.address_mode === "editable"}
+      <Input
+        type="text"
+        class="mt-1"
+        value={$fieldStore.value?.address?.full_address || ".."}
+        on:change={handle_address_change}
+      />
+    {:else if params?.address_mode === "readonly"}
+      <Label class="mt-1 block text-sm font-medium text-surface-700"
+        >{$fieldStore.value?.address?.full_address || ".."}</Label
+      >
+    {/if}
   </div>
 {/if}
 <FieldMessage {fieldStore} />

package/dist/form-fields/sub/map-field.svelte.d.ts

@@ -4,6 +4,7 @@ import { type IBaseField, type IBuiltField, type IInitialForm } from "../interfa
 export interface IMapFieldParams {
     hide_geolocate_button?: boolean;
     auto_set_location?: boolean;
+    address_mode?: "none" | "hidden" | "readonly" | "editable";
 }
 export interface IMapField extends IBaseField<IMapFieldParams> {
     fieldtype: "map";

package/dist/form-fields/sub/qr-code-scanner-field.svelte

@@ -1,13 +1,10 @@
 <script context="module">import {} from "../interfaces";
 </script>
 
-<script>import { Textarea } from "@stubber/ui/textarea";
-import { Input } from "@stubber/ui/input";
-import { Button } from "@stubber/ui/button";
+<script>import { Button } from "@stubber/ui/button";
 import * as Dialog from "@stubber/ui/dialog";
 import FieldLabel from "../FieldLabel.svelte";
 import FieldMessage from "../FieldMessage.svelte";
-import { Html5Qrcode } from "html5-qrcode";
 export let fieldStore;
 let qr_code_lib;
 let is_cameras_available = false;
@@ -21,6 +18,7 @@ const open_scanner_modal = (is_open) => {
   }
 };
 const setup_scanner = async () => {
+  const { Html5Qrcode } = await import("html5-qrcode");
   let cameras = await Html5Qrcode.getCameras();
   if (!cameras) {
     is_cameras_available = false;
@@ -55,28 +53,28 @@ function confirm_scan() {
   <Dialog.Content>
     <Dialog.Header>
       <Dialog.Title>Scan Code</Dialog.Title>
-      <div class="flex flex-col w-full gap-2">
-        <div id="reader" class="w-[250px] sm:w-[310px] flex flex-col items-center" />
+      <div class="flex w-full flex-col gap-2">
+        <div id="reader" class="flex w-[250px] flex-col items-center sm:w-[310px]" />
         {#if is_cameras_available}
           {#if scan_success}
             <div class="flex items-center space-x-2">
-              <i class="fas fa-circle text-success-400 fa-2xs" />
+              <i class="fas fa-circle fa-2xs text-success-400" />
               <p class="text-label text-surface-800">{scanned_text}</p>
             </div>
           {:else}
             <div class="flex items-center space-x-2">
-              <i class="fas fa-circle text-surface-200 fa-2xs" />
+              <i class="fas fa-circle fa-2xs text-surface-200" />
               <p class="text-label text-surface-800">Searching for code ...</p>
             </div>
           {/if}
           <div class="flex">
-            <div class="flex ml-auto">
+            <div class="ml-auto flex">
               <Button disabled={!scan_success} on:click={confirm_scan}>Confirm</Button>
             </div>
           </div>
         {:else}
-          <div class="w-[250px] sm:w-[310px] aspect-square flex items-center justify-center">
-            <p class="text-surface-800 text-label">No camera found</p>
+          <div class="flex aspect-square w-[250px] items-center justify-center sm:w-[310px]">
+            <p class="text-label text-surface-800">No camera found</p>
           </div>
         {/if}
       </div>

package/dist/form-fields/sub/smart-text-field.svelte

@@ -57,29 +57,37 @@ export const smart_text_field_param_spec = {
 };
 </script>
 
-<script>import {
-  acceptCompletion,
-  autocompletion,
-  CompletionContext,
-  completionKeymap
-} from "@codemirror/autocomplete";
-import { history } from "@codemirror/commands";
-import { EditorState, StateField } from "@codemirror/state";
-import {
-  Decoration,
-  EditorView,
-  keymap,
-  MatchDecorator,
-  placeholder,
-  ViewPlugin,
-  ViewUpdate
-} from "@codemirror/view";
-import { find } from "lodash-es";
+<script>import { find } from "lodash-es";
 import FieldLabel from "../FieldLabel.svelte";
 import FieldMessage from "../FieldMessage.svelte";
 import { getContext } from "svelte";
 export let fieldStore;
 let editor_view;
+let codemirror_loader;
+function loadCodeMirror() {
+  if (!codemirror_loader) {
+    codemirror_loader = Promise.all([
+      import("@codemirror/autocomplete"),
+      import("@codemirror/commands"),
+      import("@codemirror/state"),
+      import("@codemirror/view")
+    ]).then(([autocomplete, commands, state, view]) => ({
+      acceptCompletion: autocomplete.acceptCompletion,
+      autocompletion: autocomplete.autocompletion,
+      completionKeymap: autocomplete.completionKeymap,
+      history: commands.history,
+      EditorState: state.EditorState,
+      StateField: state.StateField,
+      Decoration: view.Decoration,
+      EditorView: view.EditorView,
+      keymap: view.keymap,
+      MatchDecorator: view.MatchDecorator,
+      placeholder: view.placeholder,
+      ViewPlugin: view.ViewPlugin
+    }));
+  }
+  return codemirror_loader;
+}
 $: validation_result = $fieldStore.validation_result;
 $: type = validation_result?.type;
 $: isValid = type !== "error";
@@ -88,58 +96,91 @@ const smart_text_fields_ctx_store = getContext("smart_text_fields_ctx");
 $: parse_string = $fieldStore.params?.parse_string ?? true;
 $: code_language = $fieldStore.params?.code_language || "handlebars";
 const setup_editor = (element) => {
-  const extensions = [
-    history({ newGroupDelay: 150 }),
-    EditorView.lineWrapping,
-    contentField,
-    autocompletion({ override: [myCompletions], defaultKeymap: false }),
-    tab_accept_completion,
-    placeholder($fieldStore.label),
-    EditorView.contentAttributes.of({
-      spellcheck: "true"
-    })
-  ];
-  if (code_language === "handlebars") {
-    extensions.push(fake_handlebars_lang());
-  }
-  const str_value = $fieldStore?.value?.toString() ?? "";
-  editor_view = new EditorView({
-    state: EditorState.create({
-      doc: str_value,
-      extensions
-    }),
-    parent: element
-  });
-};
-const tab_accept_completion = keymap.of(
-  completionKeymap.filter((binding) => binding.key != "Enter").concat([
-    {
-      key: "Enter",
-      run: () => {
-        return false;
+  let disposed = false;
+  let local_editor_view;
+  void loadCodeMirror().then(
+    ({
+      acceptCompletion,
+      autocompletion,
+      completionKeymap,
+      history,
+      EditorState,
+      StateField,
+      Decoration,
+      EditorView,
+      keymap,
+      MatchDecorator,
+      placeholder,
+      ViewPlugin
+    }) => {
+      if (disposed) return;
+      const contentField = createContentField(StateField);
+      const tab_accept_completion = keymap.of(
+        completionKeymap.filter((binding) => binding.key != "Enter").concat([
+          {
+            key: "Enter",
+            run: () => {
+              return false;
+            }
+          },
+          {
+            key: "Tab",
+            run: acceptCompletion
+          }
+        ])
+      );
+      const extensions = [
+        history({ newGroupDelay: 150 }),
+        EditorView.lineWrapping,
+        contentField,
+        autocompletion({ override: [myCompletions], defaultKeymap: false }),
+        tab_accept_completion,
+        placeholder($fieldStore.label),
+        EditorView.contentAttributes.of({
+          spellcheck: "true"
+        })
+      ];
+      if (code_language === "handlebars") {
+        extensions.push(fake_handlebars_lang(Decoration, MatchDecorator, ViewPlugin));
       }
-    },
-    {
-      key: "Tab",
-      run: acceptCompletion
+      const str_value = $fieldStore?.value?.toString() ?? "";
+      local_editor_view = new EditorView({
+        state: EditorState.create({
+          doc: str_value,
+          extensions
+        }),
+        parent: element
+      });
+      editor_view = local_editor_view;
     }
-  ])
-);
-const contentField = StateField.define({
-  create() {
-    return "";
-  },
-  update(value, transaction) {
-    if (transaction.docChanged) {
-      let new_value = transaction.newDoc.toString();
-      if (new_value !== $fieldStore.value) {
-        $fieldStore.value = parse_string ? parse_string_value(new_value) : new_value;
+  );
+  return {
+    destroy() {
+      disposed = true;
+      local_editor_view?.destroy();
+      if (editor_view === local_editor_view) {
+        editor_view = void 0;
       }
-      return new_value;
     }
-    return value;
-  }
-});
+  };
+};
+function createContentField(StateField) {
+  return StateField.define({
+    create() {
+      return "";
+    },
+    update(value, transaction) {
+      if (transaction.docChanged) {
+        let new_value = transaction.newDoc.toString();
+        if (new_value !== $fieldStore.value) {
+          $fieldStore.value = parse_string ? parse_string_value(new_value) : new_value;
+        }
+        return new_value;
+      }
+      return value;
+    }
+  });
+}
 $: update_editor_content($fieldStore.value);
 function update_editor_content(new_value) {
   if (editor_view) {
@@ -155,7 +196,7 @@ function update_editor_content(new_value) {
     }
   }
 }
-function fake_handlebars_lang() {
+function fake_handlebars_lang(Decoration, MatchDecorator, ViewPlugin) {
   const curly_decorator = new MatchDecorator({
     regexp: /(\{\{[^}]*\}\})|(~~[^\s]*)/g,
     decoration: Decoration.mark({ class: "curly-braces-highlight" })

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

@@ -1,6 +1,6 @@
-import { JSONEditor, type Content } from "svelte-jsoneditor";
+import { 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_store_change: (value: any, jsoneditor: import("svelte-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

@@ -1,5 +1,5 @@
 import { cloneDeep, isEqual } from "lodash-es";
-import { JSONEditor } from "svelte-jsoneditor";
+import {} from "svelte-jsoneditor";
 export const determine_content = (value) => {
     if (typeof value === "string") {
         return { text: value, json: undefined };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stubber/form-fields",
-  "version": "2.0.23",
+  "version": "2.1.1",
   "description": "An automatic form builder based on field specifications",
   "keywords": [
     "components",
@@ -49,6 +49,7 @@
     "prettier-plugin-svelte": "^2.10.1",
     "prettier-plugin-tailwindcss": "^0.4.1",
     "publint": "^0.2.2",
+    "rollup-plugin-visualizer": "^7.0.1",
     "socket.io-client": "^4.8.1",
     "svelte-check": "^3.4.3",
     "tailwindcss": "^3.3.3",
@@ -63,7 +64,7 @@
     "@codemirror/lang-javascript": "^6.2.4",
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.38.4",
-    "@stubber/ui": "^1.13.7",
+    "@stubber/ui": "^1.13.9",
     "ag-grid-community": "^31.0.2",
     "ag-grid-enterprise": "^31.0.2",
     "codemirror": "^6.0.2",
@@ -84,11 +85,6 @@
     "svelte-markdown": "^0.4.0",
     "svelte-writable-derived": "^3.1.0"
   },
-  "pnpm": {
-    "patchedDependencies": {
-      "@beyonk/svelte-mapbox@11.0.0": "patches/@beyonk__svelte-mapbox@11.0.0.patch"
-    }
-  },
   "release": {
     "branches": [
       "staging"