Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: issue #419 / VIV-243 - fixing scheme duplicate styles load #420

Merged
merged 8 commits into from
Nov 4, 2020
Merged

fix: issue #419 / VIV-243 - fixing scheme duplicate styles load #420

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fbf956a
issue #419: fixing scheme duplicate styles load
gullerya Nov 2, 2020
4d72478
issue #419: added tests to cover the multi init stuff
gullerya Nov 2, 2020
14f8bc1
fixing general lint isues
gullerya Nov 2, 2020
fa85651
apparently lint fix broken the TS, so some adjustment
gullerya Nov 2, 2020
990f49c
issue #419: fixing unnecessary logging issue
gullerya Nov 2, 2020
3a16cb4
Merge branch 'master' into iss-419/viv-243-scheme-duplication
gullerya Nov 3, 2020
3a1005d
Merge branch 'master' into iss-419/viv-243-scheme-duplication
gullerya Nov 3, 2020
53eed48
issue #419: fixing CR reviews
gullerya Nov 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 17 additions & 6 deletions common/scheme/src/vvd-scheme-style-tag-handler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,24 @@ const getSchemeModule: (scheme: PredefinedScheme) => Promise<ModuleType> = (
}
};

const style = mountStyle();
const STYLE_ELEMENT_CLASS = 'vvd-scheme-style';
const style = ensureStyleMount(STYLE_ELEMENT_CLASS);

function mountStyle() {
const styleElement = document.createElement('style');
styleElement.innerHTML = preSchemeLoadingCssText;
document.head.appendChild(styleElement);
return styleElement;
function ensureStyleMount(schemeStylesheetClass: string): HTMLStyleElement {
let result;
const existing = document.querySelectorAll(`.${schemeStylesheetClass}`);
if (existing.length) {
console.error(
`found ${existing.length} scheme styles upon init while expected for 1, check your dependencies configuration`
);
result = existing[0] as HTMLStyleElement;
} else {
result = document.createElement('style');
result.className = STYLE_ELEMENT_CLASS;
result.innerHTML = preSchemeLoadingCssText;
document.head.appendChild(result);
}
return result;
}

export async function applySchemeCSS(scheme: PredefinedScheme): Promise<void> {
Expand Down
16 changes: 16 additions & 0 deletions common/scheme/test/scheme-setup.test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">

<head>
<title>Vivid - injectable isolated document as testing playground</title>
<script type="module">
window.executeSetup = async (src) => {
window.vvdScheme = (await import(src)).default;
await window.vvdScheme.set();
};
</script>
</head>

<body></body>

</html>
19 changes: 18 additions & 1 deletion common/scheme/test/scheme.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import { randomAlpha } from '../../../test/test-helpers.js';
import {
getFrameLoadedInjected,
randomAlpha,
} from '../../../test/test-helpers.js';
import {
getBaseVarNames,
assertBaseVarsMatch,
Expand All @@ -9,6 +12,7 @@ import schemeService from '../vvd-scheme.js';
import { getPreferedColorScheme } from '../os-sync.utils.js';

// const SYNC_WITH_OS = 'syncWithOSSettings',
const SCHEME_SETUP_HTML_TAG = 'schemeSetupTestHTML';
const LIGHT = 'light';
const DARK = 'dark';

Expand Down Expand Up @@ -127,6 +131,19 @@ describe('vvd-scheme service', () => {
assert.equal(r2, r1);
});

it('should install style element only once', async () => {
await getFrameLoadedInjected(SCHEME_SETUP_HTML_TAG, async (iframe) => {
const iframeWindow = iframe.contentWindow;
await Promise.all([
iframeWindow.executeSetup('../vvd-scheme.js?instance=1'),
iframeWindow.executeSetup('../vvd-scheme.js?instance=2'),
]);
const sseCount = iframe.contentDocument.querySelectorAll('.vvd-scheme-style')
YonatanKra marked this conversation as resolved.
Show resolved Hide resolved
.length;
expect(sseCount).equal(1);
});
});

describe('variables setup functionality', () => {
it('should have light variables set when light scheme set', async () => {
const r = randomAlpha();
Expand Down
2 changes: 1 addition & 1 deletion components/audio/src/vwc-audio.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ class VwcAudio extends HTMLElement {
userScrubRequestStream
.filterBy(playerAudioLoadedProperty)
.onValue(
(position: any) => (audioEl.currentTime = audioEl.duration * position)
(position: number) => (audioEl.currentTime = audioEl.duration * position)
);
connectedProperty
.filter((connected) => !connected)
Expand Down
1 change: 1 addition & 0 deletions components/list/src/vwc-list.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ declare global {
}
}

/* eslint-disable @typescript-eslint/no-explicit-any */
function debounce(
callback: <T>(this: T, ...args: any[]) => void,
waitInMS = 50
Expand Down
3 changes: 2 additions & 1 deletion karma.conf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ module.exports = config => {
client: {
karmaHTML: {
source: [
{ tag: 'coreSetupTest', src: 'common/core/test/core-setup.test.html' }
{ tag: 'coreSetupTest', src: 'common/core/test/core-setup.test.html' },
{ tag: 'schemeSetupTestHTML', src: 'common/scheme/test/scheme-setup.test.html' }
]
}
}
Expand Down