Sandbox for developing and testing UI components in isolation

Overview

Cosmos

React Cosmos

npm version CircleCI Status Twitter Slack PRs Welcome

Sandbox for developing and testing UI components in isolation.

  • 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?

5 Reasons to Choose React Cosmos | Medium

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!

๐ŸŒค

Comments
  • 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
  • '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
  • 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
  • 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
  • Add sync utils

    Add sync utils

    About

    Fix https://github.com/react-cosmos/rfcs/issues/13#issuecomment-598925864

    Notes

    Haven't tested this yet - looking to see if this is the way we want to go about adding sync support ๐Ÿ‘

    opened by andyrichardson 17
  • Add Playground Welcome screen

    Add Playground Welcome screen

    Issue #252

    • [x] Create separate Component, component-playground.jsx has seen enough battles
    • [x] Screen for no components, no fixtures
    • [x] Screen for components & fixtures
    • [x] Screen for components but no fixtures
    • [x] Jest unit-tests
    • [x] ComponentPlayground unit-tests
    opened by ovidiubute 17
  • Error of undefined `hook` in Brave -- Actually CORS error

    Error of undefined `hook` in Brave -- Actually CORS error

    What's wrong?

    • When adding a component to a fixture like Plate it will give me tons of undefined errors (likely for each render). I could only narrow it down to this specific component.

    • It does not occur when running my normal cra setup (with craco), so I'm wondering if there is some injection taking place from react-cosmos. And it does not occur in Chrome, only Brave, probably because Brave is stricter in their CORS policy?

    What I noticed that if I go to the fixture, and modify/toggle a property in the right sidebar first, before interacting with the editor, the errors don't occur!.

    Summary / Steps to reproduce

    1. Add basic Plate editor component

    2. Click in the editable body / try typing

    3. See the same error repeat

    4. Change a prop on the right

    5. Error changes into a CORS error, and seemingly has the same stacktrace, but more readable

    Screenshot

    image

    react_devtools_backend.js TypeError: Cannot set properties of undefined (setting +'hook')
    

    And I thought I couldn't debug this further because of the anonymity of the error, however, after toggling a property, the error happens only once, but in a different form, and I'm pretty sure it's the same, seeing the line: 4026 is the same:

    image

    react_devtools_backend.js:4026 DOMException: Blocked a frame with origin "http://localhost:5000" from accessing a cross-origin frame.
        at JSON.stringify (<anonymous>)
        at Object.parseData (<anonymous>:8:116)
        at <anonymous>:10:2186
        at Array.reduce (<anonymous>)
        at <anonymous>:10:2114
        at i (<anonymous>:10:2706)
        at t.onCommitFiberRoot.t.onCommitFiberRoot (<anonymous>:10:3098)
    

    So from what I can gather this is definitely a react-cosmos problem, but why it only occurs with Plate I have no clue. (I tried it with a simple component with contentEditable but no)

    User info

    opened by TrySpace 0
  • Support/document using ESM webpack.config.mjs (and perhaps TS too)

    Support/document using ESM webpack.config.mjs (and perhaps TS too)

    See also #1287

    I recently converted my webpack.config.js to an ESM version webpack.config.mjs only to discover I broken my react-cosmos setup.

    I would be really nice if react-cosmos supported webpack.config.mjs natively. Failing that, it should at least document how to handle this case and present a suitable error message with a link to the documentation.

    Looking at #1287 it looks like it should probably also handle TypeScript webpack.config.ts too.

    Not putting up a PR just now because I believe it's unlikely to be accepted until after v6.0.0 is released.

    For now I've just patched react-cosmos locally using patch-package based on the changes I made here: https://github.com/birtles/react-cosmos/commit/d2cf4e1a10630273b89c7928d72e46edc91dc108 which looks for webpack.config.mjs if it fails to find webpack.config.js. It also tries to load .mjs files using import() but using the esm package as suggested in #1287 might be a simpler solution.

    (I also have a similar but less complete changeset that applies against main here https://github.com/birtles/react-cosmos/commit/2743c6b0d0ebc0ee00ebdadb2d6978889d772783)

    opened by birtles 2
  • Gatsby support?

    Gatsby support?

    What is the status of Gatsby support? React Cosmos looks fantastic, but I can't get it to work for components in Gatsby with the default configuration.

    opened by edenworky 0
  • Fixtures with FetchMock do not work with Create Rect App 5

    Fixtures with FetchMock do not work with Create Rect App 5

    At first, big thanks for React Cosmos, I find it really helpful tool! ๐Ÿฅ‡ ๐Ÿ‘

    What's wrong?

    Fixtures with FetchMock stopped working (fetch-mock doesn't return the declared response anymore) after upgrading create-react-app from 4.0.3 to 5.0.1.

    Steps to reproduce

    I have created sample application for reproducing this problem.

    • On this branch, with CRA 4, it works correctly: https://github.com/gcwiak/cra-vs-react-cosmos/tree/cra_4-react_cosmos_fetch
    1. Start React Cosmos with npm run cosmos
    2. Open App fixture
    3. Fixture is rendered correctly, showing the FROM_Fixture text provided by FetchMock: image
    • On this branch, with CRA upgraded to 5, it fails to mock the fetch call https://github.com/gcwiak/cra-vs-react-cosmos/tree/cra_5-react_cosmos_fetch
    1. Start React Cosmos with npm run cosmos
    2. Open App fixture
    3. Nothing is rendered, console shows the following errors
    Uncaught TypeError: Cannot read properties of undefined (reading 'decode')
        at new URLStateMachine (url-state-machine.js:547:1)
        at module.exports.basicURLParse (url-state-machine.js:1260:1)
        at new URLImpl (URL-impl.js:13:1)
        at Object.setup (URL.js:376:1)
        at new URL (URL.js:31:1)
        at normalizeUrl (request-utils.js:70:1)
        at Object.normalizeRequest (request-utils.js:96:1)
        at FetchMock.fetchHandler (fetch-handler.js:119:1)
        at DataFetchingComponent.tsx:8:1
        at invokePassiveEffectCreate (react-dom.development.js:23487:1)
        at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
        at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
        at invokeGuardedCallback (react-dom.development.js:4056:1)
        at flushPassiveEffectsImpl (react-dom.development.js:23574:1)
        at unstable_runWithPriority (scheduler.development.js:468:1)
        at runWithPriority$1 (react-dom.development.js:11276:1)
        at flushPassiveEffects (react-dom.development.js:23447:1)
        at react-dom.development.js:23324:1
        at workLoop (scheduler.development.js:417:1)
        at flushWork (scheduler.development.js:390:1)
        at MessagePort.performWorkUntilDeadline (scheduler.development.js:157:1)
    URLStateMachine @ url-state-machine.js:547
    module.exports.basicURLParse @ url-state-machine.js:1260
    URLImpl @ URL-impl.js:13
    setup @ URL.js:376
    URL @ URL.js:31
    normalizeUrl @ request-utils.js:70
    normalizeRequest @ request-utils.js:96
    FetchMock.fetchHandler @ fetch-handler.js:119
    (anonymous) @ DataFetchingComponent.tsx:8
    invokePassiveEffectCreate @ react-dom.development.js:23487
    callCallback @ react-dom.development.js:3945
    invokeGuardedCallbackDev @ react-dom.development.js:3994
    invokeGuardedCallback @ react-dom.development.js:4056
    flushPassiveEffectsImpl @ react-dom.development.js:23574
    unstable_runWithPriority @ scheduler.development.js:468
    runWithPriority$1 @ react-dom.development.js:11276
    flushPassiveEffects @ react-dom.development.js:23447
    (anonymous) @ react-dom.development.js:23324
    workLoop @ scheduler.development.js:417
    flushWork @ scheduler.development.js:390
    performWorkUntilDeadline @ scheduler.development.js:157
    index.js:1 The above error occurred in the <DataFetchingComponent> component:
    
        at DataFetchingComponent (http://localhost:4000/main.js:197:76)
        at p
        at header
        at div
        at App
        at FetchMock (http://localhost:4000/main.js:506:34)
        at __WEBPACK_DEFAULT_EXPORT__
        at FixtureElement (http://localhost:4000/main.js:56809:24)
        at FixtureCapture (http://localhost:4000/main.js:55239:23)
        at ErrorCatch (http://localhost:4000/main.js:59771:5)
        at FixtureProvider (http://localhost:4000/main.js:56607:24)
        at FixtureLoader (http://localhost:4000/main.js:56233:5)
        at DomFixtureLoader (http://localhost:4000/main.js:59586:23)
    
    React will try to recreate this component tree from scratch using the error boundary you provided, ErrorCatch.
    

    User info

    • Server terminal output
    $ npm run cosmos
    
    > [email protected] cosmos
    > cosmos
    
    [Cosmos] Using cosmos config found at cosmos.config.json
    [Cosmos] Serving static files from public
    [Cosmos] See you at http://localhost:4000
    [Cosmos] Using webpack config found at node_modules/react-scripts/config/webpack.config.js
    [Cosmos] Building webpack...
    webpack built 4178d5585cd9efc6250f in 4372ms
    WARNING in ./node_modules/@base2/pretty-print-object/dist/index.js
    Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
    Failed to parse source map from '/Users/grzegorz/workspace/cra-vs-react-cosmos/node_modules/@base2/pretty-print-object/src/index.ts' file: Error: ENOENT: no such file or directory, open '/Users/grzegorz/workspace/cra-vs-react-cosmos/node_modules/@base2/pretty-print-object/src/index.ts'
    
    WARNING in DefinePlugin
    Conflicting values for 'process.env'
    
    WARNING in [eslint] 
    src/App.fixture.tsx
      Line 6:1:  Assign arrow function to a variable before exporting as module default  import/no-anonymous-default-export
    
    1 WARNING in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
    webpack compiled with 4 warnings
    No issues found.
    
    • Cosmos version: 5.7.2
    • react-mock/fetch version: 0.3.0
    • Cosmos config
    {
      "port": 4000,
      "staticPath": "public",
      "watchDirs": ["src"],
      "webpack": {
        "configPath": "react-scripts/config/webpack.config"
      }
    }
    
    opened by gcwiak 1
  • how to use this without webpack

    how to use this without webpack

    First of all, I really appreciate you putting in the work of creating a component testing framework and making it bundler agnostic. It's what made me drop storybook ;)

    Your docs say "how you compile your code is 100% your business" and that we can make it work with other bundlers. I don't see any guidance on how to do this though? What are the important steps? How does react-cosmos look for the renderer html? Where do I register my custom logic? Is there a `require('react-cosmos').listen(12345)' step?

    I think it would be great if you could tell us how to integrate other bundlers. I'd be willing to write up a "how-to" guide with esbuild if you could point me in the right direction.

    opened by hesxenon 0
Releases(v5.7.2)
  • v5.7.2(Feb 20, 2022)

  • v5.7.1(Feb 20, 2022)

  • v5.7.0(Feb 20, 2022)

  • v5.6.8(Jan 31, 2022)

    1578ed6d Fix webpack return type 6bcff47a Automatically remove ModuleScopePlugin from webpack config (#1369) 17f245c0 Refactor internal fixture primitives (#1368) cf6efbd3 Add Cloudflare tag

    Source code(tar.gz)
    Source code(zip)
  • v5.6.7(Jan 17, 2022)

  • v5.6.6(Dec 22, 2021)

  • v5.6.5(Dec 4, 2021)

  • 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)
Owner
React Cosmos
Sandbox for developing and testing UI components in isolation.
React Cosmos
A tool to download and install TiDB components

What is TiUP tiup is a tool to download and install TiDB components. Documentati

leoppro 2 Apr 14, 2022
Set of reusable components for Golang projects

go-utils Table of contents go-utils Table of contents 1. Overview 2. Install 3. Utils package 3.1 logger 3.2 error 3.3 datetime 1. Overview In my free

AJPham 7 Sep 12, 2022
Some examples of testing techniques and commonly used frameworks

golang-test-examples Some examples of testing techniques and commonly used frameworks Test frameworks Testify Ginkgo Convey godog (cucumber) Test exam

Armakuni 0 Oct 29, 2021
a quick golang implementation of google pubsub subscriber for testing with the emulator.

gosub a quick golang implementation of google pubsub subscriber for testing with the emulator. it does one thing which is subscribing to a topic and r

Nam Pham 1 Oct 23, 2021
Testing the use of a golang wrapper around UserMode Linux for making stdin

This code is for testing the use of a golang wrapper around UserMode Linux for making stdin, stdout and stderr available to attach, detach and reattach to from the host using Unix sockets.

null 0 Dec 24, 2021
[TOOL, CLI] - Filter and examine Go type structures, interfaces and their transitive dependencies and relationships. Export structural types as TypeScript value object or bare type representations.

typex Examine Go types and their transitive dependencies. Export results as TypeScript value objects (or types) declaration. Installation go get -u gi

Daniel T. Gorski 172 Dec 6, 2022
:chart_with_upwards_trend: Monitors Go MemStats + System stats such as Memory, Swap and CPU and sends via UDP anywhere you want for logging etc...

Package stats Package stats allows for gathering of statistics regarding your Go application and system it is running on and sent them via UDP to a se

Go Playgound 163 Nov 10, 2022
James is your butler and helps you to create, build, debug, test and run your Go projects

go-james James is your butler and helps you to create, build, debug, test and run your Go projects. When you often create new apps using Go, it quickl

Pieter Claerhout 56 Oct 8, 2022
GoThanks automatically stars Go's official repository and your go.mod github dependencies, providing a simple way to say thanks to the maintainers of the modules you use and the contributors of Go itself.

Give thanks (in the form of a GitHub โ˜…) to your fellow Go modules maintainers. About GoThanks performs the following operations Sends a star to Go's r

psampaz 117 Dec 24, 2022
A simple Cron library for go that can execute closures or functions at varying intervals, from once a second to once a year on a specific date and time. Primarily for web applications and long running daemons.

Cron.go This is a simple library to handle scheduled tasks. Tasks can be run in a minimum delay of once a second--for which Cron isn't actually design

Robert K 215 Dec 17, 2022
Library to work with MimeHeaders and another mime types. Library support wildcards and parameters.

Mime header Motivation This library created to help people to parse media type data, like headers, and store and match it. The main features of the li

Anton Ohorodnyk 25 Nov 9, 2022
The new home of the CUE language! Validate and define text-based and dynamic configuration

The CUE Data Constraint Language Configure, Unify, Execute CUE is an open source data constraint language which aims to simplify tasks involving defin

null 3.4k Dec 31, 2022
Hack this repo and add your name to the list above. Creativity and style encouraged in both endeavors.

Hack this repo and add your name to the list above. Creativity and style encouraged in both endeavors.

Danger 2 Oct 1, 2021
A comprehensive training, nutrition, and social platform for martial artists and combat sport athletes

COMHRAC Comhrac (Gaelic for "Combat") is a comprehensive training, nutrition, and social platform for martial artists and combat sport athletes. Devel

Jack Hegarty 0 Oct 17, 2021
Purpose: dump slack messages, users and files using browser token and cookie.

Slack Dumper Purpose: dump slack messages, users and files using browser token and cookie. Typical usecase scenarios: You want to archive your private

Rustam 274 Jan 2, 2023
Package buildinfo provides basic building blocks and instructions to easily add build and release information to your app.

Package buildinfo provides basic building blocks and instructions to easily add build and release information to your app. This is done by replacing variables in main during build with ldflags.

null 1 Nov 14, 2021
Phalanx is a cloud-native full-text search and indexing server written in Go built on top of Bluge that provides endpoints through gRPC and traditional RESTful API.

Phalanx Phalanx is a cloud-native full-text search and indexing server written in Go built on top of Bluge that provides endpoints through gRPC and tr

Minoru Osuka 297 Dec 25, 2022
Highly extensible, customizable application launcher and window switcher written in less than 300 lines of Golang and fyne

golauncher A go application launcher A simple, highly extensible, customizable application launcher and window switcher written in less than 300 lines

Ettore Di Giacinto 45 Aug 21, 2022
Go package and associated command line utility to generate random yet human-readable names and identifiers

namegen | What's this? Go package and associated command line utility to generate random yet human-readable names and identifiers. Somewhat inspired b

Anand Varma 6 Oct 19, 2022