Rollup-plugin-react-sfc NPM

a rollup plugin for react sfcs

NPM: http://npm.im/rollup-plugin-react-sfc

⚠️ THIS PACKAGE IS JUST A PROOF OF CONCEPT. IT WORKS ONLY ON TEST CASES SHOWN IN THE REPO.

usage

take a rollup react app (try it out in this example)

npm i -D rollup-plugin-react-sfc

FOR NOW - make sure you have styled-jsx setup. We have a hard dependency on styled-jsx to do css-in-js for the time being. It is tricky to set up - see https://github.com/sw-yx/rollup-react-boilerplate for how I did it. It's super janky right now, sorry!!

// example rollup.config.js
import SFC from 'rollup-plugin-react-sfc'
export default () => {
  //...
  plugins: [
  // 	babel({
  // 		presets: [
  // 			'react-app',
  // 		],
  // 		exclude: 'node_modules/**',
  // 		runtimeHelpers: true,
  // 	}),
    // plugin(/* options */)
    SFC({
      showComponentDisplayName: true
    })
  ]
}

Features implemented

uses react-sfc properly
set displayName based on fileName?

TODO:

static CSS export (most important!)
it does not properly work with styled-jsx in rollup - need SUPER hacky shit to work (see boilerplate's index.html)
useEffect dependency tracking
nothing graphql related yet
optional css no-op function for syntax highlighting in JS
$value shorthand eg $value
$value generalized eg $style