minor changes

src/frontends/react/HelloWorld.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import useShape from "../../ng-mock/js-land/frontendAdapters/react/useShape";
 import flattenObject from "../utils/flattenObject";
 import { TestObjectShapeType } from "src/shapes/ldo/testShape.shapeTypes";
-import type { TestObject } from "src/shapes/ldo/testShape.typings";
 
 export function HelloWorldReact() {
   const state = useShape(TestObjectShapeType);
@@ -10,7 +9,7 @@ export function HelloWorldReact() {
   // @ts-expect-error
   window.reactState = state;
 
-  if (!("id" in state)) return <>Loading state</>;
+  if (!state) return <>Loading state</>;
 
   // Create a table from the state object: One column for keys, one for values, one with an input to change the value.
 
@@ -18,7 +17,14 @@ export function HelloWorldReact() {
     <div>
       <p>Rendered in React</p>
 
-      <button onClick={() => state}>click me to change multiple props</button>
+      <button
+        onClick={() => {
+          state.boolValue = !state.boolValue;
+          state.numValue += 2;
+        }}
+      >
+        click me to change multiple props
+      </button>
 
       <table border={1} cellPadding={5}>
         <thead>

src/ng-mock/js-land/frontendAdapters/react/useShape.ts

@@ -27,7 +27,9 @@ const useShape = <T extends LdoCompactBase>(
     };
   }, []);
 
-  return shapeSignalRef.current.signalObject;
+  if ("id" in shapeSignalRef.current.signalObject)
+    return shapeSignalRef.current.signalObject;
+  else return null;
 };
 
 export default useShape;

src/ng-mock/wasm-land/requestShape.ts

@@ -20,7 +20,7 @@ export const mockTestObject = {
   },
   anotherObject: {
     "id:1": {
-      "id": "id:1",
+      id: "id:1",
       prop1: "prop1 value",
       prop2: 100,
     },
@@ -72,11 +72,11 @@ export default async function requestShape<T extends LdoCompactBase>(
 
   let shapeObject: T;
   if (shape.schema.shapes?.[0].id.includes("TestObject")) {
-    shapeObject = JSON.parse(JSON.stringify(mockTestObject)) as T;
+    shapeObject = mockTestObject as T;
   } else if (shape.schema.shapes?.[0].id.includes("Person")) {
-    shapeObject = JSON.parse(JSON.stringify(mockShapeObject1)) as T;
+    shapeObject = mockShapeObject1 as T;
   } else if (shape.schema.shapes?.[0].id.includes("Cat")) {
-    shapeObject = JSON.parse(JSON.stringify(mockShapeObject2)) as T;
+    shapeObject = mockShapeObject2 as T;
   } else {
     console.warn(
       "BACKEND: requestShape for unknown shape, returning empty object.",

src/shapes/ldo/catShape.typings.ts

@@ -31,6 +31,7 @@ export interface Cat {
    * Original IRI: http://example.org/address
    */
   address: {
+    id: IRI;
     /**
      * Original IRI: http://example.org/street
      */

src/shapes/ldo/personShape.typings.ts

@@ -23,6 +23,7 @@ export interface Person {
    * Original IRI: http://example.org/address
    */
   address: {
+    id: IRI;
     /**
      * Original IRI: http://example.org/street
      */

src/shapes/ldo/testShape.typings.ts

@@ -35,6 +35,7 @@ export interface TestObject {
    * Original IRI: http://example.org/objectValue
    */
   objectValue: {
+    id: IRI;
     /**
      * Original IRI: http://example.org/nestedString
      */