Motivation

Custom elements preview providers need to hydrate when using JS-frameworks like Nuxt. For good canvas integration, we need to be able to drop hydration markers after hydrating. See parent ticket for more context.

Steps to reproduce

Proposed resolution

Remove hydration markers in nuxt preview provider. Come-up with a generic naming everyone can implement.

Issue fork custom_elements-3584502

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Issue fork canvas_extjs-3584502

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

fago created an issue. See original summary.

fago’s picture

fago
Primary language German
Location Vienna
commented
Project: Canvas External JavaScript Components » Custom Elements
Version: 1.0.x-dev » 3.3.6

fago opened merge request !175

fago’s picture

fago
Primary language German
Location Vienna
commented
Status: Active » Needs review

Relevant fix is the MR to custom elements.

fago’s picture

fago
Primary language German
Location Vienna
commented

This works good. But I noted we have a few perf optimizations todo also, atm we cause some unnecessary re-render in browsers by not-hidden divs, let's try to improve:

Suggested change:
1. display: contents on nuxt-preview-container - wrapper becomes layout-transparent, Vue components are direct grid/flex items
2. display: none on slot containers - completely absent from layout tree, zero reflow cost when removed

Will file another MR for that.

  • fago committed 84483567 on 3.x 
    improve: #3584502 Support removal of preview hydration markers (Nuxt...

fago opened merge request !176

fago’s picture

fago
Primary language German
Location Vienna
commented

attached is another MR which improves loading performance. much better, remaining bottle neck is using the nuxt dev server if done so:
Here is some measurement of reloads in canvas:

Production build: 167ms total. Nuxt ready at 159ms vs 627ms in dev mode - 4x faster bootstrap.

┌─────────────────────┬───────┬────────┐
│ │ Dev │ Prod │
├─────────────────────┼───────┼────────┤
│ App-loader injected │ 97ms │ 81ms │
├─────────────────────┼───────┼────────┤
│ Nuxt ready │ 627ms │ 159ms │
├─────────────────────┼───────┼────────┤
│ All rendered │ 647ms │ ~170ms │
├─────────────────────┼───────┼────────┤
│ Total │ 647ms │ ~170ms │
└─────────────────────┴───────┴────────┘

  • fago committed 6d2d434c on 3.x 
    improve: #3584502 improve Nuxt previewer loading performance
fago’s picture

fago
Primary language German
Location Vienna
commented
Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.