Refactored for the new piral-cli and piral-cli-webpack

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Piral Webpack Tools Changelog
 
+## 0.6.0 (tbd)
+
+* Moved `piral-cli-webpack` to the Piral repository
+* The new `piral-cli-webpack` is compatible `piral-cli` v0.11.6 onwards
+* Improved the API of `pilet-webpack-plugin` (breaking)
+* Improved the API of `piral-instance-webpack-plugin` (breaking)
+
 ## 0.5.5 (June 9, 2020)
 
 * Support IE11 (#20)

README.md

@@ -8,13 +8,19 @@ This repository contains the packages used to enable Webpack support in Piral. W
 
 ## Options
 
-The easiest option is to use the `piral-cli` and install another dev dependency `pilet-webpack-plugin`.
+### Using the Piral CLI
+
+The easiest option is to use the `piral-cli` and install another dev dependency `piral-cli-webpack`.
 
 ```sh
-npm i pilet-webpack-plugin --save-dev
+npm i piral-cli-webpack --save-dev
 ```
 
-Now new commands such as `piral build-wp` or `pilet build-wp` can be used. For details, see the [plugin's README](./packages/pilet-webpack-plugin/README.md).
+The existing build, debug, and publish commands will now just work with Webpack.
+
+For details, see the [plugin's README](./packages/pilet-webpack-plugin/README.md).
+
+### Using Webpack Directly
 
 If you want to fully configure Webpack yourself you can just leverage either
 
@@ -32,16 +38,6 @@ for pilets.
 
 There are also standalone plugins for things such as support for `.codegen` files or using HTML as an entry module in Webpack.
 
-## Further Reading
-
-For development:
-- https://github.com/adierkens/webpack-inject-plugin/blob/master/src/main.ts
-- https://webpack.js.org/contribute/plugin-patterns/
-
-For improved config:
-- https://github.com/TypeStrong/fork-ts-checker-webpack-plugin
-- https://github.com/namics/webpack-config-plugins/blob/master/packages/asset-config-webpack-plugin/src/AssetConfigWebpackPlugin.js
-
 ## License
 
 The code here is released using the MIT license. For more information see the [LICENSE file](LICENSE).

packages/html5-entry-webpack-plugin/README.md

@@ -17,8 +17,8 @@ The `html5-entry-webpack-plugin` allows using an HTML file as an entry module. I
 
 To begin, you'll need to install `html5-entry-webpack-plugin`:
 
-```console
-$ npm install html5-entry-webpack-plugin --save-dev
+```sh
+npm install html5-entry-webpack-plugin --save-dev
 ```
 
 Use an HTML file with all the necessary references:

packages/parcel-codegen-loader/README.md

@@ -19,8 +19,8 @@ It follows pretty much the [parcel-plugin-codegen](https://www.npmjs.com/package
 
 To begin, you'll need to install `parcel-codegen-loader`:
 
-```console
-$ npm install parcel-codegen-loader --save-dev
+```sh
+npm install parcel-codegen-loader --save-dev
 ```
 
 Import (or `require`) the target file(s) in one of the bundle's files:

packages/pilet-webpack-plugin/README.md

@@ -17,8 +17,8 @@ The `pilet-webpack-plugin` helps you to build pilets using Webpack.
 
 To begin, you'll need to install `pilet-webpack-plugin`:
 
-```console
-$ npm install pilet-webpack-plugin --save-dev
+```sh
+npm install pilet-webpack-plugin --save-dev
 ```
 
 Then add the plugin to your `webpack` config. For example:
@@ -30,7 +30,13 @@ const { PiletWebpackPlugin } = require('pilet-webpack-plugin');
 const piletPkg = require('./package.json');
 
 module.exports = {
-  plugins: [new PiletWebpackPlugin(piletPkg)],
+  plugins: [
+    new PiletWebpackPlugin({
+      name: piletPkg.name,
+      version: piletPkg.version,
+      piral: piletPkg.piral.name,
+    }),
+  ],
 };
 ```
 
@@ -50,7 +56,10 @@ const piletPkg = require('./package.json');
 
 module.exports = {
   plugins: [
-    new PiletWebpackPlugin(piletPkg, {
+    new PiletWebpackPlugin({
+      name: piletPkg.name,
+      version: piletPkg.version,
+      piral: piletPkg.piral.name,
       variables: {
         PIRAL_CLI_VERSION: require('piral-cli/package.json').version,
       },

packages/pilet-webpack-plugin/src/helpers.ts

@@ -1,29 +1,15 @@
-import { existsSync, readFileSync, writeFileSync } from 'fs';
-
-export function wrapPilet(file: string, prName: string) {
-  if (existsSync(file)) {
-    const template = readFileSync(file, 'utf8');
-    const content = template.replace(
-      /^\!function\s?\(e,\s?t\)\s?\{/m,
-      `!function(e,t){function define(d,k){(typeof document!=='undefined')&&(document.currentScript.app=k.apply(null,d.map(window.${prName})));}define.amd=!0;`,
-    );
-
-    writeFileSync(file, content);
-  }
-}
-
-export function getVariables(piletPkg: any, env: string): Record<string, string> {
+export function getVariables(name: string, version: string, env: string): Record<string, string> {
   return {
     NODE_ENV: env,
     BUILD_TIME: new Date().toDateString(),
     BUILD_TIME_FULL: new Date().toISOString(),
-    BUILD_PCKG_VERSION: piletPkg.version,
-    BUILD_PCKG_NAME: piletPkg.name,
+    BUILD_PCKG_VERSION: version,
+    BUILD_PCKG_NAME: name,
   };
 }
 
 export function setEnvironment(variables: Record<string, string>) {
-  Object.keys(variables).forEach((key) => (process.env[key] = variables[key]));
+  Object.keys(variables).forEach(key => (process.env[key] = variables[key]));
 }
 
 export function getDefineVariables(variables: Record<string, string>) {

packages/pilet-webpack-plugin/src/index.ts

@@ -1,33 +1,69 @@
-import { resolve } from 'path';
 import { Plugin, Compiler, BannerPlugin, DefinePlugin } from 'webpack';
-import { wrapPilet, setEnvironment, getDefineVariables, getVariables } from './helpers';
+import { setEnvironment, getDefineVariables, getVariables } from './helpers';
 
 const pluginName = 'PiletWebpackPlugin';
 
 export interface PiletWebpackPluginOptions {
+  /**
+   * The name of the pilet.
+   */
+  name: string;
+  /**
+   * The version of the pilet.
+   */
+  version: string;
+  /**
+   * The name of the Piral instance / app shell.
+   */
+  piral: string;
+  /**
+   * The schema version. By default, v1 is used.
+   */
+  schema?: 'v0' | 'v1';
+  /**
+   * The shared dependencies. By default, these are read from the
+   * Piral instance.
+   */
+  externals?: Array<string>;
+  /**
+   * Additional environment variables to define.
+   */
   variables?: Record<string, string>;
 }
 
+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',
+  ];
+}
+
 export class PiletWebpackPlugin implements Plugin {
-  constructor(private piletPackage: any, private options: PiletWebpackPluginOptions = {}) {}
+  constructor(private options: PiletWebpackPluginOptions) {}
 
   apply(compiler: Compiler) {
-    const piletPkg = this.piletPackage;
-    const shellPkg = require(`${piletPkg.piral.name}/package.json`);
-    const shortName = piletPkg.name.replace(/\W/gi, '');
-    const jsonpFunction = `pr_${shortName}`;
     const environment = process.env.NODE_ENV || 'development';
-    const piralExternals = shellPkg.pilets?.externals ?? [];
-    const piletExternals = piletPkg.externals ?? [];
-    const peerDependencies = Object.keys(piletPkg.peerDependencies ?? {});
-    const externals = [...piralExternals, ...piletExternals, ...peerDependencies];
+    const { name, version, piral, externals = getExternals(piral), schema } = this.options;
+    const shortName = name.replace(/\W/gi, '');
+    const jsonpFunction = `pr_${shortName}`;
+    const bannerSuffix = schema ? `1(${jsonpFunction})` : `0`;
     const variables = {
-      ...getVariables(piletPkg, environment),
+      ...getVariables(name, version, environment),
       ...this.options.variables,
     };
     const plugins = [
       new BannerPlugin({
-        banner: `//@pilet v:1(${jsonpFunction})`,
+        banner: `//@pilet v:${bannerSuffix}`,
         entryOnly: true,
         raw: true,
       }),
@@ -38,26 +74,18 @@ export class PiletWebpackPlugin implements Plugin {
 
     plugins.forEach(plugin => plugin.apply(compiler));
 
-    compiler.hooks.done.tap(pluginName, statsData => {
-      if (!statsData.hasErrors()) {
-        const { path, filename } = compiler.options.output;
-
-        if (typeof filename === 'string') {
-          const file = resolve(path, filename);
-          wrapPilet(file, jsonpFunction);
-        } else {
-          const [main] = statsData.compilation.chunks.filter(m => m.entryModule).map(m => m.files[0]);
-          const file = resolve(compiler.outputPath, main);
-          wrapPilet(file, jsonpFunction);
-        }
-      }
-    });
-
     compiler.hooks.afterEnvironment.tap(pluginName, () => {
       const current = compiler.options.externals;
       compiler.options.output.jsonpFunction = `${jsonpFunction}_chunks`;
       compiler.options.output.libraryTarget = 'umd';
-      compiler.options.output.library = piletPkg.name;
+      compiler.options.output.library = name;
+
+      if (schema === 'v1') {
+        compiler.options.output.auxiliaryComment = {
+          commonjs2: `\nfunction define(d,k){(typeof document!=='undefined')&&(document.currentScript.app=k.apply(null,d.map(window.${jsonpFunction})));}define.amd=!0;`,
+        } as any;
+      }
+
       compiler.options.externals = Array.isArray(current)
         ? [...current, ...externals]
         : current