Storage / filesystem access for addons

[AlbertBrand]

I'm creating an addon for adding tldraw support. Currently I'm serializing the tldraw document and storing it directly in the markdown file, but the format is quite technical and would be better off stored on the file system or in some kind of storage.

I've seen that an addon can add new routes to the server app, but maybe there should be an 'official' way of storing extra data for a presentation from an addon? Next to the tldraw documents, you can also upload images via the tldraw component. It would be nice to hook that up to some kind of backend storage.

There's also another plugin for integrating excalidraw that could benefit from it.

Maybe you can care to elaborate on this topic, @KermanX or @antfu?

[KermanX]

The data can be stored on the disk and accessed via node:fs. There are two ways to pass the data to the client (browser) side:

• Seraialze data into string (via lz-string) and pass it as props. Example: https://github.com/slidevjs/slidev/blob/main/packages/slidev/node/syntax/transform/mermaid.ts
• Via virtual modules in your Vite plugin. See https://vitejs.dev/guide/api-plugin.html#virtual-modules-convention.

[AlbertBrand]

Ok, I should have provided my code to explain it better. I already figured out a way to store and pass the tldraw data, based on the v-drag code. It uses useDynamicSlideInfo to get/set the content of the <Tldraw> element. (see https://github.com/AlbertBrand/slidev-addon-tldraw/blob/main/components/useSaveSnapshot.ts#L11).

But what I would like is to store the document content as a separate file and update the content of the <Tldraw> component to point to the right file (if it did not exist yet). Probably the file should be stored in the public folder.

I currently don't see a way of adding new server methods to the slidev server from an addon (or at least, can't find it documented). If the server was accessible in some way (maybe via hooks) my addon could add another server method.

[AlbertBrand]

Ah, thanks for the pointer! I added a new plugin in the vite.config.ts of the addon and client-to-server communication works. Now I can try to store the document contents through that websocket. Thanks @KermanX!

[AlbertBrand]

Allright, v0.2 of the plugin now supports uploading assets!
Instead of using lz-string serialization I'm passing base64 dataURLs to the server which works fine as well.
For people interested, check out: https://github.com/AlbertBrand/slidev-addon-tldraw

[KermanX]

Could you help add it to this page? https://sli.dev/resources/addon-gallery

[AlbertBrand]

I guess I can... but there are no addons visible on that page yet:

Is something broken?

[KermanX]

I guess I can... but there are no addons visible on that page yet:

Is something broken?

You will be the first one😆