Export helper to react to JLab theme change

Author: fcollonval

packages/components/src/index.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { initThemeChangeListener } from './utilities/theme/applyTheme';
+export { addJupyterLabThemeChangeListener } from './utilities/theme/applyTheme';
 
 export * from './design-token';
 export * from './jupyter-design-system';
@@ -20,13 +20,3 @@ export * from './tab-panel/index';
 export * from './tab/index';
 export * from './tabs/index';
 export * from './text-field/index';
-
-// Add Jupyter theme change listener
-{
-  let isThemeChangeInitialized = false;
-
-  if (!isThemeChangeInitialized) {
-    isThemeChangeInitialized = true;
-    initThemeChangeListener();
-  }
-}

packages/components/src/utilities/theme/applyTheme.spec.ts

@@ -6,6 +6,7 @@ const sum = (a, b) => {
   return a + b;
 };
 
+// FIXME
 test('temporary test', () => {
   expect(sum(1, 2)).toBe(3);
 });

packages/components/src/utilities/theme/applyTheme.ts

@@ -20,11 +20,23 @@ import { DesignToken } from '@microsoft/fast-foundation';
 const THEME_NAME_BODY_ATTRIBUTE = 'data-jp-theme-name';
 const THEME_MODE_BODY_ATTRIBUTE = 'data-jp-theme-light';
 
+/**
+ * Flag to initialized only one listener
+ */
+let isThemeChangeInitialized = false;
+
 /**
  * Configures a MutationObserver to watch for Jupyter theme changes and
  * applies the current Jupyter theme to the toolkit components.
  */
-export function initThemeChangeListener(): void {
+export function addJupyterLabThemeChangeListener(): void {
+  if (!isThemeChangeInitialized) {
+    isThemeChangeInitialized = true;
+    initThemeChangeListener();
+  }
+}
+
+function initThemeChangeListener(): void {
   const addObserver = () => {
     const observer = new MutationObserver(() => {
       applyCurrentTheme();
@@ -46,11 +58,26 @@ export function initThemeChangeListener(): void {
   }
 }
 
+/**
+ * JupyterLab CSS variable to Design Token converter
+ */
 interface IConverter<T> {
+  /**
+   * Convert the CSS variable value to design token value
+   */
   converter?: (value: string) => T | null;
+  /**
+   * Design token to update
+   */
   token: DesignToken<T>;
 }
 
+/**
+ * Convert a base color to a palette.
+ *
+ * @param value Color string
+ * @returns The palette generated from the color
+ */
 const colorConverter = (value: string): Palette<Swatch> | null => {
   const parsedColor = parseColor(value);
 
@@ -61,6 +88,12 @@ const colorConverter = (value: string): Palette<Swatch> | null => {
     : null;
 };
 
+/**
+ * Convert a string to an integer.
+ *
+ * @param value String to convert
+ * @returns Extracted integer or null
+ */
 const intConverter = (value: string): number | null => {
   const parsedValue = parseInt(value, 10);
   return isNaN(parsedValue) ? null : parsedValue;

packages/lab-example/src/index.tsx

@@ -11,6 +11,7 @@ import {
   TextField
 } from '@jupyter-notebook/react-components';
 import {
+  addJupyterLabThemeChangeListener,
   allComponents,
   provideJupyterDesignSystem
 } from '@jupyter-notebook/web-components';
@@ -23,6 +24,7 @@ import { Widget } from '@lumino/widgets';
 import React from 'react';
 
 provideJupyterDesignSystem().register(allComponents);
+addJupyterLabThemeChangeListener();
 
 /**
  * Initialization data for the jupyter-ui-demo extension.