Test language features

Author: Enoah Netzach

packages/react-scripts/templates/kitchensink/src/App.js

@@ -1,29 +1,88 @@
-// @flow
 import React from 'react';
 
 class App extends React.Component {
   constructor(props) {
-    super(props)
+    super(props);
 
-    this.state = { feature: null }
+    this.state = { feature: null };
   }
 
   componentDidMount() {
     switch (location.hash.slice(1)) {
-      case 'promises':
-        require.ensure(['./features/Promises'], () => {
-          this.setState({ feature: require('./features/Promises').default })
-        });
+      case 'array-destructuring':
+        require.ensure(['./features/syntax/ArrayDestructuring'], () =>
+          this.setState({ feature: require('./features/syntax/ArrayDestructuring').default })
+        );
         break;
-      case 'generators':
-        require.ensure(['./features/Generators'], () => {
-          this.setState({ feature: require('./features/Generators').default })
-        });
+      case 'array-spread':
+        require.ensure(['./features/syntax/ArraySpread'], () =>
+          this.setState({ feature: require('./features/syntax/ArraySpread').default })
+        );
         break;
       case 'async-await':
-        require.ensure(['./features/AsyncAwait'], () => {
-          this.setState({ feature: require('./features/AsyncAwait').default })
-        });
+        require.ensure(['./features/syntax/AsyncAwait'], () =>
+          this.setState({ feature: require('./features/syntax/AsyncAwait').default })
+        );
+        break;
+      case 'class-properties':
+        require.ensure(['./features/syntax/ClassProperties'], () =>
+          this.setState({ feature: require('./features/syntax/ClassProperties').default })
+        );
+        break;
+      case 'computed-properties':
+        require.ensure(['./features/syntax/ComputedProperties'], () =>
+          this.setState({ feature: require('./features/syntax/ComputedProperties').default })
+        );
+        break;
+      case 'custom-interpolation':
+        require.ensure(['./features/syntax/CustomInterpolation'], () =>
+          this.setState({ feature: require('./features/syntax/CustomInterpolation').default })
+        );
+        break;
+      case 'default-parameters':
+        require.ensure(['./features/syntax/DefaultParameters'], () =>
+          this.setState({ feature: require('./features/syntax/DefaultParameters').default })
+        );
+        break;
+      case 'destructuring-and-await':
+        require.ensure(['./features/syntax/DestructuringAndAwait'], () =>
+          this.setState({ feature: require('./features/syntax/DestructuringAndAwait').default })
+        );
+        break;
+      case 'generators':
+        require.ensure(['./features/syntax/Generators'], () =>
+          this.setState({ feature: require('./features/syntax/Generators').default })
+        );
+        break;
+      case 'object-destructuring':
+        require.ensure(['./features/syntax/ObjectDestructuring'], () =>
+          this.setState({ feature: require('./features/syntax/ObjectDestructuring').default })
+        );
+        break;
+      case 'object-spread':
+        require.ensure(['./features/syntax/ObjectSpread'], () =>
+          this.setState({ feature: require('./features/syntax/ObjectSpread').default })
+        );
+        break;
+      case 'promises':
+        require.ensure(['./features/syntax/Promises'], () =>
+          this.setState({ feature: require('./features/syntax/Promises').default })
+        );
+        break;
+      case 'rest-and-default':
+        require.ensure(['./features/syntax/RestAndDefault'], () =>
+          this.setState({ feature: require('./features/syntax/RestAndDefault').default })
+        );
+        break;
+      case 'rest-parameters':
+        require.ensure(['./features/syntax/RestParameters'], () =>
+          this.setState({ feature: require('./features/syntax/RestParameters').default })
+        );
+        break;
+      case 'template-interpolation':
+        require.ensure(['./features/syntax/TemplateInterpolation'], () =>
+          this.setState({ feature: require('./features/syntax/TemplateInterpolation').default })
+        );
         break;
       default:
         this.setState({ feature: null });

packages/react-scripts/templates/kitchensink/src/features/syntax/ArrayDestructuring.js

@@ -0,0 +1,34 @@
+import React from 'react'
+
+function load() {
+  return [
+    [1, '1'],
+    [2, '2'],
+    [3, '3'],
+    [4, '4']
+  ];
+}
+
+export default class extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { users: [] };
+  }
+
+  async componentDidMount() {
+    const users = load();
+    this.setState({ users });
+  }
+
+  render() {
+    return (
+      <div id="feature-array-destructuring">
+        {this.state.users.map(user => {
+          const [id, name] = user;
+          return <div key={id}>{name}</div>
+        })}
+      </div>
+    );
+  }
+}

packages/react-scripts/templates/kitchensink/src/features/syntax/ArrayDestructuring.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ArrayDestructuring from './ArrayDestructuring';
+
+describe('array destructuring', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<ArrayDestructuring />, div);
+  });
+});

packages/react-scripts/templates/kitchensink/src/features/syntax/ArraySpread.js

@@ -0,0 +1,33 @@
+import React from 'react'
+
+function load(users) {
+  return [
+    { id: 1, name: '1' },
+    { id: 2, name: '2' },
+    { id: 3, name: '3' },
+    ...users
+  ];
+}
+
+export default class extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { users: [] };
+  }
+
+  async componentDidMount() {
+    const users = load([{ id: 42, name: '42' }]);
+    this.setState({ users });
+  }
+
+  render() {
+    return (
+      <div id="feature-array-spread">
+        {this.state.users.map(user => (
+          <div key={user.id}>{user.name}</div>
+        ))}
+      </div>
+    );
+  }
+}

packages/react-scripts/templates/kitchensink/src/features/syntax/ArraySpread.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ArraySpread from './ArraySpread';
+
+describe('array spread', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<ArraySpread />, div);
+  });
+});

packages/react-scripts/templates/kitchensink/src/features/AsyncAwait.js renamed to packages/react-scripts/templates/kitchensink/src/features/syntax/AsyncAwait.js

@@ -11,9 +11,9 @@ async function load() {
 
 export default class extends React.Component {
   constructor(props) {
-    super(props)
+    super(props);
 
-    this.state = { users: [] }
+    this.state = { users: [] };
   }
 
   async componentDidMount() {
@@ -28,6 +28,6 @@ export default class extends React.Component {
           <div key={user.id}>{user.name}</div>
         ))}
       </div>
-    )
+    );
   }
 }

packages/react-scripts/templates/kitchensink/src/features/syntax/AsyncAwait.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import AsyncAwait from './AsyncAwait';
+
+describe('async/await', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<AsyncAwait />, div);
+  });
+});

packages/react-scripts/templates/kitchensink/src/features/syntax/ClassProperties.js

@@ -0,0 +1,20 @@
+import React from 'react'
+
+export default class extends React.Component {
+  users = [
+    { id: 1, name: '1' },
+    { id: 2, name: '2' },
+    { id: 3, name: '3' },
+    { id: 4, name: '4' }
+  ];
+
+  render() {
+    return (
+      <div id="feature-class-properties">
+        {this.users.map(user => (
+          <div key={user.id}>{user.name}</div>
+        ))}
+      </div>
+    );
+  }
+}

packages/react-scripts/templates/kitchensink/src/features/syntax/ClassProperties.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ClassProperties from './ClassProperties';
+
+describe('class properties', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<ClassProperties />, div);
+  });
+});

packages/react-scripts/templates/kitchensink/src/features/syntax/ComputedProperties.js

@@ -0,0 +1,33 @@
+import React from 'react'
+
+function load(prefix) {
+  return [
+    { id: 1, [prefix + 'name']: '1' },
+    { id: 2, [prefix + 'name']: '2' },
+    { id: 3, [prefix + 'name']: '3' },
+    { id: 4, [prefix + 'name']: '4' }
+  ];
+}
+
+export default class extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { users: [] };
+  }
+
+  async componentDidMount() {
+    const users = load('user_');
+    this.setState({ users });
+  }
+
+  render() {
+    return (
+      <div id="feature-computed-properties">
+        {this.state.users.map(user => (
+          <div key={user.id}>{user.user_name}</div>
+        ))}
+      </div>
+    );
+  }
+}

packages/react-scripts/templates/kitchensink/src/features/syntax/ComputedProperties.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ComputedProperties from './ComputedProperties';
+
+describe('computed properties', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<ComputedProperties />, div);
+  });
+});

packages/react-scripts/templates/kitchensink/src/features/syntax/CustomInterpolation.js

@@ -0,0 +1,43 @@
+import React from 'react'
+
+const styled = ([style]) => style.trim()
+  .split(/\s*;\s*/)
+  .map(rule => rule.split(/\s*:\s*/))
+  .reduce((rules, rule) => ({ ...rules, [rule[0]]: rule[1] }), {});
+
+function load() {
+  return [
+    { id: 1, name: '1' },
+    { id: 2, name: '2' },
+    { id: 3, name: '3' },
+    { id: 4, name: '4' }
+  ];
+}
+
+export default class extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { users: [] };
+  }
+
+  async componentDidMount() {
+    const users = load();
+    this.setState({ users });
+  }
+
+  render() {
+    const veryInlineStyle = styled`
+      background: palevioletred;
+      color: papayawhip;
+    `;
+
+    return (
+      <div id="feature-custom-interpolation">
+        {this.state.users.map(user => (
+          <div key={user.id} style={veryInlineStyle}>{user.name}</div>
+        ))}
+      </div>
+    );
+  }
+}

packages/react-scripts/templates/kitchensink/src/features/syntax/CustomInterpolation.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import CustomInterpolation from './CustomInterpolation';
+
+describe('custom interpolation', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<CustomInterpolation />, div);
+  });
+});

packages/react-scripts/templates/kitchensink/src/features/syntax/DefaultParameters.js

@@ -0,0 +1,33 @@
+import React from 'react'
+
+function load(id = 0) {
+  return [
+    { id: id + 1, name: '1' },
+    { id: id + 2, name: '2' },
+    { id: id + 3, name: '3' },
+    { id: id + 4, name: '4' }
+  ];
+}
+
+export default class extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { users: [] };
+  }
+
+  async componentDidMount() {
+    const users = load();
+    this.setState({ users });
+  }
+
+  render() {
+    return (
+      <div id="feature-default-parameters">
+        {this.state.users.map(user => (
+          <div key={user.id}>{user.name}</div>
+        ))}
+      </div>
+    );
+  }
+}