What is the concept of Storage in getCurrentStorage()

[wunksert]

Looking at the template manager code from grapesjs-template-manager
src/manager/templates.js

const def = {
            id,
            name,
            template: false,
            thumbnail: '',
            styles: '[]',
            description: 'No description',
            pages: `[{"id": "${crypto.randomUUID().substring(0, 13)}", "name": "index"}]`,
            styles: '[]',
            assets: '[]'
        };
        if (!projectId) {
            cs.setId(id);
            await cs.store(def);
            cs.setIsTemplate(false);
            const res = await editor.load();
            cs.setId(res.id);
            cs.setName(res.name);
            cs.setThumbnail(res.thumbnail || '');
            cs.setDescription(res.description || 'No description');
            editor.Modal.close();

In general, I'm really confused about what the CurrentStorage object is. Going by the code, it seems like it's almost a RAM-like thing we need to manually handle, and the store and load functions talk to disk (or equivalent)
For instance:

1. Why are we setting so many values via cs.set... on either side of the cs.store and editor.load call? Why set the name, Id, and thumbnail after we store and load def?
2. What is the need for editor.load? this function is only meant to create a new record in memory

Also, why is getCurrentStorage() not documented?

It would be great to get more docs on how all this works. Cheers

[nguyenvoanhkhoa1]

Hi @wunksert, based on my last 2 weeks working on this plugin:
The grapesjs-template-manager is written on top of Grapesjs by @Ju99ernaut. The name, id, and thumbnail are used only in this plugin.
StorageManager allows 2 types of storage: local (localStorage) and remote (web API). Users can and custom storage on their need.
The plugin grapesjs-template-manager provides 3 more types: indexeddb (almost the same as local storage), rest-api, and firestore (firebase)
So there are many types of storage, and we can change the storage type that we want to use in init function. The CurrentStorage object is the storage that we choose.
Each storage type may have different load and store method, for example:

• editor.load(): read project data from local storage (local) / from get API method
• editor.store(): write/post project data to local storage / post or patch API method
• The load and store method for type indexeddb, rest-api, firestore are defined in that plugin.

Hope this help.

[wunksert]

Thanks, this does help a bit. Any thoughts on the difference between Storage.load/store and editor.load/store?

[artf]

Any thoughts on the difference between Storage.load/store and editor.load/store?

Storage.load/store API deals only with storing/loading project data from a specific storage interface.

editor.load/store uses the same Storage.load/store APIs + all the related tasks for other modules. For example, once I loaded the project data from Storage.load I have to update modules with those data, eg. Pages, Assets, Css, etc.