tinybase 7.2.0-beta.1 → 7.2.0-beta.3
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.
- package/@types/queries/index.d.ts +333 -4
- package/@types/queries/with-schemas/index.d.ts +359 -4
- package/@types/ui-react/index.d.ts +484 -15
- package/@types/ui-react/with-schemas/index.d.ts +528 -17
- package/agents.md +34 -0
- package/index.js +67 -12
- package/min/index.js +1 -1
- package/min/index.js.gz +0 -0
- package/min/omni/index.js +1 -1
- package/min/omni/index.js.gz +0 -0
- package/min/omni/with-schemas/index.js +1 -1
- package/min/omni/with-schemas/index.js.gz +0 -0
- package/min/queries/index.js +1 -1
- package/min/queries/index.js.gz +0 -0
- package/min/queries/with-schemas/index.js +1 -1
- package/min/queries/with-schemas/index.js.gz +0 -0
- package/min/ui-react/index.js +1 -1
- package/min/ui-react/index.js.gz +0 -0
- package/min/ui-react/with-schemas/index.js +1 -1
- package/min/ui-react/with-schemas/index.js.gz +0 -0
- package/min/ui-react-dom/index.js +1 -1
- package/min/ui-react-dom/index.js.gz +0 -0
- package/min/ui-react-dom/with-schemas/index.js +1 -1
- package/min/ui-react-dom/with-schemas/index.js.gz +0 -0
- package/min/ui-react-inspector/index.js +1 -1
- package/min/ui-react-inspector/index.js.gz +0 -0
- package/min/ui-react-inspector/with-schemas/index.js +1 -1
- package/min/ui-react-inspector/with-schemas/index.js.gz +0 -0
- package/min/with-schemas/index.js +1 -1
- package/min/with-schemas/index.js.gz +0 -0
- package/omni/index.js +161 -45
- package/omni/with-schemas/index.js +161 -45
- package/package.json +2 -2
- package/queries/index.js +80 -15
- package/queries/with-schemas/index.js +80 -15
- package/readme.md +3 -3
- package/releases.md +31 -3
- package/ui-react/index.js +98 -33
- package/ui-react/with-schemas/index.js +98 -33
- package/ui-react-dom/index.js +34 -14
- package/ui-react-dom/with-schemas/index.js +34 -14
- package/ui-react-inspector/index.js +36 -16
- package/ui-react-inspector/with-schemas/index.js +36 -16
- package/with-schemas/index.js +67 -12
|
@@ -23,8 +23,9 @@ import type {
|
|
|
23
23
|
* The ParamValue type describes a single param value that can be used in a
|
|
24
24
|
* parameterized query.
|
|
25
25
|
*
|
|
26
|
-
* A ParamValue is
|
|
27
|
-
*
|
|
26
|
+
* A ParamValue is a JavaScript string, number, boolean, null - or an array of
|
|
27
|
+
* strings, numbers, or booleans. Arrays are useful for filtering by multiple
|
|
28
|
+
* values, such as checking if a cell value is included in a list of options.
|
|
28
29
|
* @example
|
|
29
30
|
* ```js
|
|
30
31
|
* import type {ParamValue} from 'tinybase';
|
|
@@ -33,11 +34,21 @@ import type {
|
|
|
33
34
|
* export const paramValue2: ParamValue = 5;
|
|
34
35
|
* export const paramValue3: ParamValue = true;
|
|
35
36
|
* export const paramValue4: ParamValue = null;
|
|
37
|
+
* export const paramValue5: ParamValue = ['Ford', 'Toyota', 'Honda'];
|
|
38
|
+
* export const paramValue6: ParamValue = [1970, 1975, 1980];
|
|
39
|
+
* export const paramValue7: ParamValue = [true, false];
|
|
36
40
|
* ```
|
|
37
41
|
* @category Params
|
|
38
42
|
* @since v7.2.0
|
|
39
43
|
*/
|
|
40
|
-
export type ParamValue =
|
|
44
|
+
export type ParamValue =
|
|
45
|
+
| string
|
|
46
|
+
| number
|
|
47
|
+
| boolean
|
|
48
|
+
| null
|
|
49
|
+
| string[]
|
|
50
|
+
| number[]
|
|
51
|
+
| boolean[];
|
|
41
52
|
|
|
42
53
|
/**
|
|
43
54
|
* The ParamValues type describes an object of param values, keyed by param Id,
|
|
@@ -312,6 +323,49 @@ export type ResultCellCallback = (cellId: Id, cell: ResultCell) => void;
|
|
|
312
323
|
*/
|
|
313
324
|
export type QueryIdsListener = (queries: Queries) => void;
|
|
314
325
|
|
|
326
|
+
/**
|
|
327
|
+
* The ParamValuesListener type describes a function that is used to listen to
|
|
328
|
+
* changes to the param values of a parameterized query.
|
|
329
|
+
*
|
|
330
|
+
* A ParamValuesListener is provided when using the addParamValuesListener
|
|
331
|
+
* method. See that method for specific examples.
|
|
332
|
+
*
|
|
333
|
+
* When called, a ParamValuesListener is given a reference to the Queries
|
|
334
|
+
* object, and the Id of the query whose param values changed.
|
|
335
|
+
* @param queries A reference to the Queries object that changed.
|
|
336
|
+
* @param queryId The Id of the query whose param values changed.
|
|
337
|
+
* @category Listener
|
|
338
|
+
* @since v7.2.0
|
|
339
|
+
*/
|
|
340
|
+
export type ParamValuesListener = (
|
|
341
|
+
queries: Queries,
|
|
342
|
+
queryId: Id,
|
|
343
|
+
paramValues: ParamValues,
|
|
344
|
+
) => void;
|
|
345
|
+
|
|
346
|
+
/**
|
|
347
|
+
* The ParamValueListener type describes a function that is used to listen to
|
|
348
|
+
* changes to a single param value of a parameterized query.
|
|
349
|
+
*
|
|
350
|
+
* A ParamValueListener is provided when using the addParamValueListener method.
|
|
351
|
+
* See that method for specific examples.
|
|
352
|
+
*
|
|
353
|
+
* When called, a ParamValueListener is given a reference to the Queries object,
|
|
354
|
+
* the Id of the query whose param value changed, and the Id of the param whose
|
|
355
|
+
* value changed.
|
|
356
|
+
* @param queries A reference to the Queries object that changed.
|
|
357
|
+
* @param queryId The Id of the query whose param value changed.
|
|
358
|
+
* @param paramId The Id of the param whose value changed.
|
|
359
|
+
* @category Listener
|
|
360
|
+
* @since v7.2.0
|
|
361
|
+
*/
|
|
362
|
+
export type ParamValueListener = (
|
|
363
|
+
queries: Queries,
|
|
364
|
+
queryId: Id,
|
|
365
|
+
paramId: Id,
|
|
366
|
+
paramValue: ParamValue,
|
|
367
|
+
) => void;
|
|
368
|
+
|
|
315
369
|
/**
|
|
316
370
|
* The ResultTableListener type describes a function that is used to listen to
|
|
317
371
|
* changes to a query's ResultTable.
|
|
@@ -655,6 +709,20 @@ export type QueriesListenerStats = {
|
|
|
655
709
|
* @since v2.0.0
|
|
656
710
|
*/
|
|
657
711
|
cell: number;
|
|
712
|
+
/**
|
|
713
|
+
* The number of ParamValuesListener functions registered with the Queries
|
|
714
|
+
* object.
|
|
715
|
+
* @category Stat
|
|
716
|
+
* @since v2.0.0
|
|
717
|
+
*/
|
|
718
|
+
paramValues: number;
|
|
719
|
+
/**
|
|
720
|
+
* The number of ParamValueListener functions registered with the Queries
|
|
721
|
+
* object.
|
|
722
|
+
* @category Stat
|
|
723
|
+
* @since v7.2.0
|
|
724
|
+
*/
|
|
725
|
+
paramValue: number;
|
|
658
726
|
};
|
|
659
727
|
|
|
660
728
|
/**
|
|
@@ -699,7 +767,8 @@ export type GetTableCell = {
|
|
|
699
767
|
*
|
|
700
768
|
* A Param function is provided when setting parameterized query definitions,
|
|
701
769
|
* and allows you to reference dynamic param values that can be updated without
|
|
702
|
-
* redefining the entire query.
|
|
770
|
+
* redefining the entire query. Param values can be primitives (string, number,
|
|
771
|
+
* boolean, null) or arrays of those types.
|
|
703
772
|
* @param paramId The Id of the param to fetch the value for.
|
|
704
773
|
* @returns A Cell value or `undefined` if the param is not set.
|
|
705
774
|
* @example
|
|
@@ -732,6 +801,40 @@ export type GetTableCell = {
|
|
|
732
801
|
* console.log(queries.getResultTable('query'));
|
|
733
802
|
* // -> {felix: {color: 'black'}}
|
|
734
803
|
* ```
|
|
804
|
+
* @example
|
|
805
|
+
* This example shows a query that uses an array param to filter by multiple
|
|
806
|
+
* values.
|
|
807
|
+
*
|
|
808
|
+
* ```js
|
|
809
|
+
* import {createQueries, createStore} from 'tinybase';
|
|
810
|
+
*
|
|
811
|
+
* const store = createStore().setTable('pets', {
|
|
812
|
+
* fido: {species: 'dog', color: 'brown'},
|
|
813
|
+
* felix: {species: 'cat', color: 'black'},
|
|
814
|
+
* cujo: {species: 'dog', color: 'black'},
|
|
815
|
+
* rex: {species: 'dog', color: 'gold'},
|
|
816
|
+
* });
|
|
817
|
+
*
|
|
818
|
+
* const queries = createQueries(store);
|
|
819
|
+
* queries.setQueryDefinition(
|
|
820
|
+
* 'query',
|
|
821
|
+
* 'pets',
|
|
822
|
+
* ({select, where, param}) => {
|
|
823
|
+
* select('species');
|
|
824
|
+
* where((getTableCell) =>
|
|
825
|
+
* (param('colors') as string[])?.includes(getTableCell('color')),
|
|
826
|
+
* );
|
|
827
|
+
* },
|
|
828
|
+
* {colors: ['brown', 'gold']},
|
|
829
|
+
* );
|
|
830
|
+
*
|
|
831
|
+
* console.log(queries.getResultTable('query'));
|
|
832
|
+
* // -> {fido: {species: 'dog'}, rex: {species: 'dog'}}
|
|
833
|
+
*
|
|
834
|
+
* queries.setParamValue('query', 'colors', ['black']);
|
|
835
|
+
* console.log(queries.getResultTable('query'));
|
|
836
|
+
* // -> {felix: {species: 'cat'}, cujo: {species: 'dog'}}
|
|
837
|
+
* ```
|
|
735
838
|
* @category Definition
|
|
736
839
|
* @since v7.2.0
|
|
737
840
|
*/
|
|
@@ -1917,6 +2020,91 @@ export interface Queries {
|
|
|
1917
2020
|
*/
|
|
1918
2021
|
delQueryDefinition(queryId: Id): Queries;
|
|
1919
2022
|
|
|
2023
|
+
/**
|
|
2024
|
+
* The getParamValues method returns all the param values currently set for a
|
|
2025
|
+
* parameterized query.
|
|
2026
|
+
* @param queryId The Id of the query to get the params for.
|
|
2027
|
+
* @returns An object containing all param Ids and their values, or an empty
|
|
2028
|
+
* object if the query doesn't exist.
|
|
2029
|
+
* @example
|
|
2030
|
+
* This example creates a parameterized query and retrieves its param values.
|
|
2031
|
+
*
|
|
2032
|
+
* ```js
|
|
2033
|
+
* import {createQueries, createStore} from 'tinybase';
|
|
2034
|
+
*
|
|
2035
|
+
* const store = createStore().setTable('pets', {
|
|
2036
|
+
* fido: {species: 'dog', color: 'brown'},
|
|
2037
|
+
* felix: {species: 'cat', color: 'black'},
|
|
2038
|
+
* cujo: {species: 'dog', color: 'black'},
|
|
2039
|
+
* });
|
|
2040
|
+
*
|
|
2041
|
+
* const queries = createQueries(store);
|
|
2042
|
+
* queries.setQueryDefinition(
|
|
2043
|
+
* 'query',
|
|
2044
|
+
* 'pets',
|
|
2045
|
+
* ({select, where, param}) => {
|
|
2046
|
+
* select('color');
|
|
2047
|
+
* where('species', param('species'));
|
|
2048
|
+
* where((getTableCell) => getTableCell('age') >= param('minAge'));
|
|
2049
|
+
* },
|
|
2050
|
+
* {species: 'dog', minAge: 5},
|
|
2051
|
+
* );
|
|
2052
|
+
*
|
|
2053
|
+
* console.log(queries.getParamValues('query'));
|
|
2054
|
+
* // -> {species: 'dog', minAge: 5}
|
|
2055
|
+
*
|
|
2056
|
+
* queries.setParamValue('query', 'species', 'cat');
|
|
2057
|
+
* console.log(queries.getParamValues('query'));
|
|
2058
|
+
* // -> {species: 'cat', minAge: 5}
|
|
2059
|
+
* ```
|
|
2060
|
+
* @category Getter
|
|
2061
|
+
* @since v7.2.0
|
|
2062
|
+
*/
|
|
2063
|
+
getParamValues(queryId: Id): ParamValues;
|
|
2064
|
+
|
|
2065
|
+
/**
|
|
2066
|
+
* The getParamValue method returns a single param value currently set for a
|
|
2067
|
+
* parameterized query.
|
|
2068
|
+
* @param queryId The Id of the query to get the param for.
|
|
2069
|
+
* @param paramId The Id of the param to get.
|
|
2070
|
+
* @returns The value of the param, or `undefined` if the query or param
|
|
2071
|
+
* doesn't exist.
|
|
2072
|
+
* @example
|
|
2073
|
+
* This example creates a parameterized query and retrieves one of its param
|
|
2074
|
+
* values.
|
|
2075
|
+
*
|
|
2076
|
+
* ```js
|
|
2077
|
+
* import {createQueries, createStore} from 'tinybase';
|
|
2078
|
+
*
|
|
2079
|
+
* const store = createStore().setTable('pets', {
|
|
2080
|
+
* fido: {species: 'dog', color: 'brown'},
|
|
2081
|
+
* felix: {species: 'cat', color: 'black'},
|
|
2082
|
+
* cujo: {species: 'dog', color: 'black'},
|
|
2083
|
+
* });
|
|
2084
|
+
*
|
|
2085
|
+
* const queries = createQueries(store);
|
|
2086
|
+
* queries.setQueryDefinition(
|
|
2087
|
+
* 'query',
|
|
2088
|
+
* 'pets',
|
|
2089
|
+
* ({select, where, param}) => {
|
|
2090
|
+
* select('color');
|
|
2091
|
+
* where('species', param('species'));
|
|
2092
|
+
* },
|
|
2093
|
+
* {species: 'dog'},
|
|
2094
|
+
* );
|
|
2095
|
+
*
|
|
2096
|
+
* console.log(queries.getParamValue('query', 'species'));
|
|
2097
|
+
* // -> 'dog'
|
|
2098
|
+
*
|
|
2099
|
+
* queries.setParamValue('query', 'species', 'cat');
|
|
2100
|
+
* console.log(queries.getParamValue('query', 'species'));
|
|
2101
|
+
* // -> 'cat'
|
|
2102
|
+
* ```
|
|
2103
|
+
* @category Getter
|
|
2104
|
+
* @since v7.2.0
|
|
2105
|
+
*/
|
|
2106
|
+
getParamValue(queryId: Id, paramId: Id): ParamValue | undefined;
|
|
2107
|
+
|
|
1920
2108
|
/**
|
|
1921
2109
|
* The setParamValues method sets multiple param values for a parameterized
|
|
1922
2110
|
* query at once, causing the query to re-evaluate with the new param values.
|
|
@@ -2841,6 +3029,147 @@ export interface Queries {
|
|
|
2841
3029
|
*/
|
|
2842
3030
|
addQueryIdsListener(listener: QueryIdsListener): Id;
|
|
2843
3031
|
|
|
3032
|
+
/**
|
|
3033
|
+
* The addParamValuesListener method registers a listener function with the
|
|
3034
|
+
* Queries object that will be called whenever the param values of a query
|
|
3035
|
+
* change.
|
|
3036
|
+
*
|
|
3037
|
+
* You can either listen to a single query (by specifying a query Id as the
|
|
3038
|
+
* method's first parameter) or changes to any query (by providing a `null`
|
|
3039
|
+
* wildcard).
|
|
3040
|
+
*
|
|
3041
|
+
* The provided listener is a ParamValuesListener function, and will be called
|
|
3042
|
+
* with a reference to the Queries object, the Id of the query whose param
|
|
3043
|
+
* values changed, and an object containing the new param values.
|
|
3044
|
+
* @param queryId The Id of the query to listen to, or `null` as a wildcard.
|
|
3045
|
+
* @param listener The function that will be called whenever the param values
|
|
3046
|
+
* of the query change.
|
|
3047
|
+
* @example
|
|
3048
|
+
* This example registers two listeners that respond to changes to the param
|
|
3049
|
+
* values of a specific query, or any query respectively.
|
|
3050
|
+
*
|
|
3051
|
+
* ```js
|
|
3052
|
+
* import {createQueries, createStore} from 'tinybase';
|
|
3053
|
+
*
|
|
3054
|
+
* const store = createStore().setTable('pets', {
|
|
3055
|
+
* // store data
|
|
3056
|
+
* });
|
|
3057
|
+
*
|
|
3058
|
+
* const queries = createQueries(store).setQueryDefinition(
|
|
3059
|
+
* 'petsByColor',
|
|
3060
|
+
* 'pets',
|
|
3061
|
+
* () => {
|
|
3062
|
+
* // query definition
|
|
3063
|
+
* },
|
|
3064
|
+
* {color: 'white'},
|
|
3065
|
+
* );
|
|
3066
|
+
*
|
|
3067
|
+
* const listenerId1 = queries.addParamValuesListener(
|
|
3068
|
+
* 'petsByColor',
|
|
3069
|
+
* (queries, queryId, paramValues) => {
|
|
3070
|
+
* console.log(
|
|
3071
|
+
* `Params for specific query changed: ${JSON.stringify(paramValues)}`,
|
|
3072
|
+
* );
|
|
3073
|
+
* },
|
|
3074
|
+
* );
|
|
3075
|
+
* const listenerId2 = queries.addParamValuesListener(
|
|
3076
|
+
* null,
|
|
3077
|
+
* (queries, queryId, paramValues) => {
|
|
3078
|
+
* console.log(
|
|
3079
|
+
* `Params for "${queryId}" changed: ${JSON.stringify(paramValues)}`,
|
|
3080
|
+
* );
|
|
3081
|
+
* },
|
|
3082
|
+
* );
|
|
3083
|
+
*
|
|
3084
|
+
* queries.setParamValues('petsByColor', {color: 'black'});
|
|
3085
|
+
* // -> 'Params for specific query changed: {"color":"black"}'
|
|
3086
|
+
* // -> 'Params for "petsByColor" changed: {"color":"black"}'
|
|
3087
|
+
* queries.setParamValues('petsByColor', {color: 'brown'});
|
|
3088
|
+
* // -> 'Params for specific query changed: {"color":"brown"}'
|
|
3089
|
+
* // -> 'Params for "petsByColor" changed: {"color":"brown"}'
|
|
3090
|
+
*
|
|
3091
|
+
* queries.delListener(listenerId1);
|
|
3092
|
+
* queries.delListener(listenerId2);
|
|
3093
|
+
* ```
|
|
3094
|
+
* @category Listener
|
|
3095
|
+
* @since v7.2.0
|
|
3096
|
+
*/
|
|
3097
|
+
addParamValuesListener(queryId: IdOrNull, listener: ParamValuesListener): Id;
|
|
3098
|
+
|
|
3099
|
+
/**
|
|
3100
|
+
* The addParamValueListener method registers a listener function with the
|
|
3101
|
+
* Queries object that will be called whenever a specific param value of a
|
|
3102
|
+
* query changes.
|
|
3103
|
+
*
|
|
3104
|
+
* You can either listen to a single query (by specifying a query Id as the
|
|
3105
|
+
* method's first parameter) or changes to any query (by providing a `null`
|
|
3106
|
+
* wildcard). Additionally, you can either listen to a specific param (by
|
|
3107
|
+
* specifying a param Id as the second parameter) or changes to any param (by
|
|
3108
|
+
* providing a `null` wildcard).
|
|
3109
|
+
*
|
|
3110
|
+
* The provided listener is a ParamValueListener function, and will be called
|
|
3111
|
+
* with a reference to the Queries object, the Id of the query whose param
|
|
3112
|
+
* value changed, the Id of the param whose value changed, and the new value
|
|
3113
|
+
* of the param.
|
|
3114
|
+
* @param queryId The Id of the query to listen to, or `null` as a wildcard.
|
|
3115
|
+
* @param paramId The Id of the param to listen to, or `null` as a wildcard.
|
|
3116
|
+
* @param listener The function that will be called whenever the specific
|
|
3117
|
+
* param value of the query changes.
|
|
3118
|
+
* @example
|
|
3119
|
+
* This example registers two listeners that respond to changes to a specific
|
|
3120
|
+
* param value of a specific query, or any param value of any query
|
|
3121
|
+
* respectively.
|
|
3122
|
+
*
|
|
3123
|
+
* ```js
|
|
3124
|
+
* import {createQueries, createStore} from 'tinybase';
|
|
3125
|
+
*
|
|
3126
|
+
* const store = createStore().setTable('pets', {
|
|
3127
|
+
* // store data
|
|
3128
|
+
* });
|
|
3129
|
+
*
|
|
3130
|
+
* const queries = createQueries(store).setQueryDefinition(
|
|
3131
|
+
* 'petsByColor',
|
|
3132
|
+
* 'pets',
|
|
3133
|
+
* () => {
|
|
3134
|
+
* // query definition
|
|
3135
|
+
* },
|
|
3136
|
+
* {color: 'white'},
|
|
3137
|
+
* );
|
|
3138
|
+
*
|
|
3139
|
+
* const listenerId1 = queries.addParamValueListener(
|
|
3140
|
+
* 'petsByColor',
|
|
3141
|
+
* 'color',
|
|
3142
|
+
* (queries, queryId, paramId, value) => {
|
|
3143
|
+
* console.log(`Specific param for specific query changed: "${value}"`);
|
|
3144
|
+
* },
|
|
3145
|
+
* );
|
|
3146
|
+
* const listenerId2 = queries.addParamValueListener(
|
|
3147
|
+
* null,
|
|
3148
|
+
* null,
|
|
3149
|
+
* (queries, queryId, paramId, value) => {
|
|
3150
|
+
* console.log(`Param "${paramId}" for "${queryId}" changed: "${value}"`);
|
|
3151
|
+
* },
|
|
3152
|
+
* );
|
|
3153
|
+
*
|
|
3154
|
+
* queries.setParamValue('petsByColor', 'color', 'black');
|
|
3155
|
+
* // -> 'Specific param for specific query changed: "black"'
|
|
3156
|
+
* // -> 'Param "color" for "petsByColor" changed: "black"'
|
|
3157
|
+
* queries.setParamValue('petsByColor', 'color', 'brown');
|
|
3158
|
+
* // -> 'Specific param for specific query changed: "brown"'
|
|
3159
|
+
* // -> 'Param "color" for "petsByColor" changed: "brown"'
|
|
3160
|
+
*
|
|
3161
|
+
* queries.delListener(listenerId1);
|
|
3162
|
+
* queries.delListener(listenerId2);
|
|
3163
|
+
* ```
|
|
3164
|
+
* @category Listener
|
|
3165
|
+
* @since v7.2.0
|
|
3166
|
+
*/
|
|
3167
|
+
addParamValueListener(
|
|
3168
|
+
queryId: IdOrNull,
|
|
3169
|
+
paramId: IdOrNull,
|
|
3170
|
+
listener: ParamValueListener,
|
|
3171
|
+
): Id;
|
|
3172
|
+
|
|
2844
3173
|
/**
|
|
2845
3174
|
* The addResultTableListener method registers a listener function with the
|
|
2846
3175
|
* Queries object that will be called whenever data in a ResultTable changes.
|