From a9a28ea144c7a94887d64bc8158b84047c967618 Mon Sep 17 00:00:00 2001 From: Brent Jackson Date: Thu, 30 Aug 2018 10:37:12 -0400 Subject: [PATCH] Potential fix for localStorage race condition --- docs/code.js | 30 ++++++++++++++++++++ docs/index.mdx | 14 ++++++++++ lib/config.js | 4 +++ package-lock.json | 70 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/SlideDeck.js | 6 ++++ 6 files changed, 125 insertions(+) create mode 100644 docs/code.js diff --git a/docs/code.js b/docs/code.js new file mode 100644 index 0000000..5fe393d --- /dev/null +++ b/docs/code.js @@ -0,0 +1,30 @@ +export const a = `import React from 'react' + +const Foo = props => +

Bar

+ +export default Foo` + +export const b = `import styled from 'styled-components' +import { space, color } from 'styled-system' + +const Box = styled.div([], space, color) + +export default Box` + +export const surfer = `import { CodeSurfer } from 'mdx-deck-code-surfer' +import codeExample from './code-example' + + +` + +export default { a, b, surfer } diff --git a/docs/index.mdx b/docs/index.mdx index 4226ed1..7f09471 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -1,7 +1,9 @@ export { future as theme } from '../themes' import { Head, Image, Notes, Appear } from '../dist' import { Invert, Split, SplitRight, FullScreenCode } from '../layouts' +import { CodeSurfer } from 'mdx-deck-code-surfer' import Counter from './Counter' +import code from './code' mdx-deck @@ -143,6 +145,18 @@ Prop | Type | Description `color` | string | sets foreground color `bg` | string | sets background color +--- + + + --- export default Invert diff --git a/lib/config.js b/lib/config.js index d968719..fd56aa8 100644 --- a/lib/config.js +++ b/lib/config.js @@ -1,3 +1,4 @@ +const fs = require('fs') const path = require('path') const webpack = require('webpack') const HTMLPlugin = require('mini-html-webpack-plugin') @@ -86,6 +87,9 @@ const baseConfig = { rules }, resolve: { + alias: { + 'mdx-deck': path.resolve(__dirname, '..') + }, modules: [ path.relative(process.cwd(), path.join(__dirname, '../node_modules')), 'node_modules' diff --git a/package-lock.json b/package-lock.json index 9bc0789..48128c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1913,6 +1913,12 @@ "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz", "integrity": "sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==" }, + "bowser": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz", + "integrity": "sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ==", + "dev": true + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -2379,6 +2385,16 @@ "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "dev": true }, + "code-surfer": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/code-surfer/-/code-surfer-0.3.0.tgz", + "integrity": "sha512-M58bd4eggob5o7Te5NW+ciVz60LXTV+AIXgZb7/gaf+4fOiv2RkT6l57r1VOlQqwt8BZTogDIN4TsYz+fowP3g==", + "dev": true, + "requires": { + "glamor": "^2.20.40", + "prism-react-renderer": "^0.1.3" + } + }, "collapse-white-space": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.4.tgz", @@ -2624,6 +2640,16 @@ "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" }, + "css-in-js-utils": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz", + "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==", + "dev": true, + "requires": { + "hyphenate-style-name": "^1.0.2", + "isobject": "^3.0.1" + } + }, "css-to-react-native": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.2.1.tgz", @@ -4148,6 +4174,19 @@ "assert-plus": "^1.0.0" } }, + "glamor": { + "version": "2.20.40", + "resolved": "https://registry.npmjs.org/glamor/-/glamor-2.20.40.tgz", + "integrity": "sha512-DNXCd+c14N9QF8aAKrfl4xakPk5FdcFwmH7sD0qnC0Pr7xoZ5W9yovhUrY/dJc3psfGGXC58vqQyRtuskyUJxA==", + "dev": true, + "requires": { + "fbjs": "^0.8.12", + "inline-style-prefixer": "^3.0.6", + "object-assign": "^4.1.1", + "prop-types": "^15.5.10", + "through": "^2.3.8" + } + }, "glob": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", @@ -4666,6 +4705,12 @@ } } }, + "hyphenate-style-name": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz", + "integrity": "sha1-MRYKNpMK2vH8BMYHT360FGXU7Es=", + "dev": true + }, "iconv-lite": { "version": "0.4.23", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz", @@ -4728,6 +4773,16 @@ "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==" }, + "inline-style-prefixer": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz", + "integrity": "sha1-hVG45bTVcyROZqNLBPfTIHaitTQ=", + "dev": true, + "requires": { + "bowser": "^1.7.3", + "css-in-js-utils": "^2.0.0" + } + }, "inquirer": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-3.3.0.tgz", @@ -6646,6 +6701,15 @@ "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz", "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=" }, + "mdx-deck-code-surfer": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/mdx-deck-code-surfer/-/mdx-deck-code-surfer-0.3.0.tgz", + "integrity": "sha512-PXyxCChX5jkK08+q2ntRCthfDOBRPRV/krkK44WaMwsxK+AN4Sk3yLwXX1CYAGYkjZoqzYNcoalaoeynsrQ0KQ==", + "dev": true, + "requires": { + "code-surfer": "^0.3.0" + } + }, "media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -7650,6 +7714,12 @@ } } }, + "prism-react-renderer": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-0.1.3.tgz", + "integrity": "sha512-gFmg8TBTJR4l4R7MYrfW1YSnWZU16dnVGyneu2XzWveX1CeRgHhm8GWRK1Qc9z5/JRR5VW/cDIULz1uxRWhLzw==", + "dev": true + }, "prismjs": { "version": "1.15.0", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.15.0.tgz", diff --git a/package.json b/package.json index fc0511a..c622f96 100644 --- a/package.json +++ b/package.json @@ -76,6 +76,7 @@ "babel-cli": "^6.26.0", "jest": "^23.4.2", "jest-styled-components": "^5.0.1", + "mdx-deck-code-surfer": "^0.3.0", "prettier": "^1.14.0", "react-test-renderer": "^16.4.1" }, diff --git a/src/SlideDeck.js b/src/SlideDeck.js index 9f80483..065a141 100644 --- a/src/SlideDeck.js +++ b/src/SlideDeck.js @@ -147,9 +147,11 @@ export class SlideDeck extends React.Component { handleStorageChange = e => { if (e.key === MDX_SLIDE_INDEX) { const index = parseInt(e.newValue, 10) + this.isStorageChange = true this.setState({ index }) } else if (e.key === MDX_SLIDE_STEP, 10) { const step = parseInt(e.newValue, 10) + this.isStorageChange = true this.setState({ step }) } } @@ -173,6 +175,10 @@ export class SlideDeck extends React.Component { this.isHashChange = false return } + if (this.isStorageChange) { + this.isStorageChange = false + return + } const { index, mode, step } = this.state let query = '' if (mode && mode !== modes.normal) {