fela
fela copied to clipboard
[Feature] Add bindings for solid-js
solid-js has grown a lot lately with 23k+ starts on GitHub, I think it deserve fela bindings at this point.
If someone can't wait for real solid bindnings this stupid approach seems to get the basics working:
// felaSetup.js
import {createRenderer} from 'fela';
import {render} from 'fela-dom';
import {createContext, useContext} from 'solid-js';
import webPreset from 'fela-preset-web';
felaRenderer = createRenderer({plugins: [...webPreset]});
FelaContext = createContext();
render(felaRenderer); // kick of rendering (includes automatic subscription)
export const FelaProvider = (props) => {
return (
<FelaContext.Provider value={felaRenderer}>
{props.children}
</FelaContext.Provider>
)
};
export const useFela = (props) => {
const renderer = useContext(FelaContext);
const css = (ruleFunction) => {
return renderer.renderRule(ruleFunction, props);
};
return {css}
};
// App.jsx
import {FelaProvider, useFela} from './felaSetup.js'
const App = (props) => {
return (
<FelaProvider>
<MyComp />
</FelaProvider>
)
}
const rule = ({fontSize}) => ({
color: 'red',
fontSize: fontSize + 'pt',
})
const MyComp = ({fontSize}) => {
const { css } = useFela({ fontSize })
return <div className={css(rule)}>Hello World</div>
}
(Note: I haven't tested this code because I use Fela in a different way but the concept above worked for me)