react-cosmos / react-cosmos Goto Github PK
View Code? Open in Web Editor NEWSandbox for developing and testing UI components in isolation
Home Page: https://reactcosmos.org
License: MIT License
Sandbox for developing and testing UI components in isolation
Home Page: https://reactcosmos.org
License: MIT License
The component playground will not find the components and fixtures if they are not at the root of the project
As a developer
I want to change props other than <dataUrl> on my component
And not fire new requests
And leave my data untouched
So that my component doesn't go through a 'loading' cycle.
Given I have a component
And it has the <dataUrl> prop set to <foo.com>
And I render the component
And it fetches data from <foo.com>
When I call <setProps> on the component
And pass it <dataUrl> to be <foo.com>
Then no requests are made to <foo.com>
And <state.data> is untouched.
Remove the concept of initialData
.
getInitialState
heregetInitialState
heredataUrl
state.data
is left untouched when receiving the same dataUrl
In this way you have 100% encapsuled components (CSS+HTML+JS in a single JS file). Take a look at this lib here: https://github.com/hackhat/smart-css
When project start to grow it became difficult to keep components in one folder, now to use cosmos I have to keep structure flat which is frustrating.
I'm trying cosmos and I'm having the following problem:
Uncaught TypeError: Cannot read property '...' of undefined
Where "..." is always one of the props of the components I'm trying to render (I've tried a couple).
Some info:
✗ node -v
v0.10.36
✗ npm ls react
[email protected] /Users/jm/p/ui-components
└── [email protected]
As a developer
I need a way to re-fetch data from the server
So that I can get any updated data.
The DataFetch mixin will expose a public refresh method.
Rename the resetData method to refreshData
.
I want Cosmos to not use globals because globals are bad, mkay?
The Cosmos module can be plugged in anywhere.
Install jQuery as a dependency and add it to the list of dependencies to the Cosmos module.
npm install --dev jquery
Moved to: https://github.com/skidding/react-minimal-router
If I nest a Person inside of a Movie, there are going to be 2 serial fetches (which discourages composition due to the perf hit).
Instead, if getDataUrl()
were a static function of the route (rather than an instance method of the props) it could be called recursively before the components are rendered so you can fetch all of the data you need to.
DataFetch.refreshState: false
This is no longer needed in React 0.12.x.
I am having trouble getting cosmos to run reliably. Perhaps some of the dependencies have been updated and that causes trouble? Or perhaps I'm doing something wrong, in which case we can investigate what in Cosmos or its documentation can be improved to avoid this in the future.
First a usability issue. Initially I forgot to export the React component under test as the default of the module. I got some error about type.toUpperCase
not being a function. It'd be nicer if this failure case was detected and the error can be more informative, i.e. failed to find component in module, or whatever.
When actually running the system, I am getting a few more errors. After initial load I get one of these:
Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). Try rendering this component inside of a new top-level component which will hold the ref.
when I try to edit the fixture data in the browser window, I get a ton of these, I think one for every key press:
Uncaught Error: Invariant Violation: removeComponentAsRefFrom(...): Only a ReactOwner can have refs. This usually means that you're trying to remove a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). Try rendering this component inside of a new top-level component which will hold the ref.
probably due to the error the component doesn't update either.
When I edit the .jsx file with the component in it, I get the following message:
It appears that React Hot Loader isn't configured correctly. If you're using NPM, make sure your dependencies don't drag duplicate React distributions into their node_modules and that require("react") corresponds to the React instance you render your app with. If you're using a precompiled version of React, see https://github.com/gaearon/react-hot-loader/tree/master/docs#usage-with-external-react for integration instructions.
and the component UI does not update properly either. Only a full browser reload will reflect my edit.
It can be attached on the instance instead and the PersistState
can send it to children in the loadChild method. Cosmos functions are already aware of the componentLookup, so keeping it in props only makes them messier and not really serializable.
Edit: Can't attach on instance because before React.render returns the instance the children already try to render. Just doing some routine changes in this issue
Also add Jump to links to the top
We need to default to a single class
And right now passing a class to a component appends it
And composing classes is against our principles
className
instead of class
With Relay and the brave new world of colocated component query fragments, I was thinking Cosmos could get an interesting Relay extension.
Basically, for many/most Relay-ified components, a Cosmo fixture wouldn't be necessary. Instead you could wire it directly to your GraphQL endpoint and use live production data.
What would be fun/useful is if by default, Cosmo would load a random entity to populate the component. This would be a real-world stress test for components you're developing/tweaking.
Even cooler is if there was a button that would trigger a new fetch of a random entity. With that you could quickly toggle through live production data and see how your component responds to each. I'd want a list of each component that you'd loaded to maintained so you could quickly toggle back to previous entries as say you found errors in several of them and are cycling through the entities with errors fixing problems.
A stretch goal would be to add an autocomplete field to search (in some flexibly defined way) for entities to view. E.g. when developing a user profile widget, search for specific users by name.
Thoughts?
Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner
Just testing a simple component taken from the cosmos-example and I pulled out flux and the store leaving just the simple button.
Not responsibility of Cosmos, can be done outside if needed
This is useful even when no transition is involved and relies solely on Component state
To test some components, e.g. grid, it is necessary to be able to test their composition,
the code below worked for me for the 1st time, but not after I kicked in the editor.
I understand that there is a limitation in the current implementation, but are there any plans or ideas of supporting this?
// fixtures/row/row/default.js
var React = require('react');
var Cell = require('../../../components/row/cell.jsx');
module.exports = {
children: [
React.createElement(Cell, {
children: 'Col 1 Text',
key: 'col1'
}),
React.createElement(Cell, {
children: 'Col 2 Text',
key: 'col2'
}),
React.createElement(Cell, {
children: 'Col 3 Text',
key: 'col3'
})
]
};
This is as easy as setting devtool: 'eval'
in webpack config. I'm not sure if its possible to hide cosmos internals from being shown in the dev tools, for this I have asked a question on stackoverflow.
It's of no real use, and reusable components are outside the scope of the Cosmos project.
As a developer
I want to know when data has started being fetched
And I want to know when data has finished being fetched
So that I can react to these events.
Given I have a component
And it includes the DataFetch mixin
When data hasn't started yet to be fetched
Then <state.fetchingData> will be <false>.
Given I have a component
And it includes the DataFetch mixin
When data starts being fetched
Then <state.fetchingData> will be <true>.
Given I have a component
And it includes the DataFetch mixin
When data finished being fetched
Then <state.fetchingData> will be <false>.
Toggle an attribute on state whenever we start fetching data and whenever the request finishes.
I'm not sure if I'm suppose to ask this here but..
How do write fixtures for modules that export multiple components?
As a user
I want to leave a page
So that I can go elsewhere.
Given I have a component
And it has a pending data fetch request
When I am unmounted
Then the request will be canceled
And no error is thrown.
Aborting an AJAX request will cause the error callback to be fired. In that callback we set the isFetchingData
state key to false
. You can't call setState
in an unmounting cycle.
Therefore, we need to check that the component is still mounted in the error callback before setting state.
this.isMounted()
in the error callback./cc @skidding
In most clients you need more than reading data from API
You need to have helpers for sending data back to the server.
Helper for
Name: DataSend
XHR methods:
_postData(url, options, callback)
_putData(url, options, callback)
_patchData(url, options, callback)
_deleteData(url, options, callback)
_sendDataToServer(method, options, callback)
Note: all methods are private because it wouldn't make sense for a component to trigger a request on a different component
options
param:
data
– payloadheaders
– HTTP headers (optional)method
– HTTP method (specific method will set this implicitly)Remaning initialData
reference in https://github.com/skidding/cosmos/blob/d3543c5f94a86c1a8c14a0619524d6fe2a124b70/components/list.jsx#L14
It was already removed in #57
I need to dockerize cosmos, but I can't, because it only listens on localhost, not '0.0.0.0'.
What would be a preferred way to set port and host of the server? I am willing to work on this feature.
cosmos tries to load foo.jsx~
(note tilde) and then reports on it containing something with a file extension it cannot interpret. That's not a surprise as it's an Emacs editor dropping.
I'd be nice if Cosmos only tried to auto-load files that are valid extensions (.js
, .jsx
) in fixtures, and just ignored the other ones. Or alternatively if I had a way to configure it to ignore particular file patterns entirely, i.e. *~
.
Note that emacs creates a tilde file as soon as you start typing, and it was kind of surprising to see cosmos jump into action even though I hadn't saved yet. For a moment I was "how does it even know? is hot loader that magical?" until I realized what was going on. :)
The old solutions was peerDependency, but it seems a new install suggestion for react, react-hot-loader, etc
Uncaught TypeError: Cannot read property 'split' of null
I'm trying to overload the loaders as follows:
module.exports.webpack = function (webpackConfig) {
webpackConfig.module.loaders = [
{
test : /\.scss$/,
loader : 'style!css?module&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass'
},
{
test : /\.jsx?$/,
loaders : [ 'react-hot', 'babel?stage=0&optional=runtime' ],
exclude : /node_modules/
},
{
test : /\.jpe?g$|\.gif$|\.png$|\.svg$|\.eot$|\.woff$|\.woff2$|\.ttf$/,
loader : 'file'
},
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }
];
webpackConfig.postcss = [
require('autoprefixer-core')
];
return webpackConfig;
};
When I comment out the scss
loader part, it compiles, but will complain about import styles from './stuff.scss';
statements or rather the contents of the file needing their own loader.
I tried setting the resolveLoader.root
to my own node_modules
folder, tried installing the loaders inside node_modules/cosmos-js
, but nothing worked, it's hanging in an infinite loop somehow.
Edit
Reducing this further to:
module.exports.webpack = function (webpackConfig) {
webpackConfig.module.loaders.push({
test : /\.scss$/,
loader : 'style!css!sass'
});
return webpackConfig;
};
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.