Add future Context API example + problem example

rickbeerendonk · Jan 26, 2018 · 72c9439 · 72c9439
1 parent d430e03
commit 72c9439
Show file tree

Hide file tree

Showing 17 changed files with 18,778 additions and 0 deletions.
diff --git a/14 - Context - c. problem/systemjs/javascript/jsx/One.jsx b/14 - Context - c. problem/systemjs/javascript/jsx/One.jsx
@@ -0,0 +1,35 @@
+/*! Mozilla Public License Version 2.0 !*/
+/*! Copyright © 2018 Rick Beerendonk   !*/
+
+/* eslint react/prop-types:"off" */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import Two from './Two';
+
+export default class One extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { color: this.props.color };
+
+    this.onSwitch = this.onSwitch.bind(this);
+  }
+  getChildContext() {
+    return { color: this.state.color };
+  }
+  onSwitch() {
+    this.setState(prevState => ({ color: prevState.color === 'red' ? 'green' : 'red' }));
+  }
+  render() {
+    return (
+      <React.Fragment>
+        <Two />
+        <button onClick={this.onSwitch}>Switch color</button>
+      </React.Fragment>
+    );
+  }
+}
+One.childContextTypes = {
+  color: PropTypes.string
+};
diff --git a/14 - Context - c. problem/systemjs/javascript/jsx/Three.jsx b/14 - Context - c. problem/systemjs/javascript/jsx/Three.jsx
@@ -0,0 +1,16 @@
+/*! Mozilla Public License Version 2.0 !*/
+/*! Copyright © 2018 Rick Beerendonk   !*/
+
+/* eslint react/prop-types:"off" */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default class Three extends React.Component {
+  render() {
+    return <h1 style={{ color: this.context.color }}>Three</h1>;
+  }
+}
+Three.contextTypes = {
+  color: PropTypes.string
+}
diff --git a/14 - Context - c. problem/systemjs/javascript/jsx/Two.jsx b/14 - Context - c. problem/systemjs/javascript/jsx/Two.jsx
@@ -0,0 +1,19 @@
+/*! Mozilla Public License Version 2.0 !*/
+/*! Copyright © 2018 Rick Beerendonk   !*/
+
+/* eslint react/prop-types:"off" */
+
+import React from 'react';
+
+import Three from './Three';
+
+export default class Two extends React.Component {
+  shouldComponentUpdate() {
+    // Prevents context changes from reaching child components.
+    return false;
+  }
+  render() {
+    return <Three />;
+  }
+}
+
diff --git a/14 - Context - c. problem/systemjs/javascript/jsx/index.html b/14 - Context - c. problem/systemjs/javascript/jsx/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!-- Mozilla Public License Version 2.0 -->
+<!-- Copyright © 2018 Rick Beerendonk -->
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="author" content="Rick Beerendonk">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+  <title>Context - problem (jsx)</title>
+</head>
+<body>
+  <div id="app"></div>
+
+  <script src="../../../../node_modules/systemjs/dist/system.js"></script>
+  <script src="systemjs.config.js"></script>
+  <script>
+    SystemJS.import('main').catch(function(err){ console.error(err); });
+  </script>
+</body>
+</html>
diff --git a/14 - Context - c. problem/systemjs/javascript/jsx/main.jsx b/14 - Context - c. problem/systemjs/javascript/jsx/main.jsx
@@ -0,0 +1,12 @@
+/*! Mozilla Public License Version 2.0 !*/
+/*! Copyright © 2018 Rick Beerendonk   !*/
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import One from './One';
+
+ReactDOM.render(
+  <One color="red" />,
+  document.getElementById('app')
+);
diff --git a/14 - Context - c. problem/systemjs/javascript/jsx/systemjs.config.js b/14 - Context - c. problem/systemjs/javascript/jsx/systemjs.config.js
@@ -0,0 +1,32 @@
+/*! Mozilla Public License Version 2.0 !*/
+/*! Copyright © 2018 Rick Beerendonk   !*/
+
+/* global SystemJS */
+
+SystemJS.config({
+  meta: {
+    '*.jsx': {
+      babelOptions: {
+        es2015: true,
+        react: true
+      }
+    }
+  },
+  paths: {
+    // paths serve as alias
+    'npm:': '../../../../node_modules/'
+  },
+  map: {
+    'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
+    'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js',
+    'prop-types': 'npm:prop-types/prop-types.js',
+    'react': 'npm:react/umd/react.development.js',
+    'react-dom': 'npm:react-dom/umd/react-dom.development.js'
+  },
+  packages: {
+    '.': {
+      defaultExtension: 'jsx'
+    }
+  },
+  transpiler: 'plugin-babel'
+});
diff --git a/14 - Context - d. solution (vNEXT)/systemjs/javascript/jsx/One.jsx b/14 - Context - d. solution (vNEXT)/systemjs/javascript/jsx/One.jsx
@@ -0,0 +1,29 @@
+/*! Mozilla Public License Version 2.0 !*/
+/*! Copyright © 2018 Rick Beerendonk   !*/
+
+/* eslint react/prop-types:"off" */
+
+import React from 'react';
+
+import ColorContext from './color-context';
+import Two from './Two';
+
+export default class One extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { color: this.props.color };
+
+    this.onSwitch = this.onSwitch.bind(this);
+  }
+  onSwitch() {
+      this.setState(prevState => ({ color: prevState.color === 'red' ? 'green' : 'red' }));
+  }
+  render() {
+    return (
+      <ColorContext.Provider value={this.state.color}>
+        <Two />
+        <button onClick={this.onSwitch}>Switch color</button>
+      </ColorContext.Provider>
+    );
+  }
+}
diff --git a/14 - Context - d. solution (vNEXT)/systemjs/javascript/jsx/Three.jsx b/14 - Context - d. solution (vNEXT)/systemjs/javascript/jsx/Three.jsx
@@ -0,0 +1,17 @@
+/*! Mozilla Public License Version 2.0 !*/
+/*! Copyright © 2018 Rick Beerendonk   !*/
+
+/* eslint react/prop-types:"off" */
+
+import ColorContext from './color-context';
+import React from 'react';
+
+export default class Three extends React.Component {
+  render() {
+    return (
+      <ColorContext.Consumer>
+        {color => <h1 style={{ color }}>Three</h1>}
+      </ColorContext.Consumer>
+    );
+  }
+}
diff --git a/14 - Context - d. solution (vNEXT)/systemjs/javascript/jsx/Two.jsx b/14 - Context - d. solution (vNEXT)/systemjs/javascript/jsx/Two.jsx
@@ -0,0 +1,20 @@
+/*! Mozilla Public License Version 2.0 !*/
+/*! Copyright © 2018 Rick Beerendonk   !*/
+
+/* eslint react/prop-types:"off" */
+
+import React from 'react';
+
+import Three from './Three';
+
+export default class Two extends React.Component {
+  shouldComponentUpdate() {
+    // Prevents legacy context changes from reaching child components.
+    // New context API fixes this.
+    return false;
+  }
+  render() {
+    return <Three />;
+  }
+}
+
diff --git a/14 - Context - d. solution (vNEXT)/systemjs/javascript/jsx/color-context.jsx b/14 - Context - d. solution (vNEXT)/systemjs/javascript/jsx/color-context.jsx
@@ -0,0 +1,17 @@
+/*! Mozilla Public License Version 2.0 !*/
+/*! Copyright © 2018 Rick Beerendonk   !*/
+
+import React from 'react';
+
+// See: https://github.com/reactjs/rfcs/blob/master/text/0002-new-version-of-context.md
+const ColorContext = React.unstable_createContext('black');
+
+ColorContext.Provider = props => {
+  return ColorContext.provide(props.value, props.children);
+}
+
+ColorContext.Consumer = props => {
+  return ColorContext.consume(props.children)
+}
+
+export default ColorContext;
diff --git a/14 - Context - d. solution (vNEXT)/systemjs/javascript/jsx/index.html b/14 - Context - d. solution (vNEXT)/systemjs/javascript/jsx/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!-- Mozilla Public License Version 2.0 -->
+<!-- Copyright © 2018 Rick Beerendonk -->
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="author" content="Rick Beerendonk">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+  <title>Context - solution (vNEXT) (jsx)</title>
+</head>
+<body>
+  <div id="app"></div>
+
+  <script src="../../../../node_modules/systemjs/dist/system.js"></script>
+  <script src="systemjs.config.js"></script>
+  <script>
+    SystemJS.import('main').catch(function(err){ console.error(err); });
+  </script>
+</body>
+</html>
diff --git a/14 - Context - d. solution (vNEXT)/systemjs/javascript/jsx/main.jsx b/14 - Context - d. solution (vNEXT)/systemjs/javascript/jsx/main.jsx
@@ -0,0 +1,12 @@
+/*! Mozilla Public License Version 2.0 !*/
+/*! Copyright © 2018 Rick Beerendonk   !*/
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import One from './One';
+
+ReactDOM.render(
+  <One color="red" />,
+  document.getElementById('app')
+);
diff --git a/14 - Context - d. solution (vNEXT)/systemjs/javascript/jsx/systemjs.config.js b/14 - Context - d. solution (vNEXT)/systemjs/javascript/jsx/systemjs.config.js
@@ -0,0 +1,35 @@
+/*! Mozilla Public License Version 2.0 !*/
+/*! Copyright © 2018 Rick Beerendonk   !*/
+
+/* global SystemJS */
+
+SystemJS.config({
+  meta: {
+    '*.jsx': {
+      babelOptions: {
+        es2015: true,
+        react: true
+      }
+    }
+  },
+  paths: {
+    // paths serve as alias
+    'npm:': '../../../../node_modules/'
+  },
+  map: {
+    'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
+    'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js',
+    'prop-types': 'npm:prop-types/prop-types.js',
+    'react': './vnext/react.development.js',
+    'react-dom': './vnext/react-dom.development.js'
+  },
+  packages: {
+    '.': {
+      defaultExtension: 'jsx'
+    },
+    './vnext': {
+      defaultExtension: 'js'
+    }
+  },
+  transpiler: 'plugin-babel'
+});