Make CodeSurfer compatible with mdx-deck 2.x

fixtures/react-docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-docs-fixture",
-  "version": "0.5.5",
+  "version": "0.6.0",
   "author": "pomber",
   "license": "MIT",
   "private": true,
@@ -9,7 +9,7 @@
     "build": "docz build"
   },
   "dependencies": {
-    "code-surfer": "^0.5.5",
+    "code-surfer": "^0.6.0",
     "prop-types": "^15.6.2",
     "react": "^16.4.2"
   },

fixtures/sample/package.json

@@ -1,14 +1,14 @@
 {
   "name": "sample-fixture",
   "private": true,
-  "version": "0.5.5",
+  "version": "0.6.0",
   "scripts": {
     "build": "mdx-deck build sample.mdx",
     "start": "mdx-deck sample.mdx"
   },
   "devDependencies": {
-    "mdx-deck": "^1.7.7",
-    "mdx-deck-code-surfer": "^0.5.5",
+    "mdx-deck": "^2.0.5",
+    "mdx-deck-code-surfer": "^0.6.0",
     "raw-loader": "^0.5.1"
   }
 }

fixtures/sample/sample.mdx

@@ -1,5 +1,5 @@
 import { CodeSurfer } from "mdx-deck-code-surfer"
-import { dark } from "mdx-deck/themes"
+import { dark } from "@mdx-deck/themes"
 import nightOwl from "prism-react-renderer/themes/nightOwl"
 
 export { components } from "mdx-deck-code-surfer"
@@ -124,7 +124,7 @@ And you can still add regular notes the ol' fashioned way!
 ---
 
 ```jsx Global Theming
-import { dark } from "mdx-deck/themes"
+import { dark } from "@mdx-deck/themes"
 import nightOwl from "prism-react-renderer/themes/nightOwl"
 
 export const theme = {

fixtures/storybook/package.json

@@ -1,15 +1,15 @@
 {
   "name": "storybook-fixture",
   "private": true,
-  "version": "0.5.5",
+  "version": "0.6.0",
   "scripts": {
     "build": "build-storybook -c .storybook -o dist",
     "start": "start-storybook -c .storybook -p 9001"
   },
   "devDependencies": {
     "@storybook/react": "^3.4.10",
     "@types/storybook__react": "^3.0.9",
-    "code-surfer": "^0.5.5",
+    "code-surfer": "^0.6.0",
     "raw-loader": "^0.5.1"
   }
 }

fixtures/theming/package.json

@@ -1,14 +1,14 @@
 {
   "name": "theming-fixture",
   "private": true,
-  "version": "0.5.5",
+  "version": "0.6.0",
   "scripts": {
     "build": "mdx-deck build theming.mdx",
     "start": "mdx-deck theming.mdx"
   },
   "devDependencies": {
-    "mdx-deck": "^1.7.0",
-    "mdx-deck-code-surfer": "^0.5.5",
+    "mdx-deck": "^2.0.5",
+    "mdx-deck-code-surfer": "^0.6.0",
     "raw-loader": "^0.5.1"
   }
 }

packages/code-surfer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "code-surfer",
-  "version": "0.5.5",
+  "version": "0.6.0",
   "private": false,
   "main": "dist/code-surfer.js",
   "files": [
@@ -26,8 +26,7 @@
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-3": "^6.24.1",
-    "jest": "^23.5.0",
-    "react": "^16.4.2"
+    "jest": "^23.5.0"
   },
   "author": "pomber",
   "license": "MIT",

packages/mdx-deck-code-surfer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdx-deck-code-surfer",
-  "version": "0.5.5",
+  "version": "0.6.0",
   "private": false,
   "main": "dist/index.js",
   "files": [
@@ -11,7 +11,7 @@
     "build:watch": "yarn build --watch"
   },
   "dependencies": {
-    "code-surfer": "^0.5.5",
+    "code-surfer": "^0.6.0",
     "memoize-one": "^4.0.2"
   },
   "devDependencies": {
@@ -20,13 +20,12 @@
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
-    "mdx-deck": "^1.7.7",
-    "react": "^16.4.2"
+    "mdx-deck": "^2.0.5"
   },
   "peerDependencies": {
-    "mdx-deck": "^1.7.7",
+    "mdx-deck": ">=2.0.0",
     "react": ">=15.0.0",
-    "styled-components": ">=3.0.0"
+    "emotion-theming": ">=10.0.0"
   },
   "author": "pomber",
   "license": "MIT",

packages/mdx-deck-code-surfer/src/deck-code-surfer.js

@@ -1,7 +1,7 @@
 import CodeSurfer from "code-surfer";
 import React from "react";
-import { withDeck, updaters } from "mdx-deck";
-import { withTheme } from "styled-components";
+import { withContext } from "@mdx-deck/components";
+import { withTheme } from "emotion-theming";
 import memoizeOne from "memoize-one";
 
 const Notes = ({ notes }) =>
@@ -17,14 +17,10 @@ const Title = ({ title }) =>
 class InnerCodeSurfer extends React.Component {
   constructor(props) {
     super(props);
-    const { update, index } = props.deck;
+    const { register, index } = props.context;
+    if (typeof register !== "function") return;
     const parsedSteps = this.parseSteps(props.steps);
-    const maxStep = parsedSteps.length - 1;
-    update(updaters.setSteps(index, maxStep));
-  }
-
-  shouldComponentUpdate(nextProps) {
-    return !!nextProps.deck.active;
+    register(index, { steps: parsedSteps.length - 1 });
   }
 
   parseSteps = memoizeOne((steps, notes) => {
@@ -50,6 +46,7 @@ class InnerCodeSurfer extends React.Component {
 
   render() {
     let {
+      context,
       code,
       steps,
       title,
@@ -60,7 +57,8 @@ class InnerCodeSurfer extends React.Component {
       ...rest
     } = this.props;
 
-    const stepIndex = this.props.deck.step || 0;
+    const { step } = context;
+    const stepIndex = step || 0;
     const mdxDeckTheme = theme;
     prismTheme = prismTheme || mdxDeckTheme.codeSurfer;
     showNumbers = showNumbers || (prismTheme && prismTheme.showNumbers);
@@ -121,7 +119,7 @@ class InnerCodeSurfer extends React.Component {
 }
 
 // Things I need to do to avoid props name collisions
-const EnhancedCodeSurfer = withDeck(withTheme(InnerCodeSurfer));
+const EnhancedCodeSurfer = withContext(withTheme(InnerCodeSurfer));
 export default ({ theme, ...rest }) => (
   <EnhancedCodeSurfer {...rest} prismTheme={theme} />
 );

packages/mdx-deck-code-surfer/src/deck-components.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Notes } from "mdx-deck";
+import { Notes } from "@mdx-deck/components";
 import DeckCodeSurfer from "./deck-code-surfer";
 
 class Code extends React.PureComponent {

website/package.json

@@ -1,6 +1,6 @@
 {
   "name": "website",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "author": "pomber",
   "license": "MIT",
   "private": true,
@@ -11,7 +11,7 @@
     "start": "gatsby develop"
   },
   "dependencies": {
-    "gatsby": "next",
+    "gatsby": "1.6.3",
     "gatsby-plugin-manifest": "next",
     "gatsby-plugin-offline": "next",
     "gatsby-plugin-react-helmet": "next",