TASK: Add package @neos-project/framework-observable-react

This new package contains react bindings for the other recently
introduced package `@neos-project/framework-observable`.

packages/framework-observable-react/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@neos-project/framework-observable-react",
+  "version": "",
+  "description": "React bindings for @neos-project/framework-observable",
+  "private": true,
+  "main": "./src/index.ts",
+  "dependencies": {
+    "@neos-project/framework-observable": "workspace:*",
+    "react": "^16.12.0"
+  },
+  "license": "GNU GPLv3"
+}

packages/framework-observable-react/src/index.ts

@@ -0,0 +1,11 @@
+/*
+ * This file is part of the Neos.Neos.Ui package.
+ *
+ * (c) Contributors of the Neos Project - www.neos.io
+ *
+ * This package is Open Source Software. For the full copyright and license
+ * information, please view the LICENSE file which was distributed with this
+ * source code.
+ */
+export {useLatestState} from './useLatestState';
+export {useLatestValueFrom} from './useLatestValueFrom';

packages/framework-observable-react/src/useLatestState.ts

@@ -0,0 +1,30 @@
+/*
+ * This file is part of the Neos.Neos.Ui package.
+ *
+ * (c) Contributors of the Neos Project - www.neos.io
+ *
+ * This package is Open Source Software. For the full copyright and license
+ * information, please view the LICENSE file which was distributed with this
+ * source code.
+ */
+import React from 'react';
+
+import type {State} from '@neos-project/framework-observable';
+
+export function useLatestState<V>(state$: State<V>) {
+    const [value, setValue] = React.useState<V>(state$.current);
+
+    React.useEffect(() => {
+        const subscription = state$.subscribe({
+            next: (incomingValue) => {
+                if (incomingValue !== value) {
+                    setValue(incomingValue);
+                }
+            }
+        });
+
+        return () => subscription.unsubscribe();
+    }, [state$]);
+
+    return value;
+}

packages/framework-observable-react/src/useLatestValueFrom.ts

@@ -0,0 +1,34 @@
+/*
+ * This file is part of the Neos.Neos.Ui package.
+ *
+ * (c) Contributors of the Neos Project - www.neos.io
+ *
+ * This package is Open Source Software. For the full copyright and license
+ * information, please view the LICENSE file which was distributed with this
+ * source code.
+ */
+import React from 'react';
+
+import type {Observable} from '@neos-project/framework-observable';
+
+export function useLatestValueFrom<V>(
+    observableFactory: () => Observable<V>,
+    deps: any[] = []
+) {
+    const observable$ = React.useMemo(observableFactory, deps);
+    const [value, setValue] = React.useState<null | V>(null);
+
+    React.useEffect(() => {
+        const subscription = observable$.subscribe({
+            next: (incomingValue) => {
+                if (incomingValue !== value) {
+                    setValue(incomingValue);
+                }
+            }
+        });
+
+        return () => subscription.unsubscribe();
+    }, [observable$]);
+
+    return value;
+}

yarn.lock

@@ -2277,6 +2277,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@neos-project/framework-observable-react@workspace:packages/framework-observable-react":
+  version: 0.0.0-use.local
+  resolution: "@neos-project/framework-observable-react@workspace:packages/framework-observable-react"
+  dependencies:
+    "@neos-project/framework-observable": "workspace:*"
+    react: ^16.12.0
+  languageName: unknown
+  linkType: soft
+
 "@neos-project/framework-observable@workspace:*, @neos-project/framework-observable@workspace:packages/framework-observable":
   version: 0.0.0-use.local
   resolution: "@neos-project/framework-observable@workspace:packages/framework-observable"