Merge pull request FormidableLabs#689 from FormidableLabs/rewrite/add-webpack-mdx

VirtualDOMinic · web-flow · commit a99411aff5dd · 2019-06-12T17:13:04.000+01:00
Rewrite: add webpack mdx
diff --git a/.babelrc b/.babelrc
@@ -2,8 +2,7 @@
   "presets": ["@babel/preset-env", "@babel/preset-react"],
   "plugins": [
     "@babel/plugin-proposal-object-rest-spread",
-    "@babel/plugin-proposal-class-properties",
-    "babel-plugin-emotion"
+    "@babel/plugin-proposal-class-properties"
   ],
   "env": {
     "esm": {
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,9 @@
 node_modules
-yarn.lock
+yarn.lock
+package-lock.json
+dist
+lib
+es
+*.log
+.DS_Store
+.vscode
diff --git a/index.html b/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Getting Started - Spectacle</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -1,6 +1,12 @@
 import React from 'react';
 import { render } from 'react-dom';
+import MDXDocument from './test.mdx';
 
-import Presentation from './example/src';
+/**
+ * Experiment to test MDX -> JSX transpilation through babel.
+ *
+ * Outputs MDXDocument, changing MDXDocument will cause webpack
+ * to hot-reload with new contents.
+ */
 
-render(<Presentation />, document.getElementById('root'));
+render(<MDXDocument />, document.getElementById('root'));
diff --git a/package.json b/package.json
@@ -12,7 +12,8 @@
     "prettier": "prettier \"**/*.{js,json,ts,css,md}\"",
     "prettier-fix": "npm run prettier -- --write",
     "deploy": "",
-    "start": "",
+    "start": "builder run --env \"{\\\"BABEL_ENV\\\":\\\"esm\\\"}\" build-wds-base -- --port=3000 --hot",
+    "build-wds-base": "webpack-dev-server",
     "test": "jest --verbose",
     "check": ""
   },
@@ -22,25 +23,39 @@
     "type": "git",
     "url": "https://github.com/FormidableLabs/spectacle.git"
   },
-  "dependencies": {},
+  "browserslist": "> 0.25%, not dead",
   "peerDependencies": {
     "prop-types": "^15.6.2",
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
   },
   "devDependencies": {
+    "@babel/cli": "^7.4.4",
+    "@babel/core": "^7.4.5",
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
+    "@babel/polyfill": "^7.4.4",
+    "@babel/preset-env": "^7.4.5",
+    "@babel/preset-react": "^7.0.0",
+    "@mdx-js/loader": "^1.0.0-rc.4",
+    "babel-loader": "^8.0.6",
+    "builder": "^4.0.0",
     "eslint": "^4.19.0",
     "eslint-config-formidable": "^3.0.0",
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-filenames": "^1.2.0",
     "eslint-plugin-import": "^2.9.0",
     "eslint-plugin-react": "^7.7.0",
+    "html-webpack-plugin": "^3.2.0",
     "prettier": "^1.15.3",
     "prop-types": "^15.6.2",
     "raw-loader": "^1.0.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "tslint": "^5.12.1",
-    "typescript": "^3.2.2"
+    "typescript": "^3.2.2",
+    "webpack": "^4.33.0",
+    "webpack-cli": "^3.3.4",
+    "webpack-dev-server": "^3.7.1"
   }
-}
+}
diff --git a/test.mdx b/test.mdx
@@ -0,0 +1,23 @@
+<!-- This is an MDX file that is imported in index.js and transpiled to
+JSX and then rendered, feel free to change this! -->
+
+# Hello, _world_!
+
+Below is an example of JSX embedded in Markdown. <br /> **Kara and dom were successful!**
+
+<div style={{ padding: '20px', backgroundColor: 'aliceblue' }}>
+  <h3>This is JSX</h3>
+</div>
+
+- One ah ah ah
+- Two ah ah ah
+  - Two point five
+- Three
+
+## Code snippet test
+
+        const hello = "hi";
+
+```js
+const hi = 'hello';
+```
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,29 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  entry: './index.js',
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env']
+          }
+        }
+      },
+      { test: /\.mdx?$/, use: ['babel-loader', '@mdx-js/loader'] }
+    ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: `./index.html`
+    })
+  ]
+};
