Shared CSS bundle configuration

[Manuel Mujica]

The current logic to write out the sharedBundles object of the slim loader (used to map bundle ids to an array of shared bundles that need to be loaded first), assumes that only javascript bundles are split by steal-tools.

steal-tools/lib/node/make_slim_config_node.js

Lines 79 to 103 in 3fe582c

 if (isSharedBundle) { 
 	// steal-tools generates bundles of "most shared" modules, like: 
 	// bundle :: { name: "bundle-a-b", bundles: ["bundle-a", "bundle-b"] ... } 
 	// That means "bundle-a-b" includes modules that are required by 
 	// bundle-a or bundle-b. Hence, bundle-a-b has to be loaded before 
 	// any of its "master" bundles. 
  
 	// This loop mutates `slimSharedBundlesConfig` to create a map of 
 	// "master" bundle ids (like bundle-a or bundle-b) to the shared 
 	// bundle id (bundle-a-b), this way the slim loader can load them 
 	// in the right order. 
 	bundle.bundles.forEach(function(masterName) { 
 		var masterBundle = findBundleByName(masterName); 
 		var entry = slimSharedBundlesConfig[masterBundle.uniqueId]; 
  
 		if (typeof entry === "undefined") { 
 			entry = []; 
 			slimSharedBundlesConfig[masterBundle.uniqueId] = entry; 
 		} 
  
 		if (bundle.name !== masterName) { 
 			entry.push(bundle.uniqueId); 
 		} 
 	}); 
 } 

It seems to me that the bundle data structure in insufficient to tell the buildType of the shared bundle, consider the following example taken from bitballs.

If you loop over the bundles steal-tools creates, you will find bundles/details-details-details which is a bundle of the most shared modules between

• "bitballs@0.4.1#components/game/details/details"
• "bitballs@0.4.1#components/player/details/details"
• "bitballs@0.4.1#components/tournament/details/details"

The slim loader needs to know on runtime that in order to load any of the bundles listed above, it has to load bundles/details-details-details first.

The problem is, taking the first name of the previous list:

• "bitballs@0.4.1#components/game/details/details"

how can we tell what's the uniqueId of that bundle? I can loop over all of the bundles and find the one that has it as its only bundle.bundles.

But if you look at the data below, there are two bundles that meet the criteria, a css and a javascript bundle. In this case the bundle to match is the javascript bundle and steal-tools currently filters out all css bundles when finding the uniqueId.

But this might cause problems for css shared bundles, we might need to decorate the bundles object with more info to accurately know what bundle the name in bundle.bundles refers to.

// bundles/details-details-details
{
  "size": 14155,
  "bundles": [
    "bitballs@0.4.1#components/game/details/details",
    "bitballs@0.4.1#components/player/details/details",
    "bitballs@0.4.1#components/tournament/details/details"
  ],
  nodes: [...]
  "buildType": "js",
  "name": "bundles/details-details-details",
  "hash": "31f336bd3f35b1ea7be8be6c47c416ff",
  "isDirty": true,
  "uniqueId": 293
}

// bundles/bitballs/components/game/details/details.css!
{
  "size": 2016,
  "bundles": [
    "bitballs@0.4.1#components/game/details/details"
  ],
  nodes: [...]
  "buildType": "css",
  "name": "bundles/bitballs/components/game/details/details.css!",
  "hash": "c8162ac088d16e46c9641ce3f3b986f9",
  "isDirty": true,
  "pluginName": "done-css@3.0.1#css",
  "uniqueId": 296
}

// bundles/bitballs/components/game/details/details
{
  "size": 90723,
  "bundles": [
    "bitballs@0.4.1#components/game/details/details"
  ],
  "buildType": "js",
  "name": "bundles/bitballs/components/game/details/details",
  "hash": "0daf99771371f794598f7669703560fe",
  "isDirty": true,
  "uniqueId": 295
}