tinybase 8.0.0-beta.3 → 8.0.0

package/store/with-schemas/index.js

@@ -85,7 +85,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 objHas = (obj, id) => id in obj;
 const objDel = (obj, id) => {
   delete obj[id];
@@ -631,10 +630,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) =>
@@ -734,6 +747,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,
@@ -1410,7 +1447,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(
@@ -1420,15 +1464,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,
@@ -1477,7 +1553,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,
+                        ),
                       ),
                 ),
           );
@@ -1640,37 +1723,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--;
@@ -1680,7 +1732,6 @@ const createStore = () => {
           callInvalidCellListeners(1);
           if (!collIsEmpty(changedCells)) {
             callTabularListenersForChanges(1);
-            doDidSetRows();
           }
           callInvalidValueListeners(1);
           if (!collIsEmpty(changedValues)) {
@@ -1851,7 +1902,7 @@ const createStore = () => {
     willDelValues,
     willDelValue,
     willApplyChanges,
-    didSetRow,
+    hasWillSetRowCallbacks,
   ) =>
     (middleware = [
       willSetContent,
@@ -1868,7 +1919,7 @@ const createStore = () => {
       willDelValues,
       willDelValue,
       willApplyChanges,
-      didSetRow,
+      hasWillSetRowCallbacks,
     ]);
   const setInternalListeners = (
     preStartTransaction,

package/ui-react-dom/index.js

@@ -58,6 +58,14 @@ const isArray = (thing) => Array.isArray(thing);
 const size = (arrayOrString) => arrayOrString.length;
 const getUndefined = () => void 0;
 const getArg = (value) => value;
+const tryReturn = (tryF, catchReturn) => {
+  try {
+    return tryF();
+  } catch {
+    /* istanbul ignore next */
+    return catchReturn;
+  }
+};
 
 const arrayEvery = (array, cb) => array.every(cb);
 const arrayIsEqual = (array1, array2) =>
@@ -678,15 +686,17 @@ const EditableThing = ({
   const [stringThing, setStringThing] = useState();
   const [numberThing, setNumberThing] = useState();
   const [booleanThing, setBooleanThing] = useState();
-  const [objectThingJson, setObjectThingJson] = useState(EMPTY_STRING);
-  const [arrayThingJson, setArrayThingJson] = useState(EMPTY_STRING);
+  const [objectThing, setObjectThing] = useState('{}');
+  const [arrayThing, setArrayThing] = useState('[]');
+  const [objectClassName, setObjectClassName] = useState('');
+  const [arrayClassName, setArrayClassName] = useState('');
   if (currentThing !== thing) {
     setThingType(getCellOrValueType(thing));
     setCurrentThing(thing);
     if (isObject(thing)) {
-      setObjectThingJson(jsonString(thing));
+      setObjectThing(jsonString(thing));
     } else if (isArray(thing)) {
-      setArrayThingJson(jsonString(thing));
+      setArrayThing(jsonString(thing));
     } else {
       setStringThing(String(thing));
       setNumberThing(Number(thing) || 0);
@@ -701,6 +711,22 @@ 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(
@@ -716,8 +742,8 @@ const EditableThing = ({
         stringThing,
         numberThing,
         booleanThing,
-        objectThingJson ? jsonParse(objectThingJson) : {},
-        arrayThingJson ? jsonParse(arrayThingJson) : [],
+        tryReturn(() => jsonParse(objectThing), {}),
+        tryReturn(() => jsonParse(arrayThing), []),
       );
       setThingType(nextType);
       setCurrentThing(thing2);
@@ -729,8 +755,8 @@ const EditableThing = ({
     stringThing,
     numberThing,
     booleanThing,
-    objectThingJson,
-    arrayThingJson,
+    objectThing,
+    arrayThing,
     thingType,
   ]);
   const widget = getTypeCase(
@@ -783,41 +809,37 @@ const EditableThing = ({
       thingType,
     ),
     /* @__PURE__ */ jsx(
-      'textarea',
+      'input',
       {
-        value: objectThingJson,
+        value: objectThing,
+        className: objectClassName,
         onChange: useCallback(
-          (event) => {
-            const str = event[CURRENT_TARGET][_VALUE];
-            setObjectThingJson(str);
-            try {
-              const parsed = jsonParse(str);
-              if (isObject(parsed)) {
-                onThingChange(parsed);
-              }
-            } catch {}
-          },
-          [onThingChange],
+          (event) =>
+            handleJsonThingChange(
+              event[CURRENT_TARGET][_VALUE],
+              setObjectThing,
+              isObject,
+              setObjectClassName,
+            ),
+          [handleJsonThingChange],
         ),
       },
       thingType,
     ),
     /* @__PURE__ */ jsx(
-      'textarea',
+      'input',
       {
-        value: arrayThingJson,
+        value: arrayThing,
+        className: arrayClassName,
         onChange: useCallback(
-          (event) => {
-            const str = event[CURRENT_TARGET][_VALUE];
-            setArrayThingJson(str);
-            try {
-              const parsed = jsonParse(str);
-              if (isArray(parsed)) {
-                onThingChange(parsed);
-              }
-            } catch {}
-          },
-          [onThingChange],
+          (event) =>
+            handleJsonThingChange(
+              event[CURRENT_TARGET][_VALUE],
+              setArrayThing,
+              isArray,
+              setArrayClassName,
+            ),
+          [handleJsonThingChange],
         ),
       },
       thingType,

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

@@ -58,6 +58,14 @@ const isArray = (thing) => Array.isArray(thing);
 const size = (arrayOrString) => arrayOrString.length;
 const getUndefined = () => void 0;
 const getArg = (value) => value;
+const tryReturn = (tryF, catchReturn) => {
+  try {
+    return tryF();
+  } catch {
+    /* istanbul ignore next */
+    return catchReturn;
+  }
+};
 
 const arrayEvery = (array, cb) => array.every(cb);
 const arrayIsEqual = (array1, array2) =>
@@ -678,15 +686,17 @@ const EditableThing = ({
   const [stringThing, setStringThing] = useState();
   const [numberThing, setNumberThing] = useState();
   const [booleanThing, setBooleanThing] = useState();
-  const [objectThingJson, setObjectThingJson] = useState(EMPTY_STRING);
-  const [arrayThingJson, setArrayThingJson] = useState(EMPTY_STRING);
+  const [objectThing, setObjectThing] = useState('{}');
+  const [arrayThing, setArrayThing] = useState('[]');
+  const [objectClassName, setObjectClassName] = useState('');
+  const [arrayClassName, setArrayClassName] = useState('');
   if (currentThing !== thing) {
     setThingType(getCellOrValueType(thing));
     setCurrentThing(thing);
     if (isObject(thing)) {
-      setObjectThingJson(jsonString(thing));
+      setObjectThing(jsonString(thing));
     } else if (isArray(thing)) {
-      setArrayThingJson(jsonString(thing));
+      setArrayThing(jsonString(thing));
     } else {
       setStringThing(String(thing));
       setNumberThing(Number(thing) || 0);
@@ -701,6 +711,22 @@ 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(
@@ -716,8 +742,8 @@ const EditableThing = ({
         stringThing,
         numberThing,
         booleanThing,
-        objectThingJson ? jsonParse(objectThingJson) : {},
-        arrayThingJson ? jsonParse(arrayThingJson) : [],
+        tryReturn(() => jsonParse(objectThing), {}),
+        tryReturn(() => jsonParse(arrayThing), []),
       );
       setThingType(nextType);
       setCurrentThing(thing2);
@@ -729,8 +755,8 @@ const EditableThing = ({
     stringThing,
     numberThing,
     booleanThing,
-    objectThingJson,
-    arrayThingJson,
+    objectThing,
+    arrayThing,
     thingType,
   ]);
   const widget = getTypeCase(
@@ -783,41 +809,37 @@ const EditableThing = ({
       thingType,
     ),
     /* @__PURE__ */ jsx(
-      'textarea',
+      'input',
       {
-        value: objectThingJson,
+        value: objectThing,
+        className: objectClassName,
         onChange: useCallback(
-          (event) => {
-            const str = event[CURRENT_TARGET][_VALUE];
-            setObjectThingJson(str);
-            try {
-              const parsed = jsonParse(str);
-              if (isObject(parsed)) {
-                onThingChange(parsed);
-              }
-            } catch {}
-          },
-          [onThingChange],
+          (event) =>
+            handleJsonThingChange(
+              event[CURRENT_TARGET][_VALUE],
+              setObjectThing,
+              isObject,
+              setObjectClassName,
+            ),
+          [handleJsonThingChange],
         ),
       },
       thingType,
     ),
     /* @__PURE__ */ jsx(
-      'textarea',
+      'input',
       {
-        value: arrayThingJson,
+        value: arrayThing,
+        className: arrayClassName,
         onChange: useCallback(
-          (event) => {
-            const str = event[CURRENT_TARGET][_VALUE];
-            setArrayThingJson(str);
-            try {
-              const parsed = jsonParse(str);
-              if (isArray(parsed)) {
-                onThingChange(parsed);
-              }
-            } catch {}
-          },
-          [onThingChange],
+          (event) =>
+            handleJsonThingChange(
+              event[CURRENT_TARGET][_VALUE],
+              setArrayThing,
+              isArray,
+              setArrayClassName,
+            ),
+          [handleJsonThingChange],
         ),
       },
       thingType,