feat(components): add runtime mode

Author: deleonio

packages/components/src/core/bootstrap.ts

@@ -1,16 +1,9 @@
 import type { Generic, LoaderCallback, RegisterOptions } from 'adopted-style-sheets';
 import { register as coreRegister } from 'adopted-style-sheets';
-import { setDevMode } from '../schema';
 import { setCustomTagNames } from './component-names';
 import { initializeI18n } from './i18n';
 
-type Environment = 'development' | 'production';
-
 type KoliBriOptions = RegisterOptions & {
-	/**
-	 * The environment in which the application is running.
-	 */
-	environment?: Environment;
 	/**
 	 * This option allows you to transform the component tag names.
 	 */
@@ -33,8 +26,6 @@ export const bootstrap = async (
 	loaders: LoaderCallback | LoaderCallback[] | Set<LoaderCallback>,
 	koliBriOptions?: KoliBriOptions,
 ): Promise<void[]> => {
-	setDevMode(koliBriOptions?.environment === 'development');
-
 	initializeI18n(koliBriOptions?.translation?.name ?? 'de', koliBriOptions?.translations);
 	if (koliBriOptions?.transformTagName) {
 		setCustomTagNames(koliBriOptions?.transformTagName);

packages/components/src/i18n.ts

@@ -1,6 +1,6 @@
 import type { ComponentKeys, ResourcePrefix } from './core/i18n';
 import { getI18nInstance, initializeI18n } from './core/i18n';
-import { processEnv } from './schema';
+import { runtimeMode } from './schema';
 
 type Options = {
 	count?: number;
@@ -14,6 +14,6 @@ export let translate = (key: TranslationKey, options?: Options) => {
 	return i18n.translate(key, options);
 };
 
-if (processEnv === 'test') {
+if (runtimeMode === 'test') {
 	translate = (key): string => key;
 }

packages/components/src/schema/utils/dev.utils.ts

@@ -15,14 +15,13 @@ export const setDocument = (value: Document): void => {
 	DOCUMENT = value;
 };
 
-let DEV_MODE: boolean = false;
+import { runtimeMode } from './reuse';
+
+const DEV_MODE: boolean = runtimeMode !== 'production';
 let EXPERIMENTAL_MODE: boolean = false;
 let COLOR_CONTRAST_ANALYSIS: boolean = false;
 
 export const getDevMode = (): boolean => DEV_MODE === true;
-export const setDevMode = (mode: boolean): void => {
-	DEV_MODE = mode === true;
-};
 
 export const getExperimentalMode = (): boolean => EXPERIMENTAL_MODE === true;
 export const setExperimentalMode = (mode: boolean): void => {

packages/components/src/schema/utils/prop.validators.ts

@@ -5,7 +5,7 @@ import { querySelector } from 'query-selector-shadow-root';
 import rgba from 'rgba-convert';
 import { hex, score } from 'wcag-contrast';
 
-import { getDocument, getExperimentalMode, Log } from './dev.utils';
+import { getDevMode, getDocument, getExperimentalMode, Log } from './dev.utils';
 
 import type { Stringified } from '../types/common';
 import { devHint } from './a11y.tipps';
@@ -110,7 +110,7 @@ export const setState = <T>(component: Generic.Element.Component, propName: stri
 	 * Muss erstmal in sync bleiben, da sonst der
 	 * Tooltip nicht korrekt ausgerichtet wird.
 	 */
-	// if (component.hydrated === true || processEnv !== 'test') {
+	// if (component.hydrated === true || runtimeMode !== 'test') {
 	// clearTimeout(component.timeout as NodeJS.Timeout);
 	// component.timeout = setTimeout(() => {
 	// 	clearTimeout(component.timeout as NodeJS.Timeout);
@@ -159,6 +159,10 @@ export function watchValidator<T>(
 	value?: T,
 	options: WatchOptions = {},
 ): void {
+	if (!getDevMode()) {
+		setState(component, propName, value ?? (options.defaultValue as T), options.hooks);
+		return;
+	}
 	if (validationFunction(value)) {
 		/**
 		 * Triff zu, wenn der Wert VALIDE ist.

packages/components/src/schema/utils/reuse.ts

@@ -1,10 +1,11 @@
-const PROCESS_ENVS = ['development', 'production', 'test'] as const;
-type ProcessEnv = (typeof PROCESS_ENVS)[number];
-export let processEnv: ProcessEnv = 'development';
+const MODES = ['development', 'production', 'test'] as const;
+export type Mode = (typeof MODES)[number];
+
+export let runtimeMode: Mode = 'development';
 try {
-	processEnv = process.env.NODE_ENV as ProcessEnv;
+	runtimeMode = process.env.NODE_ENV as Mode;
 } catch (e) {
-	processEnv = 'production';
+	runtimeMode = 'production';
 }
 
 /**

packages/components/src/utils/align-floating-elements.ts

@@ -1,5 +1,5 @@
 import { arrow, computePosition, flip, offset, shift } from '@floating-ui/dom';
-import { processEnv } from '../schema';
+import { runtimeMode } from '../schema';
 
 import type { AlignPropType } from '../schema';
 type Arguments = {
@@ -9,7 +9,7 @@ type Arguments = {
 	align?: AlignPropType;
 };
 export const alignFloatingElements = async ({ floatingElement, referenceElement, arrowElement, align = 'top' }: Arguments) => {
-	if (processEnv !== 'test') {
+	if (runtimeMode !== 'test') {
 		const middleware = [offset(arrowElement?.offsetHeight ?? 10), flip(), shift()];
 		if (arrowElement) {
 			middleware.push(arrow({ element: arrowElement }));

packages/components/src/utils/dev.utils.ts

@@ -1,4 +1,4 @@
-import { Log, getDocument, processEnv, setColorContrastAnalysis, setDevMode, setExperimentalMode } from '../schema';
+import { Log, getDocument, runtimeMode, setColorContrastAnalysis, setExperimentalMode } from '../schema';
 
 import { getWindow } from '../schema';
 import { Env } from '@stencil/core';
@@ -8,7 +8,6 @@ const initMeta = (): void => {
 	if (meta && meta.hasAttribute('content')) {
 		const content = meta.getAttribute('content');
 		if (typeof content === 'string') {
-			setDevMode(content.includes('dev-mode=true'));
 			setExperimentalMode(content.includes('experimental-mode=true'));
 			setColorContrastAnalysis(content.includes('color-contrast-analysis=true'));
 		}
@@ -66,7 +65,7 @@ Email: kolibri@itzbund.de
 
 let nonce = (): string => Math.floor(Math.random() * 16777215).toString(16);
 
-if (processEnv === 'test') {
+if (runtimeMode === 'test') {
 	nonce = (): string => 'nonce';
 }
 

packages/samples/react/src/react.main.tsx

@@ -81,7 +81,6 @@ void (async () => {
 						])
 					: undefined,
 				transformTagName: ENABLE_TAG_NAME_TRANSFORMER ? tagNameTransformer : undefined,
-				environment: process.env.NODE_ENV === 'development' ? 'development' : 'production',
 				reflectInputValues: true,
 			},
 		);