From 55b701a859e9f8bce12ba270acdbf53af61f207b Mon Sep 17 00:00:00 2001 From: Samuel Andert Date: Thu, 3 Aug 2023 15:55:44 +0200 Subject: [PATCH] refactoring composer --- .../components/refactor/ComposerAlice.svelte | 3 +- src/lib/core/refactor/Composer.svelte | 156 ++++-------------- .../core/refactor/ComposerComponent.svelte | 16 -- 3 files changed, 33 insertions(+), 142 deletions(-) delete mode 100644 src/lib/core/refactor/ComposerComponent.svelte diff --git a/src/lib/components/refactor/ComposerAlice.svelte b/src/lib/components/refactor/ComposerAlice.svelte index f6a56c4..f41fa48 100644 --- a/src/lib/components/refactor/ComposerAlice.svelte +++ b/src/lib/components/refactor/ComposerAlice.svelte @@ -13,8 +13,7 @@ $: { if ($childStore && $childStore.machine.state) { - console.log('learn color machine: ' + JSON.stringify(machineService)); - machineService.send($childStore.machine.state); + me.do.machine.send($childStore.machine.state); } } diff --git a/src/lib/core/refactor/Composer.svelte b/src/lib/core/refactor/Composer.svelte index 3dcadcd..750face 100644 --- a/src/lib/core/refactor/Composer.svelte +++ b/src/lib/core/refactor/Composer.svelte @@ -3,8 +3,6 @@ import Composer from './Composer.svelte'; import FallBack from './FallBack.svelte'; import components from '$lib/core/componentLoader'; - import services from '$lib/core/servicesLoader'; - import { dataStore } from '$lib/core/dataLoader'; import { createComposerStore, getComposerStore } from './composerStores'; import { coreServices } from './coreServices'; import { Machine, interpret } from 'xstate'; @@ -23,11 +21,8 @@ me?: { id: string; do: any }; slot?: string; component?: string; - services?: string[]; - map?: Record; store?: Record; children?: IComposer[]; - servicesLoaded?: boolean; machine?: any; machineService?: any; } @@ -43,15 +38,11 @@ $: { layoutStyle = computeLayoutStyle(composer?.layout); - initializeAndLoadServices(composer); initializeComposerState(composer); - mapAndSubscribe(composer); if (composer?.children) { composer.children.forEach((child) => { initializeComposerState(child); - initializeAndLoadServices(child); - mapAndSubscribe(child); }); } if (composer?.machine) { @@ -93,26 +84,6 @@ `; } - function initializeAndLoadServices(component: IComposer) { - if (!component) return; - - if (component.services) { - let servicePromises = component.services.map((serviceName) => - loadedServices[serviceName] - ? Promise.resolve(loadedServices[serviceName]) - : loadService(serviceName) - ); - - Promise.all(servicePromises).then((loaded) => { - loaded.forEach((service, index) => { - loadedServices[component.services[index]] = service; - }); - component.servicesLoaded = true; - }); - } else { - component.servicesLoaded = true; - } - } function initializeComposerState(child: IComposer) { if (!child) return; // Add this line @@ -127,63 +98,6 @@ let unsubscribers = []; - function mapAndSubscribe(component: IComposer) { - if (!component) return; - if (component.map) { - const localStore = getComposerStore(component.id); - - for (const [localKey, mapping] of Object.entries(component.map)) { - const isDataMapping = mapping.startsWith('@data:'); - const isStoreMapping = mapping.startsWith('@'); - - if (isDataMapping) { - const externalKey = mapping.replace('@data:', '').trim(); - - const unsubscribe = dataStore.subscribe((store) => { - if (externalKey in store) { - if (store[externalKey] && typeof store[externalKey].subscribe === 'function') { - let innerUnsub = store[externalKey].subscribe((value) => { - localStore.update((storeValue) => ({ ...storeValue, [localKey]: value })); - }); - unsubscribers.push(innerUnsub); - } else { - localStore.update((storeValue) => ({ - ...storeValue, - [localKey]: store[externalKey] - })); - } - } - }); - - unsubscribers.push(unsubscribe); - } else if (isStoreMapping) { - const [externalID, externalKey] = mapping - .replace('@', '') - .split(':') - .map((item) => item.trim()); - - const externalStore = getComposerStore(externalID); - if (externalStore) { - const unsubscribe = externalStore.subscribe((externalState) => { - if (externalState && externalKey in externalState) { - localStore.update((storeValue) => ({ - ...storeValue, - [localKey]: externalState[externalKey] - })); - } - }); - - unsubscribers.push(unsubscribe); - } - } - } - } - - if (component.children) { - component.children.forEach(mapAndSubscribe); - } - } - onDestroy(() => { unsubscribers.forEach((unsub) => unsub()); }); @@ -196,17 +110,15 @@ return FallBack; } - async function loadService(serviceName: string) { - if (services[serviceName]) { - const module = await services[serviceName](); - return module.default || module; - } - return null; - } - async function loadComponentAndService(component: IComposer) { const componentName = component.component || 'FallBack'; - component.me = { id: component.id, do: loadedServices.core }; + component.me = { + id: component.id, + do: { + ...loadedServices.core, + machine: component.machineService || null + } + }; return await getComponent(componentName); } @@ -215,41 +127,37 @@ class={`grid w-full h-full overflow-hidden ${composer?.layout?.tailwindClasses || ''}`} style={layoutStyle} > - {#if composer?.servicesLoaded} - {#await loadComponentAndService(composer) then Component} - - {/await} - {/if} + {#await loadComponentAndService(composer) then Component} + + {/await} {#if composer?.children} {#each composer.children as child (child.id)}
- {#if child.servicesLoaded} - {#await loadComponentAndService(child) then ChildComponent} - - {#if child.children && child.children.length} - - {/if} - {/await} - {/if} + {#await loadComponentAndService(child) then ChildComponent} + + {#if child.children && child.children.length} + + {/if} + {/await}
{/each} {/if} diff --git a/src/lib/core/refactor/ComposerComponent.svelte b/src/lib/core/refactor/ComposerComponent.svelte deleted file mode 100644 index 65c10c6..0000000 --- a/src/lib/core/refactor/ComposerComponent.svelte +++ /dev/null @@ -1,16 +0,0 @@ - - - -