non React/JS environments support?

[moebiusmania]

as of v1.0-beta Habitat is a React only library.

Even though React is a Javascript framework, nothing built in React can be reused in different frameworks or environment as it is, to achieve this goal additional work is always required.

Why Habitat is React only?

The context here is that being React+Next the only JS framework that we are using in Casavo, there is no need to consider other JS based solutions. We have some non React/JS projects but to support them from the beginning we would had to heavily compromise the developer experience for the 90% of the consumer of the library, so we took the "obvious" solution to start building the library with the bigger userbase in mind.

What other environments could use Habitat?

Given that as stated above, we don't have JS projects built with anything different from React, only the backend-first language remains (Elixir, Python, Scala, Kotlin) so the only feasible choice woul be to support Web Components since they can be injected from the server (but rendered on the client anyway).

Do we HAVE TO consider non React/JS environments?

At the time that I'm writing this we had NO requests to implement this kind of compatibility. But since we are going to unveil the library in a few days, I would not be surprised if a similar question would pop out in the coming weeks so it can be a good idea to at least have a discussion about it to get some opinions.
Technically the objective of a Design System (and the library that materialize it) is to consolidate and unify the design and UX across any products of a company, so in the long term it makes sense to address this issue.

What options are available to eventually achieve this result?

• StencilJS
  • 🟢 code is JSX (but not React) and the components can be built to different outputs (WebComponents, Vue, etc)
  • 🔴 requires complete rewrite of the current codebase, not sure about reusing Vanilla Extract
• writing Web Components from scratch alongside the React ones
  • 🟢 we can reuse most of the existing code and have native Web Components
  • 🔴 markup and logic must be ported, an additional build + release pipeline must be added to the project
• using a wrapper library like react-to-web-components
  • 🟢 all of the current code is reused, we just need to add the props and events bindings
  • 🔴 not sure how the CSS is treated, not sure if an istance of React is embedded in every component or not, an additional build + release pipeline must be added to the project
• ditching components entirely, just exporting the Vanilla Extract classes as regular CSS classes (Bootstrap style)
  • 🟢 very low effort, not adding JS in projects that aren't using it
  • 🔴 components logic should be re-implemented every time, an additional build + release pipeline must be added to the project

EDIT: I'm not mentioning React Native envs so far since we already had a first exploration on that topic and we haven't found a feasible solution to share logic across React Web and Native. Only some smaller utilities can be shared.

any other ideas, solutions, opinions and suggestions on this topic are welcome in the discussion below.

[moebiusmania]

during recent alingments with Marketing team, we realised that would be very useful to have Habitat usable also within Hubspot-made landing page. I don't know anything about Hubspot as page-builder tool so w need to deep dive on it and understand how we could provide custom items (CSS only? Web components?)