Skip to content
This repository has been archived by the owner on May 8, 2023. It is now read-only.

Latest commit

 

History

History
173 lines (146 loc) · 6.72 KB

TODO.md

File metadata and controls

173 lines (146 loc) · 6.72 KB

Roadmap: Cosmos Next

The innovations included in the next generation of Cosmos have already been designed, tested and implemented for the most part. This roadmap will put the the all-new JSX fixtures and Pluggable UI into the user's hands.

The aim for Cosmos Next is to provide ~80% parity with Cosmos 4.x along with brand new features. The upgrade will be opt-in and there will be a exhaustive beta phase before a transition plan is devised for the stable channel.

Step 1: Port UI to plugin architecture

Note: The development of JSX fixtures is coupled to the new Pluggable UI. JSX fixtures use a new communication protocol that only the new UI understands and vice-versa. So they both need to be released at the same time. This was a risky engineering endeavor, but it allowed leapfrogging intermediate development steps.

We need a decent parity with the existing Cosmos UI to test JSX fixtures. This is the main requirement for releasing Cosmos Next for beta testing.

  • Establish testing practices for new UI package
  • Create router for new UI
  • MVP feature set for new UI
    • Full screen mode
      • Remove renderer full screen mode (renderer URL belongs to user)
    • Remote renderer (WebSockets)
      • Enable remote renderer(s) on web
      • Sync fixture state between renderers (this wasn't required at this step but is so cool)
    • Collapsable fixture tree view
      • Persist state
    • Responsive mode
    • Style
      • Fixture blank state
      • Fixture error state
    • JSX decorators
    • Renderer error handling
      • Renderer preview URL error
      • react-error-overlay integration
        • Always show preview iframe after error occurred
        • Dismiss overlay when changing fixture

Not included in the first beta release: The Fixture Editor. This is because it'll be replaced by something much more powerful (a new Control Panel). But this section will have arrive later, after the core of Cosmos Next has been thoroughly tested.

Step 2: Get feedback on JSX fixtures

  • "How to use" document for beta testers
  • Release 4.7
    • Blog post

Next Steps

  • Basic Control Panel (props/state visualization and editing)
  • More Control Panel features
    • General purpose UI controls mapped to render props
    • Option to reset or transition props (it currently does former)
    • Capture state from Hooks
  • Multiple fixtures per file
    • Named exports
    • Dynamically generated n-fixtures
  • UI-generated fixture variations
  • Refine and document UI plugin API
    • Avoid superfluous React updates on plugin state change
  • Redesign Cosmos docs

Roadmap: Summer of Cosmos

Oct 29, 2018: This was a long and fruitful summer for Cosmos. Time to draw a line and draft a new roadmap.

Explore: JSX fixtures

  • Create new declarative renderer: FixtureProvider
    • Context API reading and updating fixture state
    • Handle unserializable fixture state
    • Core decorators
      • Capture props
      • Capture state
      • Catch errors
      • Customize fixture name
      • New decorator API
    • Remote protocol
      • Define renderer message types
      • window.postMessage
      • WebSockets
    • Testing API
  • Integrate JSX fixture files
    • Support default export
    • Support multiple named exports
    • Support decorator files
  • Port 3rd party fixture plugins (decorators)
    • Redux
    • React Router
    • LocalStorage
    • Fetch
    • XHR
  • Connect new fixture state format to UI

Dark launch strategy

JSX fixtures are a big shift from the traditional fixture format in Cosmos. Before planning the migration, the new APIs need to be tested and validated by Cosmos users. Below are the steps to make the new fixture API available under a feature flag.

  • New (minimal) Playground
    • Map state to new renderer events
    • Renderer preview
    • Fixture list
    • Fixture control panel
  • New DOM renderer
    • Integrate with new FixtureConnect API
    • Integrate (ES only, for now) fixture files
    • HMR
  • Server
    • Serve new Playground and renderer on { next: true } config option
    • Detect new fixture file types under __jsxfixtures__
  • Usable control panel (new Playground)

Pluggable UI

  • Design plugin API
    • Create rough plugin structure for existing UI
    • Enable toggling plugins at run time
    • Refactor ResponsiveLoader into a plugin
      • Create shared UI context with Playground options, URL params, UI state and fixtureEdit callback
      • Derive state from fixture.viewport
    • Decouple plugin config from core config
    • Decouple URL params from core UI
    • Export styled-components to use in plugins (eg. HeaderButton)
  • Design package API
    • Turn existing plugins into packages (type: ui-plugin)
  • Create UI for browsing and toggling plugins
    • Design config API for enabled plugins
  • Create UI from installing packages
  • Document UI plugins

React Native integration

  • RN server
    • Extract non-webpack core from react-cosmos/server
    • Create RN server cmd
    • Create sockets server (forwarding messages between clients)
    • Generate user modules file
    • Update cosmos.modules file on fixture file changes
    • Add loaderOpts to cosmos.modules
    • Onboarding
      • Generate Cosmos config
      • Add cosmos.modules to gitignore
      • Create new App file that forks between App.main and App.cosmos
      • Add package.json script
  • RN UI
    • Add support for websocket communication (choose between sockets or postMessage)
    • Ask loader for fixtures on load
    • Create RN-specific onboarding screens
    • Test socket transport
    • Log using debug on the client
  • RN loader
    • Extract non ReactDOM-specific core from react-cosmos-loader
    • Create RN loader
    • Test socket transport
    • Check if existing proxies are compatible
    • Check if testing API is compatible
  • Create React Native App example
  • Add (experimental) README section

UI control panel

  • Create POC with JSX fixtures
  • Show unserializable values as read-only fields
  • Use JSON editor for complex values
    • Prettify JSON
  • Auto-expand fields to value height (number of lines)
  • Style

Redesign docs

  • Create search UI for examples (by tags extracted from README)
  • Create search UI for plugins
  • Create high-level examples (eg. Next.js, CRA, Gatsby)