From d2d0cd74c4a33d62d15737abd2fce0de180e9c29 Mon Sep 17 00:00:00 2001 From: Javier Calzado Date: Tue, 14 May 2019 09:46:09 +0200 Subject: [PATCH 1/4] Upload 2 samples implementing suspense like components. Readme still pending on both. --- examples/06-suspense-like/.babelrc | 16 ++++ examples/06-suspense-like/package.json | 49 ++++++++++ examples/06-suspense-like/src/api.ts | 24 +++++ examples/06-suspense-like/src/app.tsx | 40 ++++++++ examples/06-suspense-like/src/index.html | 14 +++ examples/06-suspense-like/src/index.tsx | 12 +++ examples/06-suspense-like/src/styles.ts | 25 +++++ examples/06-suspense-like/tsconfig.json | 16 ++++ examples/06-suspense-like/tslint.json | 92 +++++++++++++++++++ examples/06-suspense-like/webpack.config.js | 41 +++++++++ examples/07-suspense-custom/.babelrc | 16 ++++ examples/07-suspense-custom/package.json | 49 ++++++++++ examples/07-suspense-custom/src/api.ts | 14 +++ examples/07-suspense-custom/src/app.tsx | 52 +++++++++++ examples/07-suspense-custom/src/index.html | 14 +++ examples/07-suspense-custom/src/index.tsx | 12 +++ examples/07-suspense-custom/src/styles.ts | 34 +++++++ examples/07-suspense-custom/tsconfig.json | 16 ++++ examples/07-suspense-custom/tslint.json | 92 +++++++++++++++++++ examples/07-suspense-custom/webpack.config.js | 41 +++++++++ 20 files changed, 669 insertions(+) create mode 100644 examples/06-suspense-like/.babelrc create mode 100644 examples/06-suspense-like/package.json create mode 100644 examples/06-suspense-like/src/api.ts create mode 100644 examples/06-suspense-like/src/app.tsx create mode 100644 examples/06-suspense-like/src/index.html create mode 100644 examples/06-suspense-like/src/index.tsx create mode 100644 examples/06-suspense-like/src/styles.ts create mode 100644 examples/06-suspense-like/tsconfig.json create mode 100644 examples/06-suspense-like/tslint.json create mode 100644 examples/06-suspense-like/webpack.config.js create mode 100644 examples/07-suspense-custom/.babelrc create mode 100644 examples/07-suspense-custom/package.json create mode 100644 examples/07-suspense-custom/src/api.ts create mode 100644 examples/07-suspense-custom/src/app.tsx create mode 100644 examples/07-suspense-custom/src/index.html create mode 100644 examples/07-suspense-custom/src/index.tsx create mode 100644 examples/07-suspense-custom/src/styles.ts create mode 100644 examples/07-suspense-custom/tsconfig.json create mode 100644 examples/07-suspense-custom/tslint.json create mode 100644 examples/07-suspense-custom/webpack.config.js diff --git a/examples/06-suspense-like/.babelrc b/examples/06-suspense-like/.babelrc new file mode 100644 index 0000000..592e2ac --- /dev/null +++ b/examples/06-suspense-like/.babelrc @@ -0,0 +1,16 @@ +{ + "presets": [ + [ + "@babel/preset-env", + { + "useBuiltIns": "usage" + } + ], + "@babel/preset-typescript", + "@babel/preset-react" + ], + "plugins": [ + "@babel/proposal-class-properties", + "@babel/proposal-object-rest-spread" + ] +} diff --git a/examples/06-suspense-like/package.json b/examples/06-suspense-like/package.json new file mode 100644 index 0000000..860ac71 --- /dev/null +++ b/examples/06-suspense-like/package.json @@ -0,0 +1,49 @@ +{ + "name": "06-suspense-like", + "version": "1.0.0", + "description": "React Promise Tracker sample with suspense-like component", + "keywords": [ + "react", + "promise", + "tracker", + "hook", + "hooks", + "typescript" + ], + "author": "Javier Calzado (javi.calzado@lemoncode.net)", + "license": "MIT", + "main": "src/index.tsx", + "scripts": { + "start": "webpack-dev-server --mode development --inline --hot --open", + "typecheck": "tsc --pretty --noEmit", + "build": "npm run typecheck && webpack --mode development" + }, + "dependencies": { + "@babel/polyfill": "^7.2.5", + "@material-ui/core": "3.9.3", + "react": "16.8.4", + "react-dom": "16.8.4", + "react-promise-tracker": "2.0.0" + }, + "devDependencies": { + "@babel/cli": "^7.2.3", + "@babel/core": "^7.2.2", + "@babel/plugin-proposal-class-properties": "^7.1.0", + "@babel/plugin-proposal-object-rest-spread": "^7.0.0", + "@babel/preset-env": "^7.3.1", + "@babel/preset-react": "^7.0.0", + "@babel/preset-typescript": "^7.3.3", + "@types/node": "11.13.4", + "@types/react": "16.8.8", + "@types/react-dom": "16.8.2", + "babel-loader": "^8.0.6", + "core-js": "^2.6.5", + "html-webpack-plugin": "^3.2.0", + "tslint": "^5.16.0", + "tslint-react": "^4.0.0", + "typescript": "^3.4.5", + "webpack": "^4.29.3", + "webpack-cli": "^3.2.3", + "webpack-dev-server": "^3.1.14" + } +} diff --git a/examples/06-suspense-like/src/api.ts b/examples/06-suspense-like/src/api.ts new file mode 100644 index 0000000..6acbc5e --- /dev/null +++ b/examples/06-suspense-like/src/api.ts @@ -0,0 +1,24 @@ +const fetchWithDelay = (url: string, delay: number): Promise => + new Promise(resolve => setTimeout(() => resolve(fetch(url, { method: "GET" })), delay)); + +export interface Quote { + body: string; + author: string; +} + +export const getQuote = () => + fetchWithDelay("https://favqs.com/api/qotd", Math.random() * 3000) + .then(result => result.json()) + .then<{ quote: Quote }>(result => result.quote); + +const arrayBufferToBase64 = buffer => { + let binary = ""; + const bytes = [].slice.call(new Uint8Array(buffer)); + bytes.forEach(b => (binary += String.fromCharCode(b))); + return window.btoa(binary); +}; + +export const getPicture = (width: number, height: number) => + fetchWithDelay(`https://picsum.photos/${width}/${height}`, Math.random() * 3000).then(res => + res.arrayBuffer().then(buffer => "data:image/jpeg;base64," + arrayBufferToBase64(buffer)) + ); diff --git a/examples/06-suspense-like/src/app.tsx b/examples/06-suspense-like/src/app.tsx new file mode 100644 index 0000000..154621b --- /dev/null +++ b/examples/06-suspense-like/src/app.tsx @@ -0,0 +1,40 @@ +import * as React from "react"; +import CircularProgress from "@material-ui/core/CircularProgress"; +import Typography from "@material-ui/core/Typography"; +import Button from "@material-ui/core/Button"; +import { WithStyles, withStyles } from "@material-ui/core/styles"; +import { trackPromise, usePromiseTracker } from "react-promise-tracker"; +import { Quote, getQuote, getPicture } from "./api"; +import { styles } from "./styles"; + + +const Suspense: React.FC<{ tag: string, className?: string }> = ({ tag, className, children }) => { + const { promiseInProgress } = usePromiseTracker({ area: tag, delay: 0 }); + return promiseInProgress ? : <>{children}; +}; + +const AppInner: React.FC> = ({classes}) => { + const [quote, setQuote] = React.useState({ body: "", author: "" }); + const [picture, setPicture] = React.useState(); + const loadData = React.useCallback(() => { + trackPromise(getQuote(), "quote").then(setQuote); + trackPromise(getPicture(500, 200), "picture").then(setPicture); + }, []); + + React.useEffect(() => loadData(), []); + + return ( +
+ + + + + + {quote.body} + {quote.author} + +
+ ); +}; + +export const App = withStyles(styles)(AppInner); diff --git a/examples/06-suspense-like/src/index.html b/examples/06-suspense-like/src/index.html new file mode 100644 index 0000000..0c3d078 --- /dev/null +++ b/examples/06-suspense-like/src/index.html @@ -0,0 +1,14 @@ + + + + + + + React Promise Tracker - Suspense + + + +
+ + + diff --git a/examples/06-suspense-like/src/index.tsx b/examples/06-suspense-like/src/index.tsx new file mode 100644 index 0000000..a9cecc4 --- /dev/null +++ b/examples/06-suspense-like/src/index.tsx @@ -0,0 +1,12 @@ +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import CssBaseline from "@material-ui/core/CssBaseline"; +import { App } from "./app"; + +ReactDOM.render( + <> + + + , + document.getElementById("root") +); diff --git a/examples/06-suspense-like/src/styles.ts b/examples/06-suspense-like/src/styles.ts new file mode 100644 index 0000000..f9e91d9 --- /dev/null +++ b/examples/06-suspense-like/src/styles.ts @@ -0,0 +1,25 @@ +import { createStyles } from "@material-ui/core/styles"; + +export const styles = () => createStyles({ + progress: { + margin: "1rem", + }, + container: { + display: "flex", + flexDirection: "column", + alignItems: "center", + padding: "2rem", + }, + button: { + marginBottom: "2rem", + }, + pic: { + marginBottom: "1.25rem", + borderRadius: "8px", + }, + text: { + marginBottom: "0.75rem", + } +}); + + diff --git a/examples/06-suspense-like/tsconfig.json b/examples/06-suspense-like/tsconfig.json new file mode 100644 index 0000000..0a8013b --- /dev/null +++ b/examples/06-suspense-like/tsconfig.json @@ -0,0 +1,16 @@ +{ + "compilerOptions": { + "target": "es6", + "module": "es6", + "moduleResolution": "node", + "declaration": false, + "noImplicitAny": false, + "jsx": "react", + "sourceMap": true, + "noLib": false, + "suppressImplicitAnyIndexErrors": true, + "allowSyntheticDefaultImports": true, + }, + "compileOnSave": false, + "exclude": ["node_modules"] +} diff --git a/examples/06-suspense-like/tslint.json b/examples/06-suspense-like/tslint.json new file mode 100644 index 0000000..ad08036 --- /dev/null +++ b/examples/06-suspense-like/tslint.json @@ -0,0 +1,92 @@ +{ + "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"], + "defaultSeverity": "warning", + "rules": { + "align": [true, "parameters", "statements"], + "array-type": false, + "arrow-parens": false, + "class-name": true, + "comment-format": [true, "check-space"], + "curly": false, + "eofline": true, + "forin": false, + "import-spacing": true, + "indent": [true, "spaces"], + "interface-name": [true, "never-prefix"], + "jsdoc-format": true, + "jsx-no-lambda": false, + "jsx-no-multiline-js": false, + "label-position": true, + "max-line-length": [true, 120], + "member-ordering": false, + "member-access": false, + "no-any": false, + "no-arg": true, + "no-bitwise": true, + "no-console": false, + "no-consecutive-blank-lines": [true, 2], + "no-construct": true, + "no-debugger": true, + "no-default-export": false, + "no-duplicate-variable": true, + "no-empty": true, + "no-empty-interface": false, + "no-eval": true, + "no-implicit-dependencies": false, + "no-internal-module": true, + "no-object-literal-type-assertion": false, + "no-shadowed-variable": true, + "no-string-literal": false, + "no-submodule-imports": false, + "no-trailing-whitespace": true, + "no-unsafe-finally": true, + "no-unused-expression": true, + "no-var-keyword": true, + "no-var-requires": false, + "object-literal-key-quotes": [true, "as-needed"], + "object-literal-sort-keys": false, + "one-line": [true, "check-catch", "check-else", "check-open-brace", "check-whitespace"], + "only-arrow-functions": false, + "ordered-imports": false, + "quotemark": [true, "double", "jsx-double"], + "radix": false, + "semicolon": [true, "always", "strict-bound-class-methods"], + "trailing-comma": [ + true, + { + "multiline": { + "objects": "always", + "arrays": "always", + "imports": "always", + "exports": "always", + "typeLiterals": "always" + }, + "singleline": "never", + "esSpecCompliant": true + } + ], + "triple-equals": [true, "allow-null-check"], + "typedef": [true, "parameter", "property-declaration"], + "typedef-whitespace": [ + true, + { + "call-signature": "nospace", + "index-signature": "nospace", + "parameter": "nospace", + "property-declaration": "nospace", + "variable-declaration": "nospace" + } + ], + "variable-name": [true, "ban-keywords", "check-format", "allow-leading-underscore", "allow-pascal-case"], + "whitespace": [ + true, + "check-branch", + "check-decl", + "check-module", + "check-operator", + "check-separator", + "check-type", + "check-typecast" + ] + } +} diff --git a/examples/06-suspense-like/webpack.config.js b/examples/06-suspense-like/webpack.config.js new file mode 100644 index 0000000..d260db4 --- /dev/null +++ b/examples/06-suspense-like/webpack.config.js @@ -0,0 +1,41 @@ +const HtmlWebpackPlugin = require("html-webpack-plugin"); +const path = require("path"); + +const basePath = __dirname; + +module.exports = { + context: path.join(basePath, "src"), + resolve: { + extensions: [".js", ".ts", ".tsx"], + }, + entry: ["./index.tsx"], + output: { + path: path.join(basePath, "dist"), + filename: "bundle.js" + }, + devtool: "source-map", + devServer: { + contentBase: "./dist", // Content base + inline: true, // Enable watch and live reload + host: "localhost", + port: 8080, + stats: "errors-only" + }, + module: { + rules: [ + { + test: /\.(tsx?)|(js)$/, + exclude: /node_modules/, + loader: "babel-loader", + }, + ] + }, + plugins: [ + //Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin + new HtmlWebpackPlugin({ + filename: "index.html", //Name of file in ./dist/ + template: "index.html", //Name of template in ./src + hash: true + }) + ] +}; diff --git a/examples/07-suspense-custom/.babelrc b/examples/07-suspense-custom/.babelrc new file mode 100644 index 0000000..592e2ac --- /dev/null +++ b/examples/07-suspense-custom/.babelrc @@ -0,0 +1,16 @@ +{ + "presets": [ + [ + "@babel/preset-env", + { + "useBuiltIns": "usage" + } + ], + "@babel/preset-typescript", + "@babel/preset-react" + ], + "plugins": [ + "@babel/proposal-class-properties", + "@babel/proposal-object-rest-spread" + ] +} diff --git a/examples/07-suspense-custom/package.json b/examples/07-suspense-custom/package.json new file mode 100644 index 0000000..4c856f2 --- /dev/null +++ b/examples/07-suspense-custom/package.json @@ -0,0 +1,49 @@ +{ + "name": "07-suspense-custom", + "version": "1.0.0", + "description": "React Promise Tracker sample with suspense-like customizable component", + "keywords": [ + "react", + "promise", + "tracker", + "hook", + "hooks", + "typescript" + ], + "author": "Javier Calzado (javi.calzado@lemoncode.net)", + "license": "MIT", + "main": "src/index.tsx", + "scripts": { + "start": "webpack-dev-server --mode development --inline --hot --open", + "typecheck": "tsc --pretty --noEmit", + "build": "npm run typecheck && webpack --mode development" + }, + "dependencies": { + "@babel/polyfill": "^7.2.5", + "@material-ui/core": "3.9.3", + "react": "16.8.4", + "react-dom": "16.8.4", + "react-promise-tracker": "2.0.0" + }, + "devDependencies": { + "@babel/cli": "^7.2.3", + "@babel/core": "^7.2.2", + "@babel/plugin-proposal-class-properties": "^7.1.0", + "@babel/plugin-proposal-object-rest-spread": "^7.0.0", + "@babel/preset-env": "^7.3.1", + "@babel/preset-react": "^7.0.0", + "@babel/preset-typescript": "^7.3.3", + "@types/node": "11.13.4", + "@types/react": "16.8.8", + "@types/react-dom": "16.8.2", + "babel-loader": "^8.0.6", + "core-js": "^2.6.5", + "html-webpack-plugin": "^3.2.0", + "tslint": "^5.16.0", + "tslint-react": "^4.0.0", + "typescript": "^3.4.5", + "webpack": "^4.29.3", + "webpack-cli": "^3.2.3", + "webpack-dev-server": "^3.1.14" + } +} diff --git a/examples/07-suspense-custom/src/api.ts b/examples/07-suspense-custom/src/api.ts new file mode 100644 index 0000000..3be7335 --- /dev/null +++ b/examples/07-suspense-custom/src/api.ts @@ -0,0 +1,14 @@ +const fetchWithDelay = (url: string, delay: number): Promise => + new Promise(resolve => setTimeout(() => resolve(fetch(url, { method: "GET" })), delay)); + +const arrayBufferToBase64 = buffer => { + let binary = ""; + const bytes = [].slice.call(new Uint8Array(buffer)); + bytes.forEach(b => (binary += String.fromCharCode(b))); + return window.btoa(binary); +}; + +export const getPicture = (width: number, height: number) => + fetchWithDelay(`https://picsum.photos/${width}/${height}`, Math.random() * 3000).then(res => + res.arrayBuffer().then(buffer => "data:image/jpeg;base64," + arrayBufferToBase64(buffer)) + ); diff --git a/examples/07-suspense-custom/src/app.tsx b/examples/07-suspense-custom/src/app.tsx new file mode 100644 index 0000000..643ef21 --- /dev/null +++ b/examples/07-suspense-custom/src/app.tsx @@ -0,0 +1,52 @@ +import * as React from "react"; +import CircularProgress from "@material-ui/core/CircularProgress"; +import Button from "@material-ui/core/Button"; +import { WithStyles, withStyles } from "@material-ui/core/styles"; +import { trackPromise, usePromiseTracker } from "react-promise-tracker"; +import { getPicture } from "./api"; +import { styles } from "./styles"; +import { randomBytes } from "crypto"; + +const Suspense: React.FC<{tag: string, Progress?: React.ReactNode}> = ({ tag, Progress, children }) => { + const { promiseInProgress } = usePromiseTracker({ area: tag, delay: 0 }); + return <>{promiseInProgress ? Progress : children}; +}; + +const randomWidth = () => Math.round(Math.random() * 250 + 80); +const height = 100; + +const RandomPicInner: React.FC<{id: string} & WithStyles> = ({id, classes}) => { + const [picture, setPicture] = React.useState(null); + const [width] = React.useState(randomWidth()); + + React.useEffect(() => { + trackPromise(getPicture(width, height), id).then(setPicture); + }, [width, id]); + return ( +
+ }> + + +
+ + ); +}; +const RandomPic = withStyles(styles)(RandomPicInner); + +const AppInner: React.FC> = ({classes}) => { + const [picIds, setPicIds] = React.useState([]); + const randomize = React.useCallback(() => + setPicIds(Array(16).fill(0).map(id => randomBytes(20).toString("hex"))) + , []); + React.useEffect(() => randomize(), [randomize]); + + return ( +
+ +
+ {picIds.map(id => )} +
+
+ ); +}; +export const App = withStyles(styles)(AppInner); \ No newline at end of file diff --git a/examples/07-suspense-custom/src/index.html b/examples/07-suspense-custom/src/index.html new file mode 100644 index 0000000..0c3d078 --- /dev/null +++ b/examples/07-suspense-custom/src/index.html @@ -0,0 +1,14 @@ + + + + + + + React Promise Tracker - Suspense + + + +
+ + + diff --git a/examples/07-suspense-custom/src/index.tsx b/examples/07-suspense-custom/src/index.tsx new file mode 100644 index 0000000..a9cecc4 --- /dev/null +++ b/examples/07-suspense-custom/src/index.tsx @@ -0,0 +1,12 @@ +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import CssBaseline from "@material-ui/core/CssBaseline"; +import { App } from "./app"; + +ReactDOM.render( + <> + + + , + document.getElementById("root") +); diff --git a/examples/07-suspense-custom/src/styles.ts b/examples/07-suspense-custom/src/styles.ts new file mode 100644 index 0000000..14251d5 --- /dev/null +++ b/examples/07-suspense-custom/src/styles.ts @@ -0,0 +1,34 @@ +import { createStyles } from "@material-ui/core/styles"; + +export const styles = () => createStyles({ + picContainer: { + display: "flex", + justifyContent: "center", + alignItems: "center", + margin: "0.25rem", + }, + pic: { + borderRadius: "4px", + }, + progress: { + margin: "1rem", + }, + container: { + display: "flex", + flexDirection: "column", + alignItems: "center", + padding: "2rem", + }, + gallery: { + display: "flex", + flexDirection: "row", + flexWrap: "wrap", + justifyContent: "center", + }, + button: { + marginBottom: "2rem", + }, + +}); + + diff --git a/examples/07-suspense-custom/tsconfig.json b/examples/07-suspense-custom/tsconfig.json new file mode 100644 index 0000000..0a8013b --- /dev/null +++ b/examples/07-suspense-custom/tsconfig.json @@ -0,0 +1,16 @@ +{ + "compilerOptions": { + "target": "es6", + "module": "es6", + "moduleResolution": "node", + "declaration": false, + "noImplicitAny": false, + "jsx": "react", + "sourceMap": true, + "noLib": false, + "suppressImplicitAnyIndexErrors": true, + "allowSyntheticDefaultImports": true, + }, + "compileOnSave": false, + "exclude": ["node_modules"] +} diff --git a/examples/07-suspense-custom/tslint.json b/examples/07-suspense-custom/tslint.json new file mode 100644 index 0000000..ad08036 --- /dev/null +++ b/examples/07-suspense-custom/tslint.json @@ -0,0 +1,92 @@ +{ + "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"], + "defaultSeverity": "warning", + "rules": { + "align": [true, "parameters", "statements"], + "array-type": false, + "arrow-parens": false, + "class-name": true, + "comment-format": [true, "check-space"], + "curly": false, + "eofline": true, + "forin": false, + "import-spacing": true, + "indent": [true, "spaces"], + "interface-name": [true, "never-prefix"], + "jsdoc-format": true, + "jsx-no-lambda": false, + "jsx-no-multiline-js": false, + "label-position": true, + "max-line-length": [true, 120], + "member-ordering": false, + "member-access": false, + "no-any": false, + "no-arg": true, + "no-bitwise": true, + "no-console": false, + "no-consecutive-blank-lines": [true, 2], + "no-construct": true, + "no-debugger": true, + "no-default-export": false, + "no-duplicate-variable": true, + "no-empty": true, + "no-empty-interface": false, + "no-eval": true, + "no-implicit-dependencies": false, + "no-internal-module": true, + "no-object-literal-type-assertion": false, + "no-shadowed-variable": true, + "no-string-literal": false, + "no-submodule-imports": false, + "no-trailing-whitespace": true, + "no-unsafe-finally": true, + "no-unused-expression": true, + "no-var-keyword": true, + "no-var-requires": false, + "object-literal-key-quotes": [true, "as-needed"], + "object-literal-sort-keys": false, + "one-line": [true, "check-catch", "check-else", "check-open-brace", "check-whitespace"], + "only-arrow-functions": false, + "ordered-imports": false, + "quotemark": [true, "double", "jsx-double"], + "radix": false, + "semicolon": [true, "always", "strict-bound-class-methods"], + "trailing-comma": [ + true, + { + "multiline": { + "objects": "always", + "arrays": "always", + "imports": "always", + "exports": "always", + "typeLiterals": "always" + }, + "singleline": "never", + "esSpecCompliant": true + } + ], + "triple-equals": [true, "allow-null-check"], + "typedef": [true, "parameter", "property-declaration"], + "typedef-whitespace": [ + true, + { + "call-signature": "nospace", + "index-signature": "nospace", + "parameter": "nospace", + "property-declaration": "nospace", + "variable-declaration": "nospace" + } + ], + "variable-name": [true, "ban-keywords", "check-format", "allow-leading-underscore", "allow-pascal-case"], + "whitespace": [ + true, + "check-branch", + "check-decl", + "check-module", + "check-operator", + "check-separator", + "check-type", + "check-typecast" + ] + } +} diff --git a/examples/07-suspense-custom/webpack.config.js b/examples/07-suspense-custom/webpack.config.js new file mode 100644 index 0000000..d260db4 --- /dev/null +++ b/examples/07-suspense-custom/webpack.config.js @@ -0,0 +1,41 @@ +const HtmlWebpackPlugin = require("html-webpack-plugin"); +const path = require("path"); + +const basePath = __dirname; + +module.exports = { + context: path.join(basePath, "src"), + resolve: { + extensions: [".js", ".ts", ".tsx"], + }, + entry: ["./index.tsx"], + output: { + path: path.join(basePath, "dist"), + filename: "bundle.js" + }, + devtool: "source-map", + devServer: { + contentBase: "./dist", // Content base + inline: true, // Enable watch and live reload + host: "localhost", + port: 8080, + stats: "errors-only" + }, + module: { + rules: [ + { + test: /\.(tsx?)|(js)$/, + exclude: /node_modules/, + loader: "babel-loader", + }, + ] + }, + plugins: [ + //Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin + new HtmlWebpackPlugin({ + filename: "index.html", //Name of file in ./dist/ + template: "index.html", //Name of template in ./src + hash: true + }) + ] +}; From 6d890d99c09aae32aa782081e20ca9df9e43316d Mon Sep 17 00:00:00 2001 From: Javier Calzado Date: Tue, 14 May 2019 09:52:31 +0200 Subject: [PATCH 2/4] Update readme --- readme.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/readme.md b/readme.md index 96b59c2..76568d0 100644 --- a/readme.md +++ b/readme.md @@ -174,6 +174,9 @@ Full examples: - [05 Typescript](https://codesandbox.io/s/5ww39l90yp): full sample using typescript (using library embedded typings). +- [06 Suspense Like](https://codesandbox.io/s/6w1oly0x9r): sample implementing a suspense-like component (typescript). + +- [07 Suspense Custom](https://codesandbox.io/s/jjkm4vvqr5): sample implementing a suspense-like component that can be customized by passing a spinner component of your choice (typescript). # About Basefactor + Lemoncode From c2a9c8743c74f4f03e603a5d495d5c8bab94364a Mon Sep 17 00:00:00 2001 From: Javier Calzado Date: Tue, 14 May 2019 10:35:54 +0200 Subject: [PATCH 3/4] Remove delay parameter, not used --- examples/06-suspense-like/src/app.tsx | 2 +- examples/07-suspense-custom/src/app.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/06-suspense-like/src/app.tsx b/examples/06-suspense-like/src/app.tsx index 154621b..4386e5c 100644 --- a/examples/06-suspense-like/src/app.tsx +++ b/examples/06-suspense-like/src/app.tsx @@ -9,7 +9,7 @@ import { styles } from "./styles"; const Suspense: React.FC<{ tag: string, className?: string }> = ({ tag, className, children }) => { - const { promiseInProgress } = usePromiseTracker({ area: tag, delay: 0 }); + const { promiseInProgress } = usePromiseTracker({ area: tag }); return promiseInProgress ? : <>{children}; }; diff --git a/examples/07-suspense-custom/src/app.tsx b/examples/07-suspense-custom/src/app.tsx index 643ef21..ccd5c11 100644 --- a/examples/07-suspense-custom/src/app.tsx +++ b/examples/07-suspense-custom/src/app.tsx @@ -8,7 +8,7 @@ import { styles } from "./styles"; import { randomBytes } from "crypto"; const Suspense: React.FC<{tag: string, Progress?: React.ReactNode}> = ({ tag, Progress, children }) => { - const { promiseInProgress } = usePromiseTracker({ area: tag, delay: 0 }); + const { promiseInProgress } = usePromiseTracker({ area: tag }); return <>{promiseInProgress ? Progress : children}; }; @@ -49,4 +49,4 @@ const AppInner: React.FC> = ({classes}) => { ); }; -export const App = withStyles(styles)(AppInner); \ No newline at end of file +export const App = withStyles(styles)(AppInner); From 0a256c99c4986f49a88524049b255cdd1d47f8cd Mon Sep 17 00:00:00 2001 From: Braulio Date: Tue, 14 May 2019 18:30:06 +0200 Subject: [PATCH 4/4] updated to minor 2.0.2 delay and config params --- examples/06-suspense-like/package.json | 2 +- examples/07-suspense-custom/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/06-suspense-like/package.json b/examples/06-suspense-like/package.json index 860ac71..26fe50e 100644 --- a/examples/06-suspense-like/package.json +++ b/examples/06-suspense-like/package.json @@ -23,7 +23,7 @@ "@material-ui/core": "3.9.3", "react": "16.8.4", "react-dom": "16.8.4", - "react-promise-tracker": "2.0.0" + "react-promise-tracker": "2.0.2" }, "devDependencies": { "@babel/cli": "^7.2.3", diff --git a/examples/07-suspense-custom/package.json b/examples/07-suspense-custom/package.json index 4c856f2..89451d4 100644 --- a/examples/07-suspense-custom/package.json +++ b/examples/07-suspense-custom/package.json @@ -23,7 +23,7 @@ "@material-ui/core": "3.9.3", "react": "16.8.4", "react-dom": "16.8.4", - "react-promise-tracker": "2.0.0" + "react-promise-tracker": "2.0.2" }, "devDependencies": { "@babel/cli": "^7.2.3",