fusionjs/fusion-plugin-styletron-react

Migrated to https://github.com/fusionjs/fusionjs

FUSION.JS

Modern framework for fast, powerful React apps

What is it?

fu·sion — noun

The process or result of joining two or more things together to form a single entity.

Fusion.js, Uber’s open source universal web framework, represents the fusion of the client and the server. It's geared for server-side rendering out of the box, and its plugin-driven architecture allows for complex frontend and backend logic to be encapsulated in a single plugin:

import App from 'fusion-react';
import Router from 'fusion-plugin-react-router';

export default () => {
  const app = new App(<div>...</div>);

  /*
  One line of code sets up everything you need for routing:
  - Server rendering
  - React Providers on both server and browser
  - Bundle splitting integration
  - Hot module reloading support
  */
  app.register(Router);

  return app;
}

We initially built Fusion.js to make our own websites easier to maintain, but were so impressed with the benefits that we decided to offer it to the community as an open source project!

Try it out

If you're interested in giving Fusion.js a shot, Overview and Core Concepts are great places to start.

Contributing

This is a monorepo of all open source Fusion.js packages maintained using Yarn v2. Take a look at CONTRIBUTING.md for info on how to develop in this repo.

License

MIT

fusion-plugin-styletron-react's Issues

Test if style is hydrated correctly in the browser test

For the browser test, it would be nice to mount the element, traverse and verify the hydrated style and Styletron class names were passed down correctly.

Attempted to import Enzyme and its adapter, but create-universal-package with Rollup was throwing up parser errors.

Once create-universal-package is in a more stable state we should revisit and fix this.

Return next from browser middleware

Fix flow types

Update dependencies

Upgrade styletron-client to 3.0.0-rc.5

Add initial implementation

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Preset name not found within published preset config (monorepo:angularmaterial). Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Migrate fusion-plugin-styletron-react to DI

Token for using different engine and/or engine options

For example adding a prefix, which is currently not configurable.

Use Buildkite and Docker for CI

Broken SSR hydration

Styles are incorrectly hydrated in [email protected]

Unable to use Styletron components in a standard Fusion app

Type of issue

Bug

Description

Receiving the following error when importing a Styletron-built component to a FusionJS app:

Error: A Styletron styled component was rendered, but no Styletron engine instance was provided in React context. Did you forget to provide a Styletron engine instance to React context via using the Styletron provider component? Note: Providers and Consumers must come from the exact same React.createContext call to work. If your app has multiple instances of the "styletron-react-core" package in your node_module tree, your Provider may be coming from a different React.createContext call, which means the styled components will not recieve the provided engine instance. This scenario can arise, for example, when using "npm link".

Current behavior

Fusion app crashes with error when using component.

Expected behavior

Fusion app should be able to use Styletron components.

Steps to reproduce

1. Scaffold a new Fusion app using CLI.
2. Import a component that uses styletron as dependency.

Your environment

• fusion-plugin-styletron-react version: 2.5.0

• Node.js version (node --version): 8.11.3

• npm version (npm --version): 5.6.0

• Operating System: Mac 10.13.6

Blocked updates when using router and styletron plugins

Type of issue

Bug

Description

Including the fusion-plugin-styletron-react plugin will block react router updates occasionally.

Current behavior

I'm still working on a STR here, but it seems that including fusion-plugin-styletron-react will cause the router plugin to stop working. Links can be clicked which will update the browser URL, but the component does not render.

It feels like a symptom of: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

Expected behavior

Everything works as normal.

Your environment

I'll try to implement a minimal reproducible repository.

Interesting note:

This reproduces with code like:

app.register(Styletron);
app.register(Router);

If you simply swap the order, the issue goes away:

app.register(Router);
app.register(Styletron);

Docs in master do not reflect correct registration for fusion-core 0.3.0-x

Migrate to new fusion-plugin api

Migrate fusion-plugin-styletron-react to DI

HMR issues

There's issues with HMR and the rendered styles

• A new Styletron client instance is created every update
• This new instance is hydrated from the sheet text (not CSSOM) so the cache isn't accurate, and styles will be re-written the sheet