playroom 0.27.3 → 0.27.7

package/lib/getStaticTypes.js

@@ -4,6 +4,7 @@ const keyBy = require('lodash/keyBy');
 const mapValues = require('lodash/mapValues');
 const fs = require('fs');
 const ts = require('typescript');
+const path = require('path');
 
 const stringRegex = /^"(.*)"$/;
 const parsePropType = (propType) => {
@@ -23,6 +24,7 @@ module.exports = async (playroomConfig) => {
   } = playroomConfig;
 
   const tsConfigPath = await findUp('tsconfig.json', { cwd });
+  const basePath = path.dirname(tsConfigPath);
 
   if (!tsConfigPath) {
     return {};
@@ -38,12 +40,25 @@ module.exports = async (playroomConfig) => {
     throw error;
   }
 
+  const { options, errors } = ts.parseJsonConfigFileContent(
+    config,
+    ts.sys,
+    basePath,
+    {},
+    tsConfigPath
+  );
+
+  if (errors && errors.length) {
+    console.error('Error parsing tsConfig file.');
+    throw errors[0];
+  }
+
   try {
     const files = await fastGlob(typeScriptFiles, { cwd, absolute: true });
     const types = require('react-docgen-typescript')
       .withCompilerOptions(
         {
-          ...config.compilerOptions,
+          ...options,
           noErrorTruncation: true,
         },
         {

package/lib/makeWebpackConfig.js

@@ -2,7 +2,7 @@ const path = require('path');
 const webpack = require('webpack');
 const { merge } = require('webpack-merge');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
+const FriendlyErrorsWebpackPlugin = require('@soda/friendly-errors-webpack-plugin');
 const getStaticTypes = require('./getStaticTypes');
 const makeDefaultWebpackConfig = require('./makeDefaultWebpackConfig');
 
@@ -18,21 +18,12 @@ module.exports = async (playroomConfig, options) => {
 
   const staticTypes = await getStaticTypes(playroomConfig);
 
-  const devServerEntries = options.production
-    ? []
-    : [
-        `${require.resolve('webpack-dev-server/client')}?http://localhost:${
-          playroomConfig.port
-        }`,
-        `${require.resolve('webpack/hot/dev-server')}`,
-      ];
-
   const ourConfig = {
     mode: options.production ? 'production' : 'development',
     entry: {
-      index: [...devServerEntries, require.resolve('../src/index.js')],
-      frame: [...devServerEntries, require.resolve('../src/frame.js')],
-      preview: [...devServerEntries, require.resolve('../src/preview.js')],
+      index: [require.resolve('../src/index.js')],
+      frame: [require.resolve('../src/frame.js')],
+      preview: [require.resolve('../src/preview.js')],
     },
     output: {
       filename: '[name].[contenthash].js',
@@ -172,12 +163,7 @@ module.exports = async (playroomConfig, options) => {
         filename: 'preview/index.html',
         publicPath: '../',
       }),
-      ...(options.production
-        ? []
-        : [
-            new webpack.HotModuleReplacementPlugin(),
-            new FriendlyErrorsWebpackPlugin(),
-          ]),
+      ...(options.production ? [] : [new FriendlyErrorsWebpackPlugin()]),
     ],
     devtool: !options.production && 'eval-source-map',
   };

package/lib/start.js

@@ -1,6 +1,5 @@
 const webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
-const open = require('open');
 const makeWebpackConfig = require('./makeWebpackConfig');
 const portfinder = require('portfinder');
 
@@ -17,22 +16,6 @@ module.exports = async (config, callback) => {
       },
     }
   );
-  const webpackDevServerConfig = {
-    hot: true,
-    stats: {},
-    noInfo: true,
-    quiet: true,
-    clientLogLevel: 'none',
-    compress: true,
-    inline: true,
-    watchOptions: { ignored: /node_modules/ },
-    // Added to prevent Webpack HMR from breaking when iframeSandbox option is used
-    // See: https://github.com/webpack/webpack-dev-server/issues/1604
-    disableHostCheck: true,
-  };
-
-  const compiler = webpack(webpackConfig);
-  const devServer = new WebpackDevServer(compiler, webpackDevServerConfig);
   const { port, openBrowser } = config;
 
   portfinder.getPort({ port }, function (portErr, availablePort) {
@@ -40,15 +23,28 @@ module.exports = async (config, callback) => {
       console.error('portErr: ', portErr);
       return;
     }
-    devServer.listen(availablePort, '0.0.0.0', (...args) => {
-      const [err] = args;
+    const webpackDevServerConfig = {
+      hot: true,
+      port: availablePort,
+      open: openBrowser,
+      devMiddleware: {
+        stats: false,
+      },
+      compress: true,
+      static: {
+        watch: { ignored: /node_modules/ },
+      },
+      // Added to prevent Webpack HMR from breaking when iframeSandbox option is used
+      // See: https://github.com/webpack/webpack-dev-server/issues/1604
+      allowedHosts: 'all',
+    };
 
-      if (!err && openBrowser) {
-        open(`http://localhost:${availablePort}`);
-      }
+    const compiler = webpack(webpackConfig);
+    const devServer = new WebpackDevServer(webpackDevServerConfig, compiler);
 
+    devServer.startCallback(() => {
       if (typeof callback === 'function') {
-        callback(...args);
+        callback();
       }
     });
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playroom",
-  "version": "0.27.3",
+  "version": "0.27.7",
   "description": "Design with code, powered by your own component library",
   "main": "utils/index.js",
   "types": "utils/index.d.ts",
@@ -67,8 +67,8 @@
     "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.13.0",
     "@babel/standalone": "^7.13.11",
+    "@soda/friendly-errors-webpack-plugin": "^1.8.0",
     "@types/base64-url": "^2.2.0",
-    "@types/classnames": "^2.2.11",
     "@types/codemirror": "^0.0.108",
     "@types/dedent": "^0.7.0",
     "@types/history": "^4.7.8",
@@ -79,7 +79,7 @@
     "@types/react-dom": "^17.0.2",
     "autoprefixer": "^10.2.5",
     "babel-loader": "^8.2.2",
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.1",
     "codemirror": "^5.59.4",
     "command-line-args": "^5.1.1",
     "command-line-usage": "^6.1.1",
@@ -89,7 +89,6 @@
     "dedent": "^0.7.0",
     "fast-glob": "^3.2.5",
     "find-up": "^5.0.0",
-    "friendly-errors-webpack-plugin": "^1.7.0",
     "fuzzy": "^0.1.3",
     "history": "^5.0.0",
     "html-webpack-plugin": "^5.3.1",
@@ -101,7 +100,6 @@
     "locate-path": "^6.0.0",
     "lodash": "^4.17.21",
     "lz-string": "^1.4.4",
-    "open": "^8.0.2",
     "parse-prop-types": "^0.3.0",
     "portfinder": "^1.0.28",
     "postcss-loader": "^5.2.0",
@@ -119,7 +117,7 @@
     "url-join": "^4.0.1",
     "use-debounce": "^3.3.0",
     "webpack": "^5.26.0",
-    "webpack-dev-server": "^3.11.2",
+    "webpack-dev-server": "^4.2.0",
     "webpack-merge": "^5.7.3"
   },
   "devDependencies": {