integration with SSG?

[ckot]

Hi, my SPA is primarily showing/hiding/enabling/disabling bits of pre-generated html, which I'm generating with 11ty. Would jetpack be able to use my generated index.html as the template for including the bundle(s) or would I be better off just including references to them in the templates which build my index.html or do custom webpack stuff rather than jetpack?

[KidkArolis]

That's an interesting question.

You could indeed try to point to your 11ty generated index.html using the --html option. And in there, use a bit of handlebars syntax to include all the right assets:

{{#each assets.css}}
<link rel="stylesheet" href='{{{.}}}' />
{{/each}}

{{#if assets.runtime}}
<script type='text/javascript'>
{{{assets.runtime}}}
</script>
{{/if}}

{{#each assets.js}}
<script type='text/javascript' src='{{{.}}}' async></script>
{{/each}}

^ This is taken from the default template.

Alternatively, what jetpack does behind the scenes is it reads dist/manifest.json file to extract all the top level js/css to be included into the html, you could consider doing something similar:

jetpack/lib/options.js

Lines 207 to 251 in bd5e84e

	function assets ({ root, production, modern, publicPath }) {
	if (!production) {
	return { js: [modern ? '/assets/bundle.js' : '/assets/bundle.legacy.js'], css: [], other: [], runtime: null }
	}
	const js = []
	const css = []
	const other = []
	let runtime = null
	let manifest
	try {
	manifest = JSON.parse(fs.readFileSync(path.join(root, modern ? 'manifest.json' : 'manifest.legacy.json')))
	} catch (err) {
	if (err.code === 'ENOENT') {
	return { js, css, other, runtime }
	}
	throw err
	}
	Object.keys(manifest).forEach(asset => {
	if (asset.endsWith('.js') && asset.startsWith('runtime~')) {
	other.push(manifest[asset])
	try {
	runtime = String(fs.readFileSync(path.join(root, './' + manifest[asset].replace(publicPath, ''))))
	// Since we inline the runtime at the root index html, correct the sourceMappingURL
	runtime = runtime.replace('//# sourceMappingURL=', `//# sourceMappingURL=${publicPath}`)
	} catch (err) {
	if (err.code === 'ENOENT') {
	return { js, css, other, runtime }
	}
	}
	} else if (/^(bundle|vendor)[.~]?.*\.(js|css)$/.test(asset)) {
	if (asset.endsWith('.js')) {
	js.push(manifest[asset])
	} else {
	css.push(manifest[asset])
	}
	} else {
	other.push(manifest[asset])
	}
	})
	return { js, css, other, runtime }
	}

.

[ckot]

Cool beans. Glad to hear it's unlikely I'll need to do custom webpack stuff anymore. While it might take a while before I have time to convert from my custom stuff to using jetpack with one of the configurations you propose above, I'm closing this now. as I'm confident enough now, based on what you've shown, that I will be able to migrate to jetpack at some point soon.