From 1c3fa6dd1953fb0dd2ee6a525b483264ae948f6d Mon Sep 17 00:00:00 2001
From: Ben Thomson <git@alfreido.com>
Date: Sat, 23 Sep 2023 21:21:13 +0800
Subject: [PATCH] Finally have some reactivity on components

---
 package-lock.json                         |  2 +
 packages/reactivity/src/lib/components.js | 51 +++++++++++++++++------
 packages/reactivity/src/lib/scope.js      | 12 ++++++
 3 files changed, 52 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ac9c3cd..3d67464 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10289,6 +10289,7 @@
             }
         },
         "packages/base": {
+            "name": "@wintercms/snowboard",
             "version": "0.5.0",
             "license": "MIT",
             "dependencies": {
@@ -10301,6 +10302,7 @@
             }
         },
         "packages/reactivity": {
+            "name": "@wintercms/snowboard-reactivity",
             "version": "0.5.0",
             "license": "MIT",
             "dependencies": {
diff --git a/packages/reactivity/src/lib/components.js b/packages/reactivity/src/lib/components.js
index 8067ef8..3bacbba 100644
--- a/packages/reactivity/src/lib/components.js
+++ b/packages/reactivity/src/lib/components.js
@@ -1,5 +1,10 @@
 import { createApp, reactive, nextTick } from 'petite-vue';
-import { getMappableProperties, createReactiveStore, mapReactiveStore } from './scope';
+import {
+    getMappableProperties,
+    createReactiveStore,
+    mapReactiveStore,
+    updateReactiveStore,
+} from './scope';
 import { getTemplate } from './template';
 
 /**
@@ -60,16 +65,25 @@ function prepareComponents(parent, mountElement) {
 }
 
 function updateDataStore(scope) {
-    const mappable = getMappableProperties.call(this);
-    const componentMappable = getMappableProperties.call({ ...scope });
-
-    this.$data = reactive(createReactiveStore.call(this, {
-        ...mappable,
-        ...componentMappable,
-    }));
-
-    mapReactiveStore.call(this, mappable);
-    mapReactiveStore.call(this, componentMappable);
+    nextTick(() => {
+        const mappable = getMappableProperties.call(this);
+        const componentMappable = getMappableProperties.call({ ...scope });
+
+        if (!Object.keys(this.$data).length) {
+            this.$data = reactive(createReactiveStore.call(this, {
+                ...mappable,
+                ...componentMappable,
+            }));
+
+            mapReactiveStore.call(this, mappable);
+            mapReactiveStore.call(this, componentMappable);
+        } else {
+            updateReactiveStore.call(this, {
+                ...mappable,
+                ...componentMappable,
+            });
+        }
+    });
 }
 
 /**
@@ -80,8 +94,12 @@ function updateDataStore(scope) {
  */
 function linkBlock(oldMount, newMount) {
     const block = this.$parent.$context.ctx.blocks.find((b) => b.template === oldMount);
-    block.template = newMount;
-    updateDataStore.call(this, block.ctx.scope);
+
+    if (block) {
+        block.template = newMount;
+        updateDataStore.call(this, block.ctx.scope);
+        this.$block = block;
+    }
 }
 
 /**
@@ -94,6 +112,13 @@ function componentCleanup(context, parent) {
     if (componentIndex !== -1) {
         parent.$components[context.exp].splice(componentIndex, 1);
     }
+
+    // Trigger data update on remaining components
+    Object.values(parent.$components).forEach((components) => {
+        components.forEach((component) => {
+            updateDataStore.call(component, component.$context.ctx.scope);
+        });
+    });
 }
 
 /**
diff --git a/packages/reactivity/src/lib/scope.js b/packages/reactivity/src/lib/scope.js
index 8f5427a..8bb6cc3 100644
--- a/packages/reactivity/src/lib/scope.js
+++ b/packages/reactivity/src/lib/scope.js
@@ -33,6 +33,9 @@ function getMappableProperties() {
         'detach',
         'template',
         'mountTo',
+        'components',
+        '$app',
+        '$nextTick',
         '$reactive',
         '$mount',
         '$el',
@@ -161,8 +164,17 @@ function mapReactiveStore(mappable) {
     });
 }
 
+function updateReactiveStore(mappable) {
+    Object.entries(mappable).forEach(([key, prop]) => {
+        if (prop.type === 'value') {
+            this.$data[key] = prop.value;
+        }
+    });
+}
+
 export {
     getMappableProperties,
     createReactiveStore,
     mapReactiveStore,
+    updateReactiveStore,
 };