This repository has been archived by the owner on Mar 1, 2024. It is now read-only.
[UI-library] Expose JSS InsertionPoint in PixelStreamingApplicationStyle. #390
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
Signed-off-by: timbotimbo <timbotimbo@users.noreply.github.com>
timbotimbo
changed the title
lukehb
approved these changes
Oct 19, 2023
github-actions bot
pushed a commit
that referenced
this pull request
Oct 19, 2023
Signed-off-by: timbotimbo <timbotimbo@users.noreply.github.com> Co-authored-by: William Belcher <william.belcher@xa.epicgames.com> (cherry picked from commit 8ba4101)
github-actions bot
pushed a commit
that referenced
this pull request
Oct 19, 2023
Signed-off-by: timbotimbo <timbotimbo@users.noreply.github.com> Co-authored-by: William Belcher <william.belcher@xa.epicgames.com> (cherry picked from commit 8ba4101)
github-actions bot
pushed a commit
that referenced
this pull request
Oct 19, 2023
Signed-off-by: timbotimbo <timbotimbo@users.noreply.github.com> Co-authored-by: William Belcher <william.belcher@xa.epicgames.com> (cherry picked from commit 8ba4101)
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation and see the Github Action logs for details |
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.
Relevant components:
Problem statement:
I'm embedding a Pixelstreaming component using the UI-Library in a single-page application made in Blazor.
The ui-library styling is added to the
<head>tag of the site, which makes the style persist for the life of the application.Because of this, other unrelated parts of the application might be affected by this styling once the UI-Library has been used once.
(This is caused by class names like
form-controlandform-groupbeing shared by multiple frameworks.)The JSS library being used under the hood already has functionality to specify where in the DOM the style gets added, the
InsertionPointparameter. This parameter fixes the issue as the styling can be injected into specific DOM nodes that can be removed when Pixelstreaming can be discarded.You still need to be vigilant for class conflicts in styling when Pixelstreaming is active in the page, but this way we won't have to test the style of every other component of the app.
Solution
This PR exposes the existing
InsertionPointparameter of JSS in thePixelStreamingApplicationStyleconstructor.I've named it
jssInsertionPointto clarify that it applies to the JSS options.Example usage
The effect in a minimal HTML page:
Documentation
InsertionPointis documented as a parameter of the jss.setup function and in the JSS setup instructions.I did not see in depth documentation of
PixelStreamingApplicationStyle, thus I did not update any docs.Test Plan and Compatibility
Compatibility
This is a nullable parameter that was already implicitly null in the current implementation. Not using it should not break compatibility with any existing code.
In a personal repo I'm using this on the 5.2 branch, and as far as I can tell this can be backported to 5.2 and 5.3.
Testing
I did not add any unit tests as I felt that this would almost default to testing the JSS library itself.
Use cases that I tried manually:
Supplying a HTML node using
document.getElementById()works as expected.Suppling a string
'custom-insertion-point'works with a<!-- custom-insertion-point -->comment inside the element. (see the 2nd docs link)Entering an invalid parameter (a Number using JS) will not throw any errors and give the default behavior.
Entering an invalid string will show a clear warning in the browser console.
