🚀[FEATURE]: Support async storage in storage plugin

[AllySummers]

Related issues: #896 #221
Related PRs: #669 #814 #842

Relevant Package

This feature request is for @ngxs/storage-plugin

Description

The current @ngxs/storage-plugin does not support asynchronous or observable-based storage engines, making it difficult to use NGXS and data persistence in PWAs.

Describe the problem you are trying to solve

Allow use of NGXS with offline persistence storage options for PWAs.

Describe the solution you'd like

Either:

• @ngxs/storage-plugin updated to include async storage engines
• @ngxs-labs/async-storage-plugin updated to be stable and production ready, as the last commit/release is in 2019 and is not a stable, production ready release due to the "WIP" status
• A new NGXS plugin created and maintained for asynchronous storage persistence

Describe alternatives you've considered

• @ngxs-labs/async-storage-plugin - unstable and no updates since 2019
• https://github.com/kxc0re/store/tree/async-plugin - even older than @ngxs-labs/async-storage-plugin and not maintained

Extra notes

This implementation could possibly be simplified by using this npm package @ngx-pwa/local-storage as it implements a localStorage-like API for Indexed DB.

It could also simplify the implementation by using localForage.

The lack of up to date and stable async/observable-based storage options is makes it very hard to consider NGXS as a state management library when PWA support is absolutely necessary, especially when Akita supports and mentions this on the wiki

[splincode]

@AllySummers Hello, what do you think about create PR for us

copy paste from

https://github.com/kxc0re/store/tree/async-plugin/packages/async-storage-plugin

[AllySummers]

@AllySummers Hello, what do you think about create PR for us

copy paste from

https://github.com/kxc0re/store/tree/async-plugin/packages/async-storage-plugin

I did have a go at making a plugin although had a very hard time understanding the code in both @ngxs/storage-plugin and @ngxs-labs/async-storage-plugin. I might be able to have a crack if you can provide some resources on making NGXS plugins.

[splincode]

@markwhitfeld maybe we can create documentation about create plugins for NGXS?

[AllySummers]

Hey,

I'm pretty sure this is very wrong but my first attempt at making a plugin. https://github.com/AllySummers/ngxs-store/tree/feature/async-storage-plugin

I wasn't able to get it working as a local install (like installing from the @ngxs dist folder), but thought I'd put here in case you can help me out on getting it to work like that.

Unfortunately I would work more on it now but I have to go to bed for work and likely won't have a chance to work on this for a while.

This is the error I was getting, so if you're able to help me resolve this for next time, that would be appreciated:

PS C:\Users\Ally\Downloads\ngxsdevtest\ngxsasync> ng serve --open
⠋ Generating browser application bundles...
Compiling @ngxs/store/internals : es2015 as esm2015

Compiling @angular/common : es2015 as esm2015

Compiling @ngxs/store : es2015 as esm2015

Compiling @ngxs/logger-plugin : es2015 as esm2015
Compiling @ngxs/devtools-plugin : es2015 as esm2015
C:\Users\Ally\Downloads\ngxsdevtest\ngxsasync\node_modules\@angular\compiler-cli\ngcc\src\entry_point_finder\targeted_entry_point_finder.js:40
                throw new Error("The target entry-point \"" + invalidTarget.entryPoint.name + "\" has missing dependencies:\n" +

Error: The target entry-point "@ngxs/async-storage-plugin" has missing dependencies:
 - @ngxs/store

    at TargetedEntryPointFinder.findEntryPoints (C:\Users\Ally\Downloads\ngxsdevtest\ngxsasync\node_modules\@angular\compiler-cli\ngcc\src\entry_point_finder\targeted_entry_point_finder.js:40:23)
    at C:\Users\Ally\Downloads\ngxsdevtest\ngxsasync\node_modules\@angular\compiler-cli\ngcc\src\execution\analyze_entry_points.js:29:41
    at SingleProcessExecutorSync.SingleProcessorExecutorBase.doExecute (C:\Users\Ally\Downloads\ngxsdevtest\ngxsasync\node_modules\@angular\compiler-cli\ngcc\src\execution\single_process_executor.js:28:29)
    at C:\Users\Ally\Downloads\ngxsdevtest\ngxsasync\node_modules\@angular\compiler-cli\ngcc\src\execution\single_process_executor.js:57:59
    at SyncLocker.lock (C:\Users\Ally\Downloads\ngxsdevtest\ngxsasync\node_modules\@angular\compiler-cli\ngcc\src\locking\sync_locker.js:34:24)
    at SingleProcessExecutorSync.execute (C:\Users\Ally\Downloads\ngxsdevtest\ngxsasync\node_modules\@angular\compiler-cli\ngcc\src\execution\single_process_executor.js:57:27)
    at Object.mainNgcc (C:\Users\Ally\Downloads\ngxsdevtest\ngxsasync\node_modules\@angular\compiler-cli\ngcc\src\main.js:74:25)
    at Object.process (C:\Users\Ally\Downloads\ngxsdevtest\ngxsasync\node_modules\@angular\compiler-cli\ngcc\index.js:29:23)
    at NgccProcessor.processModule (C:\Users\Ally\Downloads\ngxsdevtest\ngxsasync\node_modules\@ngtools\webpack\src\ngcc_processor.js:164:16)
    at C:\Users\Ally\Downloads\ngxsdevtest\ngxsasync\node_modules\@ngtools\webpack\src\ivy\host.js:128:18

Edit: You can see a repo with how I was attempting to use it locally here: https://github.com/AllySummers/ngxs-async-demo-project

[stephan-fischer]

@AllySummers any new status? I hope this will be integrated soon 😊