make npm module

Summary: We want to use the yoga playground as a standalone package as well. This adds a webpack config to bundle the playground for npm. The package can then be distributed as `yoga-playground` via npm

Reviewed By: fabiomassimo

Differential Revision: D16583334

fbshipit-source-id: 84807ddd8983ba9f0fb43570b518c975f35544ab

website/.gitignore

@@ -6,3 +6,4 @@ node_modules
 public/
 .DS_Store
 yarn-error.log
+src/components/Playground/dist

website/src/components/DocsSidebar.js

@@ -10,10 +10,10 @@
 
 import React, {Component} from 'react';
 import ReactDOM from 'react-dom';
-import EditValue from '../components/Playground/EditValue';
+import EditValue from '../components/Playground/src/EditValue';
 import Link from 'gatsby-link';
 import './DocsSidebar.css';
-import type {LayoutRecordT} from './Playground/LayoutRecord';
+import type {LayoutRecordT} from './Playground/src/LayoutRecord';
 
 const TAG_PATTERN = /<controls prop="([A-Za-z]+)"><\/controls>/gi;
 

website/src/components/Playground/.npmignore

@@ -0,0 +1,3 @@
+src
+webpack.config.js
+node_modules

website/src/components/Playground/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "yoga-playground",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "author": "Daniel Büchele",
+  "license": "MIT",
+  "scripts": {
+    "build": "webpack && cp ../../../node_modules/antd/dist/antd.min.css dist/antd.min.css"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-transform-flow-strip-types": "^7.4.4",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.6",
+    "css-loader": "^3.1.0",
+    "mini-css-extract-plugin": "^0.8.0",
+    "webpack": "^4.38.0"
+  }
+}

website/src/components/Playground/webpack.config.js

@@ -0,0 +1,63 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  mode: 'production',
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'index.js',
+    libraryExport: 'default',
+    libraryTarget: 'commonjs2'
+  },
+  externals: {
+    // Don't bundle react or react-dom
+    react: {
+      commonjs: "react",
+      commonjs2: "react",
+      amd: "React",
+      root: "React"
+    },
+    "react-dom": {
+      commonjs: "react-dom",
+      commonjs2: "react-dom",
+      amd: "ReactDOM",
+      root: "ReactDOM"
+    }
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'index.css',
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            "presets": ["@babel/preset-react"],
+            "plugins": ["@babel/plugin-transform-flow-strip-types", "@babel/plugin-proposal-class-properties"]
+          }
+        }
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              // you can specify a publicPath here
+              // by default it uses publicPath in webpackOptions.output
+              publicPath: '../',
+              hmr: process.env.NODE_ENV === 'development',
+            },
+          },
+          'css-loader',
+        ],
+      }
+    ]
+  }
+};

website/src/pages/index.js

@@ -12,7 +12,7 @@ import {Button} from 'antd';
 import React from 'react';
 import Page from '../components/Page';
 import Padded from '../components/Padded';
-import Playground from '../components/Playground';
+import Playground from '../components/Playground/src';
 import {Row, Col} from 'antd';
 import './index.css';
 import ReactNativeLogo from './logos/reactnative.png';
@@ -144,10 +144,7 @@ const AboutSectionOne = () => (
         <img src={ReactNativeLogo} />
         <h3>React Native</h3>
       </a>
-      <a
-        href="https://react-pdf.org/"
-        target="_blank"
-        className="logo">
+      <a href="https://react-pdf.org/" target="_blank" className="logo">
         <img src={ReactPDFLogo} />
         <h3>React-PDF</h3>
       </a>

website/src/pages/playground/index.js

@@ -10,7 +10,7 @@
 
 import React from 'react';
 import Page from '../../components/Page';
-import Playground from '../../components/Playground';
+import Playground from '../../components/Playground/src';
 import {Row, Col} from 'antd';
 import './index.css';
 

website/src/templates/withPlayground.js

@@ -10,9 +10,9 @@
 
 import React, {Component} from 'react';
 import Page from '../components/Page';
-import Playground from '../components/Playground';
+import Playground from '../components/Playground/src';
 import DocsSidebar from '../components/DocsSidebar';
-import EditValue from '../components/Playground/EditValue';
+import EditValue from '../components/Playground/src/EditValue';
 import Link from 'gatsby-link';
 import {Button, Icon, Row, Col} from 'antd';
 import './index.css';