@pyreon/ui-core 0.11.5 → 0.11.7

package/README.md

@@ -25,7 +25,9 @@ import { Provider } from '@pyreon/ui-core'
 
 Provider({
   theme: { rootSize: 16, breakpoints: { xs: 0, md: 768 } },
-  children: [/* your app */],
+  children: [
+    /* your app */
+  ],
 })
 ```
 
@@ -58,9 +60,9 @@ Flexible element renderer. Handles components, elements, primitives, and arrays.
 ```ts
 import { render } from '@pyreon/ui-core'
 
-render('hello')           // => 'hello'
-render(MyComponent)       // => MyComponent({})
-render(null)              // => null
+render('hello') // => 'hello'
+render(MyComponent) // => MyComponent({})
+render(null) // => null
 ```
 
 #### isEmpty
@@ -70,9 +72,9 @@ Type-safe emptiness check. Returns `true` for `null`, `undefined`, `{}`, `[]`, a
 ```ts
 import { isEmpty } from '@pyreon/ui-core'
 
-isEmpty({})        // => true
-isEmpty([])        // => true
-isEmpty(null)      // => true
+isEmpty({}) // => true
+isEmpty([]) // => true
+isEmpty(null) // => true
 isEmpty({ a: 1 }) // => false
 ```
 
@@ -83,7 +85,7 @@ Create objects without or with only specified keys. Accept nullable inputs.
 ```ts
 import { omit, pick } from '@pyreon/ui-core'
 
-omit({ a: 1, b: 2, c: 3 }, ['b'])    // => { a: 1, c: 3 }
+omit({ a: 1, b: 2, c: 3 }, ['b']) // => { a: 1, c: 3 }
 pick({ a: 1, b: 2, c: 3 }, ['a', 'b']) // => { a: 1, b: 2 }
 ```
 
@@ -95,8 +97,8 @@ Nested property access and mutation by dot/bracket path. `set` has built-in prot
 import { set, get } from '@pyreon/ui-core'
 
 const obj = {}
-set(obj, 'a.b.c', 42)    // => { a: { b: { c: 42 } } }
-get(obj, 'a.b.c')         // => 42
+set(obj, 'a.b.c', 42) // => { a: { b: { c: 42 } } }
+get(obj, 'a.b.c') // => 42
 get(obj, 'a.x', 'default') // => 'default'
 ```
 
@@ -135,9 +137,9 @@ Both have corresponding TypeScript union types: `HTMLTags` and `HTMLTextTags`.
 
 ## Peer Dependencies
 
-| Package | Version |
-| ------- | ------- |
-| @pyreon/core | >= 0.0.1 |
+| Package        | Version  |
+| -------------- | -------- |
+| @pyreon/core   | >= 0.0.1 |
 | @pyreon/styler | >= 0.0.1 |
 
 ## License

package/lib/index.d.ts

@@ -144,7 +144,7 @@ interface PlatformConfig {
   createMediaQueries?: (props: {
     breakpoints: Record<string, number>;
     rootSize: number;
-    css: CSSEngineConnector["css"];
+    css: CSSEngineConnector['css'];
   }) => Record<string, (...args: any[]) => any>;
 }
 type InitConfig = Partial<CSSEngineConnector & PlatformConfig>;
@@ -164,7 +164,7 @@ declare class Configuration {
   };
   component: string | HTMLTags;
   textComponent: string | HTMLTags;
-  createMediaQueries: PlatformConfig["createMediaQueries"];
+  createMediaQueries: PlatformConfig['createMediaQueries'];
   init: (props: InitConfig) => void;
 }
 declare const config: Configuration;
@@ -178,10 +178,21 @@ type BreakpointKeys = keyof Breakpoints;
 //#endregion
 //#region src/context.d.ts
 /**
- * Internal context shared across all @pyreon packages.
- * Carries the theme object plus any extra provider props.
+ * Core context value shared across all @pyreon UI packages.
  */
-declare const context: _pyreon_core0.Context<any>;
+interface CoreContextValue {
+  theme: Record<string, unknown>;
+  mode: 'light' | 'dark';
+  isDark: boolean;
+  isLight: boolean;
+}
+/**
+ * Internal reactive context shared across all @pyreon packages.
+ * Carries the theme object, mode, and derived dark/light flags.
+ *
+ * ReactiveContext means useContext() returns `() => CoreContextValue`.
+ */
+declare const context: _pyreon_core0.ReactiveContext<CoreContextValue>;
 type Theme = Partial<{
   rootSize: number;
   breakpoints: Breakpoints;
@@ -190,10 +201,6 @@ type ProviderType = Partial<{
   theme: Theme;
   children: VNodeChild;
 } & Record<string, any>>;
-/**
- * Provider that feeds the internal Pyreon context with the theme.
- * When no theme is supplied, renders children directly.
- */
 declare function Provider({
   theme,
   children,
@@ -218,8 +225,8 @@ declare const isEmpty: IsEmpty;
 declare const isEqual: (a: unknown, b: unknown) => boolean;
 //#endregion
 //#region src/PyreonUI.d.ts
-type ThemeMode = "light" | "dark";
-type ThemeModeInput = ThemeMode | "system";
+type ThemeMode = 'light' | 'dark';
+type ThemeModeInput = ThemeMode | 'system';
 interface PyreonUIProps {
   /** Theme object with breakpoints, rootSize, and custom keys. */
   theme: PyreonTheme;
@@ -305,5 +312,5 @@ declare const throttle: <T extends (...args: any[]) => any>(fn: T, wait?: number
 };
 declare const merge: <T extends Record<string, any>>(target: T, ...sources: Record<string, any>[]) => T;
 //#endregion
-export { type BreakpointKeys, type Breakpoints, type CSSEngineConnector, type HTMLElementAttrs, type HTMLTagAttrsByTag, type HTMLTags, type HTMLTextTags, HTML_TAGS, HTML_TEXT_TAGS, type IsEmpty, Provider, PyreonUI, type PyreonUIProps, type Render, type ThemeMode, type ThemeModeInput, compose, config, context, get, hoistNonReactStatics, init, isEmpty, isEqual, merge, omit, pick, render, set, throttle, useMode, useStableValue };
+export { type BreakpointKeys, type Breakpoints, type CSSEngineConnector, type CoreContextValue, type HTMLElementAttrs, type HTMLTagAttrsByTag, type HTMLTags, type HTMLTextTags, HTML_TAGS, HTML_TEXT_TAGS, type IsEmpty, Provider, PyreonUI, type PyreonUIProps, type Render, type ThemeMode, type ThemeModeInput, compose, config, context, get, hoistNonReactStatics, init, isEmpty, isEqual, merge, omit, pick, render, set, throttle, useMode, useStableValue };
 //# sourceMappingURL=index2.d.ts.map

package/lib/index.js

@@ -1,5 +1,5 @@
 import { ThemeContext, css, keyframes, styled } from "@pyreon/styler";
-import { createContext, h, provide, useContext } from "@pyreon/core";
+import { createReactiveContext, h, provide, useContext } from "@pyreon/core";
 import { computed, signal } from "@pyreon/reactivity";
 import { enrichTheme } from "@pyreon/unistyle";
 
@@ -46,20 +46,36 @@ const isEmpty = ((param) => {
 //#endregion
 //#region src/context.tsx
 /**
-* Internal context shared across all @pyreon packages.
-* Carries the theme object plus any extra provider props.
+* Internal reactive context shared across all @pyreon packages.
+* Carries the theme object, mode, and derived dark/light flags.
+*
+* ReactiveContext means useContext() returns `() => CoreContextValue`.
 */
-const context = createContext({});
+const context = createReactiveContext({
+	theme: {},
+	mode: "light",
+	isDark: false,
+	isLight: true
+});
 /**
+* @internal Low-level provider — use `PyreonUI` from `@pyreon/ui-core` instead.
+*
 * Provider that feeds the internal Pyreon context with the theme.
 * When no theme is supplied, renders children directly.
+*
+* @deprecated Prefer `<PyreonUI theme={theme}>` which handles all context layers.
 */
+const __DEV__ = typeof process !== "undefined" && process?.env?.NODE_ENV !== "production";
 function Provider({ theme, children, ...props }) {
+	if (__DEV__) console.warn("[Pyreon] CoreProvider is internal. Use <PyreonUI theme={theme}> instead — it handles all context layers (styler, core, mode) in one component.");
 	if (isEmpty(theme) || !theme) return children ?? null;
-	provide(context, {
+	provide(context, () => ({
 		theme,
+		mode: props.mode ?? "light",
+		isDark: props.isDark ?? false,
+		isLight: props.isLight ?? true,
 		...props
-	});
+	}));
 	return children ?? null;
 }
 
@@ -287,8 +303,8 @@ function getSystemMode() {
 	});
 	return _systemMode;
 }
-/** Context value is a getter — consumers call it to read the current mode reactively. */
-const ModeContext = createContext(() => "light");
+/** Reactive context — useContext(ModeContext) returns () => ThemeMode. */
+const ModeContext = createReactiveContext("light");
 const INVERSED = {
 	light: "dark",
 	dark: "light"
@@ -338,18 +354,12 @@ function PyreonUI({ theme, mode = "light", inversed, children }) {
 	const modeComputed = computed(resolveMode);
 	const enrichedTheme = enrichTheme(theme);
 	provide(ThemeContext, enrichedTheme);
-	provide(context, {
+	provide(context, () => ({
 		theme: enrichedTheme,
-		get mode() {
-			return modeComputed();
-		},
-		get isDark() {
-			return modeComputed() === "dark";
-		},
-		get isLight() {
-			return modeComputed() === "light";
-		}
-	});
+		mode: modeComputed(),
+		isDark: modeComputed() === "dark",
+		isLight: modeComputed() === "light"
+	}));
 	provide(ModeContext, () => modeComputed());
 	return children ?? null;
 }

package/package.json

@@ -1,24 +1,13 @@
 {
   "name": "@pyreon/ui-core",
-  "version": "0.11.5",
+  "version": "0.11.7",
+  "description": "Core utilities, config, and context for Pyreon UI System",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/pyreon/pyreon",
     "directory": "packages/ui-system/ui-core"
   },
-  "description": "Core utilities, config, and context for Pyreon UI System",
-  "license": "MIT",
-  "type": "module",
-  "sideEffects": false,
-  "exports": {
-    ".": {
-      "bun": "./src/index.ts",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
-    }
-  },
-  "types": "./lib/index.d.ts",
-  "main": "./lib/index.js",
   "files": [
     "lib",
     "!lib/**/*.map",
@@ -27,26 +16,37 @@
     "LICENSE",
     "src"
   ],
-  "engines": {
-    "node": ">= 22"
+  "type": "module",
+  "sideEffects": false,
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "import": "./lib/index.js",
+      "types": "./lib/index.d.ts"
+    }
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
     "build": "bun run vl_rolldown_build",
-    "lint": "biome check src/",
+    "lint": "oxlint .",
     "test": "vitest run",
     "typecheck": "tsc --noEmit"
   },
+  "devDependencies": {
+    "@pyreon/typescript": "^0.11.7",
+    "@vitus-labs/tools-rolldown": "^1.15.3"
+  },
   "peerDependencies": {
-    "@pyreon/core": "^0.11.5",
-    "@pyreon/styler": "^0.11.5",
-    "@pyreon/reactivity": "^0.11.5",
-    "@pyreon/unistyle": "^0.11.5"
+    "@pyreon/core": "^0.11.7",
+    "@pyreon/reactivity": "^0.11.7",
+    "@pyreon/styler": "^0.11.7",
+    "@pyreon/unistyle": "^0.11.7"
   },
-  "devDependencies": {
-    "@vitus-labs/tools-rolldown": "^1.15.3",
-    "@pyreon/typescript": "^0.11.5"
+  "engines": {
+    "node": ">= 22"
   }
 }

package/src/PyreonUI.tsx

@@ -1,15 +1,15 @@
-import type { VNodeChild } from "@pyreon/core"
-import { createContext, provide, useContext } from "@pyreon/core"
-import { computed, signal } from "@pyreon/reactivity"
-import { ThemeContext } from "@pyreon/styler"
-import type { PyreonTheme } from "@pyreon/unistyle"
-import { enrichTheme } from "@pyreon/unistyle"
-import { context as coreContext } from "./context"
+import type { VNodeChild } from '@pyreon/core'
+import { createReactiveContext, provide, useContext } from '@pyreon/core'
+import { computed, signal } from '@pyreon/reactivity'
+import { ThemeContext } from '@pyreon/styler'
+import type { PyreonTheme } from '@pyreon/unistyle'
+import { enrichTheme } from '@pyreon/unistyle'
+import { context as coreContext } from './context'
 
 // ─── Types ──────────────────────────────────────────────────────────────────
 
-export type ThemeMode = "light" | "dark"
-export type ThemeModeInput = ThemeMode | "system"
+export type ThemeMode = 'light' | 'dark'
+export type ThemeModeInput = ThemeMode | 'system'
 
 export interface PyreonUIProps {
   /** Theme object with breakpoints, rootSize, and custom keys. */
@@ -27,7 +27,7 @@ export interface PyreonUIProps {
 
 // ─── System mode detection ──────────────────────────────────────────────────
 
-const _isBrowser = typeof window !== "undefined" && typeof matchMedia === "function"
+const _isBrowser = typeof window !== 'undefined' && typeof matchMedia === 'function'
 
 /** Reactive signal tracking the OS dark mode preference. Lazy-initialized on first use. */
 let _systemMode: ReturnType<typeof signal<ThemeMode>> | undefined
@@ -35,12 +35,12 @@ let _systemMode: ReturnType<typeof signal<ThemeMode>> | undefined
 function getSystemMode(): ReturnType<typeof signal<ThemeMode>> {
   if (_systemMode) return _systemMode
 
-  const prefersDark = _isBrowser && matchMedia("(prefers-color-scheme: dark)").matches
-  _systemMode = signal<ThemeMode>(prefersDark ? "dark" : "light")
+  const prefersDark = _isBrowser && matchMedia('(prefers-color-scheme: dark)').matches
+  _systemMode = signal<ThemeMode>(prefersDark ? 'dark' : 'light')
 
   if (_isBrowser) {
-    matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
-      _systemMode?.set(e.matches ? "dark" : "light")
+    matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+      _systemMode?.set(e.matches ? 'dark' : 'light')
     })
   }
 
@@ -49,10 +49,10 @@ function getSystemMode(): ReturnType<typeof signal<ThemeMode>> {
 
 // ─── Mode context ───────────────────────────────────────────────────────────
 
-/** Context value is a getter — consumers call it to read the current mode reactively. */
-const ModeContext = createContext<() => ThemeMode>(() => "light")
+/** Reactive context — useContext(ModeContext) returns () => ThemeMode. */
+const ModeContext = createReactiveContext<ThemeMode>('light')
 
-const INVERSED: Record<ThemeMode, ThemeMode> = { light: "dark", dark: "light" }
+const INVERSED: Record<ThemeMode, ThemeMode> = { light: 'dark', dark: 'light' }
 
 /**
  * Read the resolved color mode ("light" | "dark") from the nearest PyreonUI.
@@ -96,15 +96,15 @@ function autoInit(): void {
  * <PyreonUI theme={theme} mode="system">
  * ```
  */
-export function PyreonUI({ theme, mode = "light", inversed, children }: PyreonUIProps): VNodeChild {
+export function PyreonUI({ theme, mode = 'light', inversed, children }: PyreonUIProps): VNodeChild {
   autoInit()
 
   // Create a reactive mode getter that resolves "system" and applies inversion.
   // This getter is provided via context — consumers read it lazily in their
   // own reactive scopes, so mode changes propagate automatically.
   const resolveMode = (): ThemeMode => {
-    const raw = typeof mode === "function" ? mode() : mode
-    const resolved = raw === "system" ? getSystemMode()() : raw
+    const raw = typeof mode === 'function' ? mode() : mode
+    const resolved = raw === 'system' ? getSystemMode()() : raw
     return inversed ? INVERSED[resolved] : resolved
   }
 
@@ -119,21 +119,15 @@ export function PyreonUI({ theme, mode = "light", inversed, children }: PyreonUI
   // 1. Styler ThemeContext — for styled() components and useTheme()
   provide(ThemeContext, enrichedTheme)
 
-  // 2. Core context — provide a reactive object with getters.
-  //    Rocketstyle reads mode/isDark/isLight from this context.
-  //    By providing getters, the values update when modeComputed changes.
-  provide(coreContext, {
+  // 2. Core context — provide a reactive getter function.
+  //    coreContext is a ReactiveContext, so provide(() => value).
+  //    Rocketstyle reads mode/isDark/isLight by calling the getter.
+  provide(coreContext, () => ({
     theme: enrichedTheme,
-    get mode() {
-      return modeComputed()
-    },
-    get isDark() {
-      return modeComputed() === "dark"
-    },
-    get isLight() {
-      return modeComputed() === "light"
-    },
-  })
+    mode: modeComputed(),
+    isDark: modeComputed() === 'dark',
+    isLight: modeComputed() === 'light',
+  }))
 
   // 3. Mode context — getter function for useMode()
   provide(ModeContext, () => modeComputed())

package/src/__tests__/PyreonUI.test.tsx

@@ -1,97 +1,100 @@
-import { h } from "@pyreon/core"
-import { describe, expect, it, vi } from "vitest"
-import { PyreonUI } from "../PyreonUI"
+import { h } from '@pyreon/core'
+import { describe, expect, it, vi } from 'vitest'
+import { PyreonUI } from '../PyreonUI'
 
 // Spy on provide to verify context provision
-const provideSpy = vi.spyOn(await import("@pyreon/core"), "provide")
+const provideSpy = vi.spyOn(await import('@pyreon/core'), 'provide')
 
 /** Get the value argument (2nd arg) from a provide() call by index. */
 const getProvideValue = (callIndex: number): any => provideSpy.mock.calls[callIndex]![1]
 
-describe("PyreonUI", () => {
+describe('PyreonUI', () => {
   const theme = {
     rootSize: 16,
     breakpoints: { xs: 0, sm: 576, md: 768 },
-    colors: { primary: "#228be6" },
+    colors: { primary: '#228be6' },
   }
 
   beforeEach(() => {
     provideSpy.mockClear()
   })
 
-  it("renders children", () => {
-    const child = h("div", null, "hello")
+  it('renders children', () => {
+    const child = h('div', null, 'hello')
     const result = PyreonUI({ theme, children: child })
     expect(result).toBe(child)
   })
 
-  it("returns null when no children", () => {
+  it('returns null when no children', () => {
     const result = PyreonUI({ theme })
     expect(result).toBeNull()
   })
 
-  it("calls provide three times (ThemeContext, core context, mode context)", () => {
+  it('calls provide three times (ThemeContext, core context, mode context)', () => {
     PyreonUI({ theme, children: null })
     expect(provideSpy).toHaveBeenCalledTimes(3)
   })
 
-  it("defaults mode to light", () => {
+  it('defaults mode to light', () => {
     PyreonUI({ theme, children: null })
 
-    // Core context (2nd call) — has getter properties for reactive mode
-    const coreCtx = getProvideValue(1)
-    expect(coreCtx.mode).toBe("light")
+    // Core context (2nd call) — ReactiveContext getter function
+    const coreCtxGetter = getProvideValue(1)
+    expect(typeof coreCtxGetter).toBe('function')
+    const coreCtx = coreCtxGetter()
+    expect(coreCtx.mode).toBe('light')
     expect(coreCtx.isLight).toBe(true)
     expect(coreCtx.isDark).toBe(false)
 
     // Mode context (3rd call) — getter function
     const modeGetter = getProvideValue(2)
-    expect(typeof modeGetter).toBe("function")
-    expect(modeGetter()).toBe("light")
+    expect(typeof modeGetter).toBe('function')
+    expect(modeGetter()).toBe('light')
   })
 
-  it("provides dark mode", () => {
-    PyreonUI({ theme, mode: "dark", children: null })
+  it('provides dark mode', () => {
+    PyreonUI({ theme, mode: 'dark', children: null })
 
-    const coreCtx = getProvideValue(1)
-    expect(coreCtx.mode).toBe("dark")
+    const coreCtxGetter = getProvideValue(1)
+    const coreCtx = coreCtxGetter()
+    expect(coreCtx.mode).toBe('dark')
     expect(coreCtx.isDark).toBe(true)
     expect(coreCtx.isLight).toBe(false)
 
     const modeGetter = getProvideValue(2)
-    expect(modeGetter()).toBe("dark")
+    expect(modeGetter()).toBe('dark')
   })
 
-  it("inverts mode when inversed=true", () => {
-    PyreonUI({ theme, mode: "light", inversed: true, children: null })
-    expect(getProvideValue(2)()).toBe("dark")
+  it('inverts mode when inversed=true', () => {
+    PyreonUI({ theme, mode: 'light', inversed: true, children: null })
+    expect(getProvideValue(2)()).toBe('dark')
   })
 
-  it("inverts dark to light", () => {
-    PyreonUI({ theme, mode: "dark", inversed: true, children: null })
-    expect(getProvideValue(2)()).toBe("light")
+  it('inverts dark to light', () => {
+    PyreonUI({ theme, mode: 'dark', inversed: true, children: null })
+    expect(getProvideValue(2)()).toBe('light')
   })
 
-  it("enriches theme with __PYREON__ before providing", () => {
+  it('enriches theme with __PYREON__ before providing', () => {
     PyreonUI({ theme, children: null })
 
     const providedTheme = getProvideValue(0)
     expect(providedTheme.__PYREON__).toBeDefined()
-    expect(providedTheme.__PYREON__.sortedBreakpoints).toEqual(["xs", "sm", "md"])
-    expect(providedTheme.colors).toEqual({ primary: "#228be6" })
+    expect(providedTheme.__PYREON__.sortedBreakpoints).toEqual(['xs', 'sm', 'md'])
+    expect(providedTheme.colors).toEqual({ primary: '#228be6' })
   })
 
-  it("works with system mode (resolves to light in happy-dom)", () => {
-    PyreonUI({ theme, mode: "system", children: null })
-    expect(getProvideValue(2)()).toBe("light")
+  it('works with system mode (resolves to light in happy-dom)', () => {
+    PyreonUI({ theme, mode: 'system', children: null })
+    expect(getProvideValue(2)()).toBe('light')
   })
 
-  it("mode context is a getter function (reactive-ready)", () => {
-    PyreonUI({ theme, mode: "dark", children: null })
+  it('mode context is a getter function (reactive-ready)', () => {
+    PyreonUI({ theme, mode: 'dark', children: null })
     const modeGetter = getProvideValue(2)
     // Mode context is a function, not a static value — consumers call it
     // inside their own reactive scopes for reactive mode switching.
-    expect(typeof modeGetter).toBe("function")
-    expect(modeGetter()).toBe("dark")
+    expect(typeof modeGetter).toBe('function')
+    expect(modeGetter()).toBe('dark')
   })
 })

package/src/__tests__/compose.test.ts

@@ -1,8 +1,8 @@
-import { describe, expect, it } from "vitest"
-import compose from "../compose"
+import { describe, expect, it } from 'vitest'
+import compose from '../compose'
 
-describe("compose", () => {
-  it("should compose two functions right-to-left", () => {
+describe('compose', () => {
+  it('should compose two functions right-to-left', () => {
     const double = (x: number) => x * 2
     const addOne = (x: number) => x + 1
     const composed = compose(addOne, double)
@@ -10,7 +10,7 @@ describe("compose", () => {
     expect(composed(3)).toBe(7)
   })
 
-  it("should compose three functions right-to-left", () => {
+  it('should compose three functions right-to-left', () => {
     const add = (x: number) => x + 1
     const mul = (x: number) => x * 3
     const sub = (x: number) => x - 2
@@ -18,15 +18,15 @@ describe("compose", () => {
     expect(compose(add, mul, sub)(5)).toBe(10)
   })
 
-  it("should work with a single function", () => {
+  it('should work with a single function', () => {
     const identity = (x: number) => x
     expect(compose(identity)(42)).toBe(42)
   })
 
-  it("should pass value through string transforms", () => {
+  it('should pass value through string transforms', () => {
     const upper = (s: string) => s.toUpperCase()
     const exclaim = (s: string) => `${s}!`
     // exclaim('hello') = 'hello!', upper('hello!') = 'HELLO!'
-    expect(compose(upper, exclaim)("hello")).toBe("HELLO!")
+    expect(compose(upper, exclaim)('hello')).toBe('HELLO!')
   })
 })