JS API: Rename the u2 Component.run scope helper to runInScope

js-api/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## v.next
 
+* Renamed the u2 `Component.run(fn)` scope helper to `runInScope(fn)` — `run` is inherited by every view and widget and collided with the long-standing `run()` on `FunctionView` and `Tutorial`, breaking those package builds with `TS2416`
 * GROK-20753: Added `DG.SEMTYPE.FUNCTION_NAME` (`'FunctionName'`) — the standard semantic type for a namespace-qualified function name.
 * GROK-20753: Added `FuncCall.evalParamValidators(name)` — runs the parameter's named `validators:` against its current value in the call (resolution and evaluation stay Dart-side; passing validators are omitted from the returned `{message, isError, isHelper}` list).
 * GROK-20753: Added `DG.StringUtils.levenshteinDistance(a, b)` / `jaroWinklerDistance(a, b)` — normalized string distances in [0, 1] (moved from `@datagrok-libraries/u2`)

js-api/src/u2core/component.ts

@@ -127,7 +127,7 @@ export class Component implements BindSource {
     return proto === Object.prototype || proto === null;
   }
 
-  run<T>(fn: () => T): T {
+  runInScope<T>(fn: () => T): T {
     return Scope.runWith(this.scope, fn);
   }
 

libraries/u2/src/components/actions/buttons.ts

@@ -17,7 +17,7 @@ export interface IconButtonOptions {
 }
 
 const NO_OWNER = 'u2: signal binding needs an owner — ' +
-  'wrap the code in Control.build(...) or component.run(...)';
+  'wrap the code in Control.build(...) or component.runInScope(...)';
 
 /** Hover text in the icon.ts convention: the tooltip service when there is a scope to own it,
  * the native `title` otherwise. The tooltip doubles as the accessible name — the u2 tooltip

libraries/u2/src/components/collections/functions-browser.ts

@@ -181,10 +181,10 @@ export class FunctionsBrowser extends Control {
     this._shown = computed(() => filterFuncItems(this._source.value.value, this.query.value,
       this.checkedTags.value, this.checkedRoles.value));
 
-    const searchInput = this.run(() => new TextInput(
+    const searchInput = this.runInScope(() => new TextInput(
       {search: true, inline: true, placeholder: 'Search by name, #tag, or @role', bind: this.query}));
     // the toggle option mirrors showTags into aria-pressed and the pressed skin, however it flips
-    const filterIcon = this.run(() => iconButton('filter', () => {},
+    const filterIcon = this.runInScope(() => iconButton('filter', () => {},
       {tooltip: 'Toggle filter panel', toggle: this.showTags}));
     const searchRow = divH([searchInput, filterIcon], 'u2-fb-search');
     searchRow.dataset.u2 = 'fb-search';
@@ -214,7 +214,7 @@ export class FunctionsBrowser extends Control {
     panes.dataset.u2 = 'fb-panes';
 
     const contextActions = options.contextActions;
-    this._list = this.run(() => new VirtualList<FuncItem>({
+    this._list = this.runInScope(() => new VirtualList<FuncItem>({
       itemHeight: options.itemHeight ?? 28,
       keyOf: (item) => item.name,
       render: (item, _index, row) => this._renderRow(item, row),
@@ -224,7 +224,7 @@ export class FunctionsBrowser extends Control {
     this._list.setItems(this._shown);
 
     const emptyMessage = span('', 'u2-fb-empty-message');
-    const clearSearch = this.run(() => button('Clear search', () => this.query.value = ''));
+    const clearSearch = this.runInScope(() => button('Clear search', () => this.query.value = ''));
     clearSearch.classList.add('u2-fb-clear');
     clearSearch.dataset.u2 = 'fb-clear';
     const empty = divV([emptyMessage, clearSearch], 'u2-async-empty u2-fb-empty');

libraries/u2/src/components/containers/card.ts

@@ -36,7 +36,7 @@ export class Card extends Control {
     this.selected = options.selected instanceof Signal ? options.selected : signal(!!options.selected);
     this.root.classList.add('u2-card');
     this.root.dataset.u2 = 'card';
-    this.body = this.run(() => this._build(options));
+    this.body = this.runInScope(() => this._build(options));
     this._wire(options);
   }
 

libraries/u2/src/components/containers/dialog.ts

@@ -171,7 +171,7 @@ export class Dialog extends Control {
   }
 
   private _button(text: string, onClick: () => void, primary?: boolean): HTMLButtonElement {
-    return this.run(() => button(text, onClick, {primary}));
+    return this.runInScope(() => button(text, onClick, {primary}));
   }
 
   private _finish(fn: (() => unknown) | undefined): void {

libraries/u2/src/components/containers/section.ts

@@ -30,7 +30,7 @@ export class Section extends Control {
     this.expanded = options.expanded instanceof Signal ? options.expanded :
       signal(options.expanded !== false);
     const collapsible = options.collapsible !== false;
-    const title = this.run(() => span(options.title, 'u2-section-title'));
+    const title = this.runInScope(() => span(options.title, 'u2-section-title'));
     this.header = div([title], 'u2-section-header');
     this.header.id = `${id}-header`;
     this.body = div([], 'u2-section-body');

libraries/u2/src/components/containers/wizard.ts

@@ -120,7 +120,7 @@ export class Wizard extends Control {
   /** Shows the wizard as a modal dialog; repeated calls reopen the same one. */
   openInDialog(title: string, options: {width?: number, height?: number} = {}): Dialog {
     if (!this._dialog) {
-      const dialog = this.run(() => Dialog.create(title).add(this));
+      const dialog = this.runInScope(() => Dialog.create(title).add(this));
       this._dialog = dialog;
       this._footer.insertBefore(this._button('CANCEL', () => dialog.close()), this._back);
       let open = false;
@@ -217,7 +217,7 @@ export class Wizard extends Control {
   }
 
   private _button(text: string, onClick: () => void, primary?: boolean): HTMLButtonElement {
-    return this.run(() => button(text, onClick, {primary}));
+    return this.runInScope(() => button(text, onClick, {primary}));
   }
 
   private _focusStep(index: number): void {

libraries/u2/src/components/display/async-view.ts

@@ -56,7 +56,7 @@ export class AsyncView<T> extends Control {
     this._skeleton = options?.skeleton ?? false;
     this.root.classList.add('u2-async-view');
     this.root.dataset.u2 = 'async-view';
-    this._retry = this.run(() => button('Retry', () => source.retry()));
+    this._retry = this.runInScope(() => button('Retry', () => source.retry()));
     this.own(() => this._releaseContent());
     this.effect(() => this._apply(source.state.value));
   }

libraries/u2/src/components/display/badge.ts

@@ -11,7 +11,7 @@ function owner(): Scope {
   const scope = Scope.ambient;
   if (!scope) {
     throw new Error('u2: signal binding needs an owner — ' +
-      'wrap the code in Control.build(...) or component.run(...)');
+      'wrap the code in Control.build(...) or component.runInScope(...)');
   }
   return scope;
 }

libraries/u2/src/components/display/progress.ts

@@ -43,7 +43,7 @@ export class ProgressBar extends Control {
 
     const description = options?.description;
     if (description !== undefined)
-      this.root.append(this.run(() => span(description, 'u2-progress-description')));
+      this.root.append(this.runInScope(() => span(description, 'u2-progress-description')));
 
     this.root.classList.toggle('u2-progress-indeterminate', this._indeterminate);
     this.effect(() => this._apply(this.value.value));

libraries/u2/src/components/display/stat-card.ts

@@ -40,7 +40,7 @@ export class StatCard extends Control {
     this.root.dataset.u2 = 'stat-card';
     this._valueEl = div(undefined, 'u2-stat-value');
     this._deltaEl = options.delta === undefined ? undefined : div(undefined, 'u2-stat-delta');
-    this.run(() => {
+    this.runInScope(() => {
       if (options.icon !== undefined)
         this.root.append(icon(options.icon, {cls: 'u2-stat-icon'}));
       this.root.append(this._valueEl, span(options.label, 'u2-stat-label'));

libraries/u2/src/components/inputs/message-input.ts

@@ -94,7 +94,7 @@ export class MessageInput extends Control {
     editor.dataset.placeholder = options.placeholder ?? '';
     editor.style.maxHeight = `${options.maxHeight ?? 160}px`;
 
-    this.run(() => {
+    this.runInScope(() => {
       const tools = document.createElement('div');
       tools.className = 'u2-msg-tools';
       for (const provider of this._providers) {

libraries/u2/src/core/elements.ts

@@ -9,7 +9,7 @@ export type Child = HTMLElement | Control | string | ReadonlySignal<unknown>;
 export type Text = string | ReadonlySignal<unknown>;
 
 const NO_OWNER = 'u2: signal binding needs an owner — ' +
-  'wrap the code in Control.build(...) or component.run(...)';
+  'wrap the code in Control.build(...) or component.runInScope(...)';
 
 function isSignal(x: unknown): x is ReadonlySignal<unknown> {
   return x instanceof Signal;

libraries/u2/src/core/input-base.ts

@@ -86,7 +86,7 @@ export abstract class Input<T, O extends InputOptions<T> = InputOptions<T>> exte
     this._optionsRail = div([], 'u2-input-options');
     this._optionsRail.dataset.u2Part = 'options';
     this._error.dataset.u2Part = 'error';
-    this._editor = this.run(() => this.createEditor());
+    this._editor = this.runInScope(() => this.createEditor());
     this._editor.classList.add('u2-input-editor');
     this._editor.dataset.u2Part = 'editor';
     // prepended: a subclass that filled the rail from createEditor already attached it

libraries/u2/src/dg/designer/bind-picker.ts

@@ -102,9 +102,9 @@ export function bindPicker(instance: SpecInstance, onPick: (path: string) => boo
   const dialog = new Dialog(options.prop === undefined ? 'Bind to' : `${options.prop} — bind to`);
   dialog.root.classList.add('u2-bind-picker');
   const groups = bindGroups(instance, bindTree(instance));
-  const search = dialog.run(() =>
+  const search = dialog.runInScope(() =>
     new TextInput({search: true, inline: true, placeholder: 'Search bindings'}));
-  const tree = dialog.run(() => new VirtualTree<BindTreeNode>());
+  const tree = dialog.runInScope(() => new VirtualTree<BindTreeNode>());
   const empty = span('', 'u2-picker-empty');
   tree.expanded.value = new Set(groups.map((group) => group.title));
   dialog.effect(() => {

libraries/u2/src/dg/designer/func-picker.ts

@@ -155,7 +155,7 @@ export function funcPicker(options: FuncPickerOptions): Dialog {
   dialog.root.classList.add('u2-func-picker');
   const entries = funcEntries(DG.Func.find({}) as unknown as FuncLike[]);
   const renderer = handlerRenderer<FuncLike>();
-  const search = dialog.run(() =>
+  const search = dialog.runInScope(() =>
     new TextInput({search: true, inline: true, placeholder: 'Search functions'}));
   const empty = span('', 'u2-picker-empty');
   const host = div([], 'u2-func-picker-params');
@@ -199,15 +199,15 @@ export function funcPicker(options: FuncPickerOptions): Dialog {
         continue;
       input.root.setAttribute('data-u2-prop', name);
       // owned by the dialog, not by the pane the pick rebuilds — the bind picker outlives it
-      bindPickerButton(input, name, () => dialog.run(() => bindPicker(options.instance, (path) => {
+      bindPickerButton(input, name, () => dialog.runInScope(() => bindPicker(options.instance, (path) => {
         binds[name] = path;
         showParams();
       })));
     }
     host.append(form.root);
   };
 
-  const list = dialog.run(() => new VirtualList<FuncEntry>({
+  const list = dialog.runInScope(() => new VirtualList<FuncEntry>({
     itemHeight: 28,
     keyOf: (entry) => entry.name,
     render: (entry, _index, row) => {

libraries/u2/src/dg/designer/palette.ts

@@ -36,8 +36,8 @@ export class Palette extends Control {
     super();
     this.root.classList.add('u2-palette');
     this.root.dataset.u2 = 'palette';
-    this.filter = this.run(() => new TextInput({search: true, inline: true, placeholder: 'Filter'}));
-    const accordion = this.run(() => new Accordion());
+    this.filter = this.runInScope(() => new TextInput({search: true, inline: true, placeholder: 'Filter'}));
+    const accordion = this.runInScope(() => new Accordion());
     accordion.root.classList.add('u2-palette-list');
     this.root.append(this.filter.root, accordion.root);
 

libraries/u2/src/dg/designer/tray.ts

@@ -174,13 +174,13 @@ export class Tray extends Control {
   }
 
   private _addFunc(instance: SpecInstance): void {
-    this.run(() => funcPicker({title: 'Data source: function or query', instance,
+    this.runInScope(() => funcPicker({title: 'Data source: function or query', instance,
       onPick: (pick) => this._options.onAdd(nameForTag(FUNC), (name) =>
         funcSourceNode(instance.registry.get(FUNC), name, pick))}));
   }
 
   private _addEntities(instance: SpecInstance): void {
-    this.run(() => {
+    this.runInScope(() => {
       const collection = new ChoiceInput({label: 'Collection', items: COLLECTIONS, value: COLLECTIONS[0]});
       const filter = new TextInput({label: 'Filter', placeholder: 'A smart-search filter'});
       const pageSize = new NumberInput({label: 'Page size', mode: 'int', value: 20});

libraries/u2/src/dg/designer/view.ts

@@ -78,19 +78,19 @@ export class SpecDesigner extends Control {
     this.root.dataset.u2 = 'designer';
     // the shortcuts below are the view's own: the root has to be able to hold focus for them
     this.root.tabIndex = 0;
-    this._tray = this.run(() => new Tray({
+    this._tray = this.runInScope(() => new Tray({
       onSelect: (node) => this._select(node),
       onContext: (node, x, y) => {
         this._select(node);
         actionsMenu(this._verbs.handBack(this._actions())).show({x, y});
       },
       onAdd: (base, seed) => this._dragLayer.addComponent(base, seed),
     }));
-    this._tree = this.run(() => new VirtualTree<SpecNode>({
+    this._tree = this.runInScope(() => new VirtualTree<SpecNode>({
       onRename: (node, label) => this._rename(node, label),
       contextActions: (node) => this._rowActions(node),
     }));
-    this._mode = this.run(() => new ButtonGroup({
+    this._mode = this.runInScope(() => new ButtonGroup({
       items: [{id: 'design', label: 'Design'}, {id: 'run', label: 'Run'}],
       toggle: 'single',
       density: 'ribbon',
@@ -197,7 +197,7 @@ export class SpecDesigner extends Control {
 
     this.open(spec);
 
-    this._palette = this.run(() => new Palette(this._instance?.registry ?? this._registry));
+    this._palette = this.runInScope(() => new Palette(this._instance?.registry ?? this._registry));
     this.toolbox = divV([h3('Palette'), this._palette.root, h3('Structure'), this._tree.root],
       'u2-designer-toolbox');
     this._listen(this._palette.root, 'mousedown', (e) => this._dragLayer.onPaletteDown(e as MouseEvent));
@@ -231,7 +231,7 @@ export class SpecDesigner extends Control {
   }
 
   ribbon(): HTMLElement[] {
-    return this.run(() => this._ribbon.build());
+    return this.runInScope(() => this._ribbon.build());
   }
 
   /** Renders `spec` in place of what the canvas holds, with a fresh editor — an instance and its
@@ -255,7 +255,7 @@ export class SpecDesigner extends Control {
     this._selection.multi = [];
     this._hovered = null;
     this._pendingSelect = null;
-    this._instance = this.run(() => renderSpec(parsed, this._ctx, this._registry,
+    this._instance = this.runInScope(() => renderSpec(parsed, this._ctx, this._registry,
       {designTime: this._mode.selected.peek()[0] !== 'run'}));
     this._surface.append(this._instance.root);
     this._editor.value = new SpecEditor(this._instance);

libraries/u2/src/dg/entities/func-call-history-browser.ts

@@ -63,7 +63,7 @@ export class FuncCallHistoryBrowser extends Control {
     this.own(() => this._pager.dispose());
 
     const itemHeight = options.itemHeight ?? 36;
-    this._list = this.run(() => new VirtualList<DG.FuncCall>({
+    this._list = this.runInScope(() => new VirtualList<DG.FuncCall>({
       itemHeight,
       keyOf: (call) => call.id,
       render: (call, _index, row) => this._renderRow(call, row),
@@ -79,7 +79,7 @@ export class FuncCallHistoryBrowser extends Control {
     this.own(() => this._list.root.removeEventListener('scroll', onScroll));
 
     const emptyMessage = span('', 'u2-fch-empty-message');
-    const retry = this.run(() => button('Retry', () => this._pager.loadMore()));
+    const retry = this.runInScope(() => button('Retry', () => this._pager.loadMore()));
     retry.dataset.u2 = 'fch-retry';
     const stateArea = divV([emptyMessage, retry], 'u2-async-empty u2-fch-state');
     stateArea.dataset.u2 = 'fch-state';

libraries/u2/src/dg/forms/object-form.ts

@@ -346,11 +346,11 @@ export class ObjectForm extends Form {
       nullable: prop.nullable,
       ...rest,
     };
-    const registered = custom ? null : this.run(() => Editors.resolve(prop, options));
+    const registered = custom ? null : this.runInScope(() => Editors.resolve(prop, options));
     const platform = (custom ?? registered) != null ? null :
       ObjectForm.platformInput(this, prop, this.target, this._auto);
     const input = custom ?? registered ?? platform ??
-      this.run(() => inputForProperty(prop, options));
+      this.runInScope(() => inputForProperty(prop, options));
     const native = input === platform;
     if (!native) {
       input.value.value = this._read(prop, kind);
@@ -397,7 +397,7 @@ export class ObjectForm extends Form {
       return null;
     try {
       const input = dg.InputBase.forProperty(prop as any, target);
-      return input == null ? null : form.run(() => fromDartInput(input, prop.name));
+      return input == null ? null : form.runInScope(() => fromDartInput(input, prop.name));
     } catch {
       return null;
     }