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

Perform rendering in a fully depth-first manner. #198

Merged
merged 1 commit into from
Nov 8, 2024

Conversation

theengineear
Copy link
Collaborator

Currently, we inject dom into our container and then update bindings. This causes all child “connectedCallback” calls to fire before we bind property / attribute / etc. updates.

That’s problematic because elements have no good way to observe initial deltas in the render tree. Said another way…

We used to do this:

  1. Create new nodes and inject new nodes into our container.
  2. Bind value updates to new nodes.

Now we do this:

  1. Create new nodes.
  2. Bind value updates to new nodes.
  3. Inject new nodes into our container.

Closes #197.

@theengineear theengineear force-pushed the fully-depth-first-render branch from 0253287 to 490a273 Compare November 8, 2024 02:47
@@ -1074,12 +1074,14 @@ class TemplateEngine {
const result = TemplateEngine.#resultMap.get(resultReference);
if (TemplateEngine.#cannotReuseResult(state.result, result)) {
TemplateEngine.#removeWithin(container);
state.result = result;
TemplateEngine.#ready(result);
TemplateEngine.#commit(result);
TemplateEngine.#inject(result, container);
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

The above three lines sum up the change neatly. Before, we readied / injected in one line… then committed the update. Now, we ready, commit, and lastly inject.

Yes, in the future we will change all these internal method names… not now though.

Currently, we inject dom into our container and then update bindings.
This causes all child “connectedCallback” calls to fire _before_ we
bind property / attribute / etc. updates.

That’s problematic because elements have no good way to observe initial
deltas in the render tree. Said another way…

We used to do this:
 1. Create new nodes and inject new nodes into our container.
 2. Bind value updates to new nodes.

Now we do this:
 1. Create new nodes.
 2. Bind value updates to new nodes.
 3. Inject new nodes into our container.

Closes #197.
@theengineear theengineear force-pushed the fully-depth-first-render branch from 490a273 to a1a3cd6 Compare November 8, 2024 03:17
@theengineear
Copy link
Collaborator Author

FYI, no obvious performance change here (which is to be expected). It’s really just changing the order in which we do the exact same things.

@theengineear
Copy link
Collaborator Author

@klebba — As a back-burner task, I try to take a moment every once and a while to kick the tires on the default template engine. Here’s an interesting bug I found / fixed today.

@theengineear theengineear merged commit 1ea15e3 into main Nov 8, 2024
1 check passed
@theengineear theengineear deleted the fully-depth-first-render branch November 8, 2024 18:38
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.

Default template engine connects children before binding updates.
1 participant