@teambit/webpack 0.0.567 → 0.0.571

package/config/html.ts

@@ -0,0 +1,22 @@
+/** html template for Previews (docs, compositions, etc) */
+export function html(title: string) {
+  return () => `
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <title>${title}</title>
+      <script>
+      // Allow to use react dev-tools inside the examples
+      try { window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__; } catch {}
+      </script>
+      <!-- minimal css resets -->
+      <style> html { height: 100%; } body { margin: 0; height: 100%; } #root { height: 100%; } </style>
+    </head>
+    <body>
+      <div id="root"></div>
+    </body>
+  </html>  
+  `;
+}

package/config/webpack-fallbacks-aliases.ts

@@ -0,0 +1,4 @@
+export const fallbacksAliases = {
+  process: require.resolve('process/browser'),
+  buffer: require.resolve('buffer/'),
+};

package/config/webpack-fallbacks-provide-plugin-config.ts

@@ -0,0 +1,4 @@
+export const fallbacksProvidePluginConfig = {
+  process: require.resolve('process/browser'),
+  Buffer: [require.resolve('buffer/'), 'Buffer'],
+};

package/config/webpack-fallbacks.ts

@@ -0,0 +1,60 @@
+// based on https://github1s.com/vercel/next.js/blob/canary/packages/next/build/webpack-config.ts
+// Full list of old polyfills is accessible here:
+// https://github.com/webpack/webpack/blob/2a0536cf510768111a3a6dceeb14cb79b9f59273/lib/ModuleNotFoundError.js#L13-L42
+
+const assertFallbackPath = require.resolve('assert/');
+const bufferFallbackPath = require.resolve('buffer/');
+const constantsFallbackPath = require.resolve('constants-browserify');
+const cryptoFallbackPath = require.resolve('crypto-browserify');
+const domainFallbackPath = require.resolve('domain-browser');
+const httpFallbackPath = require.resolve('stream-http');
+const httpsFallbackPath = require.resolve('https-browserify');
+const osFallbackPath = require.resolve('os-browserify/browser');
+const pathFallbackPath = require.resolve('path-browserify');
+const punycodeFallbackPath = require.resolve('punycode/');
+const processFallbackPath = require.resolve('process/browser');
+// Handled in separate alias
+const querystringFallbackPath = require.resolve('querystring-es3');
+const streamFallbackPath = require.resolve('stream-browserify');
+const string_decoderFallbackPath = require.resolve('string_decoder/');
+const sysFallbackPath = require.resolve('util/');
+const timersFallbackPath = require.resolve('timers-browserify');
+const ttyFallbackPath = require.resolve('tty-browserify');
+// Handled in separate alias
+const urlFallbackPath = require.resolve('url/');
+const utilFallbackPath = require.resolve('util/');
+const vmFallbackPath = require.resolve('vm-browserify');
+const zlibFallbackPath = require.resolve('browserify-zlib');
+
+export const fallbacks = {
+  assert: assertFallbackPath,
+  buffer: bufferFallbackPath,
+  constants: constantsFallbackPath,
+  crypto: cryptoFallbackPath,
+  domain: domainFallbackPath,
+  http: httpFallbackPath,
+  https: httpsFallbackPath,
+  os: osFallbackPath,
+  path: pathFallbackPath,
+  punycode: punycodeFallbackPath,
+  process: processFallbackPath,
+  querystring: querystringFallbackPath,
+  stream: streamFallbackPath,
+  string_decoder: string_decoderFallbackPath,
+  sys: sysFallbackPath,
+  timers: timersFallbackPath,
+  tty: ttyFallbackPath,
+  url: urlFallbackPath,
+  util: utilFallbackPath,
+  vm: vmFallbackPath,
+  zlib: zlibFallbackPath,
+  fs: false,
+  net: false,
+  tls: false,
+  child_process: false,
+  // file: false,
+  // module: false,
+  // pnpapi: false,
+  // readline: false,
+  // worker_threads: false,
+} as const;

package/config/webpack-preview.config.ts

@@ -0,0 +1,59 @@
+import webpack, { Configuration } from 'webpack';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import { fallbacks } from './webpack-fallbacks';
+import { fallbacksProvidePluginConfig } from './webpack-fallbacks-provide-plugin-config';
+import { fallbacksAliases } from './webpack-fallbacks-aliases';
+import { html } from './html';
+
+export function previewConfigFactory(entries: string[], rootPath: string): Configuration {
+  return {
+    mode: 'production',
+    // Stop compilation early in production
+    bail: true,
+    // These are the "entry points" to our application.
+    // This means they will be the "root" imports that are included in JS bundle.
+    entry: entries.filter(Boolean),
+
+    output: {
+      // The build folder.
+      path: `${rootPath}/public`,
+
+      filename: 'static/js/[name].[contenthash:8].js',
+      // There are also additional JS chunk files if you use code splitting.
+      chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
+    },
+
+    resolve: {
+      alias: fallbacksAliases,
+
+      fallback: fallbacks,
+    },
+
+    plugins: [
+      new HtmlWebpackPlugin(
+        Object.assign(
+          {},
+          {
+            inject: true,
+            templateContent: html('Preview'),
+          },
+          {
+            minify: {
+              removeComments: true,
+              collapseWhitespace: true,
+              removeRedundantAttributes: true,
+              useShortDoctype: true,
+              removeEmptyAttributes: true,
+              removeStyleLinkTypeAttributes: true,
+              keepClosingSlash: true,
+              minifyJS: true,
+              minifyCSS: true,
+              minifyURLs: true,
+            },
+          }
+        )
+      ),
+      new webpack.ProvidePlugin(fallbacksProvidePluginConfig),
+    ],
+  };
+}

package/config/webpack.config.ts

@@ -0,0 +1,32 @@
+import webpack, { Configuration } from 'webpack';
+import { fallbacks } from './webpack-fallbacks';
+import { fallbacksProvidePluginConfig } from './webpack-fallbacks-provide-plugin-config';
+import { fallbacksAliases } from './webpack-fallbacks-aliases';
+
+export function configFactory(entries: string[], rootPath: string): Configuration {
+  return {
+    mode: 'production',
+    // Stop compilation early in production
+    bail: true,
+    // These are the "entry points" to our application.
+    // This means they will be the "root" imports that are included in JS bundle.
+    entry: entries.filter(Boolean),
+
+    output: {
+      // The build folder.
+      path: `${rootPath}/public`,
+
+      filename: 'static/js/[name].[contenthash:8].js',
+      // There are also additional JS chunk files if you use code splitting.
+      chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
+    },
+
+    resolve: {
+      alias: fallbacksAliases,
+
+      fallback: fallbacks,
+    },
+
+    plugins: [new webpack.ProvidePlugin(fallbacksProvidePluginConfig)],
+  };
+}

package/config/webpack.dev.config.ts

@@ -0,0 +1,156 @@
+import path from 'path';
+import webpack from 'webpack';
+import HtmlWebpackPlugin from 'html-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 { PubsubMain } from '@teambit/pubsub';
+import { pathNormalizeToLinux } from '@teambit/legacy/dist/utils';
+import { WebpackConfigWithDevServer } from '../webpack.dev-server';
+import { fallbacks } from './webpack-fallbacks';
+
+import { html } from './html';
+
+import { WebpackBitReporterPlugin } from '../plugins/webpack-bit-reporter-plugin';
+import { fallbacksProvidePluginConfig } from './webpack-fallbacks-provide-plugin-config';
+import { fallbacksAliases } from './webpack-fallbacks-aliases';
+
+const publicUrlOrPath = getPublicUrlOrPath(process.env.NODE_ENV === 'development', '/', '/public');
+
+export function configFactory(
+  devServerID: string,
+  workspaceDir: string,
+  entryFiles: string[],
+  publicRoot: string,
+  publicPath: string,
+  pubsub: PubsubMain,
+  title?: string
+): WebpackConfigWithDevServer {
+  const resolveWorkspacePath = (relativePath) => path.resolve(workspaceDir, relativePath);
+
+  // Required for babel-preset-react-app
+  process.env.NODE_ENV = 'development';
+
+  const publicDirectory = `${publicRoot}/${publicPath}`;
+
+  return {
+    // Environment mode
+    mode: 'development',
+
+    devtool: 'inline-source-map',
+
+    // Entry point of app
+    entry: entryFiles.map((filePath) => resolveWorkspacePath(filePath)),
+
+    output: {
+      // Development filename output
+      filename: 'static/js/[name].bundle.js',
+
+      pathinfo: true,
+
+      path: resolveWorkspacePath(publicDirectory),
+
+      // publicPath: resolveWorkspacePath(publicDirectory),
+
+      chunkFilename: 'static/js/[name].chunk.js',
+
+      // point sourcemap entries to original disk locations (format as URL on windows)
+      devtoolModuleFilenameTemplate: (info) => pathNormalizeToLinux(path.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',
+    },
+
+    infrastructureLogging: {
+      level: 'error',
+    },
+
+    stats: 'errors-only',
+
+    devServer: {
+      allowedHosts: 'all',
+
+      static: [
+        {
+          directory: resolveWorkspacePath(publicDirectory),
+          staticOptions: {},
+          // Don't be confused with `dev.publicPath`, it is `publicPath` for static directory
+          // Can be:
+          // publicPath: ['/static-public-path-one/', '/static-public-path-two/'],
+          publicPath: publicDirectory,
+          // Can be:
+          // serveIndex: {} (options for the `serveIndex` option you can find https://github.com/expressjs/serve-index)
+          serveIndex: true,
+          // Can be:
+          // watch: {} (options for the `watch` option you can find https://github.com/paulmillr/chokidar)
+          watch: true,
+        },
+      ],
+
+      // Enable compression
+      compress: true,
+
+      // Enable hot reloading
+      hot: true,
+
+      historyApiFallback: {
+        disableDotRule: true,
+        index: resolveWorkspacePath(publicDirectory),
+      },
+
+      client: {
+        overlay: false,
+      },
+
+      onBeforeSetupMiddleware({ app, server }) {
+        // 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(errorOverlayMiddleware());
+      },
+
+      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
+        // 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));
+      },
+
+      devMiddleware: {
+        // forward static files
+        publicPath: path.join('/', publicRoot),
+      },
+    },
+
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js', '.mdx', '.md'],
+      alias: fallbacksAliases,
+
+      fallback: fallbacks as any,
+    },
+
+    plugins: [
+      new HtmlWebpackPlugin({
+        templateContent: html(title || 'Component preview'),
+        filename: 'index.html',
+      }),
+
+      new webpack.ProvidePlugin(fallbacksProvidePluginConfig),
+
+      new WebpackBitReporterPlugin({
+        options: { pubsub, devServerID },
+      }),
+    ],
+  };
+}

package/events/index.ts

@@ -0,0 +1,2 @@
+export * from './webpack-compilation-done-event';
+export * from './webpack-compilation-started-event';

package/events/webpack-compilation-done-event.ts

@@ -0,0 +1,20 @@
+/* eslint-disable max-classes-per-file */
+import type { Stats } from 'webpack';
+import { BitBaseEvent } from '@teambit/pubsub';
+
+class WebpackCompilationDoneEventData {
+  constructor(readonly stats: Stats, readonly devServerID: string) {}
+}
+
+export class WebpackCompilationDoneEvent extends BitBaseEvent<WebpackCompilationDoneEventData> {
+  static readonly TYPE = 'webpack-compilation-done';
+
+  constructor(readonly timestamp: number, readonly stats: Stats, readonly devServerID: string) {
+    super(
+      WebpackCompilationDoneEvent.TYPE,
+      '0.0.1',
+      timestamp,
+      new WebpackCompilationDoneEventData(stats, devServerID)
+    );
+  }
+}

package/events/webpack-compilation-started-event.ts

@@ -0,0 +1,14 @@
+/* eslint-disable max-classes-per-file */
+import { BitBaseEvent } from '@teambit/pubsub';
+
+type Params = {
+  devServerID: string;
+};
+
+export class WebpackCompilationStartedEvent extends BitBaseEvent<Params> {
+  static readonly TYPE = 'webpack-compilation-started';
+
+  constructor(readonly timestamp, readonly params: Params) {
+    super(WebpackCompilationStartedEvent.TYPE, '0.0.1', timestamp, params);
+  }
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/webpack",
-  "version": "0.0.567",
+  "version": "0.0.571",
   "homepage": "https://bit.dev/teambit/webpack/webpack",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.webpack",
     "name": "webpack",
-    "version": "0.0.567"
+    "version": "0.0.571"
   },
   "dependencies": {
     "webpack": "5.51.1",
@@ -38,13 +38,13 @@
     "assert": "2.0.0",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
-    "@teambit/webpack.modules.config-mutator": "0.0.119",
-    "@teambit/bit-error": "0.0.379",
-    "@teambit/bundler": "0.0.567",
-    "@teambit/logger": "0.0.479",
-    "@teambit/cli": "0.0.393",
-    "@teambit/pubsub": "0.0.567",
-    "@teambit/workspace": "0.0.567"
+    "@teambit/webpack.modules.config-mutator": "0.0.121",
+    "@teambit/bit-error": "0.0.381",
+    "@teambit/bundler": "0.0.571",
+    "@teambit/logger": "0.0.483",
+    "@teambit/cli": "0.0.395",
+    "@teambit/pubsub": "0.0.571",
+    "@teambit/workspace": "0.0.571"
   },
   "devDependencies": {
     "@types/webpack": "5.28.0",
@@ -56,7 +56,7 @@
     "@types/node": "12.20.4"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.179",
+    "@teambit/legacy": "1.0.181",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -107,21 +107,6 @@
       }
     }
   },
-  "files": [
-    "dist",
-    "!dist/tsconfig.tsbuildinfo",
-    "**/*.md",
-    "**/*.mdx",
-    "**/*.js",
-    "**/*.json",
-    "**/*.sass",
-    "**/*.scss",
-    "**/*.less",
-    "**/*.css",
-    "**/*.css",
-    "**/*.jpeg",
-    "**/*.gif"
-  ],
   "private": false,
   "engines": {
     "node": ">=12.22.0"

package/plugins/webpack-bit-reporter-plugin.ts

@@ -0,0 +1,33 @@
+import type { Compiler, Stats } from 'webpack';
+import { WebpackCompilationDoneEvent, WebpackCompilationStartedEvent } from '../events';
+import { WebpackAspect } from '../webpack.aspect';
+
+const PLUGIN_NAME = 'webpack-compiler-started-plugin';
+
+/**
+ * Monitors Webpack's compilation, and updates progress to Bit
+ */
+export class WebpackBitReporterPlugin {
+  // TODO: add plugin type from webpack and implement it
+  pubsub: any;
+  devServerID: string;
+
+  constructor({ options }) {
+    this.pubsub = options.pubsub;
+    this.devServerID = options.devServerID;
+  }
+
+  apply(compiler: Compiler) {
+    // "Called before a new compilation is created."
+    compiler.hooks.compile.tap(PLUGIN_NAME, () => {
+      const event = new WebpackCompilationStartedEvent(Date.now(), { devServerID: this.devServerID });
+      this.pubsub.pub(WebpackAspect.id, event);
+    });
+
+    // "Executed when the compilation has completed."
+    compiler.hooks.done.tap(PLUGIN_NAME, (stats: Stats) => {
+      const event = new WebpackCompilationDoneEvent(Date.now(), stats, this.devServerID);
+      this.pubsub.pub(WebpackAspect.id, event);
+    });
+  }
+}

package/types/asset.d.ts

@@ -0,0 +1,29 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}

package/webpack.composition.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Logo = () => (
+  <div style={{ height: '100%', display: 'flex', justifyContent: 'center' }}>
+    <img style={{ width: 70 }} src="https://static.bit.dev/brands/logo-webpack.svg" />
+  </div>
+);