tinybase 8.0.0-beta.2 → 8.0.0-beta.4

package/ui-react-inspector/with-schemas/index.js

@@ -41,6 +41,8 @@ const STRING = getTypeOf(EMPTY_STRING);
 const BOOLEAN = getTypeOf(true);
 const NUMBER = getTypeOf(0);
 const FUNCTION = getTypeOf(getTypeOf);
+const OBJECT = 'object';
+const ARRAY = 'array';
 const TYPE = 'type';
 const DEFAULT = 'default';
 const ALLOW_NULL = 'allowNull';
@@ -72,6 +74,7 @@ const CURRENT_TARGET = 'currentTarget';
 const _VALUE = 'value';
 const EXTRA = 'extra';
 const UNDEFINED = '\uFFFC';
+const JSON_PREFIX = '\uFFFD';
 const id = (key) => EMPTY_STRING + key;
 const strSplit = (str, separator = EMPTY_STRING, limit) =>
   str.split(separator, limit);
@@ -105,6 +108,14 @@ const structuredClone = GLOBAL.structuredClone;
 const errorNew = (message) => {
   throw new Error(message);
 };
+const tryReturn = (tryF, catchReturn) => {
+  try {
+    return tryF();
+  } catch {
+    /* istanbul ignore next */
+    return catchReturn;
+  }
+};
 const tryCatch = async (action, then1, then2) => {
   try {
     return await action();
@@ -152,7 +163,6 @@ const isObject = (obj) =>
 const objIds = object.keys;
 const objFreeze = object.freeze;
 const objNew = (entries = []) => object.fromEntries(entries);
-const objMerge = (...objs) => object.assign({}, ...objs);
 const objGet = (obj, id) => ifNotUndefined(obj, (obj2) => obj2[id]);
 const objHas = (obj, id) => id in obj;
 const objDel = (obj, id) => {
@@ -420,8 +430,8 @@ const getStoreFunctions = (
   persist != 1 /* StoreOnly */ && store.isMergeable()
     ? [
         1,
-        store.getMergeableContent,
-        () => store.getTransactionMergeableChanges(!isSynchronizer),
+        store.__[1],
+        () => store.__[2](!isSynchronizer),
         ([[changedTables], [changedValues]]) =>
           !objIsEmpty(changedTables) || !objIsEmpty(changedValues),
         store.setDefaultContent,
@@ -429,8 +439,8 @@ const getStoreFunctions = (
     : persist != 2 /* MergeableStoreOnly */
       ? [
           0,
-          store.getContent,
-          store.getTransactionChanges,
+          store._[7],
+          store._[8],
           ([changedTables, changedValues]) =>
             !objIsEmpty(changedTables) || !objIsEmpty(changedValues),
           store.setContent,
@@ -495,7 +505,7 @@ const createCustomPersister = (
         : store.setContent)(contentOrChanges);
   };
   const saveAfterMutated = async () => {
-    if (isAutoSaving() && store.hadMutated?.()) {
+    if (isAutoSaving() && store.__?.[0]?.()) {
       await save();
     }
   };
@@ -699,20 +709,43 @@ const getCellOrValueType = (cellOrValue) => {
   if (isNull(cellOrValue)) {
     return NULL;
   }
+  if (isArray(cellOrValue)) {
+    return ARRAY;
+  }
+  if (isObject(cellOrValue)) {
+    return OBJECT;
+  }
   const type = getTypeOf(cellOrValue);
   return isTypeStringOrBoolean(type) ||
     (type == NUMBER && isFiniteNumber(cellOrValue))
     ? type
     : void 0;
 };
-const getTypeCase = (type, stringCase, numberCase, booleanCase) =>
+const isJsonType = (type) => type == OBJECT || type == ARRAY;
+const encodeIfJson = (value) =>
+  isObject(value) || isArray(value) ? JSON_PREFIX + jsonString(value) : value;
+const isEncodedJson = (value) => isString(value) && value[0] == JSON_PREFIX;
+const decodeIfJson = (raw, _id, encoded) =>
+  !encoded && isEncodedJson(raw) ? jsonParse(slice(raw, 1)) : raw;
+const getTypeCase = (
+  type,
+  stringCase,
+  numberCase,
+  booleanCase,
+  objectCase,
+  arrayCase,
+) =>
   type == STRING
     ? stringCase
     : type == NUMBER
       ? numberCase
       : type == BOOLEAN
         ? booleanCase
-        : null;
+        : type == OBJECT
+          ? objectCase
+          : type == ARRAY
+            ? arrayCase
+            : null;
 
 const defaultSorter = (sortKey1, sortKey2) =>
   (sortKey1 ?? 0) < (sortKey2 ?? 0) ? -1 : 1;
@@ -813,15 +846,19 @@ const createStore = () => {
       return false;
     }
     const type = schema[TYPE];
-    if (!isTypeStringOrBoolean(type) && type != NUMBER) {
+    if (!isTypeStringOrBoolean(type) && type != NUMBER && !isJsonType(type)) {
       return false;
     }
     const defaultValue = schema[DEFAULT];
     if (isNull(defaultValue) && !schema[ALLOW_NULL]) {
       return false;
     }
-    if (!isNull(defaultValue) && getCellOrValueType(defaultValue) != type) {
-      objDel(schema, DEFAULT);
+    if (!isNull(defaultValue)) {
+      if (getCellOrValueType(defaultValue) != type) {
+        objDel(schema, DEFAULT);
+      } else {
+        schema[DEFAULT] = encodeIfJson(defaultValue);
+      }
     }
     return true;
   };
@@ -861,20 +898,22 @@ const createStore = () => {
               ? cellSchema[ALLOW_NULL]
                 ? cell
                 : cellInvalid(tableId, rowId, cellId, cell, cellSchema[DEFAULT])
-              : getCellOrValueType(cell) == cellSchema[TYPE]
-                ? cell
-                : cellInvalid(
-                    tableId,
-                    rowId,
-                    cellId,
-                    cell,
-                    cellSchema[DEFAULT],
-                  ),
+              : getCellOrValueType(cell) === cellSchema[TYPE]
+                ? encodeIfJson(cell)
+                : isJsonType(cellSchema[TYPE]) && isEncodedJson(cell)
+                  ? cell
+                  : cellInvalid(
+                      tableId,
+                      rowId,
+                      cellId,
+                      cell,
+                      cellSchema[DEFAULT],
+                    ),
           () => cellInvalid(tableId, rowId, cellId, cell),
         )
       : isUndefined(getCellOrValueType(cell))
         ? cellInvalid(tableId, rowId, cellId, cell)
-        : cell;
+        : encodeIfJson(cell);
   const validateValues = (values, skipDefaults) =>
     objValidate(
       skipDefaults ? values : addDefaultsToValues(values),
@@ -898,14 +937,16 @@ const createStore = () => {
               ? valueSchema[ALLOW_NULL]
                 ? value
                 : valueInvalid(valueId, value, valueSchema[DEFAULT])
-              : getCellOrValueType(value) == valueSchema[TYPE]
-                ? value
-                : valueInvalid(valueId, value, valueSchema[DEFAULT]),
+              : getCellOrValueType(value) === valueSchema[TYPE]
+                ? encodeIfJson(value)
+                : isJsonType(valueSchema[TYPE]) && isEncodedJson(value)
+                  ? value
+                  : valueInvalid(valueId, value, valueSchema[DEFAULT]),
           () => valueInvalid(valueId, value),
         )
       : isUndefined(getCellOrValueType(value))
         ? valueInvalid(valueId, value)
-        : value;
+        : encodeIfJson(value);
   const addDefaultsToRow = (row, tableId, rowId) => {
     ifNotUndefined(
       mapGet(tablesSchemaRowCache, tableId),
@@ -985,10 +1026,24 @@ const createStore = () => {
     );
   const setOrDelTables = (tables) =>
     objIsEmpty(tables) ? delTables() : setTables(tables);
-  const setOrDelCell = (tableId, rowId, cellId, cell, skipMiddleware) =>
+  const setOrDelCell = (
+    tableId,
+    rowId,
+    cellId,
+    cell,
+    skipMiddleware,
+    skipRowMiddleware,
+  ) =>
     isUndefined(cell)
       ? delCell(tableId, rowId, cellId, true, skipMiddleware)
-      : setCell(tableId, rowId, cellId, cell, skipMiddleware);
+      : setCell(
+          tableId,
+          rowId,
+          cellId,
+          cell,
+          skipMiddleware,
+          skipRowMiddleware,
+        );
   const setOrDelValues = (values) =>
     objIsEmpty(values) ? delValues() : setValues(values);
   const setOrDelValue = (valueId, value, skipMiddleware) =>
@@ -1088,6 +1143,30 @@ const createStore = () => {
         ),
       objIsEqual,
     );
+  const applyRowDirectly = (tableId, tableMap, rowId, row, skipMiddleware) => {
+    mapMatch(
+      mapEnsure(tableMap, rowId, () => {
+        rowIdsChanged(tableId, rowId, 1);
+        return mapNew();
+      }),
+      row,
+      (rowMap, cellId, cell) =>
+        ifNotUndefined(
+          getValidatedCell(tableId, rowId, cellId, cell),
+          (validCell) =>
+            setValidCell(
+              tableId,
+              rowId,
+              rowMap,
+              cellId,
+              validCell,
+              skipMiddleware,
+            ),
+        ),
+      (rowMap, cellId) =>
+        delValidCell(tableId, tableMap, rowId, rowMap, cellId, true),
+    );
+  };
   const setValidCell = (tableId, rowId, rowMap, cellId, cell, skipMiddleware) =>
     ifTransformed(
       cell,
@@ -1328,13 +1407,21 @@ const createStore = () => {
   const getCellChange = (tableId, rowId, cellId) =>
     ifNotUndefined(
       mapGet(mapGet(mapGet(changedCells, tableId), rowId), cellId),
-      ([oldCell, newCell]) => [true, oldCell, newCell],
+      ([oldCell, newCell]) => [
+        true,
+        decodeIfJson(oldCell),
+        decodeIfJson(newCell),
+      ],
       () => [false, ...pairNew(getCell(tableId, rowId, cellId))],
     );
   const getValueChange = (valueId) =>
     ifNotUndefined(
       mapGet(changedValues, valueId),
-      ([oldValue, newValue]) => [true, oldValue, newValue],
+      ([oldValue, newValue]) => [
+        true,
+        decodeIfJson(oldValue),
+        decodeIfJson(newValue),
+      ],
       () => [false, ...pairNew(getValue(valueId))],
     );
   const callInvalidCellListeners = (mutator) =>
@@ -1510,8 +1597,8 @@ const createStore = () => {
                 callListeners(
                   cellListeners[mutator],
                   [tableId, rowId, cellId],
-                  newCell,
-                  oldCell,
+                  decodeIfJson(newCell),
+                  decodeIfJson(oldCell),
                   getCellChange,
                 );
                 tablesChanged = tableChanged = rowChanged = 1;
@@ -1567,8 +1654,8 @@ const createStore = () => {
             callListeners(
               valueListeners[mutator],
               [valueId],
-              newValue,
-              oldValue,
+              decodeIfJson(newValue),
+              decodeIfJson(oldValue),
               getValueChange,
             );
             valuesChanged = 1;
@@ -1605,10 +1692,42 @@ const createStore = () => {
       [getTableIds],
     );
   };
+  const getTransactionChangesImpl = (encoded = false) => [
+    mapToObj(
+      changedCells,
+      (table, tableId) =>
+        mapGet(changedTableIds, tableId) === -1
+          ? void 0
+          : mapToObj(
+              table,
+              (row, rowId) =>
+                mapGet(mapGet(changedRowIds, tableId), rowId) === -1
+                  ? void 0
+                  : mapToObj(
+                      row,
+                      ([, newCell]) =>
+                        decodeIfJson(newCell, EMPTY_STRING, encoded),
+                      (changedCell) => pairIsEqual(changedCell),
+                    ),
+              collIsEmpty,
+              objIsEmpty,
+            ),
+      collIsEmpty,
+      objIsEmpty,
+    ),
+    mapToObj(
+      changedValues,
+      ([, newValue]) => decodeIfJson(newValue, EMPTY_STRING, encoded),
+      (changedValue) => pairIsEqual(changedValue),
+    ),
+    1,
+  ];
   const getContent = () => [getTables(), getValues()];
-  const getTables = () => mapToObj3(tablesMap);
+  const getEncodedContent = () => [mapToObj3(tablesMap), mapToObj(valuesMap)];
+  const getTables = () => mapToObj3(tablesMap, decodeIfJson);
   const getTableIds = () => mapKeys(tablesMap);
-  const getTable = (tableId) => mapToObj2(mapGet(tablesMap, id(tableId)));
+  const getTable = (tableId) =>
+    mapToObj2(mapGet(tablesMap, id(tableId)), decodeIfJson);
   const getTableCellIds = (tableId) =>
     mapKeys(mapGet(tableCellIds, id(tableId)));
   const getRowCount = (tableId) => collSize(mapGet(tablesMap, id(tableId)));
@@ -1644,14 +1763,16 @@ const createStore = () => {
           ([, rowId]) => rowId,
         );
   const getRow = (tableId, rowId) =>
-    mapToObj(mapGet(mapGet(tablesMap, id(tableId)), id(rowId)));
+    mapToObj(mapGet(mapGet(tablesMap, id(tableId)), id(rowId)), decodeIfJson);
   const getCellIds = (tableId, rowId) =>
     mapKeys(mapGet(mapGet(tablesMap, id(tableId)), id(rowId)));
   const getCell = (tableId, rowId, cellId) =>
-    mapGet(mapGet(mapGet(tablesMap, id(tableId)), id(rowId)), id(cellId));
-  const getValues = () => mapToObj(valuesMap);
+    decodeIfJson(
+      mapGet(mapGet(mapGet(tablesMap, id(tableId)), id(rowId)), id(cellId)),
+    );
+  const getValues = () => mapToObj(valuesMap, decodeIfJson);
   const getValueIds = () => mapKeys(valuesMap);
-  const getValue = (valueId) => mapGet(valuesMap, id(valueId));
+  const getValue = (valueId) => decodeIfJson(mapGet(valuesMap, id(valueId)));
   const hasTables = () => !collIsEmpty(tablesMap);
   const hasTable = (tableId) => collHas(tablesMap, id(tableId));
   const hasTableCell = (tableId, cellId) =>
@@ -1722,7 +1843,14 @@ const createStore = () => {
       tableId,
       rowId,
     );
-  const setCell = (tableId, rowId, cellId, cell, skipMiddleware) =>
+  const setCell = (
+    tableId,
+    rowId,
+    cellId,
+    cell,
+    skipMiddleware,
+    skipRowMiddleware,
+  ) =>
     fluentTransaction(
       (tableId2, rowId2, cellId2) =>
         ifNotUndefined(
@@ -1732,15 +1860,47 @@ const createStore = () => {
             cellId2,
             isFunction(cell) ? cell(getCell(tableId2, rowId2, cellId2)) : cell,
           ),
-          (validCell) =>
-            setCellIntoNewRow(
-              tableId2,
-              getOrCreateTable(tableId2),
-              rowId2,
-              cellId2,
-              validCell,
-              skipMiddleware,
-            ),
+          (validCell) => {
+            const tableMap = getOrCreateTable(tableId2);
+            ifNotUndefined(
+              skipMiddleware || skipRowMiddleware || !middleware[14]?.()
+                ? void 0
+                : middleware[3],
+              (willSetRow) => {
+                const existingRowMap = mapGet(tableMap, rowId2);
+                const prospectiveRow = {
+                  ...(existingRowMap ? mapToObj(existingRowMap) : {}),
+                  [cellId2]: validCell,
+                };
+                ifNotUndefined(
+                  whileMutating(() =>
+                    willSetRow(
+                      tableId2,
+                      rowId2,
+                      structuredClone(prospectiveRow),
+                    ),
+                  ),
+                  (row) =>
+                    applyRowDirectly(
+                      tableId2,
+                      tableMap,
+                      rowId2,
+                      row,
+                      skipMiddleware,
+                    ),
+                );
+              },
+              () =>
+                setCellIntoNewRow(
+                  tableId2,
+                  tableMap,
+                  rowId2,
+                  cellId2,
+                  validCell,
+                  skipMiddleware,
+                ),
+            );
+          },
         ),
       tableId,
       rowId,
@@ -1789,7 +1949,14 @@ const createStore = () => {
                   isUndefined(row)
                     ? delRow(tableId, rowId)
                     : objMap(row, (cell, cellId) =>
-                        setOrDelCell(tableId, rowId, cellId, cell),
+                        setOrDelCell(
+                          tableId,
+                          rowId,
+                          cellId,
+                          cell,
+                          void 0,
+                          true,
+                        ),
                       ),
                 ),
           );
@@ -1938,35 +2105,8 @@ const createStore = () => {
     }
     return store;
   };
-  const getTransactionChanges = () => [
-    mapToObj(
-      changedCells,
-      (table, tableId) =>
-        mapGet(changedTableIds, tableId) === -1
-          ? void 0
-          : mapToObj(
-              table,
-              (row, rowId) =>
-                mapGet(mapGet(changedRowIds, tableId), rowId) === -1
-                  ? void 0
-                  : mapToObj(
-                      row,
-                      ([, newCell]) => newCell,
-                      (changedCell) => pairIsEqual(changedCell),
-                    ),
-              collIsEmpty,
-              objIsEmpty,
-            ),
-      collIsEmpty,
-      objIsEmpty,
-    ),
-    mapToObj(
-      changedValues,
-      ([, newValue]) => newValue,
-      (changedValue) => pairIsEqual(changedValue),
-    ),
-    1,
-  ];
+  const getTransactionChanges = () => getTransactionChangesImpl();
+  const getEncodedTransactionChanges = () => getTransactionChangesImpl(true);
   const getTransactionLog = () => [
     !collIsEmpty(changedCells),
     !collIsEmpty(changedValues),
@@ -1979,37 +2119,6 @@ const createStore = () => {
     mapToObj3(changedCellIds),
     mapToObj(changedValueIds),
   ];
-  const doDidSetRows = () => {
-    if (middleware[14]) {
-      const changedCells2 = clonedChangedCells(changedCells);
-      collForEach(changedCells2, (rows, tableId) =>
-        collForEach(rows, (cells, rowId) => {
-          if (
-            !arrayEvery(
-              collValues(cells),
-              ([oldCell, newCell]) => oldCell === newCell,
-            )
-          ) {
-            const newRow = getRow(tableId, rowId);
-            const oldRow = objMerge(newRow);
-            collForEach(cells, ([oldCell], cellId) =>
-              isUndefined(oldCell)
-                ? objDel(oldRow, cellId)
-                : (oldRow[cellId] = oldCell),
-            );
-            const didSetRow = middleware[14](tableId, rowId, oldRow, newRow);
-            if (!objIsEqual(didSetRow, newRow)) {
-              const setOrDelRow = objMap(newRow, () => void 0);
-              objMap(didSetRow, (cell, cellId) => (setOrDelRow[cellId] = cell));
-              objMap(setOrDelRow, (cell, cellId) =>
-                setOrDelCell(tableId, rowId, cellId, cell, true),
-              );
-            }
-          }
-        }),
-      );
-    }
-  };
   const finishTransaction = (doRollback) => {
     if (transactions > 0) {
       transactions--;
@@ -2019,7 +2128,6 @@ const createStore = () => {
           callInvalidCellListeners(1);
           if (!collIsEmpty(changedCells)) {
             callTabularListenersForChanges(1);
-            doDidSetRows();
           }
           callInvalidValueListeners(1);
           if (!collIsEmpty(changedValues)) {
@@ -2080,7 +2188,9 @@ const createStore = () => {
       tableCallback(tableId, (rowCallback) =>
         collForEach(tableMap, (rowMap, rowId) =>
           rowCallback(rowId, (cellCallback) =>
-            mapForEach(rowMap, cellCallback),
+            mapForEach(rowMap, (cellId, cell) =>
+              cellCallback(cellId, decodeIfJson(cell)),
+            ),
           ),
         ),
       ),
@@ -2089,11 +2199,21 @@ const createStore = () => {
     mapForEach(mapGet(tableCellIds, id(tableId)), tableCellCallback);
   const forEachRow = (tableId, rowCallback) =>
     collForEach(mapGet(tablesMap, id(tableId)), (rowMap, rowId) =>
-      rowCallback(rowId, (cellCallback) => mapForEach(rowMap, cellCallback)),
+      rowCallback(rowId, (cellCallback) =>
+        mapForEach(rowMap, (cellId, cell) =>
+          cellCallback(cellId, decodeIfJson(cell)),
+        ),
+      ),
     );
   const forEachCell = (tableId, rowId, cellCallback) =>
-    mapForEach(mapGet(mapGet(tablesMap, id(tableId)), id(rowId)), cellCallback);
-  const forEachValue = (valueCallback) => mapForEach(valuesMap, valueCallback);
+    mapForEach(
+      mapGet(mapGet(tablesMap, id(tableId)), id(rowId)),
+      (cellId, cell) => cellCallback(cellId, decodeIfJson(cell)),
+    );
+  const forEachValue = (valueCallback) =>
+    mapForEach(valuesMap, (valueId, value) =>
+      valueCallback(valueId, decodeIfJson(value)),
+    );
   const addSortedRowIdsListener = (
     tableIdOrArgs,
     cellIdOrListener,
@@ -2178,7 +2298,7 @@ const createStore = () => {
     willDelValues,
     willDelValue,
     willApplyChanges,
-    didSetRow,
+    hasWillSetRowCallbacks,
   ) =>
     (middleware = [
       willSetContent,
@@ -2195,7 +2315,7 @@ const createStore = () => {
       willDelValues,
       willDelValue,
       willApplyChanges,
-      didSetRow,
+      hasWillSetRowCallbacks,
     ]);
   const setInternalListeners = (
     preStartTransaction,
@@ -2285,14 +2405,17 @@ const createStore = () => {
     delListener,
     getListenerStats,
     isMergeable: () => false,
-    // only used internally by other modules
-    createStore,
-    addListener,
-    callListeners,
-    setInternalListeners,
-    setMiddleware,
-    setOrDelCell,
-    setOrDelValue,
+    _: [
+      createStore,
+      addListener,
+      callListeners,
+      setInternalListeners,
+      setMiddleware,
+      setOrDelCell,
+      setOrDelValue,
+      getEncodedContent,
+      getEncodedTransactionChanges,
+    ],
   };
   objMap(
     {
@@ -2476,6 +2599,10 @@ const IS_EQUALS = [
   (paramValues1, paramValues2) =>
     objIsEqual(paramValues1, paramValues2, arrayOrValueEqual),
   arrayOrValueEqual,
+  (thing1, thing2) =>
+    thing1 === thing2 ||
+    ((isObject(thing1) || isArray(thing1)) &&
+      jsonString(thing1) === jsonString(thing2)),
 ];
 const isEqual = (thing1, thing2) => thing1 === thing2;
 const addAndDelListener = (thing, listenable, ...args) => {
@@ -3010,12 +3137,22 @@ const EditableThing = ({
   const [stringThing, setStringThing] = useState();
   const [numberThing, setNumberThing] = useState();
   const [booleanThing, setBooleanThing] = useState();
+  const [objectThing, setObjectThing] = useState('{}');
+  const [arrayThing, setArrayThing] = useState('[]');
+  const [objectClassName, setObjectClassName] = useState('');
+  const [arrayClassName, setArrayClassName] = useState('');
   if (currentThing !== thing) {
     setThingType(getCellOrValueType(thing));
     setCurrentThing(thing);
-    setStringThing(String(thing));
-    setNumberThing(Number(thing) || 0);
-    setBooleanThing(Boolean(thing));
+    if (isObject(thing)) {
+      setObjectThing(jsonString(thing));
+    } else if (isArray(thing)) {
+      setArrayThing(jsonString(thing));
+    } else {
+      setStringThing(String(thing));
+      setNumberThing(Number(thing) || 0);
+      setBooleanThing(Boolean(thing));
+    }
   }
   const handleThingChange = useCallback(
     (thing2, setTypedThing) => {
@@ -3025,14 +3162,39 @@ const EditableThing = ({
     },
     [onThingChange],
   );
+  const handleJsonThingChange = useCallback(
+    (value, setTypedThing, isThing, setTypedClassName) => {
+      setTypedThing(value);
+      try {
+        const object = jsonParse(value);
+        if (isThing(object)) {
+          setCurrentThing(object);
+          onThingChange(object);
+          setTypedClassName('');
+        }
+      } catch {
+        setTypedClassName('invalid');
+      }
+    },
+    [onThingChange],
+  );
   const handleTypeChange = useCallback(() => {
     if (!hasSchema?.()) {
-      const nextType = getTypeCase(thingType, NUMBER, BOOLEAN, STRING);
+      const nextType = getTypeCase(
+        thingType,
+        NUMBER,
+        BOOLEAN,
+        OBJECT,
+        ARRAY,
+        STRING,
+      );
       const thing2 = getTypeCase(
         nextType,
         stringThing,
         numberThing,
         booleanThing,
+        tryReturn(() => jsonParse(objectThing), {}),
+        tryReturn(() => jsonParse(arrayThing), []),
       );
       setThingType(nextType);
       setCurrentThing(thing2);
@@ -3044,6 +3206,8 @@ const EditableThing = ({
     stringThing,
     numberThing,
     booleanThing,
+    objectThing,
+    arrayThing,
     thingType,
   ]);
   const widget = getTypeCase(
@@ -3095,6 +3259,42 @@ const EditableThing = ({
       },
       thingType,
     ),
+    /* @__PURE__ */ jsx(
+      'input',
+      {
+        value: objectThing,
+        className: objectClassName,
+        onChange: useCallback(
+          (event) =>
+            handleJsonThingChange(
+              event[CURRENT_TARGET][_VALUE],
+              setObjectThing,
+              isObject,
+              setObjectClassName,
+            ),
+          [handleJsonThingChange],
+        ),
+      },
+      thingType,
+    ),
+    /* @__PURE__ */ jsx(
+      'input',
+      {
+        value: arrayThing,
+        className: arrayClassName,
+        onChange: useCallback(
+          (event) =>
+            handleJsonThingChange(
+              event[CURRENT_TARGET][_VALUE],
+              setArrayThing,
+              isArray,
+              setArrayClassName,
+            ),
+          [handleJsonThingChange],
+        ),
+      },
+      thingType,
+    ),
   );
   return /* @__PURE__ */ jsxs('div', {
     className,