fela icon indicating copy to clipboard operation
fela copied to clipboard

[Feature] Add bindings for solid-js

Open oSethoum opened this issue 3 years ago • 1 comments

solid-js has grown a lot lately with 23k+ starts on GitHub, I think it deserve fela bindings at this point.

oSethoum avatar Dec 07 '22 20:12 oSethoum

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)

Cottin avatar Feb 26 '23 17:02 Cottin