Reference

API Reference

A quick reference of the symbols exported from the @motifx/core package.

This section is a quick reference of the main symbols exported from the @motifx/core package. Every row links to the related detailed section.

Application

Symbol Kind Description
Application class The application instance. The global instance is reached through Application.main, and from a component through context (this.context in a class and in Options, the context of the root component in a function component).
Application.CreateBuilder() static Produces an ApplicationBuilder.
ApplicationBuilder class Carries the services collection; produces an Application with build().
app.run(host, root?) method Mounts the application on a DOM element. If host is a comment or text node, the application is placed right in front of that node and the node stays in place; if the node has no parent element, MJX416 is thrown. A disposed application starts again with run(): Application.main is filled again, services are created again on first request (those with startup: true right away), a new module is set up with the router configuration, the useTransitions mode is applied again, a layer read in the meantime is moved after the host, and dispose() works again. If a new application was set up in the meantime, MJX405 is thrown.
app.useRouter(opts) method Defines routing.
app.restartRouter(uri?) method Sets up the router from scratch and restarts it from the root (/) or from the given address: if a new useRouter configuration was given while running, it uses that, otherwise the current configuration. The route list, the keepAlive cache and the stack are reset; the page on screen leaves like a leaving page and the new page is built (onRouterChanged runs with initial: true); the address is written over the current history entry. Returns the result of the startup navigation. Has no effect before run.
app.connectDocument(doc) method Connects another document of the same origin (a window.open window or an <iframe>) to the application: the router's link catcher and the stack's scroll listeners are set up on that document too. It is counted; the function it returns undoes the connection, which also comes undone on its own when the document's window gets pagehide, and app.dispose() undoes all of them. It has no effect for the page's own document. A value that is not a document, has no window or cannot be accessed throws MJX417.
app.windows property The window manager (WindowManager): open(component, options) opens the component in a new window, or always on top with kind: "pip", and returns an AppWindow handle; create, attach, of, supports, closeAll; list is reactive; the events are window-opened / window-closed. See: Windows.
app.layer property The page layer (Component): the first time it is read, it puts a plain <div> at the end of <body>, after the host element, and returns the component that wraps it (if the host is <body> itself or contains the layer, the layer stays at the end of the host and the shell content goes in front of it); it writes no styles or attributes, can be read before run() too (if there is no <body> yet, it is placed when the document loads; if the element has been taken out of the page, it is put back at the end of the body the first time content asks for a place, or in run()), and app.dispose() disposes it together with its contents and removes the element. See: Page layer.
app.layerOf(target?, ...components) method Returns the layer of the target's (a component or a DOM node) document: the host if it is an app.windows window, otherwise, or if there is no target, app.layer; it adds the given components there with controls.add. A first component that has no parent and whose element is in no document is content, not a target; a root without a parent whose element sits in a document is a target. A target that is neither a component nor a node throws MJX424.
app.navigate(uri, options?) / app.navigateByName(name, params?, options?) method Navigation in code; the options are passed on to the router (NavigationOptions). Returns the result of the navigation (e.g. { ok: false, cancelled: true, reason: 'guard' } when a guard cancels it).
app.router.navigate(uri, options?) method Navigation with options: { replace?, state?, force?, scroll? } (NavigationOptions).
app.router property A single object for the whole application (Router); reactive, read-only route fields: params, route, uri, ok, meta, extend, fullPath, aliasOf, chain, direction, state, stack (only while stack is on). See: Navigation and Route State.
app.useGuard(guard) / app.use(mw) method A navigation guard / middleware. For after a navigation, app.onRouterChanged(fn).
app.on/fire/off method The application event bus. on returns an unsubscribe function.
app.onRouterChanged(fn) method Runs on every navigation (startup and 404 included) with { uri, params, meta, route, ok, initial, redirectedFrom?, direction, state }.
app.onLifecycle(fn) method The application lifecycle: { state, visible, online }; state: 'visible' \| 'hidden' \| 'frozen' \| 'resumed' \| 'restored' \| 'online' \| 'offline'. Returns an unsubscribe function. See: Lifecycle.
app.isVisible / app.isOnline property The current visibility and connectivity state.
app.router.evict(name \| route?) method Disposes the instances in the keepAlive cache (with no argument: all of them).
app.router.resolve(uri) / app.router.href(name, params?) / app.router.routes method / property Matching without navigating (RouteResolution: { chain, result }), the path of a named route, and the route list in definition order (RouteInfo[]). See: The Route Table.
app.router.scrollPositions() / app.router.restoreScrollPositions(positions) / app.router.saveScrollPositions(fn) method The scroll memory's positions ({ "/notes": 1200 }, including that of the page on screen); adds the given positions to the memory (before run() too); calls fn(positions) every time saving is needed (when leaving a page, on pagehide, when the page is hidden, on app.dispose()) and returns a function that removes the subscription. Empty / no effect while scrollMemory is off. See: Scroll memory.
app.useDevelopment(b) / app.useLogging(b) / app.useReactiveMonitor(o) method Development configuration.
app.dispose() method → Promise<void> Sets app.state to 'disposing'; disposes the router and the lifecycle listeners, and rolls back the address according to the router's mode (history: /; hash/file: only # is removed; shell and no router: not touched) (these happen synchronously). Then it disposes the route pages (with their leave animations) and the shell that run() set up (its RouterView and the root given to run() included), disposes the service provider last, and empties Application.main. While the tree is torn down, every component and the code running during animations see the same services and context. The host element stays on the page, empty. The promise resolves when everything, the services' async disposes included, is finished: await app.dispose(); a second call in the same life returns the same promise; in an application restarted with run(), dispose() works again; called again on a finished application, it disposes the layer, windows, document connections and recreated services set up since then, and does not touch the address or the transition mode; a call that arrives while this is in progress gets the same promise too.
app.state property → ApplicationState 'initializing' (set up), 'running' (run() was called), 'disposing' (dispose() is in progress), 'disposed' (can be restarted with run()). While an application is 'disposing', a new Application.CreateBuilder() can be set up; the pages being torn down keep seeing their own application's services.
useApplication() fn { application, services, router, windows, layer, layerOf, attach }.
useNavigation() fn The same object as app.router (Router).

See: Getting Started, Introduction to Routing.

Components

Symbol Kind Description
Component class The concrete component class. super('div') or super().
ComponentBase class The base of all components.
ComponentMotif class The type of the ComponentBase.motif namespace; the user does not create it with new.
FNComponent(view) fn Wraps a function view in a component.
motifComponent(el, props?) / motifFragment(props?) / motifCompiled(contract) / motifReport(error) fn The calls in the code the compiler produces (_mc, _mf, _mv, _mr); motifCompiled prints an MJX121 warning in development mode if the compiler contract does not match; motifReport reports, as MJX208, an error caught in an expression the compiler wrapped in try/catch (a member call in child position, the left side of ??/||, the condition of &&), and the expression's return value does not change.
motifOptions(object) fn Returns the Options object as it is; on the type side it makes this in the methods the component (ComponentBase & object): this.class, this.motif and this.props compile in strict mode and the editor completes them. Its type is MotifOptions<T>; the el key is required (undefined/null is a fragment).
Frame class A fragment container that holds/swaps a single piece of dynamic content: navigate(page, keepOldControl?) disposes the previous content and places the new one (it takes an array too), navigateLazy(() => import(...), options?) loads with Lazy, flush() disposes the content, current is the content shown, and isBusy tells whether a navigation is in progress. {() => expression} children and when/ternary/switchCase branches are built on top of it. See: Frame.
ContentBody / ContentBlock class A multi-part body: <ContentBody name="x"/> is the body and <ContentBlock target="x">…</ContentBlock> is a part; several blocks pile up in the same body, and when a block is disposed it removes only its own parts. See: ContentBody and ContentBlock.
Transport / TransportTo class Showing a component's content in a named slot outside its tree (e.g. moving page commands into the layout header). See: Transport and TransportTo.
Transporter class Moving in code: Transporter.transport(child, newParent, { index?, keepState?, owner? }), transportMany(children, newParent, options?). See: Transport and TransportTo.
FragmentNode class A component rooted in a fragment (a comment node); motifFragment() and <>…</> produce this. childs and props.nodes are added to the content.
ControlCollection class The type of component.controls; not created with new.
Lazy({ caller, options? }) fn Lazy content through a dynamic import (<Lazy caller={() => import('./X')} />; LazyOptions: Loaderview, Placeholderview, Fallbackview, minDelayMs, timeoutMs, signal, onError, mapResult, retry, onRetry). See: Lazy.
Virtualization<T> class A virtually scrolled list.

Main members of ComponentBase

Member Description
element The real DOM node.
props The component's props.
controls The child control collection (add(...c)/add(index, ...c)/insert(index, ...c)/remove/clear/clearAsync/detach/silentDetach/silentUnlink/move/moveToIndex/forEach/map/items/length). See: Components.
context The running Application; the on/onRouterChanged subscriptions opened through it go away when the component is disposed.
class / attr The class and attribute helpers; attr.hold(values) holds an attribute over the component's own value. See: Element and Appearance.
bindings The binding collection.
state (user-defined) Usually reactive({...}).
view() The method that returns the component's content; not the root (the root element is declared on the class).
motif The namespace of framework operations (ComponentMotif). A subclass can define names such as show, on, clear and options for its own purposes; the framework only uses the this.motif.* path.
motif.on/off/trigger/addHandler Event handling; names with the x: prefix are lifecycle events (x:built, x:mounted, x:disposed…).
motif.isEventFrom(e) true when the DOM event started on this component's element or inside it. See: Events.
motif.show/hide/toggle Visibility.
motif.options The component's settings object (transition, hideStrategy, disableDisposal, chunk).
motif.stopAnimations() Finishes a running CSS class transition and cancels WAAPI animations.
isWait Waiting (the counterpart of x-wait; writable).
isBuilt / isInitialized / isConfigured / isVisible / isDisposed State flags.
parent / childs The parent component / the JSX children written between the tags.
using(promise, onfulfilled?, onrejected?) / doWork(promise) Safe handling of async results after disposal. See: using, doWork.
dispose/disposeAsync Disposal.
motif.clear() Disposes the content (the children).
motif.register/setDisposable Registering resources.
getService(token) DI resolution.
useModel(model) Produces a reactive model.
style(...) / setText(...) Helpers.
siblings all/next/prev/nextAll/prevAll.
$(selector) fromDom() / fromComponent() queries.

Lifecycle hooks

onInitializing, onInitialized, onConfig, onConfigured, onBuilding, initializeComponent, oninitializeComponent, onBuilt, onMounted, onVisibilityChanged, onActivated, onDeactivated, onDisposing, onDisposed.

onRefCreated(sender): called after each ref={this.x} / ref={name} in the class's view() has been applied (sender is the component that got the ref); not called for a ref in the callback form. See: Components.

See: Components, Lifecycle.

Reactivity (store)

Symbol Signature Description
reactive(model) <T>(m: T) => T A reactive proxy.
useModel(model) <T>(m: T) => T An alias of reactive.
createSignal(v) <T>(v: T) => Signal<T> A single-value signal.
createComputed(fn) <T>(fn) => Computed<T> A derived value; computed at setup and on every change.
createLazyComputed(fn) <T>(fn) => LazyComputed<T> A lazy derived value; marked dirty on change and computed when read (value, peek, isDirty, dispose).
createSelection(fn) <T>(fn: () => T) => KeySelection<T> A keyed selection: isSelected(key) subscribes the binding that calls it only to that key; when the source changes, only the bindings of the old and the new value wake up. dispose() stops tracking. See: Reactivity.
asReadonly(obj) <T>(o: T) => DeepReadonly<T> A live read-only view; reads are tracked, and writes and changing methods throw MJX212. See: Reactivity.
isReadonly(v) (v: unknown) => boolean true if the value is a view obtained with asReadonly.
effect(fn, onValue?) (fn, cb?) => () => void A side effect; returns a stop function. onValue receives the return value of fn after every run, and reads inside it are not tracked.
asyncTracking object The runtime helper the compiler uses to wrap the awaits in a Virtualization dataRequest (capture/suspend/resume/end); not called by hand. See: Reactivity.
untracked(fn) <T>(fn: () => T) => T A region without tracking; gives the return value of fn. effect calls inside it track as usual.
deepClone(v) (v) => v A deep copy.
clearModel(m) (m) => void Clears the reactive record.
Signal<T> / Computed<T> / LazyComputed<T> class Fine-grained primitives.

See: Reactivity.

Bindings — component.bindings

Method Description
add(prop, source, member?, format?, formatInfo?) A one-way binding. formatInfo: { locale?, currency? }.
model(source, member?, format?, formatInfo?) A two-way binding (based on the element type).
model(getter, setter) A two-way binding with functions; x-model compiles to this.
writeModel(value) Writes the value back to the model/x-model bindings on the component; true if it wrote (see Forms).
text(fn) / value(fn) A textContent / value binding.
when(condFn, renderFn) Conditional content; the branch is rebuilt when the condition's value changes (Object.is; two falsy values count as the same).
ternary(condFn, trueFn, falseFn) A two-branch condition; the branch is rebuilt when the condition's value changes (Object.is).
list(itemsFn, renderFn) / loop(...) A list; rows are matched to the item object.
switchCase(discFn, cases, defaultFn?) Multiple branches.
method(fn) Reactive text / single content.
watch(fn) A watcher cleaned up automatically.
wait(fn) / display(fn) / html(fn) Waiting / visibility / innerHTML.
remove(binding) Removes the binding from the collection and turns it off.

See: Conditional Rendering and Lists, Forms and Two-Way Binding.

Dependency injection

Symbol Description
ServiceCollection The registration collection (addSingleton/addScoped/addTransient, tryAdd*, replace, remove, has).
ServiceProvider The resolver: get(token) is synchronous, getAsync(token) is for async factory/Promise registrations, createScope(name?) is a child scope, enableAutoDisposeTransients() disposes the transients in a child scope together with the scope, getAllServices() is the collection, dispose(). See: Resolving Services, Disposing Services.
@Injectable(opts?) Marks the class for automatic registration; deps gives the constructor parameters in order, and startup: true creates the singleton inside app.run(). It is a standard (TC39) class decorator.
inject(token) Resolves a dependency in a field initializer or the constructor of a class the provider builds; the return type comes from the token.
FromService(token) Quick resolution from the application's provider; the return type is T | null: if it cannot resolve, it returns null and prints an MJX414 warning in development mode. If you are sure it is registered, write FromService(X)!.
ServiceLifetime 'transient' \| 'singleton' \| 'scoped'.

See: Introduction to Dependency Injection.

Routing

Symbol Description
RouteItem The route definition type (one of control or redirect is required).
RouteRedirect / RedirectTarget The redirect value (string \| (to) => string) and the { path, params, meta } passed to the function.
RouterView The slot for a route's output (name?).
RouterLink A link component with active/match classes (the default element is <a>). Props: to, el, activeClass, exactClass, onActive/offActive, onExact/offExact, showHref, target, text, bypass (leaves the click to the browser). See: Links.
NavigationDirection 'initial' \| 'push' \| 'replace' \| 'back' \| 'forward' \| 'traverse'.
StackOptions The useRouter({ stack }) settings: retain, depth, persist, animation, duration, swipeBack.
StackEntryInfo An item of app.router.stack: { index, uri, current, retained }.
RouteInfo An item of app.router.routes: { fullPath, name, meta, route, chain }.
StackTransitionContext The { direction, entering, leaving } a custom stack animation receives.
ScrollMemoryOptions The scrollMemory settings; container scrolling with container.

Standard <a> links are also brought into routing with the rel="router" attribute.

See: Introduction to Routing.

Disposal (disposable)

Symbol Description
IDisposable { dispose(): void }.
Disposable The base class of disposable objects (ComponentBase derives from it); dispose().
DisposableStore Cleaning up a group (add, delete, detach, clear, dispose, isDisposed).
disposableCore.toDisposable(fn) / toDisposable(fn) Wraps a function in an IDisposable.
disposableCore.disposableTracker A tracker hook for counting live components (IDisposableTracker).

See: Memory Management and Disposal.

Common helpers

Symbol Description
dom DOM creation helpers: createElement(tag, options?) (a template element per tag is cached and cloned; options applies only on the first creation; 'text' gives a text node; MJX101 if there is no document), createElementNS(ns, tag, options?) (error MJX103), createDocumentFragment(), createComment(text), createTextNode(text), querySelectorAll(selector), convertToSvgElement(el) (recreates the element in the SVG namespace and puts it in its place), window, document, body.
List, Dictionary, LinkedList Collection structures. See: Collections.
Query<T> / Query.from(source) / Group<TKey, T> A chainable query wrapper (where, select, orderBy, groupBy, first, any, aggregate, toArray …). See: Collection Queries (Query).
NameValuePair<K, V> A { Key, value } pair (an item of Dictionary). See: Collections.
NodeTypes Node type constants (an enum).
Emitter<T> A typed event emitter: emitter.event(listener, thisArgs?, disposables?) subscribes and returns an IDisposable, fire(value) broadcasts, and dispose() closes it. A listener error goes to setUnexpectedErrorHandler. See: Error Handling.
JSX The JSX type namespace (JSX.Element, JSX.IntrinsicElements); the compiler uses it for jsx-runtime.
preProcessing(fn) Adds the callback to a permanent list and runs all the callbacks in the list right away; for one-time setups such as style injection.
safeCall, safeCallAsync, safeCallSilent Error-safe call helpers.
errorHandler / setUnexpectedErrorHandler(fn) The central error handler. errorHandler.addListener(fn) receives every error the framework reports as a MotifError. setUnexpectedErrorHandler(fn) receives only unexpected errors without a code (those caught inside safeCall/safeCallAsync and in Emitter listeners; these also go to the addListener listeners as they are); its default rethrows the error with setTimeout. Reports with a code (MJX122, MJX123, MJX208 …) do not go to it. See: Error Handling, Error and Warning Codes.
MotifError / MotifErrorCode The class of the errors the framework throws and reports; it carries a code (such as "MJX302") and an English message of the form [motifjs] MJX302: …, with the original error in cause if there is one.
TransitionProps The transition configuration interface (a type).
Bind<T> / toGetter(v) / read(v) The prop contract: T \| (() => T); toGetter turns it into a getter for live reading, and read gives the current value.
Resilience Resilience helpers: Resilience.create.retry(...).timeout(...).execute(fn) (plus circuitBreaker, bulkhead, rateLimiter, fallback). Its errors are MJX602–MJX605. See: Resilience.
decorate(policy, fn) Wraps a resilience policy around a function: (ctx?) => policy.execute(fn, ctx).
ErrorHandler The class of the errorHandler instance: report(err), addListener(fn), setDevelopmentMode(b), setConsoleLogging(b), isDevelopment(), safeCall/safeCallSilent/wrapSafe/wrapSafeAsync.

Types

Exports that carry no value and are taken only with import type. Their behaviour is described in the related section; their names and shapes are collected here.

Type Shape / Description See
IBaseProp<TProps> The common props every component constructor accepts: TProps + childs, options, onElementCreating, initializeComponent, the lifecycle hooks (onConfig, onBuilt, onMounted, onActivated …); other keys are free (ref, key and transition are not typed separately here). Components, Lifecycle
MotifBaseProps / MotifBindable<T> / MotifValue<T> / MotifClass / MotifStyle JSX attribute types: the class/style/attribute forms that accept a value or a getter. JSX and Templates
Bind<T> T \| (() => T); the prop contract. JSX and Templates
ComponentBaseOptions<TProps> The type of the motif.options object: transition (API), enableRouterClassing (setter), hideStrategy, disableDisposal, chunk, props, getInstance(), hasEvent(name). Lifecycle, Styling and Animation
RouterClassingSettings { to, path, activeClass?, exactClass?, onActive?, offActive?, onExact?, offExact? }. Links
TransitionProps / TransitionMode / CSSTransitionInfo Transition class names and duration / 'concurrent' \| 'out-in' \| 'in-out' / the element's computed transition info. Styling and Animation
IDisposeOptions { deep?, skipLeaveTransition? } — the dispose() options. Lifecycle
IDisposable / IDisposableTracker { dispose() } / the disposableCore.disposableTracker hook. Memory Management and Disposal
IBaseBinding The shape of a binding object registered with bindings.add(binding): propertyName, dataSource, activate(), deactivate(), reActivate(). Writing a Component Library
EventArgs { cancel: boolean } — the event object of hooks and motif.trigger. Lifecycle
VisibilityChangedEventArgs EventArgs + visible: boolean — the argument of onVisibilityChanged; visible is the new state. Lifecycle
HtmlElementEvents / AnyEvents The type of motif.on event names: DOM event names with their modifiers ('click:once:prevent') and the x: lifecycle names. Events
ElementType / IElement / IHtmlElement The element types the Component<TElement> generic accepts. Components
MotifComponentType / MotifComponentConstructor / MotifFunctionalComponent / MotifFunctionalComponentBasic / AnyFunctionalComponent Class, constructor and function component types (for JSX tag types). Components
EffectFn / AsyncTrackingToken The effect function type / the asyncTracking token. Reactivity
ReadonlySignal<T> The asReadonly() view: value, peek(). Reactivity
KeySelection<T> The return of createSelection: (key: T) => boolean and dispose(). Reactivity
DeepReadonly<T> The return type of asReadonly: fields, array elements, and Map and Set contents are read-only all the way down. Reactivity
AppLifecycleState / AppLifecycleEventArgs 'visible' \| 'hidden' \| 'frozen' \| 'resumed' \| 'restored' \| 'online' \| 'offline' / { state, visible, online }. Lifecycle
RouteItem / RouteItemBase / RouteControl / RouteRedirect / RedirectTarget The route definition and its parts. The Route Table
RouterOptions / RouterEvents The useRouter({...}) object / the global hooks { onEntering?, onEnter?, onLeave?, onUpdate? }. Introduction to Routing
WindowOptions / AppWindow / WindowClosedResult / WindowClosingEventArgs / WindowCloseReason The app.windows.open options, the returned handle, the closing result { returned, disposed, kept }, the { window, components, reason } the onClosing hook receives, and the type of the reason. Windows
Router / RouteInfo / RouteResolution / ResolveResult / RouterViewProps The app.router object / an item of routes / the result of resolve() ({ chain: string[], result: ResolveResult }) / the result of a navigation and a match / the RouterView props (name?). Navigation and Route State
NavigationOptions / NavigationDirection / NavigationGuard / NavigationGuardContext Navigation options / direction / the guard signature (ctx, next) => void / { to, from }. Route Hooks and Guards
RouterNavigatedEventArgs The onRouterChanged payload: { uri, params, meta, route, ok, initial, redirectedFrom?, direction?, state? }. Route Hooks and Guards
RouterValidateEventArgs The validate(e) argument: { uri, key, routes, params }. The Route Table
RouteResolveContext The middleware context: { uri, context, rewritePath(uri) }. Route Hooks and Guards
ScrollMemoryOptions / StackOptions / StackSwipeBackOptions / StackEntryInfo / StackTransitionContext The scroll memory and stack navigation settings. Navigation and Route State, Stack Navigation
ServiceLifetime / ServiceDescriptor 'transient' \| 'singleton' \| 'scoped' / the registration definition (token, lifetime, useClass/useValue/useFactory, deps, startup). Registering Services
LazyOptions<T> / LazyRetryOptions The Lazy options / { count, delayMs?, whenOnline? }. Lazy
RetryOptions / TimeoutOptions / CircuitBreakerOptions / BulkheadOptions / RateLimiterOptions / FallbackOptions<T> The Resilience policy options. Resilience
ResiliencePolicy / ResilienceAction<T> / ResilienceContext / CircuitState The { execute(action, ctx?) } interface (Resilience implements it, decorate accepts it) / (ctx?) => T \| Promise<T> / a free-form context object / 'CLOSED' \| 'OPEN' \| 'HALF_OPEN'. Resilience
TransportOptions The Transporter.transport options { index?, keepState?, owner? }. Transport and TransportTo
VirtualizationProps<T> / VirtualizationDataRequest / VirtualizationDataResponse<T> / VirtualizationState<T> The virtual list props, the request/response and the state objects. Virtual Lists (Virtualization)
MotifErrorCode The union of all MJX codes. Error Handling
Group<TKey, T> An item of Query.groupBy, { key, items }. Collection Queries (Query)
Event<T> The type of Emitter.event: (listener, thisArgs?, disposables?) => IDisposable. Events
JSX The JSX type namespace. JSX and Templates
__attr, CustomParameters, IsOptional, OptionalParams, IAttribute, IClass Type helpers and the interfaces of the attr/class helpers; not used directly. —

Developer tools

Symbol Description
app.useReactiveMonitor(o) / configureReactivityLeakMonitor(o) Reactive dependency warnings: { enabled, threshold, name } is the leak watcher (MJX507 when the number of effects tracking a field reaches threshold), dependencies is the threshold for the dependencies an effect can collect in a single run (1000 by default, MJX209 when exceeded; 0 turns it off), and scans is the MJX210 check that catches at run time several instances of the same component type scanning the same list (on by default, false turns it off).
debugGetDeps(target) / debugGetDepMap() Reactive dependency maps; from the @motifx/core/devtools subpath: import { debugGetDeps } from "@motifx/core/devtools".
registerDevtools(name, { describe?, inspect? }) A package opening its own state to DevTools; from the @motifx/core/devtools subpath. Returns { emit, pathOf, dispose } (The DevTools Contract).
MotifDevtools, DevtoolsEvent The types of the globalThis.__MOTIF_DEVTOOLS__ object and its events; from the @motifx/core/devtools subpath (The DevTools Contract).
DevtoolsTreeNode, DevtoolsPath, DevtoolsResult, DevtoolsComponentRef, DevtoolsStoreHolder, DevtoolsExtension, DevtoolsExtensionHandle The part types of the contract: a tree node, a path, a write result, a component reference, a store holder, an extension registration and the object the registration returns; from the @motifx/core/devtools subpath.
nameModuleStore The call the compiler produces in a development build to name module stores; not called by hand (The DevTools Contract).

Special JSX attributes

Without JSX, the counterparts of these attributes are the keys of the props object and the component's calls (see Keys of the props object).

Attribute Description
class / className Class (string/array/object/getter).
style / x-style Style.
on<event> A DOM event (:once, :prevent, :stop, :capture, :passive, :self, :trusted).
on:name / on-name / on_name Attaches the handler as it is with motif.on("name", fn) (DOM and custom events; only the prefix is dropped, on-my-event → my-event); parameter count ≤ 1 → fn(event), 2+ → fn(sender, event).
ref / x-ref Captures the tag's component instance: ref={(c) => …} or ref={this.field} (ref={field} in a function component), on every tag, exactly once; if both are written on the same tag, they run in source order. It works only on the component it is given to (the returned root in a function component); it is not part of props or this.props. For an inner item, use a separate prop name (e.g. inputRef).
initializeComponent Called once during setup with the tag's component (the same on plain DOM, class and function component tags; the returned root for a function). It runs together with the setup code the compiler produces.
oninitializeComponent Called right after all initializeComponent code (the class method, the value on the tag, the one the compiler produced), before view(). Written as a class method or a tag prop; on a function component it is applied to the returned root.
x-html Reactive innerHTML.
x-wait / x-display / x-chunk Waiting / visibility / building the children in slices (x-chunk: the frame time decides how many to build per frame; x-chunk={50}: 50 in the first round, then at least 50 children per frame).
key Identifies a list item; checked for duplicates in development mode (MJX202). Rows are matched by the item object, and key does not change how the DOM is reused.
transition An enter/leave transition (a string or TransitionProps).
on<lifecycle> / x-<lifecycle> / x:<lifecycle> Lifecycle hooks; several spellings on the same tag are combined, and all of them run in source order.
options={{ hideStrategy, disableDisposal, chunk }} The component's settings; copied into motif.options (on a plain DOM tag as well; no attribute is written). See: Lifecycle.
Attributes named after methods focus, blur, click, select, scrollTo/scrollBy/scrollIntoView, show, showModal, close, showPopover, hidePopover, togglePopover, requestSubmit, checkValidity, reportValidity, showPicker, load, setSelectionRange, setRangeText, setPointerCapture, releasePointerCapture, fastSeek … call the element's method of the same name, and no attribute is written; if a getter is given, it is called again on every change. show/showModal/showPopover open with true and close with false (close()/hidePopover()); togglePopover passes the boolean on; methods such as close, requestSubmit and load are called on a truthy value; methods with arguments such as setSelectionRange take the value as their argument (an array → an argument list).

See: JSX and Templates.

Error and warning codes

Every MJX code, its console message and its meaning are on the Error and Warning Codes page.

Next step

For the full list of codes, go on to Error and Warning Codes.