CLI is working! Using resolved paths for wp deps

Author: SunburtReynolds

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

@@ -1,22 +1,11 @@
 const yargs = require('yargs');
-const fs = require('fs');
 
 // Validate and normalize.
 const validate = parser => {
   const { argv } = parser;
   const { mdx } = argv;
 
-  return Promise.resolve().then(() =>
-    new Promise((resolve, reject) => {
-      fs.readFile(mdx, (err, data) => {
-        if (err) {
-          reject(err);
-        } else {
-          resolve(data);
-        }
-      });
-    }).then(buf => buf.toString('utf8'))
-  );
+  return Promise.resolve({ mdx });
 };
 
 const args = () =>

bin/cli.js

@@ -1,18 +1,24 @@
 #!/usr/bin/env node
 
-const parse = require('./args').parse;
+const args = require('./args');
+const actions = require('./actions');
+var path = require('path');
 
 const main = () =>
   Promise.resolve()
     // Parse arguments.
-    .then(parse)
-    .then(out => {
-      console.log(out);
+    .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);
     });
 

examples/MDX/slides.mdx

@@ -1,7 +1,7 @@
 import Test from './test-component';
 export const testProp = 50;
 
-# Hello World
+# Hello World 👋
 
 - one
 - two

mdx-slides/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from 'react-dom';
+import { MDXProvider } from '@mdx-js/react';
+import Deck from '../src/components/Deck';
+import Slide from '../src/components/Slide';
+
+// See the webpack config to see how this import alias is made
+import slides from 'spectacle-user-mdx';
+
+const components = {};
+
+const MDXSlides = () => (
+  <MDXProvider components={components}>
+    <Deck loop>
+      {slides.map((S, i) => (
+        <Slide key={`slide-${i}`} slideNum={i}>
+          <S />
+        </Slide>
+      ))}
+    </Deck>
+  </MDXProvider>
+);
+
+render(<MDXSlides />, document.getElementById('root'));

webpack.config.js

@@ -1,6 +1,42 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
+/*
+ * In order for the CLI to find loaders and babel configurations when
+ * launching from another directory, we have to import the dependencies
+ * explicitly from node_modules. Under the same circumstances, webpack
+ * can not find the .babelrc file and so we must configure babel directly
+ * in the webpack configuration.
+ */
+const babelLoader = path.resolve(__dirname, 'node_modules', 'babel-loader');
+const presetEnv = path.resolve(__dirname, 'node_modules', '@babel/preset-env');
+const presetReact = path.resolve(
+  __dirname,
+  'node_modules',
+  '@babel/preset-react'
+);
+const pluginObjectSpread = path.resolve(
+  __dirname,
+  'node_modules',
+  '@babel/plugin-proposal-object-rest-spread'
+);
+const pluginClassProperties = path.resolve(
+  __dirname,
+  'node_modules',
+  '@babel/plugin-proposal-class-properties'
+);
+
+const mdxSlideLoader = path.resolve(__dirname, 'mdx-slide-loader');
+
+const babelConfigOptions = {
+  babelrc: false,
+  presets: [require.resolve(presetEnv), require.resolve(presetReact)],
+  plugins: [
+    require.resolve(pluginObjectSpread),
+    require.resolve(pluginClassProperties)
+  ]
+};
+
 module.exports = {
   entry: './index.js',
   output: {
@@ -10,19 +46,20 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.js$/,
+        test: /\.jsx?$/,
         use: {
-          loader: 'babel-loader',
-          options: {
-            presets: ['@babel/preset-env']
-          }
+          loader: require.resolve(babelLoader),
+          options: babelConfigOptions
         }
       },
       {
         test: /\.mdx$/,
         use: [
-          { loader: 'babel-loader' },
-          { loader: require.resolve('./mdx-slide-loader') }
+          {
+            loader: require.resolve(babelLoader),
+            options: babelConfigOptions
+          },
+          { loader: require.resolve(mdxSlideLoader) }
         ]
       }
     ]