Framework-agnostic Core

[antfu]

First of all, I love the visuals, thanks for making it!

I come from Vue community and would love to use them in as Vue components like Slidev.

I scanned through the code, and it seems most of the components are WebGL on a single DOM element - which doesn't have to be React-specific. I wonder if you are interested in refactoring them out as a framework-agnostic version, for example:

// Name and interface can be discussed
export function createOpulentoCanvas(options) {
    const renderer = new Renderer();
    const gl = renderer.gl;
    gl.clearColor(1, 1, 1, 1);

    // ...

    return gl.canvas
}

And expose the core and framework wrappers as sub-modules like:

// Agnostic core
import { createOpulentoCanvas } from 'uvcanvas'

// React component (same as current)
import { Opulento } from 'uvcanvas/react'

// Potentially other framework wrappers like:
import { Opulento } from 'uvcanvas/vue'

If that end up happening, I'd be happy to contribute the Vue wrappers :)

Thanks

[ciaochaos]

Thank you Anthony!

I think your proposal is very reasonable, and I will try to break down the core logic as soon as possible.

Btw, Slidev and the new Shiki Magic Move are awesome, lots of inspiration!

[m0ksem]

I was working on wrapper for 2d frag shaders backgrounds for vue. You can take inspiration from here: https://github.com/m0ksem/vue-glsl.

[CPunisher]

I was working on wrapper for 2d frag shaders backgrounds for vue. You can take inspiration from here: https://github.com/m0ksem/vue-glsl.

Thanks for your support! We're in the process of refactoring a new version on the v1 branch. Any references and help are welcome!