-
Notifications
You must be signed in to change notification settings - Fork 187
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Integration with StencilJS and Web Components? #156
Comments
We use StencilJS + React integration with Playroom. Unfortunately, I can't share the repository. Basically what you need to do is build the library with the Stencil compiler and reference your destination folder as described in the documentation. module.exports = {
// I use an absolute path because the library is part of the node_modules folder.
// In your case most probably its a relative part.
components: "@design-system/react",
themes: "@design-system/react/dist-transpiled/themes",
webpackConfig: () => ({
module: {
rules: [
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: "file-loader"
}
]
},
{
test: /\.jsx?$/,
include: __dirname,
exclude: /node_modules/,
use: {
loader: require.resolve("babel-loader"),
options: {
presets: [
[
require.resolve("@babel/preset-env"),
{
targets: {
node: "10"
}
}
],
require.resolve("@babel/preset-react")
]
}
}
}
]
}
})
... Theming is a more tricky one. The way it works with our design system is the "Ionic"-way. Basically you need to set a <body mode="dark">
... In order to integrate it with the Playroom, I simply created a export const lightTheme = "light";
export const darkTheme = "dark"; and the import React from "react";
import "style-loader!css-loader!@design-system/core/dist/web/web.css";
export default ({ children, theme }) => {
return <div mode={theme}>{children}</div>;
}; The gist of it is, basically, Playroom does not care what you pass as your constants or how you integrate it. So even if you have a different way of theming your components, it should be feasible. I hope this helps? :) Edit: Oh I forgot to mention we also have a Rollup configuration for the React package. import resolve from 'rollup-plugin-node-resolve';
import sourcemaps from 'rollup-plugin-sourcemaps';
export default {
input: 'dist-transpiled/index.js',
output: [
{
file: 'dist/index.esm.js',
format: 'es',
sourcemap: true
},
{
file: 'dist/index.js',
format: 'commonjs',
preferConst: true,
sourcemap: true
}
],
external: (id) => !/^(\.|\/)/.test(id),
plugins: [
resolve(),
sourcemaps()
]
}; But that is independent to Playroom off course. No need to use specifically Rollup. Edit 2: Judging by the length of this reply, I think it would be worth a blog post haha |
@BrunnerLivio -- Thanks! I wasn't expecting an answer so quickly, so it might be a minute before I can try this out, but a few questions to clarify -- // playroom.config.js
module.exports = {
components: "@design-system/react",
...
}
|
Not quite sure to be honest. What I have used it a similar structure as Ionic handles it. See here. You will find the rollup config. I think But essentially, it does not really matter. It should also work directly with native Webcomponents as you can see in my picture above. Just make sure you use the correct bundle to load. |
Hey @BrunnerLivio -- do you have any idea which is the "correct" native Web Components bundle generated by Stencil? // playroom.config.js
module.exports = {
components: '../my-library-react/dist/components.js',
outputPath: './dist/playroom'
}; But, when I try to just target the default Stencil dist bundles, most of the time // playroom.config.js
module.exports = {
components: './dist/my-library.js',
outputPath: './dist/playroom'
};
|
@chris-dura Hard to debug this from my side. Though in your situation I’d create a react app & “install” your UI Kit there & see which bundle works with the React app. That bundle which works with the React app should work with Playroom as well. |
Well, I think I've reached an impasse in getting the Web Components bundle into Playroom directly... I have a sense that there's just some Webpack config magic I'm missing 🧙 ... and since I hate configuring webpack (and have to move on to other things), I'm gonna cross my fingers and hope someone else solves it 😬 I've put up an example minimal repo, if anyone stumbles on this thread and wants to take a crack at it: In that same example repo, I also had qualified success using the React output target from StencilJS. However, the autocomplete in Playroom seems to be way out of whack, because while it does seem to display the custom element Props I've defined (eg, I'm just loading in the compiled bundle to Playroom's |
I can get Playroom to work with Stencil components by adding
where I don't get props autocompletion but components do get rendered correctly. Haven't tried with a React wrapper yet. |
I’ve tried everything to get this to work, and I’m kind of confused about something with the webpackConfig. I think everything is correct. Styles are coming up in Playroom for me, but it’s a blank page. I keep seeing “ReferenceError h is not defined.” Even if I remove everything except for the most basic My main question here is, if I set Anyone able to point me in the right direction? I really wish I could see an example configuration where playroom is used with Stencil just using Stencil’s dist output. I also thought that it could be some kind of messed up dependency causing the problem, or perhaps the configs for storybook are breaking it? So many questions, but I haven’t found any solid implementation examples thus far. We use the monorepo structure from Ionic, but we have the storybook and playroom stuff inside of the core directory instead of on the root of the monorepo. Also, we separate out our CSS so it is usable on its own as a massive CSS file for people who do not wish to use the web components. |
Ive started working on a PR to submit that would enable web components support if that is something the Seek folks are interested in. My teammate at work has hacked it together locally and we've gotten playroom up and running in our design system that is entirely web components. The approach he used was that the components.js file that is designed to export react components can just export nothing.
but, import es6 web components alongside
just that alone takes care of the web components being able to be loaded and work in playroom, so the only step that needs to get handled is the hints stuff. Currently we are completely rewriting (via super hacky build scripts at the moment) the internal My PR, if i can get it working, can go either of two possible implementation patterns. 1. Expose the componentHints as a config option 2. Expose a config option to pass a file location that is assumed to be one of the different formats for web component analyzers Having chatted with a few open-wc members and contributors in the past, the Considering that background, I think my PR will just expose the hints object as a config object or function if that is agreeable to Seek folks. It'll be a manual step, but since the format of that hints object is already somewhat standardized, it can be typed and externalized so that devs know they are producing the right format when they use whatever tools they want to during build steps/scripts to generate hints that dont come from react tooling. Thoughts? |
I'm not a Seek folk, but as a user, this approach may be more flexible, instead of relying on external analyzers with questionable roadmaps 🤷 |
It'd be really great to get this working with native Web Components. Or even, in particular, StencilJS uses TypeScript and is JSX "enabled", at least on some level. Stencil can also output to React components.
Is it possible that this project could be made to support components written in other frameworks, or other JSX-enabled syntaxes?
If it is possible, at a high-level, what would we have to do to make a compatible input for Playroom?
The text was updated successfully, but these errors were encountered: