Fix Reactivity issue with library imports when changing version

packages/docs/src/.vitepress/theme/components/CodeEditor.vue

@@ -33,7 +33,7 @@ const emit = defineEmits<{
   (e: 'execute'): void;
 }>();
 
-watch(() => props.libs, async () => {
+watch(props.libs, async () => {
   updateEditorTypes();
 });
 

packages/docs/src/.vitepress/theme/components/CodeSandbox.vue

@@ -3,9 +3,10 @@
     <div class="editor-container" :style="editorContainerStyle">
       <code-editor v-model="code" @execute="executeCode" :style="editorStyle" :libs="libs" :is-dark="isDark"/>
       <div class="editor-buttons">
-        <button v-if="!hideRunButton" @click="executeCode" class="primary-button">Run Code</button>
+        <button v-if="!hideRunButton" @click="executeCode" class="primary-button ">Run Code</button>
       </div>
     </div>
+    
 
     <div v-if="showLogs || fullHeight" class="output-container" :style="outputContainerStyle">
       <div class="output-container-buttons">
@@ -40,7 +41,7 @@
 
 <script setup lang="ts">
 import { useData } from 'vitepress';
-import { ref, onMounted, onBeforeUnmount, computed, version } from 'vue';
+import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
 
 // Import the iframe HTML template
 // NOTE: Having this in an external file is many-fold neater than stashing it all in here.
@@ -79,8 +80,7 @@ interface ConsoleLog {
 }
 
 // Define share URL base
-// const SHARE_BASE_URL = 'https://stack.xo.cash/playground.html';
-const SHARE_BASE_URL = 'http://localhost:5173/playground.html';
+const SHARE_BASE_URL = 'https://stack.xo.cash/playground.html';
 
 // Define a unique ID to pass into the IFrame.
 // NOTE: We do this so that we can reliably identify where the postMessage came from.
@@ -406,6 +406,7 @@ defineExpose({
   right: 0px;
   display: flex;
   gap: 8px;
+  z-index: 1001; /* Monaco's editor is z-index 1000, so we need to be above it */
 }
 
 .output-container {

packages/docs/src/.vitepress/theme/components/Playground.vue

@@ -21,7 +21,7 @@
       outputHeight="20%"
       fullHeight
       hideRunButton
-      :libs="libs"
+      :libs="xocashLibs"
       :isDark="isDark"
     >
       <slot></slot>
@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 import { useData } from 'vitepress';
 
 import { useXOCashLibs } from '../utils/useXOCashLibs';
@@ -38,10 +38,6 @@ import CodeSandbox from './CodeSandbox.vue'
 
 const xocashLibs = useXOCashLibs();
 
-const libs = computed(() => {
-  return { ...xocashLibs }
-});
-
 const { isDark } = useData();
 
 const sandbox = ref<InstanceType<typeof CodeSandbox> | null>(null);

packages/docs/src/.vitepress/theme/utils/useXOCashLibs.ts

@@ -9,7 +9,7 @@ export type ImportedLib = {
 export type XOCashLibs = {
   '@xocash/stack': ImportedLib;
   '@xocash/primitives': ImportedLib;
-}
+};
 
 const xocashLibs = reactive<XOCashLibs>({
   '@xocash/stack': {
@@ -64,8 +64,14 @@ export const useXOCashLibs = (): XOCashLibs => {
   // Fetch the versions and set the selected version when the component is mounted.
   onMounted(async () => {
     xocashLibs['@xocash/stack'].versions = await getVersions();
-    xocashLibs['@xocash/stack'].selectedVersion =
-      xocashLibs['@xocash/stack'].versions[xocashLibs['@xocash/stack'].versions.length - 1];
+
+    // Only update the selected version if it is not already set.
+    if (!xocashLibs['@xocash/stack'].selectedVersion) {
+      xocashLibs['@xocash/stack'].selectedVersion =
+        xocashLibs['@xocash/stack'].versions[
+          xocashLibs['@xocash/stack'].versions.length - 1
+        ];
+    }
   });
 
   return xocashLibs;

packages/docs/src/tools/sandbox.md

@@ -25,12 +25,11 @@ The below is Address mess.
 <!-- NOTE: It is absolutely crucial you leave a blank line before and after the backticks! Otherwise, you'll end up with errors.-->
 
 <CodeSandbox
-  :libs="xocashLibs"
-  height="50em"
-  editorHeight="30em"
-  outputHeight="20em"
-  fullHeight
->
+:libs="xocashLibs"
+height="50em"
+editorHeight="30em"
+outputHeight="20em"
+fullHeight>
 
 ```
 import { Address } from '@xocash/stack';
@@ -55,12 +54,11 @@ We can have more than one per page too. For example:
 <!-- NOTE: It is absolutely crucial you leave a blank line before and after the backticks! Otherwise, you'll end up with errors.-->
 
 <CodeSandbox
-  :libs="xocashLibs"
-  height="50em"
-  editorHeight="30em"
-  outputHeight="20em"
-  fullHeight
->
+:libs="xocashLibs"
+height="50em"
+editorHeight="30em"
+outputHeight="20em"
+fullHeight>
 
 ```
 import { BlockchainElectrum } from '@xocash/stack';
@@ -83,12 +81,11 @@ The below demonstrates instantiating a wallet.
 <!-- NOTE: It is absolutely crucial you leave a blank line before and after the backticks! Otherwise, you'll end up with errors.-->
 
 <CodeSandbox
-  :libs="xocashLibs"
-  height="50em"
-  editorHeight="30em"
-  outputHeight="20em"
-  fullHeight
->
+:libs="xocashLibs"
+height="50em"
+editorHeight="30em"
+outputHeight="20em"
+fullHeight>
 
 ```
 import { BlockchainElectrum, WalletP2PKH } from '@xocash/stack';

packages/primitives/src/script.ts

@@ -149,7 +149,7 @@ export class Script {
     // Attempt to compile the script called "main"
     const compilationResult = compiler.generateBytecode<true>({
       data: {
-        ...data,
+        bytecode: data,
       },
       scriptId: '_main',
       debug: true,

packages/stack/rollup.config.js

@@ -5,7 +5,7 @@ export default defineConfig({
   input: 'dist/index.d.ts',
   output: {
     file: 'dist/types-bundled.d.ts',
-    format: 'es'
+    format: 'es',
   },
   plugins: [dts()],
-});
+});