├── .babelrc ├── .gitignore ├── README.md ├── package.json ├── src ├── App.js ├── Thing.js ├── cache.js ├── index.html └── index.js ├── vendor ├── react-art.development.js ├── react-art.production.min.js ├── react-dom-server.browser.development.js ├── react-dom-server.browser.production.min.js ├── react-dom-test-utils.development.js ├── react-dom-test-utils.production.min.js ├── react-dom-unstable-native-dependencies.development.js ├── react-dom-unstable-native-dependencies.production.min.js ├── react-dom.development.js ├── react-dom.production.min.js ├── react-is.development.js ├── react-is.production.min.js ├── react-scheduler.development.js ├── react-scheduler.production.min.js ├── react-test-renderer-shallow.development.js ├── react-test-renderer-shallow.production.min.js ├── react-test-renderer.development.js ├── react-test-renderer.production.min.js ├── react.development.js └── react.production.min.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env", "stage-0", "react"], 3 | "plugins": ["react-hot-loader/babel"] 4 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .cache 2 | node_modules 3 | dist 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Suspense Starter 2 | 3 | So you can get ahead of it all... 4 | 5 | 6 | ## Getting started 7 | 8 | To get started, clone this repository and install the dependencies. 9 | 10 | ```bash 11 | git clone git@github.com:palmerhq/react-suspense-starter.git 12 | cd react-suspense-starter 13 | yarn 14 | yarn start 15 | ``` 16 | 17 | Open up `localhost:1234` and you are good to go. Unlike the current release of React (16.4), a suspense-enabled build of React and ReactDOM live in the `vendor` directory. These are then aliased with Parcel. 18 | 19 | ## Projects to play with 20 | 21 | - [palmerhq/router-suspense](https://github.com/palmerhq/router-suspense) - Suspense-friendly React Router 4 clone 22 | - [@reach/router](https://github.com/reach/router) - Ryan's new Router 23 | - [threepointone/css-suspense](https://github.com/threepointone/css-suspense) - CSS loading for React 24 | - [fresh-async-react](https://github.com/sw-yx/fresh-async-react) - More Suspense stuff (code, demos, and discussions). 25 | 26 | --- 27 | MIT License 28 | 29 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-suspense-starter", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "dependencies": { 7 | "simple-cache-provider": "^0.7.0", 8 | "babel-preset-env": "^1.7.0", 9 | "babel-preset-react": "^6.24.1", 10 | "babel-preset-stage-0": "^6.24.1", 11 | "cross-env": "^5.2.0", 12 | "parcel": "^1.9.7", 13 | "parcel-bundler": "^1.9.7", 14 | "react-hot-loader": "^4.3.4" 15 | }, 16 | "alias": { 17 | "react": "./vendor/react.development.js", 18 | "react-dom": "./vendor/react-dom.development.js" 19 | }, 20 | "scripts": { 21 | "start": "cross-env NODE_ENV=development parcel src/index.html" 22 | } 23 | } -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createCache, createResource } from 'simple-cache-provider'; 3 | import { cache } from './cache'; 4 | import { hot } from 'react-hot-loader'; 5 | 6 | const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)); 7 | 8 | // Lazy load! 9 | const getThing = createResource( 10 | () => sleep(1000).then(() => import('./Thing').then(mod => mod.default)), 11 | thing => thing 12 | ); 13 | 14 | const Thing = props => { 15 | const Comp = getThing.read(cache, props); 16 | return ; 17 | }; 18 | 19 | function App() { 20 | return ( 21 | 22 |

Suspense

23 | 🌀 'Loading....'}> 24 | 25 | 26 |
27 | ); 28 | } 29 | 30 | // Setup react-hot-loader for Parcel. 31 | // This is removed in production automagically. 32 | export default hot(module)(App); 33 | -------------------------------------------------------------------------------- /src/Thing.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function Thing() { 4 | return
Thing!!!!!
; 5 | } 6 | 7 | export default Thing; 8 | -------------------------------------------------------------------------------- /src/cache.js: -------------------------------------------------------------------------------- 1 | import { createCache } from 'simple-cache-provider'; 2 | 3 | export let cache; 4 | function initCache() { 5 | cache = createCache(initCache); 6 | } 7 | initCache(); 8 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Suspense 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { unstable_createRoot as createRoot } from 'react-dom'; 3 | import App from './App'; 4 | 5 | const root = createRoot(document.getElementById('app')); 6 | 7 | root.render(); 8 | -------------------------------------------------------------------------------- /vendor/react-dom-server.browser.production.min.js: -------------------------------------------------------------------------------- 1 | /** @license React v16.4.1 2 | * react-dom-server.browser.production.min.js 3 | * 4 | * Copyright (c) 2013-present, Facebook, Inc. 5 | * 6 | * This source code is licensed under the MIT license found in the 7 | * LICENSE file in the root directory of this source tree. 8 | */ 9 | 'use strict';(function(t,w){"object"===typeof exports&&"undefined"!==typeof module?module.exports=w(require("react")):"function"===typeof define&&define.amd?define(["react"],w):t.ReactDOMServer=w(t.React)})(this,function(t){function w(a,b,d,c,k,f,h,m){if(!a){a=void 0;if(void 0===b)a=Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[d,c,k,f,h,m],p=0;a=Error(b.replace(/%s/g,function(){return l[p++]}));a.name= 10 | "Invariant Violation"}a.framesToPop=1;throw a;}}function u(a){for(var b=arguments.length-1,d="https://reactjs.org/docs/error-decoder.html?invariant="+a,c=0;cb}return!1}function q(a,b,d,c,k){this.acceptsBooleans=2=== 13 | b||3===b||4===b;this.attributeName=c;this.attributeNamespace=k;this.mustUseProperty=d;this.propertyName=a;this.type=b}function z(a){if("boolean"===typeof a||"number"===typeof a)return""+a;a=""+a;var b=ca.exec(a);if(b){var d="",c,k=0;for(c=b.index;c