Whether searching for the ReactUnity component:

Or using the ReactCanvas prefab:

It seems that after running openupm add com.reactunity.core, that component script is not present or cannot be found. I am running Node 12 and Unity 2019.4.8f1. I know this version of Unity is not one of the ones listed as having been tested, so if that's the issue, that's fine. I just want to double check to see whether there's something else going on.

Seems to be an issue with the typing.

If I do

<text style={{textAlign: "center"}}>
  some centered text
</text>

I get this Typescript error:

Type '{ textAlign: string; }' is not assignable to type 'Style'.
  Object literal may only specify known properties, and 'textAlign' does not exist in type 'Style'.  TS2322

but if I ignore it, the text is correctly centered.

Turns out that whether a method on an object gets passed from C# to Javascript via the globals mechanism depends on what the object's class is.

In particular, methods on a MonoBehaviour object are not passed through, though equivalent methods on a class that derives directly from UnityEngine.Object are passed through. I initially thought it was simply a matter of the object needing to be a UnityEngine.Object, but MonoBehaviour also derives from UnityEngine.Object so it's not just that.

Not sure if this is a React Unity issue or just an issue of MonoBehaviour doing something unexpected.

Example:

// C#:

class MyComponent : MonoBehaviour {
    public void SetupStuff() {
        var component = GameObject.Find("SomeObject").GetComponent<ReactUnity.UGUI.ReactUnityUGUI>();

        // Make the component available as myComponent. The FromReact method is not available.
        component.Globals["myComponent"] = this;

        // Make a MyObject available as myObject. The FromReact method on this object is available,
        // even though it's basically the same.
        component.Globals["myObject"] = new MyObject();
    }
        
    public void FromReact(string s) {
        Debug.Log("From react (but nope) " + s);
    }
}

class MyObject : UnityEngine.Object {
    public void FromReact(string s) {
        Debug.Log("From react (and yes!) " + s);
    }
}

React:

function MyComponent() {
  const globals = globalsWatcher.useContext();
  console.log("myComponent " + (globals.myComponent.FromReact != null));
  console.log("myObject" + (globals.myObject.FromReact != null));
}

The logs will say

myComponent false
myObject true

When I installed this package on a project that is using Photon, I get the following error as the library also adds the same precompiled assembly:

Multiple precompiled assemblies with the same name websocket-sharp.dll included on the current platform. Only one assembly with the same name is allowed per platform.

Minimal reproduction
https://github.com/Syynth/reactunity-icon-bug

import { Renderer } from '@reactunity/renderer';
import { useState } from 'react';
import './index.scss';

function App() {
  const [count, setCount] = useState(0);
  return <icon onPointerClick={() => setCount(count + 1)}>house</icon>;
}

Renderer.render(<App />);

Depending on the icon, in Unity I can see some text in the TMP component inspector, and after clicking the icon, that text has been cleared.

In the web, rounded border radius is computed differently for the outer and inner edges of the border, so the border can maintain it's width constant through the curve:

• The outer edge has the full given border radius.
• The inner edge has the full given border radius minus the width of the border (clamping negative values to 0).

Currently in ReactUnity, we are using a shader that computes the full given radius for both edges, resulting in extra thickness for the rounded borders at the corner curve.

Here are some comparison screenshots of Web versus ReactUnity

As a bonus, it would be nice to implement some antialiasing to remove the jagged edges.

Like mentioned in another issue, the wizard inside Unity doesn't work for me, so I tried npm init react-unity on project root as mentioned in the comments, but I get a No valid versions available for create-react-unity error.

If I try {{fontWeight: "bold"}} or a number, say, {{fontWeight: 900}}, these are ignored and the text is just displayed at the regular weight. I've noticed that fontStyle: "italic" does work as expected though.

I'm not entirely sure I know what I'm talking about but it seems the fontWeight property on the TextMeshPro component is being used. The docs for this property say

Control the weight of the font if an alternative font asset is assigned for the given weight in the font asset editor.

so my guess is the reason it's not working is because of the "alternative font asset" requirement. So I'm not sure of a general solution for supporting font weights.

I did notice that fontStyle property in the same TextMeshPro class does include options for creating bold text (link) and this appears to work when I play with it manually in the inspector, so possibly this would be helpful for supporting {{fontWeight: "bold"}} at least.

Got this exeption by opening setup wizard:
Win32Exception: ApplicationName='node', CommandLine='-v', CurrentDirectory='', Native error= The system cannot find the file specified. Node.js is installed.

I'm developing an XR-project (VR) and I'd like to create the floating main menu with React as I'm very familiar with the library.

However, I'm unable to get ReactUnity work in other than Screen Space render mode. And as this is a VR-project, Screen Space is not usable for me.

1. Does ReactUnity support World Space rendering?
2. Does ReactUnity somehow not support XR?

There is this buggy white pane rendered that appears to be empty:

Issue:
Horizontal scrollbar(?) is visible in scroll component that should only have vertical scroll enabled by default. Beyond that, the horizontal scrollbar is flickering in VR.

Replication:

1. Create a scroll component <scroll>...</scroll>.
2. Look at the component in VR.

Also, can the scroll be stylized? What's the css hook for it? ::-webkit-scrollbar doesn't seem to be it.

I was trying to install Tailwind CSS to help with the styling process. Unfortunately, they are using complex values for color which is currently not handled.

Color input string:

59 130 246 / var(--tw-bg-opacity)

Result:

System.NullReferenceException: Object reference not set to an instance of an object
  at ReactUnity.Styling.Functions.RgbaFunction.Call (System.String name, System.String[] args, System.String argsCombined) [0x00036] in path\Packages\react-unity-core\Runtime\Styling\Functions\Rgba.cs:16 
  at ReactUnity.Styling.CssFunctions.TryCall (System.String expression, System.Object& result, System.Collections.Generic.HashSet`1[T] allowed) [0x0007a] in path\Packages\react-unity-core\Runtime\Styling\CssFunctions.cs:65 
  at ReactUnity.Converters.ColorConverter.Parse (System.String value) [0x00015] in path\Packages\react-unity-core\Runtime\Converters\ColorConverter.cs:169 
  at ReactUnity.Converters.GeneralConverter.Parse (System.String value) [0x0005f] in path\Packages\react-unity-core\Runtime\Converters\GeneralConverter.cs:41 
  at ReactUnity.Styling.StyleProperty`1[T].Parse (System.String value) [0x00089] in path\Packages\react-unity-core\Runtime\Styling\Properties\StyleProperty.cs:65 
  at ReactUnity.Styling.StyleProperty`1[T].Convert (System.Object value) [0x00010] in path\Packages\react-unity-core\Runtime\Styling\Properties\StyleProperty.cs:35 
  at ReactUnity.Styling.StyleProperty`1[T].Modify (System.Collections.Generic.IDictionary`2[TKey,TValue] collection, System.Object value) [0x0001b] in path\Packages\react-unity-core\Runtime\Styling\Properties\StyleProperty.cs:83 
  at ReactUnity.Styling.Rules.RuleHelpers.ConvertStyleDeclarationToRecord (ExCSS.StyleDeclaration rule, System.Boolean important) [0x00059] in path\Packages\react-unity-core\Runtime\Styling\Rules\RuleHelpers.cs:161 
  at ReactUnity.Styling.Rules.StyleTree.AddStyle (ExCSS.StyleRule rule, System.Int32 importanceOffset, ReactUnity.Styling.Rules.MediaQueryList mql, ReactUnity.IReactComponent scope) [0x0005a] in path\Packages\react-unity-core\Runtime\Styling\Rules\RuleTree.cs:26 
  at ReactUnity.Styling.StyleSheet.Initialize (System.String style, ReactUnity.IReactComponent scope) [0x001c5] in path\Packages\react-unity-core\Runtime\Styling\StyleSheet.cs:68 
  at ReactUnity.Styling.StyleSheet..ctor (ReactUnity.Styling.StyleContext context, System.String style, System.Int32 importanceOffset, ReactUnity.IReactComponent scope) [0x0004a] in path\Packages\react-unity-core\Runtime\Styling\StyleSheet.cs:29 
  at ReactUnity.ReactContext.InsertStyle (System.String style, System.Int32 importanceOffset) [0x00001] in path\Packages\react-unity-core\Runtime\Core\ReactContext.cs:95 
  at ReactUnity.ReactContext.InsertStyle (System.String style) [0x00000] in path\Packages\react-unity-core\Runtime\Core\ReactContext.cs:91 
  at ReactUnity.Scripting.DomProxies.StyleProxy.ProcessNodes () [0x00025] in path\Packages\react-unity-core\Runtime\Scripting\DomProxies\Document.cs:242 
  at ReactUnity.Scripting.DomProxies.StyleProxy+StyleSheetProxy.set_cssText (System.String value) [0x00024] in path\Packages\react-unity-core\Runtime\Scripting\DomProxies\Document.cs:184 
  at (wrapper managed-to-native) System.Reflection.RuntimeMethodInfo.InternalInvoke(System.Reflection.RuntimeMethodInfo,object,object[],System.Exception&)
  at System.Reflection.RuntimeMethodInfo.Invoke (System.Object obj, System.Reflection.BindingFlags invokeAttr, System.Reflection.Binder binder, System.Object[] parameters, System.Globalization.CultureInfo culture) [0x0006a] in <cdc4992cc04a4e77a24a09cd121af77b>:0 

Full CSS Property as created by tailwind:

.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

I will try to look for solution on how I can help using pull request, but without knowledge of this repo, it might be that you will be able to fix this faster (I couldn't find if you currently can handle variables at all :( )

Example of what I'm trying to achieve:

// unity.cs

int counter = 0;
DoThing(Action<int> callback)
{
  counter++;
  callback(counter);
}

// react.tsx

onClick={() =>
  globals.unity.DoThing((counter: number) => {
    console.log(counter);
  })
}

So JS calls the CS method, which in turn calls a JS callback.

Looking at the generated types for Action, I'm guessing this isn't how it would work. Any way to achieve something like this? Just want my JavaScript to be able to react to something that happened on the C# side.

I think this might be the only ReactUnityUIDocument related.

When you start your application, and you use 100vh or 100vw you get a component over the full screen. But after you change the resolution of the window. For example through resolution picker:

Size in pixels of 100vh or 100vw property is not updated and left as is.

Example:
We start with a height of 720 pixels. We use 100vh on a div, and this div is set to 720 pixels.
Then we change the size of the window and by extension, its resolution, so the height is now1080 pixels.
But we notice that the div of 100vh is still of size 720 pixels.

Add tooltip and virtual list from material to core (without style)

When creating transition we might want to split the transition CSS property into multiple properties like: transition-property, transition-duration, transition-delay.

As from examples: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#simple_example

Currently, they are not working

Working code

.transition {
    transition: opacity cubic-bezier(0.4, 0, 0.2, 1) 300ms;
}

Not working equivalent

.transition-test {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

Other issues that's are caused by the same root cause.

Property split between styles

.transition {
    transition: opacity cubic-bezier(0.4, 0, 0.2, 1) 300ms;
}

.transition-longer{
    transition-duration: 1s;
}

<div className="transition transition-longer" ...

Transition "all"

.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

When importing a package from the source, instead of a package, because tests are using a new input system, a pre-processor is needed. Otherwise, the project cannot be properly imported while using the old input system.

Example exception:

Packages\react-unity-core\Tests\Runtime\Utils\TestBase.cs(27,17): error CS0246: The type or namespace name 'Mouse' could not be found (are you missing a using directive or an assembly reference?)

Because adding preprocessors to whole test classes creates other issues, I propose adding "Define Constraints" to the asmdef of the tests files.

Is: UNITY_INCLUDE_TESTS
Should be UNITY_INCLUDE_TESTS && ENABLE_INPUT_SYSTEM

Great project ! Is it possible to hide the loading bar and unity loading in the background by displaying any react page in front? If so, how can I do it? Thanks !

This markup
<input placeholder=“Input placeholder” />
results in a text field with no placeholder visible; here’s a screenshot of the editor UI

There isn’t any placeholder in the hierarchy AFAICT.
The placeholder prop of <TextField> is working as expected

Reproduces 100% in the ReactUnityFullSample project

Looking through documentation, I couldn't find information about executing public functions of custom scripts. Is it possible?

For something like:

const { Menu } = globalsWatcher.useContext();
return <button onClick={() => { Menu.ExitGame(); }}>Exit to desktop</button>;

Where Menu is a game object with a script, holding the public ExitGame.

If not, is this a planned feature?

Git tag: v0.0.5
package.json version: 0.0.4

To fix: bump version then re-tag v0.05

Further reading:

• Managing release with CI: https://medium.com/openupm/how-to-maintain-upm-package-part-2-f352fbf5f87c
• Managing release with CLI https://medium.com/openupm/how-to-maintain-upm-package-part-4-managing-package-release-with-cli-972ff5311163

Great idea for a project, awesome work!
When I run this on 2019.3 on mac os X, I get the following error when clicking on "create project" in the editor:

When I load the ReactUnity package, I get the following error:

The scripted importer 'ReactUnityTextAssetsImporter' attempted to register file type '.js', which is handled by a native Unity importer. Registration rejected.
UnityEditor.AssetImporters.ScriptedImporter:RegisterScriptedImporters ()

I'm using Unity 2021.2.3f1 and ReactUnity version 0.11.1.

since unity 2020 is latest, but old project may use 2017 or else, how to support old unity versions?

When using the border-bottom and border-right shorthand css syntax, color is ignored unless set separately. They do work if used in conjunction with another border-* property, or with border-color, but not on their own.

Here is a visual representation of how they function.

// does not set color
<view style={{ borderBottom: '2px solid green' }} />
<view style={{ borderRight: '2px solid green' }} />
// sets color correctly
<view style={{ borderColor: 'green', borderBottom: '2px solid' }} />
<view style={{ borderBottom: '2px solid green', borderRight: '2px solid green' }} />
<view style={{ borderBottom: '2px solid green', borderTop: '2px solid green' }} />

If I add some items to a ReactUnityUGUI's Globals in a script (similarly to how I did in #28):

public class MyComponent : MonoBehaviour {
    public void SetupStuff() {
        var component = GameObject.Find("SomeObject").GetComponent<ReactUnity.UGUI.ReactUnityUGUI>();

        component.Globals["someProp"] = "some value";
        component.Globals["someOtherProp"] = <some other value, it doesn't seem to matter>;
    }
}

and in my React I use globalsWatcher.useContext() to try to access them, everything works fine when I'm running the game from the Unity editor.

However when I create an actual build, the objects are not there on the Javascript side. There's no error that I can see, the objects are just absent.

Objects that I add to the Globals statically via the inspector in the Unity UI do work both in the editor and in the build, though.

If I write a component that tries to use the React useState hook, I get the following error from the yarn start process:

Failed to compile.

Module not found: Error: You attempted to import /path/to/react/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/slicedToArray which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.

Note: I get the same error from a clean checkout of the full-sample repo.

I'm able to work around the problem by hacking out the check in ModuleScopePlugin.js in react-dev-utils:

diff --git a/react/node_modules/react-dev-utils/ModuleScopePlugin.js b/react/node_modules/react-dev-utils/ModuleScopePlugin.js
index e84d2b3..0c1cf46 100644
--- a/react/node_modules/react-dev-utils/ModuleScopePlugin.js
+++ b/react/node_modules/react-dev-utils/ModuleScopePlugin.js
@@ -56,6 +56,7 @@ class ModuleScopePlugin {
         // Find path from src to the requested file
         // Error if in a parent directory of all given appSrcs
         if (
+          false &&
           appSrcs.every(appSrc => {
             const requestRelative = path.relative(appSrc, requestFullPath);
             return (

but I'm sure there is a more sensible solution.

Hi, love this package! It's something I've always wanted for unity. I noticed in my unity project that react doesn't seem to rerender when Globals change. Is this a known issue, or am I doing something wrong? If you'd like, I can bring some further details/images to clarify

There are some non-critical issues in the scripts.

• An error happens in the hot reload (link)
• An error happens when accessing EventSystem.Current (link)

I have a React library that use Styled-Components which has a dependency on @emotion.
The problem is that when I build using ReactUnity emotion add a bunch of regular expression to the index.js file that don't seem to the compatible with Esprima for some reeason.

here's the code added by emotion, I've highlighted the problematic expression.
var r = /^\0+/g,
c = /[\0\r\f]/g,
s = /: /g,
t = /zoo|gra/,
i = /([,: ])(transform)/g,
f = /,+\s(?![^(][)])/g,
n = / +\s(?![^(][)])/g,
l = / [\0] /g,
o = /,\r+?/g,
h = /([\t\r\n ])\f?&/g,
u = /:global(((?:[^\(\)\[\]]|[.]|([^\(\)]))))/g,
d = /\W+/g,
b = /@(k\w+)\s*(\S*)\s*/,
p = /::(place)/g,
k = /:(read-only)/g,
g = /\s+(?=[{];=:>])/g,
A = /([[}=:>])\s+/g,
C = /({[^{]+?);(?=})/g,
w = /\s{2,}/g,
v = /([^\(])(:+) /g,
m = /[svh]\w+-[tblr]{2}/,
x = /(\s(.)\s)/g,
$ = /([\s\S]?);/g,
y = /-self|flex-/g,
O = /[^]*?(:[rp][el]a[\w-]+)[^]*/,
j = /stretch|:\s\w+-(?:conte|avail)/,
z = /([^-])(image-set()/,
...

here's the call stack:

ParserException: Line 10265: Invalid regular expression
Esprima.Scanner.ThrowUnexpectedToken (System.String message) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.Scanner.TestRegExp (System.String pattern, System.String flags) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.Scanner.ScanRegExp () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.NextRegexToken () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParsePrimaryExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseLeftHandSideExpressionAllowCall () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseUpdateExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseUnaryExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseExponentiationExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseBinaryExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseConditionalExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseAssignmentExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.IsolateCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseVariableDeclaration (System.Boolean& inFor) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseVariableDeclarationList (System.Boolean& inFor) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseVariableStatement () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseStatement () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseStatementListItem () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseFunctionSourceElements () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseFunctionExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParsePrimaryExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseLeftHandSideExpressionAllowCall () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseUpdateExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseUnaryExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseExponentiationExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseBinaryExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseConditionalExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseAssignmentExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.IsolateCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseArguments () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseLeftHandSideExpressionAllowCall () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseUpdateExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseUnaryExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseUnaryExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseExponentiationExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseBinaryExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseConditionalExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseAssignmentExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.IsolateCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseExpressionStatement () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseStatement () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseStatementListItem () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseFunctionSourceElements () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseAssignmentExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseGroupExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParsePrimaryExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseLeftHandSideExpressionAllowCall () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseUpdateExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseUnaryExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseExponentiationExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseBinaryExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseConditionalExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseAssignmentExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseObjectProperty (Esprima.Token hasProto) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseObjectInitializer () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParsePrimaryExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseLeftHandSideExpressionAllowCall () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseUpdateExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseUnaryExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseExponentiationExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseBinaryExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseConditionalExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseAssignmentExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseGroupExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParsePrimaryExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseLeftHandSideExpressionAllowCall () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseUpdateExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseUnaryExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseExponentiationExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseBinaryExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseConditionalExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseAssignmentExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.IsolateCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseVariableDeclaration (System.Boolean& inFor) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseVariableDeclarationList (System.Boolean& inFor) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseVariableStatement () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseStatement () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseStatementListItem () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseFunctionSourceElements () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseAssignmentExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseGroupExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParsePrimaryExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseLeftHandSideExpressionAllowCall () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseUpdateExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseUnaryExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseExponentiationExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseBinaryExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.InheritCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseConditionalExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.ParseAssignmentExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0) Esprima.JavaScriptParser.IsolateCoverGrammar[T] (System.Func1[TResult] parseFunction) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseExpression () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseExpressionStatement () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseStatement () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseStatementListItem () (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Esprima.JavaScriptParser.ParseScript (System.Boolean strict) (at <8417cb4e01e54c02aaa0c58a3fa07237>:0)
Jint.Engine.Execute (System.String source, Esprima.ParserOptions parserOptions) (at <733431bc09c04bb28a5f900924eb54a6>:0)
Jint.Engine.Execute (System.String source) (at <733431bc09c04bb28a5f900924eb54a6>:0)
ReactUnity.ReactUnityRunner.RunScript (System.String script, ReactUnity.ReactContext ctx, UnityEngine.Events.UnityEvent1[T0] beforeStart, UnityEngine.Events.UnityEvent1[T0] afterStart) (at Library/PackageCache/[email protected]/Runtime/Core/ReactUnityRunner.cs:50)
UnityEngine.Debug:LogException(Exception)
ReactUnity.ReactUnityRunner:RunScript(String, ReactContext, UnityEvent1, UnityEvent1) (at Library/PackageCache/[email protected]/Runtime/Core/ReactUnityRunner.cs:56)
ReactUnity.<>c__DisplayClass32_0:b__0(String, Boolean) (at Library/PackageCache/[email protected]/Runtime/Core/ReactUnity.cs:72)
ReactUnity.d__20:MoveNext() (at Library/PackageCache/[email protected]/Runtime/Core/ReactScript.cs:178)

Hello @KurtGokhan ,

I'm running a bootstrapped startup that would very much like to engage with your code base. Are you open to relaxed, part-time work?

If so, please feel free to drop me an email at [email protected]

Thanks for the consideration.

Forward slash \ should escape the next character in CSS file

Source: Repository
Branch: Main
Renderer: ReactUnityUIDocument

Example:

.button {
    color: white;
    background-color: rgb(59 130 246);
}

.hover\:button:hover {
    background-color: rgb(212, 0, 231);
}

Should be used as:

<button className="button hover:button">
     Text
</button>

Expected result: Button should change color on hover
Actual result: Nothing happens

When adding any JS code to the return method in the functional component we get an error that breaks react UI.

export default function MyFComponent() {
    return<>
        {console.log("noo... I crashed UI :( ")}
    </>
}

Expected result
Console log is written with the message

Logs

The above error occurred in the <MyFComponent> component:

    at MyFComponent(webpack-internal:///./src/pages/MyFComponent.tsx:45:66)
    at Outlet (webpack-internal:///./node_modules/react-router/index.js:903:26)
    at main
    at Layout (webpack-internal:///./src/pages/Layout.tsx:16:81)
    at Routes (webpack-internal:///./node_modules/react-router/index.js:1002:24)
    at Router (webpack-internal:///./node_modules/react-router/index.js:927:30)
    at MemoryRouter (webpack-internal:///./node_modules/react-router/index.js:833:23)
    at App
    at GlobalsProvider (webpack-internal:///./node_modules/@reactunity/renderer/dist/src/helpers/dictionary-watcher.js:37:23)
    at ErrorBoundary (webpack-internal:///./node_modules/@reactunity/renderer/dist/src/views/error-boundary.js:60:24)
    at DefaultView (webpack-internal:///./node_modules/@reactunity/renderer/dist/src/views/default-view.js:12:21)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
UnityEngine.Debug:LogError (object)
ReactUnity.Scripting.DomProxies.ConsoleProxy:GenericLog (object,System.Action`1<string>,object[]) (at Packages/react-unity-core/Runtime/Scripting/DomProxies/Console.cs:40)
ReactUnity.Scripting.DomProxies.ConsoleProxy:error (object) (at Packages/react-unity-core/Runtime/Scripting/DomProxies/Console.cs:81)
System.Reflection.MethodBase:Invoke (object,object[])
Microsoft.ClearScript.Util.InvokeHelpers:InvokeMethod (Microsoft.ClearScript.Util.IHostInvokeContext,object,System.Reflection.MethodInfo,object[])
Microsoft.ClearScript.HostItem/MethodBindSuccess:Invoke (Microsoft.ClearScript.HostItem)
Microsoft.ClearScript.HostItem:InvokeMethod (string,System.Type[],object[],object[])
Microsoft.ClearScript.HostItem:InvokeMethod (string,object[],object[])
Microsoft.ClearScript.HostItem:InvokeHostMember (string,System.Reflection.BindingFlags,object[],object[],System.Globalization.CultureInfo,bool&)
Microsoft.ClearScript.HostItem:InvokeMember (string,System.Reflection.BindingFlags,object[],object[],System.Globalization.CultureInfo,bool,bool&)
Microsoft.ClearScript.HostItem:InvokeMember (string,System.Reflection.BindingFlags,object[],object[],System.Globalization.CultureInfo,bool)
Microsoft.ClearScript.HostMethod:TryInvoke (Microsoft.ClearScript.Util.IHostInvokeContext,System.Reflection.BindingFlags,object[],object[],object&)
Microsoft.ClearScript.Util.InvokeHelpers:TryInvokeObject (Microsoft.ClearScript.Util.IHostInvokeContext,object,System.Reflection.BindingFlags,object[],object[],bool,object&)
Microsoft.ClearScript.HostItem:InvokeHostMember (string,System.Reflection.BindingFlags,object[],object[],System.Globalization.CultureInfo,bool&)
Microsoft.ClearScript.HostItem:InvokeMember (string,System.Reflection.BindingFlags,object[],object[],System.Globalization.CultureInfo,bool,bool&)
Microsoft.ClearScript.HostItem/<>c__DisplayClass141_0:<InvokeReflectMember>b__0 ()
Microsoft.ClearScript.ScriptEngine:HostInvoke<object> (System.Func`1<object>)
Microsoft.ClearScript.HostItem:HostInvoke<object> (System.Func`1<object>)
Microsoft.ClearScript.HostItem:InvokeReflectMember (string,System.Reflection.BindingFlags,object[],System.Globalization.CultureInfo,string[],bool&)
Microsoft.ClearScript.HostItem:InvokeReflectMember (string,System.Reflection.BindingFlags,object[],System.Globalization.CultureInfo,string[])
Microsoft.ClearScript.HostItem:System.Reflection.IReflect.InvokeMember (string,System.Reflection.BindingFlags,System.Reflection.Binder,object,object[],System.Reflection.ParameterModifier[],System.Globalization.CultureInfo,string[])
Microsoft.ClearScript.HostItem:Microsoft.ClearScript.Util.IDynamic.Invoke (bool,object[])
Microsoft.ClearScript.V8.V8ProxyHelpers:InvokeHostObject (object,bool,object[])
Microsoft.ClearScript.V8.V8ProxyHelpers:InvokeHostObject (intptr,bool,object[])
Microsoft.ClearScript.V8.SplitProxy.V8SplitProxyManaged:InvokeHostObject (intptr,bool,Microsoft.ClearScript.V8.SplitProxy.StdV8ValueArray/Ptr,Microsoft.ClearScript.V8.SplitProxy.V8Value/Ptr)
Microsoft.ClearScript.V8.SplitProxy.V8SplitProxyNative/Impl_Windows_X64:Microsoft.ClearScript.V8.SplitProxy.IV8SplitProxyNative.V8Object_Invoke (Microsoft.ClearScript.V8.SplitProxy.V8Object/Handle,bool,object[])
Microsoft.ClearScript.V8.SplitProxy.V8ObjectImpl/<>c__DisplayClass18_0:<Invoke>b__0 (Microsoft.ClearScript.V8.SplitProxy.IV8SplitProxyNative)
Microsoft.ClearScript.V8.SplitProxy.V8SplitProxyNative:Invoke<object> (System.Func`2<Microsoft.ClearScript.V8.SplitProxy.IV8SplitProxyNative, object>)
Microsoft.ClearScript.V8.SplitProxy.V8ObjectImpl:Invoke (bool,object[])
Microsoft.ClearScript.V8.V8ScriptItem/<>c__DisplayClass21_0:<Invoke>b__0 ()
Microsoft.ClearScript.ScriptEngine:ScriptInvokeInternal<object> (System.Func`1<object>)
Microsoft.ClearScript.V8.V8ScriptEngine/<>c__DisplayClass120_0`1<object>:<ScriptInvoke>b__0 ()
Microsoft.ClearScript.V8.SplitProxy.V8SplitProxyManaged:InvokeHostAction (intptr)
Microsoft.ClearScript.V8.SplitProxy.V8SplitProxyNative/Impl_Windows_X64:Microsoft.ClearScript.V8.SplitProxy.IV8SplitProxyNative.V8Context_InvokeWithLock (Microsoft.ClearScript.V8.SplitProxy.V8Context/Handle,intptr)
Microsoft.ClearScript.V8.SplitProxy.V8ContextProxyImpl/<>c__DisplayClass13_0:<InvokeWithLock>b__0 (Microsoft.ClearScript.V8.SplitProxy.IV8SplitProxyNative)
Microsoft.ClearScript.V8.SplitProxy.V8SplitProxyNative:Invoke (System.Action`1<Microsoft.ClearScript.V8.SplitProxy.IV8SplitProxyNative>)
Microsoft.ClearScript.V8.SplitProxy.V8ContextProxyImpl:InvokeWithLock (System.Action)
Microsoft.ClearScript.V8.V8ScriptEngine:ScriptInvoke<object> (System.Func`1<object>)
Microsoft.ClearScript.V8.V8ScriptItem:Invoke (bool,object[])
ReactUnity.Helpers.Callback:Call (object[]) (at Packages/react-unity-core/Runtime/Helpers/Callback.cs:111)
ReactUnity.Helpers.Callback:Call () (at Packages/react-unity-core/Runtime/Helpers/Callback.cs:72)
ReactUnity.Scheduling.DefaultScheduler/<>c__DisplayClass3_0:<setTimeout>b__0 () (at Packages/react-unity-core/Runtime/Scheduling/DefaultScheduler.cs:19)
ReactUnity.Scheduling.RuntimeDispatcher/<TimeoutCoroutine>d__30:MoveNext () (at Packages/react-unity-core/Runtime/Scheduling/RuntimeDispatcher.cs:211)
UnityEngine.SetupCoroutine:InvokeMoveNext (System.Collections.IEnumerator,intptr)

This is an awesome project!

I was trying to build a Unity project using react-unity for iOS, but the build failed in Xcode with these errors:

Does react-unity (yet) support iOS?

Unity version: 2019.4.0f1

1. Create a transform in the scene whose position and rotation are non-zero

2. Add a world space canvas + ReactUnityUGUI as a child of that transform

3. Enter play mode
   => all child transforms of the React canvas have a non-zero z position

The key here is setting the parent transform’s rotation to be non-zero.

Hi,
Is there a way to pass data from the ui generated by react and unity game?
i.e. changing the move speed of a gameobject when clicking a button.

Hi, been really enjoying this framework -

Any chance that image masking can make its way onto the roadmap? Would be really helpful for some work I'm doing with health/loading bars, etc with more complex shapes that can't be handled by just the overflow prop, unless there's some way to accomplish this that I've missed.

https://docs.unity3d.com/Packages/[email protected]/manual/script-Mask.html

using yarn start command to start, can only see changes from http://localhost:3000, changes could not apply to mobile device. Is there any other steps?

Hi there,

This looks to be a very exciting project, solving my number one gripe with Unity UI, and I'm very excited to use it.

Unfortunately, when I try to install it, I'm getting compilation errors in Unity.

I tried at first with Unity 2021.1.12f1, which gives a tonne of them:
(Same result with openupm or the Package Manager window)

Then with Unity 2020.3.12f1, which gives me just one.

Looking into the code just quickly, I thought it looked like there might be a typo on line 81 of ReactWindow.cs
where it might be supposed to say

protected JavascriptEngineType EngineType

instead of

protected JavascriptEngineType JavascriptEngineType

But I'm not sure. (Unity won't let me edit the code of the package on my local machine - I assume it checks with hashes etc.)

Have you seen either of these situations before & do you know how I might solve them?

Thanks again for working on such an interesting project.

After switching from ClearScript to Jint, our Immer state patching gives this error. I verified that the path in question does indeed exist. What else can I provide to help debug?

The path structure in question:
rooms: { [key: string]: RoomData }

[Immer] Cannot apply patch, path doesn't resolve: rooms/6164fb93609d220001cf6adc
   at beginWork$1 (current, unitOfWork, lanes) :16340:13
   at performUnitOfWork (unitOfWork) :15167:16
   at workLoopSync () :15101:9
   at renderRootSync (root, lanes) :15067:11
   at bound performSyncWorkOnRoot :14650:22
   at eventHandler () :2556:30
   at unstable_runWithPriority (priorityLevel, eventHandler) :468:16
   at runWithPriority (reactPriorityLevel, fn) :2502:14
   at flushSyncCallbackQueueImpl () :2551:13
   at flushSyncCallbackQueue () :2539:7
   at scheduleUpdateOnFiber (fiber, lane, eventTime) :14250:13
   at bound dispatchAction :7493:9
   at :52:9

Is there any support for inline elements?

I would like to render text with various stylings (ie. as if generated from Markdown).

I'd be happy to generate the markup manually, ie. if I wanted to render "regular italic regular" I would do something like

<span>regular</span>
<span style={{fontStyle: "italic"}}>italic</span>
<span>regular</span>

but I'm not sure how to create an equivalent of a span tag or if it is even possible.

In my project, I’m using a custom font family, specified using @font-face

When using this font-family in a class, I found that it doesn't work if I have quotation marks around the font-family value. Removing the quotation marks lets it work.

CSS on web tolerates quotes around the font-family value, so I think ReactUnity should allow with or without quotes as well.

@font-face {
  font-family: "SofiaProBold";
  src: url("resource:FontsAndMaterials/SofiaProBold");
}

.title {
  font-family: "SofiaProBold"; // <-- this does not work
  font-family: SofiaProBold; // <-- this works
}

Hi, very good package, I like it.
The react layout props auto value is translated to 0.

example of layout prop added to a button in .tsx:

layout:{
    MaxWidth: 'auto',
    MaxHeight: 'auto',
    Width: '50%',
    Height: '10%',
    MinWidth: 10,
    MinHeight: 10
}

it will show the buttun 10*10px even if width is 99999px because the MaxWidth value will set the max-width to 0.

I hope to be enough clear.

This feature was requested several times in the Discord server.

JINT run slow, lots of memory, How to use QuickJS instead of JINT

TextMeshPro labels support lowercase, uppercase, and small caps transforms via the FontStyles property, but these don’t seem to be plumbed through in ReactUnity.

It would be great to have the CSS text-transform selector apply those style values to TextMesh Pro instances.

load with react unity script(not development build)
https://user-images.githubusercontent.com/44422450/128189662-9c8dce92-0063-478e-989f-ab99b96b19ea.mp4

disable react unity script
https://user-images.githubusercontent.com/44422450/128189948-f91436a4-5a60-4546-85bc-c2c6e3537acd.mp4

is there any settings not correct?

https://github.com/delight-dev/Delight

i think it can help you to make soming.

When the style is dynamic with the use of the if statement directly in the render method, its changes are not reflected upon state change.

Example:

function Foo() {
  const [state, setState] = useState('none');

    return (
      <button className={(state !== 'game' ? ' class1' : ' class2')}
        onClick={() => (state !== 'game' ? setState('game') : setState('none'))}>
          Test
      </button>
    );
}

Actual result
Nothing happens

Expected result
Assuming class1 should set scale to 125 and class2 should set scale to 100
https://user-images.githubusercontent.com/5092066/165640284-ad62f2dc-0217-46c2-8751-60ed89688658.mp4

how can i create a custom markdown high-level components and integrate it into react-unity and assign to it a custom style
IE: images, gradient...