BrunnerLivio
commented
4 years ago 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. In our case this looks something like this:
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 mode attribute to e.g. the root body element
<body mode="dark">
...In order to integrate it with the Playroom, I simply created a src/themes/index.ts file which contains the following code. This file needs to be configured as well in the Playroom config (see above). Basically this file will provide all the possible theming names.
export const lightTheme = "light";
export const darkTheme = "dark";and the FrameComponent.js of Playroom can then load the theme via the given strings.
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
chris-dura
gmlnchv
GLoganDR
michaelwarren1106
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?