@teambit/preview 1.0.883 → 1.0.884

package/preview.start-plugin.tsx

@@ -281,12 +281,13 @@ function getSpinnerId(envId: string) {
 }
 
 function getSpinnerCompilingMessage(server: ComponentServer, verbose = false) {
+  const prefix = 'COMPILING';
   const envId = chalk.cyan(server.context.envRuntime.id);
   let includedEnvs = '';
   if (server.context.relatedContexts && server.context.relatedContexts.length > 1) {
     includedEnvs = `on behalf of ${chalk.cyan(stringifyIncludedEnvs(server.context.relatedContexts, verbose))}`;
   }
-  return `${chalk.yellow('Compiling')} ${envId} ${includedEnvs}`;
+  return `${prefix} ${envId} ${includedEnvs}`;
 }
 
 function getSpinnerDoneMessage(
@@ -299,21 +300,19 @@ function getSpinnerDoneMessage(
 ) {
   const hasErrors = !!errors.length;
   const hasWarnings = !!warnings.length;
+  const prefix = hasErrors ? 'FAILED' : 'RUNNING';
   const envId = chalk.cyan(server.context.envRuntime.id);
   let includedEnvs = '';
   if (server.context.relatedContexts && server.context.relatedContexts.length > 1) {
-    includedEnvs = ` ${chalk.dim('via')} ${chalk.cyan(stringifyIncludedEnvs(server.context.relatedContexts, verbose))}`;
+    includedEnvs = ` on behalf of ${chalk.cyan(stringifyIncludedEnvs(server.context.relatedContexts, verbose))}`;
   }
   const errorsTxt = hasErrors ? errors.map((err) => err.message).join('\n') : '';
   const errorsTxtWithTitle = hasErrors ? chalk.red(`\nErrors:\n${errorsTxt}`) : '';
   const warningsTxt = hasWarnings ? warnings.map((warning) => warning.message).join('\n') : '';
   const warningsTxtWithTitle = hasWarnings ? chalk.yellow(`\nWarnings:\n${warningsTxt}`) : '';
 
-  if (hasErrors) {
-    return `${chalk.red('Failed')} ${envId}${includedEnvs}${errorsTxtWithTitle}${warningsTxtWithTitle}`;
-  }
   const urlMessage = hasErrors || !showInternalUrls ? '' : `at ${chalk.cyan(url)}`;
-  return `${chalk.green('Ready')} ${envId}${includedEnvs} ${urlMessage}${warningsTxtWithTitle}`;
+  return `${prefix} ${envId}${includedEnvs} ${urlMessage} ${errorsTxtWithTitle} ${warningsTxtWithTitle}`;
 }
 
 function stringifyIncludedEnvs(includedEnvs: string[] = [], verbose = false) {

package/webpack/webpack.config.ts

@@ -0,0 +1,88 @@
+import { configBaseFactory } from '@teambit/react.webpack.react-webpack';
+
+import type { Configuration } from 'webpack';
+import { ProvidePlugin } from 'webpack';
+import { merge } from 'webpack-merge';
+import { fallbacksProvidePluginConfig, fallbacks } from '@teambit/webpack';
+import { WebpackManifestPlugin } from 'webpack-manifest-plugin';
+
+export function createWebpackConfig(outputDir: string, entryFile: string): Configuration {
+  const baseConfig = configBaseFactory(true);
+  const preBundleConfig = createPreBundleConfig(outputDir, entryFile);
+
+  const combined = merge(baseConfig, preBundleConfig);
+
+  return combined;
+}
+
+function createPreBundleConfig(outputDir: string, entryFile: string) {
+  const mode = process.env.BIT_DEBUG_PREVIEW_BUNDLE ? 'development' : 'production';
+  const preBundleConfig: Configuration = {
+    stats: {
+      children: true,
+      errorDetails: true,
+    },
+    mode,
+    entry: {
+      main: entryFile,
+    },
+    resolve: {
+      alias: {
+        'react/jsx-runtime': require.resolve('react/jsx-runtime'),
+        react: require.resolve('react'),
+        'react-dom': require.resolve('react-dom'),
+      },
+      fallback: {
+        module: false,
+        path: fallbacks.path,
+        dgram: false,
+        dns: false,
+        fs: false,
+        stream: false,
+        http2: false,
+        net: false,
+        tls: false,
+        child_process: false,
+        process: fallbacks.process,
+      },
+    },
+    output: {
+      path: outputDir,
+      publicPath: '/',
+      chunkFilename: 'static/js/[name].[contenthash:8].chunk.cjs',
+      filename: 'static/js/[name].[contenthash:8].cjs',
+      library: {
+        type: 'commonjs-static',
+      },
+    },
+    externalsType: 'commonjs',
+    externals: ['react', 'react-dom', '@mdx-js/react', '@teambit/mdx.ui.mdx-scope-context'],
+    plugins: [
+      // Generate an asset manifest file with the following content:
+      // - "files" key: Mapping of all asset filenames to their corresponding
+      //   output file so that tools can pick it up without having to parse
+      //   `index.html`
+      //   can be used to reconstruct the HTML if necessary
+      new WebpackManifestPlugin({
+        fileName: 'asset-manifest.json',
+        generate: (seed, files, entrypoints) => {
+          const manifestFiles = files.reduce((manifest, file) => {
+            manifest[file.name] = file.path;
+            return manifest;
+          }, seed);
+          const entrypointFiles = entrypoints.main.filter((fileName) => !fileName.endsWith('.map'));
+
+          // @ts-ignore - https://github.com/shellscape/webpack-manifest-plugin/issues/276
+          return {
+            files: manifestFiles,
+            entrypoints: entrypointFiles,
+          } as Record<string, string>;
+        },
+      }),
+
+      new ProvidePlugin({ process: fallbacksProvidePluginConfig.process }),
+    ],
+  };
+
+  return preBundleConfig;
+}

package/artifacts/ui-bundle/static/css/main.c333ba81.css

@@ -1 +0,0 @@
-.frame\.module__overlayBorder--ZGRhZ{box-sizing:border-box;border:2px solid var(--bit-highlighter-color,#eebcc9);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:11px;padding:4px}.frame\.module__hidden--ZGRhZ{display:none}.label\.module__othersContainer--YmMyZ>*{margin-bottom:8px}.label\.module__othersContainer--YmMyZ>:last-child{margin-bottom:unset}.label\.module__othersTooltip--YmMyZ{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.label\.module__othersTooltip--YmMyZ:before{content:"▾";transition:transform .3s;display:inline-block}.label\.module__othersTooltip--YmMyZ.label\.module__active--YmMyZ:before{transform:rotate(-180deg)}.label\.module__hidden--YmMyZ{visibility:hidden;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.component-strip\.module__componentStrip--XzUyN{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;box-shadow:var(--bit-highlighter-shadow);white-space:nowrap;border-radius:.5em;display:flex}.component-strip\.module__componentStrip--XzUyN>*{background:var(--bit-highlighter-color,#eebcc9);margin-right:.125em;padding:0 .5em;line-height:1.5;transition:-webkit-filter .3s,filter .3s,background-color .3s;transform:translateZ(0)}.component-strip\.module__componentStrip--XzUyN>:link,.component-strip\.module__componentStrip--XzUyN>:visited{-webkit-text-decoration:inherit;text-decoration:inherit;color:inherit}.component-strip\.module__componentStrip--XzUyN>:link:hover,.component-strip\.module__componentStrip--XzUyN>:visited:hover{background:var(--bit-highlighter-color-hover,#f6dae2)}.component-strip\.module__componentStrip--XzUyN>:link:active,.component-strip\.module__componentStrip--XzUyN>:visited:active{background:var(--bit-highlighter-color-active,#e79db1);color:inherit}.component-strip\.module__componentStrip--XzUyN>:first-child{border-top-left-radius:.5em;border-bottom-left-radius:.5em}.component-strip\.module__componentStrip--XzUyN>:last-child{margin-right:unset;border-top-right-radius:.5em;border-bottom-right-radius:.5em}.component-strip\.module__nameBlock--XzUyN{display:flex}.component-strip\.module__nameBlock--XzUyN .component-strip\.module__version--XzUyN{text-overflow:ellipsis;white-space:nowrap;max-width:13ch;transition:max-width .48s;overflow:hidden}.component-strip\.module__nameBlock--XzUyN .component-strip\.module__version--XzUyN:hover{max-width:61ch}.element-highlighter\.module__label--XzQ2N{padding:8px}.element-highlighter\.module__frame--XzQ2N,.element-highlighter\.module__label--XzQ2N{z-index:15500}.highlighter-provider\.module__highlighter--XzBjO{border:solid var(--bit-border-color-lightest,#ededed);box-sizing:border-box;border-width:0;height:100%;transition:border .3s}.highlighter-provider\.module__highlighter--XzBjO.highlighter-provider\.module__active--XzBjO{border-width:8px;overflow:auto}.highlighter-provider\.module__label--XzBjO{font-family:sans-serif;font-size:12px}