@teambit/preview 1.0.123 → 1.0.125

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/preview",
-  "version": "1.0.123",
+  "version": "1.0.125",
   "homepage": "https://bit.cloud/teambit/preview/preview",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.preview",
     "name": "preview",
-    "version": "1.0.123"
+    "version": "1.0.125"
   },
   "dependencies": {
     "mime": "2.5.2",
@@ -14,42 +14,49 @@
     "lodash": "4.17.21",
     "p-map-series": "2.1.0",
     "camelcase": "6.2.0",
+    "webpack": "5.84.1",
     "graphql-tag": "2.12.1",
     "object-hash": "2.1.1",
     "lodash.compact": "3.0.1",
+    "webpack-manifest-plugin": "5.0.0",
+    "webpack-merge": "5.8.0",
     "graphql-request": "6.1.0",
     "@teambit/ui-foundation.ui.pages.static-error": "0.0.92",
+    "@teambit/harmony": "0.4.6",
     "@teambit/preview.modules.preview-modules": "1.0.2",
     "@teambit/component-id": "1.2.0",
-    "@teambit/harmony": "0.4.6",
     "@teambit/bit-error": "0.0.404",
+    "@teambit/react.webpack.react-webpack": "1.0.23",
     "@teambit/express": "0.0.944",
     "@teambit/logger": "0.0.938",
-    "@teambit/builder": "1.0.123",
-    "@teambit/bundler": "1.0.123",
-    "@teambit/component": "1.0.123",
+    "@teambit/builder": "1.0.125",
+    "@teambit/bundler": "1.0.125",
+    "@teambit/component": "1.0.125",
     "@teambit/preview.ui.component-preview": "1.0.5",
-    "@teambit/aspect-loader": "1.0.123",
+    "@teambit/aspect-loader": "1.0.125",
     "@teambit/cli": "0.0.845",
-    "@teambit/dependency-resolver": "1.0.123",
-    "@teambit/envs": "1.0.123",
+    "@teambit/dependency-resolver": "1.0.125",
+    "@teambit/envs": "1.0.125",
     "@teambit/toolbox.path.to-windows-compatible-path": "0.0.496",
-    "@teambit/graphql": "1.0.123",
-    "@teambit/pkg": "1.0.123",
-    "@teambit/pubsub": "1.0.123",
-    "@teambit/scope": "1.0.123",
-    "@teambit/ui": "1.0.123",
-    "@teambit/watcher": "1.0.123",
-    "@teambit/workspace": "1.0.123",
-    "@teambit/compiler": "1.0.123",
+    "@teambit/ui": "1.0.125",
+    "@teambit/isolator": "1.0.125",
+    "@teambit/cache": "0.0.938",
+    "@teambit/graphql": "1.0.125",
+    "@teambit/pkg": "1.0.125",
+    "@teambit/pubsub": "1.0.125",
+    "@teambit/scope": "1.0.125",
+    "@teambit/watcher": "1.0.125",
+    "@teambit/workspace": "1.0.125",
+    "@teambit/compiler": "1.0.125",
     "@teambit/preview.cli.preview-server-status": "0.0.506",
     "@teambit/preview.cli.webpack-events-listener": "0.0.174",
-    "@teambit/isolator": "1.0.123"
+    "@teambit/webpack": "1.0.125"
   },
   "devDependencies": {
     "@types/mime": "2.0.3",
     "@types/fs-extra": "9.0.7",
     "@types/lodash": "4.14.165",
+    "@types/webpack": "5.28.1",
     "@types/object-hash": "1.3.4",
     "@types/memoizee": "0.4.5",
     "cross-fetch": "3.1.5",
@@ -63,7 +70,9 @@
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
     "@types/react": "^18.2.12",
+    "@types/react-dom": "^18.2.5",
     "@teambit/legacy": "1.0.624"
   },
   "license": "Apache-2.0",

package/preview.main.runtime.tsx

@@ -15,6 +15,7 @@ import { EnvsAspect } from '@teambit/envs';
 import type { EnvsMain, ExecutionContext, PreviewEnv } from '@teambit/envs';
 import { Slot, SlotRegistry, Harmony } from '@teambit/harmony';
 import { UIAspect, UiMain, UIRoot } from '@teambit/ui';
+import { CacheAspect, CacheMain } from '@teambit/cache';
 import { CACHE_ROOT } from '@teambit/legacy/dist/constants';
 import { BitError } from '@teambit/bit-error';
 import objectHash from 'object-hash';
@@ -61,6 +62,9 @@ import { ComponentPreviewRoute } from './component-preview.route';
 import { previewSchema } from './preview.graphql';
 import { PreviewAssetsRoute } from './preview-assets.route';
 import { PreviewService } from './preview.service';
+import { PUBLIC_DIR, RUNTIME_NAME, buildPreBundlePreview, generateBundlePreviewEntry } from './pre-bundle';
+import { BUNDLE_DIR, PreBundlePreviewTask } from './pre-bundle.task';
+import { createBundleHash, getBundlePath, readBundleHash } from './pre-bundle-utils';
 
 const noopResult = {
   results: [],
@@ -179,6 +183,8 @@ export class PreviewMain {
 
     private ui: UiMain,
 
+    private cache: CacheMain,
+
     private envs: EnvsMain,
 
     private componentAspect: ComponentMain,
@@ -676,12 +682,47 @@ export class PreviewMain {
       this.executionRefs.set(ctxId, new ExecutionRef(context));
     });
 
-    const previewRuntime = await this.writePreviewRuntime(context);
+    const previewRuntime = await this.writePreviewEntry(context);
     const linkFiles = await this.updateLinkFiles(context.components, context);
 
     return [...linkFiles, previewRuntime];
   }
 
+  private async writePreviewEntry(context: { components: Component[] }, aspectsIdsToNotFilterOut: string[] = []) {
+    const { rebuild, skipUiBuild } = this.ui.runtimeOptions;
+
+    const [name, uiRoot] = this.getUi();
+    const cacheKey = `${uiRoot.path}|${RUNTIME_NAME}`;
+    const currentBundleHash = await createBundleHash(uiRoot, RUNTIME_NAME);
+    const preBundleHash = readBundleHash(PreviewAspect.id, BUNDLE_DIR, '');
+    const workspaceBundleDir = join(uiRoot.path, PUBLIC_DIR);
+    const lastBundleHash = await this.cache.get(cacheKey);
+
+    let bundlePath = '';
+
+    // ensure the pre-bundle is ready
+    if (!rebuild && !existsSync(workspaceBundleDir) && (currentBundleHash === preBundleHash || skipUiBuild)) {
+      // use pre-bundle
+      bundlePath = getBundlePath(PreviewAspect.id, BUNDLE_DIR, '') as string;
+    } else if (!rebuild && existsSync(workspaceBundleDir) && (currentBundleHash === lastBundleHash || skipUiBuild)) {
+      // use workspace bundle
+      bundlePath = workspaceBundleDir;
+    } else {
+      // do build
+      const resolvedAspects = await this.resolveAspects(PreviewRuntime.name, undefined, uiRoot);
+      const filteredAspects = this.filterAspectsByExecutionContext(resolvedAspects, context, aspectsIdsToNotFilterOut);
+
+      await buildPreBundlePreview(filteredAspects);
+      bundlePath = workspaceBundleDir;
+      await this.cache.set(cacheKey, currentBundleHash);
+    }
+
+    // prepare the runtime entry
+    const previewRuntime = await generateBundlePreviewEntry(name, bundlePath, this.harmony.config.toObject());
+
+    return previewRuntime;
+  }
+
   private updateLinkFiles(components: Component[] = [], context: ExecutionContext) {
     const previews = this.previewSlot.values();
     const paths = previews.map(async (previewDef) => {
@@ -876,6 +917,7 @@ export class PreviewMain {
     BuilderAspect,
     ComponentAspect,
     UIAspect,
+    CacheAspect,
     EnvsAspect,
     WorkspaceAspect,
     PkgAspect,
@@ -900,6 +942,7 @@ export class PreviewMain {
       builder,
       componentExtension,
       uiMain,
+      cache,
       envs,
       workspace,
       pkg,
@@ -915,6 +958,7 @@ export class PreviewMain {
       BuilderMain,
       ComponentMain,
       UiMain,
+      CacheMain,
       EnvsMain,
       Workspace | undefined,
       PkgMain,
@@ -936,6 +980,7 @@ export class PreviewMain {
       harmony,
       previewSlot,
       uiMain,
+      cache,
       envs,
       componentExtension,
       pkg,
@@ -969,6 +1014,7 @@ export class PreviewMain {
       builder.registerBuildTasks([
         new EnvPreviewTemplateTask(preview, envs, aspectLoader, dependencyResolver, logger),
         new PreviewTask(bundler, preview, dependencyResolver, logger),
+        new PreBundlePreviewTask(uiMain, logger),
       ]);
 
     if (workspace) {

package/webpack/webpack.config.ts

@@ -0,0 +1,88 @@
+import { configBaseFactory } from '@teambit/react.webpack.react-webpack';
+
+import { Configuration, 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);
+
+  // @ts-ignore that's an issue because of different types/webpack version
+  const combined = merge(baseConfig, preBundleConfig);
+
+  // @ts-ignore that's an issue because of different types/webpack version
+  return combined;
+}
+
+function createPreBundleConfig(outputDir: string, entryFile: string) {
+  const preBundleConfig: Configuration = {
+    stats: {
+      children: true,
+      errorDetails: true,
+    },
+    mode: 'production',
+    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.js',
+      filename: 'static/js/[name].[contenthash:8].js',
+      library: {
+        type: 'commonjs2',
+      },
+    },
+    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;
+}