Cosmos v3 BETA TESTING thread

[ovidiuch]

What's up?

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

Always install react-cosmos-webpack@next 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. Add option for excluding fixture files #479
• @maxsalven Persisted Tree View [WIP] Treeview Persist Rebased #482
• @skidding Add React Error Handling in Loader Error catch proxy #481
• @skidding Surface rootPath as projectKey in Playground Add projectKey prop to Component Playground #485 (complements [WIP] Persisted Treeview #471)
• @maxsalven Support for fixture nesting in tree view (right now only component names are expanded) Allow namespacing of fixtures in tree view #483
• @Timer Add react-error-overlay 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 Handle missing index.html gracefully #498
• @skidding Update README to reflect new fixture format and config chore: v3 docs #501
• @skidding Rename react-cosmos-webpack to react-cosmos chore: v3 docs #501

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

[ovidiuch]

I know these changes are annoying, but I'm thinking of going back to using the react-cosmos package name in v3 and deprecate react-cosmos-webpack.

I put webpack in the name initially to emphasize that Cosmos parts can be used with other bundlers. While it's still the case, it's clear that no other alternative caught on and the naming can do more harm than good at this point, because it brings up unnecessary questions and can lead some people to install react-cosmos (the obvious choice) and not understand what went wrong.

Please give this comment a 👍 if you agree or write a reply with the reason if not. Thanks!

[alp82]

For anyone who got similar problems to get the new Filesystem API to work: The magic property you need to configure if you don't use the default setup is fileMatch.

In my case i needed it because i have changed the default fixtures folder to __cosmox__. Here is the whole config:

module.exports = {
  webpackConfigPath: 'webpack.config.js',
  fileMatch: ['**/__cosmox__/**/*.js'],
};

Much better than before!

Since i think that fixturesDir would be still pretty handy to have i opened a new issue for that: #488

[ovidiuch]

Update: New tree view persistence and CRA error overlay published update 3.0.0-beta.5

[ovidiuch]

Update: I merged #501 because I wanted to update the docs ASAP and stop confusing new users. Please take a look at the updated docs and feel free to provide any feedback. You can check the diff of #501 or read the whole thing.

Also renamed react-cosmos-webpack to react-cosmos since we all thought it's a good idea. This is how you upgrade (if you use Yarn):

yarn remove react-cosmos-webpack
yarn add --dev react-cosmos@next

3.0 is 99% ready! 🥁

[alp82]

Nice! Feedback for docs:

• introduction gif is outdated
• option dump has no fileMatch
• we created a proxy for glamorous themes, interested in adding it to 3.0?

[ovidiuch]

@alp82 will do 1 & 2.

we created a proxy for glamorous themes, interested in adding it to 3.0?

It's hard to find the time to properly polish it with tests and all. If you want you can publish a good-enough package (the code that currently works for you) on a personal repo and I will reference it as a "community proxy" or something.

[alp82]

There you go: https://github.com/alp82/react-cosmos-glamorous-proxy

[ovidiuch]

Update: Published 3.0.0-beta.13 with a bunch of improvements to namespace detection from file paths and the new httpProxy option courtesy of @maxsalven.

If nobody reports any new issues related to 3.0 functionality this is the last beta. Next I'll publish the release candidate. We'll keep the RC for a week or so to iron out any remaining bugs and update the repo with latest screenshots and exports.

Thanks to everyone for your help so far, v3 is an amazing improvement to the Cosmos project! (and I already have new features stashed 😄)

[alp82]

Awesome work @skidding!

Is there any roadmap to see the mid-term and long-term goals?

[ovidiuch]

Is there any roadmap to see the mid-term and long-term goals?

There's a rough section here: https://github.com/react-cosmos/react-cosmos/blob/master/CONTRIBUTING.md#roadmap, but I will write down all my other ideas after this release. I'm mostly focused on architectural changes that enable new use cases and types of plugins, but I think it would be useful to curate a feature "wish list" as well.

[ovidiuch]

IT'S TIME! 🚀

Cosmos 3 functionality sealed and release candidate is out. Please make sure to use the latest (3.0.0-rc.2) and report any remaining bugs for the next week. I'll take care of updating last bits of outdated docs in the meantime.

[mbohgard]

After latest install I get a TypeError: (0 , _reactCosmosConfig2.default) is not a function when running cosmos. Everything is -rc.3 except react-cosmos-webpack which is 3.0.0-beta.8 (latest available on npm).

Edit: Actually, I noticed the webpack package is gone. Switched to react-cosmos@next and now it's working again :)

[mbohgard]

Another question:

I see now that Cosmos is grouping some component under folders, though how does the logic work? Both FormInput (with ControlledFormInput) and FormButtonGroup (with ControlledFormButtonGroup) is in the Molecules folder but only the input component is ordered under Molecules?

[alp82]

@mbohgard seems like a regression of #495

[ovidiuch]

@mbohgard

Can you run node_modules/.bin/print-fixture-files please? You can paste the output here or share via Slack IM if you prefer to keep it private. It will help me understand why aren't all components properly grouped.

[mbohgard]

It's ok, private stuff renamed :)

[
  {
    "filePath": "/app/packages/cosmos/__fixtures__/Atoms/Button/dark.tsx",
    "components": [
      {
        "name": "Button",
        "filePath": "/app/packages/cosmos/@private/common-components/components/Atoms/Button"
      }
    ]
  },
  {
    "filePath": "/app/packages/cosmos/__fixtures__/Atoms/Button/default.tsx",
    "components": [
      {
        "name": "Button",
        "filePath": "/app/packages/cosmos/@private/common-components/components/Atoms/Button"
      }
    ]
  },
  {
    "filePath": "/app/packages/cosmos/__fixtures__/Atoms/Button/hollow.tsx",
    "components": [
      {
        "name": "Button",
        "filePath": "/app/packages/cosmos/@private/common-components/components/Atoms/Button"
      }
    ]
  },
  {
    "filePath": "/app/packages/cosmos/__fixtures__/Atoms/Button/icon.tsx",
    "components": [
      {
        "name": "Button",
        "filePath": "/app/packages/cosmos/@private/common-components/components/Atoms/Button"
      }
    ]
  },
  {
    "filePath": "/app/packages/cosmos/__fixtures__/Atoms/Button/monochrome.tsx",
    "components": [
      {
        "name": "Button",
        "filePath": "/app/packages/cosmos/@private/common-components/components/Atoms/Button"
      }
    ]
  },
  {
    "filePath": "/app/packages/cosmos/__fixtures__/Atoms/Button/success.tsx",
    "components": [
      {
        "name": "Button",
        "filePath": "/app/packages/cosmos/@private/common-components/components/Atoms/Button"
      }
    ]
  },
  {
    "filePath": "/app/packages/cosmos/__fixtures__/Molecules/FormButtonGroup/default.tsx",
    "components": [
      {
        "name": "FormButtonGroup",
        "filePath": null
      }
    ]
  },
  {
    "filePath": "/app/packages/cosmos/__fixtures__/Molecules/FormButtonGroup/preselected.tsx",
    "components": [
      {
        "name": "ControlledFormButtonGroup",
        "filePath": null
      }
    ]
  },
  {
    "filePath": "/app/packages/cosmos/__fixtures__/Molecules/FormButtonGroup/selection.tsx",
    "components": [
      {
        "name": "FormButtonGroup",
        "filePath": null
      }
    ]
  },
  {
    "filePath": "/app/packages/cosmos/__fixtures__/Molecules/FormInput/default.tsx",
    "components": [
      {
        "name": "FormInput",
        "filePath": "/app/packages/cosmos/@private/common-components/components/Molecules/FormInput"
      }
    ]
  },
  {
    "filePath": "/app/packages/cosmos/__fixtures__/Molecules/FormInput/defaultValue.tsx",
    "components": [
      {
        "name": "ControlledFormInput",
        "filePath": "/app/packages/cosmos/@private/common-components/components/Molecules/FormInput"
      }
    ]
  },
  {
    "filePath": "/app/packages/cosmos/__fixtures__/Molecules/FormInput/disabled.tsx",
    "components": [
      {
        "name": "FormInput",
        "filePath": "/app/packages/cosmos/@private/common-components/components/Molecules/FormInput"
      }
    ]
  },
  {
    "filePath": "/app/packages/cosmos/__fixtures__/Molecules/FormInput/invalid.tsx",
    "components": [
      {
        "name": "FormInput",
        "filePath": null
      }
    ]
  },
  {
    "filePath": "/app/packages/cosmos/__fixtures__/Molecules/FormInput/password.tsx",
    "components": [
      {
        "name": "FormInput",
        "filePath": "/app/packages/cosmos/@private/common-components/components/Molecules/FormInput"
      }
    ]
  },
  {
    "filePath": "/app/packages/cosmos/__fixtures__/Molecules/FormInput/valid.tsx",
    "components": [
      {
        "name": "FormInput",
        "filePath": null
      }
    ]
  }
]

[ovidiuch]

@mbohgard thanks. Can you also share the contents of any of the fixtures that have components[0].filePath equal to null?

It would be interesting to see both /app/packages/cosmos/__fixtures__/Molecules/FormInput/invalid.tsx and /app/packages/cosmos/__fixtures__/Molecules/FormInput/disabled.tsx, because they're for the same component but only one of the managed to detect the component path.

[mbohgard]

Sure thing!

/app/packages/cosmos/__fixtures__/Molecules/FormInput/invalid.tsx:

import {
  Validity,
  FormInput
} from "@private/common-components/components/Molecules/FormInput";

export default {
  component: FormInput,
  padded: true,
  props: {
    autofocus: true,
    value: "john_doe",
    label: "Username",
    type: "text",
    validity: Validity.INVALID,
    invalidText: "Username is already taken"
  }
};

/app/packages/cosmos/__fixtures__/Molecules/FormInput/disabled.tsx:

import { FormInput } from "@private/common-components/components/Molecules/FormInput";

export default {
  component: FormInput,
  padded: true,
  props: {
    label: "Username",
    type: "text",
    disabled: true
  }
};

[ovidiuch]

@mbohgard OK, it's probably because of the named exports. I'll create a failing test and try to submit a patch soon.

---

Meanwhile:

• Documented how to use the codemod for upgrading old fixtures
• Updated the README gif to feature the new UI and awesome react-error-overlay integration (thanks again @Timer)
• Added @alp82's react-cosmos-glamorous-proxy in a new "community proxies" section
• Added fileMatch to options dump

[mbohgard]

Ah ok, sounds plausible. Thanks!

[ovidiuch]

@mbohgard check out 3.0.0-rc.5 please.

[mbohgard]

@skidding Wow, that was fast work ;) Works like a charm!

If you only have one folder inside a fixtures folder with component fixtures (i.e fixtures for just one component) Cosmos won't group fixtures, but I guess that is by design?

Clarification:

Atoms
    Button    <--- won't group under Atoms
        default
        disabled
Molecules
    FormInput    <--- will group under Molecules
        default
        invalid
    FormButton    <--- will group under Molecules
        default
        disabled

[ovidiuch]

@mbohgard There was a TODO in place ready to implement 😄

Yes, it's by design. It's useful in cases like Button/Button. Maybe in the future we can only do this if the component name matches the dir name. It's a bit tricky because component names often contain HoC decorations.

[ovidiuch]

Onwards! 🛤