@vonage/vvd-scheme - npm Package Compare versions

Comparing version 0.10.0 to 0.11.0

CHANGELOG.md

@@ -1,4 +0,48 @@
-# 0.10.0 (2020-09-22)
+# [0.11.0](https://github.com/vonage/vivid/compare/v0.10.0...v0.11.0) (2020-09-29)
 
 
 
+# [0.10.0](https://github.com/vonage/vivid/compare/v0.9.0...v0.10.0) (2020-09-22)
+
+
+
+# [0.8.0](https://github.com/vonage/vivid/compare/v0.7.0...v0.8.0) (2020-09-22)
+
+
+
+# [0.7.0](https://github.com/vonage/vivid/compare/v0.6.0...v0.7.0) (2020-09-15)
+
+
+
+# [0.6.0](https://github.com/vonage/vivid/compare/v0.5.0...v0.6.0) (2020-09-08)
+
+
+
+# [0.5.0](https://github.com/vonage/vivid/compare/v0.4.0...v0.5.0) (2020-08-20)
+
+
+
+# [0.3.0](https://github.com/vonage/vivid/compare/v0.2.4...v0.3.0) (2020-08-03)
+
+
+
+## [0.2.4](https://github.com/vonage/vivid/compare/v0.2.3...v0.2.4) (2020-07-23)
+
+
+
+## [0.2.3](https://github.com/vonage/vivid/compare/v0.2.2...v0.2.3) (2020-07-23)
+
+
+### Bug Fixes
+
+* **scheme:** circular dependency removed ([f2f9100](https://github.com/vonage/vivid/commit/f2f91006dd93d6b38ff3b3da1b7a74cc28aa1f71))
+* **scheme:** import typscript files successfully from packages ([95e022d](https://github.com/vonage/vivid/commit/95e022d67e6c6d5c1259d17ef7d931ba17dd25c0))
+
+
+### Features
+
+* **scheme:** emitting event output ([790e7fc](https://github.com/vonage/vivid/commit/790e7fc716f737a82b6e25775360a0a2bff5a848))
+* **scheme:** scheme selection interacts with scheme loader ([a4b5dc0](https://github.com/vonage/vivid/commit/a4b5dc0f1e1dc9d5ca3874e75ae560a051ea0f2d))
+
+
+

package.json

 {
 	"name": "@vonage/vvd-scheme",
-	"version": "0.10.0",
+	"version": "0.11.0",
 	"description": "Vivid scheme management service",
@@ -23,11 +23,9 @@ "author": "yinonov <[e-mail]>",
 	"dependencies": {
-		"ramda": "^0.27.1",
 		"tslib": "^2.0.1"
 	},
 	"devDependencies": {
-		"@types/ramda": "^0.27.4",
-		"@vonage/vvd-design-tokens": "^0.10.0",
+		"@vonage/vvd-design-tokens": "^0.11.0",
 		"lit-element": "^2.4.0"
 	},
-	"gitHead": "2aeca64a96ebdb3dfc61888430fea0f959c19090"
+	"gitHead": "ea9cd3a95a11dd0c281950329fb6c8b698903ab8"
 }

scheme-change-listener.js

@@ -1,13 +0,5 @@
-import { tryCatch } from 'ramda';
 export const SCHEME_SELECT_EVENT_TYPE = 'vvd_scheme_select';
-function tryCatchHandler(callback, scheme) {
-    return tryCatch(() => {
-        callback(scheme);
-    }, (err) => {
-        throw new Error(err);
-    });
-}
 // BroadcastChannel API currently not supported in safari
 const broadCastFn = (callback) => (new BroadcastChannel(SCHEME_SELECT_EVENT_TYPE).onmessage = ({ data: scheme, }) => {
-    tryCatchHandler(callback, scheme)();
+    callback(scheme);
 });
@@ -18,3 +10,3 @@ // plain eventListener fallback
     const { scheme } = (_a = e) === null || _a === void 0 ? void 0 : _a.detail;
-    tryCatchHandler(callback, scheme)();
+    callback(scheme);
 }, false);
@@ -21,0 +13,0 @@ export function onSchemeChange(callback) {

scheme.dark.css.js

 import { css } from 'lit-element';
-export const style = css ``;
+export const style = css `body,.vvd-theme-dark-base{--vvd-color-base-background: #000000;--vvd-color-base-foreground: #ffffff;--vvd-color-base-dim: #696A6E;--vvd-color-surface-background: #000000;--vvd-color-surface-foreground: #ffffff;--vvd-color-primary-background: #ffffff;--vvd-color-primary-foreground: #000000;--vvd-color-cta-background: #924CF6;--vvd-color-cta-foreground: #ffffff;--vvd-color-success-background: #0B827E;--vvd-color-success-foreground: #ffffff;--vvd-color-error-background: #EB001E;--vvd-color-error-foreground: #ffffff;--vvd-color-info-background: #0176D5;--vvd-color-info-foreground: #ffffff;--vvd-color-announcement-background: #D6219C;--vvd-color-announcement-foreground: #ffffff}.vvd-theme-dark-alternate{--vvd-color-base-background: #000000;--vvd-color-base-foreground: #ffffff;--vvd-color-base-dim: #696A6E;--vvd-color-surface-background: #000000;--vvd-color-surface-foreground: #ffffff;--vvd-color-primary-background: #ffffff;--vvd-color-primary-foreground: #000000;--vvd-color-cta-background: #924CF6;--vvd-color-cta-foreground: #ffffff;--vvd-color-success-background: #0B827E;--vvd-color-success-foreground: #ffffff;--vvd-color-error-background: #EB001E;--vvd-color-error-foreground: #ffffff;--vvd-color-info-background: #0176D5;--vvd-color-info-foreground: #ffffff;--vvd-color-announcement-background: #D6219C;--vvd-color-announcement-foreground: #ffffff}`;
 //# sourceMappingURL=scheme.dark.css.js.map

scheme.light.css.js

 import { css } from 'lit-element';
-export const style = css ``;
+export const style = css `body,.vvd-theme-light-base{--vvd-color-base-background: #ffffff;--vvd-color-base-foreground: #000000;--vvd-color-base-dim: #92949B;--vvd-color-surface-background: #c0c0c0;--vvd-color-surface-foreground: black;--vvd-color-primary-background: #000000;--vvd-color-primary-foreground: #ffffff;--vvd-color-cta-background: #924CF6;--vvd-color-cta-foreground: #ffffff;--vvd-color-success-background: #0B827E;--vvd-color-success-foreground: #ffffff;--vvd-color-error-background: #EB001E;--vvd-color-error-foreground: #ffffff;--vvd-color-info-background: #0176D5;--vvd-color-info-foreground: #ffffff;--vvd-color-announcement-background: #D6219C;--vvd-color-announcement-foreground: #ffffff}.vvd-theme-light-alternate{--vvd-color-base-background: #ffffff;--vvd-color-base-foreground: #000000;--vvd-color-base-dim: #92949B;--vvd-color-surface-background: #c0c0c0;--vvd-color-surface-foreground: black;--vvd-color-primary-background: #000000;--vvd-color-primary-foreground: #ffffff;--vvd-color-cta-background: #924CF6;--vvd-color-cta-foreground: #ffffff;--vvd-color-success-background: #0B827E;--vvd-color-success-foreground: #ffffff;--vvd-color-error-background: #EB001E;--vvd-color-error-foreground: #ffffff;--vvd-color-info-background: #0176D5;--vvd-color-info-foreground: #ffffff;--vvd-color-announcement-background: #D6219C;--vvd-color-announcement-foreground: #ffffff}`;
 //# sourceMappingURL=scheme.light.css.js.map

src/scheme-change-listener.ts

 import { SchemeOption } from './vvd-scheme.js';
-import { tryCatch } from 'ramda';
 
 export const SCHEME_SELECT_EVENT_TYPE = 'vvd_scheme_select';
 
-function tryCatchHandler(
-	callback: (scheme: SchemeOption) => void,
-	scheme: SchemeOption
-) {
-	return tryCatch(
-		() => {
-			callback(scheme);
-		},
-		(err) => {
-			throw new Error(err);
-		}
-	);
-}
-
 // BroadcastChannel API currently not supported in safari
@@ -25,3 +10,3 @@ const broadCastFn = (callback: (scheme: SchemeOption) => void) =>
 	}) => {
-		tryCatchHandler(callback, scheme)();
+		callback(scheme);
 	});
@@ -35,3 +20,3 @@
 			const { scheme } = (e as CustomEvent)?.detail;
-			tryCatchHandler(callback, scheme)();
+			callback(scheme);
 		},
@@ -38,0 +23,0 @@ false

src/scheme.dark.css.ts

 import {css} from 'lit-element';
 
-export const style = css``;
+export const style = css`body,.vvd-theme-dark-base{--vvd-color-base-background: #000000;--vvd-color-base-foreground: #ffffff;--vvd-color-base-dim: #696A6E;--vvd-color-surface-background: #000000;--vvd-color-surface-foreground: #ffffff;--vvd-color-primary-background: #ffffff;--vvd-color-primary-foreground: #000000;--vvd-color-cta-background: #924CF6;--vvd-color-cta-foreground: #ffffff;--vvd-color-success-background: #0B827E;--vvd-color-success-foreground: #ffffff;--vvd-color-error-background: #EB001E;--vvd-color-error-foreground: #ffffff;--vvd-color-info-background: #0176D5;--vvd-color-info-foreground: #ffffff;--vvd-color-announcement-background: #D6219C;--vvd-color-announcement-foreground: #ffffff}.vvd-theme-dark-alternate{--vvd-color-base-background: #000000;--vvd-color-base-foreground: #ffffff;--vvd-color-base-dim: #696A6E;--vvd-color-surface-background: #000000;--vvd-color-surface-foreground: #ffffff;--vvd-color-primary-background: #ffffff;--vvd-color-primary-foreground: #000000;--vvd-color-cta-background: #924CF6;--vvd-color-cta-foreground: #ffffff;--vvd-color-success-background: #0B827E;--vvd-color-success-foreground: #ffffff;--vvd-color-error-background: #EB001E;--vvd-color-error-foreground: #ffffff;--vvd-color-info-background: #0176D5;--vvd-color-info-foreground: #ffffff;--vvd-color-announcement-background: #D6219C;--vvd-color-announcement-foreground: #ffffff}`;

src/scheme.light.css.ts

 import {css} from 'lit-element';
 
-export const style = css``;
+export const style = css`body,.vvd-theme-light-base{--vvd-color-base-background: #ffffff;--vvd-color-base-foreground: #000000;--vvd-color-base-dim: #92949B;--vvd-color-surface-background: #c0c0c0;--vvd-color-surface-foreground: black;--vvd-color-primary-background: #000000;--vvd-color-primary-foreground: #ffffff;--vvd-color-cta-background: #924CF6;--vvd-color-cta-foreground: #ffffff;--vvd-color-success-background: #0B827E;--vvd-color-success-foreground: #ffffff;--vvd-color-error-background: #EB001E;--vvd-color-error-foreground: #ffffff;--vvd-color-info-background: #0176D5;--vvd-color-info-foreground: #ffffff;--vvd-color-announcement-background: #D6219C;--vvd-color-announcement-foreground: #ffffff}.vvd-theme-light-alternate{--vvd-color-base-background: #ffffff;--vvd-color-base-foreground: #000000;--vvd-color-base-dim: #92949B;--vvd-color-surface-background: #c0c0c0;--vvd-color-surface-foreground: black;--vvd-color-primary-background: #000000;--vvd-color-primary-foreground: #ffffff;--vvd-color-cta-background: #924CF6;--vvd-color-cta-foreground: #ffffff;--vvd-color-success-background: #0B827E;--vvd-color-success-foreground: #ffffff;--vvd-color-error-background: #EB001E;--vvd-color-error-foreground: #ffffff;--vvd-color-info-background: #0176D5;--vvd-color-info-foreground: #ffffff;--vvd-color-announcement-background: #D6219C;--vvd-color-announcement-foreground: #ffffff}`;

src/vvd-scheme-style-tag-handler.ts

@@ -9,9 +9,7 @@ import { CSSResult } from 'lit-element';
 
-export async function applySchemeCSS(scheme: PredefinedScheme): Promise<void> {
-	const cssResult: CSSResult = (await getSchemeModule(scheme)).style;
-	style.innerHTML = cssResult.cssText || '';
-}
+const importSchemeMap = new Map<PredefinedScheme, Promise<ModuleType>>([
+	['dark', import('./scheme.dark.css')],
+	['light', import('./scheme.light.css')],
+]);
 
-//	private area
-//
 const style = mountStyle();
@@ -26,12 +24,11 @@
 
-async function getSchemeModule(
-	schemeOption: PredefinedScheme
-): Promise<ModuleType> {
-	switch (schemeOption) {
-		case 'dark':
-			return import('./scheme.dark.css');
-		case 'light':
-		default:
-			return import('./scheme.light.css');
+export async function applySchemeCSS(scheme: PredefinedScheme): Promise<void> {
+	if (!importSchemeMap.has(scheme)) {
+		throw new Error('scheme not found');
 	}
+	const schemeModule = await importSchemeMap.get(scheme);
+	const cssResult: CSSResult | undefined = schemeModule?.style;
+	if (cssResult) {
+		style.innerHTML = cssResult.cssText || '';
+	}
 }

src/vvd-scheme.ts

@@ -51,6 +51,6 @@ import { onSchemeChange } from './scheme-change-listener';
 	if (scheme === 'syncWithOSSettings') {
-		pcs.addEventListener('change', syncWithOSSettings);
+		pcs.addListener(syncWithOSSettings);
 		result = getPreferedColorScheme() as PredefinedScheme;
 	} else {
-		pcs.removeEventListener('change', syncWithOSSettings);
+		pcs.removeListener(syncWithOSSettings);
 		result = scheme;
@@ -57,0 +57,0 @@ }

test/scheme.test.js

 import { randomAlpha } from '../../../test/test-helpers.js';
 import schemeService from '../vvd-scheme.js';
+import { getPreferedColorScheme } from '../os-sync.utils.js';
 
+const SYNC_WITH_OS = 'syncWithOSSettings',
+	LIGHT = 'light',
+	DARK = 'dark';
+
 describe('vvd-scheme service', () => {
@@ -32,3 +37,4 @@ it('should provide basic set scheme API', async () => {
 
-	it('should be able to init to default when set to undefined', async () => {
+	it('should init to default (OS) when set to undefined', async () => {
+		const autoScheme = getPreferedColorScheme();
 		const r = randomAlpha();
@@ -39,7 +45,8 @@ const s = (await import(`../vvd-scheme.js?${r}`)).default;
 		const currentSchemeOption = s.getSelectedSchemeOption();
-		assert.equal(currentScheme, 'light');
-		assert.equal(currentSchemeOption, 'syncWithOSSettings');
+		assert.equal(currentScheme, autoScheme);
+		assert.equal(currentSchemeOption, SYNC_WITH_OS);
 	});
 
-	it('should be able to init to default when set to null', async () => {
+	it('should init to default (OS) when set to null', async () => {
+		const autoScheme = getPreferedColorScheme();
 		const r = randomAlpha();
@@ -50,24 +57,26 @@ const s = (await import(`../vvd-scheme.js?${r}`)).default;
 		const currentSchemeOption = s.getSelectedSchemeOption();
-		assert.equal(currentScheme, 'light');
-		assert.equal(currentSchemeOption, 'syncWithOSSettings');
+		assert.equal(currentScheme, autoScheme);
+		assert.equal(currentSchemeOption, SYNC_WITH_OS);
 	});
 
-	it('should be able to init to the given argument', async () => {
+	it('should init to the given argument', async () => {
+		const newScheme = getPreferedColorScheme() === LIGHT ? DARK : LIGHT;
 		const r = randomAlpha();
 		const s = (await import(`../vvd-scheme.js?${r}`)).default;
-		await s.set('dark');
+		await s.set(newScheme);
 		const currentScheme = s.getSelectedScheme();
 		const currentSchemeOption = s.getSelectedSchemeOption();
-		assert.equal(currentScheme, 'dark');
-		assert.equal(currentSchemeOption, 'dark');
+		assert.equal(currentScheme, newScheme);
+		assert.equal(currentSchemeOption, newScheme);
 	});
 
 	it('should do nothing when set to the same argument', async () => {
+		const sameScheme = getPreferedColorScheme();
 		const r = randomAlpha();
 		const s = (await import(`../vvd-scheme.js?${r}`)).default;
-		const r1 = await s.set('light');
-		assert.equal(r1.option, 'light');
-		assert.equal(r1.scheme, 'light');
+		const r1 = await s.set(sameScheme);
+		assert.equal(r1.option, sameScheme);
+		assert.equal(r1.scheme, sameScheme);
 
-		const r2 = await s.set('light');
+		const r2 = await s.set(sameScheme);
 		assert.equal(r2, r1);
@@ -77,7 +86,8 @@ });
 	it('should do nothing when set to undefined and already post-init', async () => {
+		const newScheme = getPreferedColorScheme() === LIGHT ? DARK : LIGHT;
 		const r = randomAlpha();
 		const s = (await import(`../vvd-scheme.js?${r}`)).default;
-		const r1 = await s.set('light');
-		assert.equal(r1.option, 'light');
-		assert.equal(r1.scheme, 'light');
+		const r1 = await s.set(newScheme);
+		assert.equal(r1.option, newScheme);
+		assert.equal(r1.scheme, newScheme);
 
@@ -89,7 +99,8 @@ const r2 = await s.set();
 	it('should do nothing when set to null and already post-init', async () => {
+		const newScheme = getPreferedColorScheme() === LIGHT ? DARK : LIGHT;
 		const r = randomAlpha();
 		const s = (await import(`../vvd-scheme.js?${r}`)).default;
-		const r1 = await s.set('light');
-		assert.equal(r1.option, 'light');
-		assert.equal(r1.scheme, 'light');
+		const r1 = await s.set(newScheme);
+		assert.equal(r1.option, newScheme);
+		assert.equal(r1.scheme, newScheme);
 
@@ -96,0 +107,0 @@ const r2 = await s.set(null);

vvd-scheme-style-tag-handler.js

 import { preSchemeLoadingCssText } from './pre-scheme-loading.css.js';
-export async function applySchemeCSS(scheme) {
-    const cssResult = (await getSchemeModule(scheme)).style;
-    style.innerHTML = cssResult.cssText || '';
-}
-//	private area
-//
+const importSchemeMap = new Map([
+    ['dark', import('./scheme.dark.css')],
+    ['light', import('./scheme.light.css')],
+]);
 const style = mountStyle();
@@ -15,11 +13,12 @@ function mountStyle() {
 }
-async function getSchemeModule(schemeOption) {
-    switch (schemeOption) {
-        case 'dark':
-            return import('./scheme.dark.css');
-        case 'light':
-        default:
-            return import('./scheme.light.css');
+export async function applySchemeCSS(scheme) {
+    if (!importSchemeMap.has(scheme)) {
+        throw new Error('scheme not found');
     }
+    const schemeModule = await importSchemeMap.get(scheme);
+    const cssResult = schemeModule === null || schemeModule === void 0 ? void 0 : schemeModule.style;
+    if (cssResult) {
+        style.innerHTML = cssResult.cssText || '';
+    }
 }
 //# sourceMappingURL=vvd-scheme-style-tag-handler.js.map

vvd-scheme.js

@@ -34,7 +34,7 @@ import { onSchemeChange } from './scheme-change-listener';
     if (scheme === 'syncWithOSSettings') {
-        pcs.addEventListener('change', syncWithOSSettings);
+        pcs.addListener(syncWithOSSettings);
         result = getPreferedColorScheme();
     }
     else {
-        pcs.removeEventListener('change', syncWithOSSettings);
+        pcs.removeListener(syncWithOSSettings);
         result = scheme;
@@ -41,0 +41,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dependency count

1

decreased by-50%

Dev dependency count

2

decreased by-33.33%

Lines of code

459

increased by0.88%

Worsened metrics

Total package byte prevSize

188331

decreased by-51.72%

Dependency changes

• - Removedramda@^0.27.1

• - Removedramda@0.27.2(transitive)