tinybase 8.4.0-beta.0 → 8.4.0

package/ui-solid/index.js

@@ -8,7 +8,7 @@ import {
   untrack,
   useContext,
 } from 'solid-js';
-import h from 'solid-js/h';
+import {createComponent, memo, mergeProps} from 'solid-js/web';
 
 const getTypeOf = (thing) => typeof thing;
 const TINYBASE = 'tinybase';
@@ -296,11 +296,14 @@ const Provider = (props) => {
     addExtraThingById,
     delExtraThingById,
   ]);
-  return /* @__PURE__ */ h(
-    Context.Provider,
-    {value: {value: contextValue}},
-    () => props.children,
-  );
+  return createComponent(Context.Provider, {
+    value: {
+      value: contextValue,
+    },
+    get children() {
+      return props.children;
+    },
+  });
 };
 
 const EMPTY_ARRAY = [];
@@ -1555,13 +1558,14 @@ const CheckpointView = (props) => {
     () => props.checkpointId,
     () => props.checkpoints,
   );
-  return () =>
+  return memo(() =>
     wrap(
       getValue(checkpoint) ?? EMPTY_STRING,
       void 0,
       props.debugIds,
       props.checkpointId,
-    );
+    ),
+  );
 };
 
 const ResultCellView = (props) => {
@@ -1571,13 +1575,14 @@ const ResultCellView = (props) => {
     () => props.cellId,
     () => props.queries,
   );
-  return () =>
+  return memo(() =>
     wrap(
       EMPTY_STRING + (getValue(resultCell) ?? EMPTY_STRING),
       void 0,
       props.debugIds,
       props.cellId,
-    );
+    ),
+  );
 };
 
 const ResultRowView = (props) => {
@@ -1586,24 +1591,38 @@ const ResultRowView = (props) => {
     () => props.rowId,
     () => props.queries,
   );
-  return () => {
+  const content = () => {
     const ResultCell = props.resultCellComponent ?? ResultCellView;
     return wrap(
       arrayMap(getValue(resultCellIds), (cellId) =>
-        /* @__PURE__ */ h(ResultCell, {
-          ...getProps(props.getResultCellComponentProps, cellId),
-          queryId: props.queryId,
-          rowId: props.rowId,
-          cellId,
-          queries: props.queries,
-          debugIds: props.debugIds,
-        }),
+        createComponent(
+          ResultCell,
+          mergeProps(
+            () => getProps(props.getResultCellComponentProps, cellId),
+            {
+              get queryId() {
+                return props.queryId;
+              },
+              get rowId() {
+                return props.rowId;
+              },
+              cellId: cellId,
+              get queries() {
+                return props.queries;
+              },
+              get debugIds() {
+                return props.debugIds;
+              },
+            },
+          ),
+        ),
       ),
       props.separator,
       props.debugIds,
       props.rowId,
     );
   };
+  return memo(content);
 };
 
 const CellView = (props) => {
@@ -1613,13 +1632,14 @@ const CellView = (props) => {
     () => props.cellId,
     () => props.store,
   );
-  return () =>
+  return memo(() =>
     wrap(
       EMPTY_STRING + (getValue(cell) ?? EMPTY_STRING),
       void 0,
       props.debugIds,
       props.cellId,
-    );
+    ),
+  );
 };
 
 const useCustomOrDefaultCellIds = (customCellIds, tableId, rowId, store) => {
@@ -1634,64 +1654,95 @@ const RowView = (props) => {
     () => props.rowId,
     () => props.store,
   );
-  return () => {
+  const content = () => {
     const Cell = props.cellComponent ?? CellView;
     return wrap(
       arrayMap(getValue(cellIds), (cellId) =>
-        /* @__PURE__ */ h(Cell, {
-          ...getProps(props.getCellComponentProps, cellId),
-          tableId: props.tableId,
-          rowId: props.rowId,
-          cellId,
-          store: props.store,
-          debugIds: props.debugIds,
-        }),
+        createComponent(
+          Cell,
+          mergeProps(() => getProps(props.getCellComponentProps, cellId), {
+            get tableId() {
+              return props.tableId;
+            },
+            get rowId() {
+              return props.rowId;
+            },
+            cellId: cellId,
+            get store() {
+              return props.store;
+            },
+            get debugIds() {
+              return props.debugIds;
+            },
+          }),
+        ),
       ),
       props.separator,
       props.debugIds,
       props.rowId,
     );
   };
+  return memo(content);
 };
 
 const tableView = (props, rowIds) => {
-  return () => {
+  const content = () => {
     const Row = props.rowComponent ?? RowView;
     return wrap(
       arrayMap(getValue(rowIds), (rowId) =>
-        /* @__PURE__ */ h(Row, {
-          ...getProps(props.getRowComponentProps, rowId),
-          tableId: props.tableId,
-          rowId,
-          customCellIds: props.customCellIds,
-          store: props.store,
-          debugIds: props.debugIds,
-        }),
+        createComponent(
+          Row,
+          mergeProps(() => getProps(props.getRowComponentProps, rowId), {
+            get tableId() {
+              return props.tableId;
+            },
+            rowId: rowId,
+            get customCellIds() {
+              return props.customCellIds;
+            },
+            get store() {
+              return props.store;
+            },
+            get debugIds() {
+              return props.debugIds;
+            },
+          }),
+        ),
       ),
       props.separator,
       props.debugIds,
       props.tableId,
     );
   };
+  return memo(content);
 };
 const resultTableView = (props, rowIds) => {
-  return () => {
+  const content = () => {
     const ResultRow = props.resultRowComponent ?? ResultRowView;
     return wrap(
       arrayMap(getValue(rowIds), (rowId) =>
-        /* @__PURE__ */ h(ResultRow, {
-          ...getProps(props.getResultRowComponentProps, rowId),
-          queryId: props.queryId,
-          rowId,
-          queries: props.queries,
-          debugIds: props.debugIds,
-        }),
+        createComponent(
+          ResultRow,
+          mergeProps(() => getProps(props.getResultRowComponentProps, rowId), {
+            get queryId() {
+              return props.queryId;
+            },
+            rowId: rowId,
+            get queries() {
+              return props.queries;
+            },
+            get debugIds() {
+              return props.debugIds;
+            },
+          }),
+        ),
       ),
       props.separator,
       props.debugIds,
       props.queryId,
     );
   };
+  return memo(content);
 };
 const useComponentPerRow = (props, getRowIdsHook, rowId) => {
   const resolvedRelationships = useRelationshipsOrRelationshipsById(
@@ -1702,7 +1753,7 @@ const useComponentPerRow = (props, getRowIdsHook, rowId) => {
     rowId,
     resolvedRelationships,
   );
-  return () => {
+  const content = () => {
     const Row = props.rowComponent ?? RowView;
     const [_relationship, store, localTableId] = getRelationshipsStoreTableIds(
       getValue(resolvedRelationships),
@@ -1710,39 +1761,54 @@ const useComponentPerRow = (props, getRowIdsHook, rowId) => {
     );
     return wrap(
       arrayMap(getValue(rowIds), (localRowId) =>
-        /* @__PURE__ */ h(Row, {
-          ...getProps(props.getRowComponentProps, localRowId),
-          tableId: localTableId,
-          rowId: localRowId,
-          store,
-          debugIds: props.debugIds,
-        }),
+        createComponent(
+          Row,
+          mergeProps(() => getProps(props.getRowComponentProps, localRowId), {
+            tableId: localTableId,
+            rowId: localRowId,
+            store: store,
+            get debugIds() {
+              return props.debugIds;
+            },
+          }),
+        ),
       ),
       props.separator,
       props.debugIds,
       getValue(rowId),
     );
   };
+  return memo(content);
 };
 const getUseCheckpointView = (getCheckpoints) => (props) => {
   const resolvedCheckpoints = useCheckpointsOrCheckpointsById(
     () => props.checkpoints,
   );
   const checkpointIds = useCheckpointIds(resolvedCheckpoints);
-  return () => {
+  const content = () => {
     const Checkpoint = props.checkpointComponent ?? CheckpointView;
     return wrap(
       arrayMap(getCheckpoints(getValue(checkpointIds)), (checkpointId) =>
-        /* @__PURE__ */ h(Checkpoint, {
-          ...getProps(props.getCheckpointComponentProps, checkpointId),
-          checkpoints: getValue(resolvedCheckpoints),
-          checkpointId,
-          debugIds: props.debugIds,
-        }),
+        createComponent(
+          Checkpoint,
+          mergeProps(
+            () => getProps(props.getCheckpointComponentProps, checkpointId),
+            {
+              get checkpoints() {
+                return getValue(resolvedCheckpoints);
+              },
+              checkpointId: checkpointId,
+              get debugIds() {
+                return props.debugIds;
+              },
+            },
+          ),
+        ),
       ),
       props.separator,
     );
   };
+  return memo(content);
 };
 
 const BackwardCheckpointsView = getUseCheckpointView(
@@ -1764,7 +1830,7 @@ const SliceView = (props) => {
     () => props.sliceId,
     resolvedIndexes,
   );
-  return () => {
+  const content = () => {
     const Row = props.rowComponent ?? RowView;
     const [_indexesValue, store, tableId] = getIndexStoreTableId(
       getValue(resolvedIndexes),
@@ -1772,19 +1838,24 @@ const SliceView = (props) => {
     );
     return wrap(
       arrayMap(getValue(rowIds), (rowId) =>
-        /* @__PURE__ */ h(Row, {
-          ...getProps(props.getRowComponentProps, rowId),
-          tableId,
-          rowId,
-          store,
-          debugIds: props.debugIds,
-        }),
+        createComponent(
+          Row,
+          mergeProps(() => getProps(props.getRowComponentProps, rowId), {
+            tableId: tableId,
+            rowId: rowId,
+            store: store,
+            get debugIds() {
+              return props.debugIds;
+            },
+          }),
+        ),
       ),
       props.separator,
       props.debugIds,
       props.sliceId,
     );
   };
+  return memo(content);
 };
 
 const IndexView = (props) => {
@@ -1792,23 +1863,32 @@ const IndexView = (props) => {
     () => props.indexId,
     () => props.indexes,
   );
-  return () => {
+  const content = () => {
     const Slice = props.sliceComponent ?? SliceView;
     return wrap(
       arrayMap(getValue(sliceIds), (sliceId) =>
-        /* @__PURE__ */ h(Slice, {
-          ...getProps(props.getSliceComponentProps, sliceId),
-          indexId: props.indexId,
-          sliceId,
-          indexes: props.indexes,
-          debugIds: props.debugIds,
-        }),
+        createComponent(
+          Slice,
+          mergeProps(() => getProps(props.getSliceComponentProps, sliceId), {
+            get indexId() {
+              return props.indexId;
+            },
+            sliceId: sliceId,
+            get indexes() {
+              return props.indexes;
+            },
+            get debugIds() {
+              return props.debugIds;
+            },
+          }),
+        ),
       ),
       props.separator,
       props.debugIds,
       props.indexId,
     );
   };
+  return memo(content);
 };
 
 const LinkedRowsView = (props) =>
@@ -1822,13 +1902,14 @@ const MetricView = (props) => {
     () => props.metricId,
     () => props.metrics,
   );
-  return () =>
+  return memo(() =>
     wrap(
       getValue(metric) ?? EMPTY_STRING,
       void 0,
       props.debugIds,
       props.metricId,
-    );
+    ),
+  );
 };
 
 const RemoteRowView = (props) => {
@@ -1840,7 +1921,7 @@ const RemoteRowView = (props) => {
     () => props.localRowId,
     resolvedRelationships,
   );
-  return () => {
+  const content = () => {
     const Row = props.rowComponent ?? RowView;
     const [_relationshipsValue, store, , remoteTableId] =
       getRelationshipsStoreTableIds(
@@ -1851,18 +1932,26 @@ const RemoteRowView = (props) => {
     return wrap(
       isUndefined(remoteTableId) || isUndefined(remoteRowId)
         ? null
-        : /* @__PURE__ */ h(Row, {
-            ...getProps(props.getRowComponentProps, remoteRowId),
-            tableId: remoteTableId,
-            rowId: remoteRowId,
-            store,
-            debugIds: props.debugIds,
-          }),
+        : createComponent(
+            Row,
+            mergeProps(
+              () => getProps(props.getRowComponentProps, remoteRowId),
+              {
+                tableId: remoteTableId,
+                rowId: remoteRowId,
+                store: store,
+                get debugIds() {
+                  return props.debugIds;
+                },
+              },
+            ),
+          ),
       void 0,
       props.debugIds,
       props.localRowId,
     );
   };
+  return memo(content);
 };
 
 const ResultSortedTableView = (props) =>
@@ -1911,20 +2000,27 @@ const TableView = (props) =>
 
 const TablesView = (props) => {
   const tableIds = useTableIds(() => props.store);
-  return () => {
+  const content = () => {
     const Table = props.tableComponent ?? TableView;
     return wrap(
       arrayMap(getValue(tableIds), (tableId) =>
-        /* @__PURE__ */ h(Table, {
-          ...getProps(props.getTableComponentProps, tableId),
-          tableId,
-          store: props.store,
-          debugIds: props.debugIds,
-        }),
+        createComponent(
+          Table,
+          mergeProps(() => getProps(props.getTableComponentProps, tableId), {
+            tableId: tableId,
+            get store() {
+              return props.store;
+            },
+            get debugIds() {
+              return props.debugIds;
+            },
+          }),
+        ),
       ),
       props.separator,
     );
   };
+  return memo(content);
 };
 
 const ValueView = (props) => {
@@ -1932,31 +2028,39 @@ const ValueView = (props) => {
     () => props.valueId,
     () => props.store,
   );
-  return () =>
+  return memo(() =>
     wrap(
       EMPTY_STRING + (getValue(value) ?? EMPTY_STRING),
       void 0,
       props.debugIds,
       props.valueId,
-    );
+    ),
+  );
 };
 
 const ValuesView = (props) => {
   const valueIds = useValueIds(() => props.store);
-  return () => {
+  const content = () => {
     const Value = props.valueComponent ?? ValueView;
     return wrap(
       arrayMap(getValue(valueIds), (valueId) =>
-        /* @__PURE__ */ h(Value, {
-          ...getProps(props.getValueComponentProps, valueId),
-          valueId,
-          store: props.store,
-          debugIds: props.debugIds,
-        }),
+        createComponent(
+          Value,
+          mergeProps(() => getProps(props.getValueComponentProps, valueId), {
+            valueId: valueId,
+            get store() {
+              return props.store;
+            },
+            get debugIds() {
+              return props.debugIds;
+            },
+          }),
+        ),
       ),
       props.separator,
     );
   };
+  return memo(content);
 };
 
 export {