Explore Page & Embed Upgrades (#1366)

Explore Page & Embed Upgrades

Author: CompuIves

.babelrc

@@ -0,0 +1,13 @@
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-flow', '@babel/preset-react'],
+  plugins: [
+    '@babel/plugin-transform-async-to-generator',
+    '@babel/plugin-proposal-object-rest-spread',
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-transform-runtime',
+    '@babel/plugin-syntax-dynamic-import',
+    'babel-plugin-lodash',
+    'babel-plugin-system-import-transformer',
+    'babel-plugin-macros',
+  ],
+};

babel.config.js

@@ -6,6 +6,7 @@
   "scripts": {
     "build": "NODE_OPTIONS=\"--max-old-space-size=4096\" yarn build:deps && yarn build:prod",
     "build:prod": "lerna run build  --scope homepage --stream && lerna run build --scope app --stream && gulp",
+    "build:embed": "lerna run build:embed --scope app --stream && gulp",
     "build:clean": "lerna run build:clean --scope app --scope homepage && rimraf www",
     "build:deps": "lerna run build:dev --scope codesandbox-api --scope codesandbox-browserfs --scope node-services && lerna run build:dev --scope sse-hooks",
     "start": "yarn build:deps && lerna run start --scope app --stream",
@@ -21,7 +22,7 @@
     "add-contributor": "all-contributors add",
     "generate": "all-contributors generate",
     "precommit": "lint-staged",
-    "postinstall": "rimraf packages/app/node_modules/styled-components && yarn lerna run install-dependencies --scope codesandbox-browserfs --scope sse-loading-screen --stream && opencollective postinstall"
+    "postinstall": "rimraf packages/app/node_modules/styled-components && cp -R node_modules/uglify-es node_modules/terser && yarn lerna run install-dependencies --scope codesandbox-browserfs --scope sse-loading-screen --stream && opencollective postinstall"
   },
   "lint-staged": {
     "*.{js,css,json}": [
@@ -32,19 +33,17 @@
   "workspaces": {
     "packages": [
       "packages/app",
+      "packages/homepage",
       "packages/common",
       "packages/codesandbox-api",
       "packages/sandpack",
       "packages/react-sandpack",
-      "packages/homepage",
       "packages/node-services",
       "packages/sandbox-hooks",
       "packages/sse-hooks",
       "packages/react-embed"
     ],
     "nohoist": [
-      "**/gatsby",
-      "**/gatsby/**",
       "**/@types",
       "**/@types/**"
     ]

package.json

@@ -7,8 +7,8 @@ const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HappyPack = require('happypack');
 const WatchMissingNodeModulesPlugin = require('../scripts/utils/WatchMissingNodeModulesPlugin');
-const env = require('./env');
-const getHost = require('./host');
+const env = require('common/config/env');
+const getHost = require('common/utils/host');
 
 const babelDev = require('./babel.dev');
 const babelProd = require('./babel.prod');

packages/app/config/webpack.common.js

@@ -0,0 +1,59 @@
+const merge = require('webpack-merge');
+const webpack = require('webpack');
+const path = require('path');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+
+const paths = require('./paths');
+
+const commonConfig = require('./webpack.common');
+
+module.exports = merge(
+  // these go first, because "react-hot-loader/patch" has to be the first entry
+  {
+    ...commonConfig,
+    entry: {
+      embed: [path.join(paths.embedSrc, 'library.js')],
+    },
+  },
+  {
+    mode: 'production',
+    stats: 'verbose',
+    devtool: 'source-map',
+    output: {
+      libraryTarget: 'commonjs',
+      library: 'CodeSandboxEmbed',
+    },
+    externals: ['react', 'react-dom', 'styled-components'],
+    optimization: {
+      // splitChunks: {
+      //   // include all types of chunks
+      //   chunks: 'all',
+      // },
+      minimizer: [
+        new UglifyJSPlugin({
+          cache: true,
+          parallel: true,
+          sourceMap: true,
+          uglifyOptions: {
+            mangle: {
+              safari10: true,
+            },
+            output: {
+              comments: false,
+            },
+          },
+        }),
+      ],
+      concatenateModules: true, // ModuleConcatenationPlugin
+      namedModules: true, // NamedModulesPlugin()
+      noEmitOnErrors: true, // NoEmitOnErrorsPlugin
+    },
+    plugins: [
+      new webpack.NormalModuleReplacementPlugin(
+        new RegExp('app/components/CodeEditor$'),
+        'app/components/CodeEditor/CodeMirror'
+      ),
+      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    ],
+  }
+);

packages/app/config/webpack.embed.js

@@ -12,6 +12,7 @@
     "start:dev_api": "node scripts/start.js",
     "start:test": "cross-env LOCAL_SERVER=1 SANDBOX_ONLY=true node scripts/start.js",
     "build": "cross-env NODE_ENV=production node scripts/build.js",
+    "build:embed": "cross-env NODE_ENV=production webpack --config config/webpack.embed.js",
     "build:sandbox": "cross-env NODE_ENV=production SANDBOX_ONLY=true node scripts/build.js",
     "build:clean": "rimraf www",
     "test": "jest --env=jsdom",
@@ -43,7 +44,7 @@
     "babel-loader": "8.0.2",
     "babel-plugin-codegen": "^1.2.0",
     "babel-plugin-lodash": "^3.3.4",
-    "babel-plugin-styled-components": "1.7.1",
+    "babel-plugin-styled-components": "^1.9.2",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
@@ -102,6 +103,7 @@
     "url-loader": "1.0.1",
     "webpack": "^4.10.2",
     "webpack-bundle-analyzer": "^2.13.1",
+    "webpack-cli": "^3.1.2",
     "webpack-dev-middleware": "^3.1.3",
     "webpack-dev-server": "^3.1.4",
     "webpack-manifest-plugin": "^2.0.3",
@@ -217,7 +219,7 @@
     "react-inspector": "^2.2.0",
     "react-instantsearch": "^5.3.2",
     "react-loadable": "^3.3.1",
-    "react-modal": "^3.3.2",
+    "react-modal": "^3.6.1",
     "react-motion": "^0.5.0",
     "react-router-dom": "^4.2.2",
     "react-show": "^2.0.0",
@@ -231,7 +233,7 @@
     "socket.io-client": "^2.1.1",
     "store": "^2.0.12",
     "string-replace-loader": "^2.1.1",
-    "styled-components": "^3.2.1",
+    "styled-components": "^4.1.2",
     "subworkers": "^1.0.1",
     "svg-react-loader": "^0.4.4",
     "tern": "^0.21.0",

packages/app/package.json

@@ -196,7 +196,12 @@ function addMiddleware(devServer, index) {
   if (process.env.LOCAL_SERVER) {
     devServer.use(
       cors({
-        origin: ['http://localhost:3000', 'http://localhost:3002'],
+        origin: [
+          'http://localhost:3000',
+          'http://localhost:3002',
+          'http://localhost:8000',
+          'http://localhost:8001',
+        ],
         credentials: true,
       })
     );

packages/app/scripts/start.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import Centered from 'common/components/flex/Centered';
 
-export const Container = Centered.extend`
+export const Container = styled(Centered)`
   height: 100%;
   color: ${props =>
     props.theme['editor.foreground'] || 'rgba(255, 255, 255, 0.9)'};

packages/app/src/app/components/CodeEditor/ImageViewer/elements.js

@@ -40,7 +40,7 @@ export default class ImageViewer extends React.Component<Props>
 
         <MaxWidth onSubmit={this.onSubmit}>
           <Input
-            innerRef={el => {
+            ref={el => {
               this.input = el;
             }}
             onChange={this.doChangeCode}

packages/app/src/app/components/CodeEditor/ImageViewer/index.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Spring } from 'react-spring';
+import Portal from 'common/components/Portal';
 
-import Portal from '../Portal';
 import { Container, Item, ItemContainer } from './elements';
 
 class ContextMenu extends React.PureComponent {