working frontend framework

sdk/js/examples/multi-framework-signals/src/frontends/react/HelloWorld.tsx

@@ -122,38 +122,17 @@ export function HelloWorldReact() {
                             <tbody>
                                 {(() => {
                                     const setNestedValue = (
-                                        obj: any,
-                                        path: string,
+                                        targetObj: any,
+                                        lastKey: string,
                                         value: any
                                     ) => {
-                                        const keys = path.split(".");
-                                        let current = obj;
-
-                                        for (
-                                            let i = 0;
-                                            i < keys.length - 1;
-                                            i++
-                                        ) {
-                                            current = current[keys[i]];
-                                        }
-
-                                        current[keys[keys.length - 1]] = value;
-                                    };
-
-                                    const getNestedValue = (
-                                        obj: any,
-                                        path: string
-                                    ) => {
-                                        return path
-                                            .split(".")
-                                            .reduce(
-                                                (current, key) => current[key],
-                                                obj
-                                            );
+                                        // targetObj is the direct parent object containing the property
+                                        // lastKey is the property name to set
+                                        targetObj[lastKey] = value;
                                     };
 
                                     return flattenObject(ormObj).map(
-                                        ([key, value]) => (
+                                        ([key, value, lastKey, parentObj]) => (
                                             <tr key={key}>
                                                 <td>{key}</td>
                                                 <td>
@@ -175,8 +154,8 @@ export function HelloWorldReact() {
                                                             value={value}
                                                             onChange={(e) => {
                                                                 setNestedValue(
-                                                                    ormObj,
-                                                                    key,
+                                                                    parentObj,
+                                                                    lastKey,
                                                                     e.target
                                                                         .value
                                                                 );
@@ -189,8 +168,8 @@ export function HelloWorldReact() {
                                                             value={value}
                                                             onChange={(e) => {
                                                                 setNestedValue(
-                                                                    ormObj,
-                                                                    key,
+                                                                    parentObj,
+                                                                    lastKey,
                                                                     Number(
                                                                         e.target
                                                                             .value
@@ -205,8 +184,8 @@ export function HelloWorldReact() {
                                                             checked={value}
                                                             onChange={(e) => {
                                                                 setNestedValue(
-                                                                    ormObj,
-                                                                    key,
+                                                                    parentObj,
+                                                                    lastKey,
                                                                     e.target
                                                                         .checked
                                                                 );
@@ -216,17 +195,12 @@ export function HelloWorldReact() {
                                                         <div>
                                                             <button
                                                                 onClick={() => {
-                                                                    const currentArray =
-                                                                        getNestedValue(
-                                                                            ormObj,
-                                                                            key
-                                                                        );
                                                                     setNestedValue(
-                                                                        ormObj,
-                                                                        key,
+                                                                        parentObj,
+                                                                        lastKey,
                                                                         [
-                                                                            ...currentArray,
-                                                                            currentArray.length +
+                                                                            ...value,
+                                                                            value.length +
                                                                                 1,
                                                                         ]
                                                                     );
@@ -236,19 +210,14 @@ export function HelloWorldReact() {
                                                             </button>
                                                             <button
                                                                 onClick={() => {
-                                                                    const currentArray =
-                                                                        getNestedValue(
-                                                                            ormObj,
-                                                                            key
-                                                                        );
                                                                     if (
-                                                                        currentArray.length >
+                                                                        value.length >
                                                                         0
                                                                     ) {
                                                                         setNestedValue(
-                                                                            ormObj,
-                                                                            key,
-                                                                            currentArray.slice(
+                                                                            parentObj,
+                                                                            lastKey,
+                                                                            value.slice(
                                                                                 0,
                                                                                 -1
                                                                             )
@@ -263,13 +232,17 @@ export function HelloWorldReact() {
                                                         <div>
                                                             <button
                                                                 onClick={() => {
-                                                                    const currentSet =
-                                                                        getNestedValue(
-                                                                            ormObj,
-                                                                            key
+                                                                    const newSet =
+                                                                        new Set(
+                                                                            value
                                                                         );
-                                                                    currentSet.add(
-                                                                        `item${currentSet.size + 1}`
+                                                                    newSet.add(
+                                                                        `item${newSet.size + 1}`
+                                                                    );
+                                                                    setNestedValue(
+                                                                        parentObj,
+                                                                        lastKey,
+                                                                        newSet
                                                                     );
                                                                 }}
                                                             >
@@ -277,20 +250,24 @@ export function HelloWorldReact() {
                                                             </button>
                                                             <button
                                                                 onClick={() => {
-                                                                    const currentSet =
-                                                                        getNestedValue(
-                                                                            ormObj,
-                                                                            key
+                                                                    const arr =
+                                                                        Array.from(
+                                                                            value
                                                                         );
                                                                     const lastItem =
-                                                                        Array.from(
-                                                                            currentSet
-                                                                        ).pop();
+                                                                        arr.pop();
                                                                     if (
-                                                                        lastItem
+                                                                        lastItem !==
+                                                                        undefined
                                                                     ) {
-                                                                        currentSet.delete(
-                                                                            lastItem
+                                                                        const newSet =
+                                                                            new Set(
+                                                                                arr
+                                                                            );
+                                                                        setNestedValue(
+                                                                            parentObj,
+                                                                            lastKey,
+                                                                            newSet
                                                                         );
                                                                     }
                                                                 }}

sdk/js/signals/src/connector/ormConnectionHandler.ts

@@ -166,7 +166,7 @@ export class OrmConnection<T extends BaseType> {
             // Do this in case the there was any (incorrect) data added before initialization.
             this.signalObject.clear();
             // Convert arrays to sets and apply to signalObject (we only have sets but can only transport arrays).
-            for (const newItem of recurseArrayToSet(initialData)) {
+            for (const newItem of parseOrmInitialObject(initialData)) {
                 this.signalObject.add(newItem);
             }
             console.log(
@@ -199,10 +199,17 @@ export class OrmConnection<T extends BaseType> {
 
     /** Function to create random subject IRIs for newly created nested objects. */
     private generateSubjectIri = (path: (string | number)[]): string => {
-        // Generate random string.
-        let b = Buffer.alloc(33);
+        console.debug("Generating new random id for path", path);
+        // Generate 33 random bytes using Web Crypto API
+        const b = new Uint8Array(33);
         crypto.getRandomValues(b);
-        const randomString = b.toString("base64url");
+        // Convert to base64url
+        const base64url = (bytes: Uint8Array) =>
+            btoa(String.fromCharCode(...bytes))
+                .replace(/\+/g, "-")
+                .replace(/\//g, "_")
+                .replace(/=+$/, "");
+        const randomString = base64url(b);
 
         if (path.length > 0 && path[0].toString().startsWith("did:ng:o:")) {
             // If the root is a nuri, use that as a base IRI.
@@ -232,14 +239,19 @@ export function deepPatchesToDiff(patches: DeepPatch[]): Patches {
     }) as Patches;
 }
 
-const recurseArrayToSet = (obj: any): any => {
+const parseOrmInitialObject = (obj: any): any => {
+    // Regular arrays become sets.
     if (Array.isArray(obj)) {
-        return new Set(obj.map(recurseArrayToSet));
-    } else if (obj && typeof obj === "object" && obj instanceof Map) {
-        return Object.fromEntries(obj.entries());
+        return new Set(obj.map(parseOrmInitialObject));
     } else if (obj && typeof obj === "object") {
-        for (const key of Object.keys(obj)) {
-            obj[key] = recurseArrayToSet(obj[key]);
+        if ("@id" in obj) {
+            // Regular object.
+            for (const key of Object.keys(obj)) {
+                obj[key] = parseOrmInitialObject(obj[key]);
+            }
+        } else {
+            // Object does not have @id, that means it's a set of objects.
+            return new Set(Object.values(obj));
         }
         return obj;
     } else {