add html renderer examples

Author: KurtGokhan

public/Unity/injectable/Build/WebInjectable.data

@@ -27,6 +27,11 @@ function SandpackRoot(props: SandpackProps) {
     ...files['/styles.css'],
   };
 
+  if (!Object.values(files).some((x: any) => x.active)) {
+    if (files['/index.html']) files['/index.html'].active = true;
+    else if (files['/App.js']) files['/App.js'].active = true;
+  }
+
   return (
     <div className="sandpack sandpack--playground my-8">
       <SandpackProvider
@@ -37,7 +42,6 @@ function SandpackRoot(props: SandpackProps) {
           autorun,
           initMode: 'user-visible',
           initModeObserverOptions: { rootMargin: '1400px 0px' },
-          bundlerURL: 'https://dad0ba0e.sandpack-bundler-4bw.pages.dev',
           logLevel: SandpackLogLevel.None,
         }}>
         <CustomPreset

public/Unity/injectable/Build/WebInjectable.framework.js

@@ -130,13 +130,16 @@ export function UnityPreview({
 
   const code = sandpack.files['/App.js']?.code;
   const css = sandpack.files['/styles.css']?.code;
+  const html = sandpack.files['/index.html']?.code;
 
   const compiledCode = React.useMemo(() => compile(code || '', 'jsx') || '', [code]);
   const compiledCss = React.useMemo(() => compile(css || '', 'css') || '', [css]);
+  const compiledHtml = React.useMemo(() => compile(html || '', 'html') || '', [html]);
 
   const ccError: any = compiledCode.error || compiledCss.error || undefined;
 
   const delayedCss = useDebounce(compiledCss.compiledCode, 300);
+  const delayedHtml = useDebounce(compiledHtml.compiledCode, 500);
 
   const codeSubj = useSubject(compiledCode);
 
@@ -180,6 +183,7 @@ export function UnityPreview({
         )}>
         <UnityCardridge
           script={delayedCode}
+          html={delayedHtml}
           css={sandboxStyle + delayedCss}
           ref={cartridgeRef}
           className={cn(

public/Unity/injectable/Build/WebInjectable.wasm

@@ -7,6 +7,7 @@ import styles from './index.module.scss';
 
 interface Props {
   script?: string | null;
+  html?: string | null;
   css?: string | null;
   className?: string;
   style?: React.CSSProperties;
@@ -21,10 +22,11 @@ export interface UnityCardridgeRef {
 
 export const UnityCardridge = forwardRef<UnityCardridgeRef, Props>(
   function UnityCardridge(
-    { script, css, style, className, hideActivateButton, autoActivate = true },
+    { script, html, css, style, className, hideActivateButton, autoActivate = true },
     ref
   ) {
     const latestScript = React.useRef(script);
+    const latestHtml = React.useRef(html);
     const latestStyle = React.useRef(css);
 
     const unityContainer = React.useRef<HTMLDivElement | null>(null);
@@ -51,6 +53,7 @@ export const UnityCardridge = forwardRef<UnityCardridgeRef, Props>(
         if (reset)
           instanceRef.current?.SetReactScript(
             latestScript.current || '',
+            latestHtml.current || '',
             latestStyle.current || ''
           );
       },
@@ -61,6 +64,7 @@ export const UnityCardridge = forwardRef<UnityCardridgeRef, Props>(
         instanceRef,
         latestStyle,
         latestScript,
+        latestHtml,
       ]
     );
 
@@ -87,11 +91,11 @@ export const UnityCardridge = forwardRef<UnityCardridgeRef, Props>(
       () => {
         latestScript.current = script;
         if (autoActivate) {
-          instance?.SetReactScript(script || '', latestStyle.current || '');
+          instance?.SetReactScript(script || '', html || '', latestStyle.current || '');
           activate();
         }
       },
-      [script, latestStyle, instance, autoActivate, activate],
+      [script, html, latestStyle, instance, autoActivate, activate],
       () => !instance
     );
 

src/components/MDX/Sandpack/SandpackRoot.tsx

@@ -7,7 +7,7 @@ import {
   defaultUnityInstanceName,
   isLoaderScriptLoaded,
   UnityAPI,
-  UnityInstance,
+  UnityInstance
 } from './types';
 
 interface Props {
@@ -64,8 +64,9 @@ export function Unity({
         SendMessage: unityInstance.SendMessage.bind(unityInstance),
         SetFullscreen: unityInstance.SetFullscreen.bind(unityInstance),
         Quit: unityInstance.Quit.bind(unityInstance),
-        SetReactScript: (jsx, css) => {
-          unityInstance.SendMessage('ReactCanvas', 'SetJSX', jsx);
+        SetReactScript: (jsx, html, css) => {
+          if (jsx) unityInstance.SendMessage('ReactCanvas', 'SetJSX', jsx);
+          if (html) unityInstance.SendMessage('ReactCanvas', 'SetHTML', html);
           if (css) unityInstance.SendMessage('ReactCanvas', 'SetCSS', css);
           unityInstance.SendMessage('ReactCanvas', 'RenderBridge');
         },

src/components/MDX/Sandpack/UnityPreview.tsx

@@ -9,7 +9,7 @@ export interface UnityInstance {
 }
 
 export interface UnityAPI extends UnityInstance {
-  SetReactScript: (jsx: string, css: string) => void;
+  SetReactScript: (jsx: string, html: string, css: string) => void;
   ReplaceCSS: (css: string) => void;
   LoadScene: (sceneName: string) => void;
   ReloadScene: () => void;

src/components/unity/cartridge.tsx

@@ -118,7 +118,7 @@ render(<TodoPage />);
 .todo-item {
   flex-direction: row;
   align-items: center;
-  transition: rotate 400ms, margin-bottom 400ms;
+  transition: rotate var(--item-animation-duration), margin-bottom var(--item-animation-duration);
   rotate: 0 0 0;
   width: 360px;
   padding: 4px 0 4px 8px;
@@ -128,6 +128,8 @@ render(<TodoPage />);
   background-color: white;
   border: 1px solid #dedede;
   border-radius: 8px;
+
+  --item-animation-duration: 400ms;
 }
 
 .todo-item:not(:first-child) {
@@ -143,7 +145,7 @@ render(<TodoPage />);
   rotate: 90deg 0 0;
   margin-bottom: -66px;
   pointer-events: none;
-  state-duration: 400ms;
+  state-duration: var(--item-animation-duration);
 }
 
 .todo-item-name {
@@ -161,3 +163,12 @@ render(<TodoPage />);
 
 </Sandpack>
 
+## How does ReactUnity work?
+
+React library is built in a way so that the React paradigm can be used in different platforms. In fact, all platforms which can run Javascript can have a framework like ReactUnity. There are actually more [Awesome React Renderers](https://github.com/chentsulin/awesome-react-renderer) you probably haven't heard of.
+
+The same way you use `react-dom` for web applications, and React Native for mobile applications; you can use ReactUnity for Unity UIs.
+
+## How can I learn ReactUnity?
+
+To learn ReactUnity, you need to learn React first. You can start by the [official React documentation](https://reactjs.org/). If you already feel confident with React, you can keep reading this documentation.

src/components/unity/instance.tsx

@@ -38,14 +38,26 @@ export default function App() {
 
 </Sandpack>
 
-### What is ReactUnity?
+## Rendering XML code
 
-ReactUnity is a framework that lets you code UI using React and show it inside Unity.
+Instead of using React, ReactUnity lets you write HTMl-like code for static UIs. This UI can later be modified from code.
 
-ReactUnity is not a hack or a workaround. It is a legitimate way to use React. React framework is built in a way so that the React logic can be used in different platforms. In fact, all platforms which can run Javascript can have a framework like ReactUnity.
+<Sandpack>
+
+```html
+<view class="items">
+  <text>Hello, Divyesh!</text>
+  <text>Hello, Sarah!</text>
+  <text>Hello, Taylor!</text>
+</view>
+```
 
-In Web development, it is ReactDOM. In native mobile (and desktop) applications, it is React Native. And in Unity, it is ReactUnity. There are actually more [Awesome React Renderers](https://github.com/chentsulin/awesome-react-renderer) you probably haven't heard of.
+```css
+.items {
+  font-size: 32px;
+}
+```
 
-## How can I learn ReactUnity
+</Sandpack>
 
-To learn ReactUnity, you need to learn React first. You can start by the [official React documentation](https://reactjs.org/). If you already feel confident with React, you can keep reading this documentation.
+XML code can also be embedded inside React code. See [`html` component reference](/reference/components/html) for details.