Break (some) components out into separately importable React components #26
Comments
|
On a side note, I've also been working upstream on getting a zmq prebuilt available in JustinTulloss/zeromq.node#486. |
|
Guess I should say it would be a collection of |
|
Sounds like a good idea. How can I help?
One way to decouple them from Flux is to replace instances of |
|
Over the last few days I ended up making some of these components, including a few dedicated to just the display data transformations: After realizing how awkward transformime is with React for non-HTML mimetypes, I created react-transformime. The interface is a bit different, though here's how I've started using it: import {
richestMimetype,
displayOrder, // Immutable.List of mimetypes
transforms, // set of default mimetype -> React.Component in an Immutable.Map
} from 'transformime-react';
import Immutable from 'immutable';
const bundle = new Immutable.Map({'text/html': '<b>woo</b>'});
const mimetype = richestMimetype(bundle, displayOrder, transforms);
const Transform = transforms.get(mimetype);
return <Transform data={bundle.get(mimetype)} />;This is simpler if you use the default transforms and display order as well: import { richestMimetype, transforms } from 'transformime-react';
import Immutable from 'immutable';
const bundle = new Immutable.Map({'text/html': '<b>woo</b>'});
const mimetype = richestMimetype(bundle);
const Transform = transforms.get(mimetype);
return <Transform data={bundle.get(mimetype)} />;Viewed as a whole, this is used within composition, a WIP Electron app of the notebook. I'm definitely interested in your opinions (and contributions) to the API for |
Coupling with Immutable I think is a fine choice within this ecosystem of components. I've only worked with Redux and RxJS on React components, so I have no idea or opinion on how to handle abstracting around stores. The editor part may be the harder one that you're outlining. As it stands, I've started using CodeMirror within composition even though I'd much rather be using the Atom API. |
|
This made me think more about if we should provide a All the representationsimport React from 'react';
import Immutable from 'immutable';
import { transforms } from 'transformime-react';
export default class MimeBundle extends React.Component {
static displayName = 'MimeBundle'
static propTypes = {
bundle: React.PropTypes.instanceOf(Immutable.Map).isRequired,
transforms: React.PropTypes.instanceOf(Immutable.Map),
}
static defaultProps = {
transforms,
}
render() {
return (
<div>
{
this.props.bundle.map((data, mimetype) => {
const Transform = this.props.transforms.get(mimetype);
return <Transform key={mimetype} data={data} />;
}).toArray()
}
</div>
);
}
}Only the richestimport React from 'react';
import Immutable from 'immutable';
import { richestMimetype, transforms, displayOrder } from 'transformime-react';
export default class RichestMime extends React.Component {
static displayName = 'RichestMime'
static propTypes = {
bundle: React.PropTypes.instanceOf(Immutable.Map).isRequired,
displayOrder: React.PropTypes.instanceOf(Immutable.List),
transforms: React.PropTypes.instanceOf(Immutable.Map),
}
static defaultProps = {
transforms,
displayOrder,
}
render() {
const mimetype = richestMimetype(
this.props.bundle,
this.props.displayOrder,
this.props.transforms
);
const Transform = this.props.transforms.get(mimetype);
const data = this.props.bundle.get(mimetype);
return <Transform key={mimetype} data={data} />;
}
}Which, while we could include those, I realize this also means we could make neat ones that let you toggle through the mimetypes. Can't include that one since it would have interactive components. |
|
I've also looked into whether it's possible to break out the Nice work on adapting transformime to React 👍 I'd like to run composition to see what you're talking about but I keep running into the same Babel error: I understand that presets is a Babel 6 feature, but I definitely have Babel 6 installed locally and I've removed any global installations. Any ideas? |
|
I wonder if that's an Let me nuke my own dev environment and see what issues I pull up. |
|
Totally reproducible after I nuked my |
|
Alright, try pulling the latest and see what happens. Sorry about that! I actually noticed some new babel plugin versions come out while I was setting up tests earlier. |
|
@rgbkrk I'm gonna close this |
|
Sounds good, it's in a separate state now which is more about adopting other components. |
I'd like to use and test these components in Electron and other environments. Not all apply since they rely on Atom's editor, quite a few do though. I'm happy to extract them with git history here within jupyter or over in nteract. Only suggesting nteract because I'm not sure if folks in Jupyter are sold on the idea of React, Immutable, and Redux. I am though, and fully invested in driving this forward.
What do you think @gnestor?
The text was updated successfully, but these errors were encountered: