Skip to content

Add js.Batch #12626

@bep

Description

@bep

Naming is hard, but the entry point to this new feature is js.Bundle. We already have js.Build, which also allow bundling ... Yea, we should look for a different name.

There are some aspects to this new feature:

  • Multiple main entry points (e.g. home.js, mysection.js).
  • Multiple component and component instances with a user provided callback script (e.g. JSX components from shortcodes).
  • Bundling and code splitting (chunking). This is a big thing if you have many small scripts that shares some common and big dependencies (e.g. React).

Like with js.Build and others, these bundles are built in parallel during render, but for this we need some improved synchronisation mechanisms.

In the examples below, all the methods prefixed Use* acquire a lock and needs to be closed when done. This would probably be too hard to teach the common Hugo user, so I have made it so if you use as the argument to with, it will automatically be closed when with closes.

// Naming convention used in the callback script set below.
// One use case: Render React components (e.g. JSX scripts) added in e.g. shortcodes.
<div "batch1-instance1"></div>


# Get or create a new bundle with the given ID and store it in the given store/scope.
$bundle := js.Bundle "mybundle" hugo.Store # or site.Store, $.Store (page), newScratch

// Will get or create a new entry point script with the given ID.
//  Think about this as logically-independent groups of code, e.g. a main thread and a worker thread, or code for
// the editor page or a settings page.
with $bundle.UseScriptOne ID
	.SetResource
	.SetInstance # Params

// Get or create a new script batcher.
// This allows code to be batched and passed to a user provided call back.
// One use case: Render React components (e.g. JSX scripts) added in e.g. shortcodes.
with $bundle.UseScriptMany ID
	.SetCallback
	with .UseItem ID
		.SetResource
		.AddInstance # Params

$m := $bundle.Build

with index $m "main"
   <src .RelPermalink>

with index $m "batch1"
   <src .RelPermalink>

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions