merging with master

.npmrc

@@ -2,4 +2,4 @@ ca = null
 always-auth = true
 
 registry = https://vonagecc.jfrog.io/vonagecc/api/npm/npm/
-_auth = ${ARTIFACTORY_NPM_TOKEN}
+_auth = ${ARTIFACTORY_AUTH_TOKEN}

.storybook/preview-body.html

@@ -1,13 +1,8 @@
-<script type="module">
-	import '@vonage/vvd-scheme';
-	import '@vonage/vwc-scheme-select';
-</script>
-
 <style>
-	.change-scheme-component{
+	.change-scheme-component {
 		position: absolute;
-    right: 0;
+		right: 0;
 		top: 0;
 	}
 </style>
-<vwc-scheme-select class="change-scheme-component"></vwc-scheme-select>
+<vwc-scheme-select class="change-scheme-component"></vwc-scheme-select>

.storybook/preview.js

@@ -1,9 +1,11 @@
+import '@vonage/vwc-scheme-select';
 import '@storybook/addon-console';
 import { addParameters, setCustomElements } from '@storybook/web-components';
 import customElements from '../custom-elements.json';
-import { contextReady } from '@vonage/vvd-context';
+import vvdCore from '@vonage/vvd-core';
+import '@vonage/vvd-context';
 
-contextReady
+vvdCore.coreReady
 	.then(() => console.info('init Vivid context done (preview frame)'));
 
 async function run() {

.storybook/vivid-theme.js

@@ -1,7 +1,8 @@
 import { create } from '@storybook/theming/create';
-import { contextReady } from '@vonage/vvd-context';
+import '@vonage/vvd-context';
+import vvdCore from '@vonage/vvd-core';
 
-contextReady
+vvdCore.coreReady
 	.then(() => console.info('init Vivid context done (main page)'));
 
 export default create({

common/context/src/vvd-context.ts

@@ -1,29 +1,14 @@
-import { coreReady } from '@vonage/vvd-core';
+import '@vonage/vvd-core';
 import { style } from './vvd-context.css';
 
-let initResolver: (value?: unknown) => void | PromiseLike<void>,
-	initRejector: (reason?: unknown) => void | PromiseLike<void>;
-
-export const contextReady = new Promise((resolve, reject) => {
-	initResolver = resolve;
-	initRejector = reject;
-});
-
 init();
 
-async function init(): Promise<void> {
-	try {
-		injectGlobalStyle();
-		await coreReady;
-		initResolver();
-	} catch (e) {
-		initRejector(e);
-	}
+function init(): void {
+	injectGlobalStyle();
 }
 
 function injectGlobalStyle() {
 	const globalStyleSheet = document.createElement('style');
-	globalStyleSheet.type = 'text/css';
 	globalStyleSheet.innerHTML = style.cssText;
 	document.head.appendChild(globalStyleSheet);
 }

common/context/stories/context-basic.stories.js

@@ -1,4 +1,5 @@
-import { contextReady } from '@vonage/vvd-context/vvd-context';
+import vvdCore from '@vonage/vvd-core';
+import '@vonage/vvd-context';
 import '@vonage/vwc-scheme-select';
 import '@vonage/vwc-top-app-bar';
 import { html } from 'lit-element';
@@ -42,5 +43,5 @@ export const basic = () => html`
   </main>
 `;
 
-contextReady
+vvdCore.coreReady
 	.then(() => console.log('Vivid context initialised for the context demo story'));

common/core/src/vvd-configurer.ts

@@ -0,0 +1,50 @@
+/**
+ * This module exposes internal APIs to manage a Vivid overlay configuration state
+ * state machine revolves over:
+ * - uninitialised state for all
+ * - first init merge where undefined resolved to defaults
+ * - following merges applied over an existing state (undefined is not to touch)
+ *
+ * Static way to pre-configure Vivid is via `data-vvd-context` attribute on the HTML element.
+ * As of now, only a single keyword token value is supported:
+ * - none: suspend auto-init, to be used in custom initialization flavor
+ */
+import { SchemeOption } from '@vonage/vvd-scheme';
+
+const VVD_CONTEXT_ATTRIBUTE = 'data-vvd-context',
+	MANUAL_KEY = 'none',
+	VALID_CONFIGURATION_KEYS = [MANUAL_KEY, 'fonts', 'scheme'];
+
+export interface Configuration {
+	autoInit: boolean;
+	scheme?: SchemeOption;
+}
+export default Object.freeze({
+	initialConfiguration: buildInitialConfiguration(),
+	validateConfiguration,
+});
+
+function buildInitialConfiguration(): Configuration {
+	const result: Configuration = {
+		autoInit: true,
+	};
+	const vvdContextAttrValue = document.documentElement.getAttribute(
+		VVD_CONTEXT_ATTRIBUTE
+	);
+	if (vvdContextAttrValue === MANUAL_KEY) {
+		result.autoInit = false;
+	}
+	return result;
+}
+
+function validateConfiguration(configuration: Partial<Configuration>) {
+	const extraParams = Object.keys(configuration).filter(
+		(k) => !VALID_CONFIGURATION_KEYS.includes(k)
+	);
+
+	if (extraParams.length) {
+		throw new Error(
+			`unexpected configuration part/s '${extraParams}',	only some of '${VALID_CONFIGURATION_KEYS}' expected`
+		);
+	}
+}

common/core/src/vvd-core.ts

@@ -1,20 +1,26 @@
-import configuration, { Configuration } from './config-resolver.js';
+import configurer, { Configuration } from './vvd-configurer.js';
 import fonts from '@vonage/vvd-fonts/vvd-fonts.js';
 import schemeService from '@vonage/vvd-scheme';
 
-let initResolver: (value?: unknown) => void | PromiseLike<void>,
-	initRejector: (reason?: unknown) => void | PromiseLike<void>;
+let coreAutoInitDone: Promise<Array<unknown>>;
+if (configurer.initialConfiguration.autoInit) {
+	coreAutoInitDone = applyConfiguration(configurer.initialConfiguration);
+} else {
+	coreAutoInitDone = Promise.reject('auto-init unavailable when "none" used');
+}
 
-export const coreReady = new Promise((resolve, reject) => {
-	initResolver = resolve;
-	initRejector = reject;
+export default Object.freeze({
+	set: applyConfiguration,
+	coreReady: coreAutoInitDone,
 });
 
-console.debug('effective config', JSON.stringify(configuration));
-init(configuration);
+async function applyConfiguration(configuration: Partial<Configuration>) {
+	configurer.validateConfiguration(configuration);
+	return init(configuration);
+}
 
-async function init({ scheme }: Configuration): Promise<void> {
-	Promise.all([fonts.init(), schemeService.set(scheme)])
-		.then(initResolver)
-		.catch(initRejector);
+async function init(
+	configuration: Partial<Configuration>
+): Promise<Array<unknown>> {
+	return Promise.all([fonts.init(), schemeService.set(configuration.scheme)]);
 }

common/core/test/core.test.js

@@ -0,0 +1,17 @@
+import vvdCore from '../vvd-core.js';
+
+describe('vvd-core service', () => {
+	it('verify basic core API', async () => {
+		assert.isDefined(vvdCore, 'core service is defined');
+		assert.isObject(vvdCore, 'core service is a defaultly exported object');
+		assert.isFunction(vvdCore.set, 'core service has "set" API method');
+		assert.isDefined(
+			vvdCore.coreReady,
+			'core service has "coreReady" object (Promise)'
+		);
+		assert.isFunction(
+			vvdCore.coreReady.then,
+			'core service has "coreReady" object - ensure it is Promise'
+		);
+	});
+});

common/fonts/package.json

@@ -31,4 +31,4 @@
 		"fs-extra": "^9.0.1",
 		"lit-element": "^2.4.0"
 	}
-}
+}

common/fonts/src/vvd-fonts.ts

@@ -5,9 +5,9 @@ export default Object.freeze({
 const FONTS_BASE_URL_TOKEN = 'FONTS_BASE_URL',
 	CDN_BASE_URL = '//dpnf5z0hinc7q.cloudfront.net/fonts/v1';
 
-let INIT_PROMISE: Promise<void> | null = null;
+let INIT_PROMISE: Promise<Record<string, unknown>> | null = null;
 
-async function init(): Promise<void> {
+async function init(): Promise<Record<string, unknown>> {
 	if (!INIT_PROMISE) {
 		INIT_PROMISE = new Promise((resolve, reject) => {
 			console.info('Vivid Fonts initialization start...');
@@ -24,7 +24,6 @@ async function init(): Promise<void> {
 						CDN_BASE_URL
 					);
 					const ds = document.createElement('style');
-					ds.type = 'text/css';
 					ds.innerHTML = finalCSS;
 					document.head.appendChild(ds);
 					return ensureInit(testElement, initialWidth);
@@ -55,13 +54,13 @@ function setupInitTestElement(): HTMLElement {
 async function ensureInit(
 	testElement: HTMLElement,
 	initialWidth: number
-): Promise<void> {
+): Promise<Record<string, unknown>> {
 	return new Promise((resolve) => {
 		function innerTest() {
 			if (testElement.offsetWidth === initialWidth) {
 				setTimeout(innerTest, 25);
 			} else {
-				resolve();
+				resolve({});
 			}
 		}
 		innerTest();

common/fonts/test/fonts.test.js

@@ -1,14 +1,14 @@
 import fonts from '../vvd-fonts.js';
 
-describe('test vvd-fonts service', () => {
-	it('verify basic fonts API', async () => {
+describe('vvd-fonts service', () => {
+	it('should provide basic fonts API', async () => {
 		assert.isObject(fonts, 'imported "fonts" is object');
 		assert.isNotNull(fonts, 'imported "fonts" not null');
 		assert.isFrozen(fonts, 'imported "fonts" object should be frozen');
 		assert.isFunction(fonts.init, 'fonts has "init" method');
 	});
 
-	it('vvd-fonts init affects the actual font', async () => {
+	it('should affect the actual font', async () => {
 		//	create test element, to measure width of
 		const testElement = document.createElement('span');
 		testElement.textContent = 'www.iii.com';
@@ -34,4 +34,12 @@ describe('test vvd-fonts service', () => {
 			'element width after should be other than before'
 		);
 	});
+
+	it('should provide the same Promise each new time after the initial run', async () => {
+		const r1 = await fonts.init();
+		const r2 = await fonts.init();
+		const r3 = await (await import('../vvd-fonts.js')).default.init();
+		expect(r2).equal(r1);
+		expect(r3).equal(r2);
+	});
 });