@teambit/preview 1.0.884 → 1.0.886

package/rspack/rspack.config.ts

@@ -0,0 +1,268 @@
+import { rspack, type Configuration } from '@rspack/core';
+import { fallbacksProvidePluginConfig, fallbacks } from '@teambit/webpack';
+import { mdxOptions } from '@teambit/mdx.modules.mdx-v3-options';
+import { RspackManifestPlugin } from 'rspack-manifest-plugin';
+import { generateAssetManifest } from '@teambit/rspack.modules.generate-asset-manifest';
+
+const moduleFileExtensions = [
+  'web.mjs',
+  'mjs',
+  'web.js',
+  'js',
+  'web.ts',
+  'ts',
+  'web.tsx',
+  'tsx',
+  'json',
+  'web.jsx',
+  'jsx',
+  'mdx',
+  'md',
+];
+
+const imageInlineSizeLimit = parseInt(process.env.IMAGE_INLINE_SIZE_LIMIT || '10000');
+const cssModuleGenerator = { localIdentName: '[name]__[local]--[hash:base64:5]', esModule: false };
+const cssParser = {
+  css: { namedExports: false },
+  'css/auto': { namedExports: false },
+  'css/module': { namedExports: false },
+} as const;
+
+export function createRspackConfig(outputDir: string, entryFile: string): Configuration {
+  const mode = process.env.BIT_DEBUG_PREVIEW_BUNDLE ? 'development' : 'production';
+  const shouldUseSourceMap = mode === 'development' || process.env.GENERATE_SOURCEMAP === 'true';
+
+  return {
+    stats: {
+      children: true,
+      errorDetails: true,
+    },
+    mode,
+
+    devtool: shouldUseSourceMap ? 'source-map' : false,
+    experiments: {
+      css: true,
+    },
+
+    entry: {
+      main: entryFile,
+    },
+
+    output: {
+      path: outputDir,
+      publicPath: '/',
+      chunkFilename: 'static/js/[name].[contenthash:8].chunk.cjs',
+      filename: 'static/js/[name].[contenthash:8].cjs',
+      cssFilename: 'static/css/[name].[contenthash:8].css',
+      cssChunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
+      library: {
+        type: 'commonjs-static',
+      },
+    },
+
+    externalsType: 'commonjs',
+    externals: ['react', 'react-dom', '@mdx-js/react', '@teambit/mdx.ui.mdx-scope-context'],
+
+    resolve: {
+      extensions: moduleFileExtensions.map((ext) => `.${ext}`),
+      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,
+      },
+    },
+
+    optimization: {
+      minimize: mode === 'production',
+      minimizer: [
+        new rspack.SwcJsMinimizerRspackPlugin({
+          minimizerOptions: {
+            compress: {
+              ecma: 5,
+              comparisons: false,
+              inline: 2,
+            },
+            // We need to keep class names and disable mangling to prevent issues with consuming the rspack bundle in
+            // other bundlers (e.g. webpack) that rely on class names for tree shaking and other optimizations.
+            mangle: false,
+            format: {
+              ecma: 5,
+              comments: false,
+              ascii_only: true,
+            },
+          },
+        }),
+        new rspack.LightningCssMinimizerRspackPlugin({}),
+      ],
+    },
+
+    module: {
+      parser: cssParser,
+      rules: [
+        {
+          test: /\.m?js/,
+          resolve: {
+            fullySpecified: false,
+          },
+        },
+        {
+          test: /\.(js|mjs|jsx|ts|tsx)$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'builtin:swc-loader',
+            options: {
+              jsc: {
+                parser: {
+                  syntax: 'typescript',
+                  tsx: true,
+                },
+                transform: {
+                  react: {
+                    runtime: 'automatic',
+                  },
+                },
+                target: 'es2015',
+              },
+            },
+          },
+          type: 'javascript/auto',
+        },
+        {
+          test: /\.js$/,
+          enforce: 'pre' as const,
+          include: /node_modules/,
+          descriptionData: { componentId: (value: any) => !!value },
+          extractSourceMap: shouldUseSourceMap,
+        },
+        {
+          test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+          type: 'asset',
+          parser: {
+            dataUrlCondition: {
+              maxSize: imageInlineSizeLimit,
+            },
+          },
+        },
+        {
+          test: /\.svg$/,
+          type: 'asset',
+          parser: {
+            dataUrlCondition: {
+              maxSize: imageInlineSizeLimit,
+            },
+          },
+        },
+        {
+          test: /\.css$/,
+          exclude: /\.module\.css$/,
+          type: 'css',
+          sideEffects: true,
+        },
+        {
+          test: /\.module\.css$/,
+          type: 'css/module',
+          generator: cssModuleGenerator,
+        },
+        {
+          test: /\.(scss|sass)$/,
+          exclude: /\.module\.(scss|sass)$/,
+          use: [
+            {
+              loader: require.resolve('resolve-url-loader'),
+              options: { sourceMap: shouldUseSourceMap },
+            },
+            {
+              loader: require.resolve('sass-loader'),
+              options: { sourceMap: shouldUseSourceMap },
+            },
+          ],
+          type: 'css',
+          sideEffects: true,
+        },
+        {
+          test: /\.module\.(scss|sass)$/,
+          use: [
+            {
+              loader: require.resolve('resolve-url-loader'),
+              options: { sourceMap: shouldUseSourceMap },
+            },
+            {
+              loader: require.resolve('sass-loader'),
+              options: { sourceMap: shouldUseSourceMap },
+            },
+          ],
+          type: 'css/module',
+          generator: cssModuleGenerator,
+        },
+        {
+          test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
+          type: 'asset',
+          generator: {
+            filename: 'static/fonts/[hash][ext][query]',
+          },
+        },
+        {
+          test: /\.mdx?$/,
+          use: [
+            {
+              loader: 'builtin:swc-loader',
+              options: {
+                jsc: {
+                  parser: {
+                    syntax: 'typescript',
+                    tsx: true,
+                  },
+                  transform: {
+                    react: {
+                      runtime: 'automatic',
+                    },
+                  },
+                  target: 'es2015',
+                },
+              },
+            },
+            {
+              loader: require.resolve('@mdx-js/loader'),
+              options: mdxOptions,
+            },
+            {
+              // transforms admonition syntax (:::type content → :::type[content]) for mdx v3
+              loader: require.resolve('@teambit/react/dist/webpack/mdx-pre-loader.cjs'),
+            },
+          ],
+          type: 'javascript/auto',
+        },
+        {
+          exclude: [/\.(cjs|js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/, /\.css$/, /\.s[ac]ss$/, /\.less$/, /\.mdx?$/],
+          type: 'asset/resource',
+        },
+      ],
+    },
+
+    plugins: [
+      new RspackManifestPlugin({ fileName: 'asset-manifest.json', generate: generateAssetManifest }),
+
+      new rspack.ProvidePlugin({ process: fallbacksProvidePluginConfig.process }),
+
+      new rspack.IgnorePlugin({
+        resourceRegExp: /^\.\/locale$/,
+        contextRegExp: /moment$/,
+      }),
+    ],
+
+    performance: false,
+  };
+}

package/artifacts/ui-bundle/static/css/main.03dc01ef.css

@@ -1,5 +0,0 @@
-.frame_overlayBorder__4pB4S{box-sizing:border-box;border:2px solid #eebcc9;border:2px solid var(--bit-highlighter-color, #eebcc9);border-radius:11px;padding:4px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.frame_hidden__F0shs{display:none}
-.label_othersContainer__\+rhM5>*{margin-bottom:8px}.label_othersContainer__\+rhM5>*:last-child{margin-bottom:0;margin-bottom:initial}.label_othersTooltip__FsGq5{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.label_othersTooltip__FsGq5::before{display:inline-block;transition:transform 300ms;content:"▾"}.label_othersTooltip__FsGq5.label_active__E6KIP::before{transform:rotate(-180deg)}.label_hidden__ZtHoV{visibility:hidden;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}
-.component-strip_componentStrip__eCupE{display:flex;width:-moz-fit-content;width:fit-content;border-radius:.5em;box-shadow:var(--bit-highlighter-shadow);white-space:nowrap}.component-strip_componentStrip__eCupE>*{padding:0 .5em;line-height:1.5;transition:filter 300ms,background-color 300ms;transform:translateZ(0);background:#eebcc9;background:var(--bit-highlighter-color, #eebcc9);margin-right:.125em}.component-strip_componentStrip__eCupE>*:link,.component-strip_componentStrip__eCupE>*:visited{text-decoration:inherit;color:inherit}.component-strip_componentStrip__eCupE>*:link:hover,.component-strip_componentStrip__eCupE>*:visited:hover{background:#f6dae2;background:var(--bit-highlighter-color-hover, #f6dae2)}.component-strip_componentStrip__eCupE>*:link:active,.component-strip_componentStrip__eCupE>*:visited:active{background:#e79db1;background:var(--bit-highlighter-color-active, #e79db1);color:inherit}.component-strip_componentStrip__eCupE>*:first-child{border-top-left-radius:.5em;border-bottom-left-radius:.5em}.component-strip_componentStrip__eCupE>*:last-child{border-top-right-radius:.5em;border-bottom-right-radius:.5em;margin-right:0;margin-right:initial}.component-strip_nameBlock__URo7m{display:flex}.component-strip_nameBlock__URo7m .component-strip_version__KGQOB{max-width:13ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:max-width 480ms}.component-strip_nameBlock__URo7m .component-strip_version__KGQOB:hover{max-width:61ch}
-.element-highlighter_label__UFbc1{padding:8px}.element-highlighter_frame__0eJ5V,.element-highlighter_label__UFbc1{z-index:15500}
-.highlighter-provider_highlighter__vY8on{border:solid #ededed;border:solid var(--bit-border-color-lightest, #ededed);border-width:0px;box-sizing:border-box;height:100%;transition:border 300ms}.highlighter-provider_highlighter__vY8on.highlighter-provider_active__xgxqx{border-width:8px;overflow:auto}.highlighter-provider_label__iLN6B{font-family:sans-serif;font-size:12px}