tinybase 3.1.0-beta.1 → 3.1.0-beta.2

package/lib/debug/tools.js

@@ -114,6 +114,8 @@ const getIdsDoc = (idsNoun, parentNoun, sorted = 0) =>
   parentNoun;
 const getForEachDoc = (childNoun, parentNoun) =>
   `Calls a function for each ${childNoun} in ` + parentNoun;
+const getPropsDoc = (childNoun) =>
+  'The props passed to a component that renders ' + childNoun;
 const getCallbackDoc = (takes) => 'A function that takes ' + takes;
 const getListenerTypeDoc = (childNoun, parentNoun = 0) =>
   A_FUNCTION_FOR +
@@ -153,6 +155,7 @@ const VERBS = [
   GETS_A_CALLBACK_THAT_CAN + 'add',
   GETS_A_CALLBACK_THAT_CAN + 'set part of',
   GETS_A_CALLBACK_THAT_CAN + 'delete',
+  'Renders',
 ];
 const NOUNS = [
   THE_STORE,
@@ -543,6 +546,7 @@ const getStoreCoreApi = (tablesSchema, valuesSchema, module) => {
       mapSet(tablesTypes, tableId, tableTypes);
       addImport(1, moduleDefinition, ...tableTypes);
     });
+    addImport(null, 'tinybase', IDS);
     const tablesType = addType(
       TABLES,
       `{${join(
@@ -1163,6 +1167,7 @@ const getStoreCoreApi = (tablesSchema, valuesSchema, module) => {
       valueIdsListenerType,
       valueListenerType,
       invalidValueListenerType,
+      ...collValues(mapCellOrValueTypes),
     );
     addImport(0, 'tinybase', 'ValueChange');
     arrayPush(
@@ -1191,16 +1196,7 @@ const getStoreCoreApi = (tablesSchema, valuesSchema, module) => {
       `Takes a ${type} Cell value and returns another`,
     ),
   );
-  addImport(
-    null,
-    'tinybase',
-    'DoRollback',
-    ID,
-    'IdOrNull',
-    IDS,
-    JSON$1,
-    'Store',
-  );
+  addImport(null, 'tinybase', 'DoRollback', ID, 'IdOrNull', JSON$1, 'Store');
   const transactionListenerType = addType(
     TRANSACTION + LISTENER,
     `(${storeInstance}: ${storeType}, cellsTouched: boolean, valuesTouched: boolean)` +
@@ -1341,26 +1337,42 @@ const DEPS = 'Deps';
 const getGet = (noun) => GET + noun;
 const getGetAndGetDeps = (noun) =>
   getParameterList(getGet(noun), getGet(noun) + DEPS);
+const getPropsTypeList = (...props) =>
+  '{' +
+  join(
+    arrayMap(props, (prop) => 'readonly ' + prop),
+    '; ',
+  ) +
+  '}';
+const DEBUG_IDS_PROP_TYPE = 'debugIds?: boolean';
+const DEBUG_IDS_PROP = 'debugIds={debugIds}';
+const DEPS_SUFFIX = DEPS + '?: React.DependencyList';
+const THEN_DEPS = 'then' + DEPS_SUFFIX;
 const PARAMETER = 'Parameter';
 const GETTER_ARGS = ': (parameter: ' + PARAMETER + ', store: Store) => ';
+const PROVIDER = 'Provider';
 const USE_CONTEXT = 'const contextValue = useContext(Context);';
 const AND_REGISTERS =
   ', and registers a listener so that any changes to that result will cause a re-render';
 const BASED_ON_A_PARAMETER = ', based on a parameter';
 const COLON_SPACE = ': ';
+const OPTIONAL_COLON = '?: ';
+const GENERIC_PARAMETER = '<' + PARAMETER + ',>';
 const PARAMETERIZED_CALLBACK =
   PARAMETER + 'ized' + CALLBACK + '<' + PARAMETER + '>';
-const GENERIC_PARAMETER = '<' + PARAMETER + ',>';
-const DEPS_SUFFIX = DEPS + '?: React.DependencyList';
-const THEN_DEPS = 'then' + DEPS_SUFFIX;
+const PROPS = 'Props';
+const ROW_ID = 'rowId';
+const ROW_ID_PROP = 'rowId={rowId}';
+const SEPARATOR_AND_DEBUG_IDS = ', separator, debugIds';
+const SEPARATOR_PROP_TYPE = 'separator?: ReactElement | string';
 const THEN_PREFIX = 'then?: (store: Store';
 const THEN_AND_THEN_DEPS = getParameterList(
   THEN_PREFIX + ')' + RETURNS_VOID,
   THEN_DEPS,
 );
 const THEN_AND_THEN_DEPS_IN_CALL = 'then, then' + DEPS;
-const ROW_ID = 'rowId';
 const TYPED_ROW_ID = ROW_ID + COLON_SPACE + ID;
+const VIEW = 'View';
 const getListenerHookParams = (listenerType, ...extraParams) =>
   getParameterList(
     ...extraParams,
@@ -1399,6 +1411,7 @@ const getStoreUiReactApi = (
   const storeInstance = camel(storeType);
   const StoreOrStoreId = storeType + 'Or' + storeType + ID;
   const storeOrStoreId = storeInstance + 'Or' + storeType + ID;
+  const storeProp = storeInstance + `={${storeInstance}}`;
   const functions = mapNew();
   const addFunction = (
     name,
@@ -1412,7 +1425,7 @@ const getStoreUiReactApi = (
     return mapUnique(functions, name, [
       parameters,
       returnType,
-      isArray(body) ? ['{', body, '}'] : body,
+      body,
       doc,
       generic,
     ]);
@@ -1441,7 +1454,7 @@ const getStoreUiReactApi = (
       tinyBaseUiReact,
       `use${underlyingName} as use${underlyingName}Core`,
     );
-    addHook(
+    return addHook(
       name,
       getParameterList(preParameters, storeOrStoreIdParameter, postParameters),
       returnType,
@@ -1449,7 +1462,7 @@ const getStoreUiReactApi = (
         `(${storeOrStoreId}, use${underlyingName}Core, [` +
         (preParametersInCall ? preParametersInCall : EMPTY_STRING) +
         (postParametersInCall ? '], [' + postParametersInCall : EMPTY_STRING) +
-        '])',
+        ']);',
       doc,
       generic,
     );
@@ -1482,13 +1495,12 @@ const getStoreUiReactApi = (
     null,
     'tinybase',
     ID,
-    IDS,
-    'IdOrNull',
     'Store',
     CALLBACK,
     PARAMETER + 'ized' + CALLBACK,
   );
   addImport(0, tinyBaseUiReact, 'ComponentReturnType');
+  addImport(null, tinyBaseUiReact, 'ExtraProps');
   addImport(0, moduleDefinition, storeType);
   const storeOrStoreIdType = addType(
     StoreOrStoreId,
@@ -1496,13 +1508,20 @@ const getStoreUiReactApi = (
     `Used when you need to refer to a ${storeType} in a React hook or component`,
   );
   const providerPropsType = addType(
-    'ProviderProps',
-    `{readonly ${storeInstance}?: ${storeType}; readonly ${storeInstance}ById?: {[${storeInstance}Id: Id]: ${storeType}}}`,
-    `Used with the Provider component, so that a ${storeType} can be passed into the context of an application`,
+    PROVIDER + PROPS,
+    getPropsTypeList(
+      storeInstance + OPTIONAL_COLON + storeType,
+      storeInstance + `ById?: {[${storeInstance}Id: Id]: ${storeType}}`,
+    ),
+    `Used with the ${PROVIDER} component, so that a ` +
+      storeType +
+      ' can be passed into the context of an application',
   );
+  addImport(0, 'react', 'ReactElement', 'ComponentType');
   addImport(1, 'react', 'React');
   addImport(1, uiReactModuleDefinition, storeOrStoreIdType, providerPropsType);
-  const storeOrStoreIdParameter = storeOrStoreId + '?: ' + storeOrStoreIdType;
+  const storeOrStoreIdParameter =
+    storeOrStoreId + OPTIONAL_COLON + storeOrStoreIdType;
   addConstant('{createContext, useContext, useMemo}', 'React');
   addConstant(
     'Context',
@@ -1520,10 +1539,12 @@ const getStoreUiReactApi = (
     `id?: Id`,
     storeType + OR_UNDEFINED,
     [
+      '{',
       USE_CONTEXT,
       'return id == null ? contextValue[0] : contextValue[1]?.[id];',
+      '}',
     ],
-    `Get a reference to a ${storeType} from within a Provider component context`,
+    `Get a reference to a ${storeType} from within a ${PROVIDER} component context`,
   );
   const useHook = addInternalFunction(
     `useHook`,
@@ -1535,6 +1556,27 @@ const getStoreUiReactApi = (
       `? ${storeInstance} : ${storeOrStoreId})?.getStore(), ...postParams)`,
     ],
   );
+  const getProps = addInternalFunction(
+    'getProps',
+    'getProps: ((id: any) => ExtraProps) | undefined, id: Id',
+    '(getProps == null) ? ({} as ExtraProps) : getProps(id)',
+  );
+  const wrap = addInternalFunction(
+    'wrap',
+    getParameterList(
+      'children: any',
+      'separator?: any',
+      'encloseWithId?: boolean',
+      'id?: Id',
+    ),
+    [
+      'const separated = separator==null || !Array.isArray(children)',
+      ' ? children',
+      ' : children.map((child, c) => (c > 0 ? [separator, child] : child));',
+      `return encloseWithId ? [id, ':{', separated, '}'] : separated;`,
+    ],
+  );
+  const NullComponent = addConstant('NullComponent', `() => null`);
   if (!objIsEmpty(tablesSchema)) {
     const [
       tablesType,
@@ -1563,15 +1605,68 @@ const getStoreUiReactApi = (
       cellIdsListenerType,
       cellListenerType,
     );
-    addImport(1, tinyBaseUiReact);
     addImport(1, moduleDefinition, storeType);
+    addImport(null, 'tinybase', IDS, 'IdOrNull');
+    const tableView = addInternalFunction(
+      'tableView',
+      `{${storeInstance}, rowComponent, getRowComponentProps` +
+        SEPARATOR_AND_DEBUG_IDS +
+        '}: any, rowIds: Ids, tableId: Id, defaultRowComponent: React.ComponentType<any>',
+      [
+        'const Row = rowComponent ?? defaultRowComponent;',
+        `return ${wrap}(rowIds.map((rowId) => (`,
+        '<Row',
+        '{...' + getProps + '(getRowComponentProps, rowId)}',
+        'key={rowId}',
+        'tableId={tableId}',
+        ROW_ID_PROP,
+        storeProp,
+        DEBUG_IDS_PROP,
+        '/>',
+        '))',
+        SEPARATOR_AND_DEBUG_IDS,
+        ', tableId,',
+        ');',
+      ],
+    );
+    const getDefaultTableComponent = addInternalFunction(
+      'getDefaultTableComponent',
+      'tableId: Id',
+      join(
+        mapTablesSchema(
+          (_, tableName, TABLE_ID) =>
+            `tableId == ${TABLE_ID} ? ${tableName}TableView : `,
+        ),
+      ) + NullComponent,
+    );
+    const getDefaultCellComponent = addInternalFunction(
+      'getDefaultCellComponent',
+      'tableId: Id, cellId: Id',
+      join(
+        mapTablesSchema(
+          (tableId, tableName, TABLE_ID) =>
+            `tableId == ${TABLE_ID} ? ${
+              join(
+                mapCellSchema(
+                  tableId,
+                  (_, _2, _3, CELL_ID, cellName) =>
+                    `cellId == ${CELL_ID} ? ` +
+                    tableName +
+                    cellName +
+                    'CellView : ',
+                ),
+              ) + NullComponent
+            } : `,
+        ),
+      ) + NullComponent,
+    );
     addProxyHook(
       TABLES,
       TABLES,
       tablesType,
       getTheContentOfTheStoreDoc(1, 0) + AND_REGISTERS,
     );
-    addProxyHook(
+    const useTableIds = addProxyHook(
       TABLE_IDS,
       TABLE_IDS,
       tableIdType + SQUARE_BRACKETS,
@@ -1606,6 +1701,58 @@ const getStoreUiReactApi = (
       THEN_AND_THEN_DEPS,
       THEN_AND_THEN_DEPS_IN_CALL,
     );
+    const tablesPropsType = addType(
+      TABLES + PROPS,
+      getPropsTypeList(
+        storeInstance + OPTIONAL_COLON + storeType,
+        'tableComponents?: {' +
+          join(
+            mapTablesSchema(
+              (tableId, tableName) =>
+                `'${tableId}'?: ComponentType<${tableName}TableProps>`,
+            ),
+            ', ',
+          ) +
+          '}',
+        `getTableComponentProps?: (tableId: ${tableIdType}) => ExtraProps`,
+        SEPARATOR_PROP_TYPE,
+        DEBUG_IDS_PROP_TYPE,
+      ),
+      getPropsDoc(getTheContentOfDoc(1, 1)),
+    );
+    const cellPropsType = addType(
+      CELL + PROPS,
+      getPropsTypeList(
+        'rowId: Id',
+        storeInstance + OPTIONAL_COLON + storeType,
+        DEBUG_IDS_PROP_TYPE,
+      ),
+      getPropsDoc('a Cell'),
+    );
+    addImport(1, uiReactModuleDefinition, tablesPropsType, cellPropsType);
+    addComponent(
+      TABLES + VIEW,
+      '{' +
+        storeInstance +
+        ', tableComponents, getTableComponentProps' +
+        SEPARATOR_AND_DEBUG_IDS +
+        '}: ' +
+        tablesPropsType,
+      [
+        wrap + `(${useTableIds}(${storeInstance}).map((tableId) => {`,
+        'const Table = tableComponents?.[tableId] ?? ' +
+          getDefaultTableComponent +
+          '(tableId);',
+        'return <Table',
+        `{...${getProps}(getTableComponentProps, tableId)}`,
+        'key={tableId}',
+        storeProp,
+        DEBUG_IDS_PROP,
+        '/>;',
+        '}), separator)',
+      ],
+      getTheContentOfTheStoreDoc(1, 13) + AND_REGISTERS,
+    );
     mapTablesSchema((tableId, tableName, TABLE_ID) => {
       const [tableType, rowType, rowWhenSetType, cellIdType] = mapGet(
         tablesTypes,
@@ -1635,7 +1782,7 @@ const getStoreUiReactApi = (
         EMPTY_STRING,
         TABLE_ID,
       );
-      addProxyHook(
+      const useRowIds = addProxyHook(
         tableName + ROW_IDS,
         ROW_IDS,
         IDS,
@@ -1643,7 +1790,7 @@ const getStoreUiReactApi = (
         EMPTY_STRING,
         TABLE_ID,
       );
-      addProxyHook(
+      const useSortedRowIds = addProxyHook(
         tableName + SORTED_ROW_IDS,
         SORTED_ROW_IDS,
         IDS,
@@ -1661,7 +1808,7 @@ const getStoreUiReactApi = (
         TYPED_ROW_ID,
         getParameterList(TABLE_ID, ROW_ID),
       );
-      addProxyHook(
+      const useCellIds = addProxyHook(
         tableName + CELL_IDS,
         CELL_IDS,
         cellIdType + SQUARE_BRACKETS,
@@ -1767,13 +1914,109 @@ const getStoreUiReactApi = (
         THEN_AND_THEN_DEPS,
         THEN_AND_THEN_DEPS_IN_CALL,
       );
+      const rowPropsType = addType(
+        tableName + 'RowProps',
+        getPropsTypeList(
+          'rowId: Id',
+          storeInstance + OPTIONAL_COLON + storeType,
+          'cellComponents?: {' +
+            join(
+              mapCellSchema(
+                tableId,
+                (cellId) => `'${cellId}'?: ComponentType<${cellPropsType}>`,
+              ),
+              ', ',
+            ) +
+            '}',
+          `getCellComponentProps?: (cellId: ${cellIdType}) => ExtraProps`,
+          SEPARATOR_PROP_TYPE,
+          DEBUG_IDS_PROP_TYPE,
+        ),
+        getPropsDoc(getRowDoc(tableId)),
+      );
+      const tablePropsType = addType(
+        tableName + 'TableProps',
+        getPropsTypeList(
+          storeInstance + OPTIONAL_COLON + storeType,
+          `rowComponent?: ComponentType<${rowPropsType}>`,
+          `getRowComponentProps?: (rowId: Id) => ExtraProps`,
+          SEPARATOR_PROP_TYPE,
+          DEBUG_IDS_PROP_TYPE,
+        ),
+        getPropsDoc(getTableDoc(tableId)),
+      );
+      const sortedTablePropsType = addType(
+        tableName + 'SortedTableProps',
+        getPropsTypeList(
+          'cellId?: ' + cellIdType,
+          'descending?: boolean',
+          'offset?: number',
+          'limit?: number',
+          storeInstance + OPTIONAL_COLON + storeType,
+          `rowComponent?: ComponentType<${rowPropsType}>`,
+          `getRowComponentProps?: (rowId: Id) => ExtraProps`,
+          SEPARATOR_PROP_TYPE,
+          DEBUG_IDS_PROP_TYPE,
+        ),
+        getPropsDoc(getTableDoc(tableId)) + ', sorted',
+      );
+      addImport(
+        1,
+        uiReactModuleDefinition,
+        rowPropsType,
+        tablePropsType,
+        sortedTablePropsType,
+      );
+      const rowView = addComponent(
+        tableName + ROW + VIEW,
+        '{rowId, ' +
+          storeInstance +
+          ', cellComponents, getCellComponentProps' +
+          SEPARATOR_AND_DEBUG_IDS +
+          '}: ' +
+          rowPropsType,
+        [
+          wrap + `(${useCellIds}(rowId, ${storeInstance}).map((cellId) => {`,
+          'const Cell = cellComponents?.[cellId] ?? ' +
+            getDefaultCellComponent +
+            `(${TABLE_ID}, cellId);`,
+          'return <Cell',
+          `{...${getProps}(getCellComponentProps, cellId)} `,
+          'key={cellId}',
+          ROW_ID_PROP,
+          storeProp,
+          DEBUG_IDS_PROP,
+          '/>;',
+          '})' + SEPARATOR_AND_DEBUG_IDS + ', rowId)',
+        ],
+        getRowContentDoc(tableId, 13) + AND_REGISTERS,
+      );
+      addComponent(
+        tableName + 'Sorted' + TABLE + VIEW,
+        '{cellId, descending, offset, limit, ...props}: ' +
+          sortedTablePropsType,
+        tableView +
+          '(props, ' +
+          useSortedRowIds +
+          `(cellId, descending, offset, limit, props.${storeInstance}), ${TABLE_ID}, ${rowView});`,
+        getTableContentDoc(tableId, 13) + ', sorted' + AND_REGISTERS,
+      );
+      addComponent(
+        tableName + TABLE + VIEW,
+        'props: ' + tablePropsType,
+        tableView +
+          '(props, ' +
+          useRowIds +
+          `(props.${storeInstance}), ${TABLE_ID}, ${rowView});`,
+        getTableContentDoc(tableId, 13) + AND_REGISTERS,
+      );
       mapCellSchema(
         tableId,
         (cellId, type, defaultValue, CELL_ID, cellName) => {
           const mapCellType = 'Map' + camel(type, 1);
           addImport(0, moduleDefinition, mapCellType);
           addImport(1, moduleDefinition, mapCellType);
-          addProxyHook(
+          const useCell = addProxyHook(
             tableName + cellName + CELL,
             CELL,
             type + (isUndefined(defaultValue) ? OR_UNDEFINED : EMPTY_STRING),
@@ -1811,6 +2054,17 @@ const getStoreUiReactApi = (
             THEN_AND_THEN_DEPS,
             THEN_AND_THEN_DEPS_IN_CALL,
           );
+          addComponent(
+            tableName + cellName + CELL + VIEW,
+            `{rowId, ${storeInstance}, debugIds}: ` + cellPropsType,
+            [
+              wrap +
+                `('' + ${useCell}(rowId, ` +
+                storeInstance +
+                `) ?? '', undefined, debugIds, ${CELL_ID})`,
+            ],
+            getCellContentDoc(tableId, cellId, 13) + AND_REGISTERS,
+          );
         },
       );
     });
@@ -1927,13 +2181,24 @@ const getStoreUiReactApi = (
       valueListenerType,
     ] = sharedValueTypes;
     addImport(null, moduleDefinition, ...sharedValueTypes);
+    addImport(1, moduleDefinition, storeType);
+    const getDefaultValueComponent = addInternalFunction(
+      'getDefaultValueComponent',
+      'valueId: Id',
+      join(
+        mapValuesSchema(
+          (_, _2, _3, VALUE_ID, valueName) =>
+            `valueId == ${VALUE_ID} ? ` + valueName + 'ValueView : ',
+        ),
+      ) + NullComponent,
+    );
     addProxyHook(
       VALUES,
       VALUES,
       valuesType,
       getTheContentOfTheStoreDoc(2, 0) + AND_REGISTERS,
     );
-    addProxyHook(
+    const useValueIds = addProxyHook(
       VALUE_IDS,
       VALUE_IDS,
       valueIdType + SQUARE_BRACKETS,
@@ -1986,11 +2251,61 @@ const getStoreUiReactApi = (
       THEN_AND_THEN_DEPS,
       THEN_AND_THEN_DEPS_IN_CALL,
     );
+    const valuePropsType = addType(
+      VALUE + PROPS,
+      getPropsTypeList(
+        storeInstance + OPTIONAL_COLON + storeType,
+        DEBUG_IDS_PROP_TYPE,
+      ),
+      getPropsDoc('a Value'),
+    );
+    const valuesPropsType = addType(
+      VALUES + PROPS,
+      getPropsTypeList(
+        storeInstance + OPTIONAL_COLON + storeType,
+        'valueComponents?: {' +
+          join(
+            mapValuesSchema(
+              (valueId) => `'${valueId}'?: ComponentType<${valuePropsType}>`,
+            ),
+            ', ',
+          ) +
+          '}',
+        `getValueComponentProps?: (valueId: ${valueIdType}) => ExtraProps`,
+        SEPARATOR_PROP_TYPE,
+        DEBUG_IDS_PROP_TYPE,
+      ),
+      getPropsDoc(getTheContentOfDoc(2, 1)),
+    );
+    addImport(1, uiReactModuleDefinition, valuesPropsType, valuePropsType);
+    addComponent(
+      VALUES + VIEW,
+      '{' +
+        storeInstance +
+        ', valueComponents, getValueComponentProps' +
+        SEPARATOR_AND_DEBUG_IDS +
+        '}: ' +
+        valuesPropsType,
+      [
+        wrap + `(${useValueIds}(${storeInstance}).map((valueId) => {`,
+        'const Value = valueComponents?.[valueId] ?? ' +
+          getDefaultValueComponent +
+          '(valueId);',
+        'return <Value',
+        `{...${getProps}(getValueComponentProps, valueId)}`,
+        'key={valueId}',
+        storeProp,
+        DEBUG_IDS_PROP,
+        '/>;',
+        '}), separator)',
+      ],
+      getTheContentOfTheStoreDoc(2, 13) + AND_REGISTERS,
+    );
     mapValuesSchema((valueId, type, _, VALUE_ID, valueName) => {
       const mapValueType = 'Map' + camel(type, 1);
       addImport(0, moduleDefinition, mapValueType);
       addImport(1, moduleDefinition, mapValueType);
-      addProxyHook(
+      const useValue = addProxyHook(
         valueName + VALUE,
         VALUE,
         type,
@@ -2027,6 +2342,17 @@ const getStoreUiReactApi = (
         THEN_AND_THEN_DEPS,
         THEN_AND_THEN_DEPS_IN_CALL,
       );
+      addComponent(
+        valueName + VALUE + VIEW,
+        `{${storeInstance}, debugIds}: ` + valuePropsType,
+        [
+          wrap +
+            `('' + ${useValue}(` +
+            storeInstance +
+            `) ?? '', undefined, debugIds, ${VALUE_ID})`,
+        ],
+        getValueContentDoc(valueId, 13) + AND_REGISTERS,
+      );
     });
     addProxyHook(
       VALUES + LISTENER,
@@ -2057,21 +2383,23 @@ const getStoreUiReactApi = (
     );
   }
   addComponent(
-    'Provider',
+    PROVIDER,
     `{${storeInstance}, ${storeInstance}ById, children}: ` +
       providerPropsType +
       ' & {children: React.ReactNode}',
     [
+      '{',
       USE_CONTEXT,
       'return (',
-      '<Context.Provider',
+      '<Context.' + PROVIDER,
       'value={useMemo(',
       `() => [${storeInstance} ?? contextValue[0], {...contextValue[1], ...${storeInstance}ById}],`,
       `[${storeInstance}, ${storeInstance}ById, contextValue],`,
       ')}>',
       '{children}',
-      '</Context.Provider>',
+      `</Context.${PROVIDER}>`,
       ');',
+      '}',
     ],
     'Wraps part of an application in a context that provides default objects to be used by hooks and components within',
   );

package/lib/debug/ui-react.js

@@ -1126,11 +1126,11 @@ const Provider = ({
   );
 };
 const wrap = (children, separator, encloseWithId, id) => {
-  const separatedChildren =
+  const separated =
     isUndefined(separator) || !isArray(children)
       ? children
       : arrayMap(children, (child, c) => (c > 0 ? [separator, child] : child));
-  return encloseWithId ? [id, ':{', separatedChildren, '}'] : separatedChildren;
+  return encloseWithId ? [id, ':{', separated, '}'] : separated;
 };
 const CellView = ({tableId, rowId, cellId, store, debugIds}) =>
   wrap(

package/lib/es6/tools.d.ts

@@ -342,7 +342,7 @@ export interface Tools {
    *     price: {type: 'number'},
    *   },
    * });
-   * const [dTs, ts, dTsUiReact, tsUiReact] =
+   * const [dTs, ts, uiReactDTs, uiReactTsx] =
    *   createTools(store).getStoreApi('shop');
    *
    * const dTsLines = dTs.split('\n');
@@ -363,7 +363,7 @@ export interface Tools {
    *   fido: {price: 5},
    *   felix: {price: 4},
    * });
-   * const [dTs, ts, dTsUiReact, tsUiReact] =
+   * const [dTs, ts, uiReactDTs, uiReactTsx] =
    *   createTools(store).getStoreApi('shop');
    *
    * const dTsLines = dTs.split('\n');
@@ -423,7 +423,7 @@ export interface Tools {
    *   },
    * });
    * const tools = createTools(store);
-   * const [dTs, ts, dTsUiReact, tsUiReact] = await createTools(
+   * const [dTs, ts, uiReactDTs, uiReactTsx] = await createTools(
    *   store,
    * ).getPrettyStoreApi('shop');
    *
@@ -446,7 +446,7 @@ export interface Tools {
    *   felix: {price: 4},
    * });
    * const tools = createTools(store);
-   * const [dTs, ts, dTsUiReact, tsUiReact] = await createTools(
+   * const [dTs, ts, uiReactDTs, uiReactTsx] = await createTools(
    *   store,
    * ).getPrettyStoreApi('shop');
    *