From a4ea634b5c8b5313f558f0b3d30bc81bb4c446b9 Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ramon.aycojr@gmail.com>
Date: Tue, 29 Nov 2022 21:00:43 +0100
Subject: [PATCH] exploration(hyperdrive): problem statement (#219)

---
 apps/demo/src/pages/experimental/hyperdrive.astro | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/demo/src/pages/experimental/hyperdrive.astro b/apps/demo/src/pages/experimental/hyperdrive.astro
index 8500a70..43c5b1b 100644
--- a/apps/demo/src/pages/experimental/hyperdrive.astro
+++ b/apps/demo/src/pages/experimental/hyperdrive.astro
@@ -1,6 +1,5 @@
 ---
 import Layout from "../../components/Layout.astro";
-
 const Counter = {
   count: 0,
   increment() {
@@ -13,5 +12,12 @@ const Counter = {
 ---
 
 <Layout title="Hyperdrive Experiment">
-  {Counter.count}
+  <!-- PROBLEM STATEMENT
+    This is the problem that `hyperdrive` is trying to solve.
+    After this is rendered in the server, the Counter object is not serialized.
+    When the HTML reaches the browser, it has no idea what Counter is.
+   -->
+  <button onclick="Counter.increment()">
+    {Counter.count}
+  </button>
 </Layout>