Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add js.Batch #12641

Draft
wants to merge 10 commits into
base: master
Choose a base branch
from
Draft

Add js.Batch #12641

wants to merge 10 commits into from

Conversation

bep
Copy link
Member

@bep bep commented Jul 5, 2024 •
edited
Loading

OK, have pondered and going back and forth to find a builder API that would work in a distributed and concurrent setup that was also reasonably simple to understand/document. On a flight this morning, I think I got it.

There's some details omitted in the below, but an outline of the important parts would be:

{{ $batch := (js.Batch "mybatch" site.Home.Store) }}
{{ with $batch.Config }}
      {{ .SetOptions dict 
           "target" "es2015"
           "params" (dict "foo" "config")
      }}
{{ end }}
{{ with $batch.Group "main" }}
   {{ with .Runner "foo" }}
      {{ .SetOptions dict
          "resource" (resources.Get "myrunner.js")
          "params" (dict "foo" "myrunner")
    }}
    {{ with .Script "s1" }}
      {{ .SetOptions dict
          "resource" (resources.Get "s1.js")
           "export" "default"
          "importContext" (slice $ $otherCSS)
          "params" (dict "foo" "s1")
    }}
   {{ end }}
   {{ with .Script "s2" }}
      {{ .SetOptions dict
          "resource" (resources.Get "s2.js")
    }}
   {{ end }}
   {{ with .Instance "s1" "i1" }}
      {{ .SetOptions dict
           "params" (dict "title" "Instance 1")
    }}
   {{ end }}
{{ end }}

Some notes:

  • In the above with $batch.Group "main" will be a JS file with common code/dependencies with other groups split out into chunks.

Limitations

  • There is a import order issue with ESBuild's current implementation, see this issue
  • Except from with $batch.Group in the example above, all other with clauses will return nil This the first invocation for a given id.
  • The Runner construct is a little hard to explain without further examples, but the provided runner function will receive an object will all the script bindings in the group (exports). The use case I have in mind is JSX/TSX components (see example below), but I suspect there are other use cases.
import * as ReactDOM from 'react-dom/client';
import * as React from 'react';

export default function Run(scripts) {
	for (const script of scripts) {
		for (const instance of script.instances) {
			/* This is a convention in this project. */
			let elId = `${script.id}-${instance.id}`;
			let el = document.getElementById(elId);
			if (!el) {
				console.warn(`Element with id ${elId} not found`);
				continue;
			}
			const root = ReactDOM.createRoot(el);
			console.log('create', elId, 'with', instance.params);
			const reactEl = React.createElement(script.binding, instance.params);
			root.render(reactEl);
		}
	}
}

A batch will be built once, typically included in <head>:

{{ with (templates.Defer (dict "key" "global")) }}
      {{ $batch := (js.Batch "mybatch" site.Home.Store) }}
      {{ with $batch }}
        {{ with .Build }}
          {{ range .Groups }}
            {{ range . }}
              {{ $s := . }}
              {{ if eq $s.MediaType.SubType "css" }}
                <link href="{{ $s.RelPermalink }}" rel="stylesheet" />
              {{ else }}
                <script src="{{ $s.RelPermalink }}" type="module"></script>
              {{ end }}
            {{ end }}
          {{ end }}
        {{ end }}
 {{ end }}

Fixes #12626

@bep bep mentioned this pull request Jul 5, 2024
Open
@bep bep force-pushed the feat/jsbatch-12626 branch 3 times, most recently from 8b9f6b9 to cc76968 Compare July 6, 2024 10:20
@bep bep changed the title Add js.Bundle Add js.Batch Sep 13, 2024
@bep bep force-pushed the feat/jsbatch-12626 branch 4 times, most recently from 6d81258 to 2b2dbc2 Compare September 20, 2024 08:56
This was referenced Sep 20, 2024
Closed
Closed
@bep bep force-pushed the feat/jsbatch-12626 branch 5 times, most recently from d6f703d to f3e1915 Compare September 24, 2024 06:03
@bep bep mentioned this pull request Sep 24, 2024
Open
@bep bep force-pushed the feat/jsbatch-12626 branch 4 times, most recently from 752208d to a133d27 Compare October 5, 2024 08:55
@bep bep force-pushed the feat/jsbatch-12626 branch 7 times, most recently from dedc04d to c91b32b Compare October 13, 2024 08:36
@bep bep force-pushed the feat/jsbatch-12626 branch 11 times, most recently from 1a8c645 to 68f08ce Compare October 19, 2024 13:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Fernando2018s Fernando2018s Fernando2018s approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Add js.Batch
2 participants
@bep @Fernando2018s