menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

React Static

A fast, lightweight, and powerful framework for building static-progressive React applications and websites.

Channels
Team

A plugin system is born...

July 16, 2018 at 7:10pm
The React Static community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

A plugin system is born...

July 16, 2018 at 7:10pm
We've gotten pretty far without a plugin system so far in React-Static, and for good reason. I wanted the base API to powerful enough to at least empower users to manually support things like css-in-js and special webpack configurations. But the time has come for a plugin system. It is and will be equally as simple to use as react-static and offer some very powerful features.
Right now all of the css-in-js examples are being converted to use the plugins system, so you will easily be able to add them to existing projects or migrate to react-static.
Plugin hooks can be added just about anywhere we need them, so they are far from fleshed out. If you need a new plugin hook, be sure to inspect the existing ones first, then file an issue to discuss your requirements if they aren't already met.

Beyond plugins

It's very possible that plugins will become powerful enough to house a lot of the logic that is currently hard-wired into react-static. Not only would this allow people to extend or replace the core functionality of React Static, but it would also allow React-Static to use it's own plugin system to achieve it's out-of-the-box functionality. I hate this term, but for lack of a better one, everything could become a plugin (queue the Gatbsy reference in my article). I think it's important to note though though that the purpose of plugins is not to force users to understand the plugin architecture in order to use them. Plugins should be as pure, isolated and simple as possible.
If you think you can contribute in any way to the new plugin architecture, open an issue and let's talk!

July 17, 2018 at 12:19am
Just tried out the styled components one yesterday. Easy to implement and removed extra code that was just there to get styled components working 👍

July 17, 2018 at 5:28pm
Just added react-static-plugin-preact
like-fill
1
It was super easy to build :)

July 18, 2018 at 5:57am
So if you already have styled-components on your react-static project <v6 do you need to eventually start using this plug-in?
Is it fair to presume that it replaces this what I currently have in my static.config.js file:
renderToHtml: (render, Comp, meta) => {
const sheet = new ServerStyleSheet()
const html = render(sheet.collectStyles(<Comp />))
meta.styleTags = sheet.getStyleElement()
return html
},
Document: class CustomHtml extends Component {
render() {
const { Html, Head, Body, children, renderMeta } = this.props
return (
<Html>
<Head>
<meta charSet="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
{renderMeta.styleTags}
</Head>
<Body>{children}</Body>
</Html>
)
}
}
The plugin use is optional, it replaces the extra renderToHtml/renderMeta code for you yeah.
like-fill
1

July 19, 2018 at 2:58pm
Yep. Optional, but it would handle all of that for you
Also, renderToHtml's signature is changing, so you'd have to make some changes regardless

July 20, 2018 at 10:13am
So plug in the plugin 😎
You know you want to 😉
like-fill
1

July 27, 2018 at 9:29pm
Woop woop! Awesome news, thanks for the hard work!