add useReactiveValue sample

Author: KurtGokhan

Assets/Resources/check.svg.meta

@@ -22325,6 +22325,39 @@ var ForwardRef = /*#__PURE__*/(/* unused pure expression or super */ null && (fo
 ;// CONCATENATED MODULE: ./src/pages/images/index.tsx
 // @ts-expect-error
 var webImage='https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';var webVideo='https://media.w3.org/2010/05/sintel/trailer.mp4';function ImagesPage(){var _useState=(0,react.useState)(),_useState2=slicedToArray_slicedToArray(_useState,2),videoRef=_useState2[0],setVideoRef=_useState2[1];var _useGlobals=useGlobals(),customPrefab=_useGlobals.customPrefab,renderCamera=_useGlobals.renderCamera,cameraRoot=_useGlobals.cameraRoot,portalRoot=_useGlobals.portalRoot,portalCamera=_useGlobals.portalCamera;(0,react.useEffect)(function(){if(videoRef){videoRef.VideoPlayer.Pause();}},[videoRef]);var toggleVideo=function toggleVideo(){var vp=videoRef.VideoPlayer;if(vp.isPlaying)vp.Pause();else vp.Play();};var _useState3=(0,react.useState)(),_useState4=slicedToArray_slicedToArray(_useState3,2),renderRef=_useState4[0],setRenderRef=_useState4[1];return (0,emotion_react_jsx_runtime_browser_esm/* jsxs */.FD)("view",{className:pages_images_index_module.host,children:[(0,emotion_react_jsx_runtime_browser_esm/* jsxs */.FD)("portal",{id:"pt",target:portalRoot,eventCamera:portalCamera,style:{scale:1/200,translateZ:-0.55},eventViewport:renderRef,children:["This is a portal",(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("button",{children:"Button inside portal"})]}),(0,emotion_react_jsx_runtime_browser_esm/* jsxs */.FD)("section",{children:[(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("h2",{children:(0,emotion_react_jsx_runtime_browser_esm/* jsxs */.FD)("row",{children:["Image",(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)(icon.image,{})]})}),(0,emotion_react_jsx_runtime_browser_esm/* jsxs */.FD)("row",{children:[(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("image",{source:bg_namespaceObject}),(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("image",{source:bg_namespaceObject}),(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("image",{source:base64Image}),(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("image",{source:webImage})]})]}),(0,emotion_react_jsx_runtime_browser_esm/* jsxs */.FD)("section",{children:[(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("h2",{children:(0,emotion_react_jsx_runtime_browser_esm/* jsxs */.FD)("row",{children:["Vector Images",(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)(icon.trending_up,{})]})}),(0,emotion_react_jsx_runtime_browser_esm/* jsxs */.FD)("row",{children:[(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("svgimage",{source:'res:check'}),(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("svg",{source:checkraw}),(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("svg",{source:'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/betterplace.svg'}),(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("svg",{source:'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/debian.svg'})]})]}),(0,emotion_react_jsx_runtime_browser_esm/* jsxs */.FD)("section",{children:[(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("h2",{children:(0,emotion_react_jsx_runtime_browser_esm/* jsxs */.FD)("row",{children:["Prefab",(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)(icon.videogame_asset,{})]})}),(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("row",{children:(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("prefab",{target:customPrefab})})]}),(0,emotion_react_jsx_runtime_browser_esm/* jsxs */.FD)("section",{children:[(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("h2",{children:(0,emotion_react_jsx_runtime_browser_esm/* jsxs */.FD)("row",{children:["Border Image",(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)(icon.crop_square,{})]})}),(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("row",{children:(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("view",{className:pages_images_index_module.borderImage,children:"This is a border image"})})]}),(0,emotion_react_jsx_runtime_browser_esm/* jsxs */.FD)("section",{children:[(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("h2",{children:(0,emotion_react_jsx_runtime_browser_esm/* jsxs */.FD)("row",{children:["Video",(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)(icon.movie,{})]})}),(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("row",{children:(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("video",{style:{flexGrow:1},source:webVideo,ref:setVideoRef,onPointerClick:toggleVideo})})]}),(0,emotion_react_jsx_runtime_browser_esm/* jsxs */.FD)("section",{children:[(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("h2",{children:(0,emotion_react_jsx_runtime_browser_esm/* jsxs */.FD)("row",{children:["Render Texture",(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)(icon._3d_rotation,{})]})}),(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("row",{children:(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("render",{width:900,height:400,style:{flexGrow:1},ref:setRenderRef,onDrag:function onDrag(ev){cameraRoot.transform.Rotate(new Interop.UnityEngine.Vector3(-ev.delta.y,ev.delta.x,0));},onScroll:function onScroll(ev){renderCamera.transform.Translate(0,0,Math.fround(ev.scrollDelta.y*10),Interop.UnityEngine.Space.Self);},onMount:function onMount(ev){return ev.gameObject.SetActive(true);},onUnmount:function onUnmount(ev){return ev.gameObject.SetActive(false);},camera:renderCamera})})]})]});}/* harmony default export */ const pages_images = (ImagesPage);
+;// CONCATENATED MODULE: ../../renderer/dist/src/helpers/hooks/use-reactive-value.js
+
+
+function createSubscriber(obj, isEqual) {
+  var isReactive = obj && typeof obj === 'object' && 'Value' in obj;
+  var snapshot = isReactive ? obj.Value : undefined;
+  return {
+    subscribe: function subscribe(onStoreChange) {
+      snapshot = isReactive ? obj.Value : undefined;
+      var remove = isReactive && typeof obj.AddListener === 'function' && (obj === null || obj === void 0 ? void 0 : obj.AddListener(function () {
+        var prev = snapshot;
+        snapshot = isReactive ? obj.Value : undefined;
+        if (typeof isEqual !== 'function' || !isEqual(prev, snapshot)) {
+          onStoreChange();
+        }
+      }));
+      if (isReactive && typeof remove !== 'function') console.warn('The reactive value does not provide a change listener');
+      return function () {
+        return remove === null || remove === void 0 ? void 0 : remove();
+      };
+    },
+    getSnapshot: function getSnapshot() {
+      return snapshot;
+    }
+  };
+}
+function useReactiveValue(obj, isEqual) {
+  var sb = (0,react.useMemo)(function () {
+    return createSubscriber(obj, isEqual);
+  }, [obj, isEqual]);
+  return (0,shim.useSyncExternalStore)(sb.subscribe, sb.getSnapshot, sb.getSnapshot);
+}
+//# sourceMappingURL=use-reactive-value.js.map
 ;// CONCATENATED MODULE: ../../renderer/dist/src/webgl-compat/error-messages.js
 // Original file: https://github.com/jeffreylanters/react-unity-webgl/blob/main/module/source/constants/error-messages.ts
 var errorMessages = {
@@ -22566,7 +22599,7 @@ var interop_index_module_update = injectStylesIntoStyleTag_default()(interop_ind
        /* harmony default export */ const pages_interop_index_module = (interop_index_module/* default */.A && interop_index_module/* default */.A.locals ? interop_index_module/* default */.A.locals : undefined);
 
 ;// CONCATENATED MODULE: ./src/pages/interop/index.tsx
-var InteropPage=function InteropPage(){var _useState=(0,react.useState)(true),_useState2=slicedToArray_slicedToArray(_useState,2),shouldListen=_useState2[0],setShouldListen=_useState2[1];var _useState3=(0,react.useState)(null),_useState4=slicedToArray_slicedToArray(_useState3,2),pressedKey=_useState4[0],setPressedKey=_useState4[1];var _useUnityContext=useUnityContext({}),addEventListener=_useUnityContext.addEventListener,removeEventListener=_useUnityContext.removeEventListener;(0,react.useEffect)(function(){if(shouldListen){var remove=Globals.InteropTest.AddKeyPressListener(function(key){setPressedKey(key);});Interop.GetType('MyInterop.InteropTest').TestDebug();return function(){return remove();};}},[shouldListen]);(0,react.useEffect)(function(){var fn=function fn(key){console.log('Pressed key is: '+key);};addEventListener('OnKeyPress',fn);return function(){return removeEventListener('OnKeyPress',fn);};},[addEventListener,removeEventListener]);return (0,emotion_react_jsx_runtime_browser_esm/* jsxs */.FD)("view",{className:pages_interop_index_module.host,children:[(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("button",{onClick:function onClick(){return setShouldListen(function(x){return!x;});},children:shouldListen?'Remove Listener':'Add Listener'}),!!pressedKey&&(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("view",{children:(0,emotion_react_jsx_runtime_browser_esm/* jsxs */.FD)("text",{children:["Pressed key is: ",pressedKey]})})]});};/* harmony default export */ const interop = (InteropPage);
+var InteropPage=function InteropPage(){var _useState=(0,react.useState)(true),_useState2=slicedToArray_slicedToArray(_useState,2),shouldListen=_useState2[0],setShouldListen=_useState2[1];var _useState3=(0,react.useState)(null),_useState4=slicedToArray_slicedToArray(_useState3,2),pressedKey=_useState4[0],setPressedKey=_useState4[1];var _useUnityContext=useUnityContext({}),addEventListener=_useUnityContext.addEventListener,removeEventListener=_useUnityContext.removeEventListener;var _useGlobals=useGlobals(),InteropTest=_useGlobals.InteropTest;var deltaTime=useReactiveValue(InteropTest.DeltaTime);(0,react.useEffect)(function(){if(shouldListen){var remove=Globals.InteropTest.AddKeyPressListener(function(key){setPressedKey(key);});Interop.GetType('MyInterop.InteropTest').TestDebug();return function(){return remove();};}},[shouldListen]);(0,react.useEffect)(function(){var fn=function fn(key){console.log('Pressed key is: '+key);};addEventListener('OnKeyPress',fn);return function(){return removeEventListener('OnKeyPress',fn);};},[addEventListener,removeEventListener]);return (0,emotion_react_jsx_runtime_browser_esm/* jsxs */.FD)("view",{className:pages_interop_index_module.host,children:[(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("button",{onClick:function onClick(){return setShouldListen(function(x){return!x;});},children:shouldListen?'Remove Listener':'Add Listener'}),!!pressedKey&&(0,emotion_react_jsx_runtime_browser_esm/* jsx */.Y)("view",{children:(0,emotion_react_jsx_runtime_browser_esm/* jsxs */.FD)("text",{children:["Pressed key is: ",pressedKey]})}),"Delta Time: ",deltaTime]});};/* harmony default export */ const interop = (InteropPage);
 ;// CONCATENATED MODULE: ../../material/dist/src/util/helpers.js
 
 function getChildrenOfType(children, type) {

Assets/Resources/react/index.js

@@ -1,5 +1,6 @@
 using System;
 using ReactUnity.Helpers;
+using ReactUnity.Reactive;
 using ReactUnity.UGUI;
 using UnityEngine;
 using UnityEngine.InputSystem;
@@ -12,6 +13,8 @@ public class InteropTest : MonoBehaviour
         public ReactAction<string> OnKeyPress = new ReactAction<string>();
         IDisposable dispose;
 
+        public ReactiveValue<float> DeltaTime = new ReactiveValue<float>();
+
         [Obsolete]
         public Action AddKeyPressListener(object callback) => OnKeyPress.AddListener(callback);
 
@@ -24,7 +27,7 @@ void OnEnable()
 
                     dispose = InputSystem.onAnyButtonPress.Call(x => {
                         OnKeyPress?.Invoke(x.displayName);
-                        ctx.Context.Script.WebGLCompatDispatchEvent("OnKeyPress", x.displayName);
+                        ctx.Context?.Script?.WebGLCompatDispatchEvent("OnKeyPress", x.displayName);
                     });
                 });
             }
@@ -39,5 +42,10 @@ public static void TestDebug()
         {
             Debug.Log("Interop Test Works");
         }
+
+        void Update()
+        {
+            DeltaTime.Value = Time.deltaTime;
+        }
     }
 }

Assets/Resources/react/static/media/check.4701752daa56435b75dc4edd7886d403.svg.meta

@@ -1,15 +1,15 @@
 {
   "dependencies": {
     "com.reactunity.clearscript": "0.17.0",
-    "com.reactunity.core": "0.19.8",
+    "com.reactunity.core": "0.19.10",
     "com.reactunity.jint": "0.17.0",
     "com.reactunity.quickjs": "0.19.0",
     "com.unity.2d.sprite": "1.0.0",
     "com.unity.device-simulator.devices": "1.0.0",
     "com.unity.editorcoroutines": "1.0.0",
     "com.unity.ide.visualstudio": "2.0.22",
     "com.unity.inputsystem": "1.11.2",
-    "com.unity.mobile.android-logcat": "1.4.3",
+    "com.unity.mobile.android-logcat": "1.4.4",
     "com.unity.multiplayer.center": "1.0.0",
     "com.unity.profiling.core": "1.0.2",
     "com.unity.render-pipelines.universal": "17.0.3",

Assets/Scripts/InteropTest.cs

@@ -8,7 +8,7 @@
       "url": "https://package.openupm.com"
     },
     "com.reactunity.core": {
-      "version": "0.19.8",
+      "version": "0.19.10",
       "depth": 0,
       "source": "registry",
       "dependencies": {
@@ -106,7 +106,7 @@
       "url": "https://packages.unity.com"
     },
     "com.unity.mobile.android-logcat": {
-      "version": "1.4.3",
+      "version": "1.4.4",
       "depth": 0,
       "source": "registry",
       "dependencies": {},

Packages/manifest.json

@@ -1,4 +1,5 @@
 
+import { useGlobals, useReactiveValue } from '@reactunity/renderer';
 import { useEffect, useState } from 'react';
 import { useUnityContext } from 'react-unity-webgl';
 import styles from './index.module.scss';
@@ -9,6 +10,10 @@ export const InteropPage = () => {
 
   const { addEventListener, removeEventListener } = useUnityContext({} as any);
 
+
+  const { InteropTest }= useGlobals();
+  const deltaTime = useReactiveValue(InteropTest.DeltaTime);
+
   useEffect(() => {
     if (shouldListen) {
       const remove = Globals.InteropTest.AddKeyPressListener((key) => {
@@ -39,6 +44,8 @@ export const InteropPage = () => {
     {!!pressedKey && <view>
       <text>Pressed key is: {pressedKey}</text>
     </view>}
+
+    Delta Time: {deltaTime}
   </view>;
 };