MDX Slide Parsing and CLI

bin/actions.js

@@ -0,0 +1,51 @@
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const path = require('path');
+const config = require('../webpack.config');
+
+const port = 3000;
+
+const options = {
+  hot: true
+};
+
+const launchServer = (configUpdates = {}) => {
+  const customConfig = { ...config, ...configUpdates };
+  const server = new WebpackDevServer(webpack(customConfig), options);
+
+  server.listen(port, 'localhost', function(err) {
+    if (err) {
+      console.log(err);
+    }
+    console.log('WebpackDevServer listening at localhost:', port);
+  });
+};
+
+const launchMDXServer = mdxFilePath => {
+  if (!mdxFilePath) {
+    // developer error - must supply an entry file path
+    throw new Error('MDX file path must be provided.');
+  }
+
+  const cliRoot = path.resolve(__dirname, '..');
+  const absoluteMdxFilePath = path.resolve(mdxFilePath);
+  const nodeModules = path.resolve(__dirname, '../node_modules');
+
+  const configUpdates = {
+    mode: 'development',
+    context: cliRoot,
+    entry: './mdx-slides/index.js',
+    resolve: {
+      alias: {
+        'spectacle-user-mdx': absoluteMdxFilePath
+      },
+      modules: [nodeModules]
+    }
+  };
+
+  launchServer(configUpdates);
+};
+
+module.exports = {
+  launchMDXServer
+};

bin/args.js

@@ -0,0 +1,33 @@
+const yargs = require('yargs');
+
+// Validate and normalize.
+const validate = parser => {
+  const { argv } = parser;
+  const { mdx } = argv;
+
+  return Promise.resolve({ mdx });
+};
+
+const args = () =>
+  yargs
+    .usage(`Usage: spectacle -m <file>`)
+
+    // MDX File
+    .option('mdx', {
+      alias: 'm',
+      describe: 'Path to mdx file from which a presentation will be generated.',
+      default: 'slides.mdx',
+      required: false,
+      type: 'string'
+    })
+
+    // Logistical
+    .help()
+    .alias('help', 'h')
+    .version()
+    .alias('version', 'v')
+    .strict();
+
+module.exports = {
+  parse: () => validate(args())
+};

bin/cli.js

@@ -0,0 +1,27 @@
+#!/usr/bin/env node
+
+const args = require('./args');
+const actions = require('./actions');
+var path = require('path');
+
+const main = () =>
+  Promise.resolve()
+    // Parse arguments.
+    .then(args.parse)
+    .then(parsedInput => {
+      const mdxFilePath = parsedInput.mdx;
+      if (mdxFilePath) {
+        actions.launchMDXServer(mdxFilePath);
+      } else {
+        throw new Error('Unsupported action.');
+      }
+    })
+    .catch(err => {
+      // Try to get full stack, then full string if not.
+      console.error(err.stack || err.toString());
+      process.exit(1);
+    });
+
+if (require.main === module) {
+  main();
+}

examples/MDX/TestMDX.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import slides from './slides.mdx';
+import Deck from '../../src/components/Deck';
+import Slide from '../../src/components/Slide';
+
+import { MDXProvider } from '@mdx-js/react';
+
+/*
+ * Note: you can add mappings here to customize how
+ * MDX will render standard markdown tags
+ */
+const components = {
+  // h5: MyH5Component
+};
+
+const MDXTest = () => (
+  <MDXProvider components={components}>
+    <Deck loop>
+      {slides.map((S, i) => (
+        <Slide key={`slide-${i}`} slideNum={i}>
+          <S />
+        </Slide>
+      ))}
+    </Deck>
+  </MDXProvider>
+);
+
+export default MDXTest;

examples/MDX/slides.mdx

@@ -0,0 +1,59 @@
+import Test from './test-component';
+export const testProp = 50;
+
+# Hello World 👋
+
+- one
+- two
+- three
+
+---
+
+## Next
+
+<Test height={testProp} />
+
+---
+
+# Write your Spectacle Presentations in Markdown
+
+## And seamlessly use React Components
+
+**How sweet is that**  
+**(super sweet)**
+
+---
+
+![datboi](https://pbs.twimg.com/media/CkjFUyTXEAEysBY.jpg)
+
+---
+
+###### Typography
+
+# Heading 1
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4
+
+##### Heading 5
+
+###### Heading 6
+
+Standard Text
+
+---
+
+> Example Quote
+
+---
+
+```javascript
+class SuperCoolComponent extends React.Component {
+  render() {
+    return <p>code slide works in markdown too whaaaaat</p>;
+  }
+}
+```

examples/MDX/test-component.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Test = ({ height }) => {
+  return <div style={{ height, width: '100%', backgroundColor: 'yellow' }} />;
+};
+
+export default Test;

index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from 'react-dom';
 
 // START: test components to try rendering:
-import MDXDocument from './examples/MDX/test.mdx';
+import TestMDX from './examples/MDX/TestMDX';
 // import TestJs from './examples/JS/TestJS.js';
 // END: test components to try rendering
 
@@ -13,4 +13,4 @@ import MDXDocument from './examples/MDX/test.mdx';
  * to hot-reload with new contents.
  */
 
-render(<MDXDocument />, document.getElementById('root'));
+render(<TestMDX />, document.getElementById('root'));