search

vasturiano / globe.gl

UI component for Globe Data Visualization using ThreeJS/WebGL
https://vasturiano.github.io/globe.gl/example/world-population/
MIT License
1.99k stars 298 forks source link

Make this an actual web component? #95

Open justinfagnani opened 2 years ago

justinfagnani commented 2 years ago

Is your feature request related to a problem? Please describe. This library describes itself as a "web component" but it doesn't appear to be an actual standard web component. If it were, an instance would be able to be created from DOM/HTML like nay other HTML element and the component would be automatically compatible with most frameworks.

Describe the solution you'd like It'd be great if a globe could be created just from HTML:

<script src="//unpkg.com/globe.gl"></script>
<globe-viewer globe-image-src="..." points-data-src="..."></globe-viewer>

JavaScript-only config can be done by getting a reference to the element:

const globe = document.querySelector('globe-viewer');
globe.pointsData = ...;

Or with template bindings in popular frameworks, like Vue:

<globe-viewer :pointsData="myData"></globe-viewer>

Additional context <model-viewer> is a similar project that wraps three.js to render gltf files. It might have some good patterns to use for making a highly-reusable web component: https://github.com/google/model-viewer

vasturiano commented 2 years ago

@justinfagnani thanks for your suggestion.

You're right that this component is a web component in the conceptual sense, but the interface is not based on the standard Web Components specific implementation. However, if there's interest one can easily build an adapter layer that wraps this module and provides the interface in that form, much like it exists with the React bindings. The same could be said for any other "web framework" implementation like Vue, or Angular. It's all a matter of adoption and preference I suppose.

justinfagnani commented 2 years ago

Right, I just think it'd be easiest if this were distributed as an actual web component. Then no one would need to make wrappers (except React, but they're fixing this in React 18). Web components have very wide support now - they're natively supported in all major browsers.

One question is which set of users should be exposed to the imperative construction interface rather than dealing with just an element?