(#35) add code splitting on page boundaries

package.json

@@ -31,7 +31,7 @@
   ],
   "dependencies": {
     "json-loader": "^0.5.4",
-    "laxar-tooling": "^2.0.0",
+    "laxar-tooling": "^2.0.3",
     "loader-utils": "^0.2.15",
     "raw-loader": "^0.5.1"
   },

src/index.js

@@ -57,6 +57,7 @@ module.exports = function( source /*, map */ ) {
       } ), () => DEFAULT_CONFIG )
       .then( config => {
          const paths = config.paths;
+         const split = [];
          let promise;
 
          if( query.entries ) {
@@ -79,6 +80,18 @@ module.exports = function( source /*, map */ ) {
             promise = Promise.resolve( loaderContext.exec( source, loaderContext.resource ) );
          }
 
+         if( query.split ) {
+            promise = promise
+               .then( artifacts => {
+                  split.push( ...artifacts.pages );
+                  artifacts.pages = [];
+                  artifacts.widgets = [];
+                  artifacts.controls = [];
+                  artifacts.layouts = [];
+                  return artifacts;
+               } );
+         }
+
          if( query.debug ) {
             const debugInfoListing = laxarTooling.debugInfoListing.create( {
                log
@@ -101,10 +114,34 @@ module.exports = function( source /*, map */ ) {
                .then( artifactListing.buildArtifacts );
          }
 
+         promise = promise
+            .then( laxarTooling.serialize );
+
+         if( query.split ) {
+            promise = promise
+               .then( code => {
+                  const proxy = split.map( artifact => {
+                     const entry = { [ artifact.category ]: artifact.refs };
+                     const request = loaderUtils.stringifyRequest( loaderContext, recursiveQuery( entry ) );
+                     return `proxy( artifacts, ${JSON.stringify( entry )},
+                        () => import( /* webpackChunkName: "${artifact.name}" */ ${request} ) );`;
+                  } );
+
+                  return `
+                     import { proxy } from '${__dirname}/split-base';
+                     const artifacts = ${code};
+                     ${proxy.join('\n')}
+                     export default artifacts;
+                  `;
+               } );
+         }
+         else {
+            promise = promise
+               .then( code => `module.exports = ${code};` );
+         }
+
          return promise;
       } )
-      .then( laxarTooling.serialize )
-      .then( code => `module.exports = ${code};` )
       .then(
          result => done( null, result ),
          error => done( error )
@@ -167,6 +204,22 @@ module.exports = function( source /*, map */ ) {
          } );
       } );
    }
+
+   function recursiveQuery( entry ) {
+      const dummy = require.resolve( '../dummy' );
+      const mode = query.debugInfo ? 'debug-info' : 'artifacts';
+
+      const themes = [
+         ...ensureArray( query.theme ),
+         ...ensureArray( query.themes )
+      ];
+
+      const entries = [].concat.apply(
+         themes.map( theme => `themes[]=${theme}` ),
+         Object.keys( entry )
+            .map( category => entry[ category ].map( ref => `${category}[]=${ref}` ) ) );
+      return `${__filename}?entries&${mode}&${entries.join('&')}!${dummy}`;
+   }
 };
 
 function buildEntries( query ) {

src/split-base.js

@@ -0,0 +1,83 @@
+/**
+ * Copyright 2018 aixigo AG
+ * Released under the MIT license.
+ * http://laxarjs.org/license
+ */
+'use strict';
+
+export function proxy( target, artifacts, fn ) {
+   let promise;
+
+   function validate( source ) {
+      Object.keys( artifacts )
+         .forEach( bucket => {
+            console.log( bucket, artifacts[ bucket ], source );
+            const missing = artifacts[ bucket ]
+               .filter( ref => !source.aliases[ bucket ].hasOwnProperty( ref ) );
+
+            if( missing.length > 0 ) {
+               throw new Error( `Bundle is missing ${bucket} ${missing.map(m => `'${m}'`).join(', ')}` );
+            }
+         } );
+      return source;
+   }
+
+   function inject() {
+      if( !promise ) {
+         promise = fn()
+            .then( validate )
+            .then( source => merge( target, source ) );
+      }
+      return promise;
+   }
+
+   Object.keys( artifacts )
+      .forEach( bucket => {
+         artifacts[ bucket ].forEach( ref => {
+            let index;
+            Object.defineProperty( target.aliases[ bucket ], ref, {
+               get() {
+                  if( index === undefined ) {
+                     index = target[ bucket ].length;
+                     target[ bucket ][ index ] = inject()
+                        .then( target => target[ bucket ][ index ] );
+                  }
+                  return index;
+               },
+               set( value ) {
+                  if( value !== index ) {
+                     throw new Error( `Attempted to modify aliased index for ${ref}` );
+                  }
+                  return index;
+               }
+            } );
+         } );
+      } );
+}
+
+export function merge( target, source ) {
+   for( const bucket in source.aliases ) {
+      if( source.aliases.hasOwnProperty( bucket ) ) {
+         const aliases = source.aliases[ bucket ];
+         const list = source[ bucket ];
+
+         for( const ref in aliases ) {
+            if( aliases.hasOwnProperty( ref ) ) {
+               const index = aliases[ ref ];
+               const artifact = list[ index ];
+               insert( target, bucket, ref, artifact );
+            }
+         }
+      }
+   }
+   return target;
+}
+
+export function insert( target, bucket, ref, artifact ) {
+   const aliases = target.aliases[ bucket ] = ( target.aliases[ bucket ] || {} );
+   const list = target[ bucket ] = ( target[ bucket ] || [] );
+   const index = aliases[ ref ] = aliases.hasOwnProperty( ref ) ? aliases[ ref ] : list.length;
+   list[ index ] = artifact;
+   return index;
+}
+