This repository has been archived by the owner on Jun 13, 2024. It is now read-only.
Build experimental-bundled-ui-shell.js as immediately invoked function expression #227
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Eric-Arellano
added a commit
to Qiskit/qiskit_sphinx_theme
that referenced
this pull request
Apr 25, 2023
# Motivation We decided to stop loading web components via the Internet (e.g. a CDN like unpkg.com) because: 1. It introduced a new point of failure. If the service goes down, our site is degraded. See #246 2. There is a delay in loading the web component because we first render the HTML before finishing pulling the web component Related, we also decided to switch from always using the latest version of web components (by always pointing to the same URL) to instead versioning the component. For example, the Sphinx Theme 1.14 might use a different version of the same component than Theme 1.11. We believe it is not very painful to update web components thanks to now having release branches & automated releases. It is much more stable to pin the version of the web component, whereas before, updating the URL impacted every single Theme release without an opportunity to validate it makes sense for each release. # FYI: How we load the file We use an "immediately invoked function expression" (IIFE). That makes sure that the top nav bar is rendered at the same time as the general site, unlike before. See Qiskit/web-components#227 for the change to have the web-components repo build the file this way. ## Rejected: ES6 module via a local file We'd still use `type="module"` like we were using before, but change the `href`/`src` to point to a local file path rather than URL. This breaks opening up `index.html`. We get a CORS issue that the file cannot be accessed. That happens because `<script type="module">` has stricter CORS policies. So, you now need to use a server like running `python -m http.server` inside the `_build/html` folder for the site to render properly. This also still has a delay in the top nav bar rendering. That is because ES6 modules have deferred execution, meaning that the JavaScript runs after the HTML page is set up. ## Rejected: inlining the JavaScript module We can avoid the CORS issue from "ES6 module via a local file" by inlining the JavaScript with a Jinja `include` directive. But, that increases the file size of each HTML page by 184KB. It means that we keep downloading the same duplicate JS code because the browser cannot cache the dedicated web component file. This approach also still results in a delay in loading the top nav bar because ES6 modules have deferred execution.
|
Bump @y4izus @eddybrando |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changes
As found in Qiskit/qiskit_sphinx_theme#274 (comment), we want to bundle web components into qiskit_sphinx_theme as immediately invoked function expressions. That allows us to avoid issues with CORS on local development & results in the component being immediately loaded, rather than having a delay.
Implementation details
See https://rollupjs.org/configuration-options/#output-format for the relevant docs.
According to Abdón,
experimental-bundled-ui-shell.jsis only used byqiskit_sphinx_theme, so this should have no impact on other teams. It will not change e.g. hownpm installworks, as far as I can tell.