piral-cli-webpack5 1.0.0-pre.1960 → 1.0.1-beta.5640

package/src/webpack/bundler-run.ts

@@ -1,17 +1,19 @@
 import * as webpack from 'webpack';
 import { resolve, basename, dirname } from 'path';
 import { EventEmitter } from 'events';
-import type { LogLevels } from 'piral-cli';
-
-interface BuildResult {
-  outFile: string;
-  outDir: string;
-}
+import type { LogLevels, BundleHandlerResponse } from 'piral-cli';
 
 function getOutput(stats: webpack.Stats) {
   const { outputPath, entrypoints } = stats.toJson();
-  const assets = entrypoints.main.assets;
-  return resolve(outputPath, assets[0].name);
+
+  for (const name of Object.keys(entrypoints)) {
+    const assets = entrypoints[name].assets;
+    const firstAsset = assets.find((m) => m.name.endsWith('.js') || m.name.endsWith('.mjs'));
+
+    if (firstAsset) {
+      return resolve(outputPath, firstAsset.name);
+    }
+  }
 }
 
 function getPreset(logLevel: LogLevels) {
@@ -31,77 +33,79 @@ function getPreset(logLevel: LogLevels) {
   }
 }
 
-export function runWebpack(wpConfig: webpack.Configuration, logLevel: LogLevels) {
+export function runWebpack(wpConfig: webpack.Configuration, logLevel: LogLevels): BundleHandlerResponse {
   const eventEmitter = new EventEmitter();
   const outDir = wpConfig.output.path;
-  const mainBundle = {
+  const bundle = {
+    outFile: '',
+    outDir,
     name: '',
+    hash: '',
     requireRef: undefined,
-    entryAsset: {
-      hash: '',
-    },
+  };
+
+  const updateBundle = (stats: webpack.Stats) => {
+    const file = getOutput(stats);
+    bundle.name = basename(file);
+    bundle.requireRef = stats.compilation.outputOptions?.uniqueName;
+    bundle.hash = stats.hash;
+    bundle.outFile = `/${basename(file)}`;
+    bundle.outDir = dirname(file);
   };
 
   wpConfig.plugins.push({
     apply(compiler: webpack.Compiler) {
       compiler.hooks.beforeCompile.tap('piral-cli', () => {
-        eventEmitter.emit('buildStart');
+        eventEmitter.emit('start');
       });
 
       compiler.hooks.done.tap('piral-cli', (stats) => {
-        mainBundle.name = getOutput(stats);
-        mainBundle.requireRef = stats.compilation.outputOptions?.uniqueName;
-        mainBundle.entryAsset.hash = stats.hash;
-        eventEmitter.emit('bundled');
+        updateBundle(stats);
+        eventEmitter.emit('end', bundle);
       });
     },
   });
 
-  const bundle = () =>
-    new Promise<BuildResult>((resolve, reject) => {
-      const preset = {
-        current: undefined,
-      };
-
-      const process = webpack(wpConfig, (err, stats) => {
-        if (err) {
-          console.error(err);
-          reject(err);
-        } else {
-          console.log(
-            stats.toString({
-              ...preset.current,
-              colors: true,
-            }),
-          );
+  return {
+    bundle() {
+      return new Promise((resolve, reject) => {
+        const preset = {
+          current: undefined,
+        };
 
-          if (stats.hasErrors()) {
-            reject(stats.toJson(preset.current));
+        const process = webpack(wpConfig, (err, stats) => {
+          if (err) {
+            console.error(err);
+            reject(err);
           } else {
-            const file = getOutput(stats);
-            resolve({
-              outFile: `/${basename(file)}`,
-              outDir: dirname(file),
-            });
+            console.log(
+              stats.toString({
+                ...preset.current,
+                colors: true,
+              }),
+            );
+
+            if (stats.hasErrors()) {
+              reject(stats.toJson(preset.current));
+            } else {
+              updateBundle(stats);
+              resolve(bundle);
+            }
           }
+        });
+
+        if (process) {
+          // process is undefined in case of an error
+          const compilation = process.createCompilation();
+          preset.current = compilation.createStatsOptions(getPreset(logLevel));
         }
       });
-
-      const compilation = process.createCompilation();
-      preset.current = compilation.createStatsOptions(getPreset(logLevel));
-    });
-
-  return {
-    bundle,
-    on(ev: string, listener: () => void) {
-      eventEmitter.on(ev, listener);
     },
-    off(ev: string, listener: () => void) {
-      eventEmitter.off(ev, listener);
+    onStart(cb) {
+      eventEmitter.on('start', cb);
     },
-    options: {
-      outDir,
+    onEnd(cb) {
+      eventEmitter.on('end', cb);
     },
-    mainBundle,
   };
 }

package/src/webpack/common.ts

@@ -0,0 +1,111 @@
+import * as MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import { progress, logReset, log } from 'piral-cli/utils';
+import { RuleSetRule, ProgressPlugin, WebpackPluginInstance, Configuration } from 'webpack';
+
+const piletCss = 'main.css';
+
+export function getStyleLoaders(useExtractLoader: boolean) {
+  if (useExtractLoader) {
+    return [MiniCssExtractPlugin.loader];
+  } else {
+    return [require.resolve('style-loader')];
+  }
+}
+
+export type ConfigEnhancer = (config: Configuration) => Configuration;
+
+export type DefaultConfiguration = [Configuration, ConfigEnhancer];
+
+export const extensions = ['.ts', '.tsx', '.js', '.jsx', '.json'];
+
+export function getVariables(): Record<string, string> {
+  return Object.keys(process.env).reduce((prev, curr) => {
+    prev[curr] = process.env[curr];
+    return prev;
+  }, {});
+}
+
+export function getPlugins(plugins: Array<WebpackPluginInstance>, pilet?: string) {
+  const otherPlugins: Array<WebpackPluginInstance> = [
+    new MiniCssExtractPlugin({
+      filename: pilet ? piletCss : '[name].[fullhash:6].css',
+      chunkFilename: '[id].[chunkhash:6].css',
+    }),
+  ];
+
+  if (process.env.WEBPACK_PROGRESS) {
+    otherPlugins.push(
+      new ProgressPlugin((percent, msg) => {
+        if (percent !== undefined) {
+          progress(`${~~(percent * 100)}% : ${msg}`);
+
+          if (percent === 1) {
+            logReset();
+            log('generalInfo_0000', 'Bundling finished.');
+          }
+        }
+      }),
+    );
+  }
+
+  return plugins.concat(otherPlugins);
+}
+
+export function getRules(styleLoaders: Array<string>): Array<RuleSetRule> {
+  const nodeModules = /node_modules/;
+  const babelLoader = {
+    loader: require.resolve('babel-loader'),
+    options: {
+      presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-react')],
+    },
+  };
+  const tsLoader = {
+    loader: require.resolve('ts-loader'),
+    options: {
+      transpileOnly: true,
+    },
+  };
+
+  return [
+    {
+      oneOf: [
+        {
+          test: /\.s[ac]ss$/i,
+          use: [...styleLoaders, require.resolve('css-loader'), require.resolve('sass-loader')],
+        },
+        {
+          test: /\.css$/i,
+          use: [...styleLoaders, require.resolve('css-loader')],
+        },
+        {
+          test: /\.m?jsx?$/i,
+          use: [babelLoader],
+          exclude: nodeModules,
+        },
+        {
+          test: /\.tsx?$/i,
+          use: [babelLoader, tsLoader],
+        },
+        {
+          test: /\.codegen$/i,
+          use: [require.resolve('parcel-codegen-loader')],
+        },
+        {
+          test: /\.js$/i,
+          use: [require.resolve('source-map-loader')],
+          exclude: nodeModules,
+          enforce: 'pre',
+        },
+        {
+          // Exclude `js` files to keep "css" loader working as it injects
+          // its runtime that would otherwise be processed through "file" loader.
+          // Also exclude `html` and `json` extensions so they get processed
+          // by webpacks internal loaders.
+          exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx|vue|svelte|elm)$/i, /\.html$/i, /\.json$/i],
+          type: 'asset/resource',
+        },
+        // Don't add new loaders here -> should be added before the last (catch-all) handler
+      ],
+    },
+  ];
+}

package/src/webpack/pilet.ts

@@ -0,0 +1,121 @@
+import type { PiletBuildHandler } from 'piral-cli';
+import * as TerserPlugin from 'terser-webpack-plugin';
+import * as CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import type { PiletSchemaVersion, SharedDependency } from 'piral-cli';
+import { getRules, getPlugins, extensions, getVariables, DefaultConfiguration, getStyleLoaders } from './common';
+import { piletWebpackConfigEnhancer } from '../enhancers/pilet-webpack-config-enhancer';
+import { resolve } from 'path';
+import { runWebpack } from './bundler-run';
+import { defaultWebpackConfig } from '../constants';
+import { extendConfig } from '../helpers';
+
+async function getConfig(
+  template: string,
+  dist: string,
+  filename: string,
+  externals: Array<string>,
+  importmap: Array<SharedDependency> = [],
+  piralInstances: Array<string>,
+  schema: PiletSchemaVersion,
+  develop = false,
+  sourceMaps = true,
+  contentHash = true,
+  minimize = true,
+): Promise<DefaultConfiguration> {
+  const production = !develop;
+  const name = process.env.BUILD_PCKG_NAME;
+  const version = process.env.BUILD_PCKG_VERSION;
+  const entry = filename.replace(/\.js$/i, '');
+
+  const enhance = piletWebpackConfigEnhancer({
+    name,
+    piralInstances,
+    version,
+    entry,
+    externals,
+    importmap,
+    schema,
+    filename,
+    variables: getVariables(),
+  });
+
+  const styleLoaders = getStyleLoaders(true);
+
+  return [
+    {
+      devtool: sourceMaps ? (develop ? 'cheap-module-source-map' : 'source-map') : false,
+
+      mode: develop ? 'development' : 'production',
+
+      target: 'web',
+
+      entry: {
+        [entry]: [template],
+      },
+
+      output: {
+        publicPath: './',
+        path: dist,
+        filename: '[name].js',
+        chunkFilename: contentHash ? '[chunkhash:8].js' : undefined,
+      },
+
+      resolve: {
+        extensions,
+      },
+
+      module: {
+        rules: getRules(styleLoaders),
+      },
+
+      optimization: {
+        minimize,
+        minimizer: [
+          new TerserPlugin({
+            extractComments: false,
+            terserOptions: {
+              ie8: true,
+              output: {
+                comments: /^@pilet/,
+              },
+              mangle: {
+                reserved: ['__bundleUrl__'],
+              },
+            },
+          }),
+          new CssMinimizerPlugin(),
+        ],
+      },
+
+      plugins: getPlugins([], entry),
+    },
+    enhance,
+  ];
+}
+
+const handler: PiletBuildHandler = {
+  async create(options) {
+    const { config = defaultWebpackConfig } = options.args._;
+    const otherConfigPath = resolve(options.root, config);
+    const baseConfig = await getConfig(
+      options.entryModule,
+      options.outDir,
+      options.outFile,
+      options.externals,
+      options.importmap,
+      options.piralInstances,
+      options.version,
+      options.develop,
+      options.sourceMaps,
+      options.contentHash,
+      options.minify,
+    );
+    const wpConfig = extendConfig(baseConfig, otherConfigPath, {
+      watch: options.watch,
+    });
+
+    return runWebpack(wpConfig, options.logLevel);
+  },
+};
+
+export const create = handler.create;

package/src/webpack/piral.ts

@@ -0,0 +1,110 @@
+import type { PiralBuildHandler } from 'piral-cli';
+import * as webpack from 'webpack';
+import * as TerserPlugin from 'terser-webpack-plugin';
+import * as CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import { getFreePort } from 'piral-cli/utils';
+import { resolve } from 'path';
+import { runWebpack } from './bundler-run';
+import { getRules, getPlugins, extensions, getVariables, DefaultConfiguration, getStyleLoaders } from './common';
+import { html5EntryWebpackConfigEnhancer } from '../enhancers/html5-entry-webpack-config-enhancer';
+import { piralInstanceWebpackConfigEnhancer } from '../enhancers/piral-instance-webpack-config-enhancer';
+import { hmrWebpackConfigEnhancer } from '../enhancers/hmr-webpack-config-enhancer';
+import { defaultWebpackConfig } from '../constants';
+import { extendConfig } from '../helpers';
+
+async function getConfig(
+  template: string,
+  dist: string,
+  externals: Array<string>,
+  develop = false,
+  sourceMaps = true,
+  contentHash = true,
+  minimize = true,
+  publicPath = '/',
+  hmr = 0,
+): Promise<DefaultConfiguration> {
+  const production = !develop;
+  const name = process.env.BUILD_PCKG_NAME;
+  const version = process.env.BUILD_PCKG_VERSION;
+
+  const enhance = (options: webpack.Configuration) =>
+    [
+      hmrWebpackConfigEnhancer({ port: hmr }),
+      html5EntryWebpackConfigEnhancer({}),
+      piralInstanceWebpackConfigEnhancer({
+        name,
+        version,
+        externals,
+        variables: getVariables(),
+      }),
+    ].reduceRight((acc, val) => val(acc), options);
+
+  const styleLoaders = getStyleLoaders(production);
+
+  return [
+    {
+      devtool: sourceMaps ? (develop ? 'cheap-module-source-map' : 'source-map') : false,
+
+      mode: develop ? 'development' : 'production',
+
+      entry: [template],
+
+      output: {
+        publicPath,
+        path: dist,
+        filename: `index.${contentHash ? '[contenthash:6].' : ''}js`,
+        chunkFilename: contentHash ? '[chunkhash:6].js' : undefined,
+      },
+
+      resolve: {
+        extensions,
+      },
+
+      module: {
+        rules: getRules(styleLoaders),
+      },
+
+      optimization: {
+        minimize,
+        minimizer: [
+          new TerserPlugin({
+            extractComments: false,
+            terserOptions: {
+              ie8: true,
+            },
+          }),
+          new CssMinimizerPlugin(),
+        ],
+      },
+
+      plugins: getPlugins([]),
+    },
+    enhance,
+  ];
+}
+
+const handler: PiralBuildHandler = {
+  async create(options) {
+    const { 'hmr-port': defaultHmrPort = 62123, config = defaultWebpackConfig } = options.args._;
+    const hmrPort = options.hmr ? await getFreePort(defaultHmrPort) : 0;
+    const otherConfigPath = resolve(options.root, config);
+    const baseConfig = await getConfig(
+      options.entryFiles,
+      options.outDir,
+      options.externals,
+      options.emulator,
+      options.sourceMaps,
+      options.contentHash,
+      options.minify,
+      options.publicUrl,
+      hmrPort,
+    );
+    const wpConfig = extendConfig(baseConfig, otherConfigPath, {
+      watch: options.watch,
+    });
+
+    return runWebpack(wpConfig, options.logLevel);
+  },
+};
+
+export const create = handler.create;

package/src/webpack-hot-middleware/LICENSE

@@ -0,0 +1,20 @@
+Copyright JS Foundation and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/src/webpack-hot-middleware/client-overlay.js

@@ -0,0 +1,99 @@
+/*eslint-env browser*/
+
+var clientOverlay = document.createElement('div');
+clientOverlay.id = 'webpack-hot-middleware-clientOverlay';
+var styles = {
+  background: 'rgba(0,0,0,0.85)',
+  color: '#e8e8e8',
+  lineHeight: '1.6',
+  whiteSpace: 'pre',
+  fontFamily: 'Menlo, Consolas, monospace',
+  fontSize: '13px',
+  position: 'fixed',
+  zIndex: 9999,
+  padding: '10px',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  overflow: 'auto',
+  dir: 'ltr',
+  textAlign: 'left',
+};
+
+var ansiHTML = require('ansi-html-community');
+var colors = {
+  reset: ['transparent', 'transparent'],
+  black: '181818',
+  red: 'ff3348',
+  green: '3fff4f',
+  yellow: 'ffd30e',
+  blue: '169be0',
+  magenta: 'f840b7',
+  cyan: '0ad8e9',
+  lightgrey: 'ebe7e3',
+  darkgrey: '6d7891',
+};
+
+var Entities = require('html-entities').AllHtmlEntities;
+var entities = new Entities();
+
+function showProblems(type, lines) {
+  clientOverlay.innerHTML = '';
+  lines.forEach(function(msg) {
+    msg = ansiHTML(entities.encode(msg));
+    var div = document.createElement('div');
+    div.style.marginBottom = '26px';
+    div.innerHTML = problemType(type) + ' in ' + msg;
+    clientOverlay.appendChild(div);
+  });
+  if (document.body) {
+    document.body.appendChild(clientOverlay);
+  }
+}
+
+function clear() {
+  if (document.body && clientOverlay.parentNode) {
+    document.body.removeChild(clientOverlay);
+  }
+}
+
+function problemType(type) {
+  var problemColors = {
+    errors: colors.red,
+    warnings: colors.yellow,
+  };
+  var color = problemColors[type] || colors.red;
+  return (
+    '<span style="background-color:#' +
+    color +
+    '; color:#000000; padding:3px 6px; border-radius: 4px;">' +
+    type.slice(0, -1).toUpperCase() +
+    '</span>'
+  );
+}
+
+module.exports = function(options) {
+  for (var color in options.ansiColors) {
+    if (color in colors) {
+      colors[color] = options.ansiColors[color];
+    }
+    ansiHTML.setColors(colors);
+  }
+
+  for (var style in options.overlayStyles) {
+    styles[style] = options.overlayStyles[style];
+  }
+
+  for (var key in styles) {
+    clientOverlay.style[key] = styles[key];
+  }
+
+  return {
+    showProblems: showProblems,
+    clear: clear,
+  };
+};
+
+module.exports.clear = clear;
+module.exports.showProblems = showProblems;