@vscode/observables-react 0.1.1-0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Microsoft Corporation.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,349 @@
+# @vscode/observables-react
+
+React bindings for `@vscode/observables`. Provides patterns for building reactive React components with observable state.
+
+> **Note:** React Strict Mode is not supported.
+
+<!-- @codeblock-config
+outDir: readme-codeblock-examples/out
+-->
+
+## Installation
+
+```bash
+npm install @vscode/observables @vscode/observables-react
+```
+
+## Core Patterns
+
+### viewWithModel - The ViewModel Pattern
+
+The recommended way to build components with observable state:
+
+<!-- @codeblock
+file: counter.tsx
+postfix: |
+  export { Counter, CounterModel };
+additionalFiles:
+  - suffix: .playwright-spec.tsx
+    content: |
+      import { test, expect } from '@playwright/experimental-ct-react';
+      import { Counter } from './counter';
+
+      test('counter increments and shows doubled value', async ({ mount }) => {
+        const component = await mount(<Counter initialCount={5} label="Score" />);
+        await expect(component).toContainText('Score: 5');
+        await expect(component).toContainText('Doubled: 10');
+        await component.getByRole('button', { name: '+' }).click();
+        await expect(component).toContainText('Score: 6');
+        await expect(component).toContainText('Doubled: 12');
+      });
+-->
+```tsx
+import { observableValue, derived, IReader } from '@vscode/observables';
+import { ViewModel, viewWithModel, prop } from '@vscode/observables-react';
+
+class CounterModel extends ViewModel({ initialCount: prop.const<number>() }) {
+  public readonly count = observableValue(this, this.props.initialCount);
+  public readonly doubled = derived(this, reader => this.count.read(reader) * 2);
+
+  increment = () => this.count.set(this.count.get() + 1, undefined);
+
+  override dispose(): void {
+    // cleanup
+    super.dispose();
+  }
+}
+
+const Counter = viewWithModel(CounterModel, { label: prop<string>() }, (reader, model, props) => (
+    <div>
+      <span>{props.label.read(reader)}: {model.count.read(reader)}</span>
+      <span>Doubled: {model.doubled.read(reader)}</span>
+      <button onClick={model.increment}>+</button>
+    </div>
+  )
+);
+
+// Usage - both ViewModel props (initialCount) and view props (label) are merged
+const example = <Counter initialCount={10} label="Score" />;
+```
+
+### view - Observable Props
+
+Create components with typed observable props:
+
+<!-- @codeblock display.tsx -->
+```tsx
+import { view, prop } from '@vscode/observables-react';
+
+const Display = view(
+  {
+    label: prop<string>(),
+    count: prop<number>(),
+  },
+  (reader, props) => (
+    <div>
+      <span>{props.label.read(reader)}</span>
+      <span>{props.count.read(reader)}</span>
+    </div>
+  )
+);
+
+// Usage
+const example = <Display label="Total" count={42} />;
+```
+
+### ObsView - Inline Observable Rendering
+
+For embedding observable values in existing components:
+
+<!-- @codeblock obsview.tsx -->
+```tsx
+import { observableValue } from '@vscode/observables';
+import { ObsView } from '@vscode/observables-react';
+
+const count = observableValue('count', 0);
+
+function App() {
+  return (
+    <div>
+      <ObsView>{reader => <span>{count.read(reader)}</span>}</ObsView>
+      <button onClick={() => count.set(count.get() + 1, undefined)}>+</button>
+    </div>
+  );
+}
+```
+
+### val - Observable to JSX Helper
+
+Render an observable value inline:
+
+<!-- @codeblock val.tsx -->
+```tsx
+import { observableValue } from '@vscode/observables';
+import { val } from '@vscode/observables-react';
+
+const message = observableValue('msg', 'Hello');
+
+function App() {
+  return <div>{val(message)}</div>;
+}
+```
+
+## Property Transformers
+
+Property transformers control how props are passed to `view`, `viewWithModel`, and `ViewModel`. They define both the input type (what React receives) and the output type (what your render function or ViewModel sees).
+
+### For `view` and `viewWithModel` props
+
+<!-- @codeblock property-transformers.tsx -->
+```tsx
+import { view, prop } from '@vscode/observables-react';
+
+const MyComponent = view(
+  {
+    // prop<T>() - input: T, output: IObservable<T>
+    // No re-render when value changes, read via observable
+    name: prop<string>(),
+    
+    // prop.const<T>() - input: T, output: T
+    // Re-renders when value changes, available directly
+    label: prop.const<string>(),
+    
+    // prop.obs<T>() - input: T | IObservable<T>, output: IObservable<T>
+    // Accepts either, normalizes to observable (slightly more expensive)
+    value: prop.obs<number>(),
+  },
+  (reader, props) => (
+    <div>
+      <span>{props.name.read(reader)}</span>
+      <span>{props.label}</span>
+      <span>{props.value.read(reader)}</span>
+    </div>
+  )
+);
+```
+
+### For `ViewModel` constructor props
+
+The same transformers work in `ViewModel()`, making them available via `this.props`:
+
+- `prop.const<T>()` - When the value changes, the **ViewModel is disposed and recreated**. Use for identity/key-like props. Has a slight performance advantage when the value is not expected to change (no observable wrapper).
+- `prop<T>()` - Changes update the observable without recreating the ViewModel. Use for values that change during the ViewModel's lifetime.
+
+<!-- @codeblock
+file: viewmodel-props.tsx
+prefix: |
+  import { observableValue, IObservable } from '@vscode/observables';
+  import { ViewModel, prop } from '@vscode/observables-react';
+-->
+```tsx
+class MyModel extends ViewModel({
+  initialValue: prop.const<number>(),  // if this changes, MyModel is recreated
+  config: prop<string>(),              // changes update this.props.config observable
+}) {
+  readonly value = observableValue(this, this.props.initialValue);
+}
+```
+
+### `inject` - DI transformer for ViewModels
+
+`inject(key)` is a special transformer that resolves a service from the DI container:
+
+<!-- @codeblock
+file: inject-snippet.tsx
+prefix: |
+  import { observableValue } from '@vscode/observables';
+  import { ViewModel, inject, createServiceKey } from '@vscode/observables-react';
+  class AppModel {
+    userName = observableValue(this, '');
+    login = (_userName: string) => {};
+  }
+-->
+```tsx
+const $AppModel = createServiceKey(AppModel);
+
+class LoginViewModel extends ViewModel({
+  appModel: inject($AppModel),  // resolved from DIContainer, available as this.props.appModel
+}) {
+  public readonly userName = observableValue(this, '');
+  login = () => this.props.appModel.login(this.userName.get());
+}
+```
+
+- Input: optional (can be passed explicitly for testing)
+- Output: the service instance
+- Requires a `DIProvider` ancestor in the component tree
+
+## Dependency Injection
+
+Built-in DI support for ViewModels:
+
+<!-- @codeblock di.tsx -->
+```tsx
+import { observableValue } from '@vscode/observables';
+import { 
+  createServiceKey, DIContainer, DIProvider, inject,
+  ViewModel, viewWithModel 
+} from '@vscode/observables-react';
+
+// The AppModel, for simple apps the central piece for the business logic
+class AppModel {
+  public readonly currentUser = observableValue<string | undefined>(this, undefined);
+  login = (userName: string) => this.currentUser.set(userName, undefined);
+  dispose() {} // Required for DisposableStore
+}
+
+const $AppModel = createServiceKey(AppModel);
+
+// RootViewModel - sets up DI and provides services.
+class RootViewModel extends ViewModel() {
+  private readonly _appModel = this._store.add(new AppModel());
+  public readonly container = new DIContainer()
+    .register($AppModel, this._appModel);
+}
+
+// use `inject` to get the instance. It's private to the view model.
+// The view model acts as an isolating bridge between the app model and the view.
+class LoginViewModel extends ViewModel({ appModel: inject($AppModel) }) {
+  public readonly userName = observableValue(this, '');
+  login = () => this.props.appModel.login(this.userName.get());
+}
+
+// Root component provides DI context
+const Root = viewWithModel(RootViewModel, (_reader, model) => (
+  <DIProvider container={model.container}>
+    <LoginPage />
+  </DIProvider>
+));
+
+const LoginPage = viewWithModel(LoginViewModel, (reader, model) => (
+  <div>
+    <input 
+      value={model.userName.read(reader)} 
+      onChange={e => model.userName.set(e.target.value, undefined)} 
+    />
+    <button onClick={model.login}>Login</button>
+  </div>
+));
+```
+
+## Testing with Mock ViewModels
+
+Override ViewModel instances for testing:
+
+<!-- @codeblock
+file: testing.tsx
+prefix: |
+  import { observableValue, derived } from '@vscode/observables';
+  import { ViewModel, viewWithModel, prop, ProvideMockViewModels, mockViewModel } from '@vscode/observables-react';
+  
+  class CounterModel extends ViewModel({ initialCount: prop.const<number>() }) {
+    public readonly count = observableValue(this, this.props.initialCount);
+    increment = () => this.count.set(this.count.get() + 1, undefined);
+  }
+  const Counter = viewWithModel(CounterModel, (reader, model) => (
+    <div><span>{model.count.read(reader)}</span></div>
+  ));
+-->
+```tsx
+const mockModel = new CounterModel({ initialCount: 0 });
+mockModel.count.set(42, undefined);
+
+const example = (
+  <ProvideMockViewModels mocks={[mockViewModel(CounterModel, mockModel)]}>
+    <Counter initialCount={0} />
+  </ProvideMockViewModels>
+);
+```
+
+## Router (Experimental)
+
+Type-safe routing utilities:
+
+<!-- @codeblock router.tsx -->
+```tsx
+import { Route, Router } from '@vscode/observables-react';
+
+const homeRoute = Route.create('/');
+const userRoute = Route.create('/users/:id', { id: 'string' });
+
+const router = Router.create<string>()
+  .with(homeRoute, () => 'home')
+  .with(userRoute, (args) => `user-${args.id}`);
+```
+
+## API Reference
+
+### Components & Views
+
+- `viewWithModel(ModelClass, props, render)` - Create component with ViewModel
+- `view(props, render)` - Create component with observable props
+- `ObsView` - Inline observable rendering component
+- `Value` - Render observable as component
+- `val(observable)` - Render observable inline
+
+### ViewModel
+
+- `ViewModel(props)` - Base class factory for ViewModels
+- `BaseViewModel` - Base class with disposable store
+- `ProvideMockViewModels` - Override multiple ViewModels for testing
+- `mockViewModel(Class, instance)` - Create mock binding for ProvideMockViewModels
+- `ProvideViewModel` - Override single ViewModel for testing (low-level)
+
+### Property Transformers
+
+- `prop<T>()` - Transform to `IObservable<T>`
+- `prop.const<T>()` - Pass through as `T`
+- `prop.obs<T>()` - Normalize to `IObservable<T>`
+
+### Dependency Injection
+
+- `createServiceKey<T>(name)` or `createServiceKey(Class)` - Create typed service identifier
+- `DIContainer` - Service container
+- `DIProvider` - React context provider
+- `inject(key)` - Property transformer for injection
+
+## License
+
+MIT

package/dist/IPropertyTransformer.d.ts

@@ -0,0 +1,37 @@
+import { IObservable, IReader } from "@vscode/observables";
+import { Context } from "react";
+export type Readable<T> = (reader: IReader) => T;
+export interface IReadableObj<T> {
+    /**
+     * The reader of the component.
+    */
+    read(reader: IReader): T;
+}
+export interface IPropertyTransformerFactory<TIn, TOut> {
+    /** If set, this context's value is passed to create() */
+    readonly _requiredContext?: Context<unknown>;
+    /** @param contextValue - value of _requiredContext if declared, otherwise undefined */
+    create(readable: Readable<TIn>, contextValue: unknown): IReadableObj<TOut>;
+}
+/**
+ * Takes a value of type `T` and makes it available as `IObservable<T>`.
+ * When it changes, the component will not re-render.
+ */
+export declare function prop<T>(): IPropertyTransformerFactory<T, IObservable<T>>;
+export declare namespace prop {
+    var _a: typeof propConst;
+    export var obs: typeof propObs;
+    export { _a as const };
+}
+/**
+ * Takes a value of type `T` and makes it available as `T`.
+ * When it changes, the component will re-render.
+ */
+declare function propConst<T>(): IPropertyTransformerFactory<T, T>;
+/**
+ * Takes a value of type `T` or `IObservable<T>` and makes it available as `IObservable<T>`.
+ * When it changes, the component will not re-render.
+ */
+declare function propObs<T>(): IPropertyTransformerFactory<T | IObservable<T>, IObservable<T>>;
+export {};
+//# sourceMappingURL=IPropertyTransformer.d.ts.map

package/dist/IPropertyTransformer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IPropertyTransformer.d.ts","sourceRoot":"","sources":["../src/IPropertyTransformer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,WAAW,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,KAAK,CAAC,CAAC;AAEjD,MAAM,WAAW,YAAY,CAAC,CAAC;IAC3B;;MAEE;IACF,IAAI,CAAC,MAAM,EAAE,OAAO,GAAG,CAAC,CAAC;CAC5B;AAED,MAAM,WAAW,2BAA2B,CAAC,GAAG,EAAE,IAAI;IAClD,yDAAyD;IACzD,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IAC7C,uFAAuF;IACvF,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE,YAAY,EAAE,OAAO,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;CAC9E;AAED;;;GAGG;AACH,wBAAgB,IAAI,CAAC,CAAC,KAAK,2BAA2B,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAExE;yBAFe,IAAI;;;;;AAIpB;;;GAGG;AACH,iBAAS,SAAS,CAAC,CAAC,KAAK,2BAA2B,CAAC,CAAC,EAAE,CAAC,CAAC,CAEzD;AAED;;;GAGG;AACH,iBAAS,OAAO,CAAC,CAAC,KAAK,2BAA2B,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAErF"}

package/dist/IPropertyTransformer.js

@@ -0,0 +1,64 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { derived } from '@vscode/observables';
+
+/**
+ * Takes a value of type `T` and makes it available as `IObservable<T>`.
+ * When it changes, the component will not re-render.
+ */
+function prop() {
+    return PropertyTransformerFactory.instance;
+}
+/**
+ * Takes a value of type `T` and makes it available as `T`.
+ * When it changes, the component will re-render.
+ */
+function propConst() {
+    return PropertyConstTransformerFactory.instance;
+}
+/**
+ * Takes a value of type `T` or `IObservable<T>` and makes it available as `IObservable<T>`.
+ * When it changes, the component will not re-render.
+ */
+function propObs() {
+    return PropertyObsTransformerFactory.instance;
+}
+prop.const = propConst;
+prop.obs = propObs;
+class PropertyTransformerFactory {
+    create(readableProp) {
+        const d = derived(reader => readableProp(reader));
+        return { read: (_reader) => d };
+    }
+}
+PropertyTransformerFactory.instance = new PropertyTransformerFactory();
+class PropertyConstTransformerFactory {
+    create(readableProp) {
+        const d = derived(reader => readableProp(reader));
+        return { read: (reader) => d.read(reader) };
+    }
+}
+PropertyConstTransformerFactory.instance = new PropertyConstTransformerFactory();
+class PropertyObsTransformerFactory {
+    create(readableProp) {
+        const d = derived(reader => {
+            const v = readableProp(reader);
+            if (isObservable(v)) {
+                return v.read(reader);
+            }
+            else {
+                return v;
+            }
+        });
+        return { read: (_reader) => d };
+    }
+}
+PropertyObsTransformerFactory.instance = new PropertyObsTransformerFactory();
+function isObservable(obs) {
+    return typeof obs === "object" && obs !== null && "read" in obs;
+}
+
+export { prop };
+//# sourceMappingURL=IPropertyTransformer.js.map

package/dist/IPropertyTransformer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IPropertyTransformer.js","sources":["../src/IPropertyTransformer.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAmBA;;;AAGG;SACa,IAAI,GAAA;IAChB,OAAO,0BAA0B,CAAC,QAAQ,CAAC;AAC/C,CAAC;AAED;;;AAGG;AACH,SAAS,SAAS,GAAA;IACd,OAAO,+BAA+B,CAAC,QAAQ,CAAC;AACpD,CAAC;AAED;;;AAGG;AACH,SAAS,OAAO,GAAA;IACZ,OAAO,6BAA6B,CAAC,QAAQ,CAAC;AAClD,CAAC;AAED,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;AACvB,IAAI,CAAC,GAAG,GAAG,OAAO,CAAC;AAEnB,MAAM,0BAA0B,CAAA;AAG5B,IAAA,MAAM,CAAC,YAAyB,EAAA;AAC5B,QAAA,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,IAAI,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;QAClD,OAAO,EAAE,IAAI,EAAE,CAAC,OAAO,KAAK,CAAC,EAAE,CAAC;KACnC;;AALsB,0BAAA,CAAA,QAAQ,GAAG,IAAI,0BAA0B,EAAO,CAAC;AAQ5E,MAAM,+BAA+B,CAAA;AAGjC,IAAA,MAAM,CAAC,YAAyB,EAAA;AAC5B,QAAA,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,IAAI,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;AAClD,QAAA,OAAO,EAAE,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;KAC/C;;AALsB,+BAAA,CAAA,QAAQ,GAAG,IAAI,+BAA+B,EAAO,CAAC;AAQjF,MAAM,6BAA6B,CAAA;AAG/B,IAAA,MAAM,CAAC,YAA0C,EAAA;AAC7C,QAAA,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,IAAG;AACvB,YAAA,MAAM,CAAC,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC;AAC/B,YAAA,IAAI,YAAY,CAAC,CAAC,CAAC,EAAE;AACjB,gBAAA,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;aACzB;iBAAM;AACH,gBAAA,OAAO,CAAC,CAAC;aACZ;AACL,SAAC,CAAC,CAAC;QACH,OAAO,EAAE,IAAI,EAAE,CAAC,OAAO,KAAK,CAAC,EAAE,CAAC;KACnC;;AAZsB,6BAAA,CAAA,QAAQ,GAAG,IAAI,6BAA6B,EAAO,CAAC;AAe/E,SAAS,YAAY,CAAC,GAAQ,EAAA;AAC1B,IAAA,OAAO,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,IAAI,IAAI,MAAM,IAAI,GAAG,CAAC;AACpE;;;;"}

package/dist/ManualChangesHandler.d.ts

@@ -0,0 +1,14 @@
+import { IObservable, IObservableWithChange, IObserver, IDisposable } from "@vscode/observables";
+export declare class ManualChangesHandler<TData> implements IObserver {
+    readonly _run: (changes: TData[]) => void;
+    private _changes;
+    private readonly _map;
+    constructor(_run: (changes: TData[]) => void);
+    addDependency(observable: IObservable<any>, data: TData): IDisposable;
+    private _updateCounter;
+    beginUpdate<T>(observable: IObservableWithChange<T, unknown>): void;
+    endUpdate<T>(_observable: IObservableWithChange<T, unknown>): void;
+    handlePossibleChange<T>(observable: IObservableWithChange<T, unknown>): void;
+    handleChange<T, TChange>(_observable: IObservableWithChange<T, TChange>, _change: TChange): void;
+}
+//# sourceMappingURL=ManualChangesHandler.d.ts.map

package/dist/ManualChangesHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ManualChangesHandler.d.ts","sourceRoot":"","sources":["../src/ManualChangesHandler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEjG,qBAAa,oBAAoB,CAAC,KAAK,CAAE,YAAW,SAAS;aAK3C,IAAI,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,IAAI;IAJjD,OAAO,CAAC,QAAQ,CAAe;IAC/B,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAsC;gBAG1C,IAAI,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,IAAI;IAGjD,aAAa,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,GAAG,WAAW;IAUrE,OAAO,CAAC,cAAc,CAAK;IAE3B,WAAW,CAAC,CAAC,EAAE,UAAU,EAAE,qBAAqB,CAAC,CAAC,EAAE,OAAO,CAAC,GAAG,IAAI;IAKnE,SAAS,CAAC,CAAC,EAAE,WAAW,EAAE,qBAAqB,CAAC,CAAC,EAAE,OAAO,CAAC,GAAG,IAAI;IAWlE,oBAAoB,CAAC,CAAC,EAAE,UAAU,EAAE,qBAAqB,CAAC,CAAC,EAAE,OAAO,CAAC,GAAG,IAAI;IAI5E,YAAY,CAAC,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,qBAAqB,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI;CAGhG"}

package/dist/ManualChangesHandler.js

@@ -0,0 +1,45 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+class ManualChangesHandler {
+    constructor(_run) {
+        this._run = _run;
+        this._changes = [];
+        this._map = new Map();
+        this._updateCounter = 0;
+    }
+    addDependency(observable, data) {
+        this._map.set(observable, data);
+        observable.addObserver(this);
+        return {
+            dispose: () => {
+                this._map.delete(observable);
+                observable.removeObserver(this);
+            }
+        };
+    }
+    beginUpdate(observable) {
+        this._updateCounter++;
+        this._changes.push(this._map.get(observable));
+    }
+    endUpdate(_observable) {
+        this._updateCounter--;
+        if (this._updateCounter === 0) {
+            if (this._changes.length > 0) {
+                const c = this._changes;
+                this._changes = [];
+                this._run(c);
+            }
+        }
+    }
+    handlePossibleChange(observable) {
+        this._changes.push(this._map.get(observable));
+    }
+    handleChange(_observable, _change) {
+        //this._changes.push(this._map.get(observable)!);
+    }
+}
+
+export { ManualChangesHandler };
+//# sourceMappingURL=ManualChangesHandler.js.map

package/dist/ManualChangesHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ManualChangesHandler.js","sources":["../src/ManualChangesHandler.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;MAEa,oBAAoB,CAAA;AAIhC,IAAA,WAAA,CACiB,IAAgC,EAAA;QAAhC,IAAI,CAAA,IAAA,GAAJ,IAAI,CAA4B;QAJzC,IAAQ,CAAA,QAAA,GAAY,EAAE,CAAC;AACd,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,GAAG,EAA2B,CAAC;QAgBnD,IAAc,CAAA,cAAA,GAAG,CAAC,CAAC;KAZtB;IAEL,aAAa,CAAC,UAA4B,EAAE,IAAW,EAAA;QACtD,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;AAChC,QAAA,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAC7B,OAAO;YACN,OAAO,EAAE,MAAK;AACb,gBAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;AAC7B,gBAAA,UAAU,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;aAChC;SACD,CAAC;KACF;AAGD,IAAA,WAAW,CAAI,UAA6C,EAAA;QAC3D,IAAI,CAAC,cAAc,EAAE,CAAC;AACtB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,CAAE,CAAC,CAAC;KAC/C;AAED,IAAA,SAAS,CAAI,WAA8C,EAAA;QAC1D,IAAI,CAAC,cAAc,EAAE,CAAC;AACtB,QAAA,IAAI,IAAI,CAAC,cAAc,KAAK,CAAC,EAAE;YAC9B,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;AAC7B,gBAAA,MAAM,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;AACxB,gBAAA,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;AACnB,gBAAA,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;aACb;SACD;KACD;AAED,IAAA,oBAAoB,CAAI,UAA6C,EAAA;AACpE,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,CAAE,CAAC,CAAC;KAC/C;IAED,YAAY,CAAa,WAA8C,EAAE,OAAgB,EAAA;;KAExF;AACD;;;;"}

package/dist/ProvideViewModel.d.ts

@@ -0,0 +1,41 @@
+import { Context, ReactNode } from "react";
+import { ViewModelContextSymbol } from "./viewModel";
+/**
+ * Provider component to override a ViewModel instance.
+ * Useful for testing - allows injecting a mock ViewModel.
+ */
+export declare function ProvideViewModel<T>({ viewModel: ViewModelClass, value, children }: {
+    viewModel: {
+        [ViewModelContextSymbol]?: Context<T | undefined>;
+    };
+    value: T;
+    children: ReactNode;
+}): ReactNode;
+/**
+ * Represents a mock binding of a ViewModel class to an instance.
+ */
+export interface ViewModelMock {
+    readonly _provide: (children: ReactNode) => ReactNode;
+}
+/**
+ * Creates a mock binding for use with ProvideMockViewModels.
+ */
+export declare function mockViewModel<T>(viewModelClass: {
+    [ViewModelContextSymbol]?: Context<T | undefined>;
+}, instance: T): ViewModelMock;
+/**
+ * Provider component to override multiple ViewModel instances at once.
+ * Useful for testing - allows injecting multiple mock ViewModels.
+ *
+ * @example
+ * ```tsx
+ * <ProvideMockViewModels mocks={[mockViewModel(AppPageViewModel, fakeViewModel)]}>
+ *   <AppPage theme="light" />
+ * </ProvideMockViewModels>
+ * ```
+ */
+export declare function ProvideMockViewModels({ mocks, children }: {
+    mocks: ViewModelMock[];
+    children: ReactNode;
+}): ReactNode;
+//# sourceMappingURL=ProvideViewModel.d.ts.map

package/dist/ProvideViewModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProvideViewModel.d.ts","sourceRoot":"","sources":["../src/ProvideViewModel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,sBAAsB,EAA+B,MAAM,aAAa,CAAC;AAElF;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,EAChC,SAAS,EAAE,cAAc,EACzB,KAAK,EACL,QAAQ,EACX,EAAE;IACC,SAAS,EAAE;QAAE,CAAC,sBAAsB,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC,CAAA;KAAE,CAAC;IACjE,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,SAAS,CAAC;CACvB,GAAG,SAAS,CAGZ;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC1B,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,SAAS,KAAK,SAAS,CAAC;CACzD;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAC3B,cAAc,EAAE;IAAE,CAAC,sBAAsB,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC,CAAA;CAAE,EACrE,QAAQ,EAAE,CAAC,GACZ,aAAa,CAKf;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CAAC,EAClC,KAAK,EACL,QAAQ,EACX,EAAE;IACC,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;CACvB,GAAG,SAAS,CAKZ"}

package/dist/ProvideViewModel.js

@@ -0,0 +1,41 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { jsx } from 'react/jsx-runtime';
+import { getOrCreateViewModelContext } from './viewModel.js';
+
+/**
+ * Provider component to override a ViewModel instance.
+ * Useful for testing - allows injecting a mock ViewModel.
+ */
+function ProvideViewModel({ viewModel: ViewModelClass, value, children }) {
+    const ContextType = getOrCreateViewModelContext(ViewModelClass);
+    return jsx(ContextType.Provider, { value: value, children: children });
+}
+/**
+ * Creates a mock binding for use with ProvideMockViewModels.
+ */
+function mockViewModel(viewModelClass, instance) {
+    const ContextType = getOrCreateViewModelContext(viewModelClass);
+    return {
+        _provide: children => jsx(ContextType.Provider, { value: instance, children: children }),
+    };
+}
+/**
+ * Provider component to override multiple ViewModel instances at once.
+ * Useful for testing - allows injecting multiple mock ViewModels.
+ *
+ * @example
+ * ```tsx
+ * <ProvideMockViewModels mocks={[mockViewModel(AppPageViewModel, fakeViewModel)]}>
+ *   <AppPage theme="light" />
+ * </ProvideMockViewModels>
+ * ```
+ */
+function ProvideMockViewModels({ mocks, children }) {
+    return mocks.reduceRight((acc, mock) => mock._provide(acc), children);
+}
+
+export { ProvideMockViewModels, ProvideViewModel, mockViewModel };
+//# sourceMappingURL=ProvideViewModel.js.map

package/dist/ProvideViewModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProvideViewModel.js","sources":["../src/ProvideViewModel.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;AAGA;;;AAGG;AACG,SAAU,gBAAgB,CAAI,EAChC,SAAS,EAAE,cAAc,EACzB,KAAK,EACL,QAAQ,EAKX,EAAA;AACG,IAAA,MAAM,WAAW,GAAG,2BAA2B,CAAI,cAAc,CAAC,CAAC;IACnE,OAAOA,GAAA,CAAC,WAAW,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAwB,CAAC;AACjF,CAAC;AASD;;AAEG;AACa,SAAA,aAAa,CACzB,cAAqE,EACrE,QAAW,EAAA;AAEX,IAAA,MAAM,WAAW,GAAG,2BAA2B,CAAI,cAAc,CAAC,CAAC;IACnE,OAAO;AACH,QAAA,QAAQ,EAAE,QAAQ,IAAIA,GAAC,CAAA,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,EAAA,QAAA,EAAG,QAAQ,EAAwB,CAAA;KACjG,CAAC;AACN,CAAC;AAED;;;;;;;;;;AAUG;SACa,qBAAqB,CAAC,EAClC,KAAK,EACL,QAAQ,EAIX,EAAA;IACG,OAAO,KAAK,CAAC,WAAW,CACpB,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EACjC,QAAQ,CACX,CAAC;AACN;;;;"}

package/dist/Value.d.ts

@@ -0,0 +1,16 @@
+import { IObservable } from "@vscode/observables";
+import { ReactNode } from "react";
+/**
+ * A component that renders an observable ReactNode value.
+ * Re-renders when the observable changes.
+ * Usage: <Value value={myObservable} />
+ */
+export declare const Value: import("react").ComponentType<import("./viewModel").PropsIn<{
+    value: import("./IPropertyTransformer").IPropertyTransformerFactory<ReactNode | IObservable<ReactNode>, IObservable<ReactNode>>;
+}>>;
+/**
+ * Helper function to render an observable as inline JSX.
+ * Usage: {val(myObservable)}
+ */
+export declare function val(v: IObservable<ReactNode>): ReactNode;
+//# sourceMappingURL=Value.d.ts.map

package/dist/Value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Value.d.ts","sourceRoot":"","sources":["../src/Value.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC;;;;GAIG;AACH,eAAO,MAAM,KAAK;;GAEhB,CAAC;AAEH;;;GAGG;AACH,wBAAgB,GAAG,CAAC,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GAAG,SAAS,CAExD"}