ui: Add Mithril context (#5521)

Add a React-like context but for Mithril.js. This can be very useful for
injecting props into deeply nested components with out having to drill
those props through every layer in between.

Example usage:

```ts
// Create a 'theme' context with a default value of 'light'
const {ThemeProvider, ThemeConsumer} = createContext('light');

// This component expects a context to be injected, otherwise it falls back to the default
const ThemedComponent = {
  view: () => m(ThemeConsumer, (theme) =>
    m('div', `Current theme: ${theme}`),
  ),
};

// We can inject a theme into the component above like this - it doesn't matter how 
// nested it is, it'll still receive the theme as long as it has a provider as one of its
// ancestors.
m(ThemeProvider, {theme: 'dark'},
  m(ThemedComponent),
)
```

Author: stevegolton

ui/src/base/mithril_utils.ts

@@ -161,3 +161,119 @@ export function isEmptyVnodes(children: m.Children): boolean {
   }
   return false;
 }
+
+/**
+ * Creates a React-style context for passing data through the component tree
+ * without having to drill props manually through every level.
+ *
+ * Wrap content that needs access to context values in a Consumer vnode. The
+ * Consumer takes a function that receives the current context value and returns
+ * mithril vnodes.
+ *
+ * @template T The type of value stored in the context
+ * @param initialValue Optional default value when no Provider is present
+ * @returns An object with Provider and Consumer components
+ *
+ * @example
+ * // Basic usage - create a context and use it
+ * const ThemeContext = createContext('light');
+ *
+ * // Provider sets the context value for its children
+ * m(ThemeContext.Provider, {value: 'dark'}, [
+ *   m(Header),
+ *   m(Content),
+ * ]);
+ *
+ * // Consumer wraps content that needs the context value.
+ * m(ThemeContext.Consumer, (theme) => {
+ *   return m('.pf-button', {
+ *     class: theme === 'dark' ? 'pf-dark' : 'pf-light',
+ *   }, 'Click me');
+ * });
+ *
+ * @example
+ * // Using Consumer within a component
+ * class Button implements m.ClassComponent {
+ *   view() {
+ *     return m(ThemeContext.Consumer, (theme) => {
+ *       return m('.pf-button', {
+ *         class: theme === 'dark' ? 'pf-dark' : 'pf-light',
+ *       }, 'Click me');
+ *     });
+ *   }
+ * }
+ *
+ * @example
+ * // Using Consumer inline within a vnode tree
+ * m('.page', [
+ *   m('h1', 'My App'),
+ *   m(ThemeContext.Consumer, (theme) =>
+ *     m('.content', {class: theme}, 'Content')
+ *   ),
+ *   m(Footer),
+ * ]);
+ *
+ * @example
+ * // Context without a default value
+ * interface User {
+ *   name: string;
+ *   id: number;
+ * }
+ * const UserContext = createContext<User>();
+ *
+ * // Consumer receives undefined when no Provider is present
+ * m(UserContext.Consumer, (user) => {
+ *   if (!user) return m('.pf-greeting', 'Not logged in');
+ *   return m('.pf-greeting', `Welcome ${user.name}`);
+ * });
+ *
+ * @example
+ * // Nesting Providers creates scoped context values
+ * m(ThemeContext.Provider, {value: 'light'}, [
+ *   m(ThemeContext.Consumer, (theme) => m('div', theme)), // 'light'
+ *   m(ThemeContext.Provider, {value: 'dark'}, [
+ *     m(ThemeContext.Consumer, (theme) => m('div', theme)), // 'dark'
+ *   ]),
+ *   m(ThemeContext.Consumer, (theme) => m('div', theme)), // 'light' again
+ * ]);
+ */
+export function createContext<T>(initialValue: T): {
+  Provider: m.Component<{value: T}>;
+  Consumer: m.Component<(value: T) => m.Children | void>;
+};
+export function createContext<T>(): {
+  Provider: m.Component<{value: T}>;
+  Consumer: m.Component<(value: T | undefined) => m.Children | void>;
+};
+export function createContext<T>(initialValue?: T): {
+  Provider: m.Component<{value: T}>;
+  Consumer: m.Component<(value: T | undefined) => m.Children | void>;
+} {
+  let currentContext: T | undefined = initialValue;
+
+  return {
+    Provider: {
+      view({attrs, children}: m.Vnode<{value: T}>): m.Children {
+        const previousContext = currentContext;
+        currentContext = attrs.value;
+        return [
+          children,
+          m({
+            view() {
+              currentContext = previousContext;
+            },
+          }),
+        ];
+      },
+    },
+    Consumer: {
+      view({children}: m.Vnode<(value: T | undefined) => m.Children | void>) {
+        const viewFn: (context: T | undefined) => m.Children | void =
+          Array.isArray(children) && typeof children[0] === 'function'
+            ? children[0]
+            : () => null;
+        return viewFn(currentContext);
+      },
+    },
+  };
+}

ui/src/base/mithril_utils_unittest.ts

@@ -0,0 +1,193 @@
+// Copyright (C) 2025 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import m from 'mithril';
+import {createContext} from './mithril_utils';
+
+describe('createContext', () => {
+  test('provides default value to consumers', () => {
+    const {Consumer} = createContext('default');
+
+    let receivedValue: string | undefined;
+    const TestComponent = {
+      view: () =>
+        m(Consumer, (value) => {
+          receivedValue = value;
+        }),
+    };
+
+    m.render(document.body, m(TestComponent));
+    expect(receivedValue).toBe('default');
+  });
+
+  test('provides undefined when no default value', () => {
+    const {Consumer} = createContext<string>();
+
+    let receivedValue: string | undefined = 'sentinel';
+    const TestComponent = {
+      view: () =>
+        m(Consumer, (value) => {
+          receivedValue = value;
+        }),
+    };
+
+    m.render(document.body, m(TestComponent));
+    expect(receivedValue).toBeUndefined();
+  });
+
+  test('provider overrides default value', () => {
+    const {Provider, Consumer} = createContext('default');
+
+    let receivedValue: string | undefined;
+    const TestComponent = {
+      view: () =>
+        m(
+          Provider,
+          {value: 'custom'},
+          m(Consumer, (value) => {
+            receivedValue = value;
+          }),
+        ),
+    };
+
+    m.render(document.body, m(TestComponent));
+    expect(receivedValue).toBe('custom');
+  });
+
+  test('nested providers use innermost value', () => {
+    const {Provider, Consumer} = createContext('default');
+
+    const receivedValues: string[] = [];
+    const TestComponent = {
+      view: () =>
+        m(Provider, {value: 'outer'}, [
+          m(Consumer, (value) => {
+            receivedValues.push(value);
+          }),
+          m(
+            Provider,
+            {value: 'inner'},
+            m(Consumer, (value) => {
+              receivedValues.push(value);
+            }),
+          ),
+          m(Consumer, (value) => {
+            receivedValues.push(value);
+          }),
+        ]),
+    };
+
+    m.render(document.body, m(TestComponent));
+    expect(receivedValues).toEqual(['outer', 'inner', 'outer']);
+  });
+
+  test('multiple providers in parallel', () => {
+    const {Provider, Consumer} = createContext('default');
+
+    const receivedValues: string[] = [];
+    const TestComponent = {
+      view: () => [
+        m(Consumer, (value) => {
+          receivedValues.push(value);
+        }),
+        m(
+          Provider,
+          {value: 'foo'},
+          m(Consumer, (value) => {
+            receivedValues.push(value);
+          }),
+        ),
+        m(
+          Provider,
+          {value: 'bar'},
+          m(Consumer, (value) => {
+            receivedValues.push(value);
+          }),
+        ),
+        m(Consumer, (value) => {
+          receivedValues.push(value);
+        }),
+      ],
+    };
+
+    m.render(document.body, m(TestComponent));
+    expect(receivedValues).toEqual(['default', 'foo', 'bar', 'default']);
+  });
+
+  test('different contexts are independent', () => {
+    const Context1 = createContext('default1');
+    const Context2 = createContext('default2');
+
+    const receivedValues: string[] = [];
+    const TestComponent = {
+      view: () =>
+        m(Context1.Provider, {value: 'value1'}, [
+          m(Context2.Provider, {value: 'value2'}, [
+            m(Context1.Consumer, (value) => {
+              receivedValues.push(value);
+            }),
+            m(Context2.Consumer, (value) => {
+              receivedValues.push(value);
+            }),
+          ]),
+        ]),
+    };
+
+    m.render(document.body, m(TestComponent));
+    expect(receivedValues).toEqual(['value1', 'value2']);
+  });
+
+  test('works with complex types', () => {
+    interface User {
+      name: string;
+      age: number;
+    }
+
+    const {Provider, Consumer} = createContext<User>({name: 'Default', age: 0});
+
+    let receivedValue: User | undefined;
+    const TestComponent = {
+      view: () =>
+        m(
+          Provider,
+          {value: {name: 'Alice', age: 30}},
+          m(Consumer, (value) => {
+            receivedValue = value;
+          }),
+        ),
+    };
+
+    m.render(document.body, m(TestComponent));
+    expect(receivedValue).toEqual({name: 'Alice', age: 30});
+  });
+
+  test('handles null values', () => {
+    const {Provider, Consumer} = createContext<string | null>('default');
+
+    let receivedValue: string | null = 'sentinel';
+    const TestComponent = {
+      view: () =>
+        m(
+          Provider,
+          {value: null},
+          m(Consumer, (value) => {
+            receivedValue = value;
+          }),
+        ),
+    };
+
+    m.render(document.body, m(TestComponent));
+    expect(receivedValue).toBeNull();
+  });
+});