react-rock 3.2.15 → 3.2.17
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/Store.cjs +280 -265
- package/Store.cjs.map +1 -1
- package/Store.d.ts +25 -25
- package/Store.js +280 -265
- package/Store.js.map +1 -1
- package/index.cjs +2 -2
- package/index.cjs.map +1 -1
- package/index.js +2 -2
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/readme.md +230 -230
- package/types.d.ts +60 -60
package/Store.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Store.js","sources":["../src/Store.ts"],"sourcesContent":["\"use client\"\r\nimport { useEffect, useId, useState } from \"react\"\r\nimport { CreateArgs, CreateManyArgs, DeleteArgs, FindArgs, MakeMetaType, MakeRowType, MetaSchema, MoveArgs, RowSchema, UpdateArgs, WhereType } from \"./types\"\r\nimport { Infer, xv } from \"xanv\"\r\n\r\nconst uid = useId as any\r\nconst ustate = useState as any\r\nconst ueffect = useEffect as any\r\n\r\n\r\nclass Store<RS extends RowSchema, MS extends MetaSchema | undefined = undefined> {\r\n private _rows: MakeRowType<RS>[] = []\r\n private _meta: Map<keyof MakeMetaType<MS>, MakeMetaType<MS>[keyof MakeMetaType<MS>]> = new Map()\r\n private _hooks: Map<string, Function> = new Map()\r\n private _timer: any = null\r\n private _row_schema: RS\r\n private _meta_schema?: MS\r\n private _last_id = 0\r\n\r\n constructor(rowSchema: RS, metaSchema?: MS) {\r\n this._row_schema = {\r\n ...rowSchema,\r\n rid: xv.number(),\r\n vid: xv.number().default(() => Math.round((Math.random() + Math.random()) * 9999999999)),\r\n }\r\n this._meta_schema = metaSchema\r\n }\r\n\r\n private observe = (observeId?: string) => {\r\n try {\r\n const hid = uid()\r\n const id = observeId ?? hid\r\n const [, dispatch] = ustate(0)\r\n ueffect(() => {\r\n this._hooks.set(id, () => dispatch(Math.random()))\r\n return () => {\r\n this._hooks.delete(id)\r\n }\r\n }, [])\r\n } catch (error) { }\r\n }\r\n\r\n dispatch(observeIdOrCallbabck?: string | ((cb: Function, key: string) => void)) {\r\n clearTimeout(this._timer)\r\n this._timer = setTimeout(() => {\r\n if (typeof observeIdOrCallbabck === \"string\") {\r\n const cb = this._hooks.get(observeIdOrCallbabck)\r\n if (cb) {\r\n cb()\r\n }\r\n } else {\r\n this._hooks.forEach((cb, key) => {\r\n try {\r\n if (typeof observeIdOrCallbabck === \"function\") {\r\n observeIdOrCallbabck(cb, key)\r\n } else {\r\n cb()\r\n }\r\n } catch (_err) {\r\n this._hooks.delete(key)\r\n }\r\n })\r\n }\r\n }, 0)\r\n }\r\n\r\n rows(disableObservation = false) {\r\n if (!disableObservation) {\r\n this.observe();\r\n }\r\n return this._rows\r\n }\r\n\r\n metas(disableObservation = false) {\r\n if (!disableObservation) {\r\n this.observe();\r\n }\r\n return this._meta\r\n }\r\n\r\n createMany(args: CreateManyArgs<RS>): MakeRowType<RS>[] {\r\n const { data, disableObservation, observeId } = args\r\n const res = []\r\n for (let row of data) {\r\n const created = this.create({\r\n data: row,\r\n disableObservation: true\r\n })\r\n res.push(created)\r\n }\r\n if (!disableObservation) {\r\n this.dispatch(observeId)\r\n }\r\n return res\r\n }\r\n // Row Methods\r\n create(args: CreateArgs<RS>): MakeRowType<RS> {\r\n const { data, disableObservation, observeId } = args\r\n // validate and create row\r\n let r: any = {} as MakeRowType<RS>\r\n for (let key in this._row_schema) {\r\n if (key === \"rid\" || key === \"vid\") continue;\r\n const schema = this._row_schema[key]\r\n r[key] = schema.parse(data[key])\r\n }\r\n\r\n this._last_id = this._last_id + 1;\r\n const _row: MakeRowType<RS> = {\r\n ...r,\r\n rid: this._last_id,\r\n vid: this._row_schema.vid.parse(undefined),\r\n }\r\n\r\n this._rows.push(_row)\r\n if (!disableObservation) {\r\n this.dispatch(observeId)\r\n }\r\n return _row\r\n }\r\n\r\n // update\r\n update(args: UpdateArgs<RS>): MakeRowType<RS>[] | null {\r\n const { data, where, disableObservation, observeId } = args\r\n // validate row\r\n let r: any = {} as MakeRowType<RS>\r\n for (let key in data) {\r\n if (key === \"rid\" || key === 'vid') continue;\r\n const schema = this._row_schema[key]\r\n r[key] = schema.parse(data[key])\r\n }\r\n\r\n const rows = this.find({ disableObservation: true, where })\r\n if (rows.length > 0) {\r\n for (let index = 0; index < rows.length; index++) {\r\n const _row = rows[index];\r\n const rid = _row.rid\r\n rows[index] = {\r\n ..._row,\r\n ...r,\r\n rid,\r\n vid: this._row_schema.vid.parse(undefined),\r\n }\r\n const rowIndex = this._rows.findIndex(r => r.rid === rid)\r\n this._rows[rowIndex] = rows[index]\r\n }\r\n if (!disableObservation) {\r\n this.dispatch(observeId)\r\n }\r\n }\r\n return this.find({ where, disableObservation: true })\r\n }\r\n\r\n // delete\r\n delete(args: DeleteArgs<RS>): number {\r\n const { where, disableObservation, observeId } = args\r\n const rows = this.find({\r\n where,\r\n disableObservation: true\r\n })\r\n\r\n let deletedCount = 0\r\n if (rows.length > 0) {\r\n this._rows = this._rows.filter(r => !rows.find(dr => dr.rid === r.rid))\r\n deletedCount = rows.length\r\n if (!disableObservation) {\r\n this.dispatch(observeId)\r\n }\r\n }\r\n return deletedCount\r\n }\r\n\r\n // find\r\n find(args: FindArgs<RS>): MakeRowType<RS>[] {\r\n const { where, disableObservation, observeId } = args;\r\n\r\n if (!disableObservation) {\r\n this.observe(observeId);\r\n }\r\n\r\n const rows: MakeRowType<RS>[] = [];\r\n\r\n for (const row of this._rows) {\r\n let match = true;\r\n\r\n for (const wcol in where) {\r\n const condition = where[wcol];\r\n const rvalue = row[wcol];\r\n\r\n if (typeof condition === \"object\" && condition !== null) {\r\n\r\n if (condition.contain !== undefined) {\r\n if (typeof rvalue !== \"string\" || !rvalue.includes(condition.contain as any)) {\r\n match = false;\r\n break;\r\n }\r\n }\r\n\r\n if (condition.startWith !== undefined) {\r\n if (typeof rvalue !== \"string\" || !rvalue.startsWith(condition.startWith as any)) {\r\n match = false;\r\n break;\r\n }\r\n }\r\n\r\n if (condition.endWith !== undefined) {\r\n if (typeof rvalue !== \"string\" || !rvalue.endsWith(condition.endWith as any)) {\r\n match = false;\r\n break;\r\n }\r\n }\r\n\r\n if (condition.equalWith !== undefined && rvalue !== condition.equalWith) {\r\n match = false;\r\n break;\r\n }\r\n\r\n if (condition.notEqualWith !== undefined && rvalue === condition.notEqualWith) {\r\n match = false;\r\n break;\r\n }\r\n\r\n if (condition.gt !== undefined) {\r\n if (typeof rvalue !== \"number\" || !(rvalue > condition.gt)) {\r\n match = false;\r\n break;\r\n }\r\n }\r\n\r\n if (condition.lt !== undefined) {\r\n if (typeof rvalue !== \"number\" || !(rvalue < condition.lt)) {\r\n match = false;\r\n break;\r\n }\r\n }\r\n\r\n if (condition.gte !== undefined) {\r\n if (typeof rvalue !== \"number\" || !(rvalue >= condition.gte)) {\r\n match = false;\r\n break;\r\n }\r\n }\r\n\r\n if (condition.lte !== undefined) {\r\n if (typeof rvalue !== \"number\" || !(rvalue <= condition.lte)) {\r\n match = false;\r\n break;\r\n }\r\n }\r\n\r\n } else {\r\n if (condition !== rvalue) {\r\n match = false;\r\n break;\r\n }\r\n }\r\n }\r\n\r\n if (match) {\r\n rows.push(row);\r\n }\r\n }\r\n\r\n return rows;\r\n }\r\n\r\n findOne(args: FindArgs<RS>): MakeRowType<RS> | null {\r\n const rows = this.find(args)\r\n return rows.length > 0 ? rows[0] : null\r\n }\r\n\r\n getIndex(args: FindArgs<RS>): number {\r\n const row = this.findOne(args)\r\n if (row) {\r\n return this._rows.findIndex(r => r.rid === row.rid)\r\n }\r\n return -1\r\n }\r\n\r\n move(args: MoveArgs<RS>): boolean {\r\n const { fromIndex, toIndex, disableObservation, observeId } = args\r\n if (fromIndex < 0 || toIndex < 0) return false\r\n const [movedRow] = this._rows.splice(fromIndex, 1)\r\n this._rows.splice(toIndex, 0, movedRow)\r\n if (!disableObservation) {\r\n this.dispatch(observeId)\r\n }\r\n return true\r\n }\r\n\r\n setMeta<T extends keyof Infer<MS>>(key: T, value: Infer<MS>[T], disableObservation = false) {\r\n this._meta.set(key, this._meta_schema ? (this._meta_schema as any)[key].parse(value) : value)\r\n if (!disableObservation) {\r\n this.dispatch()\r\n }\r\n }\r\n\r\n getMeta<T extends keyof Infer<MS>>(key: T, disableObservation = false): Infer<MS>[T] | undefined {\r\n if (!disableObservation) {\r\n this.observe();\r\n }\r\n return this._meta.get(key) as Infer<MS>[T] | undefined\r\n }\r\n\r\n deleteMeta<T extends keyof Infer<MS>>(key: T, disableObservation = false) {\r\n this._meta.delete(key)\r\n if (!disableObservation) {\r\n this.dispatch()\r\n }\r\n }\r\n\r\n clearMeta(disableObservation = false) {\r\n this._meta.clear()\r\n if (!disableObservation) {\r\n this.dispatch()\r\n }\r\n }\r\n}\r\n\r\nexport default Store"],"names":[],"mappings":";;;;AAKA;AACA;AACA;AAGA;;;AAEW;AACA;;;AAeA;;AAEF;;;;AAIG;AACA;AACG;AACH;;AAEL;;AACJ;;AAfG;;AAiBH;AACG;AACA;AACG;;AAEG;AACG;AACF;AACH;AAAM;;;AAGE;AACG;AACF;AAAM;AACJ;AACF;AACH;AAAC;AACC;AACF;AACJ;AACF;;;;;;AAOH;;;;;;AAOA;;;AAIJ;;;AAGG;AACG;AACG;AACA;AACF;AACD;AACF;;AAEE;AACF;AACD;;;AAGH;;;;AAIG;AACG;;;AAEA;AACF;;;AASD;;AAEG;AACF;AACD;;;AAIH;;;;AAIG;AACG;;;AAEA;AACF;AAED;AACA;AACG;AACG;AACA;;AAOA;;AAEF;;AAEE;AACF;AACH;AACD;;;AAIH;;AAEG;;AAEG;AACF;;AAGD;AACG;AACA;;AAEG;AACF;AACH;AACD;;;AAIH;;;AAIM;AACF;;AAID;;AAGG;AACG;AACA;;AAIG;AACG;;;AAGC;AACH;AAED;AACG;;;AAGC;AACH;AAED;AACG;;;AAGC;AACH;;;;AAKA;;;;AAKA;AAED;AACG;;;AAGC;AACH;AAED;AACG;;;AAGC;AACH;AAED;AACG;;;AAGC;AACH;AAED;AACG;;;AAGC;AACH;AAEH;AAAM;;;;AAIH;AACH;AACH;AAED;AACG;AACF;AACH;AAED;;AAGH;;AAEG;;AAGH;;AAEG;AACG;AACF;;;AAIJ;;AAEG;AAAkC;AAClC;;;AAGG;AACF;AACD;;AAGH;AACG;;;AAGC;;AAGJ;;;AAGI;;;AAIJ;AACG;;;AAGC;;;AAID;;;AAGC;;AAEN;;"}
|
|
1
|
+
{"version":3,"file":"Store.js","sources":["../src/Store.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useId, useState } from \"react\";\nimport {\n CreateArgs,\n CreateManyArgs,\n DeleteArgs,\n FindArgs,\n MakeMetaType,\n MakeRowType,\n MetaSchema,\n MoveArgs,\n RowSchema,\n UpdateArgs,\n WhereType,\n} from \"./types\";\nimport { Infer, xv } from \"xanv\";\n\nconst uid = useId as any;\nconst ustate = useState as any;\nconst ueffect = useEffect as any;\n\nclass Store<\n RS extends RowSchema,\n MS extends MetaSchema | undefined = undefined,\n> {\n // private _rows: MakeRowType<RS>[] = [];\n private _rows = new Map<number, MakeRowType<RS>>();\n private _meta: Map<\n keyof MakeMetaType<MS>,\n MakeMetaType<MS>[keyof MakeMetaType<MS>]\n > = new Map();\n private _hooks: Map<string, Function> = new Map();\n private _row_schema: RS;\n private _meta_schema?: MS;\n private _last_id = 0;\n\n constructor(rowSchema: RS, metaSchema?: MS) {\n this._row_schema = {\n ...rowSchema,\n rid: xv.number(),\n vid: xv\n .number()\n .default(() =>\n Math.round((Math.random() + Math.random()) * 9999999999),\n ),\n };\n this._meta_schema = metaSchema;\n }\n\n observe = (observeId?: string) => {\n try {\n const hid = uid();\n const id = observeId ?? hid;\n const [, dispatch] = ustate(0);\n ueffect(() => {\n this._hooks.set(id, () => dispatch(Math.random()));\n return () => {\n this._hooks.delete(id);\n };\n }, []);\n } catch (error) {}\n };\n\n dispatch(\n observeIdOrCallbabck?: string | ((cb: Function, key: string) => void),\n ) {\n if (typeof observeIdOrCallbabck === \"string\") {\n const cb = this._hooks.get(observeIdOrCallbabck);\n if (cb) {\n cb();\n }\n } else {\n this._hooks.forEach((cb, key) => {\n try {\n if (typeof observeIdOrCallbabck === \"function\") {\n observeIdOrCallbabck(cb, key);\n } else {\n cb();\n }\n } catch (_err) {\n this._hooks.delete(key);\n }\n });\n }\n }\n\n rows(disableObservation = false) {\n if (!disableObservation) {\n this.observe();\n }\n return this._rows;\n }\n\n metas(disableObservation = false) {\n if (!disableObservation) {\n this.observe();\n }\n return this._meta;\n }\n\n createMany(args: CreateManyArgs<RS>): MakeRowType<RS>[] {\n const { data, disableObservation, observeId } = args;\n const res = [];\n for (let row of data) {\n const created = this.create({\n data: row,\n disableObservation: true,\n });\n res.push(created);\n }\n if (!disableObservation) {\n this.dispatch(observeId);\n }\n return res;\n }\n // Row Methods\n create(args: CreateArgs<RS>): MakeRowType<RS> {\n const { data, disableObservation, observeId } = args;\n // validate and create row\n let r: any = {} as MakeRowType<RS>;\n for (let key in this._row_schema) {\n if (key === \"rid\" || key === \"vid\") continue;\n const schema = this._row_schema[key];\n r[key] = schema.parse(data[key]);\n }\n\n this._last_id = this._last_id + 1;\n const _row: MakeRowType<RS> = {\n ...r,\n rid: this._last_id,\n vid: this._row_schema.vid.parse(undefined),\n };\n\n this._rows.set(_row.rid, _row);\n if (!disableObservation) {\n this.dispatch(observeId);\n }\n return _row;\n }\n\n // update\n update(args: UpdateArgs<RS>): MakeRowType<RS>[] | null {\n const { data, where, disableObservation, observeId } = args;\n // validate row\n let r: any = {} as MakeRowType<RS>;\n for (let key in data) {\n if (key === \"rid\" || key === \"vid\") continue;\n const schema = this._row_schema[key];\n r[key] = schema.parse(data[key]);\n }\n\n const rows = this.find({ disableObservation: true, where });\n if (rows.length > 0) {\n for (let index = 0; index < rows.length; index++) {\n const _row = rows[index];\n const rid = _row.rid;\n this._rows.set(rid, {\n ..._row,\n ...r,\n rid,\n vid: this._row_schema.vid.parse(undefined),\n });\n }\n if (!disableObservation) {\n this.dispatch(observeId);\n }\n }\n return this.find({ where, disableObservation: true });\n }\n\n // delete\n delete(args: DeleteArgs<RS>): number {\n const { where, disableObservation, observeId } = args;\n const rows = this.find({\n where,\n disableObservation: true,\n });\n\n let deletedCount = rows.length;\n if (rows.length > 0) {\n for (let row of rows) {\n this._rows.delete(row.rid);\n }\n if (!disableObservation) {\n this.dispatch(observeId);\n }\n }\n return deletedCount;\n }\n\n // find\n find(args: FindArgs<RS>): MakeRowType<RS>[] {\n const { where, disableObservation, observeId } = args;\n\n if (!disableObservation) {\n this.observe(observeId);\n }\n\n const rows: MakeRowType<RS>[] = [];\n\n for (const row of Array.from(this._rows.values())) {\n let match = true;\n\n for (const wcol in where) {\n const condition = where[wcol];\n const rvalue = row[wcol];\n\n if (typeof condition === \"object\" && condition !== null) {\n if (condition.contain !== undefined) {\n if (\n typeof rvalue !== \"string\" ||\n !rvalue.includes(condition.contain as any)\n ) {\n match = false;\n break;\n }\n }\n\n if (condition.startWith !== undefined) {\n if (\n typeof rvalue !== \"string\" ||\n !rvalue.startsWith(condition.startWith as any)\n ) {\n match = false;\n break;\n }\n }\n\n if (condition.endWith !== undefined) {\n if (\n typeof rvalue !== \"string\" ||\n !rvalue.endsWith(condition.endWith as any)\n ) {\n match = false;\n break;\n }\n }\n\n if (\n condition.equalWith !== undefined &&\n rvalue !== condition.equalWith\n ) {\n match = false;\n break;\n }\n\n if (\n condition.notEqualWith !== undefined &&\n rvalue === condition.notEqualWith\n ) {\n match = false;\n break;\n }\n\n if (condition.gt !== undefined) {\n if (typeof rvalue !== \"number\" || !(rvalue > condition.gt)) {\n match = false;\n break;\n }\n }\n\n if (condition.lt !== undefined) {\n if (typeof rvalue !== \"number\" || !(rvalue < condition.lt)) {\n match = false;\n break;\n }\n }\n\n if (condition.gte !== undefined) {\n if (typeof rvalue !== \"number\" || !(rvalue >= condition.gte)) {\n match = false;\n break;\n }\n }\n\n if (condition.lte !== undefined) {\n if (typeof rvalue !== \"number\" || !(rvalue <= condition.lte)) {\n match = false;\n break;\n }\n }\n } else {\n if (condition !== rvalue) {\n match = false;\n break;\n }\n }\n }\n\n if (match) {\n rows.push(row);\n }\n }\n\n return rows;\n }\n\n findOne(args: FindArgs<RS>): MakeRowType<RS> | null {\n const rows = this.find(args);\n return rows.length > 0 ? rows[0] : null;\n }\n\n findById(rid: number, disableObservation = false) {\n if (!disableObservation) {\n this.observe(rid.toString());\n }\n return this._rows.get(rid);\n }\n\n getIndex(args: FindArgs<RS>): number {\n const row = this.findOne(args);\n if (row) {\n const keys = Array.from(this._rows.keys());\n return keys.indexOf(row.rid);\n }\n return -1;\n }\n\n move(args: MoveArgs<RS>): boolean {\n const { fromIndex, toIndex, disableObservation, observeId } = args;\n if (fromIndex < 0 || toIndex < 0) return false;\n const entries = [...Array.from(this._rows.entries())];\n if (fromIndex >= entries.length || toIndex >= entries.length) {\n return false;\n }\n\n const [movedItem] = entries.splice(fromIndex, 1);\n\n entries.splice(toIndex, 0, movedItem);\n\n this._rows = new Map(entries);\n\n if (!disableObservation) {\n this.dispatch(observeId);\n }\n\n return true;\n }\n\n setMeta<T extends keyof Infer<MS>>(\n key: T,\n value: Infer<MS>[T],\n disableObservation = false,\n ) {\n this._meta.set(\n key,\n this._meta_schema ? (this._meta_schema as any)[key].parse(value) : value,\n );\n if (!disableObservation) {\n this.dispatch();\n }\n }\n\n getMeta<T extends keyof Infer<MS>>(\n key: T,\n disableObservation = false,\n ): Infer<MS>[T] | undefined {\n if (!disableObservation) {\n this.observe();\n }\n return this._meta.get(key) as Infer<MS>[T] | undefined;\n }\n\n deleteMeta<T extends keyof Infer<MS>>(key: T, disableObservation = false) {\n this._meta.delete(key);\n if (!disableObservation) {\n this.dispatch();\n }\n }\n\n clearMeta(disableObservation = false) {\n this._meta.clear();\n if (!disableObservation) {\n this.dispatch();\n }\n }\n}\n\nexport default Store;\n"],"names":[],"mappings":";;;;AAiBA;AACA;AACA;AAEA;;;AAKU;AACA;AAIA;;AAkBR;;AAEI;;;;AAIE;AACA;AACE;AACF;;AAEH;;AACH;AAxBE;AAIK;;AAKL;;AAiBF;AAGE;;AAEE;AACE;AACD;AACF;AAAM;;;AAGD;AACE;AACD;AAAM;AACL;AACD;AACF;AAAC;AACA;AACD;AACH;AACD;;;;;AAMA;;;;;;AAOA;;;AAIH;;;AAGE;AACE;AACE;AACA;AACD;AACD;AACD;;AAEC;AACD;AACD;;;AAGF;;;;AAIE;AACE;;;AAEA;AACD;;;;;AAWC;AACD;AACD;;;AAIF;;;;AAIE;AACE;;;AAEA;AACD;AAED;AACA;AACE;AACE;AACA;;AAOD;;AAEC;AACD;AACF;AACD;;;AAIF;;AAEE;;AAEE;AACD;AAED;AACA;AACE;;AAEC;;AAEC;AACD;AACF;AACD;;;AAIF;;;AAII;AACD;;AAID;;AAGE;AACE;AACA;;AAGE;;;;;AAOG;AACF;AAED;;;;;AAOG;AACF;AAED;;;;;AAOG;AACF;AAED;AAEE;;;AAID;AAED;AAEE;;;AAID;AAED;AACE;;;AAGC;AACF;AAED;AACE;;;AAGC;AACF;AAED;AACE;;;AAGC;AACF;AAED;AACE;;;AAGC;AACF;AACF;AAAM;;;;AAIJ;AACF;AACF;AAED;AACE;AACD;AACF;AAED;;AAGF;;AAEE;;AAGF;;;AAGG;;;AAIH;;AAEE;AACE;;AAED;;;AAIH;;AAEE;AAAkC;AAClC;;AAEE;AACD;AAED;;;;AAOE;AACD;AAED;;AAGF;AAKE;;;AAMC;;AAGH;;;AAMG;;;AAIH;AACE;;;AAGC;;;AAID;;;AAGC;;AAEJ;;"}
|
package/index.cjs
CHANGED
|
@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
|
|
6
6
|
var Store = require('./Store.cjs');
|
|
7
7
|
|
|
8
|
-
const createStore = (rowSchema, metaSchema) => {
|
|
9
|
-
return new Store(rowSchema, metaSchema);
|
|
8
|
+
const createStore = (rowSchema, metaSchema) => {
|
|
9
|
+
return new Store(rowSchema, metaSchema);
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
exports.Store = Store;
|
package/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["\"use client\"\
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["\"use client\"\nimport Store from \"./Store\"\nimport { MetaSchema, RowSchema } from \"./types\"\n\nconst createStore = <RS extends RowSchema, MS extends MetaSchema | undefined = undefined>(rowSchema: RS, metaSchema?: MS) => {\n return new Store(rowSchema, metaSchema)\n}\n\nexport * from \"./types\"\nexport { Store }\n\nexport default createStore"],"names":[],"mappings":";;;;;;;AAIA;AACI;AACJ;;;"}
|
package/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import Store from './Store.js';
|
|
3
3
|
|
|
4
|
-
const createStore = (rowSchema, metaSchema) => {
|
|
5
|
-
return new Store(rowSchema, metaSchema);
|
|
4
|
+
const createStore = (rowSchema, metaSchema) => {
|
|
5
|
+
return new Store(rowSchema, metaSchema);
|
|
6
6
|
};
|
|
7
7
|
|
|
8
8
|
export { Store, createStore as default };
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["\"use client\"\
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["\"use client\"\nimport Store from \"./Store\"\nimport { MetaSchema, RowSchema } from \"./types\"\n\nconst createStore = <RS extends RowSchema, MS extends MetaSchema | undefined = undefined>(rowSchema: RS, metaSchema?: MS) => {\n return new Store(rowSchema, metaSchema)\n}\n\nexport * from \"./types\"\nexport { Store }\n\nexport default createStore"],"names":[],"mappings":";;;AAIA;AACI;AACJ;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-rock",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.17",
|
|
4
4
|
"author": "Naxrul Ahmed",
|
|
5
5
|
"description": "React-Rock is a modern, lightweight state management library designed to simplify handling global state in React applications. With a minimal API and powerful features like freezing data updates for optimized re-renders, React-Rock allows you to manage state more efficiently while ensuring your app remains fast and responsive.",
|
|
6
6
|
"main": "./index.cjs",
|
package/readme.md
CHANGED
|
@@ -1,231 +1,231 @@
|
|
|
1
|
-
<p align="center">
|
|
2
|
-
<img width="120" src="https://raw.githubusercontent.com/devnax/react-rock/main/logo.png" alt="React Rock logo">
|
|
3
|
-
</p>
|
|
4
|
-
|
|
5
|
-
<h1 align="center">React Rock</h1>
|
|
6
|
-
|
|
7
|
-
React-Rock is a lightweight package for managing global state in React applications. It simplifies handling data by providing a store with rows and metadata, while offering methods to perform CRUD operations and more. It enables easy integration with React components, making it an ideal solution for managing complex state in large applications.
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
## Installation
|
|
11
|
-
|
|
12
|
-
To install the React-Rock package, run the following command in your project:
|
|
13
|
-
|
|
14
|
-
```bash
|
|
15
|
-
npm install react-rock
|
|
16
|
-
```
|
|
17
|
-
|
|
18
|
-
## Features
|
|
19
|
-
|
|
20
|
-
- **Global Store Management**: Manage rows and meta data in a global store.
|
|
21
|
-
- **CRUD Operations**: Perform create, read, update, and delete operations on rows.
|
|
22
|
-
- **Meta Management**: Set, get, and delete meta data.
|
|
23
|
-
- **Optimized Re-renders**: Control component re-renders with the `freeze` option.
|
|
24
|
-
- **Class Component Support**: Use the `StoreComponent` for integrating store data into class components.
|
|
25
|
-
|
|
26
|
-
## Basic Example: Creating a Store and Adding Records
|
|
27
|
-
|
|
28
|
-
To create a new store and add a record, use the `createStore` function. Here's an example:
|
|
29
|
-
|
|
30
|
-
```typescript
|
|
31
|
-
import { createStore } from 'react-rock';
|
|
32
|
-
|
|
33
|
-
// Define RowType and MetaType
|
|
34
|
-
type RowType = { name: string, age: number };
|
|
35
|
-
type MetaType = { anykey: any };
|
|
36
|
-
|
|
37
|
-
const default_rows = [{ name: '', age: 0 }]
|
|
38
|
-
// Create a store
|
|
39
|
-
const users = createStore<RowType, MetaType>(default_rows, { anykey: '' });
|
|
40
|
-
|
|
41
|
-
// Add a new row to the store
|
|
42
|
-
users.create({ name: 'John Doe', age: 30 });
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
### RowType Explained
|
|
46
|
-
|
|
47
|
-
When a row is created, it will have the following properties:
|
|
48
|
-
|
|
49
|
-
```typescript
|
|
50
|
-
type RowType<Row> = Row & {
|
|
51
|
-
_id: string; // Unique identifier for the row
|
|
52
|
-
_index: number; // Index of the row in the store
|
|
53
|
-
_observe: number; // Internal property to track changes
|
|
54
|
-
}
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
Each row will include the original data (`Row`) and some additional properties like `_id`, `_index`, and `_observe`.
|
|
58
|
-
|
|
59
|
-
## Methods
|
|
60
|
-
|
|
61
|
-
Here’s a table with all available methods and their descriptions:
|
|
62
|
-
|
|
63
|
-
| Method | Description |
|
|
64
|
-
| ------------------------------- | -------------------------------------------------------------------------------------------- |
|
|
65
|
-
| `create(row, freeze?)` | Adds a new record to the store. Optionally, prevents re-rendering if `freeze` is `true`. |
|
|
66
|
-
| `createMany(rows, freeze?)` | Adds multiple records to the store. Optionally, prevents re-rendering if `freeze` is `true`. |
|
|
67
|
-
| `update(row, where, freeze?)` | Updates records based on the condition specified in `where`. |
|
|
68
|
-
| `updateAll(row, freeze?)` | Updates all records in the store. Optionally, prevents re-rendering if `freeze` is `true`. |
|
|
69
|
-
| `delete(where, freeze?)` | Deletes records based on the condition specified in `where`. |
|
|
70
|
-
| `move(oldIdx, newIdx, freeze?)` | Moves a record from one index to another. |
|
|
71
|
-
| `clearAll(freeze?)` | Clears all records from the store. Optionally, prevents re-rendering if `freeze` is `true`. |
|
|
72
|
-
| `getAll(args?)` | Retrieves all rows from the store. |
|
|
73
|
-
| `find(where, args?)` | Finds rows based on a condition specified in `where`. |
|
|
74
|
-
| `findFirst(where, freeze?)` | Finds the first row that matches the condition in `where`. |
|
|
75
|
-
| `findById(_id, freeze?)` | Finds a row by its `_id`. |
|
|
76
|
-
| `setMeta(key, value, freeze?)` | Sets a value for a specific meta key. |
|
|
77
|
-
| `getMeta(key, freeze?)` | Retrieves the value of a specific meta key. |
|
|
78
|
-
| `getAllMeta(freeze?)` | Retrieves all meta data from the store. |
|
|
79
|
-
| `deleteMeta(key, freeze?)` | Deletes a specific meta key. |
|
|
80
|
-
| `clearMeta(freeze?)` | Clears all meta data from the store. |
|
|
81
|
-
|
|
82
|
-
### Example of the `find` Method
|
|
83
|
-
|
|
84
|
-
The `find` method allows you to search for rows in the store based on specific conditions:
|
|
85
|
-
|
|
86
|
-
```typescript
|
|
87
|
-
const foundUsers = users.find({ name: 'John Doe' } );
|
|
88
|
-
console.log(foundUsers);
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
### Re-rendering in React Components
|
|
93
|
-
|
|
94
|
-
React-Rock optimizes re-renders by offering a freeze mechanism. When a store update occurs and the `freeze` option is enabled, React components that access the store using methods like `find` or `findFirst` will not automatically re-render. This gives you control over when your components should re-render, improving performance in large applications.
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
## WhereType
|
|
98
|
-
|
|
99
|
-
The `WhereType` is used to specify conditions when querying rows. It defines a query structure for filtering rows.
|
|
100
|
-
|
|
101
|
-
### QueryValueType
|
|
102
|
-
|
|
103
|
-
The `QueryValueType` is used within `WhereType` to define possible conditions for querying:
|
|
104
|
-
|
|
105
|
-
| Property | Description |
|
|
106
|
-
| -------------- | ----------------------------------------------------------------- |
|
|
107
|
-
| `contain` | Finds values containing the specified string, number, or boolean. |
|
|
108
|
-
| `startWith` | Finds values that start with the specified string or number. |
|
|
109
|
-
| `endWith` | Finds values that end with the specified string or number. |
|
|
110
|
-
| `equalWith` | Finds values that are exactly equal to the specified value. |
|
|
111
|
-
| `notEqualWith` | Finds values that are not equal to the specified value. |
|
|
112
|
-
| `gt` | Finds values greater than the specified number. |
|
|
113
|
-
| `lt` | Finds values less than the specified number. |
|
|
114
|
-
| `gte` | Finds values greater than or equal to the specified number. |
|
|
115
|
-
| `lte` | Finds values less than or equal to the specified number. |
|
|
116
|
-
|
|
117
|
-
### Example of WhereType
|
|
118
|
-
|
|
119
|
-
```typescript
|
|
120
|
-
const usersOver30 = users.find({ age: { gt: 30 } });
|
|
121
|
-
console.log(usersOver30);
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
## ArgsType
|
|
125
|
-
|
|
126
|
-
The `ArgsType` defines options for customizing query behavior, such as selecting specific rows or skipping rows.
|
|
127
|
-
|
|
128
|
-
| Property | Description |
|
|
129
|
-
| -------- | --------------------------------------------------------- |
|
|
130
|
-
| `getRow` | Custom function to process rows before returning them. |
|
|
131
|
-
| `skip` | Number of rows to skip. |
|
|
132
|
-
| `take` | Number of rows to return. |
|
|
133
|
-
| `freeze` | If `true`, prevents re-rendering when accessing the data. |
|
|
134
|
-
|
|
135
|
-
## Example with Class Component
|
|
136
|
-
|
|
137
|
-
To use the store in a class component, extend the `StoreComponent` class:
|
|
138
|
-
|
|
139
|
-
```typescript
|
|
140
|
-
import { StoreComponent } from 'react-rock';
|
|
141
|
-
|
|
142
|
-
class UserList extends StoreComponent {
|
|
143
|
-
render() {
|
|
144
|
-
const allUsers = users.getAll();
|
|
145
|
-
return (
|
|
146
|
-
<div>
|
|
147
|
-
{allUsers.map(user => <div key={user._id}>{user.name}</div>)}
|
|
148
|
-
</div>
|
|
149
|
-
);
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
```
|
|
153
|
-
|
|
154
|
-
## CRUD Example
|
|
155
|
-
|
|
156
|
-
```typescript
|
|
157
|
-
// Create a new user
|
|
158
|
-
users.create({ name: 'Alice', age: 25 });
|
|
159
|
-
|
|
160
|
-
// Update a user
|
|
161
|
-
users.update({ age: 26 }, { name: 'Alice' } );
|
|
162
|
-
|
|
163
|
-
// Delete a user
|
|
164
|
-
users.delete({ name: 'Alice' } );
|
|
165
|
-
```
|
|
166
|
-
|
|
167
|
-
## Examples with `find` and Query
|
|
168
|
-
|
|
169
|
-
```typescript
|
|
170
|
-
// Find users over the age of 25
|
|
171
|
-
const usersOver25 = users.find({ age: { gt: 25 } });
|
|
172
|
-
console.log(usersOver25);
|
|
173
|
-
|
|
174
|
-
// Find the first user with the name 'Alice'
|
|
175
|
-
const alice = users.findFirst({ name: 'Alice' } );
|
|
176
|
-
console.log(alice);
|
|
177
|
-
```
|
|
178
|
-
|
|
179
|
-
## Example of Using the Store in Multiple Components
|
|
180
|
-
|
|
181
|
-
React-Rock allows you to share the same store across multiple components, ensuring a consistent state throughout the app:
|
|
182
|
-
|
|
183
|
-
```typescript
|
|
184
|
-
import { StoreComponent } from 'react-rock';
|
|
185
|
-
|
|
186
|
-
class UserList extends StoreComponent {
|
|
187
|
-
render() {
|
|
188
|
-
const users = users.getAll();
|
|
189
|
-
return (
|
|
190
|
-
<div>
|
|
191
|
-
{users.map(user => <div key={user._id}>{user.name}</div>)}
|
|
192
|
-
</div>
|
|
193
|
-
);
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
class UserProfile extends StoreComponent {
|
|
198
|
-
render() {
|
|
199
|
-
const user = users.findFirst({ name: 'John Doe' });
|
|
200
|
-
return <div>{user ? user.name : 'User not found'}</div>;
|
|
201
|
-
}
|
|
202
|
-
}
|
|
203
|
-
```
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
## Explanation of Types
|
|
208
|
-
|
|
209
|
-
- **RowType**: Represents a record with an `_id`, `_index`, and `_observe` along with user-defined data fields.
|
|
210
|
-
- **ArgsType**: Defines the options for querying rows with flexibility like skipping, taking, and custom row processing.
|
|
211
|
-
- **WhereType**: Represents the conditions for querying records, using fields like `contain`, `equalWith`, and range queries like `gt`, `lt`, etc.
|
|
212
|
-
- **QueryValueType**: Specifies the allowed condition types for filtering rows based on field values.
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
## License
|
|
216
|
-
|
|
217
|
-
This package is licensed under the MIT License.
|
|
218
|
-
|
|
219
|
-
---
|
|
220
|
-
|
|
221
|
-
This documentation should provide a concise overview of how to use the `react-rock` package effectively.
|
|
222
|
-
|
|
223
|
-
## 🤝 Contributing
|
|
224
|
-
|
|
225
|
-
Contributions are welcome! Please check out the [contribution guidelines](https://github.com/devnax/react-rock).
|
|
226
|
-
|
|
227
|
-
---
|
|
228
|
-
|
|
229
|
-
## 📄 License
|
|
230
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img width="120" src="https://raw.githubusercontent.com/devnax/react-rock/main/logo.png" alt="React Rock logo">
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
<h1 align="center">React Rock</h1>
|
|
6
|
+
|
|
7
|
+
React-Rock is a lightweight package for managing global state in React applications. It simplifies handling data by providing a store with rows and metadata, while offering methods to perform CRUD operations and more. It enables easy integration with React components, making it an ideal solution for managing complex state in large applications.
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
## Installation
|
|
11
|
+
|
|
12
|
+
To install the React-Rock package, run the following command in your project:
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install react-rock
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Features
|
|
19
|
+
|
|
20
|
+
- **Global Store Management**: Manage rows and meta data in a global store.
|
|
21
|
+
- **CRUD Operations**: Perform create, read, update, and delete operations on rows.
|
|
22
|
+
- **Meta Management**: Set, get, and delete meta data.
|
|
23
|
+
- **Optimized Re-renders**: Control component re-renders with the `freeze` option.
|
|
24
|
+
- **Class Component Support**: Use the `StoreComponent` for integrating store data into class components.
|
|
25
|
+
|
|
26
|
+
## Basic Example: Creating a Store and Adding Records
|
|
27
|
+
|
|
28
|
+
To create a new store and add a record, use the `createStore` function. Here's an example:
|
|
29
|
+
|
|
30
|
+
```typescript
|
|
31
|
+
import { createStore } from 'react-rock';
|
|
32
|
+
|
|
33
|
+
// Define RowType and MetaType
|
|
34
|
+
type RowType = { name: string, age: number };
|
|
35
|
+
type MetaType = { anykey: any };
|
|
36
|
+
|
|
37
|
+
const default_rows = [{ name: '', age: 0 }]
|
|
38
|
+
// Create a store
|
|
39
|
+
const users = createStore<RowType, MetaType>(default_rows, { anykey: '' });
|
|
40
|
+
|
|
41
|
+
// Add a new row to the store
|
|
42
|
+
users.create({ name: 'John Doe', age: 30 });
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### RowType Explained
|
|
46
|
+
|
|
47
|
+
When a row is created, it will have the following properties:
|
|
48
|
+
|
|
49
|
+
```typescript
|
|
50
|
+
type RowType<Row> = Row & {
|
|
51
|
+
_id: string; // Unique identifier for the row
|
|
52
|
+
_index: number; // Index of the row in the store
|
|
53
|
+
_observe: number; // Internal property to track changes
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
Each row will include the original data (`Row`) and some additional properties like `_id`, `_index`, and `_observe`.
|
|
58
|
+
|
|
59
|
+
## Methods
|
|
60
|
+
|
|
61
|
+
Here’s a table with all available methods and their descriptions:
|
|
62
|
+
|
|
63
|
+
| Method | Description |
|
|
64
|
+
| ------------------------------- | -------------------------------------------------------------------------------------------- |
|
|
65
|
+
| `create(row, freeze?)` | Adds a new record to the store. Optionally, prevents re-rendering if `freeze` is `true`. |
|
|
66
|
+
| `createMany(rows, freeze?)` | Adds multiple records to the store. Optionally, prevents re-rendering if `freeze` is `true`. |
|
|
67
|
+
| `update(row, where, freeze?)` | Updates records based on the condition specified in `where`. |
|
|
68
|
+
| `updateAll(row, freeze?)` | Updates all records in the store. Optionally, prevents re-rendering if `freeze` is `true`. |
|
|
69
|
+
| `delete(where, freeze?)` | Deletes records based on the condition specified in `where`. |
|
|
70
|
+
| `move(oldIdx, newIdx, freeze?)` | Moves a record from one index to another. |
|
|
71
|
+
| `clearAll(freeze?)` | Clears all records from the store. Optionally, prevents re-rendering if `freeze` is `true`. |
|
|
72
|
+
| `getAll(args?)` | Retrieves all rows from the store. |
|
|
73
|
+
| `find(where, args?)` | Finds rows based on a condition specified in `where`. |
|
|
74
|
+
| `findFirst(where, freeze?)` | Finds the first row that matches the condition in `where`. |
|
|
75
|
+
| `findById(_id, freeze?)` | Finds a row by its `_id`. |
|
|
76
|
+
| `setMeta(key, value, freeze?)` | Sets a value for a specific meta key. |
|
|
77
|
+
| `getMeta(key, freeze?)` | Retrieves the value of a specific meta key. |
|
|
78
|
+
| `getAllMeta(freeze?)` | Retrieves all meta data from the store. |
|
|
79
|
+
| `deleteMeta(key, freeze?)` | Deletes a specific meta key. |
|
|
80
|
+
| `clearMeta(freeze?)` | Clears all meta data from the store. |
|
|
81
|
+
|
|
82
|
+
### Example of the `find` Method
|
|
83
|
+
|
|
84
|
+
The `find` method allows you to search for rows in the store based on specific conditions:
|
|
85
|
+
|
|
86
|
+
```typescript
|
|
87
|
+
const foundUsers = users.find({ name: 'John Doe' } );
|
|
88
|
+
console.log(foundUsers);
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
### Re-rendering in React Components
|
|
93
|
+
|
|
94
|
+
React-Rock optimizes re-renders by offering a freeze mechanism. When a store update occurs and the `freeze` option is enabled, React components that access the store using methods like `find` or `findFirst` will not automatically re-render. This gives you control over when your components should re-render, improving performance in large applications.
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
## WhereType
|
|
98
|
+
|
|
99
|
+
The `WhereType` is used to specify conditions when querying rows. It defines a query structure for filtering rows.
|
|
100
|
+
|
|
101
|
+
### QueryValueType
|
|
102
|
+
|
|
103
|
+
The `QueryValueType` is used within `WhereType` to define possible conditions for querying:
|
|
104
|
+
|
|
105
|
+
| Property | Description |
|
|
106
|
+
| -------------- | ----------------------------------------------------------------- |
|
|
107
|
+
| `contain` | Finds values containing the specified string, number, or boolean. |
|
|
108
|
+
| `startWith` | Finds values that start with the specified string or number. |
|
|
109
|
+
| `endWith` | Finds values that end with the specified string or number. |
|
|
110
|
+
| `equalWith` | Finds values that are exactly equal to the specified value. |
|
|
111
|
+
| `notEqualWith` | Finds values that are not equal to the specified value. |
|
|
112
|
+
| `gt` | Finds values greater than the specified number. |
|
|
113
|
+
| `lt` | Finds values less than the specified number. |
|
|
114
|
+
| `gte` | Finds values greater than or equal to the specified number. |
|
|
115
|
+
| `lte` | Finds values less than or equal to the specified number. |
|
|
116
|
+
|
|
117
|
+
### Example of WhereType
|
|
118
|
+
|
|
119
|
+
```typescript
|
|
120
|
+
const usersOver30 = users.find({ age: { gt: 30 } });
|
|
121
|
+
console.log(usersOver30);
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
## ArgsType
|
|
125
|
+
|
|
126
|
+
The `ArgsType` defines options for customizing query behavior, such as selecting specific rows or skipping rows.
|
|
127
|
+
|
|
128
|
+
| Property | Description |
|
|
129
|
+
| -------- | --------------------------------------------------------- |
|
|
130
|
+
| `getRow` | Custom function to process rows before returning them. |
|
|
131
|
+
| `skip` | Number of rows to skip. |
|
|
132
|
+
| `take` | Number of rows to return. |
|
|
133
|
+
| `freeze` | If `true`, prevents re-rendering when accessing the data. |
|
|
134
|
+
|
|
135
|
+
## Example with Class Component
|
|
136
|
+
|
|
137
|
+
To use the store in a class component, extend the `StoreComponent` class:
|
|
138
|
+
|
|
139
|
+
```typescript
|
|
140
|
+
import { StoreComponent } from 'react-rock';
|
|
141
|
+
|
|
142
|
+
class UserList extends StoreComponent {
|
|
143
|
+
render() {
|
|
144
|
+
const allUsers = users.getAll();
|
|
145
|
+
return (
|
|
146
|
+
<div>
|
|
147
|
+
{allUsers.map(user => <div key={user._id}>{user.name}</div>)}
|
|
148
|
+
</div>
|
|
149
|
+
);
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
## CRUD Example
|
|
155
|
+
|
|
156
|
+
```typescript
|
|
157
|
+
// Create a new user
|
|
158
|
+
users.create({ name: 'Alice', age: 25 });
|
|
159
|
+
|
|
160
|
+
// Update a user
|
|
161
|
+
users.update({ age: 26 }, { name: 'Alice' } );
|
|
162
|
+
|
|
163
|
+
// Delete a user
|
|
164
|
+
users.delete({ name: 'Alice' } );
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
## Examples with `find` and Query
|
|
168
|
+
|
|
169
|
+
```typescript
|
|
170
|
+
// Find users over the age of 25
|
|
171
|
+
const usersOver25 = users.find({ age: { gt: 25 } });
|
|
172
|
+
console.log(usersOver25);
|
|
173
|
+
|
|
174
|
+
// Find the first user with the name 'Alice'
|
|
175
|
+
const alice = users.findFirst({ name: 'Alice' } );
|
|
176
|
+
console.log(alice);
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
## Example of Using the Store in Multiple Components
|
|
180
|
+
|
|
181
|
+
React-Rock allows you to share the same store across multiple components, ensuring a consistent state throughout the app:
|
|
182
|
+
|
|
183
|
+
```typescript
|
|
184
|
+
import { StoreComponent } from 'react-rock';
|
|
185
|
+
|
|
186
|
+
class UserList extends StoreComponent {
|
|
187
|
+
render() {
|
|
188
|
+
const users = users.getAll();
|
|
189
|
+
return (
|
|
190
|
+
<div>
|
|
191
|
+
{users.map(user => <div key={user._id}>{user.name}</div>)}
|
|
192
|
+
</div>
|
|
193
|
+
);
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
class UserProfile extends StoreComponent {
|
|
198
|
+
render() {
|
|
199
|
+
const user = users.findFirst({ name: 'John Doe' });
|
|
200
|
+
return <div>{user ? user.name : 'User not found'}</div>;
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
|
|
207
|
+
## Explanation of Types
|
|
208
|
+
|
|
209
|
+
- **RowType**: Represents a record with an `_id`, `_index`, and `_observe` along with user-defined data fields.
|
|
210
|
+
- **ArgsType**: Defines the options for querying rows with flexibility like skipping, taking, and custom row processing.
|
|
211
|
+
- **WhereType**: Represents the conditions for querying records, using fields like `contain`, `equalWith`, and range queries like `gt`, `lt`, etc.
|
|
212
|
+
- **QueryValueType**: Specifies the allowed condition types for filtering rows based on field values.
|
|
213
|
+
|
|
214
|
+
|
|
215
|
+
## License
|
|
216
|
+
|
|
217
|
+
This package is licensed under the MIT License.
|
|
218
|
+
|
|
219
|
+
---
|
|
220
|
+
|
|
221
|
+
This documentation should provide a concise overview of how to use the `react-rock` package effectively.
|
|
222
|
+
|
|
223
|
+
## 🤝 Contributing
|
|
224
|
+
|
|
225
|
+
Contributions are welcome! Please check out the [contribution guidelines](https://github.com/devnax/react-rock).
|
|
226
|
+
|
|
227
|
+
---
|
|
228
|
+
|
|
229
|
+
## 📄 License
|
|
230
|
+
|
|
231
231
|
This project is licensed under the [MIT License](https://opensource.org/licenses/MIT).
|