Break out react bindings for codemirror <-> peer-star-app into a separate npm module

[jimpick]

It would be nice to figure out how to build re-usable UI components that include the code needed to bind to peer-star-app collaborations.

The codemirror editor used in peer-pad is fairly self-contained, and has working bindings. I think it's a good candidate to break out into a re-usable component.

[pgte]

I agree, go for it! :)

[jimpick]

I need to review the current best practices for distributing react components. Can anybody think of a good modern example to pattern off of?

[pgte]

/cc @satazor

[satazor]

• Write your code using import & export (ES modules)
• Use babel to compile the src code so that JSX is transformed to JavaScript (do not transform anything else)
  • Other transformations are up to the app to do; CRA v2 already compiles all your node modules

Will you ship styles (CSS)?

[jimpick]

I believe codemirror has a CSS file that comes along with it, so we'd have to figure out how to ship that along with it ... because it's wrapping a third-party component that isn't react based, it's a perhaps a more challenging starting problem than if we just had a pure react component.

[satazor]

Alright. For reusable modules I usually don’t include the styles implicitly but rather document which file needs to be included. Another option is to explicitly import it and document that a css loader (in case of webpack) or similar needs to be configured in the app.

[parkan]

@satazor would a CSS module make sense here? it's a bit of a weird case where it sort of should be separate from the parent styling conceptually, but not to the extent of using inline CSS

[satazor]

Yes we can indeed generate a CSS module, that is, a CSS file where selectors are hashed based on its contents. The question is how to compile the JS file in such a way that the selectors mappings are correctly included in the build. I haven’t done this yet but should be fairly easy with webpack’s css-loader.