Dev environment for building scalable, high-quality user interfaces

Overview

Cosmos

React Cosmos

npm version CircleCI Status Twitter Slack PRs Welcome

A dev environment for building scalable, high-quality user interfaces.

  • Visual TDD. Develop one component at a time. Isolate the UI you're working on and iterate quickly. Reloading your whole app on every change is slowing you down!
  • Component library. Bookmark component states, from blank states to edge cases. Your component library keeps you organized and provides a solid foundation of test cases.
  • Open platform. React Cosmos can be used in powerful ways. Including snapshot and visual regression testing, as well as custom integrations tailored to your needs.

👩‍🚀 Live demo · 📜 Documentation · ❤️ Sponsor

React Cosmos

🤔 Why React Cosmos?

React Cosmos

  • Makes developers more productive
  • Leads to high-quality, reusable UI components
  • Makes it easy to share component libraries
  • Helps with automated testing

React Cosmos is

  • An isolated component environment
  • Simple, detail-oriented and battle-tested
  • The result of over 5 years of fine-tuning
  • React-only
  • Compatible with other bundlers (aside from webpack)

React Cosmos is not

Many other similar tools have emerged since React Cosmos was created. Choose wisely based on your unique needs and personal taste.

A Brief History of React Cosmos

🎞 Credits

Hi there. I'm Ovidiu, the core maintainer of React Cosmos. I spend ridiculous amounts of time perfecting this project because I love building user interfaces and making useful things.

React Cosmos is licensed as MIT and will always be free. If you want to support me, however, become a Sponsor and ensure this journey continues!

Special thanks to

React Cosmos is still alive because of you!

🌤

Issues
  • Redesign filesystem API

    Redesign filesystem API

    What's up?

    Now that we made the proxy API great again, it's time to target our next victim. 😈

    The README starts with this proposition:

    Cosmos scans your project for components and enables you to...

    Indeed Cosmos scans your project for components, but the API is terrible. Namely, componentPaths, fixturePaths, getComponentName are rigid and confusing. These options work if A. your project structure is perfectly organized or B. you know how Cosmos works inside out. Not a #PainlessOnboarding!

    Mkay, tell me more...

    I've worked with several large codebases lately and I've reached the conclusion that the filesystem API should primarily focus on giving users full control over which components to add to Cosmos where to import them from. This is not a matter of improving documentation, but making the API obvious and flexible in the first place.

    Note: My plan is to support the existing options indefinitely and add complementary ones on top. This only affects an isolated part of the project (react-cosmos-voyager) so it won't add much maintenance cost.

    The new API is meant to accommodate any level of control, from manually targeting and naming fixtures to letting Cosmos guess where your components are.

    Level 0: Control freak

    Manually target component and fixture files. Supports any file structure and allows manually naming components and fixtures.

    // cosmos.config.js
    {
      components: {
        Foo: './src/components/Foo',
        Bar: './src/components/Foo'
      },
      fixtures: {
        Foo: {
          one: './src/components/Foo/__fixtures__/one',
          two: './src/components/Foo/__fixtures__/two'
        },
        Bar: {
          one: './src/components/Bar/__fixtures__/one',
        }
      }
    }
    

    Users with intricate codebases can automate on top of this by using glob and similar tools.

    Level 1: I did it my way

    Manually target component files, place fixtures by convention. Supports any component file structure and allows manually naming components.

    // cosmos.config.js
    {
      components: {
        Foo: './src/components/Foo',
        Bar: './src/components/Foo'
      }
    }
    

    This will work:

    components/Foo/index.js
    components/Foo/__fixtures__/one.js
    components/Foo/__fixtures__/two.js
    

    This will also work:

    components/Foo.js
    components/__fixtures__/Foo/one.js
    components/__fixtures__/Foo/two.js
    

    A nice feature of Level 0 and 1 is the ability to whitelist which components to load, instead of adding tons of ignore rules.

    Level 0 and 1 can be implemented and shipped alone. The following levels are here to create a big picture and should be implemented separately to avoid monster PRs.

    Level 2: Let it be

    Manually target component directories, place components and fixtures by convention. Supports multiple component directories (eg. components and containers).

    // cosmos.config.js
    {
      componentDirs: ['./src/components']
    }
    

    This works similar to the existing componentPaths, but should do fewer things. No more fixturePaths or getComponentName. There is Level 0 and Level 1 for that level of customization.

    Level 3: How did you do that?

    // cosmos.config.js
    // *crickets*
    

    Try our best at detecting the component dirs based on popular patterns. Searching for ./components, ./src/components, etc. If it doesn't work out we ask the user to define componentDirs and go back to Level 2.

    Notes:

    • fixturesDir will continue to work for the new API, so the __fixtures__ convention can be customized
    • I will not be working on this due to other priorities, so anyone can pick it up
    • v2 will be released without this, but it's meant to be backwards compatible anyway

    What do you think?

    @flaviusone @NiGhTTraX @ovidiubute @tkjone @xavcz @amrdraz @jlc467 @maciej-ka This is a draft so I'd love to hear your feedback!

    opened by skidding 49
  • Responsive Cosmos

    Responsive Cosmos

    As far as I can see, Cosmos really struggles to be useful when working with responsive layouts / media queries. In Chrome, the only way I can get a media query to trigger is to go full screen and make my window small. Using the device toolbar in Dev Tools doesn't work, even in full screen mode.

    Does anyone have any better 'no work required' solutions? I'd love to delete this PR!

    I've whipped up a very quick proof of concept PR for adding responsive development tools to Cosmos:

    responsivecosmos

    The UX is very much a placeholder, but the rough idea is that users can define their own list of dimensions and labels (perhaps via their cosmos.config), which we show on the top. I'll also add support for an adhoc dimension option directly in the UX. You can trigger the responsive layout directly from a fixture with a specific dimension, or you can toggle it with the new responsive button next to the full screen button. I'd also like to add support for setting the background color, but perhaps that's better done in a proxy?

    If a dimension is too big to fit in your window, we faithfully reproduce it and scale the contents, so you can still see exactly what your content might look like on e.g. a 1080p screen.

    Credits due to https://docs.catalog.style/specimens/react#display-all-defined-screen-sizes-1 where I got some of the ideas (and CSS!) for this.

    This originally started off as a proxy, but a brief chat with @skidding a couple weeks ago suggested this will be better both in terms of the development side and the user experience side if it's a core feature.

    However, I need some help from @skidding please. If you load a fixture that has props, and change the screen size, it crashes. Hopefully it's something obvious, any thoughts?

    I didn't want to put too much effort in yet until there's no 'major' blockers in terms of getting the cosmos fundamentals to work with this model.

    opened by maxsalven 30
  • Cosmos v3 BETA TESTING thread

    Cosmos v3 BETA TESTING thread

    What's up?

    Cosmos v3 beta is out, including the new filesystem API and Playground Tree View.

    Always install [email protected] to get the latest beta

    Mkay, tell me more...

    To include in the public release:

    • @skidding ~~Add exclude option to complement new fileMatch option for matching fixture files. I deliberately chose a different name than the previous ignore to avoid confusion. Start here.~~ #479
    • @maxsalven ~~Persisted Tree View~~ #482
    • @skidding ~~Add React Error Handling in Loader~~ #481
    • @skidding ~~Surface rootPath as projectKey in Playground~~ #485 (complements #471)
    • @maxsalven ~~Support for fixture nesting in tree view (right now only component names are expanded)~~ #483
    • @Timer ~~Add react-error-overlay~~ #484
    • @skidding ~~Capture when Loader iframe points to missing index.html and show Playground message with instructions (one of the most common onboarding issues) + Update CP onboarding + Loading bundle message~~ #498
    • @skidding ~~Update README to reflect new fixture format and config~~ #501
    • @skidding ~~Rename react-cosmos-webpack to react-cosmos~~ #501

    Please post any feedback or update in this thread. I will keep it open until we make v3 official. Thanks!

    opened by skidding 24
  • No documentation on how to use the mount method to group multiple fixture inside the UI

    No documentation on how to use the mount method to group multiple fixture inside the UI

    What's up?

    There is no documentation on how to load multiple fixture inside a group when using react-cosmos-loader's mount() method

    Mkay, tell me more...

    I'm using react-cosmos with Fusebox and have a custom implementation so I have to use the mount() method inside the react-cosmos-loader package.

    Considering the following code

    const { mount } = require("react-cosmos-loader");
    const someFixture = require("./some-fixture.fixture");
    
    mount({
      proxies: [],
      fixtures: {
        "test": someFixture
      }
    });
    

    Generate this:

    image

    But how can I have multiple fixture under that group using the API from mount() ???

    unclear 
    opened by RPDeshaies 20
  • Apollo Client finer integration

    Apollo Client finer integration

    Fixes #445

    screencast

    This PR adds the ability to:

    • change locally the Apollo cache to mocks responses and re-run queries / mutations based on this cache
    • pass your own link (ex: HttpLink) to connect to a GraphQL API and get real responses

    The Apollo Proxy listens to cache changes (thanks to the Apollo DevTools hook provided in Apollo Client 😇) and sends it to the fixture editor under the key apollo.

    This makes the playground reloads and the Apollo Proxy re-instantiate a client with a restored cache from the fixture: this means you can also add the result of cache.extract() manually to your fixture. I'm using a method as similar as the one recommended for server-side rendering 💃

    It may not be the optimal solution to mock components fetching data through React Apollo, but that's a first step forward!

    If people really want to mock with a specific result, we may provide a client like the one shown in this article?

    What are your thoughts? cc @maxsalven @dan-weaver

    Remaining:

    • [x] update README if we believe it's a valid step forward 🌮
    • [x] test it in a way that makes sense (not like now)
    opened by xavxyz 19
  • [WIP] Component page

    [WIP] Component page

    Component page

    • [X] Allow component to be selectable in nav
    • [X] Display a component page
    • [ ] Create frameset for each fixture
    • [ ] Insert different components into framesets
    • [ ] Display legend

    partially closes: https://github.com/react-cosmos/react-cosmos/issues/314

    opened by maciej-ka 19
  • Add `react-error-overlay`

    Add `react-error-overlay`

    I'm going to bed, but this should get you started.

    If you'd like, you can tell me what adjustments to make and I'll see what I can do. 😄

    I'm not familiar with react-cosmos, so I added build and runtime error reporting to where I felt it made most sense.

    http://g.recordit.co/LGb1qX9yJw.gif

    Enables all react-error-overlay features: runtime errors, click-to-open source, and build time errors.

    opened by Timer 18
  • Test API

    Test API

    opened by skidding 18
  • 'unexpected token export' w/ cosmos@next + TS — bug

    'unexpected token export' w/ [email protected] + TS — bug

    What's wrong?

    When trying to get started I get this error:

    
    ERROR in ./app/expenses/components/Category/index.fixture.tsx 3:16
    Module parse failed: Unexpected token (3:16)
    File was processed with these loaders:
     * ./node_modules/ts-loader/index.js
    You may need an additional loader to handle the result of these loaders.
    | import Category from '.';
    | import ReduxStub from "../../../../tests/ReduxStub";
    > export default (<ReduxStub>
    |     <Category />
    |   </ReduxStub>);
     @ ./node_modules/react-cosmos/dist/plugins/webpack/client/userDeps.js 7:56-150
     @ ./node_modules/react-cosmos/dist/plugins/webpack/client/index.js
     @ multi ./node_modules/react-cosmos/dist/domRenderer/reactDevtoolsHook.js ./node_modules/@skidding/webpack-hot-middleware/client.js?reload=true&overlay=false ./node_modules/react-cosmos/dist/plugins/webpack/client/index.js
    

    This seems to be because the added ts-loader is incorrectly configured — or perhaps the include path of the loader.

    Steps to reproduce

    1. Create a tsx file in ./app/.../here, and a redux stub provider outside of the ./app in ./tests
    2. Reference the stubbed redux provider from the component.fixture.tsx
    3. See the above error

    Screenshots

    Screenshot 2019-07-17 at 21 54 01 Screenshot 2019-07-17 at 21 54 27
    opened by haf 18
  • Separate fixture props

    Separate fixture props

    Issue: https://github.com/react-cosmos/react-cosmos/issues/217

    With this PR, fixture props are expected to be attributes of fixture.props instead of the the root-level fixture.

    Also in this PR: local-state example shows how to use props in a fixture.

    To test backwards compatibility, I copied the local-state example and put props at the root-level, then added a FixFixturePropsProxy to cosmos config to confirm the props come through. Before merging, I imagine this example will be deleted and the proxy extracted into some kind of markdown documentation in the release notes.

    Haven't looked into codemods yet, but figure that can come later.

    opened by jlc467 18
  • Typescript compilation errors trigger infinite reloads

    Typescript compilation errors trigger infinite reloads

    What's wrong?

    If strict Typescript checks are on while editing code, any TypeScript compilation errors will cause a fixture to reload indefinitely until compilation errors are fixed or until the browser tab is closed. The infinite reloading dramatically increases CPU usage by the browser and may cause crashes.

    Steps to reproduce

    See this test repo. Instructions, as well as a discussion of the problem and research, are in the README.

    Essentially:

    • Set up a project for React Cosmos that uses strict TypeScript type checking.
    • While viewing React Cosmos fixtures in a browser, cause a TypeScript compilation error in a file and save, triggering HMR.
    • Watch as the test fixture starts reloading until stopped.

    User info

    See the test repo for specifics on versions.

    • React Cosmos 5.6.4
    • Webpack 5.58.2
    • TS Loader 9.2.6
    • TypeScript 4.4.4

    Additional context

    As discussed previously in #1315, I use strict type checking while working in React Cosmos. After working through performance issues, this is the only sore spot. The test repo linked above includes my research in tracking down the cause of the reloads to @skidding/webpack-hot-middleware (webpack-contrib/webpack-hot-middleware), specifically the reload option that is hardcoded to true. This causes React Cosmos to operate more like dev-server than only-dev-server for HMR, reloading on errors and when there are no module updates.

    I'll often fire up React Cosmos and then edit files to see live changes. Along the way, I'll commonly reorganize multiple files and end up creating many failed webpack builds from TypeScript compilation errors. After five minutes, I'll realize there's an issue with React Cosmos because my MacBook's fan will start getting louder and louder. I'll typically need to close the browser tab in order to calm the CPU down.

    In plugins/webpack/webpackConfig/devServer.js:

    function getHotMiddlewareEntry() {
      var clientPath = require.resolve('@skidding/webpack-hot-middleware/client');
    
      return "".concat(clientPath, "?reload=true&overlay=false");
    }
    

    Changing reload=true to reload=false or removing it entirely will stop the frame from reloading when a TypeScript compilation error occurs.

    As the reloads occur, this HMR logging is printed in the browser console:

    agm 2021-10-17 at 1 28 39 AM
    [HMR] connected
    [HMR] Checking for updates on the server...
    Failed to load resource: the server responded with a status of 404 (Not Found)
    [HMR] Cannot find update (Full reload needed)
    [HMR] (Probably because of restarting the server)
    [HMR] Reloading page
    

    I hope my research above helps anyone else who has been stuck on this. It's not a show-stopper for me, but it's quite annoying. The reload=false workaround works well for me right now.

    For a full solution, I would suggest the addition of an option in cosmos.config.json for controlling the reload behavior of HMR. I'd like to know what others think. Cheers.

    opened by messman 0
  • How to use typescript paths within react-cosmos?

    How to use typescript paths within react-cosmos?

    What's wrong?

    I have defined paths within my tsconfig.json file that is not being translated within react-cosmos. How would I use relatie paths within cosmos?

    Additional context

    image

    tsconfig.json

    {
      "extends": "@nbm/tsconfig/module",
      "compilerOptions": {
        "baseUrl": "./",
        "plugins": [{ "transform": "@zerollup/ts-transform-paths" }],
        "typeRoots": ["index.d.ts", "node_modules/@types", "node_modules/@obp/types/index.d.ts"],
        "paths": {
          "@carbon-assign-fields/*": ["./src/*"]
        }
      }
    }
    
    opened by lecoqjacob 0
  • ignore a directory/filepath

    ignore a directory/filepath

    It would be spectacular if there was a config option to ignore fixture files, ie: "ignore": ["**/path/**"]

    opened by crobinson42 6
  • How to to use this with rollup?

    How to to use this with rollup?

    Hi, I wanted to use react-cosmos in my custom component library, I have a custom setup using Rollup, Esbuild and Typescript.

    opened by sidwebworks 1
  • Unhandled Rejection (ReferenceError): importScripts is not defined

    Unhandled Rejection (ReferenceError): importScripts is not defined

    What's wrong?

    Hot-reloads are not working due to build targeting webworker (See bottom for work-around) Saving the changes triggers the compilation and the frontend displays the following...

    Unhandled Rejection (ReferenceError): importScripts is not defined
    

    Screenshots

    Note: I edited the paths to say <path_to_dir> rather than the actual path on my machine

    image

    User info

    • Server terminal output
    [Cosmos] webpack build invalidated by src/components/Input/text.tsx
    webpack building...
    webpack built b434bee220e99f3b4027 in 2264ms
    assets by status 409 KiB [cached] 12 assets
    assets by status 6.28 MiB [emitted]
      assets by path *.js 6.09 MiB
        asset main.js 6.08 MiB [emitted] (name: main) 1 related asset
        asset main.fe846cf7478b08fca19b.hot-update.js 2.83 KiB [emitted] [immutable] [hmr] (name: main) 1 related asset
      asset favicon.svg 195 KiB [emitted]
      asset _renderer.html 631 bytes [emitted]
      asset main.fe846cf7478b08fca19b.hot-update.json 28 bytes [emitted] [immutable] [hmr]
    Entrypoint main 6.09 MiB (6.92 MiB) = main.js 6.08 MiB main.fe846cf7478b08fca19b.hot-update.js 2.83 KiB 3 auxiliary assets
    cached modules 5.64 MiB [cached] 678 modules
    runtime modules 22.4 KiB 12 modules
    javascript modules 2.53 KiB
      ./node_modules/react-cosmos/dist/plugins/webpack/client/userDeps.js 1.29 KiB [built]
      ./src/components/Input/text.tsx 1.25 KiB [built] [code generated]
    webpack 5.12.2 compiled successfully in 2264 ms
    
    • Browser console output: log file image

    • Cosmos version:

        "react-cosmos": "^5.6.2",`
    
    • Cosmos config: N/A (default)

    • If applicable: webpack version

        "webpack": "^5.12.2",
        "webpack-cli": "3",
        "webpack-dev-server": "^3.11.1"
    
    • If applicable: webpack config
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CopyWebpackPlugin = require('copy-webpack-plugin');
    const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
    const {DefinePlugin} = require('webpack');
    const path = require('path');
    
    module.exports = (env, argv) => {
        const mode = argv.mode || 'production';
        const IS_PROD = mode === 'production';
    
        return {
            context: __dirname,
            target: 'webworker',
            mode: mode,
            entry: './src/index.tsx',
            devServer: {
                historyApiFallback: true,
                host: '0.0.0.0',
            },
            output: {
                publicPath: '/',
                path: path.resolve(__dirname, 'build'),
                filename: 'bundle.js',
            },
            module: {
                rules: [
                    {
                        test: /\.tsx?$/,
                        loader: 'ts-loader',
                        options: {
                            transpileOnly: true,
                        },
                    },
                    {
                        test: /\.css$/i,
                        use: ['style-loader', 'css-loader'],
                    },
                    {
                        enforce: 'pre',
                        test: /\.js$/,
                        exclude: /node_modules/,
                        loader: 'source-map-loader',
                    },
                    {
                        test: /\.(png|jpe?g|gif|svg)$/i,
                        use: [
                            {
                                loader: 'file-loader',
                                options: {
                                    esModule: false,
                                },
                            },
                        ],
                    },
                    {
                        test: /\.(woff|woff2|eot|ttf|otf)$/i,
                        type: 'asset/resource',
                    },
                ],
            },
            plugins: [
                new DefinePlugin({
                    // some global varibles that all come from process.env.XXXXX
                }),
                new HtmlWebpackPlugin({
                    favicon: './src/assets/favicon.svg',
                    template: './src/index.html',
                    title: 'Irwin Studio',
                }),
                new CopyWebpackPlugin({patterns: [{from: './src/assets', to: 'assets'}]}),
                ...(IS_PROD ? [new UglifyJsPlugin()] : []),
            ],
            devtool: 'source-map',
            resolve: {
                extensions: ['.js', '.ts', '.tsx'],
            },
        };
    };
    

    Temporary Workaround

    For any others experiencing this issue - I have the following workaround (which I'm not a fan of, but anyhow...)

    // webpack.config.js
    const isCosmos = !!argv.cosmos;
    // ...
    target: isCosmos ? 'web' : 'webworker',
    

    And my script as follows

    "scripts": {
        "start:cosmos: "cosmos --cosmos",
    },
    

    I'm not a huge fan of this because now my build environment is different - but only for cosmos which is why I am sort of okay with this.

    Apologies

    This may be something that needs to be resolved purely in my own project or on Webpack's side so I do apologise if I am misunderstanding this.

    opened by lauchlan105 0
  • Restore optional peer dependencies (+ snowpack docs update)

    Restore optional peer dependencies (+ snowpack docs update)

    Issue

    Based on this issue conversation, peer dependencies used to exist in this project, but were removed in order to avoid warning messages that appeared for users installing it in projects where react (or webpack) wasn't a direct dependency, such as CRA.

    This is causing compatibility issues with snowpack's esinstall tool, which uses rollup to transform all modules in the project into esmodules. I haven't dug too deep into the exact reason, but when it encounters an undeclared dependency it seems to automatically bundle a copy of it into the module that requested it.

    The lack of peer dependencies also causes yarn to throw warnings when installing the package.

    Resolution

    This PR restores the correct peer dependencies back to the react-cosmos and react-cosmos-shared2 packages. They're marked as optional inside peerDependenciesMeta in order to avoid the warning scenario described earlier.

    I also updated the instructions for installing cosmos in a snowpack project, to bring it up to date with the latest versions of snowpack.

    This resolves #1320 and #1266.

    Notes / Open Questions

    I chose react/react-dom >= 16.8 and webpack >= 4 in order to loosely match the requirements from the docs, but maybe it would be better to set a cap, at least on the webpack version, to avoid issues arising from them releasing a new major version?

    Todo

    The snowpack demo project should probably be updated based on the changes to the install instructions too.

    opened by nderscore 4
  • Critical security vulnerability: xmlhttprequest-ssl

    Critical security vulnerability: xmlhttprequest-ssl

    What's wrong?

    On installing react-cosmos npm finds a critical vulnerability with xmlhttprequest-ssl. This dependency needs to be updated to >=1.6.1.

    Steps to reproduce

    1. Run npm install react-cosmos in the terminal in your project
    2. Run npm audit
    3. See:
    Screenshot 2021-05-25 at 16 13 36

    User info

    • Cosmos version: 5.6.2
    opened by sarahhayle 3
  • "[404] Not Found (/dist/cosmos.userdeps.proxy.js) " with snowpack v3.1.2

    What's wrong?

    I've just cloned https://github.com/react-cosmos/react-cosmos-snowpack and upgraded snowpack to latest (3.1.2). yarn start / yarn cosmos runs without error, but localhost:5000 stuck at "Waiting for renderer...", then snowpack logs:

    [17:33:41] [snowpack] File changed: src/cosmos.userdeps.js
    [17:33:48] [snowpack] [404] Not Found (/dist/cosmos.userdeps.proxy.js) (x2)
    

    It runs fine on snowpack v3.0.13.

    Steps to reproduce

    1. Clone https://github.com/react-cosmos/react-cosmos-snowpack
    2. Replace "snowpack": "^3.0.0" with "snowpack": "^3.1.2" in package.json
    3. yarn && yarn start
    4. yarn cosmos
    5. open localhost:5000 and page keeps showing "Waiting for renderer..."

    User info

    • Server terminal output
    yarn start
    yarn run v1.22.10
    $ snowpack dev
    [17:33:38] [snowpack] Server started in 12ms.
    [17:33:38] [snowpack] Local: http://localhost:8080
    [17:33:38] [snowpack] Network: http://192.168.10.167:8080
    [17:33:41] [snowpack] File changed: src/cosmos.userdeps.js
    [17:33:48] [snowpack] [404] Not Found (/dist/cosmos.userdeps.proxy.js) (x2)
    
    yarn cosmos
    yarn run v1.22.10
    $ /home/orcaxs/dev/react-cosmos-snowpack/node_modules/.bin/cosmos
    [Cosmos] Using cosmos config found at cosmos.config.json
    [Cosmos] Serving static files from public
    [Cosmos] See you at http://localhost:5000
    [Cosmos] Generated src/cosmos.userdeps.js
    
    • Browser console output index.cosmos.js:7 GET http://localhost:8080/dist/cosmos.userdeps.proxy.js net::ERR_ABORTED 404 (Not Found)
    • Cosmos version Seems both 5.6.0-alpha.6 and 5.6.1 have the same issue
    • Cosmos config
    {
      "staticPath": "public",
      "userDepsFilePath": "src/cosmos.userdeps.js",
      "experimentalRendererUrl": "http://localhost:8080/_renderer.html"
    }
    
    opened by OrcaXS 8
  • Lazy fixture importing

    Lazy fixture importing

    • [ ] Update fixture list with fixture names as fixture modules are imported.
    • [ ] Debug what happens on HMR in lazy mode.
    • [ ] Import fixtures statically in static exports.
    • [ ] Put dynamic importing under lazy config option.
    • [ ] Dynamically import decorators as well.
    • [ ] Decide on best name for FixtureList.
    • [x] Make name optional in FixtureId.
      • [ ] Fix selected fixture name in packages/react-cosmos-playground2/src/plugins/Root/RendererHeader.tsx.
      • [ ] Refactor packages/react-cosmos-playground2/src/plugins/FixtureTree/FixtureTree/MultiFixtureButton.tsx.
      • [ ] Test new case in packages/react-cosmos-playground2/src/plugins/RendererCore/isValidFixtureSelected.ts.

    Questions

    • [ ] As the user clicks on fixtures they are imported and thus "discovered" (names of multi fixtures are revealed). On HMR, how do we know which fixtures to keep discovered and which to invalidate? Maybe it's OK to invalidate all fixtures aside from the selected one. But the selected fixture also gets invalidated and re-imported, which a) causes to UI to flicker and b) might interfere with HMR.
    opened by skidding 0
  • Bumping next.js version to v10.0.6 breaks build

    Bumping next.js version to v10.0.6 breaks build

    What's wrong?

    After upgrading my app from next v10.0.5 to 10.0.6 webpack from next is not detected.

    Steps to reproduce

    1. Create next app with version 10.0.6
    2. Cosmos says that there is no webpack and the dependency needs to be installed (3. Doing so breaks the build due to some obscure loader chaining issue - but i think that installing an additional webpack dep should not be done anyways )

    Screenshots

    image

    User info

    image image

    Additional context

    I am using tailwindcss with the required loaders ( works with next 10.0.5 )

    opened by domano 13
Releases(v5.6.4)
  • v5.6.4(Oct 11, 2021)

  • v5.6.2(Mar 25, 2021)

  • v5.6.1(Mar 23, 2021)

    bd1b0ea2 Clean up React aliasing code (#1318) ffe17be8 Respect existing aliases for react and react-dom (#1317) 187ba329 Improve website typography (#1312) 439bd92f Update Snowpack docs (#1311)

    Source code(tar.gz)
    Source code(zip)
  • v5.6.0(Mar 4, 2021)

    1152b337 Document local Cosmos config schema (#1310) 7a452389 Update CTA (#1308) 74f6f2d8 Clarify project description (#1307) 3a028b2d Typo fix (#1306) ee0c9a40 Fix userDepsFile plugin activation (#1305) a35d6a6d Refactor userDepsFile plugin activation 08368028 Rename main branch (#1304) b2e32054 Brevity bd41ad34 Snowpack docs (#1303) 3eee4bd8 Expose DOM entry point (#1302) e05709da Use custom renderer URL in getFixtures2 (#1300) 39ba414e Add experimental Snowpack example (#1299) 45e9c63f Prevent infinite loop when renderer runs on different port (#1298) 84c8444f Fix link to nested decorators example (#1297) 189e384e Convert user modules index from CJS to ES (#1296) 9f8cdf33 Organize example source (#1294) 70f4f0a6 Unminify demo (#1292) 1dac45fa Upgrade react-plugin and other deps (#1291) f2feecb0 Improve wording 95c0e06f Add setting to override webpack output.filename template (#1290) c473dcfc Improve html-webpack-plugin type (#1288) 22a9a50b Add html-webpack-plugin 5 support (#1286) dbe83a74 Upgrade to webpack 5 and remove Node 8 support (#1284)

    Source code(tar.gz)
    Source code(zip)
  • v5.5.3(Dec 11, 2020)

    070aa185f3488845bb43402bd96ef9c2e8f4db80 Bump ini to 1.3.7 (#1281) 1552bbdd3459ad0405904a26208c478701e11273 Make the output.path undefined (#1280)

    Source code(tar.gz)
    Source code(zip)
  • v5.5.2(Dec 8, 2020)

    3a1880fe7aa6bb716d69e7692428ad8c0b2306fd Automatically detect Next.js babel-loader (#1278) 52ef3d16cbad56f7a1637e94adfd791cde8899fa Update troubleshooting docs with CRA 4+ workaround (#1277)

    Source code(tar.gz)
    Source code(zip)
  • v5.5.1(Oct 26, 2020)

  • v5.5.0(Sep 8, 2020)

    Twitter announcement with high-level updates

    12847a07405cda4b15c0c8f53f7fabd9372d959d Fix setting manual viewport (#1263) 42dd68576e413a0ce141b0432f5f1559f90bd1fc Fix fixture viewport resize (#1262) 1422d45f069ae1cc68463ea350b37caddc8595fb Fix website dc85a58615400b007d0807f2abaadf3a80efaeb2 Add responsive viewport drag handles (#1258) c3be60aab0c31e7fd2012bf4443fbafeb224f452 Add rotate viewport button (#1257) 4d3d59c04dddbfc0ef6ed588cded2a7bcf512599 Update default viewport options (#1256) 851474e496072c10e826e7b2bd4b8d674a985ff6 Add support for decimals in number input (#1255) be69bc2bde00a2ac89dafc599d814272d2a84c09 Fix verb form (#1254) 186dda99ac87a695bc0ce86d4ec7482533ab8ec2 Update booleanInputPlugin.zip d8d72ce43c01633d8923310ee94a3b12d0608c57 Disable plugins by default (#1253) 02842f2d44ac1334809c2c3f667fd966e2241a2d Fix collapsing of fixtures dirs at different levels (#1252) 5de9d7f9e7f49cbecc6be0c06a2645547d566b5e Redesign multi fixtures in tree view (#1251) 910a0b016ae596f3a982af1140d39895b6467f32 Enable using StrictMode in fixtures b810f8392f217794ffd2a995280996a2cb95e65e Fix line height in boolean input (#1250) 9124e9d5dacb0cd566d2bc70f06dfff2c8c2e0dd Add early docs for UI plugins (#1248) c964f38783db9f669a742c40c6af1aa8872173a5 Style plugin list (#1247) c280990bf92388c3827bbbf2dbf8855fae925393 Update Next.js instructions (#1246) d98cda5a0e8bcd25bb80d0785dffb522c6acb4ad Update Slack links (#1243) 92c283835524237742d241e9463fab1e690f6f58 Fix Slack badge 9d202e59a12dd0d83ffe2f196c11df12df8283fa Fix duplicate dependency (#1242) 59011fbd22d7eda6ebeb071fecc0b445c7789a6c Add UI plugin example (#1239) f95b1578002b45c68a942d1388a5c6fb283bbb96 Document useSelect (#1237) 9bc7aef9be118a345158eab7f8842b0c7d0604ab Auto register UI plugins (#1235) 84a5fe3d63ec8b13ae7fdd066617fc43ac01d1ed Make value inputs pluggable (#1231) 486c2664c5cf706d28ac40ae90048837f107debd Make control panel pluggable (#1230) c8f73cbf61087f6a1b691fea2443cb2179431388 Fix website CTA link (#1229) 3a3dbf2a2f9c7c4fff5befe1545f8f4bc571a087 Fixture bookmarks (#1228) 2c56d5939b3dcc42137c6f18d09312ee98e80316 Refactor useSelect to work with array options (#1227) 75f4bfb57efae7b8dae7e4370fbaad6afdfb9c4d useSelect control panel hook (#1225) 9bf34deea0b3ba9347d267acd7bba05a1f5870c5 Improve detection of index HtmlWebpackPlugin (#1226) 8cd43f624ff18a667693a78f9edd7ba57cbf0adc Add readme to main package (#1224) f5da7c4b14c7ce1b34e8cb665c655a9ae292a564 Clean up HTTPS code (#1223) e2f46d9ad0da507b49aac989553d6ff114ec8626 Tweak docs (#1222) d800a31b39d82c810f37a2ad0d25eed5308b830a Add HTTPS support (#1219) 58197d2b6c72b14fb3b59b4c002a3fcd1581a942 Expand troubleshooting docs (#1221)

    Source code(tar.gz)
    Source code(zip)
  • v5.4.0(Jun 11, 2020)

    495da8168d437040f6c43c4bdf929d013eed1ffd Add dedicated CRA and Next.js docs (#1216) ddb94b10fe2b1909560385cec3a1c61bba42f21a Guard against non-string file paths b018e3c9b077daa8e8c8d354885fb907ea0d35e3 Add collapse/expand all buttons to control panel (#1215) 438805dd09f18df8979be5d227a368d323e8b98d Set document title to project ID (#1214) 9e3cdee0fdf802f877f23536bcde8a4f7c2bb952 Make Node checks more resilient (#1213) 733e4992f276413a562b430cf406a5dfb0225229 Improve Cosmonaut (#1206)

    Source code(tar.gz)
    Source code(zip)
  • v5.3.0(May 19, 2020)

    efb97caa6296409cf04a3fc702776098b17a9cfd Remove folder icon and make tree view spacing consistent (#1205) b9da2b14611c70fc1c90ff89124ae213f587661b Auto reveal on fixture search click (#1204) 8700cc74928c9c39522d80b6a358691a55acedd5 Permit unserializable fixture state values (#1203) d0939a2cf94abf0de216715d2a2fdcc79d132ddd Fix icon positioning 67eaf55686faaf36bfbad25df003cf34b1d71988 Redesign expansion toggle (#1202) 9e89b3cfc3a1b277313a49324b124206337426fd Show "Ctrl" in key shortcuts on non-Mac devices (#1201) 34890858435f319069ac3cf5c0e32a1e66ce4f00 Add collapse/expand all buttons to fixture tree (#1200) 8e99a7b112f904c1d8f4c61bab8f34dba44a593a Display fixture search shortcuts (#1199) 12f96a65c8de522002d441f888d57cce58e11bea Auto-focus out-of-view selected fixture (#1197) 99b8d4e96aab3024f2ebdd7c56e7dc54c7074f09 Auto-focus selected fixture on load (#1196) 5e037ec01a6f1451cdfda1dcab9b79e44a4d2395 Improve search results UX (#1195)

    Source code(tar.gz)
    Source code(zip)
  • v5.2.1(Apr 30, 2020)

    5dc155df5950f840808ba039cfdc6d1126665f28 Fix auto fixture file detection in Create React App (#1194) 548e9b7e9ca9fbc66f3915861cf1ae9d60222b28 Mention staticPath for CRA and Next.js (#1193)

    Source code(tar.gz)
    Source code(zip)
  • v5.2.0(Apr 27, 2020)

    a78ac966ad95f029d26aab3d782d01cab7b4fa01 Remove unnecessary await f6ec4f08b0fbb4484717ffd3c959c5aff653016f Document getFixtures2 API (#1192) 7780dfe18082a3c1ab0f9bbae9a09de0346976b0 Include publicUrl in renderer URL returned by getFixtures2 (#1191) d33b70a6049ac0a79f466fc1a88c198a62e4e9be Update CI Node versions (#1188) fb2e0deb5f4f1fde48940ea9370d36d7f142bdfa Add Formidable logo to website (#1186) 4afbf238c0294ded8ef9abc9c67602ccf26a5a40 Embed GitHub counts in website (#1185) a787a32807d21d628f08b8e79d32b0ef1eda5fff Upgrade deps, including Prettier 2.0 (#1184) 5477ff9931adb8651809740bbe215c1899658fb9 Fix inverted fixture URLs (#1183) 39e6bfd399f2c1bc28eb0d255c7cd8ac094bc6f1 Fix infinite reload when static export strips .html extension (#1182) 9ac00380cb381afadd0ecf66604a0c0774b153f7 Upgrade deps (#1181) d3c72ae2b981d7d11ab6c9d2d6bf8ee62cf7622d Only collapse root tree view dirs (#1180) bc4a61d636ccedcb7769082a76c314877089b192 Only sort tree nodes alphabetically (#1179) a816aa3f0bc2f64e27f63494c3ff524fa6f72dee Fix fixtureTree entry point (#1177) 35fdd5108b1b6a0d4255cb171b82613d56231f49 Fix return value name (#1175) 90b890de6be7191cd383d37d062313d76cce9199 Create better API for getting fixture info (#1172)

    Source code(tar.gz)
    Source code(zip)
  • v5.1.0(Mar 18, 2020)

  • v5.0.11(Mar 14, 2020)

  • v5.0.10(Mar 14, 2020)

  • v5.0.9(Mar 5, 2020)

  • v5.0.8(Feb 15, 2020)

    5f5fbe50a658cd87f50b16ff6226d377d265d5a9 Collapse single child dirs recursively in fixture tree (#1164) 5e2c20996ccfcc87c6a46139d706ac7879ec00b2 Remove redundant folders in fixture list (case insensitive) (#1163)

    Source code(tar.gz)
    Source code(zip)
  • v5.0.7(Feb 12, 2020)

    16598a39adb2ffef48cf8d23e7f7bedde081b32b Remove redundant folders in fixture list (#1161) 335fccec15317ea03384108330dbdd8995693112 Add company logos on website (#1160) d093b47ada7654b45032770e761955985d60db2e Add UI-based fixture generation to roadmap (#1158) 691d5acadd5880c4af57b25e5289e695c8136163 Absorb Nav plugin (#1157) 247c85c83a77762323ff64b0817f2dae7c2a40d7 Clarify how to serve static exports from nested paths (#1156) e93fa5fb12f7ed19d1ef5f920e38ccd5be0c3629 Redesign close nav button (#1154) fa23090b8846f194f527555f30bb14519aec9605 Fix image border (#1152) 2df571d8983b0b04adfcc67f6ccdea8492ef6e6f Add feature highlights to website (#1151) c0dedd67cfbbb241068d248053f580f0c7bcdf23 Clear notification when renderer iframe location reverts (#1147)

    Source code(tar.gz)
    Source code(zip)
  • v5.0.6(Jan 15, 2020)

    7865beffe95dfcbf352239626a9cef46cd824d71 Add custom notification when trying to edit fixture in static export (#1146) 9ebdecca10a14c8d40fbbc8b46f35082f05d0f07 Improve search overlay style (#1143)

    Source code(tar.gz)
    Source code(zip)
  • v5.0.5(Jan 13, 2020)

  • v5.0.4(Jan 11, 2020)

  • v5.0.3(Jan 6, 2020)

  • v5.0.2(Jan 2, 2020)

    bac14fee6baf8ecb7f2b2ac8de83c1c5e7a3ba83 Embed live demo in website (#1124) 274ae5c0aa68afe142430e4d258f804c67506d55 Fix welcome screen text overflow in Firefox (#1127) de27ab1421f203355b57b90128066d6254a9065f Fix responsive dropdown in Safari (#1126) a809cf069188f032edaa7945d1ba692c88ddc796 Collapse solo named index items in tree view (#1125)

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0(Dec 28, 2019)

  • v5.0.1(Dec 20, 2019)

  • v4.8.0(Mar 26, 2019)

    Read the blog post: Cosmos 4.8 — the version that keeps on giving

    78fef2b4694b71677f8e77e893193c7ad8f7bf63 Edit fixture button (#942) cf7acd401b8f06d81ee6bef9975e17b265308183 Use containerQuerySelector renderer config in Cosmos Next (#941) 6aa7c73d4f43211b8966fb79c941c4e609067114 Remove deprecated link d5973a02f7653b55358255dc4a1c4e2a2b1d915c Add link to react-cosmos-redux c9117ef916f9e189ae59ccc020c659ba9b55f0b5 Remove leftover deps (#939) 9bcfc9ebc0119e11a933d6cd64231b6e1c62d163 Export fixture state types (#938) c07a59c2c362c4d86d899f52012a986f2b554d1e Viewport decorator (#937) 72c82486b80f89f56caaa2ae9e0b169de3ae1998 Refactor fixtureState and FixtureCapture (using hooks) (#936) cef03f9eb8438fd2c5641062b660401cd4e342e2 Convert shared2 and fixture packages to TypeScript (#935) 09b278ebdb519725cad0bab0d666f804b0346835 Remove plugin state mocking in Playground2 tests (#934) 561f792e97c5eec9aecd476b050056c937dbc005 feat: Enable multiple (synced) web renderer connections (#933) cfa328d1f25266df9c56d4596f2183badc56e947 Fix 404 state when fixture name doesn't match fixture path (#932) a71ca91bf8f182625e0375967a7bc2245bb4d86f Update release commands 1dc019011cb46177bc298a7c40bf8d83be1c0080 Add support for multiple (named) fixtures per file (#931) da3f2fe6bc975a7241a972d252f78d559238b3a5 Convert Playground2 to TypeScript (#929) 7413dd1a245863ecb85d2c29f5d45bd098f7e9ed docs: Adding Github Pages instructions to the Readme fixes #925 (#927) 1ed907f976235aed70a4a509806ab6f4f355c395 Update CRA config example (#926)

    Source code(tar.gz)
    Source code(zip)
  • v4.7.0(Jan 19, 2019)

    Read the blog post: Cosmos 4.7—the version that shows you the future

    3c95dc6989af58c38fb392de516301fd142bdb33 feat: Create welcome screen for Cosmos Next (#921) 03547b52e4c894d4046ad36e3db20e137c1c0fff feat: Improve handling of renderer errors (#918) 20f0d48781507d65ef0d488667b94e0dc91294e7 feat: Enable prop/state capture in JSX decorators (#917) 84d6f5ef11061145b50eafb64918c710cc676358 feat: Support suffixed JSX fixture files (#915) 2f7a58bf04b61e2a905e19703d72f96808777527 feat: Add blank states in Playground2 (#912) 3eee5a69329c6dc1091ed939d990181307e44835 feat: Style Playground2 (#910) 85424cbfbc940c5210d24b1ae01789c98b0d47c2 feat: JSX decorators (#909) dd1f0e58ab96389eb808dd3301670aff933830e6 feat: Convert Playground2 to (revamped) react-plugin (#904) 5f1dded8c2943ecd568f10a447ef54d2ec3e5e5c feat: Responsive preview in Playground2 (#902) 767c99f2897bb35e2772b0b9ff5d8ed2352567d6 feat: Collapsable fixture tree in Playground2 (#897) 3e425f5083a345f800dc054f5479336a330a5bc4 feat: Enable multiple remote renderers (#893) ba500ddd4aeeaf171c141547eee9d3fad890e2fc feat: Add Playground2 plugin for remote renderers (#890) 6def442b235fba8e6ef2be3005af343a94e21452 feat: Add full screen mode to Playground2 (#887) a834c556d2dc13c31ed883cb91bb567f3cf43ac5 feat: Create Playground2 router (#886) 7c110765da4ee948c2ea777dab683ea80fedc8b8 feat: Default to collapsed fixtures in tree view (#877) @tryggvigy f389fe0d93df01da192a7331f4d92799027d0be4 feat: Extend httpProxy options to allow more options (#875) @jpeyper eee6b001871042901c1993109a89a236639b84fe feat: Enable Apollo proxy cache configuration for mocked fixture (#878) @xavxyz 692659b3641738e84601b2e76b61cf2cc4861a0d feat: Hide props/state of HTML and Styled elements (#870) 1369afc22db0d4820dd2e6da57c01d0bb8dd546b feat: Enable export for JSX fixtures (#856) e545cef34f4d4bbbad65d66e85b505c42c16846e feat: Full-screen mode for JSX fixtures (#852) d1a5fded25504d5fc196447bbc75d2cb73414e2d feat: Render plain tree view for JSX fixtures (#846) 26a43f8f0ac4c19485fbb3700a55fbe8e977a253 feat: Support non-serializable values in JSX fixture state (#840) 31bc8b8f246ccb5f0e6f3521cbc77d0fdc82bb87 feat: Dark launch JSX fixtures (#827) f021f5c7c0050c515ba5f045d9f3812e72c667f4 feat: Add WebSockets API to FixtureConnext (#818) c73cda24eba7b31b7f9ebcfb674061eb9b84913e feat: Provider for JSX fixtures (#816) c17b61f759b8151ddafd1144982112d6de6135cb feat: Update fixture.viewport when enabling responsive controls (#810) 3f3603b96086d13cab326482f8df3bb2a7fa24f6 feat: Add meta viewport added to Playground index.html (#807) @ibrahimovfuad 35eb8fcdd4337b400595948ad01fd0235e5499cc feat: Simulate latency with the Apollo proxy (#799) @xavxyz 8c155182bd2c26ec1256b647ea22e759352fe28f feat: Export Flow-typed createFixture helper from react-cosmos package (#785)

    2ac3b6cba635c889b56ebbde3bae9f9c6b49405c fix: Fix children transitions in JSX fixtures (#920) eabcbc136ce994b338734655c13e881b184b1735 fix: Playground2 glitches (#914) a0c2bb08aa8d08cd105f1e2c44d603e18783aa4f fix: Mask content under fixture header 30629e812b611b5ad1262972ba9d7f76b17aa62d fix: Disable fixture actions when fixture path is invalid (#911) dc576658a0c7bda45df3f55b8e55c04e6c6fe0d6 fix: createFixture return type (#908) 9cf5182c67872274e687068c3a029d38dd1251f3 fix: Fix plugin loading in Playground2 (#907) 4a8f380be160995157abe04bfe4f4979e6e649a1 fix: Ignore HOC names when sorting components (#876) @tryggvigy b4e95f8343a2f00d95c4ece1f32292e85edca119 fix: Only create new component fixture state when it's missing (#871) b5748a1cfba8ffdbfa5f06f7984a3db89fbab506 fix: Refactor props/state capture in JSX fixtures (#868) 5e7338b1b01b88f2e72b238708ae6a8b73c260d0 fix: Log errors and fail command on errors (#849) @oggdal 662f581ad188e7825f82511ec81c7a0f346a5afd fix: Allow fixtures to override initial component state (#847) f3fcb09c8cf42547dfa5b2fe2fe09b64a3d8d643 fix: Update fixture props when ComponentState children change (#841) 2b536180e596e4364ab46bd5f0a8752dfbd0a99e fix: Ensure Node packages depend on Babel runtime (#837) 89d91e20aa7545b091554b8e03aa6e4b9eece0fe fix: Make react-router proxy snapshots deterministic (#803) @JannesV 87b2ddca6d97f492843a492e9604dffbf2bd48e2 fix: Windows development (#820) 3764d337ae2ab86c56685509536e5fe21a298cd1 fix: Polyfill IE11 (#814) @kbirulia 9e4c1d7795bbcb0baf350aae2602297cae30caed fix: Browserify example (#798)

    b351281339e91dc81d6f4ed06707e46252dc5034 chore: Upgrade react-plugin (#916) a7981e5a14441128614678a37ef77d01b4059dff chore: Refactor Playground2 plugin config (#898) 98e038233e5f4450f3d53050bdd580944b7209d4 chore: Convert Playground options into generic plugin config (#896) f6edbd8481ce2ec7a28126d974d43d0c60f5f4e6 chore: Break down Playground2 into plugins completely (#888) f8f2d34af14e21567e9abe4c703e762d4047d137 chore: Add tests to Playground2 (#885) bc9babccec2f83ffc530027b10efe878c82bcf1b chore: Perform maintenance (#883) 0bdfc9123e9517168a15c188f830effb0b5192c2 chore: Fine tune FixtureCapture (#872) 8359a7f383b3fdb5bebe6b0693db38e145072876 chore: Ignore example exports a79d20bb6142d27a4f6574abe5346cd0ac2c29e5 chore: Make examples work with Babel 7 (#839) aa561bb762f19bd3cac8ab76be4b1aa856b2cd1a chore: Limit Travis parallelism feee74aa957de46b6449e897d47fa75ab3471ffe chore: Don't record Cypress runs 6347b3e8ac8c7c7d45bc1f8529ffdceefcab11cf chore: Upgrade to Babel 7 (#824) 8fbd3ae9f9259bc65e1399d1254613fc9accea4b chore: Point packages to dist by default (#823) 5cc86c924ed45653e3295c624d6d1c0d902dae73 chore: Update Lerna command 14946d5fb3dc23709cacfaa7d6f5d52719913036 chore: Upgrade Lerna commands 5dff0af36ef7fdd62788ebb997c27d4540cdfef7 chore: Enable CircleCI in Greenkeeper PRs (#809) 5beaa1ddbd1db42344b968fe9304adb7e10df749 chore: Move CRNA example to own repo (#804) 7937ce768e8fad7e185ad1077d24a48d1271e939 chore: Replace XO with explicit ESLint config (#802) c7bc73803d9472b0b451405472dd04b8185c5454 chore: Reduce heavy server test files (#801) b523fb00d0f975c4d6b0de1fc3f23a49f114e1ca chore: Set up CircleCI (#800) cc52276412142600386706ff6550799d86c72eec chore: Only publish changed packages @terrierscript

    d04bee4051a1023a27bc1f3db3685c138ab4649e docs: Add guide for testing Cosmos Next (#913) 0bd449962faf5cd8020c6d48c651a5c406d48459 docs: Link to react-redux v6 thread (#906) 629a056b4944096c5e35bace6097e0798ff8107a docs: Add stateful proxy link to readme (#901) @omarzion 65889fc3d1e5fd9779381c037879b4c14c520799 docs: Update Getting Started steps for latest @babel (#900) @brianespinosa cd9550ff8f097e7f84cce2c8c8e950d22bb08bc4 docs: Publish roadmap for Cosmos Next (#884) dfe26b612a29ce355088f5f3e91f93ac36cbe9de docs: Fix fetch-mock link (#880) @aramk aff54e8455c9c42a177b1d7cb83a94bff5373ebd docs: Document how to name a fixture's wrapper component (#879) @xavxyz 7485f7299e48be3ff57b63e152f4573fd83b8e18 docs: Add link to Parcel example ee9bc86aad24cd02226f4517e6504defc90931e4 docs: Add 'babel-polyfill' to globalImports example (#861) @callumlocke 48a7698bdd79f7fa2863f94f3573a3f1930b4acb docs: Document Lerna debugging 9b26c9fc12f6d47feac2005b01e409ffa78f28dc docs: Document keyLength props 9c580073ea6e6d2d38d985a886a2af1130b99747 docs: Fix typo (#833) @ovidiubute 0846e0e3376d1e1aeb68ff4840443f029adb11c8 docs: Amend notes on invariants and logging d633b036ce2bbad5240929449d7738becd618018 docs: Increase repo knowledge 6f4f20b1ecfecd3d98934ced1e383b86c006c487 docs: Add webpackConfigPath example 9cbe76fa83a29a2790ae62ee2adca16f6fd6db7e docs: Fix package.json diff (#796) 891b02b32b6db6e4d48e165228f941f34c72094f docs: Fix a typo in the README (#794) @TwFlem

    Source code(tar.gz)
    Source code(zip)
  • v4.6.3(Aug 2, 2018)

  • v4.6.4(Aug 2, 2018)

  • v4.6.0(Jul 31, 2018)

    Read the Medium post for the highlights

    f4b487c538136b6458baa704470431ed56f505bc feat: Improve ResponsivePreview frame style (#770) 280fa4b98189377f4a4ff53147fbd2f13c1ed9be feat: Refactor ResponsiveLoader into a plugin (#769) @maxsalven ca53b2fcbc709cf2270a846ca73157ae0ca06d9d feat: apollo-proxy support returning a promise (#760) @SimeonC 96e4246e89e9c54714d7ccff4f241677c4e7abb8 feat: Ensure HtmlWebpackPlugin in custom webpack config (#754) bae8f7321f1c33f318bc57f7acb55a5ac3973898 feat: Responsive Cosmos (#539) 2a78afceda7be8db596e3e89432c6b61ee772fd6 feat: Provide Router Props (#745) @maxsalven 37e9371d147f47be986003584f2c4e8400753d4c feat: Allow errors objects in Apollo proxy (#741) @maxsalven 03d59511dca2572385c214ee1215bda3f2d014ef feat: Create RN-specific onboarding screens (#738) 3f56d453c234e793bf21f3b02ba6c5aa876a68d0 feat: Update cosmos.modules file on fixture file changes (#735) 6edb5979a23b8432bf9513edf569ddc4d1f9b67e feat: Ask loader for fixtures on load (#725) 0576b00008add2ac34f2022754bc69d275490780 feat: Add loaderOpts to cosmos.modules (#724) 9e939509713b86b9997d2e7bf903cc5ec730e637 feat: Create RN loader (#721) ad2a1a9506dfcb7bd99b9064059099f83aa70ede feat: Create RN server (#717)

    5742748929a301f5cead78679a94b5644208bdf5 fix: correctly detect if the component is forwarding ref (#768) @SimeonC 43af0fd66d4ae00a52a23f50bd813026ca229947 fix: Remove babel-polyfill error in loader-entry.js (#759) @extramuros 23ac0f41140b18999afd7d4cdee02ad991ef7510 fix: Main pane display for native users (#746) 11d8c4d7e1e308e0d439c5e1bb497c09cb22e836 fix: Empty Apollo's cache when switching mocked fixture (#737) @xavczen dc652908823ed3fe4ca5eab21c4e7a80da5af0e3 fix: Replace node modules from client code (#718)

    816cb94ff21449b9902cab22191f52c6eca9ba7b docs: Add note on overriding rnConfig.getBlacklistRE (#773) 050b45fe14bbab82cd5c6d295c2e2ee4f21f41ed docs: Use a function for identifying a component in a fixture (#762) @sdgandhi 76716b0826b0c5fee717c820da27152369a58f04 docs: Add link to background proxy (#756) @SimeonC 26f5552acd46b28959e8d0013f15ef1ede6e625b docs: Add link to react-intl proxy 5f401429a3777d29ac230b65be0aafcde2eee589 docs: Document Cosmos usage with React Native (#740) 70d0d57877b488b093677d1860316bf6e7d84d42 docs: Add minimal roadmap (#728) 6ac2b3f7c369435a86e697525e2c48dcf2d8cbe6 docs: Simplify docs fca55a02ea0cb3e82bb3f6ddf37426865559ba53 docs: Add link to @reach/router proxy (#720) @Pyrolistical

    52a0771bce7e2576931582bfb00c4e00e581c947 chore: Add link to "Wrapper component" section d9750e777eb9dfe8e1bc5f8c54fda70134b4deb9 chore: Create rough plugin structure for existing UI (#761) b265433c7bca262e42a3f2ab41a898b688cd3556 chore: Improve style of issue templates (#755) 4958e44f290d65e78421c7a2deca05458614d53a chore: Check if testing API is compatible with React Native (#751) af5538cdaf51c40c8542e276126b42b41392d5e5 chore: Update issue templates (#750) 385bc4bbda144bd76b0cf7c84242258f6e5a58e3 chore: Add Create React Native App example (#723)

    Source code(tar.gz)
    Source code(zip)
Owner
React Cosmos
A tool for ambitious UI developers
React Cosmos
Create, isolate and test modular UI components in React.

ui-harness Isolate, test and document modular UI with React using familiar describe/it testing semantics. http://uiharness.com Quick Start (1-minute)

Phil Cockfield 271 Sep 28, 2020
🌟 JavaScript Style Guide, with linter & automatic code fixer

JavaScript Standard Style Sponsored by English • Español (Latinoamérica) • Français • Bahasa Indonesia • Italiano (Italian) • 日本語 (Japanese) • 한국어 (Ko

Standard JS 26.2k Oct 17, 2021
Collaborate & label any type of data, images, text, or documents, in an easy web interface or desktop app.

Universal Data Tool Try it out at udt.dev, download the desktop app or run on-premise. Docs • Website • Playground • Library Usage • On-Premise The Un

Universal Data Tool 1.5k Oct 11, 2021
Monitor your bundle size

BundleMon BundleMon helps you to monitor your bundle size. Your goal is to keep your bundle size as small as possible to reduce the amount of time it

null 21 Oct 15, 2021
Utopia is an integrated design and development environment for React.

Utopia is an integrated design and development environment for React. It uses React code as the source of truth, and lets you make real time changes to components by editing it and using a suite of design tools. It's early software, but you can try it today, look at an example project, or read about it on our blog!

Utopia 3.1k Oct 19, 2021
Spokestack: give your React Native app a voice interface!

React Native plugin for adding voice using Spokestack. This includes speech recognition, wakeword, and natural language understanding, as well as synt

Spokestack 38 Oct 13, 2021
Static AST checker for a11y rules on JSX elements.

Get professional support for eslint-plugin-jsx-a11y on Tidelift eslint-plugin-jsx-a11y Static AST checker for accessibility rules on JSX elements. Rea

null 2.5k Oct 12, 2021
A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.

React Spectrum Libraries A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences. React Spectrum A R

Adobe, Inc. 5.3k Oct 17, 2021
A lightweight, easy to extend web debugging tool developed based on react.

English | 简体中文 A lightweight, easy to extend web debugging tool developed based on react. Easy to use Full-featured Easy to expand high performance Us

腾讯TNTWeb前端团队 183 Oct 11, 2021
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 65.3k Oct 14, 2021
Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide React Styleguidist is a component development environment with hot reloaded

Styleguidist 10.1k Oct 14, 2021
Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide React Styleguidist is a component development environment with hot reloaded

Styleguidist 10.1k Oct 20, 2021
Tweak React components in real time. (Deprecated: use Fast Refresh instead.)

React Hot Loader Tweak React components in real time ⚛️ ⚡️ Watch Dan Abramov's talk on Hot Reloading with Time Travel. Moving towards next step React-

Dan Abramov 12.1k Oct 18, 2021
An upgradable boilerplate for Progressive web applications (PWA) with server side rendering, build with SEO in mind and achieving max page speed and optimized user experience.

React PWA v2 A highly scalable, Progressive Web Application foundation,boilerplate, with the best Developer Experience. Demo: https://demo.reactpwa.co

Atyantik 2.4k Oct 13, 2021
Chrome extension for improving and optimizing performance in React applications (Gatsby and Next.js compatible).

React Performance Tool Nominated for React Open Source Awards 2020 Reactime is a performance and debugging tool for React developers (Beta version for

OSLabs 1.4k Oct 17, 2021
A CLI tool to bootstrap your modern React application.

create-react-saga is a CLI tool for quickly setup your next clutter free webpack backed React application. It provides you the latest hooks based codebase, testing utilities and storybooks.

Sunny Praksah 6 Oct 2, 2021
In-browser emulator of Hack CPU from nand2tetris course

Hack Emulator This project emulates Hack computer from nand2tetris course. It is still under light development (light means that I might add/fix/polis

Artyom Kuznetsov 1 Oct 12, 2021
Visually build pages and frontends, lightning-fast. Plug into your React codebase. Empower anyone to ship.

Visually build pages and frontends, lightning-fast. Plug into your React codebase. Empower anyone to ship.

Plasmic 232 Oct 20, 2021
✍ It has never been so easy to document your things!

Docz makes it easy to write and publish beautiful interactive documentation for your code. Create MDX files showcasing your code and Docz turns them i

Docz 21.8k Oct 15, 2021