From e6fd8e6eb400f03fca0102a60c300cf8a6356c5c Mon Sep 17 00:00:00 2001
From: Giovanni Abbatepaolo <30571828+bbtgnn@users.noreply.github.com>
Date: Mon, 29 Jul 2024 09:55:59 +0200
Subject: [PATCH] fix: solved reactivity issue (#17)

Co-authored-by: Puria Nafisi Azizi <puria@dyne.org>
---
 package.json                                  |  2 +-
 src/components.d.ts                           |  2 +
 .../dyne-code-editor/dyne-code-editor.tsx     | 36 ++++++++++++-----
 .../dyne-slangroom-editor.tsx                 | 40 ++++++++++---------
 4 files changed, 50 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index a3baa04..1ce4206 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "generate": "stencil generate",
     "sbb": "stencil build && storybook build --docs",
     "dev": "NODE_ENV=development npm-run-all -p dev:*",
-    "dev:start": "stencil build --watch --serve",
+    "dev:start": "stencil build --watch --dev --serve",
     "dev:storybook": "sleep 6 && storybook dev -p 6006"
   },
   "devDependencies": {
diff --git a/src/components.d.ts b/src/components.d.ts
index 18f08f6..296bd6c 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -29,6 +29,7 @@ export namespace Components {
     interface DyneCodeEditor {
         "class": string;
         "config": EditorStateConfig;
+        "content": string;
         "getContent": () => Promise<string>;
         "name": string;
         "setContent": (text: string) => Promise<void>;
@@ -95,6 +96,7 @@ declare namespace LocalJSX {
     interface DyneCodeEditor {
         "class"?: string;
         "config"?: EditorStateConfig;
+        "content"?: string;
         "name"?: string;
     }
     interface DyneInline {
diff --git a/src/components/dyne-code-editor/dyne-code-editor.tsx b/src/components/dyne-code-editor/dyne-code-editor.tsx
index bb14b01..b177533 100644
--- a/src/components/dyne-code-editor/dyne-code-editor.tsx
+++ b/src/components/dyne-code-editor/dyne-code-editor.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, Method, State, h, Prop } from '@stencil/core';
+import { Component, Element, Method, State, h, Prop, Host, Watch } from '@stencil/core';
 
 import { basicSetup } from 'codemirror';
 import { EditorState, EditorStateConfig } from '@codemirror/state';
@@ -16,16 +16,30 @@ import { nanoid } from 'nanoid';
 export class DyneCodeEditor {
   @Element() el: HTMLElement;
 
-  @Prop() name = nanoid(5);
-  @Prop() config: EditorStateConfig = { extensions: basicSetup };
-  @Prop() class = '';
+  @Prop({ reflect: true }) name = nanoid(5);
+  @Prop({ reflect: true }) config: EditorStateConfig = { extensions: basicSetup };
+  @Prop({ reflect: true }) class = '';
+  @Prop({ reflect: true }) content = '';
 
-  @State() view: EditorView;
+  view: EditorView;
+
+  @Watch('content')
+  async updateEditorContent() {
+    await this.setContent(this.content);
+  }
 
   private get state() {
     return this.view.state;
   }
 
+  //
+
+  async componentDidLoad() {
+    this.view = createEditor(this.getContainer(), { ...this.config, doc: this.content });
+  }
+
+  //
+
   @Method()
   async getContent(): Promise<string> {
     return this.state.doc.toString();
@@ -40,18 +54,20 @@ export class DyneCodeEditor {
 
   //
 
-  async componentDidLoad() {
-    this.view = createEditor(this.getContainer(), this.config);
-  }
-
   private getContainer() {
     const editorContainer = this.el.shadowRoot?.getElementById(this.name);
     if (!editorContainer) throw new Error('Container not initialized');
     return editorContainer;
   }
 
+  //
+
   render() {
-    return <div id={this.name} class={this.class}></div>;
+    return (
+      <Host>
+        <div id={this.name} class={this.class}></div>
+      </Host>
+    );
   }
 }
 
diff --git a/src/components/dyne-slangroom-editor/dyne-slangroom-editor.tsx b/src/components/dyne-slangroom-editor/dyne-slangroom-editor.tsx
index 6fc22f9..a0a3e64 100644
--- a/src/components/dyne-slangroom-editor/dyne-slangroom-editor.tsx
+++ b/src/components/dyne-slangroom-editor/dyne-slangroom-editor.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, State, Prop, Method, h } from '@stencil/core';
+import { Component, Element, State, Prop, Method, h, Watch } from '@stencil/core';
 
 // import { dracula } from 'thememirror';
 import { defaultKeymap } from '@codemirror/commands';
@@ -76,6 +76,7 @@ export class DyneSlangroomEditor {
       data: parseJsonObjectWithFallback(data),
       keys,
     });
+
     this.isExecuting = false;
   }
 
@@ -155,14 +156,16 @@ export class DyneSlangroomEditor {
               <Section title={EditorId.CONTRACT}>
                 <dyne-code-editor
                   name={EditorId.CONTRACT}
-                  config={{ doc: this.contract, extensions: this.keyboardExtension }}
+                  content={this.contract}
+                  config={{ extensions: this.keyboardExtension }}
                 ></dyne-code-editor>
               </Section>
 
               <Section title={EditorId.DATA}>
                 <dyne-code-editor
                   name={EditorId.DATA}
-                  config={{ doc: this.data, extensions: [this.keyboardExtension, json()] }}
+                  content={this.data}
+                  config={{ extensions: [this.keyboardExtension, json()] }}
                 ></dyne-code-editor>
               </Section>
 
@@ -170,7 +173,8 @@ export class DyneSlangroomEditor {
                 <Section title={EditorId.KEYS}>
                   <dyne-code-editor
                     name={EditorId.KEYS}
-                    config={{ doc: this.keys, extensions: [this.keyboardExtension, json()] }}
+                    content={this.keys}
+                    config={{ extensions: [this.keyboardExtension, json()] }}
                   ></dyne-code-editor>
                 </Section>
               )}
@@ -180,8 +184,7 @@ export class DyneSlangroomEditor {
           <Container className="md:grow md:w-0 shrink-0 md:basis-2">
             {this.showEmptyState && <EmptyState />}
             {this.isExecuting && <Spinner />}
-            {this.value && <ValueRenderer value={this.value} />}
-            {this.error && <ErrorRenderer error={this.error} />}
+            {this.result && <ResultRenderer result={this.result} />}
           </Container>
         </div>
       </div>
@@ -218,13 +221,19 @@ function parseJsonObjectWithFallback(string: string): Record<string, unknown> {
 
 // Partials
 
+function ResultRenderer(props: { result: SlangroomResult }) {
+  const { result } = props;
+  if (result.success === true) return <ValueRenderer value={result.value} />;
+  else return <ErrorRenderer error={result.error} />;
+}
+
 function ValueRenderer(props: { value: SlangroomValue }) {
   return (
     <Section title="Result">
       <dyne-code-editor
         name={EditorId.RESULT}
+        content={JSON.stringify(props.value, null, 2)}
         config={{
-          doc: JSON.stringify(props.value, null, 2),
           extensions: [json()],
         }}
       ></dyne-code-editor>
@@ -259,7 +268,7 @@ function ErrorRenderer(props: { error: SlangroomError }) {
 // text-slate-800 -> #1E293B
 function AnsiRenderer(props: { text: string; className?: string }) {
   const { text, className = '' } = props;
-  const converter = new Convert({bg: '#F1F5F9', fg: '#1E293B'});
+  const converter = new Convert({ bg: '#F1F5F9', fg: '#1E293B' });
   return <pre class={className} innerHTML={converter.toHtml(text)}></pre>;
 }
 
@@ -268,23 +277,16 @@ function ZencodeErrorRenderer(props: { error: ZencodeRuntimeError }) {
   return (
     <div>
       <Title name="trace" className="mb-1" />
-      <dyne-code-editor
-        config={{
-          doc: error.trace.join('\n'),
-        }}
-      ></dyne-code-editor>
+      <dyne-code-editor name="trace" content={error.trace.join('\n')}></dyne-code-editor>
 
       <Title name="logs" className="mb-1" />
-      <dyne-code-editor
-        config={{
-          doc: error.logs.join('\n'),
-        }}
-      ></dyne-code-editor>
+      <dyne-code-editor name="logs" content={error.logs.join('\n')}></dyne-code-editor>
 
       <Title name="heap" className="mb-1" />
       <dyne-code-editor
+        name="heap"
+        content={JSON.stringify(error.heap, null, 2)}
         config={{
-          doc: JSON.stringify(error.heap, null, 2),
           extensions: [json()],
         }}
       ></dyne-code-editor>