Skip to content
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

[Feature] Add bindings for solid-js #912

Open
oSethoum opened this issue Dec 7, 2022 · 1 comment
Open

[Feature] Add bindings for solid-js #912

oSethoum opened this issue Dec 7, 2022 · 1 comment

Comments

@oSethoum
Copy link

oSethoum commented Dec 7, 2022

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

@Cottin
Copy link

Cottin commented Feb 26, 2023

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants