jmaicher/1.template.html

## 1.template.html
<html>
<head>
    <!-- ... -->
    <script>
        // stub implementation in case the shell fragment fails to resolve
        define("shell", function() {  return stub;  });
    </script>
</head>
<body>
    <fragment src="shell.example.com"></fragment>
    <fragment src="foo.example.com"></fragment>
</body>
</html>

## 2.shell.fragment.html
<div id="shell">
    <header><!-- ... --></header>
    <aside><!-- ... --></aside>
</div>

<script>
require.undef('shell');
// Note that the bundle url is dynamically injected from the asset manifest
define("shell", ["/shell.bundle.js"], function(s) { return s.api });
</script>

## 3.shell.entry.js
var api;

// will be called by tailor on pipe.end
export default (element) => {
    let view = new ShellView(element);
    api = new ShellApi(view);
}

export { api };

## 4.foo.entry.js
// marked as external in webpack config
const shell = require('shell');

// will be called by tailor on pipe.end
export default (element) => {
    console.log(shell); // => ShellApi
}
	<html>
	<head>
	<!-- ... -->
	<script>
	// stub implementation in case the shell fragment fails to resolve
	define("shell", function() { return stub; });
	</script>
	</head>
	<body>
	<fragment src="shell.example.com"></fragment>
	<fragment src="foo.example.com"></fragment>
	</body>
	</html>
	<div id="shell">
	<header><!-- ... --></header>
	<aside><!-- ... --></aside>
	</div>

	<script>
	require.undef('shell');
	// Note that the bundle url is dynamically injected from the asset manifest
	define("shell", ["/shell.bundle.js"], function(s) { return s.api });
	</script>
	var api;

	// will be called by tailor on pipe.end
	export default (element) => {
	let view = new ShellView(element);
	api = new ShellApi(view);
	}

	export { api };
	// marked as external in webpack config
	const shell = require('shell');

	// will be called by tailor on pipe.end
	export default (element) => {
	console.log(shell); // => ShellApi
	}