Potential fix for localStorage race condition

2024-12-01 21:42:08 +03:00 · 2018-08-30 10:37:12 -04:00 · 2018-08-30 10:37:12 -04:00 · a9a28ea144
commit a9a28ea144
parent e20cdb14cf
6 changed files with 125 additions and 0 deletions
--- a/docs/code.js
+++ b/docs/code.js
@ -0,0 +1,30 @@
+export const a = `import React from 'react'
+
+const Foo = props =>
+  <h1>Bar</h1>
+
+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'
+
+<CodeSurfer
+  title='Check out my code'
+  code={codeExample}
+  steps={[
+    {
+      lines: [ 4, 5 ],
+      notes: 'This is lines 4 & 5 highlighted'
+    },
+  ]}
+/>
+`
+
+export default { a, b, surfer }
--- 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'

 <Head>
  <title>mdx-deck</title>
@ -143,6 +145,18 @@ Prop | Type | Description
 `color` | string | sets foreground color
 `bg` | string | sets background color

+---
+
+<CodeSurfer
+  title='CodeSurfer'
+  code={code.surfer}
+  steps={[
+    { lines: [ 1, 2 ], notes: 'Import CodeSurfer and a code snippet ' },
+    { range: [ 4, 9 ], notes: 'Use the component in a slide' },
+    { range: [ 7, 12 ], notes: 'Use the steps prop to add notes' },
+  ]}
+/>
+
 ---
 export default Invert

--- 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'
--- 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",
--- 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"
  },
--- 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) {