Improve builds

Author: Ives van Hoorne

packages/react-sandpack/.gitignore

@@ -2,5 +2,6 @@ compiled
 storybook-static
 .rpt2_cache
 dist
+es
 docs
 .env

packages/react-sandpack/package.json

@@ -4,12 +4,12 @@
   "description": "",
   "keywords": [],
   "license": "SEE LICENSE.MD IN ROOT",
-  "main": "dist/react-sandpack.umd.js",
-  "module": "dist/react-sandpack.es5.js",
+  "main": "dist/react-sandpack.js",
+  "browser": "dist/react-sandpack.umd.js",
+  "module": "es/react-sandpack.js",
+  "jsnext:main": "es/react-sandpack.js",
   "typings": "dist/types/react-sandpack.d.ts",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist", "es"],
   "author": "Ives van Hoorne <[email protected]>",
   "repository": {
     "type": "git",
@@ -20,8 +20,10 @@
   },
   "scripts": {
     "lint": "tslint -t codeFrame 'src/**/*.ts' 'test/**/*.ts'",
-    "prebuild": "rimraf dist",
-    "build": "tsc --module commonjs && rollup -c rollup.config.ts && typedoc --out docs --target es6 --theme minimal --mode file src && gulp sass",
+    "prebuild": "rimraf dist && rimraf es",
+    "build":
+      "tsc --module commonjs && rollup -c rollup.config.ts && yarn build:min && typedoc --out docs --target es6 --theme minimal --mode file src && gulp build",
+    "build:min": "cross-env BUILD_MINIFY=1 rollup -c rollup.config.ts",
     "start": "npm-run-all --parallel watch:**",
     "watch:rollup": "rollup -c rollup.config.ts -w",
     "watch:gulp": "gulp sass:watch",
@@ -47,23 +49,17 @@
     },
     "validate-commit-msg": {
       "types": "conventional-commit-types",
-      "helpMessage": "Use \"npm run commit\" instead, we use conventional-changelog format :) (https://github.com/commitizen/cz-cli)"
+      "helpMessage":
+        "Use \"npm run commit\" instead, we use conventional-changelog format :) (https://github.com/commitizen/cz-cli)"
     }
   },
   "jest": {
     "transform": {
       ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
     },
     "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js"
-    ],
-    "coveragePathIgnorePatterns": [
-      "/node_modules/",
-      "/test/"
-    ],
+    "moduleFileExtensions": ["ts", "tsx", "js"],
+    "coveragePathIgnorePatterns": ["/node_modules/", "/test/"],
     "coverageThreshold": {
       "global": {
         "branches": 90,
@@ -120,6 +116,7 @@
     "rollup-plugin-sass": "^0.6.0",
     "rollup-plugin-sourcemaps": "^0.4.2",
     "rollup-plugin-typescript2": "^0.11.1",
+    "rollup-plugin-uglify": "^3.0.0",
     "semantic-release": "^12.4.1",
     "storybook-addon-jsx": "^5.3.0",
     "ts-jest": "^22.0.0",

packages/react-sandpack/rollup.config.ts

@@ -3,34 +3,55 @@ import commonjs from 'rollup-plugin-commonjs';
 import sourceMaps from 'rollup-plugin-sourcemaps';
 import camelCase from 'lodash.camelcase';
 import typescript from 'rollup-plugin-typescript2';
+import uglify from 'rollup-plugin-uglify';
 
 const pkg = require('./package.json');
 
 const libraryName = 'react-sandpack';
 
-export default {
-  input: `src/${libraryName}.ts`,
-  output: [
-    { file: pkg.main, name: camelCase(libraryName), format: 'umd' },
-    { file: pkg.module, format: 'es' },
-  ],
-  sourcemap: true,
-  // Indicate here external modules you don't wanna include in your bundle (i.e.: 'lodash')
-  external: [],
-  watch: {
-    include: 'src/**',
-  },
-  plugins: [
-    // Compile TypeScript files
-    typescript({ useTsconfigDeclarationDir: true }),
-    // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
-    commonjs(),
-    // Allow node_modules resolution, so you can use 'external' to control
-    // which external modules to include in the bundle
-    // https://github.com/rollup/rollup-plugin-node-resolve#usage
-    resolve(),
-
-    // Resolve source maps to the original source
-    sourceMaps(),
-  ],
-};
+const minify = !!process.env.BUILD_MINIFY;
+
+function getFileName(name) {
+  if (minify) {
+    return name.replace('.js', '.min.js');
+  }
+
+  return name;
+}
+
+function getConfig({ isUMD }) {
+  return {
+    input: `src/${libraryName}.ts`,
+    output: [
+      isUMD
+        ? {
+            file: getFileName(pkg.browser),
+            name: camelCase(libraryName),
+            format: 'umd',
+          }
+        : { file: getFileName(pkg.main), format: 'cjs' },
+    ],
+    sourcemap: true,
+    watch: {
+      include: 'src/**',
+    },
+    external: isUMD ? ['react'] : id => id === 'react' || /codemirror/.test(id),
+    plugins: [
+      // Compile TypeScript files
+      typescript({ useTsconfigDeclarationDir: true }),
+      // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
+      isUMD && commonjs(),
+      // Allow node_modules resolution, so you can use 'external' to control
+      // which external modules to include in the bundle
+      // https://github.com/rollup/rollup-plugin-node-resolve#usage
+      isUMD && resolve(),
+
+      // Resolve source maps to the original source
+      sourceMaps(),
+
+      minify && uglify(),
+    ],
+  };
+}
+
+export default [getConfig({ isUMD: false }), getConfig({ isUMD: true })];

packages/react-sandpack/src/react-sandpack.ts

@@ -1,4 +1,21 @@
-import Preview from './components/Preview/index';
-import OpenInCodeSandbox from './components/OpenInCodeSandbox/index';
+import BrowserPreview from './components/BrowserPreview';
+import CodeMirror from './components/CodeEditor/CodeMirror';
+import FileExplorer from './components/FileExplorer';
+import Navigator from './components/Navigator';
+import OpenInCodeSandbox from './components/OpenInCodeSandbox';
+import Preview from './components/Preview';
+import SandpackConsumer from './components/SandpackConsumer';
+import SandpackProvider from './components/SandpackProvider';
+import TranspiledCodeView from './components/TranspiledCodeView';
 
-export { Preview, OpenInCodeSandbox };
+export {
+  BrowserPreview,
+  CodeMirror,
+  FileExplorer,
+  Navigator,
+  OpenInCodeSandbox,
+  Preview,
+  SandpackConsumer,
+  SandpackProvider,
+  TranspiledCodeView,
+};

packages/react-sandpack/tsconfig.json

@@ -11,7 +11,7 @@
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "declarationDir": "dist/types",
-    "outDir": "dist/lib",
+    "outDir": "es",
     "typeRoots": ["node_modules/@types"],
     "jsx": "react"
   },

yarn.lock

@@ -15908,6 +15908,12 @@ rollup-plugin-typescript2@^0.11.1:
     rollup-pluginutils "^2.0.1"
     tslib "^1.9.0"
 
+rollup-plugin-uglify@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-uglify/-/rollup-plugin-uglify-3.0.0.tgz#a34eca24617709c6bf1778e9653baafa06099b86"
+  dependencies:
+    uglify-es "^3.3.7"
+
 "rollup-pluginutils@>= 1.3.1", rollup-pluginutils@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.0.1.tgz#7ec95b3573f6543a46a6461bd9a7c544525d0fc0"
@@ -18075,7 +18081,7 @@ uglify-es@^3.1.3:
     commander "~2.11.0"
     source-map "~0.6.1"
 
-uglify-es@^3.3.4:
+uglify-es@^3.3.4, uglify-es@^3.3.7:
   version "3.3.9"
   resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"
   dependencies: