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.
Files changed (44) hide show
  1. package/@types/queries/index.d.ts +333 -4
  2. package/@types/queries/with-schemas/index.d.ts +359 -4
  3. package/@types/ui-react/index.d.ts +484 -15
  4. package/@types/ui-react/with-schemas/index.d.ts +528 -17
  5. package/agents.md +34 -0
  6. package/index.js +67 -12
  7. package/min/index.js +1 -1
  8. package/min/index.js.gz +0 -0
  9. package/min/omni/index.js +1 -1
  10. package/min/omni/index.js.gz +0 -0
  11. package/min/omni/with-schemas/index.js +1 -1
  12. package/min/omni/with-schemas/index.js.gz +0 -0
  13. package/min/queries/index.js +1 -1
  14. package/min/queries/index.js.gz +0 -0
  15. package/min/queries/with-schemas/index.js +1 -1
  16. package/min/queries/with-schemas/index.js.gz +0 -0
  17. package/min/ui-react/index.js +1 -1
  18. package/min/ui-react/index.js.gz +0 -0
  19. package/min/ui-react/with-schemas/index.js +1 -1
  20. package/min/ui-react/with-schemas/index.js.gz +0 -0
  21. package/min/ui-react-dom/index.js +1 -1
  22. package/min/ui-react-dom/index.js.gz +0 -0
  23. package/min/ui-react-dom/with-schemas/index.js +1 -1
  24. package/min/ui-react-dom/with-schemas/index.js.gz +0 -0
  25. package/min/ui-react-inspector/index.js +1 -1
  26. package/min/ui-react-inspector/index.js.gz +0 -0
  27. package/min/ui-react-inspector/with-schemas/index.js +1 -1
  28. package/min/ui-react-inspector/with-schemas/index.js.gz +0 -0
  29. package/min/with-schemas/index.js +1 -1
  30. package/min/with-schemas/index.js.gz +0 -0
  31. package/omni/index.js +161 -45
  32. package/omni/with-schemas/index.js +161 -45
  33. package/package.json +2 -2
  34. package/queries/index.js +80 -15
  35. package/queries/with-schemas/index.js +80 -15
  36. package/readme.md +3 -3
  37. package/releases.md +31 -3
  38. package/ui-react/index.js +98 -33
  39. package/ui-react/with-schemas/index.js +98 -33
  40. package/ui-react-dom/index.js +34 -14
  41. package/ui-react-dom/with-schemas/index.js +34 -14
  42. package/ui-react-inspector/index.js +36 -16
  43. package/ui-react-inspector/with-schemas/index.js +36 -16
  44. 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 similar to a Cell, but params cannot be `undefined`. They
27
- * must be a JavaScript string, number, boolean, or null.
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 = string | number | boolean | null;
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.