From 80b87cbf7eed7a3778f18a32c51cb4d2ab9cef0e Mon Sep 17 00:00:00 2001
From: whitespacecode <37139936+whitespacecode@users.noreply.github.com>
Date: Tue, 28 May 2024 10:50:29 +0200
Subject: [PATCH 1/5] docs: add shared state documentation

Still need a proper thumbnail
---
 docs/cookbook/shared-state.md | 113 ++++++++++++++++++++++++++++++++++
 1 file changed, 113 insertions(+)
 create mode 100644 docs/cookbook/shared-state.md

diff --git a/docs/cookbook/shared-state.md b/docs/cookbook/shared-state.md
new file mode 100644
index 000000000..4d86d56fc
--- /dev/null
+++ b/docs/cookbook/shared-state.md
@@ -0,0 +1,113 @@
+---
+title: Shared State
+description: How to use a reactive composable to share your objects across component files.
+author: /
+thumbnail: /recipes/animations.png
+difficulty: 0
+---
+
+# Shared State in TresJS
+
+This guide will help you get started with shared state in TresJS by building a simple scene with a cube that can be shared across component files.
+
+<SandboxDemo url="https://stackblitz.com/~/edit/tresjs-minimal-reproduction-qsdhpt?file=src/components/SubComponent.vue" />
+
+## Creating a State Composable
+
+First, we'll create a composable to store the objects.
+
+```ts
+//composables/state.ts
+import { reactive, toRefs } from "vue";
+
+const state = reactive({
+    mesh: null,
+    //you can add more objects here
+})
+
+export function useState() {
+    return {
+        ...toRefs(state)
+    }
+}
+```
+
+## Setting the object to the state
+
+Next, we'll assign an object to the state and include it in a subcomponent where we can access and use it.
+
+```vue
+//Parent component
+<script setup lang="ts">
+import { BoxGeometry, Mesh, MeshNormalMaterial } from 'three';
+
+import SubComponent from './SubComponent.vue';
+import { useState } from '../composables/state';
+
+const { mesh } = useState();
+
+//assinging the object to the state
+mesh.value = new Mesh(new BoxGeometry(), new MeshNormalMaterial());
+</script>
+
+<template>
+  <TresPerspectiveCamera />
+
+  <SubComponent />
+</template>
+```
+
+## Using the object in other components
+
+With the mesh assigned to the reactive state, it's available throughout your project.
+
+```vue
+//Subcomponent.vue
+<script setup lang="ts">
+import { useState } from '../composables/state';
+const { mesh, ground } = useState();
+
+console.log('ground:', ground);
+</script>
+
+<template>
+  <primitive v-if="mesh" :object="mesh" />
+</template>
+```
+
+## Using TresMesh components
+
+You can also add TresMesh components to the reactive state. Here, we'll use a reference and assign it to the state when mounted.
+
+```vue
+//Parent component
+<script setup lang="ts">
+import { BoxGeometry, Mesh, MeshNormalMaterial } from 'three';
+
+import SubComponent from './SubComponent.vue';
+import { useState } from '../composables/state';
+
+const { mesh } = useState();
+
+//reference the object
+const exampleRef = ref(null);
+
+//assinging the object to the state when mounted
+onMounted(() => {
+  mesh.value = exampleRef.value;
+});
+</script>
+
+<template>
+  <TresPerspectiveCamera />
+
+  <TresMesh ref="exampleRef" :position="[0, 0, 0]" cast-shadow>
+      <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
+      <TresMeshToonMaterial color="#4F4F4F" />
+  </TresMesh>
+
+  <SubComponent />
+</template>
+```
+
+With these steps, you can easily manage and share objects across different components in your Vue 3 project using a reactive composable.

From d3bf9a83a75db8759f61ffbbb7bb8651aa2ec348 Mon Sep 17 00:00:00 2001
From: whitespacecode <37139936+whitespacecode@users.noreply.github.com>
Date: Tue, 28 May 2024 11:00:44 +0200
Subject: [PATCH 2/5] chore: stackBlitz embed update

---
 docs/cookbook/shared-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/cookbook/shared-state.md b/docs/cookbook/shared-state.md
index 4d86d56fc..39533705b 100644
--- a/docs/cookbook/shared-state.md
+++ b/docs/cookbook/shared-state.md
@@ -10,7 +10,7 @@ difficulty: 0
 
 This guide will help you get started with shared state in TresJS by building a simple scene with a cube that can be shared across component files.
 
-<SandboxDemo url="https://stackblitz.com/~/edit/tresjs-minimal-reproduction-qsdhpt?file=src/components/SubComponent.vue" />
+<StackBlitzEmbed project-id="tresjs-minimal-reproduction-rycc4j" />
 
 ## Creating a State Composable
 

From c94d02e199c18a22e9f65c843670adb887bab1f4 Mon Sep 17 00:00:00 2001
From: whitespacecode <37139936+whitespacecode@users.noreply.github.com>
Date: Tue, 4 Jun 2024 11:46:06 +0200
Subject: [PATCH 3/5] chore: update shared-state.md

Use vitepress code groups
---
 docs/cookbook/shared-state.md | 77 +++++++++++++++++++++++++++--------
 1 file changed, 59 insertions(+), 18 deletions(-)

diff --git a/docs/cookbook/shared-state.md b/docs/cookbook/shared-state.md
index 39533705b..4d7761ad5 100644
--- a/docs/cookbook/shared-state.md
+++ b/docs/cookbook/shared-state.md
@@ -1,7 +1,7 @@
 ---
 title: Shared State
 description: How to use a reactive composable to share your objects across component files.
-author: /
+author: whitespacecode
 thumbnail: /recipes/animations.png
 difficulty: 0
 ---
@@ -16,8 +16,15 @@ This guide will help you get started with shared state in TresJS by building a s
 
 First, we'll create a composable to store the objects.
 
-```ts
-//composables/state.ts
+### Setting the object to the state
+Next, we'll assign an object to the state and include it in a subcomponent where we can access and use it.
+
+### Using the object in other components
+With the mesh assigned to the reactive state, it's available throughout your project.
+
+::: code-group
+
+```ts [composables/state.ts]
 import { reactive, toRefs } from "vue";
 
 const state = reactive({
@@ -32,12 +39,7 @@ export function useState() {
 }
 ```
 
-## Setting the object to the state
-
-Next, we'll assign an object to the state and include it in a subcomponent where we can access and use it.
-
-```vue
-//Parent component
+```vue [App.vue]
 <script setup lang="ts">
 import { BoxGeometry, Mesh, MeshNormalMaterial } from 'three';
 
@@ -57,17 +59,11 @@ mesh.value = new Mesh(new BoxGeometry(), new MeshNormalMaterial());
 </template>
 ```
 
-## Using the object in other components
-
-With the mesh assigned to the reactive state, it's available throughout your project.
-
-```vue
-//Subcomponent.vue
+```vue [Subcomponent.vue]
 <script setup lang="ts">
 import { useState } from '../composables/state';
-const { mesh, ground } = useState();
+const { mesh } = useState();
 
-console.log('ground:', ground);
 </script>
 
 <template>
@@ -80,7 +76,6 @@ console.log('ground:', ground);
 You can also add TresMesh components to the reactive state. Here, we'll use a reference and assign it to the state when mounted.
 
 ```vue
-//Parent component
 <script setup lang="ts">
 import { BoxGeometry, Mesh, MeshNormalMaterial } from 'three';
 
@@ -110,4 +105,50 @@ onMounted(() => {
 </template>
 ```
 
+## Using Pinia Store
+
+By using the same logic we can also use pinia.
+By using pinia we also have full access to actions and getters.
+
+::: code-group
+
+``` [model.ts]
+import { defineStore } from "pinia";
+
+export const useModelStore = defineStore('model', {
+    state: () => {
+        return {
+            exampleModel: null,
+        }
+    },
+    actions: {},
+});
+```
+
+```vue [App.vue]
+<script setup lang="ts">
+import { BoxGeometry, Mesh, MeshNormalMaterial } from 'three';
+import { useModelStore } from '../stores/model';
+
+const modelStore = useModelStore();
+
+//reference the object
+const exampleRef = ref(null);
+
+//assinging the object to the state when mounted
+onMounted(() => {
+  modelStore.exampleModel = exampleRef.value;
+});
+</script>
+
+<template>
+  <TresPerspectiveCamera />
+
+  <TresMesh ref="exampleRef" :position="[0, 0, 0]" cast-shadow>
+      <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
+      <TresMeshToonMaterial color="#4F4F4F" />
+  </TresMesh>
+</template>
+```
+
 With these steps, you can easily manage and share objects across different components in your Vue 3 project using a reactive composable.

From 05602e61bef6f1e3fa7f04b48615e6c035fb2ce1 Mon Sep 17 00:00:00 2001
From: whitespacecode <37139936+whitespacecode@users.noreply.github.com>
Date: Tue, 12 Nov 2024 13:19:16 +0100
Subject: [PATCH 4/5] Update shared-state.md

fixing the vue tabs
---
 docs/cookbook/shared-state.md | 33 ++++++++++++++++++---------------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/docs/cookbook/shared-state.md b/docs/cookbook/shared-state.md
index 4d7761ad5..10c7c878c 100644
--- a/docs/cookbook/shared-state.md
+++ b/docs/cookbook/shared-state.md
@@ -24,21 +24,6 @@ With the mesh assigned to the reactive state, it's available throughout your pro
 
 ::: code-group
 
-```ts [composables/state.ts]
-import { reactive, toRefs } from "vue";
-
-const state = reactive({
-    mesh: null,
-    //you can add more objects here
-})
-
-export function useState() {
-    return {
-        ...toRefs(state)
-    }
-}
-```
-
 ```vue [App.vue]
 <script setup lang="ts">
 import { BoxGeometry, Mesh, MeshNormalMaterial } from 'three';
@@ -71,6 +56,22 @@ const { mesh } = useState();
 </template>
 ```
 
+```ts [composables/state.ts]
+import { reactive, toRefs } from "vue";
+
+const state = reactive({
+    mesh: null,
+    //you can add more objects here
+})
+
+export function useState() {
+    return {
+        ...toRefs(state)
+    }
+}
+```
+:::
+
 ## Using TresMesh components
 
 You can also add TresMesh components to the reactive state. Here, we'll use a reference and assign it to the state when mounted.
@@ -151,4 +152,6 @@ onMounted(() => {
 </template>
 ```
 
+:::
+
 With these steps, you can easily manage and share objects across different components in your Vue 3 project using a reactive composable.

From 797fae29b0e7b4493fce25248e103d02f29f1c1d Mon Sep 17 00:00:00 2001
From: whitespacecode <37139936+whitespacecode@users.noreply.github.com>
Date: Tue, 12 Nov 2024 13:25:09 +0100
Subject: [PATCH 5/5] Update shared-state.md

improve code block for pinia and fix the naming
---
 docs/cookbook/shared-state.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/cookbook/shared-state.md b/docs/cookbook/shared-state.md
index 10c7c878c..e22911339 100644
--- a/docs/cookbook/shared-state.md
+++ b/docs/cookbook/shared-state.md
@@ -108,12 +108,12 @@ onMounted(() => {
 
 ## Using Pinia Store
 
-By using the same logic we can also use pinia.
+By using the same logic we can also use Pinia.
 By using pinia we also have full access to actions and getters.
 
 ::: code-group
 
-``` [model.ts]
+```ts [model.ts]
 import { defineStore } from "pinia";
 
 export const useModelStore = defineStore('model', {