From 169b5d53d7278855a5a79fe3b98db606bbddffc7 Mon Sep 17 00:00:00 2001
From: George Stagg <georgestagg@gmail.com>
Date: Sun, 28 Jul 2024 11:01:05 +0100
Subject: [PATCH] Docs: Hybrid Execution

---
 docs/_quarto.yml            |  2 +-
 docs/interactive/define.qmd | 25 -----------------
 docs/interactive/hybrid.qmd | 54 +++++++++++++++++++++++++++++++++++++
 3 files changed, 55 insertions(+), 26 deletions(-)
 delete mode 100644 docs/interactive/define.qmd
 create mode 100644 docs/interactive/hybrid.qmd

diff --git a/docs/_quarto.yml b/docs/_quarto.yml
index fb5d13c..a57a76a 100644
--- a/docs/_quarto.yml
+++ b/docs/_quarto.yml
@@ -27,7 +27,7 @@ website:
           - interactive/reactivity.qmd
           - interactive/data.qmd
           - interactive/dynamic.qmd
-          - interactive/define.qmd
+          - interactive/hybrid.qmd
       - section: Other Features
         contents:
           - other/tables.qmd
diff --git a/docs/interactive/define.qmd b/docs/interactive/define.qmd
deleted file mode 100644
index 2a7a88c..0000000
--- a/docs/interactive/define.qmd
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: Build-time variable definition
-format: live-html
----
-
-{{< include ../_extensions/live/_knitr.qmd >}}
-
-## Executed at build time by `knitr`
-```{r}
-foo <- rnorm(20)
-foo
-ojs_define(foo)
-```
-
-## Runtime
-
-```{ojs}
-foo
-```
-
-```{webr}
-#| input:
-#|   - foo
-plot(foo)
-```
diff --git a/docs/interactive/hybrid.qmd b/docs/interactive/hybrid.qmd
new file mode 100644
index 0000000..1f7b5cf
--- /dev/null
+++ b/docs/interactive/hybrid.qmd
@@ -0,0 +1,54 @@
+---
+title: Hybrid Execution
+subtitle: Combine pre-rendered and client-side WebAssembly computation
+format: live-html
+engine: knitr
+---
+
+{{< include ../_extensions/live/_knitr.qmd >}}
+
+Defining variables through OJS variables allows for a communication channel between various execution engines.
+
+## Build-time code execution
+
+Data can be evaluated and exported to be made availabe to OJS blocks at runtime, using Quarto's usual build-time code cell execution.
+
+#### Source
+````{.markdown filename="hybrid.qmd"}
+```{{r}}
+library(ggplot2)
+glimpse(diamonds)
+ojs_define(diamonds)
+```
+````
+
+#### Output
+```{r}
+library(ggplot2)
+head(diamonds)
+ojs_define(diamonds)
+```
+
+## Runtime computation
+
+### OJS Cells
+
+```{ojs}
+diamonds
+```
+
+### WebAssembly `quarto-live` cells
+
+````{.markdown filename="hybrid.qmd"}
+```{{webr}}
+#| input:
+#|   - diamonds
+head(diamonds)
+```
+````
+
+```{webr}
+#| input:
+#|   - diamonds
+head(diamonds)
+```