added dynamic data loading and mapping towards components.

This commit is contained in:
Samuel Andert 2023-07-26 15:16:41 +02:00
parent 14aad071f4
commit 920e7b7ca1
6 changed files with 99 additions and 17 deletions

View File

@ -3,6 +3,8 @@
export let services;
export let store;
// Watch for store changes
onMount(async () => {
if (services && services.helloEarthAlert) {
console.log('Alerted by HelloEarthAlert');
@ -12,10 +14,23 @@
});
</script>
<!-- Only render the div when $store.pkpWallet is defined -->
{#if $store}
<div class="p-12 bg-blue-400">Hello Earth {$store.pkpWallet.address}</div>
{#if !$store}
<div>Loading store...</div>
{:else}
<!-- You can display a loader or placeholder content here -->
<div>Loading...</div>
<div class="p-12 bg-blue-400">
Hello Earth
{#if $store.pkpWallet}{$store.pkpWallet.address}{/if}
{#if $store.todos && $store.messages}
<ul>
{#each $store.todos as todo}
<li>{todo.name}</li>
{/each}
</ul>
<ul>
{#each $store.messages as message}
<li>{message.text} - {message.date}</li>
{/each}
</ul>
{/if}
</div>
{/if}

View File

@ -1,7 +1,9 @@
<script lang="ts">
import { onDestroy, onMount } from 'svelte';
import Composite from './Composite.svelte';
import components from '$lib/core/componentLoader';
import services from '$lib/core/servicesLoader';
import { dataStore } from '$lib/core/dataLoader';
import { createCompositeStore, getCompositeStore } from '$lib/core/compositeStores';
interface IComposite {
@ -34,6 +36,7 @@
`
: '';
// Reactive statement to watch changes in the composite prop
$: if (composite?.children) {
composite.children.forEach((child) => {
initializeCompositeState(child);
@ -59,21 +62,30 @@
for (const [localKey, external] of Object.entries(component.map)) {
const [externalID, externalKey] = external.split('.').map((item) => item.trim());
const externalStore = getCompositeStore(externalID);
if (externalStore) {
externalStore.subscribe((externalState) => {
console.log('External state:', externalState);
if (externalState && externalKey in externalState) {
if (externalID === 'data') {
const unsubscribe = dataStore.subscribe((store) => {
if (externalKey in store) {
localStore.update((storeValue) => {
storeValue = storeValue || {};
if (storeValue[localKey] !== externalState[externalKey]) {
storeValue[localKey] = externalState[externalKey];
return storeValue;
}
return storeValue;
return { ...storeValue, [localKey]: store[externalKey] };
});
}
});
onDestroy(unsubscribe);
} else {
const externalStore = getCompositeStore(externalID);
if (externalStore) {
const unsubscribe = externalStore.subscribe((externalState) => {
if (externalState && externalKey in externalState) {
localStore.update((storeValue) => {
return { ...storeValue, [localKey]: externalState[externalKey] };
});
}
});
onDestroy(unsubscribe);
}
}
}
}

View File

@ -0,0 +1,31 @@
import { writable } from 'svelte/store';
// Using mock data, in a real-world scenario this could be fetched from an API.
const queryMessagesData = [
{
text: 'text1',
date: 'date1',
id: 'id1'
},
{
text: 'text2',
date: 'date2',
id: 'id2'
}
];
const queryTodosData = [
{
name: "todo 1"
},
{
name: "todo 2"
},
{ name: "todo 3" }
];
// The store that holds the data sets
export const dataStore = writable({
queryMessages: queryMessagesData,
queryTodos: queryTodosData
});

View File

@ -0,0 +1,9 @@
// queryMessages.ts
import { dataStore } from '$lib/core/dataLoader';
const queryMessages = [
{ text: 'text', date: 'date', id: 'id' },
{ text: 'text', date: 'date', id: 'id' }
];
dataStore.registerData('messages', queryMessages);

View File

@ -0,0 +1,9 @@
// queryTodos.ts
import { dataStore } from '$lib/core/dataLoader';
const queryTodos = [
{ name: "todo 1" },
{ name: "todo 2" }
];
dataStore.registerData('todos', queryTodos);

View File

@ -1,5 +1,8 @@
<script>
import Composite from '$lib/core/Composite.svelte';
import { dataStore } from '$lib/core/dataLoader';
$: console.log('Data Store contents:', $dataStore);
let composite = {
id: 'composite',
@ -29,7 +32,10 @@
component: 'HelloEarth',
slot: 'top',
map: {
pkpWallet: 'w.pkpWallet'
pkpWallet: 'w.pkpWallet',
rpcURL: 'w.rpcURL',
messages: 'data.queryMessages',
todos: 'data.queryTodos'
},
services: ['helloEarthAlert']
},