diff --git a/Sample/TypeShim.Sample.Client/@typeshim/app/index.html b/Sample/TypeShim.Sample.Client/@typeshim/app/index.html index 7748d78..5a75b15 100644 --- a/Sample/TypeShim.Sample.Client/@typeshim/app/index.html +++ b/Sample/TypeShim.Sample.Client/@typeshim/app/index.html @@ -6,7 +6,7 @@ @typeshim/app Demo - +
diff --git a/Sample/TypeShim.Sample.Client/@typeshim/app/src/App.tsx b/Sample/TypeShim.Sample.Client/@typeshim/app/src/App.tsx index ba8f57a..1328ae9 100644 --- a/Sample/TypeShim.Sample.Client/@typeshim/app/src/App.tsx +++ b/Sample/TypeShim.Sample.Client/@typeshim/app/src/App.tsx @@ -4,17 +4,15 @@ import People from './pages/People'; import CapabilitiesPage from './pages/Capabilities'; import type { AssemblyExports } from '@typeshim/wasm-exports'; +import { launchWasmRuntime } from '@typeshim/wasm-exports'; + type Page = 'home' | 'people' | 'capabilities'; function App() { const [currentPage, setCurrentPage] = useState('home'); const exportsPromise: Promise = useMemo(() => { - const starter = (window as any).wasmModuleStarter; - if (!starter || !starter.exports) { - throw new Error('wasmModuleStarter.exports not found. Ensure dotnet-start.js ran.'); - } - return starter.exports as Promise; + return launchWasmRuntime() as Promise; }, []); return ( diff --git a/Sample/TypeShim.Sample.Client/@typeshim/app/vite.config.ts b/Sample/TypeShim.Sample.Client/@typeshim/app/vite.config.ts index 1b1b3ee..9b60748 100644 --- a/Sample/TypeShim.Sample.Client/@typeshim/app/vite.config.ts +++ b/Sample/TypeShim.Sample.Client/@typeshim/app/vite.config.ts @@ -11,8 +11,13 @@ export default defineConfig({ outDir: '../../../TypeShim.Sample/wwwroot', assetsDir: 'assets', rollupOptions: { - external: ['webcil'], - input: 'index.html' + external: ['webcil', '/_framework/dotnet.js'], + input: 'index.html', + output: { + entryFileNames: 'assets/[name].js', + chunkFileNames: 'assets/[name].js', + assetFileNames: 'assets/[name][extname]' + } } } }); diff --git a/Sample/TypeShim.Sample.Client/@typeshim/capabilities-ui/src/ArraysDemoComponent.tsx b/Sample/TypeShim.Sample.Client/@typeshim/capabilities-ui/src/ArraysDemoComponent.tsx index d2eca42..a17e345 100644 --- a/Sample/TypeShim.Sample.Client/@typeshim/capabilities-ui/src/ArraysDemoComponent.tsx +++ b/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 = ({ exportsPromise }) => { - const [cap, setCap] = useState(null); + const [cap, setCap] = useState(null); const [demos, setDemos] = useState([]); useEffect(() => { @@ -35,7 +35,7 @@ export const ArraysDemoComponent: React.FC = ({ 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]); }; diff --git a/Sample/TypeShim.Sample.Client/@typeshim/capabilities-ui/src/PrimitivesDemoComponent.tsx b/Sample/TypeShim.Sample.Client/@typeshim/capabilities-ui/src/PrimitivesDemoComponent.tsx index 3a117de..4aefe95 100644 --- a/Sample/TypeShim.Sample.Client/@typeshim/capabilities-ui/src/PrimitivesDemoComponent.tsx +++ b/Sample/TypeShim.Sample.Client/@typeshim/capabilities-ui/src/PrimitivesDemoComponent.tsx @@ -8,9 +8,9 @@ export interface PrimitivesDemoProps { } export const PrimitivesDemoComponent: React.FC = ({ exportsPromise }) => { - const [cap, setCap] = useState(null); + const [cap, setCap] = useState(null); const [newBaseInput, setNewBaseInput] = useState('Hello'); - const [demos, setDemos] = useState>([]); + const [demos, setDemos] = useState>([]); useEffect(() => { (async () => { diff --git a/Sample/TypeShim.Sample.Client/@typeshim/people-ui/src/PeopleGrid.tsx b/Sample/TypeShim.Sample.Client/@typeshim/people-ui/src/PeopleGrid.tsx index f8a4c8a..26e4f20 100644 --- a/Sample/TypeShim.Sample.Client/@typeshim/people-ui/src/PeopleGrid.tsx +++ b/Sample/TypeShim.Sample.Client/@typeshim/people-ui/src/PeopleGrid.tsx @@ -11,7 +11,7 @@ export interface PeopleGridProps { } export const PeopleGrid: React.FC = ({ emptyText = 'No people found.', repository }) => { - const [people, setPeople] = useState([]); + const [people, setPeople] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); diff --git a/Sample/TypeShim.Sample.Client/@typeshim/people-ui/src/PeopleList.tsx b/Sample/TypeShim.Sample.Client/@typeshim/people-ui/src/PeopleList.tsx index 70e7d7d..f57fd76 100644 --- a/Sample/TypeShim.Sample.Client/@typeshim/people-ui/src/PeopleList.tsx +++ b/Sample/TypeShim.Sample.Client/@typeshim/people-ui/src/PeopleList.tsx @@ -11,7 +11,7 @@ export interface PeopleListProps { } export const PeopleList: React.FC = ({ emptyText = 'No people found.', repository }) => { - const [people, setPeople] = useState([]); + const [people, setPeople] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); diff --git a/Sample/TypeShim.Sample.Client/@typeshim/people-ui/src/PeopleRepository.tsx b/Sample/TypeShim.Sample.Client/@typeshim/people-ui/src/PeopleRepository.tsx index ef81e7d..6f7ac12 100644 --- a/Sample/TypeShim.Sample.Client/@typeshim/people-ui/src/PeopleRepository.tsx +++ b/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 { + public async getAllPeople(): Promise { 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)); diff --git a/Sample/TypeShim.Sample.Client/@typeshim/people-ui/src/PersonCard.tsx b/Sample/TypeShim.Sample.Client/@typeshim/people-ui/src/PersonCard.tsx index 49dd93a..28a86e2 100644 --- a/Sample/TypeShim.Sample.Client/@typeshim/people-ui/src/PersonCard.tsx +++ b/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 = ({ 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 (
= ({ initPerson }) => { flexDirection: 'row', justifyContent: 'space-between', }}> -
-

{person.Name}

-

Age: {person.Age}

+
+

{personSnapshot.Name}

+

Age: {personSnapshot.Age}

- {pet && ( + {petSnapshot && petProxy && (
= ({ 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()}
)} - {!pet && ( + {!petSnapshot && (