From 8f12bd1edfee62e4e92c1bbef67584b4aea05533 Mon Sep 17 00:00:00 2001 From: "S. Amir Mohammad Najafi" Date: Tue, 10 Dec 2024 14:50:45 +0330 Subject: [PATCH] feat(alpine): add store class --- packages/alpine/README.md | 40 +++++++++++++++ packages/alpine/src/main.ts | 1 + .../alpine/src/store/store-with-backup.ts | 17 ++----- packages/alpine/src/store/store.ts | 49 +++++++++++++++++++ 4 files changed, 94 insertions(+), 13 deletions(-) create mode 100644 packages/alpine/src/store/store.ts diff --git a/packages/alpine/README.md b/packages/alpine/README.md index 86a3f0e..8be324a 100644 --- a/packages/alpine/README.md +++ b/packages/alpine/README.md @@ -40,6 +40,38 @@ const store = alpineStoreGenerator({ console.log(store.type); // Output: root ``` +### AlpineStore + +Provides a Alpine.js pure store implementation with logger. + +#### Constructor + +Creates an instance of `AlpineStore`. + +- **config**: The configuration object for the store. + - **name**: The name of the store. + - **defaultValue**: The default value of the store. + +### Properties + +- **store**: alpine store proxy. + +#### Example Usage + +```ts +import {AlpineStore} from '@nexim/alpine'; + +const {store} = new AlpineStore({ + name: 'myStore', + defaultValue: {data: 'root'}, +}); + +console.log(store.data); // Output: { data: 'root' } +store.data = 'user'; + +console.log(store.data); // Output: { data: 'user' } +``` + ### AlpineStoreWithBackup Extends `AlpineStore` to add backup and restore functionality with local storage support and expiration handling. @@ -54,6 +86,10 @@ Creates an instance of `AlpineStoreWithBackup`. - **defaultValue**: The default value of the store. - **expireDuration**: Optional. The duration after which the store expires. +### Properties + +- **store**: alpine store proxy. + #### Methods - **save()**: Saves the current data to local storage. If the data is null, it clears the stored data. Also updates the expiration time. @@ -79,3 +115,7 @@ console.log(storeWithBackup.store.data); // Output: { data: 'user' } storeWithBackup.clear(); console.log(storeWithBackup.store.data); // Output: { data: 'root' } ``` + +### TODO + +- Analyze [@alwatr/context](https://github.com/Alwatr/flux/tree/next/packages/context) for use here. diff --git a/packages/alpine/src/main.ts b/packages/alpine/src/main.ts index 743ef27..66efdae 100644 --- a/packages/alpine/src/main.ts +++ b/packages/alpine/src/main.ts @@ -3,4 +3,5 @@ import {packageTracer} from '@alwatr/package-tracer'; __dev_mode__: packageTracer.add(__package_name__, __package_version__); export * from './store/store-generator.js'; +export * from './store/store.js'; export * from './store/store-with-backup.js'; diff --git a/packages/alpine/src/store/store-with-backup.ts b/packages/alpine/src/store/store-with-backup.ts index a9152be..7505e4c 100644 --- a/packages/alpine/src/store/store-with-backup.ts +++ b/packages/alpine/src/store/store-with-backup.ts @@ -1,7 +1,8 @@ import {localJsonStorage} from '@alwatr/local-storage'; -import {type AlwatrLogger, createLogger} from '@alwatr/logger'; import {parseDuration, type Duration} from '@alwatr/parse-duration'; +import {AlpineStore} from './store.js'; + /** * Type for the store's data to extends from them. */ @@ -36,14 +37,7 @@ const schemaVersion = 1; /** * Provides a Alpine.js store implementation with backup and expiration. */ -export class AlpineStoreWithBackup { - /** - * The store's data. - */ - store: T; - - protected logger_: AlwatrLogger; - +export class AlpineStoreWithBackup extends AlpineStore { /** * Keys for storing data and expire time in local storage with version. */ @@ -76,10 +70,7 @@ export class AlpineStoreWithBackup { * console.log(storeWithBackup.store.data); // Output: { data: 'root' } */ constructor(private config__: AlpineStoreWithBackupOptions) { - this.logger_ = createLogger(`[${__package_name__}]:${config__.name}`); - this.logger_.logMethodArgs?.('constructor', config__); - - this.store = config__.defaultValue; + super(config__); if (this.config__.expireDuration !== null) { this.handleDataExpiration__(); diff --git a/packages/alpine/src/store/store.ts b/packages/alpine/src/store/store.ts new file mode 100644 index 0000000..e190f3d --- /dev/null +++ b/packages/alpine/src/store/store.ts @@ -0,0 +1,49 @@ +import {type AlwatrLogger, createLogger} from '@alwatr/logger'; + +/** + * AlpineStore Options. + * + * @template T - The type of the store value. + * @param {string} name - The name of the store. + * @param {T} defaultValue - The default value of the store. + */ +export type AlpineStoreOptions = { + name: string; + defaultValue: T; +}; + +/** + * Provides a Alpine.js pure store implementation with logger. + */ +export class AlpineStore { + /** + * The store's data. + */ + store: T; + + protected logger_: AlwatrLogger; + + /** + * Provides a Alpine.js pure store implementation with logger. + * + * @param {AlpineStoreOptions} config - Configuration object. + * + * @example + * import {AlpineStore} from '@nexim/alpine'; + * + * const {store} = new AlpineStore({ + * name: 'myStore', + * defaultValue: {data: 'root'}, + * }); + * console.log(store.data); // Output: { data: 'root' } + * + * store.data = 'user'; + * console.log(store.data); // Output: { data: 'user' } + */ + constructor(config: AlpineStoreOptions) { + this.logger_ = createLogger(`${__package_name__}:${config.name}`); + this.logger_.logMethodArgs?.('constructor', config); + + this.store = config.defaultValue; + } +}