Proxies and snapshots

Sample/TypeShim.Sample.Client/@typeshim/capabilities-ui/src/ArraysDemoComponent.tsx

@@ -8,13 +8,13 @@ export interface ArraysDemoProps {
 }
 
 type ArraysDemoState = {
-  instance: ArraysDemo;
+  instance: ArraysDemo.Proxy;
   appendValue: number;
   setValue: number;
 };
 
 export const ArraysDemoComponent: React.FC<ArraysDemoProps> = ({ exportsPromise }) => {
-  const [cap, setCap] = useState<CapabilitiesProvider | null>(null);
+  const [cap, setCap] = useState<CapabilitiesProvider.Proxy | null>(null);
   const [demos, setDemos] = useState<ArraysDemoState[]>([]);
 
   useEffect(() => {
@@ -35,7 +35,7 @@ export const ArraysDemoComponent: React.FC<ArraysDemoProps> = ({ exportsPromise
 
   const createDemo = () => {
     if (!cap) return;
-    const instance: ArraysDemo = cap.GetArraysDemo();
+    const instance: ArraysDemo.Proxy = cap.GetArraysDemo();
     setDemos(prev => [{ instance, appendValue: 0, setValue: 0 }, ...prev]);
   };
 

Sample/TypeShim.Sample.Client/@typeshim/capabilities-ui/src/PrimitivesDemoComponent.tsx

@@ -8,9 +8,9 @@ export interface PrimitivesDemoProps {
 }
 
 export const PrimitivesDemoComponent: React.FC<PrimitivesDemoProps> = ({ exportsPromise }) => {
-  const [cap, setCap] = useState<CapabilitiesProvider | null>(null);
+  const [cap, setCap] = useState<CapabilitiesProvider.Proxy | null>(null);
   const [newBaseInput, setNewBaseInput] = useState('Hello');
-  const [demos, setDemos] = useState<Array<{ instance: PrimitivesDemo; concatA: string; concatB: string; multiplyCount: number; multiplyResult?: string }>>([]);
+  const [demos, setDemos] = useState<Array<{ instance: PrimitivesDemo.Proxy; concatA: string; concatB: string; multiplyCount: number; multiplyResult?: string }>>([]);
 
   useEffect(() => {
     (async () => {

Sample/TypeShim.Sample.Client/@typeshim/people-ui/src/PeopleGrid.tsx

@@ -11,7 +11,7 @@ export interface PeopleGridProps {
 }
 
 export const PeopleGrid: React.FC<PeopleGridProps> = ({ emptyText = 'No people found.', repository }) => {
-  const [people, setPeople] = useState<Person[]>([]);
+  const [people, setPeople] = useState<Person.Proxy[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 

Sample/TypeShim.Sample.Client/@typeshim/people-ui/src/PeopleList.tsx

@@ -11,7 +11,7 @@ export interface PeopleListProps {
 }
 
 export const PeopleList: React.FC<PeopleListProps> = ({ emptyText = 'No people found.', repository }) => {
-  const [people, setPeople] = useState<Person[]>([]);
+  const [people, setPeople] = useState<Person.Proxy[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 

Sample/TypeShim.Sample.Client/@typeshim/people-ui/src/PeopleRepository.tsx

@@ -8,20 +8,20 @@ export class PeopleRepository {
         this.wasmModulePromise = this.getInitializedSampleModule(exportsPromise);
     }
 
-    public async getAllPeople(): Promise<Person[]> {
+    public async getAllPeople(): Promise<Person.Proxy[]> {
         const sampleModule: TypeShimSampleModule = await this.wasmModulePromise;
-        const peopleProvider: PeopleProvider | null = sampleModule.PeopleProvider;
+        const peopleProvider: PeopleProvider.Proxy | null = sampleModule.PeopleProvider;
         if (!peopleProvider) {
             throw new Error("PeopleProvider is null");
         }
-        const people: People = await peopleProvider.FetchPeopleAsync();
+        const people: People.Proxy = await peopleProvider.FetchPeopleAsync();
         this.PrintAgeMethodUsage(people);
         return people.All;
     }
 
-    private PrintAgeMethodUsage(people: People) {
+    private PrintAgeMethodUsage(people: People.Proxy) {
         console.log("Demonstrating Person.IsOlderThan method:");
-        const persons: Person[] = people.All;
+        const persons: Person.Proxy[] = people.All;
         const person1 = persons[(Math.random() * persons.length) | 0];
         const person2 = persons[(Math.random() * persons.length) | 0];
         console.log(person1.Name, person1.Age, "isOlderThan", person2.Name, person2.Age, ":", person1.IsOlderThan(person2));

Sample/TypeShim.Sample.Client/@typeshim/people-ui/src/PersonCard.tsx

@@ -1,14 +1,16 @@
 import React, { useState } from 'react';
-import type { Person } from '@typeshim/wasm-exports';
+import { Person, Dog } from '@typeshim/wasm-exports';
 
 export interface PersonCardProps {
-  initPerson: Person;
+  initPerson: Person.Proxy;
 }
 
 export const PersonCard: React.FC<PersonCardProps> = ({ initPerson }) => {
-  const [wrapper, setPerson] = useState<{person: Person}>({person: initPerson});
-  const person = wrapper.person;
-  const pet = person.Pet;
+  const [wrapper, setPerson] = useState<{person: Person.Proxy}>({person: initPerson});
+  const personSnapshot = Person.snapshot(wrapper.person);
+  const petSnapshot = personSnapshot.Pet;
+  const personProxy = wrapper.person;
+  const petProxy = personProxy.Pet;
   return (
       <div
           style={{
@@ -21,11 +23,11 @@ export const PersonCard: React.FC<PersonCardProps> = ({ initPerson }) => {
               flexDirection: 'row',
               justifyContent: 'space-between',
           }}>
-      <div title={`${person.Name} (Id: ${person.Id})`} style={{ padding: '0.5rem' }}>
-        <h3 style={{ margin: '0 0 0.25rem 0' }}>{person.Name}</h3>
-        <p style={{ margin: 0, fontSize: '0.875rem', color: '#555' }}>Age: {person.Age}</p>
+      <div title={`${personSnapshot.Name} (Id: ${personSnapshot.Id})`} style={{ padding: '0.5rem' }}>
+        <h3 style={{ margin: '0 0 0.25rem 0' }}>{personSnapshot.Name}</h3>
+        <p style={{ margin: 0, fontSize: '0.875rem', color: '#555' }}>Age: {personSnapshot.Age}</p>
       </div>
-      {pet && (
+      {petSnapshot && petProxy && (
         <div>
           <span style={{
             display: 'inline-block',
@@ -36,12 +38,16 @@ export const PersonCard: React.FC<PersonCardProps> = ({ initPerson }) => {
             color: '#1e3a8a',
             fontSize: '0.75rem',
             border: '1px solid #cfe0ff'
-          }} title={`Pet: ${pet.Name} (Breed: ${pet.Breed})`}>
-            Pet: {pet.Name} {pet.GetAge(false)} years/{pet.GetAge(true)} years ({pet.Breed}) - {pet.Bark()}
+          }} title={`Pet: ${petSnapshot.Name} (Breed: ${petSnapshot.Breed})`}
+            onClick={() => {
+              personProxy.Pet = {...petSnapshot, Age: petSnapshot.Age + 1}; 
+              setPerson({...wrapper}); 
+            }}>
+            Pet: {petSnapshot.Name} {petProxy.GetAge(false)}/{petProxy.GetAge(true)} ({petSnapshot.Breed}) - {petProxy.Bark()}
           </span>
         </div>
       )}
-      {!pet && (
+      {!petSnapshot && (
         <div style={{ display: 'flex', alignItems: 'center' }}>
           <button 
             style={{
@@ -57,7 +63,7 @@ export const PersonCard: React.FC<PersonCardProps> = ({ initPerson }) => {
               cursor: 'pointer'
             }}
             onClick={() => {
-              person.AdoptPet(); 
+              personProxy.Adopt({ Name: "Boi", Breed: "JS", Age: 1 }); 
               setPerson({...wrapper}); 
             }}>
             Adopt a pet!