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.

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

Blocking playground renderer #16

Merged
merged 4 commits into from
Nov 12, 2020
Merged

Blocking playground renderer #16

merged 4 commits into from
Nov 12, 2020

Conversation

aomarks
Copy link
Member

@aomarks aomarks commented Oct 24, 2020

Neither markdown code fences, nor shortcodes in HTML files, support async rendering, so this makes them work by rendering in a blocking fashion. A little absurd maybe?

  • Adds a blocking version of the playground renderer that uses a worker thread, synchronized using Atomics.wait.
  • Replaces all markdown code fences and the {% highlight %} shortcode with this renderer.
  • Updates the existing renderer to use a single element on a single page, updated by setting properties and waiting for updateComplete, instead of spawning a new tab for each render (way faster).
  • Site build time is still around 3 seconds, doesn't seem to have changed much.

`(${shared.html.length} < ${html.length} bytes)`
);
}
shared.length[0] = length;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is .length here? It reads oddly to see that name indexed like this.

type: 'shutdown';
}

export class BlockingRenderer {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add comment


export type WorkerMessage = Handshake | Render | Shutdown;

export interface Handshake {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: add Message suffix

export interface Handshake {
type: 'handshake';
html: Uint8Array;
length: Int32Array;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see, about my question about the length name... Maybe name these like lengthBuffer or lengthData to make it more clear?

@@ -37,7 +37,7 @@ export class Reaper {

private endKeepAlive() {
this.pending--;
if (this.pending == 0) {
if (this.pending === 0) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fyi, 11ty recently added beforeBuild and afterBuild events: https://www.11ty.dev/docs/events/

@aomarks aomarks merged commit 8aebf62 into master Nov 12, 2020
@aomarks aomarks deleted the blocking-render branch November 12, 2020 00:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants