@teambit/ui 0.0.527 → 0.0.531

package/dist/start-plugin.d.ts

@@ -8,5 +8,5 @@ export interface StartPlugin {
     initiate(startOptions: StartPluginOptions): void;
     getProxy?(): ProxyEntry[];
     render: ComponentType;
-    get whenReady(): Promise<void>;
+    readonly whenReady: Promise<void>;
 }

package/dist/ui-server.d.ts

@@ -38,7 +38,7 @@ export declare class UIServer {
         ssr?: boolean | undefined;
         launchBrowserOnStart?: boolean | undefined;
     } | undefined;
-    getDevConfig(): Promise<any>;
+    getDevConfig(): Promise<import("@teambit/webpack").WebpackConfigWithDevServer>;
     private setReady;
     private startPromise;
     get whenReady(): Promise<void[]>;

package/dist/ui-server.js

@@ -121,14 +121,20 @@ function _ui() {
   return data;
 }
 
+function _webpackDev() {
+  const data = require("./webpack/webpack.dev.config");
+
+  _webpackDev = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2().default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-const {
-  devConfig
-} = require('./webpack/webpack.dev.config');
-
 class UIServer {
   constructor(graphql, expressExtension, ui, uiRoot, uiRootExtension, logger, publicDir, plugins) {
     this.graphql = graphql;
@@ -176,7 +182,7 @@ class UIServer {
   async getDevConfig() {
     const aspects = await this.uiRoot.resolveAspects(_ui().UIRuntime.name);
     const aspectsPaths = aspects.map(aspect => aspect.aspectPath);
-    return devConfig(this.uiRoot.path, [await this.ui.generateRoot(aspects, this.uiRootExtension)], this.uiRoot.name, aspectsPaths);
+    return (0, _webpackDev().devConfig)(this.uiRoot.path, [await this.ui.generateRoot(aspects, this.uiRootExtension)], this.uiRoot.name, aspectsPaths);
   }
 
   get whenReady() {
@@ -281,17 +287,18 @@ class UIServer {
   async dev({
     portRange
   } = {}) {
-    const selectedPort = await this.selectPort(portRange);
+    const devServerPort = await this.selectPort(portRange);
     await this.start({
       portRange: [4100, 4200]
     });
+    const expressAppPort = this._port;
     const config = await this.getDevConfig();
     const compiler = (0, _webpack().default)(config);
-    const devServerConfig = await this.getDevServerConfig(this._port, config.devServer); // @ts-ignore in the capsules it throws an error about compatibilities issues between webpack.compiler and webpackDevServer/webpack/compiler
+    const devServerConfig = await this.getDevServerConfig(devServerPort, expressAppPort, config.devServer); // @ts-ignore in the capsules it throws an error about compatibilities issues between webpack.compiler and webpackDevServer/webpack/compiler
 
-    const devServer = new (_webpackDevServer().default)(compiler, devServerConfig);
-    devServer.listen(selectedPort);
-    this._port = selectedPort;
+    const devServer = new (_webpackDevServer().default)(devServerConfig, compiler);
+    await devServer.start();
+    this._port = devServerPort;
     return devServer;
   }
 
@@ -320,11 +327,12 @@ class UIServer {
     return gqlProxies.concat(proxyEntries);
   }
 
-  async getDevServerConfig(port, config) {
-    const proxy = await this.getProxy(port);
+  async getDevServerConfig(appPort, gqlPort, config) {
+    const proxy = await this.getProxy(gqlPort);
 
     const devServerConf = _objectSpread(_objectSpread({}, config), {}, {
-      proxy
+      proxy,
+      port: appPort
     });
 
     return devServerConf;

package/dist/ui-server.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ui-server.ts"],"names":["devConfig","require","UIServer","constructor","graphql","expressExtension","ui","uiRoot","uiRootExtension","logger","publicDir","plugins","Promise","resolve","setReady","getName","name","port","_port","host","fullUrl","buildOptions","getDevConfig","aspects","resolveAspects","UIRuntime","aspectsPaths","map","aspect","aspectPath","path","generateRoot","whenReady","all","startPromise","x","start","portRange","app","createApp","root","server","createServer","configureProxy","use","express","static","index","Port","getPortFromRange","setupServerSideRendering","listen","info","getPluginsComponents","plugin","render","ssr","ssrMiddleware","title","warn","get","debug","proxServer","httpProxy","createProxyServer","on","e","error","message","proxyEntries","getProxyFromPlugins","req","socket","head","entry","find","proxy","context","some","item","url","ws","target","forEach","route","res","web","originalUrl","dev","selectedPort","selectPort","config","compiler","devServerConfig","getDevServerConfig","devServer","WebpackDevServer","proxiesByPlugin","getProxy","gqlProxies","changeOrigin","concat","devServerConf","create","props","startPlugins"],"mappings":"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","sourcesContent":["import { flatten } from 'lodash';\nimport { ExpressMain } from '@teambit/express';\nimport { GraphqlMain } from '@teambit/graphql';\nimport { Logger } from '@teambit/logger';\nimport express, { Express } from 'express';\nimport fallback from 'express-history-api-fallback';\nimport { Port } from '@teambit/toolbox.network.get-port';\nimport { Server } from 'http';\nimport httpProxy from 'http-proxy';\nimport { join } from 'path';\nimport webpack from 'webpack';\nimport WebpackDevServer, { Configuration as WdsConfiguration } from 'webpack-dev-server';\nimport { createSsrMiddleware } from './ssr/render-middleware';\nimport { StartPlugin } from './start-plugin';\nimport { ProxyEntry, UIRoot } from './ui-root';\nimport { UIRuntime } from './ui.aspect';\nimport { UiMain } from './ui.main.runtime';\n\nconst { devConfig } = require('./webpack/webpack.dev.config');\n\nexport type UIServerProps = {\n  graphql: GraphqlMain;\n  express: ExpressMain;\n  ui: UiMain;\n  uiRoot: UIRoot;\n  uiRootExtension: string;\n  logger: Logger;\n  publicDir: string;\n  startPlugins: StartPlugin[];\n};\n\nexport type StartOptions = {\n  /**\n   * port range for the UI server to bind. default is a port range of 4000-4200.\n   */\n  portRange?: number[] | number;\n};\n\nexport class UIServer {\n  constructor(\n    private graphql: GraphqlMain,\n    private expressExtension: ExpressMain,\n    private ui: UiMain,\n    private uiRoot: UIRoot,\n    private uiRootExtension: string,\n    private logger: Logger,\n    private publicDir: string,\n    private plugins: StartPlugin[]\n  ) {}\n\n  getName() {\n    return this.uiRoot.name;\n  }\n\n  private _port = 0;\n\n  get port() {\n    return this._port;\n  }\n\n  /** the hostname for the server to listen at. Currently statically 'localhost' */\n  get host() {\n    return 'localhost';\n  }\n\n  /** the server listens at this url */\n  get fullUrl() {\n    const port = this.port !== 80 ? `:${this.port}` : '';\n    return `http://${this.host}${port}`;\n  }\n\n  get buildOptions() {\n    return this.uiRoot.buildOptions;\n  }\n\n  /**\n   * get the webpack configuration of the UI server.\n   */\n  async getDevConfig(): Promise<any> {\n    const aspects = await this.uiRoot.resolveAspects(UIRuntime.name);\n    const aspectsPaths = aspects.map((aspect) => aspect.aspectPath);\n\n    return devConfig(\n      this.uiRoot.path,\n      [await this.ui.generateRoot(aspects, this.uiRootExtension)],\n      this.uiRoot.name,\n      aspectsPaths\n    );\n  }\n\n  private setReady: () => void;\n  private startPromise = new Promise<void>((resolve) => (this.setReady = resolve));\n  get whenReady() {\n    return Promise.all([this.startPromise, ...this.plugins.map((x) => x?.whenReady)]);\n  }\n\n  /**\n   * start a UI server.\n   */\n  async start({ portRange }: StartOptions = {}) {\n    const app = this.expressExtension.createApp();\n    const publicDir = `/${this.publicDir}`;\n    const root = join(this.uiRoot.path, publicDir);\n    const server = await this.graphql.createServer({ app });\n\n    // set up proxy, for things like preview, e.g. '/preview/teambit.react/react'\n    await this.configureProxy(app, server);\n\n    // pass through files from public /folder:\n    // setting `index: false` so index.html will be served by the fallback() middleware\n    app.use(express.static(root, { index: false }));\n\n    const port = await Port.getPortFromRange(portRange || [3100, 3200]);\n\n    await this.setupServerSideRendering({ root, port, app });\n\n    // in any and all other cases, serve index.html.\n    // No any other endpoints past this will execute\n    app.use(fallback('index.html', { root }));\n\n    server.listen(port);\n    this._port = port;\n\n    // important: we use the string of the following message for the http.e2e.ts. if you change the message,\n    // please make sure you change the `HTTP_SERVER_READY_MSG` const.\n    this.logger.info(`UI server of ${this.uiRootExtension} is listening to port ${port}`);\n\n    this.setReady();\n  }\n\n  getPluginsComponents() {\n    return this.plugins.map((plugin) => plugin.render);\n  }\n\n  private async setupServerSideRendering({ root, port, app }: { root: string; port: number; app: Express }) {\n    if (!this.buildOptions?.ssr) return;\n\n    const ssrMiddleware = await createSsrMiddleware({\n      root,\n      port,\n      title: this.uiRoot.name,\n      logger: this.logger,\n    });\n\n    if (!ssrMiddleware) {\n      this.logger.warn('[ssr] middleware failed setup');\n      return;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-misused-promises\n    app.get('*', ssrMiddleware);\n    this.logger.debug('[ssr] serving for \"*\"');\n  }\n\n  private async configureProxy(app: Express, server: Server) {\n    const proxServer = httpProxy.createProxyServer();\n    proxServer.on('error', (e) => this.logger.error(e.message));\n    const proxyEntries = await this.getProxyFromPlugins();\n    server.on('upgrade', function (req, socket, head) {\n      const entry = proxyEntries.find((proxy) => proxy.context.some((item) => item === req.url));\n      if (!entry) return;\n      proxServer.ws(req, socket, head, {\n        target: entry.target,\n      });\n    });\n\n    proxyEntries.forEach((entry) => {\n      entry.context.forEach((route) => {\n        app.use(`${route}/*`, (req, res) => {\n          proxServer.web(req, res, { ...entry, target: `${entry.target}/${req.originalUrl}` });\n        });\n      });\n    });\n  }\n\n  /**\n   * start a UI dev server.\n   */\n  async dev({ portRange }: StartOptions = {}) {\n    const selectedPort = await this.selectPort(portRange);\n    await this.start({ portRange: [4100, 4200] });\n    const config = await this.getDevConfig();\n    const compiler = webpack(config);\n    const devServerConfig = await this.getDevServerConfig(this._port, config.devServer);\n    // @ts-ignore in the capsules it throws an error about compatibilities issues between webpack.compiler and webpackDevServer/webpack/compiler\n    const devServer = new WebpackDevServer(compiler, devServerConfig);\n    devServer.listen(selectedPort);\n    this._port = selectedPort;\n    return devServer;\n  }\n\n  private async selectPort(portRange?: number[] | number) {\n    return Port.getPortFromRange(portRange || [3100, 3200]);\n  }\n\n  private async getProxyFromPlugins(): Promise<ProxyEntry[]> {\n    const proxiesByPlugin = this.plugins.map((plugin) => {\n      return plugin.getProxy ? plugin.getProxy() : [];\n    });\n\n    return flatten(await Promise.all(proxiesByPlugin));\n  }\n\n  private async getProxy(port = 4000) {\n    const proxyEntries = await this.getProxyFromPlugins();\n\n    const gqlProxies: ProxyEntry[] = [\n      {\n        context: ['/graphql', '/api'],\n        target: `http://${this.host}:${port}`,\n        changeOrigin: true,\n      },\n      {\n        context: ['/subscriptions'],\n        target: `ws://${this.host}:${port}`,\n        ws: true,\n      },\n    ];\n\n    return gqlProxies.concat(proxyEntries);\n  }\n\n  private async getDevServerConfig(port: number, config?: WdsConfiguration): Promise<WdsConfiguration> {\n    const proxy = await this.getProxy(port);\n    const devServerConf = { ...config, proxy };\n\n    return devServerConf;\n  }\n\n  static create(props: UIServerProps) {\n    return new UIServer(\n      props.graphql,\n      props.express,\n      props.ui,\n      props.uiRoot,\n      props.uiRootExtension,\n      props.logger,\n      props.publicDir,\n      props.startPlugins\n    );\n  }\n}\n"]}
+{"version":3,"sources":["ui-server.ts"],"names":["UIServer","constructor","graphql","expressExtension","ui","uiRoot","uiRootExtension","logger","publicDir","plugins","Promise","resolve","setReady","getName","name","port","_port","host","fullUrl","buildOptions","getDevConfig","aspects","resolveAspects","UIRuntime","aspectsPaths","map","aspect","aspectPath","path","generateRoot","whenReady","all","startPromise","x","start","portRange","app","createApp","root","server","createServer","configureProxy","use","express","static","index","Port","getPortFromRange","setupServerSideRendering","listen","info","getPluginsComponents","plugin","render","ssr","ssrMiddleware","title","warn","get","debug","proxServer","httpProxy","createProxyServer","on","e","error","message","proxyEntries","getProxyFromPlugins","req","socket","head","entry","find","proxy","context","some","item","url","ws","target","forEach","route","res","web","originalUrl","dev","devServerPort","selectPort","expressAppPort","config","compiler","devServerConfig","getDevServerConfig","devServer","WebpackDevServer","proxiesByPlugin","getProxy","gqlProxies","changeOrigin","concat","appPort","gqlPort","devServerConf","create","props","startPlugins"],"mappings":"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","sourcesContent":["import { flatten } from 'lodash';\nimport { ExpressMain } from '@teambit/express';\nimport { GraphqlMain } from '@teambit/graphql';\nimport { Logger } from '@teambit/logger';\nimport express, { Express } from 'express';\nimport fallback from 'express-history-api-fallback';\nimport { Port } from '@teambit/toolbox.network.get-port';\nimport { Server } from 'http';\nimport httpProxy from 'http-proxy';\nimport { join } from 'path';\nimport webpack from 'webpack';\nimport WebpackDevServer, { Configuration as WdsConfiguration } from 'webpack-dev-server';\nimport { createSsrMiddleware } from './ssr/render-middleware';\nimport { StartPlugin } from './start-plugin';\nimport { ProxyEntry, UIRoot } from './ui-root';\nimport { UIRuntime } from './ui.aspect';\nimport { UiMain } from './ui.main.runtime';\n\nimport { devConfig } from './webpack/webpack.dev.config';\n\nexport type UIServerProps = {\n  graphql: GraphqlMain;\n  express: ExpressMain;\n  ui: UiMain;\n  uiRoot: UIRoot;\n  uiRootExtension: string;\n  logger: Logger;\n  publicDir: string;\n  startPlugins: StartPlugin[];\n};\n\nexport type StartOptions = {\n  /**\n   * port range for the UI server to bind. default is a port range of 4000-4200.\n   */\n  portRange?: number[] | number;\n};\n\nexport class UIServer {\n  constructor(\n    private graphql: GraphqlMain,\n    private expressExtension: ExpressMain,\n    private ui: UiMain,\n    private uiRoot: UIRoot,\n    private uiRootExtension: string,\n    private logger: Logger,\n    private publicDir: string,\n    private plugins: StartPlugin[]\n  ) {}\n\n  getName() {\n    return this.uiRoot.name;\n  }\n\n  private _port = 0;\n\n  get port() {\n    return this._port;\n  }\n\n  /** the hostname for the server to listen at. Currently statically 'localhost' */\n  get host() {\n    return 'localhost';\n  }\n\n  /** the server listens at this url */\n  get fullUrl() {\n    const port = this.port !== 80 ? `:${this.port}` : '';\n    return `http://${this.host}${port}`;\n  }\n\n  get buildOptions() {\n    return this.uiRoot.buildOptions;\n  }\n\n  /**\n   * get the webpack configuration of the UI server.\n   */\n  async getDevConfig() {\n    const aspects = await this.uiRoot.resolveAspects(UIRuntime.name);\n    const aspectsPaths = aspects.map((aspect) => aspect.aspectPath);\n\n    return devConfig(\n      this.uiRoot.path,\n      [await this.ui.generateRoot(aspects, this.uiRootExtension)],\n      this.uiRoot.name,\n      aspectsPaths\n    );\n  }\n\n  private setReady: () => void;\n  private startPromise = new Promise<void>((resolve) => (this.setReady = resolve));\n  get whenReady() {\n    return Promise.all([this.startPromise, ...this.plugins.map((x) => x?.whenReady)]);\n  }\n\n  /**\n   * start a UI server.\n   */\n  async start({ portRange }: StartOptions = {}) {\n    const app = this.expressExtension.createApp();\n    const publicDir = `/${this.publicDir}`;\n    const root = join(this.uiRoot.path, publicDir);\n    const server = await this.graphql.createServer({ app });\n\n    // set up proxy, for things like preview, e.g. '/preview/teambit.react/react'\n    await this.configureProxy(app, server);\n\n    // pass through files from public /folder:\n    // setting `index: false` so index.html will be served by the fallback() middleware\n    app.use(express.static(root, { index: false }));\n\n    const port = await Port.getPortFromRange(portRange || [3100, 3200]);\n\n    await this.setupServerSideRendering({ root, port, app });\n\n    // in any and all other cases, serve index.html.\n    // No any other endpoints past this will execute\n    app.use(fallback('index.html', { root }));\n\n    server.listen(port);\n    this._port = port;\n\n    // important: we use the string of the following message for the http.e2e.ts. if you change the message,\n    // please make sure you change the `HTTP_SERVER_READY_MSG` const.\n    this.logger.info(`UI server of ${this.uiRootExtension} is listening to port ${port}`);\n\n    this.setReady();\n  }\n\n  getPluginsComponents() {\n    return this.plugins.map((plugin) => plugin.render);\n  }\n\n  private async setupServerSideRendering({ root, port, app }: { root: string; port: number; app: Express }) {\n    if (!this.buildOptions?.ssr) return;\n\n    const ssrMiddleware = await createSsrMiddleware({\n      root,\n      port,\n      title: this.uiRoot.name,\n      logger: this.logger,\n    });\n\n    if (!ssrMiddleware) {\n      this.logger.warn('[ssr] middleware failed setup');\n      return;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-misused-promises\n    app.get('*', ssrMiddleware);\n    this.logger.debug('[ssr] serving for \"*\"');\n  }\n\n  private async configureProxy(app: Express, server: Server) {\n    const proxServer = httpProxy.createProxyServer();\n    proxServer.on('error', (e) => this.logger.error(e.message));\n    const proxyEntries = await this.getProxyFromPlugins();\n    server.on('upgrade', function (req, socket, head) {\n      const entry = proxyEntries.find((proxy) => proxy.context.some((item) => item === req.url));\n      if (!entry) return;\n      proxServer.ws(req, socket, head, {\n        target: entry.target,\n      });\n    });\n\n    proxyEntries.forEach((entry) => {\n      entry.context.forEach((route) => {\n        app.use(`${route}/*`, (req, res) => {\n          proxServer.web(req, res, { ...entry, target: `${entry.target}/${req.originalUrl}` });\n        });\n      });\n    });\n  }\n\n  /**\n   * start a UI dev server.\n   */\n  async dev({ portRange }: StartOptions = {}) {\n    const devServerPort = await this.selectPort(portRange);\n    await this.start({ portRange: [4100, 4200] });\n    const expressAppPort = this._port;\n\n    const config = await this.getDevConfig();\n    const compiler = webpack(config);\n    const devServerConfig = await this.getDevServerConfig(devServerPort, expressAppPort, config.devServer);\n    // @ts-ignore in the capsules it throws an error about compatibilities issues between webpack.compiler and webpackDevServer/webpack/compiler\n    const devServer = new WebpackDevServer(devServerConfig, compiler);\n    \n    await devServer.start();\n    this._port = devServerPort;\n    return devServer;\n  }\n\n  private async selectPort(portRange?: number[] | number) {\n    return Port.getPortFromRange(portRange || [3100, 3200]);\n  }\n\n  private async getProxyFromPlugins(): Promise<ProxyEntry[]> {\n    const proxiesByPlugin = this.plugins.map((plugin) => {\n      return plugin.getProxy ? plugin.getProxy() : [];\n    });\n\n    return flatten(await Promise.all(proxiesByPlugin));\n  }\n\n  private async getProxy(port = 4000) {\n    const proxyEntries = await this.getProxyFromPlugins();\n\n    const gqlProxies: ProxyEntry[] = [\n      {\n        context: ['/graphql', '/api'],\n        target: `http://${this.host}:${port}`,\n        changeOrigin: true,\n      },\n      {\n        context: ['/subscriptions'],\n        target: `ws://${this.host}:${port}`,\n        ws: true,\n      },\n    ];\n\n    return gqlProxies.concat(proxyEntries);\n  }\n\n  private async getDevServerConfig(\n    appPort: number,\n    gqlPort: number,\n    config?: WdsConfiguration\n  ): Promise<WdsConfiguration> {\n    const proxy = await this.getProxy(gqlPort);\n    const devServerConf = { ...config, proxy, port: appPort };\n\n    return devServerConf;\n  }\n\n  static create(props: UIServerProps) {\n    return new UIServer(\n      props.graphql,\n      props.express,\n      props.ui,\n      props.uiRoot,\n      props.uiRootExtension,\n      props.logger,\n      props.publicDir,\n      props.startPlugins\n    );\n  }\n}\n"]}

package/dist/webpack/webpack.dev.config.d.ts

@@ -1 +1,2 @@
-export {};
+import { WebpackConfigWithDevServer } from '@teambit/webpack';
+export declare function devConfig(workspaceDir: any, entryFiles: any, title: any, aspectPaths: any): WebpackConfigWithDevServer;

package/dist/webpack/webpack.dev.config.js

@@ -1,5 +1,22 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.devConfig = devConfig;
+
+function _webpack() {
+  const data = require("webpack");
+
+  _webpack = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function stylesRegexps() {
   const data = _interopRequireWildcard(require("@teambit/webpack.modules.style-regexps"));
 
@@ -20,35 +37,104 @@ function _utils() {
   return data;
 }
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _htmlWebpackPlugin() {
+  const data = _interopRequireDefault(require("html-webpack-plugin"));
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+  _htmlWebpackPlugin = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _reactRefreshWebpackPlugin() {
+  const data = _interopRequireDefault(require("@pmmmwh/react-refresh-webpack-plugin"));
+
+  _reactRefreshWebpackPlugin = function () {
+    return data;
+  };
+
+  return data;
+}
 
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+function _errorOverlayMiddleware() {
+  const data = _interopRequireDefault(require("react-dev-utils/errorOverlayMiddleware"));
 
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+  _errorOverlayMiddleware = function () {
+    return data;
+  };
+
+  return data;
+}
 
-const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
+function _evalSourceMapMiddleware() {
+  const data = _interopRequireDefault(require("react-dev-utils/evalSourceMapMiddleware"));
 
-const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
+  _evalSourceMapMiddleware = function () {
+    return data;
+  };
 
-const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
+  return data;
+}
 
-const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
+function _noopServiceWorkerMiddleware() {
+  const data = _interopRequireDefault(require("react-dev-utils/noopServiceWorkerMiddleware"));
 
-const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
+  _noopServiceWorkerMiddleware = function () {
+    return data;
+  };
 
-const path = require('path');
+  return data;
+}
+
+function _redirectServedPathMiddleware() {
+  const data = _interopRequireDefault(require("react-dev-utils/redirectServedPathMiddleware"));
+
+  _redirectServedPathMiddleware = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _getPublicUrlOrPath() {
+  const data = _interopRequireDefault(require("react-dev-utils/getPublicUrlOrPath"));
+
+  _getPublicUrlOrPath = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _path() {
+  const data = _interopRequireDefault(require("path"));
+
+  _path = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _html() {
+  const data = require("./html");
+
+  _html = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const {
-  html
-} = require('./html');
 /*
  * Webpack config for the bit ui
  * i.e. `bit start --dev`,
  */
-
-
 const clientHost = process.env.WDS_SOCKET_HOST;
 const clientPath = process.env.WDS_SOCKET_PATH; // default is '/sockjs-node';
 
@@ -57,15 +143,11 @@ const port = process.env.WDS_SOCKET_PORT; // const reactRefreshRuntimeEntry = re
 //   '@pmmmwh/react-refresh-webpack-plugin/lib/runtime/RefreshUtils'
 // );
 
-const publicUrlOrPath = getPublicUrlOrPath(process.env.NODE_ENV === 'development', '/', '/public');
+const publicUrlOrPath = (0, _getPublicUrlOrPath().default)(process.env.NODE_ENV === 'development', '/', '/public');
 const moduleFileExtensions = ['web.mjs', 'mjs', 'web.js', 'js', 'web.ts', 'ts', 'web.tsx', 'tsx', 'json', 'web.jsx', 'jsx'];
-module.exports = {
-  createWebpackConfig,
-  devConfig: createWebpackConfig
-};
 
-function createWebpackConfig(workspaceDir, entryFiles, title, aspectPaths) {
-  const resolveWorkspacePath = relativePath => path.resolve(workspaceDir, relativePath); // Host
+function devConfig(workspaceDir, entryFiles, title, aspectPaths) {
+  const resolveWorkspacePath = relativePath => _path().default.resolve(workspaceDir, relativePath); // Host
 
 
   const host = process.env.HOST || 'localhost'; // Required for babel-preset-react-app
@@ -74,15 +156,14 @@ function createWebpackConfig(workspaceDir, entryFiles, title, aspectPaths) {
   return {
     // Environment mode
     mode: 'development',
-    // improves HMR
+    // improves HMR - assume node_modules might change
     snapshot: {
       managedPaths: []
     },
     devtool: 'inline-source-map',
     // Entry point of app
     entry: {
-      main: entryFiles // preview: entryFiles.map(filePath => resolveWorkspacePath(filePath))
-
+      main: entryFiles
     },
     output: {
       // Development filename output
@@ -92,7 +173,7 @@ function createWebpackConfig(workspaceDir, entryFiles, title, aspectPaths) {
       publicPath: publicUrlOrPath,
       chunkFilename: 'static/js/[name].chunk.js',
       // point sourcemap entries to original disk locations (format as URL on windows)
-      devtoolModuleFilenameTemplate: info => (0, _utils().pathNormalizeToLinux)(path.resolve(info.absoluteResourcePath)) // this defaults to 'window', but by setting it to 'this' then
+      devtoolModuleFilenameTemplate: info => (0, _utils().pathNormalizeToLinux)(_path().default.resolve(info.absoluteResourcePath)) // this defaults to 'window', but by setting it to 'this' then
       // module chunks which are built will work in web workers as well.
       // Commented out to use the default (self) as according to tobias with webpack5 self is working with workers as well
       // globalObject: 'this',
@@ -142,22 +223,22 @@ function createWebpackConfig(workspaceDir, entryFiles, title, aspectPaths) {
         // Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`
         // middlewares before `redirectServedPath` otherwise will not have any effect
         // This lets us fetch source contents from webpack for the error overlay
-        app.use(evalSourceMapMiddleware(server)); // This lets us open files from the runtime error overlay.
+        app.use((0, _evalSourceMapMiddleware().default)(server)); // This lets us open files from the runtime error overlay.
 
-        app.use(errorOverlayMiddleware());
+        app.use((0, _errorOverlayMiddleware().default)());
       },
 
       onAfterSetupMiddleware({
         app
       }) {
         // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
-        app.use(redirectServedPath(publicUrlOrPath)); // This service worker file is effectively a 'no-op' that will reset any
+        app.use((0, _redirectServedPathMiddleware().default)(publicUrlOrPath)); // This service worker file is effectively a 'no-op' that will reset any
         // previous service worker registered for the same host:port combination.
         // We do this in development to avoid hitting the production cache if
         // it used the same host and port.
         // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
 
-        app.use(noopServiceWorkerMiddleware(publicUrlOrPath));
+        app.use((0, _noopServiceWorkerMiddleware().default)(publicUrlOrPath));
       },
 
       devMiddleware: {
@@ -282,7 +363,7 @@ function createWebpackConfig(workspaceDir, entryFiles, title, aspectPaths) {
         use: [require.resolve('style-loader'), require.resolve('css-loader')]
       }]
     },
-    plugins: [new ReactRefreshWebpackPlugin({
+    plugins: [new (_reactRefreshWebpackPlugin().default)({
       include: aspectPaths,
       // original default value was /\.([cm]js|[jt]sx?|flow)$/i
       // replaces the default value of `/node_modules/`
@@ -292,17 +373,14 @@ function createWebpackConfig(workspaceDir, entryFiles, title, aspectPaths) {
     }), // Re-generate index.html with injected script tag.
     // The injected script tag contains a src value of the
     // filename output defined above.
-    new HtmlWebpackPlugin({
+    new (_htmlWebpackPlugin().default)({
       inject: true,
-      templateContent: html(title || 'My component workspace'),
+      templateContent: (0, _html().html)(title || 'My component workspace'),
       chunks: ['main'],
       filename: 'index.html'
-    }) // new HtmlWebpackPlugin({
-    //   templateContent: html('Component preview'),
-    //   chunks: ['preview'],
-    //   filename: 'preview.html'
-    // })
-    ]
+    }), new (_webpack().ProvidePlugin)({
+      process: require.resolve('process/browser')
+    })]
   };
 }
 

package/dist/webpack/webpack.dev.config.js.map

@@ -1 +1 @@
-{"version":3,"sources":["webpack.dev.config.ts"],"names":["HtmlWebpackPlugin","require","ReactRefreshWebpackPlugin","errorOverlayMiddleware","evalSourceMapMiddleware","noopServiceWorkerMiddleware","redirectServedPath","getPublicUrlOrPath","path","html","clientHost","process","env","WDS_SOCKET_HOST","clientPath","WDS_SOCKET_PATH","port","WDS_SOCKET_PORT","publicUrlOrPath","NODE_ENV","moduleFileExtensions","module","exports","createWebpackConfig","devConfig","workspaceDir","entryFiles","title","aspectPaths","resolveWorkspacePath","relativePath","resolve","host","HOST","mode","snapshot","managedPaths","devtool","entry","main","output","filename","pathinfo","publicPath","chunkFilename","devtoolModuleFilenameTemplate","info","absoluteResourcePath","infrastructureLogging","level","stats","devServer","allowedHosts","static","directory","staticOptions","serveIndex","watch","compress","hot","historyApiFallback","disableDotRule","index","client","webSocketURL","hostname","pathname","onBeforeSetupMiddleware","app","server","use","onAfterSetupMiddleware","devMiddleware","slice","extensions","map","ext","alias","react","fallback","fs","stream","unsafeCache","rules","test","fullySpecified","enforce","include","descriptionData","componentId","value","exclude","loader","options","configFile","babelrc","presets","plugins","stylesRegexps","sassModuleRegex","modules","localIdentName","sourceMap","sassNoModuleRegex","lessModuleRegex","lessNoModuleRegex","cssModuleRegex","cssNoModulesRegex","inject","templateContent","chunks"],"mappings":";;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;;;;;AAGA,MAAMA,iBAAiB,GAAGC,OAAO,CAAC,qBAAD,CAAjC;;AACA,MAAMC,yBAAyB,GAAGD,OAAO,CAAC,sCAAD,CAAzC;;AACA,MAAME,sBAAsB,GAAGF,OAAO,CAAC,wCAAD,CAAtC;;AACA,MAAMG,uBAAuB,GAAGH,OAAO,CAAC,yCAAD,CAAvC;;AACA,MAAMI,2BAA2B,GAAGJ,OAAO,CAAC,6CAAD,CAA3C;;AACA,MAAMK,kBAAkB,GAAGL,OAAO,CAAC,8CAAD,CAAlC;;AACA,MAAMM,kBAAkB,GAAGN,OAAO,CAAC,oCAAD,CAAlC;;AACA,MAAMO,IAAI,GAAGP,OAAO,CAAC,MAAD,CAApB;;AACA,MAAM;AAAEQ,EAAAA;AAAF,IAAWR,OAAO,CAAC,QAAD,CAAxB;AAEA;AACA;AACA;AACA;;;AAEA,MAAMS,UAAU,GAAGC,OAAO,CAACC,GAAR,CAAYC,eAA/B;AACA,MAAMC,UAAU,GAAGH,OAAO,CAACC,GAAR,CAAYG,eAA/B,C,CAAgD;;AAChD,MAAMC,IAAI,GAAGL,OAAO,CAACC,GAAR,CAAYK,eAAzB,C,CAEA;AACA;AACA;AACA;;AAEA,MAAMC,eAAe,GAAGX,kBAAkB,CAACI,OAAO,CAACC,GAAR,CAAYO,QAAZ,KAAyB,aAA1B,EAAyC,GAAzC,EAA8C,SAA9C,CAA1C;AAEA,MAAMC,oBAAoB,GAAG,CAC3B,SAD2B,EAE3B,KAF2B,EAG3B,QAH2B,EAI3B,IAJ2B,EAK3B,QAL2B,EAM3B,IAN2B,EAO3B,SAP2B,EAQ3B,KAR2B,EAS3B,MAT2B,EAU3B,SAV2B,EAW3B,KAX2B,CAA7B;AAcAC,MAAM,CAACC,OAAP,GAAiB;AACfC,EAAAA,mBADe;AAEfC,EAAAA,SAAS,EAAED;AAFI,CAAjB;;AAKA,SAASA,mBAAT,CAA6BE,YAA7B,EAA2CC,UAA3C,EAAuDC,KAAvD,EAA8DC,WAA9D,EAAuG;AACrG,QAAMC,oBAAoB,GAAIC,YAAD,IAAkBtB,IAAI,CAACuB,OAAL,CAAaN,YAAb,EAA2BK,YAA3B,CAA/C,CADqG,CAGrG;;;AACA,QAAME,IAAI,GAAGrB,OAAO,CAACC,GAAR,CAAYqB,IAAZ,IAAoB,WAAjC,CAJqG,CAMrG;;AACAtB,EAAAA,OAAO,CAACC,GAAR,CAAYO,QAAZ,GAAuB,aAAvB;AAEA,SAAO;AACL;AACAe,IAAAA,IAAI,EAAE,aAFD;AAGL;AACAC,IAAAA,QAAQ,EAAE;AAAEC,MAAAA,YAAY,EAAE;AAAhB,KAJL;AAMLC,IAAAA,OAAO,EAAE,mBANJ;AAQL;AACAC,IAAAA,KAAK,EAAE;AACLC,MAAAA,IAAI,EAAEb,UADD,CAEL;;AAFK,KATF;AAcLc,IAAAA,MAAM,EAAE;AACN;AACAC,MAAAA,QAAQ,EAAE,4BAFJ;AAINC,MAAAA,QAAQ,EAAE,IAJJ;AAMNlC,MAAAA,IAAI,EAAEqB,oBAAoB,CAAC,GAAD,CANpB;AAQNc,MAAAA,UAAU,EAAEzB,eARN;AAUN0B,MAAAA,aAAa,EAAE,2BAVT;AAYN;AACAC,MAAAA,6BAA6B,EAAGC,IAAD,IAAU,mCAAqBtC,IAAI,CAACuB,OAAL,CAAae,IAAI,CAACC,oBAAlB,CAArB,CAbnC,CAeN;AACA;AACA;AACA;;AAlBM,KAdH;AAmCLC,IAAAA,qBAAqB,EAAE;AACrBC,MAAAA,KAAK,EAAE;AADc,KAnClB;AAuCLC,IAAAA,KAAK,EAAE,aAvCF;AAyCLC,IAAAA,SAAS,EAAE;AACTC,MAAAA,YAAY,EAAE,KADL;AAGTC,MAAAA,MAAM,EAAE,CACN;AACEC,QAAAA,SAAS,EAAEzB,oBAAoB,CAACX,eAAD,CADjC;AAEEqC,QAAAA,aAAa,EAAE,EAFjB;AAGE;AACA;AACA;AACAZ,QAAAA,UAAU,EAAEzB,eANd;AAOE;AACA;AACAsC,QAAAA,UAAU,EAAE,IATd;AAUE;AACA;AACAC,QAAAA,KAAK,EAAE;AAZT,OADM,CAHC;AAoBT;AACAC,MAAAA,QAAQ,EAAE,IArBD;AAuBT;AACAC,MAAAA,GAAG,EAAE,IAxBI;AA0BT3B,MAAAA,IA1BS;AA4BT4B,MAAAA,kBAAkB,EAAE;AAClBC,QAAAA,cAAc,EAAE,IADE;AAElBC,QAAAA,KAAK,EAAE5C;AAFW,OA5BX;AAiCT6C,MAAAA,MAAM,EAAE;AACNC,QAAAA,YAAY,EAAE;AACZC,UAAAA,QAAQ,EAAEvD,UADE;AAEZwD,UAAAA,QAAQ,EAAEpD,UAFE;AAGZE,UAAAA;AAHY;AADR,OAjCC;;AAyCTmD,MAAAA,uBAAuB,CAAC;AAAEC,QAAAA,GAAF;AAAOC,QAAAA;AAAP,OAAD,EAAkB;AACvC;AACA;AACA;AACAD,QAAAA,GAAG,CAACE,GAAJ,CAAQlE,uBAAuB,CAACiE,MAAD,CAA/B,EAJuC,CAKvC;;AACAD,QAAAA,GAAG,CAACE,GAAJ,CAAQnE,sBAAsB,EAA9B;AACD,OAhDQ;;AAkDToE,MAAAA,sBAAsB,CAAC;AAAEH,QAAAA;AAAF,OAAD,EAAU;AAC9B;AACAA,QAAAA,GAAG,CAACE,GAAJ,CAAQhE,kBAAkB,CAACY,eAAD,CAA1B,EAF8B,CAI9B;AACA;AACA;AACA;AACA;;AACAkD,QAAAA,GAAG,CAACE,GAAJ,CAAQjE,2BAA2B,CAACa,eAAD,CAAnC;AACD,OA5DQ;;AA8DTsD,MAAAA,aAAa,EAAE;AACb;AACA7B,QAAAA,UAAU,EAAEzB,eAAe,CAACuD,KAAhB,CAAsB,CAAtB,EAAyB,CAAC,CAA1B;AAFC;AA9DN,KAzCN;AA6GL1C,IAAAA,OAAO,EAAE;AACP;AACA;AACA;AACA;AACA;AACA;AACA2C,MAAAA,UAAU,EAAEtD,oBAAoB,CAACuD,GAArB,CAA0BC,GAAD,IAAU,IAAGA,GAAI,EAA1C,CAPL;AAQPC,MAAAA,KAAK,EAAE;AACLC,QAAAA,KAAK,EAAE7E,OAAO,CAAC8B,OAAR,CAAgB,OAAhB,CADF;AAEL,4BAAoB9B,OAAO,CAAC8B,OAAR,CAAgB,kBAAhB,CAFf;AAGL,qBAAa9B,OAAO,CAAC8B,OAAR,CAAgB,WAAhB,CAHR,CAIL;;AAJK,OARA;AAcPgD,MAAAA,QAAQ,EAAE;AACRC,QAAAA,EAAE,EAAE,KADI;AAERxE,QAAAA,IAAI,EAAEP,OAAO,CAAC8B,OAAR,CAAgB,iBAAhB,CAFE;AAGRkD,QAAAA,MAAM,EAAE,KAHA;AAIRtE,QAAAA,OAAO,EAAE;AAJD;AAdH,KA7GJ;AAmILU,IAAAA,MAAM,EAAE;AACN;AACA;AACA;AACA;AACA6D,MAAAA,WAAW,EAAE,KALP;AAMNC,MAAAA,KAAK,EAAE,CACL;AACEC,QAAAA,IAAI,EAAE,QADR;AAEErD,QAAAA,OAAO,EAAE;AACPsD,UAAAA,cAAc,EAAE;AADT;AAFX,OADK,EAOL;AACED,QAAAA,IAAI,EAAE,OADR;AAEEE,QAAAA,OAAO,EAAE,KAFX;AAGEC,QAAAA,OAAO,EAAE,cAHX;AAIE;AACAC,QAAAA,eAAe,EAAE;AAAEC,UAAAA,WAAW,EAAGC,KAAD,IAAW,CAAC,CAACA;AAA5B,SALnB;AAMEpB,QAAAA,GAAG,EAAE,CAACrE,OAAO,CAAC8B,OAAR,CAAgB,mBAAhB,CAAD;AANP,OAPK,EAeL;AACEqD,QAAAA,IAAI,EAAE,oBADR;AAEEO,QAAAA,OAAO,EAAE,cAFX;AAGEJ,QAAAA,OAAO,EAAE9D,YAHX;AAIEmE,QAAAA,MAAM,EAAE3F,OAAO,CAAC8B,OAAR,CAAgB,cAAhB,CAJV;AAKE8D,QAAAA,OAAO,EAAE;AACPC,UAAAA,UAAU,EAAE,KADL;AAEPC,UAAAA,OAAO,EAAE,KAFF;AAGPC,UAAAA,OAAO,EAAE,CACP;AACA/F,UAAAA,OAAO,CAAC8B,OAAR,CAAgB,wBAAhB,CAFO,CAHF;AAOPkE,UAAAA,OAAO,EAAE,CAAChG,OAAO,CAAC8B,OAAR,CAAgB,qBAAhB,CAAD;AAPF;AALX,OAfK,EA8BL;AACEqD,QAAAA,IAAI,EAAEc,aAAa,GAACC,eADtB;AAEE7B,QAAAA,GAAG,EAAE,CACHrE,OAAO,CAAC8B,OAAR,CAAgB,cAAhB,CADG,EAEH;AACE6D,UAAAA,MAAM,EAAE3F,OAAO,CAAC8B,OAAR,CAAgB,YAAhB,CADV;AAEE8D,UAAAA,OAAO,EAAE;AACPO,YAAAA,OAAO,EAAE;AACPC,cAAAA,cAAc,EAAE;AADT,aADF;AAIPC,YAAAA,SAAS,EAAE;AAJJ;AAFX,SAFG,EAWH;AACEV,UAAAA,MAAM,EAAE3F,OAAO,CAAC8B,OAAR,CAAgB,aAAhB,CADV;AAEE8D,UAAAA,OAAO,EAAE;AACPS,YAAAA,SAAS,EAAE;AADJ;AAFX,SAXG;AAFP,OA9BK,EAmDL;AACElB,QAAAA,IAAI,EAAEc,aAAa,GAACK,iBADtB;AAEEjC,QAAAA,GAAG,EAAE,CACHrE,OAAO,CAAC8B,OAAR,CAAgB,cAAhB,CADG,EAEH9B,OAAO,CAAC8B,OAAR,CAAgB,YAAhB,CAFG,EAGH;AACE6D,UAAAA,MAAM,EAAE3F,OAAO,CAAC8B,OAAR,CAAgB,aAAhB,CADV;AAEE8D,UAAAA,OAAO,EAAE;AACPS,YAAAA,SAAS,EAAE;AADJ;AAFX,SAHG;AAFP,OAnDK,EAgEL;AACElB,QAAAA,IAAI,EAAEc,aAAa,GAACM,eADtB;AAEElC,QAAAA,GAAG,EAAE,CACHrE,OAAO,CAAC8B,OAAR,CAAgB,cAAhB,CADG,EAEH;AACE6D,UAAAA,MAAM,EAAE3F,OAAO,CAAC8B,OAAR,CAAgB,YAAhB,CADV;AAEE8D,UAAAA,OAAO,EAAE;AACPO,YAAAA,OAAO,EAAE;AACPC,cAAAA,cAAc,EAAE;AADT,aADF;AAIPC,YAAAA,SAAS,EAAE;AAJJ;AAFX,SAFG,EAWH;AACEV,UAAAA,MAAM,EAAE3F,OAAO,CAAC8B,OAAR,CAAgB,aAAhB,CADV;AAEE8D,UAAAA,OAAO,EAAE;AACPS,YAAAA,SAAS,EAAE;AADJ;AAFX,SAXG;AAFP,OAhEK,EAqFL;AACElB,QAAAA,IAAI,EAAEc,aAAa,GAACO,iBADtB;AAEEnC,QAAAA,GAAG,EAAE,CACHrE,OAAO,CAAC8B,OAAR,CAAgB,cAAhB,CADG,EAEH9B,OAAO,CAAC8B,OAAR,CAAgB,YAAhB,CAFG,EAGH;AACE6D,UAAAA,MAAM,EAAE3F,OAAO,CAAC8B,OAAR,CAAgB,aAAhB,CADV;AAEE8D,UAAAA,OAAO,EAAE;AACPS,YAAAA,SAAS,EAAE;AADJ;AAFX,SAHG;AAFP,OArFK,EAkGL;AACElB,QAAAA,IAAI,EAAEc,aAAa,GAACQ,cADtB;AAEEpC,QAAAA,GAAG,EAAE,CACHrE,OAAO,CAAC8B,OAAR,CAAgB,cAAhB,CADG,EAEH;AACE6D,UAAAA,MAAM,EAAE3F,OAAO,CAAC8B,OAAR,CAAgB,YAAhB,CADV;AAEE8D,UAAAA,OAAO,EAAE;AACPO,YAAAA,OAAO,EAAE;AACPC,cAAAA,cAAc,EAAE;AADT,aADF;AAIPC,YAAAA,SAAS,EAAE;AAJJ;AAFX,SAFG;AAFP,OAlGK,EAiHL;AACElB,QAAAA,IAAI,EAAEc,aAAa,GAACS,iBADtB;AAEErC,QAAAA,GAAG,EAAE,CAACrE,OAAO,CAAC8B,OAAR,CAAgB,cAAhB,CAAD,EAAkC9B,OAAO,CAAC8B,OAAR,CAAgB,YAAhB,CAAlC;AAFP,OAjHK;AAND,KAnIH;AAiQLkE,IAAAA,OAAO,EAAE,CACP,IAAI/F,yBAAJ,CAA8B;AAC5BqF,MAAAA,OAAO,EAAE3D,WADmB;AACN;AACtB;AACA+D,MAAAA,OAAO,EAAE,CACP,+BADO,EAEP;AACA;AACA,gDAJO;AAHmB,KAA9B,CADO,EAWP;AACA;AACA;AACA,QAAI3F,iBAAJ,CAAsB;AACpB4G,MAAAA,MAAM,EAAE,IADY;AAEpBC,MAAAA,eAAe,EAAEpG,IAAI,CAACkB,KAAK,IAAI,wBAAV,CAFD;AAGpBmF,MAAAA,MAAM,EAAE,CAAC,MAAD,CAHY;AAIpBrE,MAAAA,QAAQ,EAAE;AAJU,KAAtB,CAdO,CAoBP;AACA;AACA;AACA;AACA;AAxBO;AAjQJ,GAAP;AA4RD","sourcesContent":["import * as stylesRegexps from '@teambit/webpack.modules.style-regexps';\nimport { pathNormalizeToLinux } from '@teambit/legacy/dist/utils';\nimport { WebpackConfigWithDevServer } from '@teambit/webpack';\n\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');\nconst errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');\nconst evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');\nconst noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');\nconst redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');\nconst getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');\nconst path = require('path');\nconst { html } = require('./html');\n\n/*\n * Webpack config for the bit ui\n * i.e. `bit start --dev`,\n */\n\nconst clientHost = process.env.WDS_SOCKET_HOST;\nconst clientPath = process.env.WDS_SOCKET_PATH; // default is '/sockjs-node';\nconst port = process.env.WDS_SOCKET_PORT;\n\n// const reactRefreshRuntimeEntry = require.resolve('react-refresh/runtime');\n// const reactRefreshWebpackPluginRuntimeEntry = require.resolve(\n//   '@pmmmwh/react-refresh-webpack-plugin/lib/runtime/RefreshUtils'\n// );\n\nconst publicUrlOrPath = getPublicUrlOrPath(process.env.NODE_ENV === 'development', '/', '/public');\n\nconst moduleFileExtensions = [\n  'web.mjs',\n  'mjs',\n  'web.js',\n  'js',\n  'web.ts',\n  'ts',\n  'web.tsx',\n  'tsx',\n  'json',\n  'web.jsx',\n  'jsx',\n];\n\nmodule.exports = {\n  createWebpackConfig,\n  devConfig: createWebpackConfig,\n};\n\nfunction createWebpackConfig(workspaceDir, entryFiles, title, aspectPaths): WebpackConfigWithDevServer {\n  const resolveWorkspacePath = (relativePath) => path.resolve(workspaceDir, relativePath);\n\n  // Host\n  const host = process.env.HOST || 'localhost';\n\n  // Required for babel-preset-react-app\n  process.env.NODE_ENV = 'development';\n\n  return {\n    // Environment mode\n    mode: 'development',\n    // improves HMR\n    snapshot: { managedPaths: [] },\n\n    devtool: 'inline-source-map',\n\n    // Entry point of app\n    entry: {\n      main: entryFiles,\n      // preview: entryFiles.map(filePath => resolveWorkspacePath(filePath))\n    },\n\n    output: {\n      // Development filename output\n      filename: 'static/js/[name].bundle.js',\n\n      pathinfo: true,\n\n      path: resolveWorkspacePath('/'),\n\n      publicPath: publicUrlOrPath,\n\n      chunkFilename: 'static/js/[name].chunk.js',\n\n      // point sourcemap entries to original disk locations (format as URL on windows)\n      devtoolModuleFilenameTemplate: (info) => pathNormalizeToLinux(path.resolve(info.absoluteResourcePath)),\n\n      // this defaults to 'window', but by setting it to 'this' then\n      // module chunks which are built will work in web workers as well.\n      // Commented out to use the default (self) as according to tobias with webpack5 self is working with workers as well\n      // globalObject: 'this',\n    },\n\n    infrastructureLogging: {\n      level: 'error',\n    },\n\n    stats: 'errors-only',\n\n    devServer: {\n      allowedHosts: 'all',\n\n      static: [\n        {\n          directory: resolveWorkspacePath(publicUrlOrPath),\n          staticOptions: {},\n          // Don't be confused with `dev.publicPath`, it is `publicPath` for static directory\n          // Can be:\n          // publicPath: ['/static-public-path-one/', '/static-public-path-two/'],\n          publicPath: publicUrlOrPath,\n          // Can be:\n          // serveIndex: {} (options for the `serveIndex` option you can find https://github.com/expressjs/serve-index)\n          serveIndex: true,\n          // Can be:\n          // watch: {} (options for the `watch` option you can find https://github.com/paulmillr/chokidar)\n          watch: true,\n        },\n      ],\n\n      // Enable compression\n      compress: true,\n\n      // Enable hot reloading\n      hot: true,\n\n      host,\n\n      historyApiFallback: {\n        disableDotRule: true,\n        index: publicUrlOrPath,\n      },\n\n      client: {\n        webSocketURL: {\n          hostname: clientHost,\n          pathname: clientPath,\n          port,\n        },\n      },\n\n      onBeforeSetupMiddleware({ app, server }) {\n        // Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`\n        // middlewares before `redirectServedPath` otherwise will not have any effect\n        // This lets us fetch source contents from webpack for the error overlay\n        app.use(evalSourceMapMiddleware(server));\n        // This lets us open files from the runtime error overlay.\n        app.use(errorOverlayMiddleware());\n      },\n\n      onAfterSetupMiddleware({ app }) {\n        // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match\n        app.use(redirectServedPath(publicUrlOrPath));\n\n        // This service worker file is effectively a 'no-op' that will reset any\n        // previous service worker registered for the same host:port combination.\n        // We do this in development to avoid hitting the production cache if\n        // it used the same host and port.\n        // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432\n        app.use(noopServiceWorkerMiddleware(publicUrlOrPath));\n      },\n\n      devMiddleware: {\n        // forward static files\n        publicPath: publicUrlOrPath.slice(0, -1),\n      },\n    },\n\n    resolve: {\n      // These are the reasonable defaults supported by the Node ecosystem.\n      // We also include JSX as a common component filename extension to support\n      // some tools, although we do not recommend using it, see:\n      // https://github.com/facebook/create-react-app/issues/290\n      // `web` extension prefixes have been added for better support\n      // for React Native Web.\n      extensions: moduleFileExtensions.map((ext) => `.${ext}`),\n      alias: {\n        react: require.resolve('react'),\n        'react-dom/server': require.resolve('react-dom/server'),\n        'react-dom': require.resolve('react-dom'),\n        // 'react-refresh/runtime': require.resolve('react-refresh/runtime'),\n      },\n      fallback: {\n        fs: false,\n        path: require.resolve('path-browserify'),\n        stream: false,\n        process: false,\n      },\n    },\n\n    module: {\n      // Webpack by default includes node_modules under its managed paths which cause the whole directory to be cached\n      // Watch mode requires us to turn off unsafeCache as well\n      // this de-optimizes the dev build but ensures hmr works when writing/linking into node modules.\n      // However we do not lose the caching entirely like cache: false\n      unsafeCache: false,\n      rules: [\n        {\n          test: /\\.m?js/,\n          resolve: {\n            fullySpecified: false,\n          },\n        },\n        {\n          test: /\\.js$/,\n          enforce: 'pre',\n          include: /node_modules/,\n          // only apply to packages with componentId in their package.json (ie. bit components)\n          descriptionData: { componentId: (value) => !!value },\n          use: [require.resolve('source-map-loader')],\n        },\n        {\n          test: /\\.(js|jsx|tsx|ts)$/,\n          exclude: /node_modules/,\n          include: workspaceDir,\n          loader: require.resolve('babel-loader'),\n          options: {\n            configFile: false,\n            babelrc: false,\n            presets: [\n              // Preset includes JSX, TypeScript, and some ESnext features\n              require.resolve('babel-preset-react-app'),\n            ],\n            plugins: [require.resolve('react-refresh/babel')],\n          },\n        },\n        {\n          test: stylesRegexps.sassModuleRegex,\n          use: [\n            require.resolve('style-loader'),\n            {\n              loader: require.resolve('css-loader'),\n              options: {\n                modules: {\n                  localIdentName: '[name]__[local]--[hash:base64:5]',\n                },\n                sourceMap: true,\n              },\n            },\n            {\n              loader: require.resolve('sass-loader'),\n              options: {\n                sourceMap: true,\n              },\n            },\n          ],\n        },\n        {\n          test: stylesRegexps.sassNoModuleRegex,\n          use: [\n            require.resolve('style-loader'),\n            require.resolve('css-loader'),\n            {\n              loader: require.resolve('sass-loader'),\n              options: {\n                sourceMap: true,\n              },\n            },\n          ],\n        },\n        {\n          test: stylesRegexps.lessModuleRegex,\n          use: [\n            require.resolve('style-loader'),\n            {\n              loader: require.resolve('css-loader'),\n              options: {\n                modules: {\n                  localIdentName: '[name]__[local]--[hash:base64:5]',\n                },\n                sourceMap: true,\n              },\n            },\n            {\n              loader: require.resolve('less-loader'),\n              options: {\n                sourceMap: true,\n              },\n            },\n          ],\n        },\n        {\n          test: stylesRegexps.lessNoModuleRegex,\n          use: [\n            require.resolve('style-loader'),\n            require.resolve('css-loader'),\n            {\n              loader: require.resolve('less-loader'),\n              options: {\n                sourceMap: true,\n              },\n            },\n          ],\n        },\n        {\n          test: stylesRegexps.cssModuleRegex,\n          use: [\n            require.resolve('style-loader'),\n            {\n              loader: require.resolve('css-loader'),\n              options: {\n                modules: {\n                  localIdentName: '[name]__[local]--[hash:base64:5]',\n                },\n                sourceMap: true,\n              },\n            },\n          ],\n        },\n        {\n          test: stylesRegexps.cssNoModulesRegex,\n          use: [require.resolve('style-loader'), require.resolve('css-loader')],\n        },\n      ],\n    },\n\n    plugins: [\n      new ReactRefreshWebpackPlugin({\n        include: aspectPaths, // original default value was /\\.([cm]js|[jt]sx?|flow)$/i\n        // replaces the default value of `/node_modules/`\n        exclude: [\n          /react-refresh-webpack-plugin/i,\n          // file type filtering was done by `include`, so need to negative-filter them out here\n          // A lookbehind assertion (`?<!`) has to be fixed width\n          /(?<!\\.jsx)(?<!\\.js)(?<!\\.tsx)(?<!\\.ts)$/i,\n        ],\n      }),\n      // Re-generate index.html with injected script tag.\n      // The injected script tag contains a src value of the\n      // filename output defined above.\n      new HtmlWebpackPlugin({\n        inject: true,\n        templateContent: html(title || 'My component workspace'),\n        chunks: ['main'],\n        filename: 'index.html',\n      }),\n      // new HtmlWebpackPlugin({\n      //   templateContent: html('Component preview'),\n      //   chunks: ['preview'],\n      //   filename: 'preview.html'\n      // })\n    ],\n  };\n}\n"]}
+{"version":3,"sources":["webpack.dev.config.ts"],"names":["clientHost","process","env","WDS_SOCKET_HOST","clientPath","WDS_SOCKET_PATH","port","WDS_SOCKET_PORT","publicUrlOrPath","NODE_ENV","moduleFileExtensions","devConfig","workspaceDir","entryFiles","title","aspectPaths","resolveWorkspacePath","relativePath","path","resolve","host","HOST","mode","snapshot","managedPaths","devtool","entry","main","output","filename","pathinfo","publicPath","chunkFilename","devtoolModuleFilenameTemplate","info","absoluteResourcePath","infrastructureLogging","level","stats","devServer","allowedHosts","static","directory","staticOptions","serveIndex","watch","compress","hot","historyApiFallback","disableDotRule","index","client","webSocketURL","hostname","pathname","onBeforeSetupMiddleware","app","server","use","onAfterSetupMiddleware","devMiddleware","slice","extensions","map","ext","alias","react","require","fallback","fs","stream","module","unsafeCache","rules","test","fullySpecified","enforce","include","descriptionData","componentId","value","exclude","loader","options","configFile","babelrc","presets","plugins","stylesRegexps","sassModuleRegex","modules","localIdentName","sourceMap","sassNoModuleRegex","lessModuleRegex","lessNoModuleRegex","cssModuleRegex","cssNoModulesRegex","ReactRefreshWebpackPlugin","HtmlWebpackPlugin","inject","templateContent","chunks","ProvidePlugin"],"mappings":"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","sourcesContent":["import { ProvidePlugin } from 'webpack';\nimport * as stylesRegexps from '@teambit/webpack.modules.style-regexps';\nimport { pathNormalizeToLinux } from '@teambit/legacy/dist/utils';\nimport { WebpackConfigWithDevServer } from '@teambit/webpack';\n\nimport HtmlWebpackPlugin from 'html-webpack-plugin';\nimport ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';\nimport errorOverlayMiddleware from 'react-dev-utils/errorOverlayMiddleware';\nimport evalSourceMapMiddleware from 'react-dev-utils/evalSourceMapMiddleware';\nimport noopServiceWorkerMiddleware from 'react-dev-utils/noopServiceWorkerMiddleware';\nimport redirectServedPath from 'react-dev-utils/redirectServedPathMiddleware';\nimport getPublicUrlOrPath from 'react-dev-utils/getPublicUrlOrPath';\nimport path from 'path';\nimport { html } from './html';\n\n/*\n * Webpack config for the bit ui\n * i.e. `bit start --dev`,\n */\n\nconst clientHost = process.env.WDS_SOCKET_HOST;\nconst clientPath = process.env.WDS_SOCKET_PATH; // default is '/sockjs-node';\nconst port = process.env.WDS_SOCKET_PORT;\n\n// const reactRefreshRuntimeEntry = require.resolve('react-refresh/runtime');\n// const reactRefreshWebpackPluginRuntimeEntry = require.resolve(\n//   '@pmmmwh/react-refresh-webpack-plugin/lib/runtime/RefreshUtils'\n// );\n\nconst publicUrlOrPath = getPublicUrlOrPath(process.env.NODE_ENV === 'development', '/', '/public');\n\nconst moduleFileExtensions = [\n  'web.mjs',\n  'mjs',\n  'web.js',\n  'js',\n  'web.ts',\n  'ts',\n  'web.tsx',\n  'tsx',\n  'json',\n  'web.jsx',\n  'jsx',\n];\n\nexport function devConfig(workspaceDir, entryFiles, title, aspectPaths): WebpackConfigWithDevServer {\n  const resolveWorkspacePath = (relativePath) => path.resolve(workspaceDir, relativePath);\n\n  // Host\n  const host = process.env.HOST || 'localhost';\n\n  // Required for babel-preset-react-app\n  process.env.NODE_ENV = 'development';\n\n  return {\n    // Environment mode\n    mode: 'development',\n    // improves HMR - assume node_modules might change\n    snapshot: { managedPaths: [] },\n\n    devtool: 'inline-source-map',\n\n    // Entry point of app\n    entry: {\n      main: entryFiles,\n    },\n\n    output: {\n      // Development filename output\n      filename: 'static/js/[name].bundle.js',\n\n      pathinfo: true,\n\n      path: resolveWorkspacePath('/'),\n\n      publicPath: publicUrlOrPath,\n\n      chunkFilename: 'static/js/[name].chunk.js',\n\n      // point sourcemap entries to original disk locations (format as URL on windows)\n      devtoolModuleFilenameTemplate: (info) => pathNormalizeToLinux(path.resolve(info.absoluteResourcePath)),\n\n      // this defaults to 'window', but by setting it to 'this' then\n      // module chunks which are built will work in web workers as well.\n      // Commented out to use the default (self) as according to tobias with webpack5 self is working with workers as well\n      // globalObject: 'this',\n    },\n\n    infrastructureLogging: {\n      level: 'error',\n    },\n\n    stats: 'errors-only',\n\n    devServer: {\n      allowedHosts: 'all',\n\n      static: [\n        {\n          directory: resolveWorkspacePath(publicUrlOrPath),\n          staticOptions: {},\n          // Don't be confused with `dev.publicPath`, it is `publicPath` for static directory\n          // Can be:\n          // publicPath: ['/static-public-path-one/', '/static-public-path-two/'],\n          publicPath: publicUrlOrPath,\n          // Can be:\n          // serveIndex: {} (options for the `serveIndex` option you can find https://github.com/expressjs/serve-index)\n          serveIndex: true,\n          // Can be:\n          // watch: {} (options for the `watch` option you can find https://github.com/paulmillr/chokidar)\n          watch: true,\n        },\n      ],\n\n      // Enable compression\n      compress: true,\n\n      // Enable hot reloading\n      hot: true,\n\n      host,\n\n      historyApiFallback: {\n        disableDotRule: true,\n        index: publicUrlOrPath,\n      },\n\n      client: {\n        webSocketURL: {\n          hostname: clientHost,\n          pathname: clientPath,\n          port,\n        },\n      },\n\n      onBeforeSetupMiddleware({ app, server }) {\n        // Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`\n        // middlewares before `redirectServedPath` otherwise will not have any effect\n        // This lets us fetch source contents from webpack for the error overlay\n        app.use(evalSourceMapMiddleware(server));\n        // This lets us open files from the runtime error overlay.\n        app.use(errorOverlayMiddleware());\n      },\n\n      onAfterSetupMiddleware({ app }) {\n        // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match\n        app.use(redirectServedPath(publicUrlOrPath));\n\n        // This service worker file is effectively a 'no-op' that will reset any\n        // previous service worker registered for the same host:port combination.\n        // We do this in development to avoid hitting the production cache if\n        // it used the same host and port.\n        // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432\n        app.use(noopServiceWorkerMiddleware(publicUrlOrPath));\n      },\n\n      devMiddleware: {\n        // forward static files\n        publicPath: publicUrlOrPath.slice(0, -1),\n      },\n    },\n\n    resolve: {\n      // These are the reasonable defaults supported by the Node ecosystem.\n      // We also include JSX as a common component filename extension to support\n      // some tools, although we do not recommend using it, see:\n      // https://github.com/facebook/create-react-app/issues/290\n      // `web` extension prefixes have been added for better support\n      // for React Native Web.\n      extensions: moduleFileExtensions.map((ext) => `.${ext}`),\n      alias: {\n        react: require.resolve('react'),\n        'react-dom/server': require.resolve('react-dom/server'),\n        'react-dom': require.resolve('react-dom'),\n        // 'react-refresh/runtime': require.resolve('react-refresh/runtime'),\n      },\n      fallback: {\n        fs: false,\n        path: require.resolve('path-browserify'),\n        stream: false,\n        process: false,\n      },\n    },\n\n    module: {\n      // Webpack by default includes node_modules under its managed paths which cause the whole directory to be cached\n      // Watch mode requires us to turn off unsafeCache as well\n      // this de-optimizes the dev build but ensures hmr works when writing/linking into node modules.\n      // However we do not lose the caching entirely like cache: false\n      unsafeCache: false,\n      rules: [\n        {\n          test: /\\.m?js/,\n          resolve: {\n            fullySpecified: false,\n          },\n        },\n        {\n          test: /\\.js$/,\n          enforce: 'pre',\n          include: /node_modules/,\n          // only apply to packages with componentId in their package.json (ie. bit components)\n          descriptionData: { componentId: (value) => !!value },\n          use: [require.resolve('source-map-loader')],\n        },\n        {\n          test: /\\.(js|jsx|tsx|ts)$/,\n          exclude: /node_modules/,\n          include: workspaceDir,\n          loader: require.resolve('babel-loader'),\n          options: {\n            configFile: false,\n            babelrc: false,\n            presets: [\n              // Preset includes JSX, TypeScript, and some ESnext features\n              require.resolve('babel-preset-react-app'),\n            ],\n            plugins: [require.resolve('react-refresh/babel')],\n          },\n        },\n        {\n          test: stylesRegexps.sassModuleRegex,\n          use: [\n            require.resolve('style-loader'),\n            {\n              loader: require.resolve('css-loader'),\n              options: {\n                modules: {\n                  localIdentName: '[name]__[local]--[hash:base64:5]',\n                },\n                sourceMap: true,\n              },\n            },\n            {\n              loader: require.resolve('sass-loader'),\n              options: {\n                sourceMap: true,\n              },\n            },\n          ],\n        },\n        {\n          test: stylesRegexps.sassNoModuleRegex,\n          use: [\n            require.resolve('style-loader'),\n            require.resolve('css-loader'),\n            {\n              loader: require.resolve('sass-loader'),\n              options: {\n                sourceMap: true,\n              },\n            },\n          ],\n        },\n        {\n          test: stylesRegexps.lessModuleRegex,\n          use: [\n            require.resolve('style-loader'),\n            {\n              loader: require.resolve('css-loader'),\n              options: {\n                modules: {\n                  localIdentName: '[name]__[local]--[hash:base64:5]',\n                },\n                sourceMap: true,\n              },\n            },\n            {\n              loader: require.resolve('less-loader'),\n              options: {\n                sourceMap: true,\n              },\n            },\n          ],\n        },\n        {\n          test: stylesRegexps.lessNoModuleRegex,\n          use: [\n            require.resolve('style-loader'),\n            require.resolve('css-loader'),\n            {\n              loader: require.resolve('less-loader'),\n              options: {\n                sourceMap: true,\n              },\n            },\n          ],\n        },\n        {\n          test: stylesRegexps.cssModuleRegex,\n          use: [\n            require.resolve('style-loader'),\n            {\n              loader: require.resolve('css-loader'),\n              options: {\n                modules: {\n                  localIdentName: '[name]__[local]--[hash:base64:5]',\n                },\n                sourceMap: true,\n              },\n            },\n          ],\n        },\n        {\n          test: stylesRegexps.cssNoModulesRegex,\n          use: [require.resolve('style-loader'), require.resolve('css-loader')],\n        },\n      ],\n    },\n\n    plugins: [\n      new ReactRefreshWebpackPlugin({\n        include: aspectPaths, // original default value was /\\.([cm]js|[jt]sx?|flow)$/i\n        // replaces the default value of `/node_modules/`\n        exclude: [\n          /react-refresh-webpack-plugin/i,\n          // file type filtering was done by `include`, so need to negative-filter them out here\n          // A lookbehind assertion (`?<!`) has to be fixed width\n          /(?<!\\.jsx)(?<!\\.js)(?<!\\.tsx)(?<!\\.ts)$/i,\n        ],\n      }),\n      // Re-generate index.html with injected script tag.\n      // The injected script tag contains a src value of the\n      // filename output defined above.\n      new HtmlWebpackPlugin({\n        inject: true,\n        templateContent: html(title || 'My component workspace'),\n        chunks: ['main'],\n        filename: 'index.html',\n      }),\n      new ProvidePlugin({\n        process: require.resolve('process/browser'),\n      }),\n    ],\n  };\n}\n"]}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/ui",
-  "version": "0.0.527",
+  "version": "0.0.531",
   "homepage": "https://bit.dev/teambit/ui-foundation/ui",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.ui-foundation",
     "name": "ui",
-    "version": "0.0.527"
+    "version": "0.0.531"
   },
   "dependencies": {
     "lodash": "4.17.21",
@@ -53,28 +53,28 @@
     "@teambit/base-ui.loaders.loader-ribbon": "1.0.0",
     "@teambit/base-ui.theme.fonts.roboto": "1.0.0",
     "@teambit/base-ui.theme.theme-provider": "1.0.1",
-    "@teambit/aspect-loader": "0.0.527",
-    "@teambit/toolbox.path.to-windows-compatible-path": "0.0.445",
-    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.449",
-    "@teambit/logger": "0.0.453",
+    "@teambit/aspect-loader": "0.0.531",
+    "@teambit/toolbox.path.to-windows-compatible-path": "0.0.446",
+    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.450",
+    "@teambit/logger": "0.0.455",
     "@teambit/cli": "0.0.380",
-    "@teambit/ui-foundation.cli.ui-server-console": "0.0.450",
-    "@teambit/bundler": "0.0.527",
-    "@teambit/component": "0.0.527",
-    "@teambit/express": "0.0.457",
-    "@teambit/graphql": "0.0.527",
-    "@teambit/toolbox.network.get-port": "0.0.75",
-    "@teambit/aspect": "0.0.527",
-    "@teambit/cache": "0.0.453",
-    "@teambit/pubsub": "0.0.527",
-    "@teambit/react-router": "0.0.527",
-    "@teambit/ui-foundation.ui.rendering.html": "0.0.31",
+    "@teambit/ui-foundation.cli.ui-server-console": "0.0.451",
+    "@teambit/bundler": "0.0.531",
+    "@teambit/component": "0.0.531",
+    "@teambit/express": "0.0.459",
+    "@teambit/graphql": "0.0.531",
+    "@teambit/toolbox.network.get-port": "0.0.76",
+    "@teambit/aspect": "0.0.531",
+    "@teambit/cache": "0.0.455",
+    "@teambit/pubsub": "0.0.531",
+    "@teambit/react-router": "0.0.531",
+    "@teambit/ui-foundation.ui.rendering.html": "0.0.32",
     "@teambit/design.theme.icons-font": "1.0.2",
     "@teambit/design.ui.tooltip": "0.0.352",
-    "@teambit/ui-foundation.ui.global-loader": "0.0.448",
-    "@teambit/webpack.modules.generate-style-loaders": "0.0.65",
-    "@teambit/webpack.modules.style-regexps": "0.0.94",
-    "@teambit/webpack": "0.0.527"
+    "@teambit/ui-foundation.ui.global-loader": "0.0.449",
+    "@teambit/webpack.modules.generate-style-loaders": "0.0.66",
+    "@teambit/webpack.modules.style-regexps": "0.0.95",
+    "@teambit/webpack": "0.0.531"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -96,7 +96,7 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.162",
+    "@teambit/legacy": "1.0.163",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -141,7 +141,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.162",
+        "@teambit/legacy": "1.0.163",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/start-plugin.ts

@@ -21,5 +21,5 @@ export interface StartPlugin {
   render: ComponentType;
 
   /** promise that resolves when the plugin completed initiation */
-  get whenReady(): Promise<void>;
+  readonly whenReady: Promise<void>;
 }

package/ui-server.ts

@@ -16,7 +16,7 @@ import { ProxyEntry, UIRoot } from './ui-root';
 import { UIRuntime } from './ui.aspect';
 import { UiMain } from './ui.main.runtime';
 
-const { devConfig } = require('./webpack/webpack.dev.config');
+import { devConfig } from './webpack/webpack.dev.config';
 
 export type UIServerProps = {
   graphql: GraphqlMain;
@@ -76,7 +76,7 @@ export class UIServer {
   /**
    * get the webpack configuration of the UI server.
    */
-  async getDevConfig(): Promise<any> {
+  async getDevConfig() {
     const aspects = await this.uiRoot.resolveAspects(UIRuntime.name);
     const aspectsPaths = aspects.map((aspect) => aspect.aspectPath);
 
@@ -177,15 +177,18 @@ export class UIServer {
    * start a UI dev server.
    */
   async dev({ portRange }: StartOptions = {}) {
-    const selectedPort = await this.selectPort(portRange);
+    const devServerPort = await this.selectPort(portRange);
     await this.start({ portRange: [4100, 4200] });
+    const expressAppPort = this._port;
+
     const config = await this.getDevConfig();
     const compiler = webpack(config);
-    const devServerConfig = await this.getDevServerConfig(this._port, config.devServer);
+    const devServerConfig = await this.getDevServerConfig(devServerPort, expressAppPort, config.devServer);
     // @ts-ignore in the capsules it throws an error about compatibilities issues between webpack.compiler and webpackDevServer/webpack/compiler
-    const devServer = new WebpackDevServer(compiler, devServerConfig);
-    devServer.listen(selectedPort);
-    this._port = selectedPort;
+    const devServer = new WebpackDevServer(devServerConfig, compiler);
+    
+    await devServer.start();
+    this._port = devServerPort;
     return devServer;
   }
 
@@ -220,9 +223,13 @@ export class UIServer {
     return gqlProxies.concat(proxyEntries);
   }
 
-  private async getDevServerConfig(port: number, config?: WdsConfiguration): Promise<WdsConfiguration> {
-    const proxy = await this.getProxy(port);
-    const devServerConf = { ...config, proxy };
+  private async getDevServerConfig(
+    appPort: number,
+    gqlPort: number,
+    config?: WdsConfiguration
+  ): Promise<WdsConfiguration> {
+    const proxy = await this.getProxy(gqlPort);
+    const devServerConf = { ...config, proxy, port: appPort };
 
     return devServerConf;
   }

package/webpack/webpack.dev.config.ts

@@ -1,16 +1,17 @@
+import { ProvidePlugin } from 'webpack';
 import * as stylesRegexps from '@teambit/webpack.modules.style-regexps';
 import { pathNormalizeToLinux } from '@teambit/legacy/dist/utils';
 import { WebpackConfigWithDevServer } from '@teambit/webpack';
 
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
-const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
-const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
-const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
-const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
-const path = require('path');
-const { html } = require('./html');
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
+import errorOverlayMiddleware from 'react-dev-utils/errorOverlayMiddleware';
+import evalSourceMapMiddleware from 'react-dev-utils/evalSourceMapMiddleware';
+import noopServiceWorkerMiddleware from 'react-dev-utils/noopServiceWorkerMiddleware';
+import redirectServedPath from 'react-dev-utils/redirectServedPathMiddleware';
+import getPublicUrlOrPath from 'react-dev-utils/getPublicUrlOrPath';
+import path from 'path';
+import { html } from './html';
 
 /*
  * Webpack config for the bit ui
@@ -42,12 +43,7 @@ const moduleFileExtensions = [
   'jsx',
 ];
 
-module.exports = {
-  createWebpackConfig,
-  devConfig: createWebpackConfig,
-};
-
-function createWebpackConfig(workspaceDir, entryFiles, title, aspectPaths): WebpackConfigWithDevServer {
+export function devConfig(workspaceDir, entryFiles, title, aspectPaths): WebpackConfigWithDevServer {
   const resolveWorkspacePath = (relativePath) => path.resolve(workspaceDir, relativePath);
 
   // Host
@@ -59,7 +55,7 @@ function createWebpackConfig(workspaceDir, entryFiles, title, aspectPaths): Webp
   return {
     // Environment mode
     mode: 'development',
-    // improves HMR
+    // improves HMR - assume node_modules might change
     snapshot: { managedPaths: [] },
 
     devtool: 'inline-source-map',
@@ -67,7 +63,6 @@ function createWebpackConfig(workspaceDir, entryFiles, title, aspectPaths): Webp
     // Entry point of app
     entry: {
       main: entryFiles,
-      // preview: entryFiles.map(filePath => resolveWorkspacePath(filePath))
     },
 
     output: {
@@ -333,11 +328,9 @@ function createWebpackConfig(workspaceDir, entryFiles, title, aspectPaths): Webp
         chunks: ['main'],
         filename: 'index.html',
       }),
-      // new HtmlWebpackPlugin({
-      //   templateContent: html('Component preview'),
-      //   chunks: ['preview'],
-      //   filename: 'preview.html'
-      // })
+      new ProvidePlugin({
+        process: require.resolve('process/browser'),
+      }),
     ],
   };
 }