FormidableLabs/radium-experiments-v0.22

Name: radium-experiments-v0.22

Owner: Formidable

Description: Experiments for Radium v0.22 https://github.com/FormidableLabs/radium/pull/968

Created: 2018-02-08 20:25:32.0

Updated: 2018-02-08 21:25:11.0

Pushed: 2018-02-09 18:03:35.0

Homepage: null

Size: 79

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Radium v0.22 Experiments

Check out our breaking changes in radium@0.22.x.

Node

Basic SSR.

rn run node
  <div style="display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex" data-radium="true" data-reactroot=""></div>
e:  function

Babel

Our babel examples, transpile first, then run SSR in node on transpiled code.

CommonJS Build

rn run babel:cjs
  <div style="display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex" data-radium="true" data-reactroot=""></div>
e:  function

Output: babel/dist/cjs.js

ESM Build

(Execution via std/esm for modules)

rn run babel:esm
  <div style="display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex" data-radium="true" data-reactroot=""></div>
e:  function

Output: babel/dist/esm.js

Browser

UMD

A webpage using the UMD dist.

rn run browser:umd

(Opens browser to local filesystem).

CommonJS Build

A webpage with a CommonJS build that does not use Babel, but uses modern webpack. Because webpack2+ uses package.json:module fields, we have to make this adjustment:

um = Radium.default;

See it in action:

rn run browser:cjs

(Builds and opens browser to local filesystem).

CommonJS Build with Webpack Alias

A webpage with a CommonJS build that does not use Babel, but uses modern webpack. We avoid the adjustment of Radium = Radium.default; by adding this alias in our webpack config to force the special index pointed to by package.json:main:

solve: {
alias: {
  radium: require.resolve("radium/index")
}

See it in action:

rn run browser:cjs-alias

(Builds and opens browser to local filesystem).

ESM Build

The most standard webpack build.

rn run browser:esm

(Builds and opens browser to local filesystem).