Canvas and hover preview out of sync after drag-drop and publish

I'm 95% confident this is a duplicate of 🐛 Changes to code components are not visible in preview-on-hover-component-list until published Active . Can you please check if you can still reproduce this?

How could this be a duplicate of 🐛 Changes to code components are not visible in preview-on-hover-component-list until published Active if it was discovered as part of QA'ing that issue? I tested it as well on latest HEAD and confirmed that what was loaded wasn't the autosaved version but what exists in the config entity.

How could anybody have known this was found by QA'ing 🐛 Changes to code components are not visible in preview-on-hover-component-list until published Active if it's neither mentioned in the issue summary nor linked as a related issue? 😅

#2 is still true — see \Drupal\Tests\experience_builder\Kernel\Plugin\ExperienceBuilder\ComponentSource\JsComponentTest::testGetClientSideInfo(). Doubly so because 🐛 Auto-saved changes to component are not loaded in preview canvas when component is inside a slot Active 's test coverage is also in as of today (2814d46f805f3a0a079af0b4fe96654628eae592).

That's why this is most likely a client-side invalidation bug. Either or both of:

1. no auto-save → auto-save: /xb/api/v0/config/component not getting refetched after it changes from having no auto-save to getting an auto-save, which causes the referenced JS + CSS URLs for code components to change
2. auto-save changing: the "preview-on-hover" iframe still being around and not re-fetching /xb/api/v0/auto-saves/js/… and/or /xb/api/v0/auto-saves/css/…

Tested on 2814d46f805f3a0a079af0b4fe96654628eae592. That seems to confirm it's only the first. See attached screencast.

If I add cache busting strings to the getCodeComponents and getComponents endpoint requests, the problem goes away. The underlying problem might only be with one of the two, but that narrowed things down pretty darn quick. It looks like the BE is equipped to provide us what we need, and the FE needs to change how it asks for it.

add cache busting strings

Do you mean: a query string that includes the current time? Does that mean you're saying you're getting a cached response from the server side? If so: then this would actually be a server-side bug (cache tags, baby!).

Which … makes me actually jump to thinking this is just a duplicate of 🐛 Components sourced from JsComponent are missing source component cacheable metadata Active 😬 And I wouldn't have spotted that because I'm testing with settings.local.php containing

$settings['cache']['bins']['render'] = 'cache.backend.null';
$settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null';
$settings['cache']['bins']['page_cache'] = 'cache.backend.null';

🙈

@mayur-sose Can you test this again with #3522217 applied? 🙏

@wim-leers, I am still able to reproduce both the issues.

#9 shows 🐛 Global AssetLibrary should render with its auto-saved state (if any) when rendered in the XB UI Active — now that we landed 📌 Compile Tailwind CSS globally for code components Active . More context: We switched from saving the compiled Tailwind CSS in individual code components to saving it in the global asset library. This is the first time we're actually using the global asset library for assets that are needed for rendering, so it surfaced the need for 🐛 Global AssetLibrary should render with its auto-saved state (if any) when rendered in the XB UI Active .

→ Let's not use Tailwind CSS for testing this issue to identify clear boundaries of what we're trying to fix.

Here is an example code component for testing:

JavaScript:

export default function Card() {
  return <div className="card">Am I updating? 🕵️</div>;
}

CSS — NOT global CSS:

.card {
  padding: 2rem;
  font-size: 1.5rem;
  font-weight: 500;
  background-color: teal;
  color: white;
}

I did some investigation, turns out we were missing some needed client-side invalidation — see MR —, but that is not fixing all the issues. The preview thumbnail can still show stale data. I tried it on top of 🐛 Components sourced from JsComponent are missing source component cacheable metadata Active , and that didn't help. I recorded a video, I'll post it shortly.