react-rx 3.0.0-0 → 3.0.0-1

package/dist/es2015/useObservable.js

@@ -1,26 +1,65 @@
-import { useEffect, useRef, useState } from 'react';
-import { tap } from 'rxjs/operators';
+import { useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
+import { shareReplay, tap } from 'rxjs/operators';
 function getValue(value) {
     return typeof value === 'function' ? value() : value;
 }
+const cache = new WeakMap();
+function getOrCreateStore(inputObservable, initialValue) {
+    if (!cache.has(inputObservable)) {
+        const entry = { currentValue: initialValue };
+        entry.observable = inputObservable.pipe(shareReplay({ refCount: true, bufferSize: 1 }), tap(value => (entry.currentValue = value)));
+        // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns
+        entry.subscription = entry.observable.subscribe();
+        cache.set(inputObservable, entry);
+    }
+    return cache.get(inputObservable);
+}
 export function useObservable(observable, initialValue) {
-    const [value, setValue] = useState(() => getValue(initialValue));
-    const initialValueRef = useRef(initialValue);
-    initialValueRef.current = initialValue;
+    /**
+     * Store the initialValue in a ref, as we don't want a changed `initialValue` to trigger a re-subscription.
+     * But we also don't want the initialValue to be stale if the observable changes.
+     */
+    const initialValueRef = useRef(getValue(initialValue));
+    /**
+     * Ensures that the initialValue is always up-to-date in case the observable changes.
+     */
     useEffect(() => {
-        setValue(getValue(initialValueRef.current));
-        const subscription = observable.pipe(tap(next => setValue(next))).subscribe();
-        return () => subscription.unsubscribe();
-    }, [initialValueRef, observable]);
-    return value;
-}
-export function useMemoObservable(observableOrFactory, deps, initialValue) {
-    const [value, setValue] = useState(() => getValue(initialValue));
+        initialValueRef.current = getValue(initialValue);
+    }, [initialValue]);
+    const [getSnapshot, subscribe] = useMemo(() => {
+        const store = getOrCreateStore(observable, initialValueRef.current);
+        if (store.subscription.closed) {
+            store.subscription = store.observable.subscribe();
+        }
+        return [
+            function getSnapshot() {
+                // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here to clear up some memory, as this subscription is only needed to provide a sync initialValue.
+                return store.currentValue;
+            },
+            function subscribe(callback) {
+                // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here as we only need 1 subscription active to keep the observer alive
+                const sub = store.observable.subscribe(callback);
+                return () => {
+                    sub.unsubscribe();
+                };
+            },
+        ];
+    }, [observable]);
+    const shouldRestoreSubscriptionRef = useRef(false);
     useEffect(() => {
-        const subscription = getValue(observableOrFactory)
-            .pipe(tap(next => setValue(next)))
-            .subscribe();
-        return () => subscription.unsubscribe();
-    }, deps);
-    return value;
+        const store = getOrCreateStore(observable, initialValueRef.current);
+        if (shouldRestoreSubscriptionRef.current) {
+            if (store.subscription.closed) {
+                store.subscription = store.observable.subscribe();
+            }
+            shouldRestoreSubscriptionRef.current = false;
+        }
+        return () => {
+            // React StrictMode will call effects as `setup + teardown + setup` thus we can't trust this callback as "react is about to unmount"
+            // Tracking this ref lets us set the subscription back up on the next `setup` call if needed, and if it really did unmounted then all is well
+            shouldRestoreSubscriptionRef.current = !store.subscription.closed;
+            store.subscription.unsubscribe();
+        };
+    }, [observable]);
+    return useSyncExternalStore(subscribe, getSnapshot);
 }

package/dist/es2015/{useObservableCallback.js → useObservableEvent.js}

@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useRef } from 'react';
 import { observableCallback } from 'observable-callback';
+import { useCallback, useEffect, useRef } from 'react';
 const EMPTY_DEPS = [];
 export function useObservableCallback(fn, dependencies = EMPTY_DEPS) {
     const callbackRef = useRef();
@@ -7,7 +7,6 @@ export function useObservableCallback(fn, dependencies = EMPTY_DEPS) {
         callbackRef.current = observableCallback();
     }
     const [calls$, call] = callbackRef.current;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     const callback = useCallback(fn, dependencies);
     useEffect(() => {
         const subscription = calls$.pipe(callback).subscribe();

package/dist/esm/__tests__/strictmode.test.js

@@ -13,7 +13,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+        while (_) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -34,24 +34,22 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import { BehaviorSubject, Observable } from 'rxjs';
-import { useMemoObservable, useObservable } from '../useObservable';
-import { createElement, Fragment, StrictMode, useEffect } from 'react';
 import { act, render } from '@testing-library/react';
-import { useAsObservable } from '../useAsObservable';
-import { test, expect } from 'vitest';
+import { createElement, Fragment, StrictMode, useEffect } from 'react';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { useObservable } from '../useObservable';
 var wait = function (ms) { return new Promise(function (resolve) { return setTimeout(resolve, ms); }); };
 // NOTE: Jest runs NODE_ENV=test by default, which enables development flags for React
 test('Strict mode should trigger double mount effects and re-renders', function () { return __awaiter(void 0, void 0, void 0, function () {
     function ObservableComponent() {
-        var observedValue = useObservable(observable, 0);
         useEffect(function () {
             mountCount++;
         }, []);
+        var observedValue = useObservable(observable);
         returnedValues.push(observedValue);
         return createElement(Fragment, null, observedValue);
     }
-    var subject, observable, returnedValues, mountCount, rerender;
+    var subject, observable, returnedValues, mountCount;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -59,8 +57,8 @@ test('Strict mode should trigger double mount effects and re-renders', function
                 observable = subject.asObservable();
                 returnedValues = [];
                 mountCount = 0;
-                rerender = render(createElement(StrictMode, null, createElement(ObservableComponent))).rerender;
-                expect(mountCount).toBe(2);
+                render(createElement(StrictMode, null, createElement(ObservableComponent)));
+                expect(mountCount).toEqual(2);
                 expect(returnedValues).toEqual([0, 0]);
                 return [4 /*yield*/, wait(10)];
             case 1:
@@ -94,41 +92,3 @@ test('Strict mode should unsubscribe the source observable on unmount', function
     rerender(createElement(StrictMode, null, createElement('div')));
     expect(unsubscribed).toEqual([0, 1]);
 });
-test('useMemoObservable should unsubscribe the source observable on unmount', function () {
-    var subscribed = [];
-    var unsubscribed = [];
-    var nextId = 0;
-    function ObservableComponent() {
-        useMemoObservable(function () {
-            return new Observable(function () {
-                var id = nextId++;
-                subscribed.push(id);
-                return function () {
-                    unsubscribed.push(id);
-                };
-            });
-        }, []);
-        return createElement(Fragment, null);
-    }
-    var rerender = render(createElement(StrictMode, null, createElement(ObservableComponent))).rerender;
-    expect(subscribed).toEqual([0, 1]);
-    rerender(createElement(StrictMode, null, createElement('div')));
-    expect(unsubscribed).toEqual([0, 1]);
-});
-test('useAsObservable should work in strict mode', function () { return __awaiter(void 0, void 0, void 0, function () {
-    function ObservableComponent(props) {
-        var count$ = useAsObservable(props.count);
-        var count = useObservable(count$, props.count);
-        returnedValues.push(count);
-        return createElement(Fragment, null, 'ok');
-    }
-    var returnedValues, rerender;
-    return __generator(this, function (_a) {
-        returnedValues = [];
-        rerender = render(createElement(StrictMode, null, createElement(ObservableComponent, { count: 0 }))).rerender;
-        expect(returnedValues).toEqual([0, 0]);
-        rerender(createElement(StrictMode, null, createElement(ObservableComponent, { count: 1 })));
-        expect(returnedValues).toEqual([0, 0, 0, 0, 1, 1]);
-        return [2 /*return*/];
-    });
-}); });

package/dist/esm/__tests__/useObservable.test.js

@@ -1,9 +1,8 @@
 import { act, render, renderHook } from '@testing-library/react';
-import { useObservable } from '../useObservable';
+import { createElement, Fragment } from 'react';
 import { asyncScheduler, Observable, of, scheduled, Subject, timer } from 'rxjs';
 import { mapTo } from 'rxjs/operators';
-import { createElement, Fragment } from 'react';
-import { test, expect } from 'vitest';
+import { useObservable } from '../useObservable';
 test('should subscribe immediately on component mount and unsubscribe on component unmount', function () {
     var subscribed = false;
     var observable = new Observable(function () {

package/dist/esm/index.d.ts

@@ -1,7 +1,2 @@
-export { reactiveComponent, reactiveComponent as rxComponent, forwardRef } from './reactiveComponent';
-export { observeState, observeCallback, observeContext, observeElement } from './utils';
-export { observeState as state, observeCallback as handler, observeContext as context, observeElement as elementRef, } from './utils';
-export { observableCallback } from 'observable-callback';
-export { useObservable, useMemoObservable } from './useObservable';
-export { useAsObservable } from './useAsObservable';
-export { useObservableCallback } from './useObservableCallback';
+export * from './useObservable';
+export * from './useObservableEvent';

package/dist/esm/index.js

@@ -1,9 +1,2 @@
-// Main package exports
-export { reactiveComponent, reactiveComponent as rxComponent, forwardRef } from './reactiveComponent';
-export { observeState, observeCallback, observeContext, observeElement } from './utils';
-export { observeState as state, observeCallback as handler, observeContext as context, observeElement as elementRef, } from './utils';
-export { observableCallback } from 'observable-callback';
-// hooks
-export { useObservable, useMemoObservable } from './useObservable';
-export { useAsObservable } from './useAsObservable';
-export { useObservableCallback } from './useObservableCallback';
+export * from './useObservable';
+export * from './useObservableEvent';

package/dist/esm/useObservable.d.ts

@@ -1,7 +1,4 @@
 import { Observable } from 'rxjs';
-import { DependencyList } from 'react';
 export declare function useObservable<T>(observable: Observable<T>): T | undefined;
 export declare function useObservable<T>(observable: Observable<T>, initialValue: T): T;
 export declare function useObservable<T>(observable: Observable<T>, initialValue: () => T): T;
-export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: DependencyList): T | undefined;
-export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: DependencyList, initialValue: T | (() => T)): T;

package/dist/esm/useObservable.js

@@ -1,26 +1,65 @@
-import { useEffect, useRef, useState } from 'react';
-import { tap } from 'rxjs/operators';
+import { useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
+import { shareReplay, tap } from 'rxjs/operators';
 function getValue(value) {
     return typeof value === 'function' ? value() : value;
 }
+var cache = new WeakMap();
+function getOrCreateStore(inputObservable, initialValue) {
+    if (!cache.has(inputObservable)) {
+        var entry_1 = { currentValue: initialValue };
+        entry_1.observable = inputObservable.pipe(shareReplay({ refCount: true, bufferSize: 1 }), tap(function (value) { return (entry_1.currentValue = value); }));
+        // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns
+        entry_1.subscription = entry_1.observable.subscribe();
+        cache.set(inputObservable, entry_1);
+    }
+    return cache.get(inputObservable);
+}
 export function useObservable(observable, initialValue) {
-    var _a = useState(function () { return getValue(initialValue); }), value = _a[0], setValue = _a[1];
-    var initialValueRef = useRef(initialValue);
-    initialValueRef.current = initialValue;
+    /**
+     * Store the initialValue in a ref, as we don't want a changed `initialValue` to trigger a re-subscription.
+     * But we also don't want the initialValue to be stale if the observable changes.
+     */
+    var initialValueRef = useRef(getValue(initialValue));
+    /**
+     * Ensures that the initialValue is always up-to-date in case the observable changes.
+     */
     useEffect(function () {
-        setValue(getValue(initialValueRef.current));
-        var subscription = observable.pipe(tap(function (next) { return setValue(next); })).subscribe();
-        return function () { return subscription.unsubscribe(); };
-    }, [initialValueRef, observable]);
-    return value;
-}
-export function useMemoObservable(observableOrFactory, deps, initialValue) {
-    var _a = useState(function () { return getValue(initialValue); }), value = _a[0], setValue = _a[1];
+        initialValueRef.current = getValue(initialValue);
+    }, [initialValue]);
+    var _a = useMemo(function () {
+        var store = getOrCreateStore(observable, initialValueRef.current);
+        if (store.subscription.closed) {
+            store.subscription = store.observable.subscribe();
+        }
+        return [
+            function getSnapshot() {
+                // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here to clear up some memory, as this subscription is only needed to provide a sync initialValue.
+                return store.currentValue;
+            },
+            function subscribe(callback) {
+                // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here as we only need 1 subscription active to keep the observer alive
+                var sub = store.observable.subscribe(callback);
+                return function () {
+                    sub.unsubscribe();
+                };
+            },
+        ];
+    }, [observable]), getSnapshot = _a[0], subscribe = _a[1];
+    var shouldRestoreSubscriptionRef = useRef(false);
     useEffect(function () {
-        var subscription = getValue(observableOrFactory)
-            .pipe(tap(function (next) { return setValue(next); }))
-            .subscribe();
-        return function () { return subscription.unsubscribe(); };
-    }, deps);
-    return value;
+        var store = getOrCreateStore(observable, initialValueRef.current);
+        if (shouldRestoreSubscriptionRef.current) {
+            if (store.subscription.closed) {
+                store.subscription = store.observable.subscribe();
+            }
+            shouldRestoreSubscriptionRef.current = false;
+        }
+        return function () {
+            // React StrictMode will call effects as `setup + teardown + setup` thus we can't trust this callback as "react is about to unmount"
+            // Tracking this ref lets us set the subscription back up on the next `setup` call if needed, and if it really did unmounted then all is well
+            shouldRestoreSubscriptionRef.current = !store.subscription.closed;
+            store.subscription.unsubscribe();
+        };
+    }, [observable]);
+    return useSyncExternalStore(subscribe, getSnapshot);
 }

package/dist/esm/{useObservableCallback.js → useObservableEvent.js}

@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useRef } from 'react';
 import { observableCallback } from 'observable-callback';
+import { useCallback, useEffect, useRef } from 'react';
 var EMPTY_DEPS = [];
 export function useObservableCallback(fn, dependencies) {
     if (dependencies === void 0) { dependencies = EMPTY_DEPS; }
@@ -8,7 +8,6 @@ export function useObservableCallback(fn, dependencies) {
         callbackRef.current = observableCallback();
     }
     var _a = callbackRef.current, calls$ = _a[0], call = _a[1];
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     var callback = useCallback(fn, dependencies);
     useEffect(function () {
         var subscription = calls$.pipe(callback).subscribe();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-rx",
-  "version": "3.0.0-0",
+  "version": "3.0.0-1",
   "description": "React + RxJS = <3",
   "keywords": [
     "action",
@@ -28,6 +28,7 @@
     "sync",
     "typesafe",
     "typescript",
+    "use-sync-external-store",
     "use"
   ],
   "homepage": "https://react-rx.dev",
@@ -44,6 +45,7 @@
     "Bjørge Næss <bjoerge@gmail.com>",
     "Cody Olsen <stipsan@gmail.com> (https://github.com/stipsan)"
   ],
+  "sideEffects": false,
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -64,41 +66,46 @@
     "dev": "cd website && npm run dev",
     "prepublishOnly": "npm run clean && npm run build",
     "watch": "run-p \"build:* -- --watch\"",
-    "test": "vitest run",
+    "test": "jest",
     "lint": "eslint --cache ."
   },
   "dependencies": {
-    "observable-callback": "^1.0.2"
+    "observable-callback": "^1.0.3"
   },
   "devDependencies": {
-    "@sanity/semantic-release-preset": "^4.0.0",
-    "@testing-library/dom": "^9.0.1",
-    "@testing-library/react": "^14.0.0",
-    "@types/node": "^18.14.6",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.54.1",
-    "@typescript-eslint/parser": "^5.54.1",
-    "eslint": "^8.35.0",
-    "eslint-config-prettier": "^8.7.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "jsdom": "^21.1.0",
+    "@sanity/semantic-release-preset": "^2.0.5",
+    "@testing-library/dom": "^8.20.1",
+    "@testing-library/react": "^13.4.0",
+    "@types/jest": "^29.5.3",
+    "@types/node": "^18.17.5",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "7.12.0",
+    "@typescript-eslint/parser": "7.12.0",
+    "eslint": "8.57.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-prettier": "5.1.3",
+    "eslint-plugin-react": "7.34.2",
+    "eslint-plugin-react-compiler": "^0.0.0-experimental-51a85ea-20240601",
+    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-simple-import-sort": "^12.1.0",
+    "jest": "^29.6.2",
+    "jest-environment-jsdom": "^29.6.2",
+    "jsdom": "^20.0.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.4",
-    "prettier-plugin-packagejson": "^2.4.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0",
-    "rimraf": "^4.3.1",
-    "rxjs": "^7.8.0",
-    "typescript": "4.9.5",
-    "vitest": "^0.29.2"
+    "prettier": "^2.8.8",
+    "prettier-plugin-packagejson": "^2.4.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-test-renderer": "^18.3.1",
+    "rimraf": "^3.0.2",
+    "rxjs": "^7.8.1",
+    "ts-jest": "^29.1.1",
+    "typescript": "4.7.4"
   },
   "peerDependencies": {
-    "react": "^16.8 || ^17 || ^18",
-    "rxjs": "^6.5 || ^7"
+    "react": "^18.3 || >=19.0.0-rc",
+    "rxjs": "^7"
   },
   "es2015": "dist/es2015/index.js"
 }

package/src/__tests__/strictmode.test.ts

@@ -1,9 +1,8 @@
-import {BehaviorSubject, Observable, of} from 'rxjs'
-import {useMemoObservable, useObservable} from '../useObservable'
-import {createElement, Fragment, StrictMode, useEffect} from 'react'
 import {act, render} from '@testing-library/react'
-import {useAsObservable} from '../useAsObservable'
-import {test, expect} from 'vitest'
+import {createElement, Fragment, StrictMode, useEffect} from 'react'
+import {BehaviorSubject, Observable} from 'rxjs'
+
+import {useObservable} from '../useObservable'
 
 const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
 
@@ -16,17 +15,16 @@ test('Strict mode should trigger double mount effects and re-renders', async ()
   const returnedValues: unknown[] = []
   let mountCount = 0
   function ObservableComponent() {
-    const observedValue = useObservable(observable, 0)
     useEffect(() => {
       mountCount++
     }, [])
+    const observedValue = useObservable(observable)
     returnedValues.push(observedValue)
     return createElement(Fragment, null, observedValue)
   }
 
-  const {rerender} = render(createElement(StrictMode, null, createElement(ObservableComponent)))
-
-  expect(mountCount).toBe(2)
+  render(createElement(StrictMode, null, createElement(ObservableComponent)))
+  expect(mountCount).toEqual(2)
 
   expect(returnedValues).toEqual([0, 0])
 
@@ -62,46 +60,3 @@ test('Strict mode should unsubscribe the source observable on unmount', () => {
   rerender(createElement(StrictMode, null, createElement('div')))
   expect(unsubscribed).toEqual([0, 1])
 })
-
-test('useMemoObservable should unsubscribe the source observable on unmount', () => {
-  const subscribed: number[] = []
-  const unsubscribed: number[] = []
-  let nextId = 0
-  function ObservableComponent() {
-    useMemoObservable(() => {
-      return new Observable(() => {
-        const id = nextId++
-        subscribed.push(id)
-        return () => {
-          unsubscribed.push(id)
-        }
-      })
-    }, [])
-    return createElement(Fragment, null)
-  }
-
-  const {rerender} = render(createElement(StrictMode, null, createElement(ObservableComponent)))
-  expect(subscribed).toEqual([0, 1])
-  rerender(createElement(StrictMode, null, createElement('div')))
-  expect(unsubscribed).toEqual([0, 1])
-})
-
-test('useAsObservable should work in strict mode', async () => {
-  const returnedValues: unknown[] = []
-  function ObservableComponent(props: {count: number}) {
-    const count$ = useAsObservable(props.count)
-    const count = useObservable(count$, props.count)
-    returnedValues.push(count)
-    return createElement(Fragment, null, 'ok')
-  }
-
-  const {rerender} = render(
-    createElement(StrictMode, null, createElement(ObservableComponent, {count: 0})),
-  )
-
-  expect(returnedValues).toEqual([0, 0])
-
-  rerender(createElement(StrictMode, null, createElement(ObservableComponent, {count: 1})))
-
-  expect(returnedValues).toEqual([0, 0, 0, 0, 1, 1])
-})

package/src/__tests__/useObservable.test.tsx

@@ -1,9 +1,9 @@
 import {act, render, renderHook} from '@testing-library/react'
-import {useObservable} from '../useObservable'
+import {createElement, Fragment} from 'react'
 import {asyncScheduler, Observable, of, scheduled, Subject, timer} from 'rxjs'
 import {mapTo} from 'rxjs/operators'
-import {createElement, Fragment} from 'react'
-import {test, expect} from 'vitest'
+
+import {useObservable} from '../useObservable'
 
 test('should subscribe immediately on component mount and unsubscribe on component unmount', () => {
   let subscribed = false

package/src/index.ts

@@ -1,15 +1,2 @@
-// Main package exports
-export {reactiveComponent, reactiveComponent as rxComponent, forwardRef} from './reactiveComponent'
-export {observeState, observeCallback, observeContext, observeElement} from './utils'
-export {
-  observeState as state,
-  observeCallback as handler,
-  observeContext as context,
-  observeElement as elementRef,
-} from './utils'
-export {observableCallback} from 'observable-callback'
-
-// hooks
-export {useObservable, useMemoObservable} from './useObservable'
-export {useAsObservable} from './useAsObservable'
-export {useObservableCallback} from './useObservableCallback'
+export * from './useObservable'
+export * from './useObservableEvent'