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

package/src/enhancers/html5-entry-webpack-config-enhancer/index.ts

@@ -1,4 +1,5 @@
 import * as HtmlWebpackPlugin from 'html-webpack-plugin';
+import { Configuration } from 'webpack';
 import { load } from 'cheerio';
 import { readFileSync } from 'fs';
 import { join, dirname } from 'path';
@@ -6,27 +7,38 @@ import { getTemplates, extractParts, setEntries } from './helpers';
 
 export interface Html5EntryWebpackPluginOptions extends Omit<HtmlWebpackPlugin.Options, 'templateContent'> {}
 
-export const html5EntryWebpackConfigEnhancer = (options: Html5EntryWebpackPluginOptions) => (compilerOptions) => {
-  const entry = compilerOptions.entry;
-  const [template] = getTemplates(entry);
+export const html5EntryWebpackConfigEnhancer =
+  (options: Html5EntryWebpackPluginOptions) => (compilerOptions: Configuration) => {
+    const entry = compilerOptions.entry;
+    const [template] = getTemplates(entry);
 
-  if (template) {
-    const src = dirname(template);
-    const templateContent = load(readFileSync(template, 'utf8'));
-    const entries = extractParts(templateContent).map((entry) => join(src, entry));
-    const plugins = [
-      new HtmlWebpackPlugin({
-        ...options,
-        templateContent: templateContent.html(),
-      }),
-    ];
+    if (template) {
+      const src = dirname(template);
+      const html = readFileSync(template, 'utf8');
+      const templateContent = load(
+        // try to replace ejs tags, if any
+        html.replace(/<%=([\w\W]*?)%>/g, function (match, group) {
+          try {
+            return eval(group);
+          } catch {
+            return match;
+          }
+        }),
+      );
+      const entries = extractParts(templateContent).map((entry) => join(src, entry));
+      const plugins = [
+        new HtmlWebpackPlugin({
+          ...options,
+          templateContent: templateContent.html(),
+        }),
+      ];
 
-    if (!entries.length) throw new Error('Template entries expected to be not empty');
+      if (!entries.length) throw new Error('Template entries expected to be not empty');
 
-    setEntries(compilerOptions, template, entries as [string, ...string[]]);
+      setEntries(compilerOptions, template, entries as [string, ...Array<string>]);
 
-    compilerOptions.plugins = [...compilerOptions.plugins, ...plugins];
-  }
+      compilerOptions.plugins = [...compilerOptions.plugins, ...plugins];
+    }
 
-  return compilerOptions;
-};
+    return compilerOptions;
+  };

package/src/enhancers/pilet-webpack-config-enhancer/helpers.ts

@@ -1,3 +1,7 @@
+import { join } from 'path';
+import { SharedDependency } from 'piral-cli';
+import { Configuration } from 'webpack';
+
 export function getVariables(name: string, version: string, env: string): Record<string, string> {
   return {
     NODE_ENV: env,
@@ -18,3 +22,61 @@ export function getDefineVariables(variables: Record<string, string>) {
     return obj;
   }, {});
 }
+
+export function getDependencies(importmap: Array<SharedDependency>, compilerOptions: Configuration) {
+  const dependencies = {};
+  const { entry, externals } = compilerOptions;
+
+  if (typeof entry === 'object' && entry && Array.isArray(externals) && typeof externals[0] === 'object') {
+    for (const dep of importmap) {
+      dependencies[dep.id] = dep.ref;
+      externals[0][dep.name] = dep.requireId;
+
+      if (dep.type === 'local') {
+        entry[dep.ref.replace(/\.js$/, '')] = dep.entry;
+      }
+    }
+  }
+
+  return dependencies;
+}
+
+export function withSetPath(compilerOptions: Configuration) {
+  if (typeof compilerOptions.entry === 'object' && compilerOptions.entry) {
+    const setPath = join(__dirname, '..', '..', 'set-path');
+
+    if (Array.isArray(compilerOptions.entry)) {
+      compilerOptions.entry.unshift(setPath);
+    } else {
+      for (const key of Object.keys(compilerOptions.entry)) {
+        const entry = compilerOptions.entry[key];
+
+        if (Array.isArray(entry)) {
+          entry.unshift(setPath);
+        }
+      }
+    }
+  }
+}
+
+export function withExternals(compilerOptions: Configuration, externals: Array<string>) {
+  const current = compilerOptions.externals || [];
+  const arrayExternals = Array.isArray(current) ? current : [current];
+
+  const objectExternal = externals.reduce((external, dep) => {
+    external[dep] = dep;
+    return external;
+  }, {});
+
+  const newExternals = arrayExternals.filter(external => {
+    if (typeof external === 'object' && Object.keys(external).length) {
+      for (const dep in external) {
+        objectExternal[dep] = external[dep];
+      }
+      return false;
+    }
+    return true;
+  });
+
+  compilerOptions.externals = [objectExternal, ...newExternals];
+}

package/src/enhancers/pilet-webpack-config-enhancer/index.ts

@@ -1,23 +1,44 @@
-import { BannerPlugin, DefinePlugin, WebpackPluginInstance } from 'webpack';
-import { setEnvironment, getDefineVariables, getVariables } from './helpers';
+import * as SystemJSPublicPathWebpackPlugin from 'systemjs-webpack-interop/SystemJSPublicPathWebpackPlugin';
+import type { SharedDependency } from 'piral-cli';
+import { Configuration, BannerPlugin, DefinePlugin } from 'webpack';
+import {
+  setEnvironment,
+  getDefineVariables,
+  getVariables,
+  withSetPath,
+  withExternals,
+  getDependencies,
+} from './helpers';
+import StylesPlugin from '../../plugins/StylesPlugin';
+import SheetPlugin from '../../plugins/SheetPlugin';
+
+const piletCss = 'main.css';
 
 export interface PiletWebpackConfigEnhancerOptions {
   /**
    * The name of the pilet.
    */
   name: string;
+  /**
+   * The name of the entry module.
+   */
+  entry: string;
   /**
    * The version of the pilet.
    */
   version: string;
   /**
-   * The name of the Piral instance / app shell.
+   * The name of the Piral instances.
    */
-  piral: string;
+  piralInstances: Array<string>;
+  /**
+   * The name of the main output file.
+   */
+  filename: string;
   /**
    * The schema version. By default, v1 is used.
    */
-  schema?: 'v0' | 'v1' | 'none';
+  schema?: 'v0' | 'v1' | 'v2' | 'v3' | 'none';
   /**
    * The shared dependencies. By default, these are read from the
    * Piral instance.
@@ -27,73 +48,180 @@ export interface PiletWebpackConfigEnhancerOptions {
    * Additional environment variables to define.
    */
   variables?: Record<string, string>;
+  /**
+   * The shared dependencies to consider.
+   */
+  importmap: Array<SharedDependency>;
 }
 
-function getExternals(piral: string) {
-  const shellPkg = require(`${piral}/package.json`);
-  const piralExternals = shellPkg.pilets?.externals ?? [];
-  return [
-    ...piralExternals,
-    '@dbeining/react-atom',
-    '@libre/atom',
-    'history',
-    'react',
-    'react-dom',
-    'react-router',
-    'react-router-dom',
-    'tslib',
-    'path-to-regexp',
-  ];
+interface SchemaEnhancerOptions {
+  name: string;
+  entry: string;
+  file: string;
+  variables: Record<string, string>;
+  externals: Array<string>;
+  importmap: Array<SharedDependency>;
 }
 
-export const piletWebpackConfigEnhancer = (options: PiletWebpackConfigEnhancerOptions) => (compilerOptions) => {
-  const environment = process.env.NODE_ENV || 'development';
-  const { name, version, piral, externals = getExternals(piral), schema } = options;
+function piletVxWebpackConfigEnhancer(options: SchemaEnhancerOptions, compiler: Configuration) {
+  const { variables, externals } = options;
+
+  withSetPath(compiler);
+  setEnvironment(variables);
+  withExternals(compiler, externals);
+
+  compiler.plugins.push(new DefinePlugin(getDefineVariables(variables)));
+
+  return compiler;
+}
+
+function piletV0WebpackConfigEnhancer(options: SchemaEnhancerOptions, compiler: Configuration) {
+  const { name, variables, externals, file, entry } = options;
+  const shortName = name.replace(/\W/gi, '');
+  const jsonpFunction = `pr_${shortName}`;
+  const banner = `//@pilet v:0`;
+
+  withSetPath(compiler);
+  setEnvironment(variables);
+  withExternals(compiler, externals);
+
+  compiler.plugins.push(
+    new SheetPlugin(piletCss, name, entry),
+    new DefinePlugin(getDefineVariables(variables)),
+    new BannerPlugin({
+      banner,
+      entryOnly: true,
+      include: file,
+      raw: true,
+    }),
+  );
+  compiler.output.uniqueName = `${jsonpFunction}`;
+  compiler.output.library = name;
+  compiler.output.libraryTarget = 'umd';
+
+  return compiler;
+}
+
+function piletV1WebpackConfigEnhancer(options: SchemaEnhancerOptions, compiler: Configuration) {
+  const { name, variables, externals, file, entry } = options;
   const shortName = name.replace(/\W/gi, '');
   const jsonpFunction = `pr_${shortName}`;
-  const variables = {
-    ...getVariables(name, version, environment),
-    ...options.variables,
+  const banner = `//@pilet v:1(${jsonpFunction})`;
+
+  withSetPath(compiler);
+  setEnvironment(variables);
+  withExternals(compiler, externals);
+
+  compiler.plugins.push(
+    new SheetPlugin(piletCss, name, entry),
+    new DefinePlugin(getDefineVariables(variables)),
+    new BannerPlugin({
+      banner,
+      entryOnly: true,
+      include: file,
+      raw: true,
+    }),
+  );
+  compiler.output.uniqueName = `${jsonpFunction}`;
+  compiler.output.library = name;
+  compiler.output.libraryTarget = 'umd';
+  compiler.output.auxiliaryComment = {
+    commonjs2: `\nfunction define(d,k){(typeof document!=='undefined')&&(document.currentScript.app=k.apply(null,d.map(window.${jsonpFunction})));}define.amd=!0;`,
   };
-  const plugins: WebpackPluginInstance[] = [new DefinePlugin(getDefineVariables(variables))];
-
-  if (schema !== 'none') {
-    const bannerSuffix = schema ? `1(${jsonpFunction})` : `0`;
-
-    plugins.push(
-      new BannerPlugin({
-        banner: `//@pilet v:${bannerSuffix}`,
-        entryOnly: true,
-        include: /\.js$/,
-        raw: true,
-      }),
-    );
-  }
 
+  return compiler;
+}
+
+function piletV2WebpackConfigEnhancer(options: SchemaEnhancerOptions, compiler: Configuration) {
+  const { name, variables, externals, file, importmap, entry } = options;
+  const shortName = name.replace(/\W/gi, '');
+  const jsonpFunction = `pr_${shortName}`;
+  const plugins = [];
+
+  withExternals(compiler, externals);
   setEnvironment(variables);
 
-  compilerOptions.plugins = [...compilerOptions.plugins, ...plugins];
+  const dependencies = getDependencies(importmap, compiler);
+  const banner = `//@pilet v:2(webpackChunk${jsonpFunction},${JSON.stringify(dependencies)})`;
 
-  const current = compilerOptions.externals;
-  compilerOptions.output.uniqueName = `${jsonpFunction}`;
-  compilerOptions.output.library = name;
+  plugins.push(
+    new SheetPlugin(piletCss, name, entry),
+    new DefinePlugin(getDefineVariables(variables)),
+    new BannerPlugin({
+      banner,
+      entryOnly: true,
+      include: file,
+      raw: true,
+    }),
+    new SystemJSPublicPathWebpackPlugin(),
+  );
 
-  if (schema !== 'none') {
-    compilerOptions.output.libraryTarget = 'umd';
-  }
+  compiler.plugins = [...compiler.plugins, ...plugins];
+  compiler.output.uniqueName = `${jsonpFunction}`;
+  compiler.output.library = { type: 'system' };
 
-  if (schema === 'v1') {
-    const reset = environment !== 'production' ? `delete ${jsonpFunction}_chunks;` : '';
-    compilerOptions.output.auxiliaryComment = {
-      commonjs2: `\nfunction define(d,k){${reset}(typeof document!=='undefined')&&(document.currentScript.app=k.apply(null,d.map(window.${jsonpFunction})));}define.amd=!0;`,
-    } as any;
-  }
+  return compiler;
+}
+
+function piletV3WebpackConfigEnhancer(options: SchemaEnhancerOptions, compiler: Configuration) {
+  const { name, variables, externals, file, importmap, entry } = options;
+  const shortName = name.replace(/\W/gi, '');
+  const jsonpFunction = `pr_${shortName}`;
+  const plugins = [];
+
+  withExternals(compiler, externals);
+  setEnvironment(variables);
+
+  const dependencies = getDependencies(importmap, compiler);
+  const banner = `//@pilet v:3(webpackChunk${jsonpFunction},${JSON.stringify(dependencies)})`;
+
+  plugins.push(
+    new StylesPlugin(piletCss, entry),
+    new DefinePlugin(getDefineVariables(variables)),
+    new BannerPlugin({
+      banner,
+      entryOnly: true,
+      include: file,
+      raw: true,
+    }),
+  );
 
-  compilerOptions.externals = Array.isArray(current)
-    ? [...current, ...externals]
-    : current
-    ? [current, ...externals]
-    : externals;
+  compiler.output.publicPath = '';
+  compiler.output.chunkFormat = 'module';
+  compiler.plugins = [...compiler.plugins, ...plugins];
+  compiler.output.uniqueName = `${jsonpFunction}`;
+  compiler.output.library = { type: 'system' };
+  compiler.target = 'node';
 
-  return compilerOptions;
+  return compiler;
+}
+
+export const piletWebpackConfigEnhancer = (details: PiletWebpackConfigEnhancerOptions) => (compiler: Configuration) => {
+  const { externals = [], schema, importmap } = details;
+  const environment = process.env.NODE_ENV || 'development';
+  const options: SchemaEnhancerOptions = {
+    entry: details.entry,
+    externals,
+    file: details.filename,
+    name: details.name,
+    importmap,
+    variables: {
+      ...getVariables(details.name, details.version, environment),
+      ...details.variables,
+    },
+  };
+
+  switch (schema) {
+    case 'v0':
+      return piletV0WebpackConfigEnhancer(options, compiler);
+    case 'v1':
+      return piletV1WebpackConfigEnhancer(options, compiler);
+    case 'v2':
+      return piletV2WebpackConfigEnhancer(options, compiler);
+    case 'v3':
+      return piletV3WebpackConfigEnhancer(options, compiler);
+    case 'none':
+    default:
+      return piletVxWebpackConfigEnhancer(options, compiler);
+  }
 };

package/src/enhancers/piral-instance-webpack-config-enhancer/helpers.ts

@@ -11,6 +11,8 @@ export function getVariables(
     BUILD_PCKG_VERSION: version,
     BUILD_PCKG_NAME: name,
     SHARED_DEPENDENCIES: externals.join(','),
+    DEBUG_PIRAL: '',
+    DEBUG_PILET: '',
   };
 }
 

package/src/enhancers/piral-instance-webpack-config-enhancer/index.ts

@@ -1,4 +1,4 @@
-import { DefinePlugin } from 'webpack';
+import { Configuration, DefinePlugin } from 'webpack';
 import { setEnvironment, getDefineVariables, getVariables } from './helpers';
 
 export interface PiralInstanceWebpackPluginOptions {
@@ -6,26 +6,22 @@ export interface PiralInstanceWebpackPluginOptions {
   version: string;
   externals: Array<string>;
   variables?: Record<string, boolean | string>;
-  debug?: boolean | string;
-  emulator?: boolean | string;
 }
 
-export const piralInstanceWebpackConfigEnhancer = (options: PiralInstanceWebpackPluginOptions) => (compilerOptions) => {
-  const { name, version, debug, emulator, externals } = options;
-  const environment = process.env.NODE_ENV || 'development';
-  const variables = {
-    ...getVariables(name, version, externals, environment),
-    ...options.variables,
-  };
-
-  variables.DEBUG_PIRAL = debug === true ? '1.0' : debug;
-  variables.DEBUG_PILET = emulator === true ? '/$pilet-api' : emulator;
+export const piralInstanceWebpackConfigEnhancer =
+  (options: PiralInstanceWebpackPluginOptions) => (compilerOptions: Configuration) => {
+    const { name, version, externals } = options;
+    const environment = process.env.NODE_ENV || 'development';
+    const variables = {
+      ...getVariables(name, version, externals, environment),
+      ...options.variables,
+    };
 
-  const plugins = [new DefinePlugin(getDefineVariables(variables))];
+    const plugins = [new DefinePlugin(getDefineVariables(variables))];
 
-  setEnvironment(variables);
+    setEnvironment(variables);
 
-  compilerOptions.plugins = [...(compilerOptions.plugins || []), ...plugins];
+    compilerOptions.plugins = [...(compilerOptions.plugins || []), ...plugins];
 
-  return compilerOptions;
-};
+    return compilerOptions;
+  };

package/src/helpers.ts

@@ -1,29 +1,39 @@
 import { existsSync } from 'fs';
 import { Configuration } from 'webpack';
+import { DefaultConfiguration } from './webpack/common';
 
 export function extendConfig(
-  webPackConfig: Configuration,
+  [webPackConfig, enhancer]: DefaultConfiguration,
   otherConfigPath: string,
   overrides: Configuration = {},
 ): Configuration {
+  const original = webPackConfig;
+
   if (existsSync(otherConfigPath)) {
     const otherConfig = require(otherConfigPath);
 
     if (typeof otherConfig === 'function') {
       webPackConfig = otherConfig(webPackConfig);
     } else if (typeof otherConfig === 'object') {
-      return {
+      webPackConfig = {
         ...webPackConfig,
         ...otherConfig,
-        ...overrides,
       };
     } else {
       console.warn(`Did not recognize the export from "${otherConfigPath}". Skipping.`);
     }
   }
 
-  return {
+  ['entry', 'output', 'optimization'].forEach((s) => {
+    if (original[s] !== webPackConfig[s]) {
+      console.warn(
+        `You've overwritten the "${s}" section of the Webpack config. Make sure you know what you are doing.`,
+      );
+    }
+  });
+
+  return enhancer({
     ...webPackConfig,
     ...overrides,
-  };
+  });
 }

package/src/index.ts

@@ -2,7 +2,7 @@ import * as actions from './actions';
 import { CliPlugin } from 'piral-cli';
 
 const plugin: CliPlugin = (cli) => {
-  cli.withBundler('webpack', actions);
+  cli.withBundler('webpack5', actions);
 };
 
 module.exports = plugin;

package/src/plugins/SheetLoader.ts

@@ -0,0 +1,16 @@
+import { getOptions } from 'loader-utils';
+
+export default function sheetLoader() {
+  const { cssName, piletName } = getOptions(this);
+  const debug = process.env.NODE_ENV === 'development';
+  return [
+    `var d=document`,
+    `var u=__webpack_public_path__+${JSON.stringify(cssName)}`,
+    `var e=d.createElement("link")`,
+    `e.setAttribute('data-origin', ${JSON.stringify(piletName)})`,
+    `e.type="text/css"`,
+    `e.rel="stylesheet"`,
+    `e.href=${debug ? 'u+"?_="+Math.random()' : 'u'}`,
+    `d.head.appendChild(e)`,
+  ].join(';');
+}

package/src/plugins/SheetPlugin.ts

@@ -0,0 +1,34 @@
+import { resolve } from 'path';
+import { Compilation } from 'webpack';
+import { RawSource } from 'webpack-sources';
+
+export default class SheetPlugin {
+  private loaderPath: string;
+
+  constructor(private cssName: string, piletName: string, private entryName: string) {
+    this.loaderPath = resolve(__dirname, `SheetLoader?cssName=${cssName}&piletName=${piletName}!`);
+  }
+
+  apply(compiler) {
+    const { entry } = compiler.options;
+
+    entry[this.entryName].import = [this.loaderPath, ...entry[this.entryName].import];
+
+    compiler.hooks.compilation.tap('SheetPlugin', (compilation: Compilation) => {
+      if (!compilation.compiler.parentCompilation) {
+        compilation.hooks.processAssets.tap(
+          {
+            name: 'SheetPlugin',
+            stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
+          },
+          (assets) => {
+            if (!assets[this.cssName]) {
+              const source = new RawSource('');
+              compilation.emitAsset(this.cssName, source);
+            }
+          },
+        );
+      }
+    });
+  }
+}

package/src/plugins/StylesLoader.ts

@@ -0,0 +1,11 @@
+import { getOptions } from 'loader-utils';
+
+export default function stylesLoader() {
+  const { cssName, entries } = getOptions(this);
+  const debug = process.env.NODE_ENV === 'development';
+  return [
+    `const u = ${JSON.stringify(cssName)}`,
+    `export const styles = [${debug ? 'u+"?_="+Math.random()' : 'u'}]`,
+    ...entries.split(',').map((entry) => `export * from ${JSON.stringify(entry)}`),
+  ].join(';');
+}

package/src/plugins/StylesPlugin.ts

@@ -0,0 +1,35 @@
+import { resolve } from 'path';
+import { Compilation } from 'webpack';
+import { RawSource } from 'webpack-sources';
+
+export default class StylesPlugin {
+  constructor(private cssName: string, private entryName: string) {}
+
+  apply(compiler) {
+    const { entry } = compiler.options;
+
+    const entries = entry[this.entryName].import;
+    const query = `cssName=${this.cssName}&entries=${entries.join(',')}!`;
+    const setPath = resolve(__dirname, '..', 'set-path');
+    const loaderPath = resolve(__dirname, `StylesLoader?${query}`);
+
+    entry[this.entryName].import = [setPath, loaderPath];
+
+    compiler.hooks.compilation.tap('StylesPlugin', (compilation: Compilation) => {
+      if (!compilation.compiler.parentCompilation) {
+        compilation.hooks.processAssets.tap(
+          {
+            name: 'StylesPlugin',
+            stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
+          },
+          (assets) => {
+            if (!assets[this.cssName]) {
+              const source = new RawSource('');
+              compilation.emitAsset(this.cssName, source);
+            }
+          },
+        );
+      }
+    });
+  }
+}