tinybase 9.0.0-beta.1 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -692,7 +692,7 @@ export type SortedTablePaginatorProps = {
692
692
  *
693
693
  * See the <TableInHtmlTable /> (React) demo for this component in action:
694
694
  *
695
- * ![TableInHtmlTable example](https://beta.tinybase.org/shots/tableinhtmltable-react-demo.png
695
+ * ![TableInHtmlTable example](https://tinybase.org/shots/tableinhtmltable-react-demo.png
696
696
  * "TableInHtmlTable example")
697
697
  *
698
698
  * The component's props identify which Table to render based on Table Id, and
@@ -838,7 +838,7 @@ export function TableInHtmlTable(
838
838
  * See the <SortedTableInHtmlTable /> (React) demo for this component in
839
839
  * action:
840
840
  *
841
- * ![SortedTableInHtmlTable example](https://beta.tinybase.org/shots/sortedtableinhtmltable-react-demo.png
841
+ * ![SortedTableInHtmlTable example](https://tinybase.org/shots/sortedtableinhtmltable-react-demo.png
842
842
  * "SortedTableInHtmlTable example")
843
843
  *
844
844
  * The component's props identify which Table to render based on Table Id, and
@@ -1011,7 +1011,7 @@ export function SortedTableInHtmlTable(
1011
1011
  *
1012
1012
  * See the <ValuesInHtmlTable /> (React) demo for this component in action:
1013
1013
  *
1014
- * ![ValuesInHtmlTable example](https://beta.tinybase.org/shots/valuesinhtmltable-react-demo.png
1014
+ * ![ValuesInHtmlTable example](https://tinybase.org/shots/valuesinhtmltable-react-demo.png
1015
1015
  * "ValuesInHtmlTable example")
1016
1016
  *
1017
1017
  * The component's props identify which Row to render based on Table Id, Row Id,
@@ -1142,7 +1142,7 @@ export function ValuesInHtmlTable(
1142
1142
  *
1143
1143
  * See the <SliceInHtmlTable /> (React) demo for this component in action:
1144
1144
  *
1145
- * ![SliceInHtmlTable example](https://beta.tinybase.org/shots/sliceinhtmltable-react-demo.png
1145
+ * ![SliceInHtmlTable example](https://tinybase.org/shots/sliceinhtmltable-react-demo.png
1146
1146
  * "SliceInHtmlTable example")
1147
1147
  *
1148
1148
  * The component's props identify which Slice to render based on Index Id, Slice
@@ -1300,7 +1300,7 @@ export function SliceInHtmlTable(
1300
1300
  * See the <RelationshipInHtmlTable /> (React) demo for this component in
1301
1301
  * action:
1302
1302
  *
1303
- * ![RelationshipInHtmlTable example](https://beta.tinybase.org/shots/relationshipinhtmltable-react-demo.png
1303
+ * ![RelationshipInHtmlTable example](https://tinybase.org/shots/relationshipinhtmltable-react-demo.png
1304
1304
  * "RelationshipInHtmlTable example")
1305
1305
  *
1306
1306
  * The component's props identify which Relationship to render based on
@@ -1478,7 +1478,7 @@ export function RelationshipInHtmlTable(
1478
1478
  * See the <ResultTableInHtmlTable /> (React) demo for this component in
1479
1479
  * action:
1480
1480
  *
1481
- * ![ResultTableInHtmlTable example](https://beta.tinybase.org/shots/resulttableinhtmltable-react-demo.png
1481
+ * ![ResultTableInHtmlTable example](https://tinybase.org/shots/resulttableinhtmltable-react-demo.png
1482
1482
  * "ResultTableInHtmlTable example")
1483
1483
  *
1484
1484
  * The component's props identify which ResultTable to render based on query Id,
@@ -1631,7 +1631,7 @@ export function ResultTableInHtmlTable(
1631
1631
  * See the <ResultSortedTableInHtmlTable /> (React) demo for this component in
1632
1632
  * action:
1633
1633
  *
1634
- * ![ResultSortedTableInHtmlTable example](https://beta.tinybase.org/shots/resultsortedtableinhtmltable-react-demo.png
1634
+ * ![ResultSortedTableInHtmlTable example](https://tinybase.org/shots/resultsortedtableinhtmltable-react-demo.png
1635
1635
  * "ResultSortedTableInHtmlTable example")
1636
1636
  *
1637
1637
  * The component's props identify which ResultTable to render based on query Id,
@@ -1805,7 +1805,7 @@ export function ResultSortedTableInHtmlTable(
1805
1805
  *
1806
1806
  * See the <EditableCellView /> (React) demo for this component in action:
1807
1807
  *
1808
- * ![EditableCellView example](https://beta.tinybase.org/shots/editablecellview-react-demo.png
1808
+ * ![EditableCellView example](https://tinybase.org/shots/editablecellview-react-demo.png
1809
1809
  * "EditableCellView example")
1810
1810
  *
1811
1811
  * The component's props identify which Cell to render based on Table Id, Row
@@ -1876,7 +1876,7 @@ export function EditableCellView(
1876
1876
  *
1877
1877
  * See the <EditableValueView /> (React) demo for this component in action:
1878
1878
  *
1879
- * ![EditableValueView example](https://beta.tinybase.org/shots/editablevalueview-react-demo.png
1879
+ * ![EditableValueView example](https://tinybase.org/shots/editablevalueview-react-demo.png
1880
1880
  * "EditableValueView example")
1881
1881
  *
1882
1882
  * The component's props identify which Value to render based on Table Id, Row
@@ -1947,7 +1947,7 @@ export function EditableValueView(
1947
1947
  * See the <SortedTableInHtmlTable /> (React) demo for this component in
1948
1948
  * action:
1949
1949
  *
1950
- * ![SortedTablePaginator example](https://beta.tinybase.org/shots/sortedtablepaginator-react-demo.png
1950
+ * ![SortedTablePaginator example](https://tinybase.org/shots/sortedtablepaginator-react-demo.png
1951
1951
  * "SortedTablePaginator example")
1952
1952
  *
1953
1953
  * The component displays 'previous' and 'next' buttons for paging through the
@@ -668,7 +668,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
668
668
  *
669
669
  * See the <TableInHtmlTable /> (React) demo for this component in action:
670
670
  *
671
- * ![TableInHtmlTable example](https://beta.tinybase.org/shots/tableinhtmltable-react-demo.png
671
+ * ![TableInHtmlTable example](https://tinybase.org/shots/tableinhtmltable-react-demo.png
672
672
  * "TableInHtmlTable example")
673
673
  *
674
674
  * The component's props identify which Table to render based on Table Id, and
@@ -822,7 +822,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
822
822
  * See the <SortedTableInHtmlTable /> (React) demo for this component in
823
823
  * action:
824
824
  *
825
- * ![SortedTableInHtmlTable example](https://beta.tinybase.org/shots/sortedtableinhtmltable-react-demo.png
825
+ * ![SortedTableInHtmlTable example](https://tinybase.org/shots/sortedtableinhtmltable-react-demo.png
826
826
  * "SortedTableInHtmlTable example")
827
827
  *
828
828
  * The component's props identify which Table to render based on Table Id, and
@@ -1003,7 +1003,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
1003
1003
  *
1004
1004
  * See the <ValuesInHtmlTable /> (React) demo for this component in action:
1005
1005
  *
1006
- * ![ValuesInHtmlTable example](https://beta.tinybase.org/shots/valuesinhtmltable-react-demo.png
1006
+ * ![ValuesInHtmlTable example](https://tinybase.org/shots/valuesinhtmltable-react-demo.png
1007
1007
  * "ValuesInHtmlTable example")
1008
1008
  *
1009
1009
  * The component's props identify which Row to render based on Table Id, Row Id,
@@ -1142,7 +1142,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
1142
1142
  *
1143
1143
  * See the <SliceInHtmlTable /> (React) demo for this component in action:
1144
1144
  *
1145
- * ![SliceInHtmlTable example](https://beta.tinybase.org/shots/sliceinhtmltable-react-demo.png
1145
+ * ![SliceInHtmlTable example](https://tinybase.org/shots/sliceinhtmltable-react-demo.png
1146
1146
  * "SliceInHtmlTable example")
1147
1147
  *
1148
1148
  * The component's props identify which Slice to render based on Index Id, Slice
@@ -1308,7 +1308,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
1308
1308
  * See the <RelationshipInHtmlTable /> (React) demo for this component in
1309
1309
  * action:
1310
1310
  *
1311
- * ![RelationshipInHtmlTable example](https://beta.tinybase.org/shots/relationshipinhtmltable-react-demo.png
1311
+ * ![RelationshipInHtmlTable example](https://tinybase.org/shots/relationshipinhtmltable-react-demo.png
1312
1312
  * "RelationshipInHtmlTable example")
1313
1313
  *
1314
1314
  * The component's props identify which Relationship to render based on
@@ -1494,7 +1494,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
1494
1494
  * See the <ResultTableInHtmlTable /> (React) demo for this component in
1495
1495
  * action:
1496
1496
  *
1497
- * ![ResultTableInHtmlTable example](https://beta.tinybase.org/shots/resulttableinhtmltable-react-demo.png
1497
+ * ![ResultTableInHtmlTable example](https://tinybase.org/shots/resulttableinhtmltable-react-demo.png
1498
1498
  * "ResultTableInHtmlTable example")
1499
1499
  *
1500
1500
  * The component's props identify which ResultTable to render based on query Id,
@@ -1655,7 +1655,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
1655
1655
  * See the <ResultSortedTableInHtmlTable /> (React) demo for this component in
1656
1656
  * action:
1657
1657
  *
1658
- * ![ResultSortedTableInHtmlTable example](https://beta.tinybase.org/shots/resultsortedtableinhtmltable-react-demo.png
1658
+ * ![ResultSortedTableInHtmlTable example](https://tinybase.org/shots/resultsortedtableinhtmltable-react-demo.png
1659
1659
  * "ResultSortedTableInHtmlTable example")
1660
1660
  *
1661
1661
  * The component's props identify which ResultTable to render based on query Id,
@@ -1837,7 +1837,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
1837
1837
  *
1838
1838
  * See the <EditableCellView /> (React) demo for this component in action:
1839
1839
  *
1840
- * ![EditableCellView example](https://beta.tinybase.org/shots/editablecellview-react-demo.png
1840
+ * ![EditableCellView example](https://tinybase.org/shots/editablecellview-react-demo.png
1841
1841
  * "EditableCellView example")
1842
1842
  *
1843
1843
  * The component's props identify which Cell to render based on Table Id, Row
@@ -1922,7 +1922,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
1922
1922
  *
1923
1923
  * See the <EditableValueView /> (React) demo for this component in action:
1924
1924
  *
1925
- * ![EditableValueView example](https://beta.tinybase.org/shots/editablevalueview-react-demo.png
1925
+ * ![EditableValueView example](https://tinybase.org/shots/editablevalueview-react-demo.png
1926
1926
  * "EditableValueView example")
1927
1927
  *
1928
1928
  * The component's props identify which Value to render based on Table Id, Row
@@ -1993,7 +1993,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
1993
1993
  * See the <SortedTableInHtmlTable /> (React) demo for this component in
1994
1994
  * action:
1995
1995
  *
1996
- * ![SortedTablePaginator example](https://beta.tinybase.org/shots/sortedtablepaginator-react-demo.png
1996
+ * ![SortedTablePaginator example](https://tinybase.org/shots/sortedtablepaginator-react-demo.png
1997
1997
  * "SortedTablePaginator example")
1998
1998
  *
1999
1999
  * The component displays 'previous' and 'next' buttons for paging through the
@@ -483,7 +483,7 @@ export type YAxisProps = {
483
483
  *
484
484
  * See the Composing Charts (React) demo for this component in action:
485
485
  *
486
- * ![CartesianChart component example](https://beta.tinybase.org/shots/composing-charts-react-demo.png
486
+ * ![CartesianChart component example](https://tinybase.org/shots/composing-charts-react-demo.png
487
487
  * "CartesianChart component example")
488
488
  *
489
489
  * The series children declare their own xCellId and yCellId bindings. The
@@ -542,7 +542,7 @@ export function CartesianChart(
542
542
  *
543
543
  * See the Axis Overrides (React) demo for this component in action:
544
544
  *
545
- * ![XAxis component example](https://beta.tinybase.org/shots/axis-overrides-react-demo.png
545
+ * ![XAxis component example](https://tinybase.org/shots/axis-overrides-react-demo.png
546
546
  * "XAxis component example")
547
547
  * @category Store components
548
548
  * @since v8.5.0
@@ -558,7 +558,7 @@ export function XAxis(props: XAxisProps): ComponentReturnType;
558
558
  *
559
559
  * See the Axis Overrides (React) demo for this component in action:
560
560
  *
561
- * ![YAxis component example](https://beta.tinybase.org/shots/axis-overrides-react-demo.png
561
+ * ![YAxis component example](https://tinybase.org/shots/axis-overrides-react-demo.png
562
562
  * "YAxis component example")
563
563
  * @category Store components
564
564
  * @since v8.5.0
@@ -574,7 +574,7 @@ export function YAxis(props: YAxisProps): ComponentReturnType;
574
574
  *
575
575
  * See the Composing Charts (React) demo for this component in action:
576
576
  *
577
- * ![LineSeries component example](https://beta.tinybase.org/shots/composing-charts-react-demo.png
577
+ * ![LineSeries component example](https://tinybase.org/shots/composing-charts-react-demo.png
578
578
  * "LineSeries component example")
579
579
  * @category Store components
580
580
  * @since v8.5.0
@@ -590,7 +590,7 @@ export function LineSeries(props: SeriesProps): ComponentReturnType;
590
590
  *
591
591
  * See the Composing Charts (React) demo for this component in action:
592
592
  *
593
- * ![BarSeries component example](https://beta.tinybase.org/shots/composing-charts-react-demo.png
593
+ * ![BarSeries component example](https://tinybase.org/shots/composing-charts-react-demo.png
594
594
  * "BarSeries component example")
595
595
  * @category Store components
596
596
  * @since v8.5.0
@@ -607,7 +607,7 @@ export function BarSeries(props: SeriesProps): ComponentReturnType;
607
607
  *
608
608
  * See the <LineChart /> (React) demo for this component in action:
609
609
  *
610
- * ![LineChart component example](https://beta.tinybase.org/shots/basic-chart-react-demo.png "LineChart
610
+ * ![LineChart component example](https://tinybase.org/shots/basic-chart-react-demo.png "LineChart
611
611
  * component example")
612
612
  * @category Store components
613
613
  * @since v8.5.0
@@ -660,7 +660,7 @@ export function LineChart(
660
660
  *
661
661
  * See the Sorting And Types (React) demo for this component in action:
662
662
  *
663
- * ![BarChart component example](https://beta.tinybase.org/shots/sorting-and-types-react-demo.png
663
+ * ![BarChart component example](https://tinybase.org/shots/sorting-and-types-react-demo.png
664
664
  * "BarChart component example")
665
665
  * @category Store components
666
666
  * @since v8.5.0
@@ -544,7 +544,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
544
544
  *
545
545
  * See the Composing Charts (React) demo for this component in action:
546
546
  *
547
- * ![CartesianChart component example](https://beta.tinybase.org/shots/composing-charts-react-demo.png
547
+ * ![CartesianChart component example](https://tinybase.org/shots/composing-charts-react-demo.png
548
548
  * "CartesianChart component example")
549
549
  *
550
550
  * The series children declare their own xCellId and yCellId bindings. The
@@ -609,7 +609,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
609
609
  *
610
610
  * See the Axis Overrides (React) demo for this component in action:
611
611
  *
612
- * ![XAxis component example](https://beta.tinybase.org/shots/axis-overrides-react-demo.png
612
+ * ![XAxis component example](https://tinybase.org/shots/axis-overrides-react-demo.png
613
613
  * "XAxis component example")
614
614
  * @category Store components
615
615
  * @since v8.5.0
@@ -625,7 +625,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
625
625
  *
626
626
  * See the Axis Overrides (React) demo for this component in action:
627
627
  *
628
- * ![YAxis component example](https://beta.tinybase.org/shots/axis-overrides-react-demo.png
628
+ * ![YAxis component example](https://tinybase.org/shots/axis-overrides-react-demo.png
629
629
  * "YAxis component example")
630
630
  * @category Store components
631
631
  * @since v8.5.0
@@ -641,7 +641,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
641
641
  *
642
642
  * See the Composing Charts (React) demo for this component in action:
643
643
  *
644
- * ![LineSeries component example](https://beta.tinybase.org/shots/composing-charts-react-demo.png
644
+ * ![LineSeries component example](https://tinybase.org/shots/composing-charts-react-demo.png
645
645
  * "LineSeries component example")
646
646
  * @category Store components
647
647
  * @since v8.5.0
@@ -657,7 +657,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
657
657
  *
658
658
  * See the Composing Charts (React) demo for this component in action:
659
659
  *
660
- * ![BarSeries component example](https://beta.tinybase.org/shots/composing-charts-react-demo.png
660
+ * ![BarSeries component example](https://tinybase.org/shots/composing-charts-react-demo.png
661
661
  * "BarSeries component example")
662
662
  * @category Store components
663
663
  * @since v8.5.0
@@ -684,7 +684,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
684
684
  *
685
685
  * See the <LineChart /> (React) demo for this component in action:
686
686
  *
687
- * ![LineChart component example](https://beta.tinybase.org/shots/basic-chart-react-demo.png "LineChart
687
+ * ![LineChart component example](https://tinybase.org/shots/basic-chart-react-demo.png "LineChart
688
688
  * component example")
689
689
  * @category Store components
690
690
  * @since v8.5.0
@@ -750,7 +750,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
750
750
  *
751
751
  * See the Sorting And Types (React) demo for this component in action:
752
752
  *
753
- * ![BarChart component example](https://beta.tinybase.org/shots/sorting-and-types-react-demo.png
753
+ * ![BarChart component example](https://tinybase.org/shots/sorting-and-types-react-demo.png
754
754
  * "BarChart component example")
755
755
  * @category Store components
756
756
  * @since v8.5.0
@@ -46,7 +46,7 @@ export type InspectorProps = {
46
46
  *
47
47
  * See the <Inspector /> (React) demo for this component in action:
48
48
  *
49
- * ![Inspector example](https://beta.tinybase.org/shots/inspector-react-demo.png
49
+ * ![Inspector example](https://tinybase.org/shots/inspector-react-demo.png
50
50
  * "Inspector example")
51
51
  *
52
52
  * The component displays a nub in the corner of the screen which you may then
@@ -46,7 +46,7 @@ export type InspectorProps = {
46
46
  *
47
47
  * See the <Inspector /> (React) demo for this component in action:
48
48
  *
49
- * ![Inspector example](https://beta.tinybase.org/shots/inspector-react-demo.png
49
+ * ![Inspector example](https://tinybase.org/shots/inspector-react-demo.png
50
50
  * "Inspector example")
51
51
  *
52
52
  * The component displays a nub in the corner of the screen which you may then
@@ -692,7 +692,7 @@ export type SortedTablePaginatorProps = {
692
692
  *
693
693
  * See the <TableInHtmlTable /> (Solid) demo for this component in action:
694
694
  *
695
- * ![TableInHtmlTable example](https://beta.tinybase.org/shots/tableinhtmltable-solid-demo.png
695
+ * ![TableInHtmlTable example](https://tinybase.org/shots/tableinhtmltable-solid-demo.png
696
696
  * "TableInHtmlTable example")
697
697
  *
698
698
  * The component's props identify which Table to render based on Table Id, and
@@ -836,7 +836,7 @@ export function TableInHtmlTable(
836
836
  * See the <SortedTableInHtmlTable /> (Solid) demo for this component in
837
837
  * action:
838
838
  *
839
- * ![SortedTableInHtmlTable example](https://beta.tinybase.org/shots/sortedtableinhtmltable-solid-demo.png
839
+ * ![SortedTableInHtmlTable example](https://tinybase.org/shots/sortedtableinhtmltable-solid-demo.png
840
840
  * "SortedTableInHtmlTable example")
841
841
  *
842
842
  * The component's props identify which Table to render based on Table Id, and
@@ -1007,7 +1007,7 @@ export function SortedTableInHtmlTable(
1007
1007
  *
1008
1008
  * See the <ValuesInHtmlTable /> (Solid) demo for this component in action:
1009
1009
  *
1010
- * ![ValuesInHtmlTable example](https://beta.tinybase.org/shots/valuesinhtmltable-solid-demo.png
1010
+ * ![ValuesInHtmlTable example](https://tinybase.org/shots/valuesinhtmltable-solid-demo.png
1011
1011
  * "ValuesInHtmlTable example")
1012
1012
  *
1013
1013
  * The component's props identify which Row to render based on Table Id, Row Id,
@@ -1136,7 +1136,7 @@ export function ValuesInHtmlTable(
1136
1136
  *
1137
1137
  * See the <SliceInHtmlTable /> (Solid) demo for this component in action:
1138
1138
  *
1139
- * ![SliceInHtmlTable example](https://beta.tinybase.org/shots/sliceinhtmltable-solid-demo.png
1139
+ * ![SliceInHtmlTable example](https://tinybase.org/shots/sliceinhtmltable-solid-demo.png
1140
1140
  * "SliceInHtmlTable example")
1141
1141
  *
1142
1142
  * The component's props identify which Slice to render based on Index Id, Slice
@@ -1292,7 +1292,7 @@ export function SliceInHtmlTable(
1292
1292
  * See the <RelationshipInHtmlTable /> (Solid) demo for this component in
1293
1293
  * action:
1294
1294
  *
1295
- * ![RelationshipInHtmlTable example](https://beta.tinybase.org/shots/relationshipinhtmltable-solid-demo.png
1295
+ * ![RelationshipInHtmlTable example](https://tinybase.org/shots/relationshipinhtmltable-solid-demo.png
1296
1296
  * "RelationshipInHtmlTable example")
1297
1297
  *
1298
1298
  * The component's props identify which Relationship to render based on
@@ -1466,7 +1466,7 @@ export function RelationshipInHtmlTable(
1466
1466
  * See the <ResultTableInHtmlTable /> (Solid) demo for this component in
1467
1467
  * action:
1468
1468
  *
1469
- * ![ResultTableInHtmlTable example](https://beta.tinybase.org/shots/resulttableinhtmltable-solid-demo.png
1469
+ * ![ResultTableInHtmlTable example](https://tinybase.org/shots/resulttableinhtmltable-solid-demo.png
1470
1470
  * "ResultTableInHtmlTable example")
1471
1471
  *
1472
1472
  * The component's props identify which ResultTable to render based on query Id,
@@ -1617,7 +1617,7 @@ export function ResultTableInHtmlTable(
1617
1617
  * See the <ResultSortedTableInHtmlTable /> (Solid) demo for this component in
1618
1618
  * action:
1619
1619
  *
1620
- * ![ResultSortedTableInHtmlTable example](https://beta.tinybase.org/shots/resultsortedtableinhtmltable-solid-demo.png
1620
+ * ![ResultSortedTableInHtmlTable example](https://tinybase.org/shots/resultsortedtableinhtmltable-solid-demo.png
1621
1621
  * "ResultSortedTableInHtmlTable example")
1622
1622
  *
1623
1623
  * The component's props identify which ResultTable to render based on query Id,
@@ -1789,7 +1789,7 @@ export function ResultSortedTableInHtmlTable(
1789
1789
  *
1790
1790
  * See the <EditableCellView /> (Solid) demo for this component in action:
1791
1791
  *
1792
- * ![EditableCellView example](https://beta.tinybase.org/shots/editablecellview-solid-demo.png
1792
+ * ![EditableCellView example](https://tinybase.org/shots/editablecellview-solid-demo.png
1793
1793
  * "EditableCellView example")
1794
1794
  *
1795
1795
  * The component's props identify which Cell to render based on Table Id, Row
@@ -1859,7 +1859,7 @@ export function EditableCellView(
1859
1859
  *
1860
1860
  * See the <EditableValueView /> (Solid) demo for this component in action:
1861
1861
  *
1862
- * ![EditableValueView example](https://beta.tinybase.org/shots/editablevalueview-solid-demo.png
1862
+ * ![EditableValueView example](https://tinybase.org/shots/editablevalueview-solid-demo.png
1863
1863
  * "EditableValueView example")
1864
1864
  *
1865
1865
  * The component's props identify which Value to render based on Table Id, Row
@@ -1929,7 +1929,7 @@ export function EditableValueView(
1929
1929
  * See the <SortedTableInHtmlTable /> (Solid) demo for this component in
1930
1930
  * action:
1931
1931
  *
1932
- * ![SortedTablePaginator example](https://beta.tinybase.org/shots/sortedtablepaginator-solid-demo.png
1932
+ * ![SortedTablePaginator example](https://tinybase.org/shots/sortedtablepaginator-solid-demo.png
1933
1933
  * "SortedTablePaginator example")
1934
1934
  *
1935
1935
  * The component displays 'previous' and 'next' buttons for paging through the
@@ -666,7 +666,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
666
666
  *
667
667
  * See the <TableInHtmlTable /> (Solid) demo for this component in action:
668
668
  *
669
- * ![TableInHtmlTable example](https://beta.tinybase.org/shots/tableinhtmltable-solid-demo.png
669
+ * ![TableInHtmlTable example](https://tinybase.org/shots/tableinhtmltable-solid-demo.png
670
670
  * "TableInHtmlTable example")
671
671
  *
672
672
  * The component's props identify which Table to render based on Table Id, and
@@ -818,7 +818,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
818
818
  * See the <SortedTableInHtmlTable /> (Solid) demo for this component in
819
819
  * action:
820
820
  *
821
- * ![SortedTableInHtmlTable example](https://beta.tinybase.org/shots/sortedtableinhtmltable-solid-demo.png
821
+ * ![SortedTableInHtmlTable example](https://tinybase.org/shots/sortedtableinhtmltable-solid-demo.png
822
822
  * "SortedTableInHtmlTable example")
823
823
  *
824
824
  * The component's props identify which Table to render based on Table Id, and
@@ -997,7 +997,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
997
997
  *
998
998
  * See the <ValuesInHtmlTable /> (Solid) demo for this component in action:
999
999
  *
1000
- * ![ValuesInHtmlTable example](https://beta.tinybase.org/shots/valuesinhtmltable-solid-demo.png
1000
+ * ![ValuesInHtmlTable example](https://tinybase.org/shots/valuesinhtmltable-solid-demo.png
1001
1001
  * "ValuesInHtmlTable example")
1002
1002
  *
1003
1003
  * The component's props identify which Row to render based on Table Id, Row Id,
@@ -1134,7 +1134,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
1134
1134
  *
1135
1135
  * See the <SliceInHtmlTable /> (Solid) demo for this component in action:
1136
1136
  *
1137
- * ![SliceInHtmlTable example](https://beta.tinybase.org/shots/sliceinhtmltable-solid-demo.png
1137
+ * ![SliceInHtmlTable example](https://tinybase.org/shots/sliceinhtmltable-solid-demo.png
1138
1138
  * "SliceInHtmlTable example")
1139
1139
  *
1140
1140
  * The component's props identify which Slice to render based on Index Id, Slice
@@ -1298,7 +1298,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
1298
1298
  * See the <RelationshipInHtmlTable /> (Solid) demo for this component in
1299
1299
  * action:
1300
1300
  *
1301
- * ![RelationshipInHtmlTable example](https://beta.tinybase.org/shots/relationshipinhtmltable-solid-demo.png
1301
+ * ![RelationshipInHtmlTable example](https://tinybase.org/shots/relationshipinhtmltable-solid-demo.png
1302
1302
  * "RelationshipInHtmlTable example")
1303
1303
  *
1304
1304
  * The component's props identify which Relationship to render based on
@@ -1480,7 +1480,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
1480
1480
  * See the <ResultTableInHtmlTable /> (Solid) demo for this component in
1481
1481
  * action:
1482
1482
  *
1483
- * ![ResultTableInHtmlTable example](https://beta.tinybase.org/shots/resulttableinhtmltable-solid-demo.png
1483
+ * ![ResultTableInHtmlTable example](https://tinybase.org/shots/resulttableinhtmltable-solid-demo.png
1484
1484
  * "ResultTableInHtmlTable example")
1485
1485
  *
1486
1486
  * The component's props identify which ResultTable to render based on query Id,
@@ -1639,7 +1639,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
1639
1639
  * See the <ResultSortedTableInHtmlTable /> (Solid) demo for this component in
1640
1640
  * action:
1641
1641
  *
1642
- * ![ResultSortedTableInHtmlTable example](https://beta.tinybase.org/shots/resultsortedtableinhtmltable-solid-demo.png
1642
+ * ![ResultSortedTableInHtmlTable example](https://tinybase.org/shots/resultsortedtableinhtmltable-solid-demo.png
1643
1643
  * "ResultSortedTableInHtmlTable example")
1644
1644
  *
1645
1645
  * The component's props identify which ResultTable to render based on query Id,
@@ -1819,7 +1819,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
1819
1819
  *
1820
1820
  * See the <EditableCellView /> (Solid) demo for this component in action:
1821
1821
  *
1822
- * ![EditableCellView example](https://beta.tinybase.org/shots/editablecellview-solid-demo.png
1822
+ * ![EditableCellView example](https://tinybase.org/shots/editablecellview-solid-demo.png
1823
1823
  * "EditableCellView example")
1824
1824
  *
1825
1825
  * The component's props identify which Cell to render based on Table Id, Row
@@ -1903,7 +1903,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
1903
1903
  *
1904
1904
  * See the <EditableValueView /> (Solid) demo for this component in action:
1905
1905
  *
1906
- * ![EditableValueView example](https://beta.tinybase.org/shots/editablevalueview-solid-demo.png
1906
+ * ![EditableValueView example](https://tinybase.org/shots/editablevalueview-solid-demo.png
1907
1907
  * "EditableValueView example")
1908
1908
  *
1909
1909
  * The component's props identify which Value to render based on Table Id, Row
@@ -1973,7 +1973,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
1973
1973
  * See the <SortedTableInHtmlTable /> (Solid) demo for this component in
1974
1974
  * action:
1975
1975
  *
1976
- * ![SortedTablePaginator example](https://beta.tinybase.org/shots/sortedtablepaginator-solid-demo.png
1976
+ * ![SortedTablePaginator example](https://tinybase.org/shots/sortedtablepaginator-solid-demo.png
1977
1977
  * "SortedTablePaginator example")
1978
1978
  *
1979
1979
  * The component displays 'previous' and 'next' buttons for paging through the
@@ -46,7 +46,7 @@ export type InspectorProps = {
46
46
  *
47
47
  * See the <Inspector /> (Solid) demo for this component in action:
48
48
  *
49
- * ![Inspector example](https://beta.tinybase.org/shots/inspector-solid-demo.png
49
+ * ![Inspector example](https://tinybase.org/shots/inspector-solid-demo.png
50
50
  * "Inspector example")
51
51
  *
52
52
  * The component displays a nub in the corner of the screen which you may then
@@ -46,7 +46,7 @@ export type InspectorProps = {
46
46
  *
47
47
  * See the <Inspector /> (Solid) demo for this component in action:
48
48
  *
49
- * ![Inspector example](https://beta.tinybase.org/shots/inspector-solid-demo.png
49
+ * ![Inspector example](https://tinybase.org/shots/inspector-solid-demo.png
50
50
  * "Inspector example")
51
51
  *
52
52
  * The component displays a nub in the corner of the screen which you may then
@@ -690,7 +690,7 @@ export type SortedTablePaginatorProps = {
690
690
  *
691
691
  * See the <TableInHtmlTable /> (Svelte) demo for this component in action:
692
692
  *
693
- * ![TableInHtmlTable example](https://beta.tinybase.org/shots/tableinhtmltable-svelte-demo.png
693
+ * ![TableInHtmlTable example](https://tinybase.org/shots/tableinhtmltable-svelte-demo.png
694
694
  * "TableInHtmlTable example")
695
695
  *
696
696
  * The component's props identify which Table to render based on Table Id, and
@@ -854,7 +854,7 @@ export const TableInHtmlTable: Component<
854
854
  * See the <SortedTableInHtmlTable /> (Svelte) demo for this component in
855
855
  * action:
856
856
  *
857
- * ![SortedTableInHtmlTable example](https://beta.tinybase.org/shots/sortedtableinhtmltable-svelte-demo.png
857
+ * ![SortedTableInHtmlTable example](https://tinybase.org/shots/sortedtableinhtmltable-svelte-demo.png
858
858
  * "SortedTableInHtmlTable example")
859
859
  *
860
860
  * The component's props identify which Table to render based on Table Id, and
@@ -1042,7 +1042,7 @@ export const SortedTableInHtmlTable: Component<
1042
1042
  *
1043
1043
  * See the <ValuesInHtmlTable /> (Svelte) demo for this component in action:
1044
1044
  *
1045
- * ![ValuesInHtmlTable example](https://beta.tinybase.org/shots/valuesinhtmltable-svelte-demo.png
1045
+ * ![ValuesInHtmlTable example](https://tinybase.org/shots/valuesinhtmltable-svelte-demo.png
1046
1046
  * "ValuesInHtmlTable example")
1047
1047
  *
1048
1048
  * The component's props identify which Row to render based on Table Id, Row Id,
@@ -1185,7 +1185,7 @@ export const ValuesInHtmlTable: Component<
1185
1185
  *
1186
1186
  * See the <SliceInHtmlTable /> (Svelte) demo for this component in action:
1187
1187
  *
1188
- * ![SliceInHtmlTable example](https://beta.tinybase.org/shots/sliceinhtmltable-svelte-demo.png
1188
+ * ![SliceInHtmlTable example](https://tinybase.org/shots/sliceinhtmltable-svelte-demo.png
1189
1189
  * "SliceInHtmlTable example")
1190
1190
  *
1191
1191
  * The component's props identify which Slice to render based on Index Id, Slice
@@ -1357,7 +1357,7 @@ export const SliceInHtmlTable: Component<
1357
1357
  * See the <RelationshipInHtmlTable /> (Svelte) demo for this component in
1358
1358
  * action:
1359
1359
  *
1360
- * ![RelationshipInHtmlTable example](https://beta.tinybase.org/shots/relationshipinhtmltable-svelte-demo.png
1360
+ * ![RelationshipInHtmlTable example](https://tinybase.org/shots/relationshipinhtmltable-svelte-demo.png
1361
1361
  * "RelationshipInHtmlTable example")
1362
1362
  *
1363
1363
  * The component's props identify which Relationship to render based on
@@ -1544,7 +1544,7 @@ export const RelationshipInHtmlTable: Component<
1544
1544
  * See the <ResultTableInHtmlTable /> (Svelte) demo for this component in
1545
1545
  * action:
1546
1546
  *
1547
- * ![ResultTableInHtmlTable example](https://beta.tinybase.org/shots/resulttableinhtmltable-svelte-demo.png
1547
+ * ![ResultTableInHtmlTable example](https://tinybase.org/shots/resulttableinhtmltable-svelte-demo.png
1548
1548
  * "ResultTableInHtmlTable example")
1549
1549
  *
1550
1550
  * The component's props identify which ResultTable to render based on query Id,
@@ -1713,7 +1713,7 @@ export const ResultTableInHtmlTable: Component<
1713
1713
  * See the <ResultSortedTableInHtmlTable /> (Svelte) demo for this component in
1714
1714
  * action:
1715
1715
  *
1716
- * ![ResultSortedTableInHtmlTable example](https://beta.tinybase.org/shots/resultsortedtableinhtmltable-svelte-demo.png
1716
+ * ![ResultSortedTableInHtmlTable example](https://tinybase.org/shots/resultsortedtableinhtmltable-svelte-demo.png
1717
1717
  * "ResultSortedTableInHtmlTable example")
1718
1718
  *
1719
1719
  * The component's props identify which ResultTable to render based on query Id,
@@ -1902,7 +1902,7 @@ export const ResultSortedTableInHtmlTable: Component<
1902
1902
  *
1903
1903
  * See the <EditableCellView /> (Svelte) demo for this component in action:
1904
1904
  *
1905
- * ![EditableCellView example](https://beta.tinybase.org/shots/editablecellview-svelte-demo.png
1905
+ * ![EditableCellView example](https://tinybase.org/shots/editablecellview-svelte-demo.png
1906
1906
  * "EditableCellView example")
1907
1907
  *
1908
1908
  * The component's props identify which Cell to render based on Table Id, Row
@@ -1975,7 +1975,7 @@ export const EditableCellView: Component<
1975
1975
  *
1976
1976
  * See the <EditableValueView /> (Svelte) demo for this component in action:
1977
1977
  *
1978
- * ![EditableValueView example](https://beta.tinybase.org/shots/editablevalueview-svelte-demo.png
1978
+ * ![EditableValueView example](https://tinybase.org/shots/editablevalueview-svelte-demo.png
1979
1979
  * "EditableValueView example")
1980
1980
  *
1981
1981
  * The component's props identify which Value to render based on Table Id, Row
@@ -2050,7 +2050,7 @@ export const EditableValueView: Component<
2050
2050
  * See the <SortedTableInHtmlTable /> (Svelte) demo for this component in
2051
2051
  * action:
2052
2052
  *
2053
- * ![SortedTablePaginator example](https://beta.tinybase.org/shots/sortedtablepaginator-svelte-demo.png
2053
+ * ![SortedTablePaginator example](https://tinybase.org/shots/sortedtablepaginator-svelte-demo.png
2054
2054
  * "SortedTablePaginator example")
2055
2055
  *
2056
2056
  * The component displays 'previous' and 'next' buttons for paging through the
@@ -664,7 +664,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
664
664
  *
665
665
  * See the <TableInHtmlTable /> (Svelte) demo for this component in action:
666
666
  *
667
- * ![TableInHtmlTable example](https://beta.tinybase.org/shots/tableinhtmltable-svelte-demo.png
667
+ * ![TableInHtmlTable example](https://tinybase.org/shots/tableinhtmltable-svelte-demo.png
668
668
  * "TableInHtmlTable example")
669
669
  *
670
670
  * The component's props identify which Table to render based on Table Id, and
@@ -834,7 +834,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
834
834
  * See the <SortedTableInHtmlTable /> (Svelte) demo for this component in
835
835
  * action:
836
836
  *
837
- * ![SortedTableInHtmlTable example](https://beta.tinybase.org/shots/sortedtableinhtmltable-svelte-demo.png
837
+ * ![SortedTableInHtmlTable example](https://tinybase.org/shots/sortedtableinhtmltable-svelte-demo.png
838
838
  * "SortedTableInHtmlTable example")
839
839
  *
840
840
  * The component's props identify which Table to render based on Table Id, and
@@ -1030,7 +1030,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
1030
1030
  *
1031
1031
  * See the <ValuesInHtmlTable /> (Svelte) demo for this component in action:
1032
1032
  *
1033
- * ![ValuesInHtmlTable example](https://beta.tinybase.org/shots/valuesinhtmltable-svelte-demo.png
1033
+ * ![ValuesInHtmlTable example](https://tinybase.org/shots/valuesinhtmltable-svelte-demo.png
1034
1034
  * "ValuesInHtmlTable example")
1035
1035
  *
1036
1036
  * The component's props identify which Row to render based on Table Id, Row Id,
@@ -1181,7 +1181,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
1181
1181
  *
1182
1182
  * See the <SliceInHtmlTable /> (Svelte) demo for this component in action:
1183
1183
  *
1184
- * ![SliceInHtmlTable example](https://beta.tinybase.org/shots/sliceinhtmltable-svelte-demo.png
1184
+ * ![SliceInHtmlTable example](https://tinybase.org/shots/sliceinhtmltable-svelte-demo.png
1185
1185
  * "SliceInHtmlTable example")
1186
1186
  *
1187
1187
  * The component's props identify which Slice to render based on Index Id, Slice
@@ -1359,7 +1359,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
1359
1359
  * See the <RelationshipInHtmlTable /> (Svelte) demo for this component in
1360
1360
  * action:
1361
1361
  *
1362
- * ![RelationshipInHtmlTable example](https://beta.tinybase.org/shots/relationshipinhtmltable-svelte-demo.png
1362
+ * ![RelationshipInHtmlTable example](https://tinybase.org/shots/relationshipinhtmltable-svelte-demo.png
1363
1363
  * "RelationshipInHtmlTable example")
1364
1364
  *
1365
1365
  * The component's props identify which Relationship to render based on
@@ -1554,7 +1554,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
1554
1554
  * See the <ResultTableInHtmlTable /> (Svelte) demo for this component in
1555
1555
  * action:
1556
1556
  *
1557
- * ![ResultTableInHtmlTable example](https://beta.tinybase.org/shots/resulttableinhtmltable-svelte-demo.png
1557
+ * ![ResultTableInHtmlTable example](https://tinybase.org/shots/resulttableinhtmltable-svelte-demo.png
1558
1558
  * "ResultTableInHtmlTable example")
1559
1559
  *
1560
1560
  * The component's props identify which ResultTable to render based on query Id,
@@ -1731,7 +1731,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
1731
1731
  * See the <ResultSortedTableInHtmlTable /> (Svelte) demo for this component in
1732
1732
  * action:
1733
1733
  *
1734
- * ![ResultSortedTableInHtmlTable example](https://beta.tinybase.org/shots/resultsortedtableinhtmltable-svelte-demo.png
1734
+ * ![ResultSortedTableInHtmlTable example](https://tinybase.org/shots/resultsortedtableinhtmltable-svelte-demo.png
1735
1735
  * "ResultSortedTableInHtmlTable example")
1736
1736
  *
1737
1737
  * The component's props identify which ResultTable to render based on query Id,
@@ -1928,7 +1928,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
1928
1928
  *
1929
1929
  * See the <EditableCellView /> (Svelte) demo for this component in action:
1930
1930
  *
1931
- * ![EditableCellView example](https://beta.tinybase.org/shots/editablecellview-svelte-demo.png
1931
+ * ![EditableCellView example](https://tinybase.org/shots/editablecellview-svelte-demo.png
1932
1932
  * "EditableCellView example")
1933
1933
  *
1934
1934
  * The component's props identify which Cell to render based on Table Id, Row
@@ -2015,7 +2015,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
2015
2015
  *
2016
2016
  * See the <EditableValueView /> (Svelte) demo for this component in action:
2017
2017
  *
2018
- * ![EditableValueView example](https://beta.tinybase.org/shots/editablevalueview-svelte-demo.png
2018
+ * ![EditableValueView example](https://tinybase.org/shots/editablevalueview-svelte-demo.png
2019
2019
  * "EditableValueView example")
2020
2020
  *
2021
2021
  * The component's props identify which Value to render based on Table Id, Row
@@ -2090,7 +2090,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
2090
2090
  * See the <SortedTableInHtmlTable /> (Svelte) demo for this component in
2091
2091
  * action:
2092
2092
  *
2093
- * ![SortedTablePaginator example](https://beta.tinybase.org/shots/sortedtablepaginator-svelte-demo.png
2093
+ * ![SortedTablePaginator example](https://tinybase.org/shots/sortedtablepaginator-svelte-demo.png
2094
2094
  * "SortedTablePaginator example")
2095
2095
  *
2096
2096
  * The component displays 'previous' and 'next' buttons for paging through the
@@ -46,7 +46,7 @@ export type InspectorProps = {
46
46
  *
47
47
  * See the <Inspector /> (Svelte) demo for this component in action:
48
48
  *
49
- * ![Inspector example](https://beta.tinybase.org/shots/inspector-svelte-demo.png
49
+ * ![Inspector example](https://tinybase.org/shots/inspector-svelte-demo.png
50
50
  * "Inspector example")
51
51
  *
52
52
  * The component displays a nub in the corner of the screen which you may then
@@ -46,7 +46,7 @@ export type InspectorProps = {
46
46
  *
47
47
  * See the <Inspector /> (Svelte) demo for this component in action:
48
48
  *
49
- * ![Inspector example](https://beta.tinybase.org/shots/inspector-svelte-demo.png
49
+ * ![Inspector example](https://tinybase.org/shots/inspector-svelte-demo.png
50
50
  * "Inspector example")
51
51
  *
52
52
  * The component displays a nub in the corner of the screen which you may then
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tinybase",
3
- "version": "9.0.0-beta.1",
3
+ "version": "9.0.0",
4
4
  "author": "jamesgpearce",
5
5
  "repository": "github:tinyplex/tinybase",
6
6
  "license": "MIT",
@@ -24,19 +24,19 @@
24
24
  "sideEffects": false,
25
25
  "peerDependencies": {
26
26
  "@automerge/automerge-repo": "^2.5.6",
27
- "@cloudflare/workers-types": "^4.20260701.1",
28
- "@electric-sql/pglite": "^0.5.3",
27
+ "@cloudflare/workers-types": "^5.20260703.1",
28
+ "@electric-sql/pglite": "^0.5.4",
29
29
  "@libsql/client": "^0.17.4",
30
30
  "@powersync/common": "^1.57.0",
31
31
  "@sinclair/typebox": "^0.34.49",
32
32
  "@sqlite.org/sqlite-wasm": "^3.53.0-build1",
33
33
  "@vlcn.io/crsqlite-wasm": "^0.16.0",
34
- "arktype": "^2.2.1",
34
+ "arktype": "^2.2.2",
35
35
  "bun": "^1.3.14",
36
36
  "effect": "^3.21.4",
37
37
  "electric-sql": "^0.12.1",
38
38
  "expo": "^57.0.1",
39
- "expo-sqlite": "^56.0.5",
39
+ "expo-sqlite": "^57.0.0",
40
40
  "partykit": "^0.0.115",
41
41
  "partysocket": "^1.3.0",
42
42
  "postgres": "^3.4.9",
@@ -44,7 +44,7 @@
44
44
  "react-dom": "^19.2.7",
45
45
  "react-native-mmkv": "4.3.2",
46
46
  "react-native-sqlite-storage": "^6.0.1",
47
- "solid-js": "^1.9.13",
47
+ "solid-js": "^1.9.14",
48
48
  "sqlite3": "^5.1.7",
49
49
  "svelte": "^5.56.4",
50
50
  "valibot": "^1.4.2",
package/readme.md CHANGED
@@ -6,7 +6,7 @@
6
6
  📦 Creating your project...
7
7
  ```
8
8
 
9
- <hr><section><h2 id="it-s-reactive">It&#x27;s <em>Reactive</em></h2><p>TinyBase lets you <a href="#register-granular-listeners">listen to changes</a> made to any part of your data. This means your app will be fast, since you only spend rendering cycles on things that change. The optional <a href="#call-hooks-to-bind-to-data">bindings to React</a>, <a href="#pre-built-reactive-components">pre-built components</a>, and <a href="#local-first-data-visualizations">charts</a> let you easily build fully reactive UIs on top of TinyBase. You even get a built-in <a href="#set-checkpoints-for-an-undo-stack">undo stack</a>, and <a href="#an-inspector-for-your-data">developer tools</a>!</p></section><section><h2 id="it-s-database-like">It&#x27;s <em>Database-Like</em></h2><p>Consumer app? Enterprise app? Or even a game? Model <a href="#start-with-a-simple-key-value-store">key-value data</a> and <a href="#level-up-to-use-tabular-data">tabular data</a> with optional typed <a href="#apply-schemas-to-tables-values">schematization</a>, whatever its data structures. There are built-in <a href="#create-indexes-for-fast-lookups">indexing</a>, <a href="#define-metrics-and-aggregations">metric aggregation</a>, and tabular <a href="#model-table-relationships">relationships</a> APIs - and a powerful <a href="#build-complex-queries-with-tinyql">query engine</a> to select, join, filter, and group data (reactively!) without SQL.</p></section><section><h2 id="it-synchronizes">It <em>Synchronizes</em></h2><p>TinyBase has <a href="#synchronize-between-devices">native CRDT</a> support, meaning that you can deterministically <a href="https://beta.tinybase.org/guides/synchronization/">synchronize</a> and merge data across multiple sources, clients, and servers. And although TinyBase is an in-memory data store, you can easily <a href="#persist-to-storage-or-a-database">persist</a> your data to file, <a href="https://beta.tinybase.org/api/persister-browser">browser storage</a>, <a href="https://beta.tinybase.org/api/persister-indexed-db">IndexedDB</a>, <a href="https://beta.tinybase.org/guides/persistence/database-persistence/">SQLite or PostgreSQL databases</a>, and <a href="https://beta.tinybase.org/guides/persistence/third-party-crdt-persistence/">more</a>.</p></section><section><h2 id="it-s-built-for-a-local-first-world">It&#x27;s Built For A <em>Local-First</em> World</h2><p>TinyBase works anywhere that JavaScript does, but it&#x27;s especially great for local-first apps: where data is stored locally on the user&#x27;s device and that can be run offline. It&#x27;s tiny by name, tiny by nature: just <a href="#did-we-say-tiny">6.2kB - 13.7kB</a> and with no dependencies - yet <a href="#well-tested-and-documented">100% tested</a>, <a href="https://beta.tinybase.org/guides/the-basics/getting-started/">fully documented</a>, and of course, <a href="https://github.com/tinyplex/tinybase">open source</a>!</p></section><hr><section id="friends"><h2 id="tinybase-works-great-on-its-own-but-also-plays-well-with-friends">TinyBase works great on its own, but also plays well with friends.</h2><h3 id="ui-frameworks"><a href="https://beta.tinybase.org/guides/">UI Frameworks</a></h3><div><a href="https://beta.tinybase.org/guides/building-uis-with-react/getting-started-with-ui-react"><img src="https://beta.tinybase.org/react.svg?asImg" width="48"> React</a></div><div><a href="https://beta.tinybase.org/guides/building-uis-with-solid/getting-started-with-ui-solid"><img src="https://beta.tinybase.org/solid.svg?asImg" width="48"> Solid</a></div><div><a href="https://beta.tinybase.org/guides/building-uis-with-svelte/getting-started-with-ui-svelte"><img src="https://beta.tinybase.org/svelte.svg?asImg" width="48"> Svelte</a></div><h3 id="storage-sync"><a href="https://beta.tinybase.org/guides/persistence/">Storage &amp; Sync</a></h3><div><a href="https://beta.tinybase.org/api/persister-indexed-db/functions/creation/createindexeddbpersister"><img src="https://beta.tinybase.org/indexeddb.svg?asImg" width="48"> IndexedDB</a></div><div><a href="https://beta.tinybase.org/api/persister-browser"><img src="https://beta.tinybase.org/browser.svg?asImg" width="48"> OPFS</a></div><div><a href="https://beta.tinybase.org/guides/integrations/cloudflare-durable-objects"><img src="https://beta.tinybase.org/cloudflare.svg?asImg" width="48"> Cloudflare</a></div><div><a href="https://beta.tinybase.org/guides/schemas-and-persistence/database-persistence"><img src="https://beta.tinybase.org/postgresql.svg?asImg" width="48"> PostgreSQL</a></div><div><a href="https://beta.tinybase.org/guides/schemas-and-persistence/database-persistence"><img src="https://beta.tinybase.org/pglite.svg?asImg" width="48"> PGlite</a></div><div><a href="https://beta.tinybase.org/guides/schemas-and-persistence/database-persistence"><img src="https://beta.tinybase.org/sqlite.svg?asImg" width="48"> SQLite</a></div><div><a href="https://beta.tinybase.org/guides/schemas-and-persistence/database-persistence"><img src="https://beta.tinybase.org/bun.svg?asImg" width="48"> Bun SQLite</a></div><div><a href="https://beta.tinybase.org/guides/schemas-and-persistence/database-persistence"><img src="https://beta.tinybase.org/expo.svg?asImg" width="48"> Expo SQLite</a></div><div><a href="https://beta.tinybase.org/guides/schemas-and-persistence/database-persistence"><img src="https://beta.tinybase.org/electric.svg?asImg" width="48"> ElectricSQL</a></div><div><a href="https://beta.tinybase.org/guides/schemas-and-persistence/database-persistence"><img src="https://beta.tinybase.org/turso.svg?asImg" width="48"> Turso</a></div><div><a href="https://beta.tinybase.org/guides/schemas-and-persistence/database-persistence"><img src="https://beta.tinybase.org/powersync.svg?asImg" width="48"> PowerSync</a></div><div><a href="https://beta.tinybase.org/api/persister-partykit-client"><img src="https://beta.tinybase.org/partykit.svg?asImg" width="48"> PartyKit</a></div><div><a href="https://beta.tinybase.org/api/persister-yjs/functions/creation/createyjspersister"><img src="https://beta.tinybase.org/yjs.svg?asImg" width="48"> YJS</a></div><div><a href="https://beta.tinybase.org/api/persister-cr-sqlite-wasm"><img src="https://beta.tinybase.org/crsqlite.png" width="48"> CR-SQLite</a></div><div><a href="https://beta.tinybase.org/api/persister-automerge"><img src="https://beta.tinybase.org/automerge.svg?asImg" width="48"> Automerge</a></div><h3 id="schema-systems"><a href="https://beta.tinybase.org/guides/schemas/using-schematizers/">Schema Systems</a></h3><div><a href="https://beta.tinybase.org/api/schematizer-zod/functions/creation/createzodschematizer"><img src="https://beta.tinybase.org/zod.svg?asImg" width="48"> Zod</a></div><div><a href="https://beta.tinybase.org/api/schematizer-typebox/functions/creation/createtypeboxschematizer"><img src="https://beta.tinybase.org/typebox.svg?asImg" width="48"> TypeBox</a></div><div><a href="https://beta.tinybase.org/api/schematizer-valibot/functions/creation/createvalibotschematizer"><img src="https://beta.tinybase.org/valibot.svg?asImg" width="48"> Valibot</a></div><div><a href="https://beta.tinybase.org/api/schematizer-arktype/functions/creation/createarktypeschematizer"><img src="https://beta.tinybase.org/arktype.svg?asImg" width="48"> ArkType</a></div><div><a href="https://beta.tinybase.org/api/schematizer-yup/functions/creation/createyupschematizer"><img src="https://beta.tinybase.org/yup.svg?asImg" width="48"> Yup</a></div><div><a href="https://beta.tinybase.org/api/schematizer-effect/functions/creation/createeffectschematizer"><img src="https://beta.tinybase.org/effect.svg?asImg" width="48"> Effect</a></div><p>(Baffled by all these logos? Check out our <a href="https://beta.tinybase.org/guides/the-basics/architectural-options">architectural options</a> guide to make sense of it all!)</p></section><hr><section id="follow"><a href="https://github.com/tinyplex/tinybase" target="_blank"><img src="https://img.shields.io/github/stars/tinyplex/tinybase?style=for-the-badge&amp;logo=GitHub&amp;logoColor=%23fff&amp;label=GitHub&amp;labelColor=%23d81b60&amp;color=%23333"> </a><a href="https://bsky.app/profile/tinybase.bsky.social"><img src="https://img.shields.io/badge/Bluesky-Follow-blue?style=for-the-badge&amp;logo=bluesky&amp;logoColor=%23fff&amp;color=%23333&amp;labelColor=%230285FF"> </a><a href="https://x.com/tinybasejs" target="_blank"><img src="https://img.shields.io/badge/%2F%20Twitter-Follow-blue?style=for-the-badge&amp;logo=x&amp;logoColor=%23fff&amp;color=%23333&amp;labelColor=%23000"> </a><a href="https://discord.com/invite/mGz3mevwP8" target="_blank"><img src="https://img.shields.io/discord/1027918215323590676?style=for-the-badge&amp;logo=discord&amp;logoColor=%23fff&amp;label=Discord&amp;labelColor=%233131e8&amp;color=%23333"></a><br><a href="https://github.com/tinyplex/tinybase/discussions" target="_blank"><img src="https://img.shields.io/github/discussions/tinyplex/tinybase?style=for-the-badge&amp;logo=GitHub&amp;logoColor=%23fff&amp;label=Ideas&amp;labelColor=%23d81b60&amp;color=%23333"> </a><a href="https://github.com/tinyplex/tinybase/issues" target="_blank"><img src="https://img.shields.io/github/issues/tinyplex/tinybase?style=for-the-badge&amp;logo=GitHub&amp;logoColor=%23fff&amp;label=Issues&amp;labelColor=%23d81b60&amp;color=%23333"> </a><a href="#well-tested-and-documented"><img src="https://img.shields.io/badge/Tests-100%25-green?style=for-the-badge&amp;logo=Vitest&amp;logoColor=%23fff&amp;color=%23333&amp;labelColor=%2387c305"> </a><a href="https://www.npmjs.com/package/tinybase/v/9.0.0-beta.0" target="_blank"><img src="https://img.shields.io/npm/v/tinybase?style=for-the-badge&amp;logo=npm&amp;logoColor=%23fff&amp;labelColor=%23bd0005&amp;color=%23333"></a></section><hr><section><h2 id="start-with-a-simple-key-value-store">Start with a simple key-value store.</h2><p>Creating a <a href="https://beta.tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> requires just a simple call to the <a href="https://beta.tinybase.org/api/the-essentials/creating-stores/createstore/"><code>createStore</code></a> function. Once you have one, you can easily set <a href="https://beta.tinybase.org/api/store/type-aliases/store/values/"><code>Values</code></a> in it by unique <a href="https://beta.tinybase.org/api/common/type-aliases/identity/id/"><code>Id</code></a>. And of course you can easily get them back out again.</p><p>Read more about using keyed value data in <a href="https://beta.tinybase.org/guides/the-basics/">The Basics</a> guide.</p></section>
9
+ <hr><section><h2 id="it-s-reactive">It&#x27;s <em>Reactive</em></h2><p>TinyBase lets you <a href="#register-granular-listeners">listen to changes</a> made to any part of your data. This means your app will be fast, since you only spend rendering cycles on things that change. The optional <a href="#call-hooks-to-bind-to-data">bindings to React</a>, <a href="#pre-built-reactive-components">pre-built components</a>, and <a href="#local-first-data-visualizations">charts</a> let you easily build fully reactive UIs on top of TinyBase. You even get a built-in <a href="#set-checkpoints-for-an-undo-stack">undo stack</a>, and <a href="#an-inspector-for-your-data">developer tools</a>!</p></section><section><h2 id="it-s-database-like">It&#x27;s <em>Database-Like</em></h2><p>Consumer app? Enterprise app? Or even a game? Model <a href="#start-with-a-simple-key-value-store">key-value data</a> and <a href="#level-up-to-use-tabular-data">tabular data</a> with optional typed <a href="#apply-schemas-to-tables-values">schematization</a>, whatever its data structures. There are built-in <a href="#create-indexes-for-fast-lookups">indexing</a>, <a href="#define-metrics-and-aggregations">metric aggregation</a>, and tabular <a href="#model-table-relationships">relationships</a> APIs - and a powerful <a href="#build-complex-queries-with-tinyql">query engine</a> to select, join, filter, and group data (reactively!) without SQL.</p></section><section><h2 id="it-synchronizes">It <em>Synchronizes</em></h2><p>TinyBase has <a href="#synchronize-between-devices">native CRDT</a> support, meaning that you can deterministically <a href="https://beta.tinybase.org/guides/synchronization/">synchronize</a> and merge data across multiple sources, clients, and servers. And although TinyBase is an in-memory data store, you can easily <a href="#persist-to-storage-or-a-database">persist</a> your data to file, <a href="https://beta.tinybase.org/api/persister-browser">browser storage</a>, <a href="https://beta.tinybase.org/api/persister-indexed-db">IndexedDB</a>, <a href="https://beta.tinybase.org/guides/persistence/database-persistence/">SQLite or PostgreSQL databases</a>, and <a href="https://beta.tinybase.org/guides/persistence/third-party-crdt-persistence/">more</a>.</p></section><section><h2 id="it-s-built-for-a-local-first-world">It&#x27;s Built For A <em>Local-First</em> World</h2><p>TinyBase works anywhere that JavaScript does, but it&#x27;s especially great for local-first apps: where data is stored locally on the user&#x27;s device and that can be run offline. It&#x27;s tiny by name, tiny by nature: just <a href="#did-we-say-tiny">6.2kB - 13.8kB</a> and with no dependencies - yet <a href="#well-tested-and-documented">100% tested</a>, <a href="https://beta.tinybase.org/guides/the-basics/getting-started/">fully documented</a>, and of course, <a href="https://github.com/tinyplex/tinybase">open source</a>!</p></section><hr><section id="friends"><h2 id="tinybase-works-great-on-its-own-but-also-plays-well-with-friends">TinyBase works great on its own, but also plays well with friends.</h2><h3 id="ui-frameworks"><a href="https://beta.tinybase.org/guides/">UI Frameworks</a></h3><div><a href="https://beta.tinybase.org/guides/building-uis-with-react/getting-started-with-ui-react"><img src="https://beta.tinybase.org/react.svg?asImg" width="48"> React</a></div><div><a href="https://beta.tinybase.org/guides/building-uis-with-solid/getting-started-with-ui-solid"><img src="https://beta.tinybase.org/solid.svg?asImg" width="48"> Solid</a></div><div><a href="https://beta.tinybase.org/guides/building-uis-with-svelte/getting-started-with-ui-svelte"><img src="https://beta.tinybase.org/svelte.svg?asImg" width="48"> Svelte</a></div><h3 id="storage-sync"><a href="https://beta.tinybase.org/guides/persistence/">Storage &amp; Sync</a></h3><div><a href="https://beta.tinybase.org/api/persister-indexed-db/functions/creation/createindexeddbpersister"><img src="https://beta.tinybase.org/indexeddb.svg?asImg" width="48"> IndexedDB</a></div><div><a href="https://beta.tinybase.org/api/persister-browser"><img src="https://beta.tinybase.org/browser.svg?asImg" width="48"> OPFS</a></div><div><a href="https://beta.tinybase.org/guides/integrations/cloudflare-durable-objects"><img src="https://beta.tinybase.org/cloudflare.svg?asImg" width="48"> Cloudflare</a></div><div><a href="https://beta.tinybase.org/guides/schemas-and-persistence/database-persistence"><img src="https://beta.tinybase.org/postgresql.svg?asImg" width="48"> PostgreSQL</a></div><div><a href="https://beta.tinybase.org/guides/schemas-and-persistence/database-persistence"><img src="https://beta.tinybase.org/pglite.svg?asImg" width="48"> PGlite</a></div><div><a href="https://beta.tinybase.org/guides/schemas-and-persistence/database-persistence"><img src="https://beta.tinybase.org/sqlite.svg?asImg" width="48"> SQLite</a></div><div><a href="https://beta.tinybase.org/guides/schemas-and-persistence/database-persistence"><img src="https://beta.tinybase.org/bun.svg?asImg" width="48"> Bun SQLite</a></div><div><a href="https://beta.tinybase.org/guides/schemas-and-persistence/database-persistence"><img src="https://beta.tinybase.org/expo.svg?asImg" width="48"> Expo SQLite</a></div><div><a href="https://beta.tinybase.org/guides/schemas-and-persistence/database-persistence"><img src="https://beta.tinybase.org/electric.svg?asImg" width="48"> ElectricSQL</a></div><div><a href="https://beta.tinybase.org/guides/schemas-and-persistence/database-persistence"><img src="https://beta.tinybase.org/turso.svg?asImg" width="48"> Turso</a></div><div><a href="https://beta.tinybase.org/guides/schemas-and-persistence/database-persistence"><img src="https://beta.tinybase.org/powersync.svg?asImg" width="48"> PowerSync</a></div><div><a href="https://beta.tinybase.org/api/persister-partykit-client"><img src="https://beta.tinybase.org/partykit.svg?asImg" width="48"> PartyKit</a></div><div><a href="https://beta.tinybase.org/api/persister-yjs/functions/creation/createyjspersister"><img src="https://beta.tinybase.org/yjs.svg?asImg" width="48"> YJS</a></div><div><a href="https://beta.tinybase.org/api/persister-cr-sqlite-wasm"><img src="https://beta.tinybase.org/crsqlite.png" width="48"> CR-SQLite</a></div><div><a href="https://beta.tinybase.org/api/persister-automerge"><img src="https://beta.tinybase.org/automerge.svg?asImg" width="48"> Automerge</a></div><h3 id="schema-systems"><a href="https://beta.tinybase.org/guides/schemas/using-schematizers/">Schema Systems</a></h3><div><a href="https://beta.tinybase.org/api/schematizer-zod/functions/creation/createzodschematizer"><img src="https://beta.tinybase.org/zod.svg?asImg" width="48"> Zod</a></div><div><a href="https://beta.tinybase.org/api/schematizer-typebox/functions/creation/createtypeboxschematizer"><img src="https://beta.tinybase.org/typebox.svg?asImg" width="48"> TypeBox</a></div><div><a href="https://beta.tinybase.org/api/schematizer-valibot/functions/creation/createvalibotschematizer"><img src="https://beta.tinybase.org/valibot.svg?asImg" width="48"> Valibot</a></div><div><a href="https://beta.tinybase.org/api/schematizer-arktype/functions/creation/createarktypeschematizer"><img src="https://beta.tinybase.org/arktype.svg?asImg" width="48"> ArkType</a></div><div><a href="https://beta.tinybase.org/api/schematizer-yup/functions/creation/createyupschematizer"><img src="https://beta.tinybase.org/yup.svg?asImg" width="48"> Yup</a></div><div><a href="https://beta.tinybase.org/api/schematizer-effect/functions/creation/createeffectschematizer"><img src="https://beta.tinybase.org/effect.svg?asImg" width="48"> Effect</a></div><p>(Baffled by all these logos? Check out our <a href="https://beta.tinybase.org/guides/the-basics/architectural-options">architectural options</a> guide to make sense of it all!)</p></section><hr><section id="follow"><a href="https://github.com/tinyplex/tinybase" target="_blank"><img src="https://img.shields.io/github/stars/tinyplex/tinybase?style=for-the-badge&amp;logo=GitHub&amp;logoColor=%23fff&amp;label=GitHub&amp;labelColor=%23d81b60&amp;color=%23333"> </a><a href="https://bsky.app/profile/tinybase.bsky.social"><img src="https://img.shields.io/badge/Bluesky-Follow-blue?style=for-the-badge&amp;logo=bluesky&amp;logoColor=%23fff&amp;color=%23333&amp;labelColor=%230285FF"> </a><a href="https://x.com/tinybasejs" target="_blank"><img src="https://img.shields.io/badge/%2F%20Twitter-Follow-blue?style=for-the-badge&amp;logo=x&amp;logoColor=%23fff&amp;color=%23333&amp;labelColor=%23000"> </a><a href="https://discord.com/invite/mGz3mevwP8" target="_blank"><img src="https://img.shields.io/discord/1027918215323590676?style=for-the-badge&amp;logo=discord&amp;logoColor=%23fff&amp;label=Discord&amp;labelColor=%233131e8&amp;color=%23333"></a><br><a href="https://github.com/tinyplex/tinybase/discussions" target="_blank"><img src="https://img.shields.io/github/discussions/tinyplex/tinybase?style=for-the-badge&amp;logo=GitHub&amp;logoColor=%23fff&amp;label=Ideas&amp;labelColor=%23d81b60&amp;color=%23333"> </a><a href="https://github.com/tinyplex/tinybase/issues" target="_blank"><img src="https://img.shields.io/github/issues/tinyplex/tinybase?style=for-the-badge&amp;logo=GitHub&amp;logoColor=%23fff&amp;label=Issues&amp;labelColor=%23d81b60&amp;color=%23333"> </a><a href="#well-tested-and-documented"><img src="https://img.shields.io/badge/Tests-100%25-green?style=for-the-badge&amp;logo=Vitest&amp;logoColor=%23fff&amp;color=%23333&amp;labelColor=%2387c305"> </a><a href="https://www.npmjs.com/package/tinybase/v/9.0.0-beta.1" target="_blank"><img src="https://img.shields.io/npm/v/tinybase?style=for-the-badge&amp;logo=npm&amp;logoColor=%23fff&amp;labelColor=%23bd0005&amp;color=%23333"></a></section><hr><section><h2 id="start-with-a-simple-key-value-store">Start with a simple key-value store.</h2><p>Creating a <a href="https://beta.tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> requires just a simple call to the <a href="https://beta.tinybase.org/api/the-essentials/creating-stores/createstore/"><code>createStore</code></a> function. Once you have one, you can easily set <a href="https://beta.tinybase.org/api/store/type-aliases/store/values/"><code>Values</code></a> in it by unique <a href="https://beta.tinybase.org/api/common/type-aliases/identity/id/"><code>Id</code></a>. And of course you can easily get them back out again.</p><p>Read more about using keyed value data in <a href="https://beta.tinybase.org/guides/the-basics/">The Basics</a> guide.</p></section>
10
10
 
11
11
  ```js
12
12
  import {createStore} from 'tinybase';
@@ -283,4 +283,4 @@ console.log(store.getCell('pets', 'felix', 'sold'));
283
283
  // -> false
284
284
  ```
285
285
 
286
- <section><h2 id="did-we-say-tiny">Did we say tiny?</h2><p>If you use the basic <a href="https://beta.tinybase.org/api/store/"><code>store</code></a> module alone, you&#x27;ll only add a gzipped <em>6.2kB</em> to your app. Incrementally add the other modules as you need more functionality, or get it all for <em>13.7kB</em>.</p><p>The optional <a href="https://beta.tinybase.org/api/ui-react/"><code>ui-react</code></a> module is just <em>5.6kB</em>, the ui-react-dom components are another <em>4.0kB</em>, and everything is super fast. Life is easy when you have zero dependencies!</p><p>Read more about how TinyBase is structured and packaged in the <a href="https://beta.tinybase.org/guides/how-tinybase-is-built/architecture/">Architecture</a> guide.</p></section><div class="table"><table class="fixed"><tbody><tr><th> </th><th>Minified .js.gz</th><th>Source .js</th></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/store/">tinybase/store</a> (minimal)</th><td>6.2kB</td><td>65.5kB</td></tr><tr><th class="right">tinybase (complete)</th><td>13.7kB</td><td>150.5kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/ui-react/">ui-react</a></th><td>5.6kB</td><td>60.8kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/ui-react-dom/">ui-react-dom</a></th><td>4.0kB</td><td>36.8kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/ui-react-dom-charts/">ui-react-dom-charts</a></th><td>8.5kB</td><td>63.3kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/ui-solid/">ui-solid</a></th><td>5.5kB</td><td>59.8kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/ui-solid-dom/">ui-solid-dom</a></th><td>4.6kB</td><td>45.0kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/ui-svelte/">ui-svelte</a></th><td>4.7kB</td><td>58.9kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/ui-svelte-dom/">ui-svelte-dom</a></th><td>5.8kB</td><td>60.4kB</td></tr></tbody></table></div><section><h2 id="well-tested-and-documented">Well tested and documented.</h2><p>TinyBase has <em>100.0%</em> test coverage, including the code throughout the documentation - even on this page! The guides, demos, and <a href="https://beta.tinybase.org/api/">API</a> examples are designed to make it as easy as possible for you to get your TinyBase-powered app up and running.</p><p>Read more about how TinyBase is tested in the Unit <a href="https://beta.tinybase.org/guides/how-tinybase-is-built/testing/">Testing</a> guide.</p></section><div class="table"><table class="fixed"><tbody><tr><th width="30%"> </th><th>Total</th><th>Tested</th><th>Coverage</th></tr><tr><th class="right">Tested lines</th><td>4,452</td><td>4,452</td><td>100.0%</td></tr><tr><th class="right">Tested statements</th><td>4,833</td><td>4,833</td><td>100.0%</td></tr><tr><th class="right">Tested functions</th><td>2,183</td><td>2,183</td><td>100.0%</td></tr><tr><th class="right">Tested branches</th><td>1,359</td><td>1,359</td><td>100.0%</td></tr><tr><th class="right">Tests</th><td colspan="3">8,620</td></tr><tr><th class="right">Assertions</th><td colspan="3">35,861</td></tr></tbody></table></div><hr><section id="sponsors"><h2 id="proud-to-be-supported-by">Proud to be supported by:</h2><a href="https://github.com/fastrepl" target="_blank"><img src="https://github.com/fastrepl.png?size=48" title="fastrepl" width="48" height="48"></a><a href="https://github.com/ComputelessComputer" target="_blank"><img src="https://github.com/ComputelessComputer.png?size=48" title="ComputelessComputer" width="48" height="48"></a><a href="https://github.com/cancelself" target="_blank"><img src="https://github.com/cancelself.png?size=48" title="cancelself" width="48" height="48"></a><a href="https://github.com/expo" target="_blank"><img src="https://github.com/expo.png?size=48" title="expo" width="48" height="48"></a><a href="https://github.com/braden-w" target="_blank"><img src="https://github.com/braden-w.png?size=48" title="braden-w" width="48" height="48"></a><a href="https://github.com/dylmye" target="_blank"><img src="https://github.com/dylmye.png?size=48" title="dylmye" width="48" height="48"></a><a href="https://github.com/gonza224" target="_blank"><img src="https://github.com/gonza224.png?size=48" title="gonza224" width="48" height="48"></a><a href="https://github.com/cpojer" target="_blank"><img src="https://github.com/cpojer.png?size=48" title="cpojer" width="48" height="48"></a><a href="https://github.com/beekeeb" target="_blank"><img src="https://github.com/beekeeb.png?size=48" title="beekeeb" width="48" height="48"></a><a href="https://github.com/WonderPanda" target="_blank"><img src="https://github.com/WonderPanda.png?size=48" title="WonderPanda" width="48" height="48"></a><a href="https://github.com/arpitBhalla" target="_blank"><img src="https://github.com/arpitBhalla.png?size=48" title="arpitBhalla" width="48" height="48"></a></section><section id="users"><h2 id="excited-to-be-used-by">Excited to be used by:</h2><a href="https://github.com/behrends" target="_blank"><img src="https://github.com/behrends.png?size=48" title="behrends" width="48" height="48"></a><a href="https://github.com/betomoedano" target="_blank"><img src="https://github.com/betomoedano.png?size=48" title="betomoedano" width="48" height="48"></a><a href="https://github.com/brentvatne" target="_blank"><img src="https://github.com/brentvatne.png?size=48" title="brentvatne" width="48" height="48"></a><a href="https://github.com/byCedric" target="_blank"><img src="https://github.com/byCedric.png?size=48" title="byCedric" width="48" height="48"></a><a href="https://github.com/circadian-risk" target="_blank"><img src="https://github.com/circadian-risk.png?size=48" title="circadian-risk" width="48" height="48"></a><a href="https://github.com/cpojer" target="_blank"><img src="https://github.com/cpojer.png?size=48" title="cpojer" width="48" height="48"></a><a href="https://github.com/cubecull" target="_blank"><img src="https://github.com/cubecull.png?size=48" title="cubecull" width="48" height="48"></a><a href="https://github.com/erwinkn" target="_blank"><img src="https://github.com/erwinkn.png?size=48" title="erwinkn" width="48" height="48"></a><a href="https://github.com/expo" target="_blank"><img src="https://github.com/expo.png?size=48" title="expo" width="48" height="48"></a><a href="https://github.com/ezra-en" target="_blank"><img src="https://github.com/ezra-en.png?size=48" title="ezra-en" width="48" height="48"></a><a href="https://github.com/feychenie" target="_blank"><img src="https://github.com/feychenie.png?size=48" title="feychenie" width="48" height="48"></a><a href="https://github.com/flaming-codes" target="_blank"><img src="https://github.com/flaming-codes.png?size=48" title="flaming-codes" width="48" height="48"></a><a href="https://github.com/fostertheweb" target="_blank"><img src="https://github.com/fostertheweb.png?size=48" title="fostertheweb" width="48" height="48"></a><a href="https://github.com/Giulio987" target="_blank"><img src="https://github.com/Giulio987.png?size=48" title="Giulio987" width="48" height="48"></a><a href="https://github.com/hi-ogawa" target="_blank"><img src="https://github.com/hi-ogawa.png?size=48" title="hi-ogawa" width="48" height="48"></a><a href="https://github.com/itsdevcoffee" target="_blank"><img src="https://github.com/itsdevcoffee.png?size=48" title="itsdevcoffee" width="48" height="48"></a><a href="https://github.com/jbolda" target="_blank"><img src="https://github.com/jbolda.png?size=48" title="jbolda" width="48" height="48"></a><a href="https://github.com/Kayoo-asso" target="_blank"><img src="https://github.com/Kayoo-asso.png?size=48" title="Kayoo-asso" width="48" height="48"></a><a href="https://github.com/kotofurumiya" target="_blank"><img src="https://github.com/kotofurumiya.png?size=48" title="kotofurumiya" width="48" height="48"></a><a href="https://github.com/Kudo" target="_blank"><img src="https://github.com/Kudo.png?size=48" title="Kudo" width="48" height="48"></a><a href="https://github.com/learn-anything" target="_blank"><img src="https://github.com/learn-anything.png?size=48" title="learn-anything" width="48" height="48"></a><a href="https://github.com/lluc" target="_blank"><img src="https://github.com/lluc.png?size=48" title="lluc" width="48" height="48"></a><a href="https://github.com/marksteve" target="_blank"><img src="https://github.com/marksteve.png?size=48" title="marksteve" width="48" height="48"></a><a href="https://github.com/miking-the-viking" target="_blank"><img src="https://github.com/miking-the-viking.png?size=48" title="miking-the-viking" width="48" height="48"></a><a href="https://github.com/mjamesderocher" target="_blank"><img src="https://github.com/mjamesderocher.png?size=48" title="mjamesderocher" width="48" height="48"></a><a href="https://github.com/mouktardev" target="_blank"><img src="https://github.com/mouktardev.png?size=48" title="mouktardev" width="48" height="48"></a><a href="https://github.com/nickmessing" target="_blank"><img src="https://github.com/nickmessing.png?size=48" title="nickmessing" width="48" height="48"></a><a href="https://github.com/nikitavoloboev" target="_blank"><img src="https://github.com/nikitavoloboev.png?size=48" title="nikitavoloboev" width="48" height="48"></a><a href="https://github.com/nkzw-tech" target="_blank"><img src="https://github.com/nkzw-tech.png?size=48" title="nkzw-tech" width="48" height="48"></a><a href="https://github.com/palerdot" target="_blank"><img src="https://github.com/palerdot.png?size=48" title="palerdot" width="48" height="48"></a><a href="https://github.com/PorcoRosso85" target="_blank"><img src="https://github.com/PorcoRosso85.png?size=48" title="PorcoRosso85" width="48" height="48"></a><a href="https://github.com/primodiumxyz" target="_blank"><img src="https://github.com/primodiumxyz.png?size=48" title="primodiumxyz" width="48" height="48"></a><a href="https://github.com/shaneosullivan" target="_blank"><img src="https://github.com/shaneosullivan.png?size=48" title="shaneosullivan" width="48" height="48"></a><a href="https://github.com/sudo-self" target="_blank"><img src="https://github.com/sudo-self.png?size=48" title="sudo-self" width="48" height="48"></a><a href="https://github.com/SuperSonicHub1" target="_blank"><img src="https://github.com/SuperSonicHub1.png?size=48" title="SuperSonicHub1" width="48" height="48"></a><a href="https://github.com/threepointone" target="_blank"><img src="https://github.com/threepointone.png?size=48" title="threepointone" width="48" height="48"></a><a href="https://github.com/uptonking" target="_blank"><img src="https://github.com/uptonking.png?size=48" title="uptonking" width="48" height="48"></a><a href="https://github.com/ViktorZhurbin" target="_blank"><img src="https://github.com/ViktorZhurbin.png?size=48" title="ViktorZhurbin" width="48" height="48"></a><a href="https://github.com/wilkerlucio" target="_blank"><img src="https://github.com/wilkerlucio.png?size=48" title="wilkerlucio" width="48" height="48"></a><a href="https://github.com/WonderPanda" target="_blank"><img src="https://github.com/WonderPanda.png?size=48" title="WonderPanda" width="48" height="48"></a></section><hr><p><a class="start" href="https://beta.tinybase.org/guides/the-basics/getting-started/">Get started</a></p><p><a href="https://beta.tinybase.org/demos/">Try the demos</a></p><p><a href="https://beta.tinybase.org/api/the-essentials/creating-stores/store/">Read the docs</a></p><hr><section id="family"><h2 id="meet-the-family">Meet the family</h2><p>TinyBase is part of a group of small libraries designed to help make rich client and local-first apps easier to build. Check out the others!</p><p><a href="https://synclets.org" target="_blank"><img src="https://synclets.org/favicon.svg?asImg" width="48"><br><b>Synclets</b></a><br>An open, storage-agnostic, sync engine development kit.</p><p><a href="https://tinywidgets.org" target="_blank"><img src="https://tinywidgets.org/favicon.svg?asImg" width="48"><br><b>TinyWidgets</b></a><br>A collection of tiny, reusable, UI components.</p><p><a href="https://tinytick.org" target="_blank"><img src="https://tinytick.org/favicon.svg?asImg" width="48"><br><b>TinyTick</b></a><br>A tiny but very useful task orchestrator.</p></section><hr><section id="about"><h2 id="about">About</h2><p>Modern apps deserve better. Why trade reactive user experiences to be able to use relational data? Or sacrifice features for bundle size? And why does the cloud do all the work <a href="https://localfirstweb.dev/" target="_blank">anyway</a>?</p><p>Building TinyBase was originally an interesting exercise for <a rel="me" href="https://tripleodeon.com">me</a> in [API](/api/) design, minification, and documentation. But now it has taken on a life of its own, and has grown beyond my wildest expectations.</p><p>It could not have been built without these great <a href="https://beta.tinybase.org/guides/how-tinybase-is-built/credits/#giants">projects</a> and <a href="https://beta.tinybase.org/guides/how-tinybase-is-built/credits/#and-friends">friends</a>, and I hope you enjoy using it as much as I do building it!</p></section><section id="story"><h2 id="the-story">The story</h2><a href="https://youtu.be/hXL7OkW-Prk?t=1232" target="_blank"><img src="https://beta.tinybase.org/youtube.webp"></a></section>
286
+ <section><h2 id="did-we-say-tiny">Did we say tiny?</h2><p>If you use the basic <a href="https://beta.tinybase.org/api/store/"><code>store</code></a> module alone, you&#x27;ll only add a gzipped <em>6.2kB</em> to your app. Incrementally add the other modules as you need more functionality, or get it all for <em>13.8kB</em>.</p><p>The optional <a href="https://beta.tinybase.org/api/ui-react/"><code>ui-react</code></a> module is just <em>5.6kB</em>, the ui-react-dom components are another <em>4.0kB</em>, and everything is super fast. Life is easy when you have zero dependencies!</p><p>Read more about how TinyBase is structured and packaged in the <a href="https://beta.tinybase.org/guides/how-tinybase-is-built/architecture/">Architecture</a> guide.</p></section><div class="table"><table class="fixed"><tbody><tr><th> </th><th>Minified .js.gz</th><th>Source .js</th></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/store/">tinybase/store</a> (minimal)</th><td>6.2kB</td><td>66.3kB</td></tr><tr><th class="right">tinybase (complete)</th><td>13.8kB</td><td>151.4kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/ui-react/">ui-react</a></th><td>5.6kB</td><td>60.8kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/ui-react-dom/">ui-react-dom</a></th><td>4.0kB</td><td>36.8kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/ui-react-dom-charts/">ui-react-dom-charts</a></th><td>8.5kB</td><td>63.3kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/ui-solid/">ui-solid</a></th><td>5.5kB</td><td>59.8kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/ui-solid-dom/">ui-solid-dom</a></th><td>4.6kB</td><td>45.0kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/ui-svelte/">ui-svelte</a></th><td>4.7kB</td><td>58.9kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/ui-svelte-dom/">ui-svelte-dom</a></th><td>5.8kB</td><td>60.4kB</td></tr></tbody></table></div><section><h2 id="well-tested-and-documented">Well tested and documented.</h2><p>TinyBase has <em>100.0%</em> test coverage, including the code throughout the documentation - even on this page! The guides, demos, and <a href="https://beta.tinybase.org/api/">API</a> examples are designed to make it as easy as possible for you to get your TinyBase-powered app up and running.</p><p>Read more about how TinyBase is tested in the Unit <a href="https://beta.tinybase.org/guides/how-tinybase-is-built/testing/">Testing</a> guide.</p></section><div class="table"><table class="fixed"><tbody><tr><th width="30%"> </th><th>Total</th><th>Tested</th><th>Coverage</th></tr><tr><th class="right">Tested lines</th><td>4,461</td><td>4,461</td><td>100.0%</td></tr><tr><th class="right">Tested statements</th><td>4,842</td><td>4,842</td><td>100.0%</td></tr><tr><th class="right">Tested functions</th><td>2,184</td><td>2,184</td><td>100.0%</td></tr><tr><th class="right">Tested branches</th><td>1,371</td><td>1,371</td><td>100.0%</td></tr><tr><th class="right">Tests</th><td colspan="3">8,634</td></tr><tr><th class="right">Assertions</th><td colspan="3">35,919</td></tr></tbody></table></div><hr><section id="sponsors"><h2 id="proud-to-be-supported-by">Proud to be supported by:</h2><a href="https://github.com/fastrepl" target="_blank"><img src="https://github.com/fastrepl.png?size=48" title="fastrepl" width="48" height="48"></a><a href="https://github.com/ComputelessComputer" target="_blank"><img src="https://github.com/ComputelessComputer.png?size=48" title="ComputelessComputer" width="48" height="48"></a><a href="https://github.com/cancelself" target="_blank"><img src="https://github.com/cancelself.png?size=48" title="cancelself" width="48" height="48"></a><a href="https://github.com/expo" target="_blank"><img src="https://github.com/expo.png?size=48" title="expo" width="48" height="48"></a><a href="https://github.com/braden-w" target="_blank"><img src="https://github.com/braden-w.png?size=48" title="braden-w" width="48" height="48"></a><a href="https://github.com/dylmye" target="_blank"><img src="https://github.com/dylmye.png?size=48" title="dylmye" width="48" height="48"></a><a href="https://github.com/gonza224" target="_blank"><img src="https://github.com/gonza224.png?size=48" title="gonza224" width="48" height="48"></a><a href="https://github.com/cpojer" target="_blank"><img src="https://github.com/cpojer.png?size=48" title="cpojer" width="48" height="48"></a><a href="https://github.com/beekeeb" target="_blank"><img src="https://github.com/beekeeb.png?size=48" title="beekeeb" width="48" height="48"></a><a href="https://github.com/WonderPanda" target="_blank"><img src="https://github.com/WonderPanda.png?size=48" title="WonderPanda" width="48" height="48"></a><a href="https://github.com/arpitBhalla" target="_blank"><img src="https://github.com/arpitBhalla.png?size=48" title="arpitBhalla" width="48" height="48"></a></section><section id="users"><h2 id="excited-to-be-used-by">Excited to be used by:</h2><a href="https://github.com/behrends" target="_blank"><img src="https://github.com/behrends.png?size=48" title="behrends" width="48" height="48"></a><a href="https://github.com/betomoedano" target="_blank"><img src="https://github.com/betomoedano.png?size=48" title="betomoedano" width="48" height="48"></a><a href="https://github.com/brentvatne" target="_blank"><img src="https://github.com/brentvatne.png?size=48" title="brentvatne" width="48" height="48"></a><a href="https://github.com/byCedric" target="_blank"><img src="https://github.com/byCedric.png?size=48" title="byCedric" width="48" height="48"></a><a href="https://github.com/circadian-risk" target="_blank"><img src="https://github.com/circadian-risk.png?size=48" title="circadian-risk" width="48" height="48"></a><a href="https://github.com/cpojer" target="_blank"><img src="https://github.com/cpojer.png?size=48" title="cpojer" width="48" height="48"></a><a href="https://github.com/cubecull" target="_blank"><img src="https://github.com/cubecull.png?size=48" title="cubecull" width="48" height="48"></a><a href="https://github.com/erwinkn" target="_blank"><img src="https://github.com/erwinkn.png?size=48" title="erwinkn" width="48" height="48"></a><a href="https://github.com/expo" target="_blank"><img src="https://github.com/expo.png?size=48" title="expo" width="48" height="48"></a><a href="https://github.com/ezra-en" target="_blank"><img src="https://github.com/ezra-en.png?size=48" title="ezra-en" width="48" height="48"></a><a href="https://github.com/feychenie" target="_blank"><img src="https://github.com/feychenie.png?size=48" title="feychenie" width="48" height="48"></a><a href="https://github.com/flaming-codes" target="_blank"><img src="https://github.com/flaming-codes.png?size=48" title="flaming-codes" width="48" height="48"></a><a href="https://github.com/fostertheweb" target="_blank"><img src="https://github.com/fostertheweb.png?size=48" title="fostertheweb" width="48" height="48"></a><a href="https://github.com/Giulio987" target="_blank"><img src="https://github.com/Giulio987.png?size=48" title="Giulio987" width="48" height="48"></a><a href="https://github.com/hi-ogawa" target="_blank"><img src="https://github.com/hi-ogawa.png?size=48" title="hi-ogawa" width="48" height="48"></a><a href="https://github.com/itsdevcoffee" target="_blank"><img src="https://github.com/itsdevcoffee.png?size=48" title="itsdevcoffee" width="48" height="48"></a><a href="https://github.com/jbolda" target="_blank"><img src="https://github.com/jbolda.png?size=48" title="jbolda" width="48" height="48"></a><a href="https://github.com/Kayoo-asso" target="_blank"><img src="https://github.com/Kayoo-asso.png?size=48" title="Kayoo-asso" width="48" height="48"></a><a href="https://github.com/kotofurumiya" target="_blank"><img src="https://github.com/kotofurumiya.png?size=48" title="kotofurumiya" width="48" height="48"></a><a href="https://github.com/Kudo" target="_blank"><img src="https://github.com/Kudo.png?size=48" title="Kudo" width="48" height="48"></a><a href="https://github.com/learn-anything" target="_blank"><img src="https://github.com/learn-anything.png?size=48" title="learn-anything" width="48" height="48"></a><a href="https://github.com/lluc" target="_blank"><img src="https://github.com/lluc.png?size=48" title="lluc" width="48" height="48"></a><a href="https://github.com/marksteve" target="_blank"><img src="https://github.com/marksteve.png?size=48" title="marksteve" width="48" height="48"></a><a href="https://github.com/miking-the-viking" target="_blank"><img src="https://github.com/miking-the-viking.png?size=48" title="miking-the-viking" width="48" height="48"></a><a href="https://github.com/mjamesderocher" target="_blank"><img src="https://github.com/mjamesderocher.png?size=48" title="mjamesderocher" width="48" height="48"></a><a href="https://github.com/mouktardev" target="_blank"><img src="https://github.com/mouktardev.png?size=48" title="mouktardev" width="48" height="48"></a><a href="https://github.com/nickmessing" target="_blank"><img src="https://github.com/nickmessing.png?size=48" title="nickmessing" width="48" height="48"></a><a href="https://github.com/nikitavoloboev" target="_blank"><img src="https://github.com/nikitavoloboev.png?size=48" title="nikitavoloboev" width="48" height="48"></a><a href="https://github.com/nkzw-tech" target="_blank"><img src="https://github.com/nkzw-tech.png?size=48" title="nkzw-tech" width="48" height="48"></a><a href="https://github.com/palerdot" target="_blank"><img src="https://github.com/palerdot.png?size=48" title="palerdot" width="48" height="48"></a><a href="https://github.com/PorcoRosso85" target="_blank"><img src="https://github.com/PorcoRosso85.png?size=48" title="PorcoRosso85" width="48" height="48"></a><a href="https://github.com/primodiumxyz" target="_blank"><img src="https://github.com/primodiumxyz.png?size=48" title="primodiumxyz" width="48" height="48"></a><a href="https://github.com/shaneosullivan" target="_blank"><img src="https://github.com/shaneosullivan.png?size=48" title="shaneosullivan" width="48" height="48"></a><a href="https://github.com/sudo-self" target="_blank"><img src="https://github.com/sudo-self.png?size=48" title="sudo-self" width="48" height="48"></a><a href="https://github.com/SuperSonicHub1" target="_blank"><img src="https://github.com/SuperSonicHub1.png?size=48" title="SuperSonicHub1" width="48" height="48"></a><a href="https://github.com/threepointone" target="_blank"><img src="https://github.com/threepointone.png?size=48" title="threepointone" width="48" height="48"></a><a href="https://github.com/uptonking" target="_blank"><img src="https://github.com/uptonking.png?size=48" title="uptonking" width="48" height="48"></a><a href="https://github.com/ViktorZhurbin" target="_blank"><img src="https://github.com/ViktorZhurbin.png?size=48" title="ViktorZhurbin" width="48" height="48"></a><a href="https://github.com/wilkerlucio" target="_blank"><img src="https://github.com/wilkerlucio.png?size=48" title="wilkerlucio" width="48" height="48"></a><a href="https://github.com/WonderPanda" target="_blank"><img src="https://github.com/WonderPanda.png?size=48" title="WonderPanda" width="48" height="48"></a></section><hr><p><a class="start" href="https://beta.tinybase.org/guides/the-basics/getting-started/">Get started</a></p><p><a href="https://beta.tinybase.org/demos/">Try the demos</a></p><p><a href="https://beta.tinybase.org/api/the-essentials/creating-stores/store/">Read the docs</a></p><hr><section id="family"><h2 id="meet-the-family">Meet the family</h2><p>TinyBase is part of a group of small libraries designed to help make rich client and local-first apps easier to build. Check out the others!</p><p><a href="https://synclets.org" target="_blank"><img src="https://synclets.org/favicon.svg?asImg" width="48"><br><b>Synclets</b></a><br>An open, storage-agnostic, sync engine development kit.</p><p><a href="https://tinywidgets.org" target="_blank"><img src="https://tinywidgets.org/favicon.svg?asImg" width="48"><br><b>TinyWidgets</b></a><br>A collection of tiny, reusable, UI components.</p><p><a href="https://tinytick.org" target="_blank"><img src="https://tinytick.org/favicon.svg?asImg" width="48"><br><b>TinyTick</b></a><br>A tiny but very useful task orchestrator.</p></section><hr><section id="about"><h2 id="about">About</h2><p>Modern apps deserve better. Why trade reactive user experiences to be able to use relational data? Or sacrifice features for bundle size? And why does the cloud do all the work <a href="https://localfirstweb.dev/" target="_blank">anyway</a>?</p><p>Building TinyBase was originally an interesting exercise for <a rel="me" href="https://tripleodeon.com">me</a> in [API](/api/) design, minification, and documentation. But now it has taken on a life of its own, and has grown beyond my wildest expectations.</p><p>It could not have been built without these great <a href="https://beta.tinybase.org/guides/how-tinybase-is-built/credits/#giants">projects</a> and <a href="https://beta.tinybase.org/guides/how-tinybase-is-built/credits/#and-friends">friends</a>, and I hope you enjoy using it as much as I do building it!</p></section><section id="story"><h2 id="the-story">The story</h2><a href="https://youtu.be/hXL7OkW-Prk?t=1232" target="_blank"><img src="https://beta.tinybase.org/youtube.webp"></a></section>
package/releases.md CHANGED
@@ -1,4 +1,4 @@
1
- <link rel="preload" as="image" href="https://beta.tinybase.org/shots/styled-chart-react-demo.png"><link rel="preload" as="image" href="https://beta.tinybase.org/shots/axis-overrides-react-demo.png"><link rel="preload" as="image" href="https://beta.tinybase.org/shots/sortedtableinhtmltable-solid-demo.png"><link rel="preload" as="image" href="https://beta.tinybase.org/shots/inspector-solid-demo.png"><link rel="preload" as="image" href="https://beta.tinybase.org/shots/editablevalueview-solid-demo.png"><link rel="preload" as="image" href="https://beta.tinybase.org/shots/sortedtableinhtmltable-svelte-demo.png"><link rel="preload" as="image" href="https://beta.tinybase.org/shots/inspector-svelte-demo.png"><link rel="preload" as="image" href="https://beta.tinybase.org/shots/editablevalueview-svelte-full-demo.png"><link rel="preload" as="image" href="https://beta.tinybase.org/shots/inspector-react-demo.png"><link rel="preload" as="image" href="https://beta.tinybase.org/partykit.gif"><link rel="preload" as="image" href="https://beta.tinybase.org/shots/sortedtableinhtmltable-react-demo.png"><link rel="preload" as="image" href="https://beta.tinybase.org/shots/car-analysis-demo.png"><link rel="preload" as="image" href="https://beta.tinybase.org/shots/movie-database-demo.png"><p>This is a reverse chronological list of the major TinyBase releases, with highlighted features.</p><hr><h1 id="v9-0">v9.0</h1><h2 id="persistence-subsets"><a href="https://beta.tinybase.org/guides/persistence/">Persistence</a> Subsets</h2><p>This release adds finer-grained configuration for tabular database Persisters, allowing <a href="https://beta.tinybase.org/api/store/type-aliases/store/values/"><code>Values</code></a> persistence to be limited to selected <a href="https://beta.tinybase.org/api/store/type-aliases/store/value/"><code>Value</code></a> <a href="https://beta.tinybase.org/api/common/type-aliases/identity/ids/"><code>Ids</code></a>.</p><p>For apps that keep durable state and UI-only state in the same <a href="https://beta.tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a>, the <a href="https://beta.tinybase.org/api/persisters/type-aliases/configuration/dpctabularvalues/"><code>DpcTabularValues</code></a> <code>load</code> and <code>save</code> properties can now use an array of <a href="https://beta.tinybase.org/api/store/type-aliases/store/value/"><code>Value</code></a> <a href="https://beta.tinybase.org/api/common/type-aliases/identity/ids/"><code>Ids</code></a> instead of a simple boolean:</p>
1
+ <link rel="preload" as="image" href="https://beta.tinybase.org/shots/styled-chart-react-demo.png"><link rel="preload" as="image" href="https://beta.tinybase.org/shots/axis-overrides-react-demo.png"><link rel="preload" as="image" href="https://beta.tinybase.org/shots/sortedtableinhtmltable-solid-demo.png"><link rel="preload" as="image" href="https://beta.tinybase.org/shots/inspector-solid-demo.png"><link rel="preload" as="image" href="https://beta.tinybase.org/shots/editablevalueview-solid-demo.png"><link rel="preload" as="image" href="https://beta.tinybase.org/shots/sortedtableinhtmltable-svelte-demo.png"><link rel="preload" as="image" href="https://beta.tinybase.org/shots/inspector-svelte-demo.png"><link rel="preload" as="image" href="https://beta.tinybase.org/shots/editablevalueview-svelte-full-demo.png"><link rel="preload" as="image" href="https://beta.tinybase.org/shots/inspector-react-demo.png"><link rel="preload" as="image" href="https://beta.tinybase.org/partykit.gif"><link rel="preload" as="image" href="https://beta.tinybase.org/shots/sortedtableinhtmltable-react-demo.png"><link rel="preload" as="image" href="https://beta.tinybase.org/shots/car-analysis-demo.png"><link rel="preload" as="image" href="https://beta.tinybase.org/shots/movie-database-demo.png"><p>This is a reverse chronological list of the major TinyBase releases, with highlighted features.</p><hr><h1 id="v9-0">v9.0</h1><p>This release has no new features; just fixes and reliability improvements.</p><p>TinyBase v9.0 is all about addressing issues from the community - and making local-first apps behave better in production. The areas addressed include persistence, synchronization, schema defaults, infrastructure limits, and edge-case query semantics.</p><p>There is one new configuration option (for more selective <a href="https://beta.tinybase.org/api/store/type-aliases/store/value/"><code>Value</code></a> persistence), but otherwise the wider theme is reliability. This release hardens WebSocket synchronization, Durable Object storage, PowerSync startup, custom <a href="https://beta.tinybase.org/api/the-essentials/persisting-stores/persister/"><code>Persister</code></a> loading, and a few type and documentation edges so that apps recover and sync more cleanly under real-world conditions.</p><p>We hope you enjoy using TinyBase and if you find further issues, keep them coming!</p><h2 id="persistence-subsets"><a href="https://beta.tinybase.org/guides/persistence/">Persistence</a> Subsets</h2><p>This release adds finer-grained configuration for tabular database Persisters, allowing <a href="https://beta.tinybase.org/api/store/type-aliases/store/values/"><code>Values</code></a> persistence to be limited to selected <a href="https://beta.tinybase.org/api/store/type-aliases/store/value/"><code>Value</code></a> <a href="https://beta.tinybase.org/api/common/type-aliases/identity/ids/"><code>Ids</code></a> (<a href="https://github.com/tinyplex/tinybase/issues/279">#279</a>).</p><p>For apps that keep durable state and UI-only state in the same <a href="https://beta.tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a>, the <a href="https://beta.tinybase.org/api/persisters/type-aliases/configuration/dpctabularvalues/"><code>DpcTabularValues</code></a> <code>load</code> and <code>save</code> properties can now use an array of <a href="https://beta.tinybase.org/api/store/type-aliases/store/value/"><code>Value</code></a> <a href="https://beta.tinybase.org/api/common/type-aliases/identity/ids/"><code>Ids</code></a> instead of a simple boolean:</p>
2
2
 
3
3
  ```js
4
4
  const valuesSubsetDatabasePersisterConfig = {
@@ -13,7 +13,8 @@ console.log(valuesSubsetDatabasePersisterConfig.values.load);
13
13
  // -> ['selectedPet', 'open']
14
14
  ```
15
15
 
16
- <p>When a subset is configured, unlisted <a href="https://beta.tinybase.org/api/store/type-aliases/store/values/"><code>Values</code></a> in the <a href="https://beta.tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> are not saved, and unlisted columns in the <a href="https://beta.tinybase.org/api/store/type-aliases/store/values/"><code>Values</code></a> database table are left untouched.</p><h2 id="websocket-synchronization-fixes">WebSocket <a href="https://beta.tinybase.org/guides/synchronization/">Synchronization</a> Fixes</h2><p>WebSocket Synchronizers can now fragment large synchronization payloads and reassemble them on receipt. This helps deployments behind infrastructure with WebSocket message size limits, such as Cloudflare Workers and Durable Objects.</p><p>The createWsSynchronizer and <a href="https://beta.tinybase.org/api/synchronizer-ws-server/functions/creation/createwsserver/"><code>createWsServer</code></a> functions now accept an optional fragment size argument. Incomplete fragment buffers expire using the existing request timeout, which can also now be set on createWsServer. Durable Object servers can override the getFragmentSize and <a href="https://beta.tinybase.org/api/synchronizer-ws-server-durable-object/classes/creation/wsserverdurableobject/methods/getter/getrequesttimeoutseconds/"><code>getRequestTimeoutSeconds</code></a> methods to set the same behavior for messages they send.</p><p>The WebSocket <a href="https://beta.tinybase.org/api/the-essentials/synchronizing-stores/synchronizer/"><code>Synchronizer</code></a> documentation now also clarifies that <a href="https://beta.tinybase.org/api/synchronizer-ws-server/interfaces/server/wsserver/"><code>WsServer</code></a> paths come from WebSocket URL paths, not <a href="https://beta.tinybase.org/api/mergeable-store/interfaces/mergeable/mergeablestore/"><code>MergeableStore</code></a> <a href="https://beta.tinybase.org/api/common/type-aliases/identity/ids/"><code>Ids</code></a>, so clients that need separate synchronization groups should connect to different URL paths.</p><h2 id="powersync-persistence-fixes">PowerSync <a href="https://beta.tinybase.org/guides/persistence/">Persistence</a> Fixes</h2><p>The PowerSync <a href="https://beta.tinybase.org/api/the-essentials/persisting-stores/persister/"><code>Persister</code></a> now updates existing tabular rows before inserting missing ones, instead of replacing whole rows during upserts. This avoids flooding PowerSync upload queues with replacement writes when schema validation causes loaded data to be written back unchanged on startup.</p><h2 id="durable-object-persistence-fixes">Durable Object <a href="https://beta.tinybase.org/guides/persistence/">Persistence</a> Fixes</h2><p>The Durable Object SQL Storage <a href="https://beta.tinybase.org/api/the-essentials/persisting-stores/persister/"><code>Persister</code></a>&#x27;s fragmented mode now stores table row data as one SQL row per TinyBase <a href="https://beta.tinybase.org/api/store/type-aliases/store/row/"><code>Row</code></a>, instead of one SQL row per <a href="https://beta.tinybase.org/api/store/type-aliases/store/cell/"><code>Cell</code></a>. This reduces the number of SQLite writes for wide Rows while preserving the fragmented mode&#x27;s protection from Cloudflare&#x27;s 2MB row limit. Existing cell-level fragmented data is still loaded and is cleaned up when the <a href="https://beta.tinybase.org/api/store/type-aliases/store/row/"><code>Row</code></a> is next saved.</p><h2 id="breaking-change">Breaking Change</h2><p>This release is a major version because the Durable Object SQL Storage <a href="https://beta.tinybase.org/api/the-essentials/persisting-stores/persister/"><code>Persister</code></a>&#x27;s fragmented mode uses a new storage layout. TinyBase v9.0 can read the old cell-level fragmented data written by earlier releases, but once it saves the new row-level fragmented data, older TinyBase versions are not designed to read that data back. Apps using fragmented Durable Object SQL storage should not roll those Durable Objects back to an earlier TinyBase version after v9.0 has written to them.</p><h2 id="query-transaction-fixes">Query Transaction Fixes</h2><p>Grouped queries, including those with having clauses, now correctly return their current result when a query definition is added during an active <a href="https://beta.tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> transaction.</p><hr><h1 id="v8-5">v8.5</h1><h2 id="react-chart-components">React Chart Components</h2><p>This release adds the new <a href="https://beta.tinybase.org/api/ui-react-dom-charts/"><code>ui-react-dom-charts</code></a> module, providing reactive SVG chart components for React apps.</p><p>The <a href="https://beta.tinybase.org/api/ui-react-dom-charts/functions/store-components/linechart/"><code>LineChart</code></a> component and <a href="https://beta.tinybase.org/api/ui-react-dom-charts/functions/store-components/barchart/"><code>BarChart</code></a> component can render data directly from a <a href="https://beta.tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> <a href="https://beta.tinybase.org/api/store/type-aliases/store/table/"><code>Table</code></a>, or from a <a href="https://beta.tinybase.org/api/queries/interfaces/queries/queries/"><code>Queries</code></a> <a href="https://beta.tinybase.org/api/queries/type-aliases/result/resulttable/"><code>ResultTable</code></a>, using the same Provider context patterns as the rest of the React UI modules. For more complex charts, the <a href="https://beta.tinybase.org/api/ui-react-dom-charts/functions/store-components/cartesianchart/"><code>CartesianChart</code></a> component can compose multiple <a href="https://beta.tinybase.org/api/ui-react-dom-charts/functions/store-components/lineseries/"><code>LineSeries</code></a> component children and <a href="https://beta.tinybase.org/api/ui-react-dom-charts/functions/store-components/barseries/"><code>BarSeries</code></a> component children in one SVG.</p><p><img src="https://beta.tinybase.org/shots/styled-chart-react-demo.png" alt="LineChart component (React)" title="[`LineChart`](/api/ui-react-dom-charts/functions/store-components/linechart/) component (React)"></p><p>A chart can be bound to a <a href="https://beta.tinybase.org/api/store/type-aliases/store/table/"><code>Table</code></a> with just the <a href="https://beta.tinybase.org/api/store/type-aliases/store/table/"><code>Table</code></a> <a href="https://beta.tinybase.org/api/common/type-aliases/identity/id/"><code>Id</code></a> and the <a href="https://beta.tinybase.org/api/store/type-aliases/store/cell/"><code>Cell</code></a> <a href="https://beta.tinybase.org/api/common/type-aliases/identity/ids/"><code>Ids</code></a> to use for the x and y values:</p>
16
+ <p>When a subset is configured, unlisted <a href="https://beta.tinybase.org/api/store/type-aliases/store/values/"><code>Values</code></a> in the <a href="https://beta.tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> are not saved, and unlisted columns in the <a href="https://beta.tinybase.org/api/store/type-aliases/store/values/"><code>Values</code></a> database table are left untouched.</p><h2 id="websocket-synchronization-fixes">WebSocket <a href="https://beta.tinybase.org/guides/synchronization/">Synchronization</a> Fixes</h2><p>WebSocket Synchronizers can now fragment large synchronization payloads and reassemble them on receipt. This helps deployments behind infrastructure with WebSocket message size limits, such as Cloudflare Workers and Durable Objects (<a href="https://github.com/tinyplex/tinybase/issues/261">#261</a>).</p><p>The createWsSynchronizer and <a href="https://beta.tinybase.org/api/synchronizer-ws-server/functions/creation/createwsserver/"><code>createWsServer</code></a> functions now accept an optional fragment size argument. Incomplete fragment buffers expire using the existing request timeout, which can also now be set on createWsServer. Durable Object servers can override the getFragmentSize and <a href="https://beta.tinybase.org/api/synchronizer-ws-server-durable-object/classes/creation/wsserverdurableobject/methods/getter/getrequesttimeoutseconds/"><code>getRequestTimeoutSeconds</code></a> methods to set the same behavior for messages they send.</p><p>The WebSocket <a href="https://beta.tinybase.org/api/the-essentials/synchronizing-stores/synchronizer/"><code>Synchronizer</code></a> documentation now also clarifies that <a href="https://beta.tinybase.org/api/synchronizer-ws-server/interfaces/server/wsserver/"><code>WsServer</code></a> paths come from WebSocket URL paths, not <a href="https://beta.tinybase.org/api/mergeable-store/interfaces/mergeable/mergeablestore/"><code>MergeableStore</code></a> <a href="https://beta.tinybase.org/api/common/type-aliases/identity/ids/"><code>Ids</code></a>, so clients that need separate synchronization groups should connect to different URL paths (<a href="https://github.com/tinyplex/tinybase/issues/206">#206</a>).</p><p>When a persisted <a href="https://beta.tinybase.org/api/synchronizer-ws-server/interfaces/server/wsserver/"><code>WsServer</code></a> path starts after having no connected clients, it now loads its persisted <a href="https://beta.tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> before starting synchronization. This means the first client to reconnect is sent only the data it is missing, instead of receiving the whole persisted <a href="https://beta.tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> as a fresh change (<a href="https://github.com/tinyplex/tinybase/issues/205">#205</a>).</p><h2 id="schema-default-synchronization-fixes">Schema Default <a href="https://beta.tinybase.org/guides/synchronization/">Synchronization</a> Fixes</h2><p>Schema defaults inserted automatically into MergeableStores now use neutral timestamps, so defaulted <a href="https://beta.tinybase.org/api/store/type-aliases/store/values/"><code>Values</code></a> and Cells no longer overwrite newer synced data from another peer. Explicit writes of default values still receive normal timestamps (<a href="https://github.com/tinyplex/tinybase/issues/167">#167</a>).</p><h2 id="powersync-persistence-fixes">PowerSync <a href="https://beta.tinybase.org/guides/persistence/">Persistence</a> Fixes</h2><p>The PowerSync <a href="https://beta.tinybase.org/api/the-essentials/persisting-stores/persister/"><code>Persister</code></a> now updates existing tabular rows before inserting missing ones, instead of replacing whole rows during upserts. This avoids flooding PowerSync upload queues with replacement writes when schema validation causes loaded data to be written back unchanged on startup (<a href="https://github.com/tinyplex/tinybase/issues/262">#262</a>).</p><h2 id="custom-persister-loading-fixes">Custom <a href="https://beta.tinybase.org/api/the-essentials/persisting-stores/persister/"><code>Persister</code></a> Loading Fixes</h2><p>Custom Persisters can now return <code>undefined</code> from <code>getPersisted</code> to indicate that there is no persisted content. Loading then uses <code>initialContent</code> if it was provided, or otherwise leaves the <a href="https://beta.tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> unchanged without invoking the ignored error handler (<a href="https://github.com/tinyplex/tinybase/issues/161">#161</a>).</p><h2 id="durable-object-persistence-fixes">Durable Object <a href="https://beta.tinybase.org/guides/persistence/">Persistence</a> Fixes</h2><p>The Durable Object SQL Storage <a href="https://beta.tinybase.org/api/the-essentials/persisting-stores/persister/"><code>Persister</code></a>&#x27;s fragmented mode now stores table row data as one SQL row per TinyBase <a href="https://beta.tinybase.org/api/store/type-aliases/store/row/"><code>Row</code></a>, instead of one SQL row per <a href="https://beta.tinybase.org/api/store/type-aliases/store/cell/"><code>Cell</code></a>. This reduces the number of SQLite writes for wide Rows while preserving the fragmented mode&#x27;s protection from Cloudflare&#x27;s 2MB row limit. Existing cell-level fragmented data is still loaded and is cleaned up when the <a href="https://beta.tinybase.org/api/store/type-aliases/store/row/"><code>Row</code></a> is next saved (<a href="https://github.com/tinyplex/tinybase/issues/268">#268</a>).</p><h2 id="query-transaction-fixes">Query Transaction Fixes</h2><p>Grouped queries, including those with having clauses, now correctly return their current result when a query definition is added during an active <a href="https://beta.tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> transaction (<a href="https://github.com/tinyplex/tinybase/issues/259">#259</a>).</p><h2 id="query-documentation-clarifications">Query <a href="https://beta.tinybase.org/guides/how-tinybase-is-built/documentation/">Documentation</a> Clarifications</h2><p>The <a href="https://beta.tinybase.org/guides/using-queries/tinyql/">TinyQL</a> documentation now explicitly describes that a <a href="https://beta.tinybase.org/api/store/type-aliases/store/row/"><code>Row</code></a> only appears in a query result when at least one selected <a href="https://beta.tinybase.org/api/store/type-aliases/store/cell/"><code>Cell</code></a> or calculated value is defined. If all selected values for a <a href="https://beta.tinybase.org/api/store/type-aliases/store/row/"><code>Row</code></a> resolve to <code>undefined</code>, no <a href="https://beta.tinybase.org/api/queries/type-aliases/result/resultrow/"><code>ResultRow</code></a> is created for that <a href="https://beta.tinybase.org/api/store/type-aliases/store/row/"><code>Row</code></a> (<a href="https://github.com/tinyplex/tinybase/issues/183">#183</a>).</p><h2 id="type-fixes">Type Fixes</h2><p>The schema-aware <a href="https://beta.tinybase.org/api/mergeable-store/type-aliases/mergeable/mergeablecontent/"><code>MergeableContent</code></a>, <a href="https://beta.tinybase.org/api/mergeable-store/type-aliases/mergeable/mergeablechanges/"><code>MergeableChanges</code></a>, persisted content, and <a href="https://beta.tinybase.org/api/the-essentials/persisting-stores/persister/"><code>Persister</code></a> listener types now validate content being set or loaded in the same way as <a href="https://beta.tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> setters. This catches invalid <a href="https://beta.tinybase.org/api/store/type-aliases/store/cell/"><code>Cell</code></a> or <a href="https://beta.tinybase.org/api/store/type-aliases/store/value/"><code>Value</code></a> <a href="https://beta.tinybase.org/api/common/type-aliases/identity/ids/"><code>Ids</code></a> and values in custom Persisters and <a href="https://beta.tinybase.org/api/mergeable-store/interfaces/mergeable/mergeablestore/"><code>MergeableStore</code></a> setters (<a href="https://github.com/tinyplex/tinybase/issues/178">#178</a>).</p><h2 id="breaking-change">Breaking Change</h2><p>This release is a major version because the Durable Object SQL Storage <a href="https://beta.tinybase.org/api/the-essentials/persisting-stores/persister/"><code>Persister</code></a>&#x27;s fragmented mode uses a new storage layout. TinyBase v9.0 can read the old cell-level fragmented data written by earlier releases, but once it saves the new row-level fragmented data, older TinyBase versions are not designed to read that data back. Apps using fragmented Durable Object SQL storage should not roll those Durable Objects back to an earlier TinyBase version after v9.0 has written to them.</p><h2 id="thank-you">Thank You</h2><p>Thanks to everyone whose reports and fixes shaped this release:</p><p><a href="https://github.com/dheerajvs">Dheeraj</a>, <a href="https://github.com/jakubriedl">Jakub Riedl</a>, <a href="https://github.com/patrykwegrzyn">Patryk Wegrzyn</a>, <a href="https://github.com/dsrominiyi">Damilola Romniyi</a>, <a href="https://github.com/a11rew">Andrew Glago</a>, <a href="https://github.com/wattroll">wattroll</a>, <a href="https://github.com/willhoney7">Will Honey</a>, and <a href="https://github.com/danielberndt">Daniel Berndt</a>.</p><p>Couldn&#x27;t do it without you!</p><hr><h1 id="v8-5">v8.5</h1><h2 id="react-chart-components">React Chart Components</h2><p>This release adds the new <a href="https://beta.tinybase.org/api/ui-react-dom-charts/"><code>ui-react-dom-charts</code></a> module, providing reactive SVG chart components for React apps.</p><p>The <a href="https://beta.tinybase.org/api/ui-react-dom-charts/functions/store-components/linechart/"><code>LineChart</code></a> component and <a href="https://beta.tinybase.org/api/ui-react-dom-charts/functions/store-components/barchart/"><code>BarChart</code></a> component can render data directly from a <a href="https://beta.tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> <a href="https://beta.tinybase.org/api/store/type-aliases/store/table/"><code>Table</code></a>, or from a <a href="https://beta.tinybase.org/api/queries/interfaces/queries/queries/"><code>Queries</code></a> <a href="https://beta.tinybase.org/api/queries/type-aliases/result/resulttable/"><code>ResultTable</code></a>, using the same Provider context patterns as the rest of the React UI modules. For more complex charts, the <a href="https://beta.tinybase.org/api/ui-react-dom-charts/functions/store-components/cartesianchart/"><code>CartesianChart</code></a> component can compose multiple <a href="https://beta.tinybase.org/api/ui-react-dom-charts/functions/store-components/lineseries/"><code>LineSeries</code></a> component children and <a href="https://beta.tinybase.org/api/ui-react-dom-charts/functions/store-components/barseries/"><code>BarSeries</code></a> component children in one SVG.</p><p><img src="https://beta.tinybase.org/shots/styled-chart-react-demo.png" alt="LineChart component (React)" title="[`LineChart`](/api/ui-react-dom-charts/functions/store-components/linechart/)
17
+ component (React)"></p><p>A chart can be bound to a <a href="https://beta.tinybase.org/api/store/type-aliases/store/table/"><code>Table</code></a> with just the <a href="https://beta.tinybase.org/api/store/type-aliases/store/table/"><code>Table</code></a> <a href="https://beta.tinybase.org/api/common/type-aliases/identity/id/"><code>Id</code></a> and the <a href="https://beta.tinybase.org/api/store/type-aliases/store/cell/"><code>Cell</code></a> <a href="https://beta.tinybase.org/api/common/type-aliases/identity/ids/"><code>Ids</code></a> to use for the x and y values:</p>
17
18
 
18
19
  ```jsx
19
20
  import React from 'react';