breaking changes, major refactoring of Composite
This commit is contained in:
Samuel Andert
@ -1,147 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Composite from './Composite.svelte';
|
||||
import components from '$lib/componentLoader';
|
||||
import services from '$lib/servicesLoader';
|
||||
import { createComponentStore, getComponentStore } from '$lib/stores/componentStores.ts';
|
||||
|
||||
interface ICompositeLayout {
|
||||
areas: string;
|
||||
columns?: string;
|
||||
rows?: string;
|
||||
gap?: string;
|
||||
tailwindClasses?: string;
|
||||
}
|
||||
|
||||
export let componentsData: {
|
||||
layout: ICompositeLayout;
|
||||
children: Array<any>;
|
||||
};
|
||||
|
||||
$: layoutStyle = `
|
||||
grid-template-areas: ${componentsData.layout.areas};
|
||||
${componentsData.layout.gap ? `gap: ${componentsData.layout.gap};` : ''}
|
||||
${
|
||||
componentsData.layout.columns
|
||||
? `grid-template-columns: ${componentsData.layout.columns};`
|
||||
: ''
|
||||
}
|
||||
${componentsData.layout.rows ? `grid-template-rows: ${componentsData.layout.rows};` : ''}
|
||||
`;
|
||||
|
||||
function initializeComponentState(child) {
|
||||
child.store = createComponentStore(child.id, child.store || {});
|
||||
|
||||
if (child.children) {
|
||||
child.children.forEach(initializeComponentState);
|
||||
}
|
||||
}
|
||||
|
||||
$: if (componentsData && componentsData.children) {
|
||||
componentsData.children.forEach(initializeComponentState);
|
||||
}
|
||||
|
||||
function mapAndSubscribe(component) {
|
||||
console.log('Mapping and subscribing for:', component.id);
|
||||
|
||||
if (component.map) {
|
||||
const localStore = getComponentStore(component.id);
|
||||
|
||||
for (const [localKey, external] of Object.entries(component.map)) {
|
||||
const [externalID, externalKey] = external.split('.').map((item) => item.trim());
|
||||
const externalStore = getComponentStore(externalID);
|
||||
if (externalStore) {
|
||||
externalStore.subscribe((externalState) => {
|
||||
console.log('External state:', externalState);
|
||||
if (externalState && externalKey in externalState) {
|
||||
localStore.update((storeValue) => {
|
||||
storeValue = storeValue || {};
|
||||
if (storeValue[localKey] !== externalState[externalKey]) {
|
||||
storeValue[localKey] = externalState[externalKey];
|
||||
return storeValue;
|
||||
}
|
||||
return storeValue;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (component.children) {
|
||||
component.children.forEach(mapAndSubscribe);
|
||||
}
|
||||
}
|
||||
|
||||
$: if (componentsData && componentsData.children) {
|
||||
componentsData.children.forEach(mapAndSubscribe);
|
||||
}
|
||||
|
||||
async function getComponent(componentName) {
|
||||
if (components[componentName]) {
|
||||
const module = await components[componentName]();
|
||||
return module.default;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
async function loadService(serviceName) {
|
||||
if (services[serviceName]) {
|
||||
const module = await services[serviceName]();
|
||||
return module.default || module;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
async function getServiceProps(component) {
|
||||
const loadedServices = [];
|
||||
if (component.services) {
|
||||
for (const serviceName of component.services) {
|
||||
const loadedService = await loadService(serviceName);
|
||||
if (loadedService) {
|
||||
loadedServices.push(loadedService);
|
||||
}
|
||||
}
|
||||
}
|
||||
return loadedServices;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class={`grid w-full h-full ${componentsData.layout.tailwindClasses}`} style={layoutStyle}>
|
||||
{#each componentsData.children as component (component.id)}
|
||||
<div class={`w-full h-full overflow-hidden`} style={`grid-area: ${component.slot}`}>
|
||||
{#await Promise.all( [getComponent(component.componentName), getServiceProps(component)] ) then [Component, serviceProps]}
|
||||
{#if Component}
|
||||
<svelte:component
|
||||
this={Component}
|
||||
id={component.id}
|
||||
{...component.props}
|
||||
{...serviceProps.reduce((acc, currServiceModule, idx) => {
|
||||
acc[component.services[idx]] = currServiceModule;
|
||||
return acc;
|
||||
}, {})}
|
||||
/>
|
||||
|
||||
{#if component.actions}
|
||||
<div class="flex justify-end p-4">
|
||||
{#each component.actions as action}
|
||||
{#await getComponent(action) then ActionComponent}
|
||||
{#if ActionComponent}
|
||||
<svelte:component this={ActionComponent} {...component.props} />
|
||||
{:else}
|
||||
<p>Action {action} not found.</p>
|
||||
{/if}
|
||||
{/await}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if component.children && component.children.length}
|
||||
<Composite componentsData={component} />
|
||||
{/if}
|
||||
{:else}
|
||||
<p>Component {component.componentName} not found.</p>
|
||||
{/if}
|
||||
{/await}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
const redirectUri = 'http://localhost:5173/';
|
||||
|
||||
export let setupLit;
|
||||
export let services;
|
||||
|
||||
let view = 'sign_in';
|
||||
let sessionSigs;
|
||||
@ -30,7 +30,7 @@
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
provider = await setupLit.connectProvider();
|
||||
provider = await services.setupLit.connectProvider();
|
||||
|
||||
logMessage('Component mounted.');
|
||||
|
||||
|
||||
@ -1,16 +1,19 @@
|
||||
<script>
|
||||
export let id;
|
||||
|
||||
import { getComponentStore } from '$lib/stores/componentStores.ts';
|
||||
import { getCompositeStore } from '$lib/core/compositeStores';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
const store = getComponentStore(id);
|
||||
const store = getCompositeStore(id);
|
||||
|
||||
export let helloEarthAlert;
|
||||
export let services;
|
||||
|
||||
onMount(async () => {
|
||||
helloEarthAlert.alertMe();
|
||||
console.log('should alerted by now');
|
||||
if (services && services.helloEarthAlert) {
|
||||
console.log('Alerted by HelloEarthAlert');
|
||||
} else {
|
||||
console.error('Services or helloEarthAlert not loaded');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script>
|
||||
import { messages } from '$lib/services/messages';
|
||||
import { onMount, afterUpdate } from 'svelte';
|
||||
import Composite from './Composite.svelte';
|
||||
import Composite from '$lib/core/Composite.svelte';
|
||||
|
||||
let latestMessages = [];
|
||||
|
||||
|
||||
@ -13,16 +13,14 @@
|
||||
const match = text.match(appCommandPattern);
|
||||
if (match && match[1]) {
|
||||
message.composite = {
|
||||
layout: '',
|
||||
children: [
|
||||
{
|
||||
componentName: match[1], // Matched component name
|
||||
props: {},
|
||||
actions: ['ClearMessages']
|
||||
component: match[1] // Matched component name
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
console.log(message);
|
||||
|
||||
createMessage(message);
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { connectWallet } from '$lib/services/wallet/wallet';
|
||||
import { getComponentStore } from '$lib/stores/componentStores.ts';
|
||||
import { getCompositeStore } from '$lib/core/compositeStores';
|
||||
|
||||
export let id;
|
||||
const store = getComponentStore(id);
|
||||
const store = getCompositeStore(id);
|
||||
|
||||
onMount(async () => {
|
||||
$store.pkpWallet = await connectWallet($store.pkpPubKey, $store.rpcURL);
|
||||
|
||||
Reference in New Issue
Block a user