Hovered preview for JS components in library not working anymore

Overview

1. Create a new code component and make a JS change(same problem happens if you don't make JS changes)
2. Add to components
3. Hover over the component in the library menu and you can see the preview is empty.

When I look at the console and the network requests, it tries to request JS (component-url value of the astro-island) for the component that doesn't exist in my /sites/default/files/astro-island

This was introduced after #3519634: Modifying a XB config entity's `status` or `label` should update the auto-save entry too, rather than delete it got in.

This was because before #3519634 when clicked "Add to components" the request to \Drupal\experience_builder\Controller\ApiConfigControllers::patch was sending the complete entity so it included the compiled_js. Before this point in the client workflow compiled_js is never sent.

so the hover was showing the saved config compiled_js, not the auto-saved version, hence this problem #3516705: Auto-saved changes to code components are not visible in preview-on-hover-component-list until published

but now after #3519634 the request to \Drupal\experience_builder\Controller\ApiConfigControllers::patch from client only sends status. While this is correct it does mean that since the hover was only ever showing the saved config JS not auto-save, now that we don't have compile_js in the saved version the problem in #3516705: Auto-saved changes to code components are not visible in preview-on-hover-component-list until published is worse because there is not saved config compiled_js. We could also publish the new page with new Code Component on it but never have a compiled_js

Proposed resolution

Because when you create a new Code Component from the client it does save the source_js, it does seem to make sense that there should also be a compiled_js before, or at the time, that you add the Code Component to library.

Otherwise the hover or placing a Code Component that you have made no changes to, just using the default version and there is no auto-save, will not work.
While it may seem weird to create a component and make no changes to, just accepting the default state, and then adding it to the component library, we don't actually stop this from happening.

Here a few ways we could solve this

1. Disable the "Add to components" button until the user has made some changes, thus triggering the auto-save with compile_js set

   This would mean once #3516705: Auto-saved changes to code components are not visible in preview-on-hover-component-list until published was solved you would see the current auto-save state in the hover and when placing

   Cons: this would be a change in the workflow. Right now I could make a "NYE Countdown timer" Code component, make no changes to it. place it multiple times and then go back and actually update JS to show the timer. This seems like a valid workflow

2. When adding component and loading the code editor immediately send an auto-save request thus creating an auto-save version with compile_js

   This would solve the problem we haven't really discussed(AFIACT)

   1. User adds a page
   2. User adds a Code Component, makes no changes
   3. User adds component to the page
   4. User clicks "Review changes" , sees only "Page 1"
   5. User clicks publish

   The new Code component never showed up on the Review changes but now it is on the site. This is side effect of us saving the real config at the start.
   This would be more confusing if a different user clicked "Publish" than made the page and code component.

   This situation could also happen if the user deletes "Page 1" all together and then another user adds "Page 2" and then adds the preexisting(but never appeared on the live site) code component to Page 2. If they then Review Changes -> Publish, they would also never see "New code component" in "Review Changes" before they publish

3. Don't allow a code component to be added to the library without real compiled_js and compile_css
   When clicking "Add to Components" also send compiled_js and compile_css(and slots and props see #3521843: JS component slots and props don't appear in the preview canvas until published , as we did before #3519634: Modifying a XB config entity's `status` or `label` should update the auto-save entry too, rather than delete it those ensuring we always at least have default compiled_js and compiled_css.
   or as soon as the editor is loaded update the saved config code component which should now have the compiled_js and compile_css

   Pro: It doesn't really make sense when we "add new component" that it saves a version that doesn't have compiled_js. this is just side effect of the fact that we can't generate the compiled_js on the server and not intentional AFIACT
   Con:This doesn't get around the problem detailed in the item above where the new code component might never show up in "Review changes" even though it will effectively be published to the live site

I(tedbow) would suggest 2)

User interface changes