Fix loading script code from URL

Author: SanderMertens

etc/js/app.js

@@ -43,6 +43,8 @@ const defaultAppParams = {
   refresh: "auto"
 }
 
+const defaultCodeScript = "etc.assets.scene\\.flecs";
+
 function newAppParams() {
   let result = structuredClone(defaultAppParams);
 
@@ -274,6 +276,14 @@ Promise.all(components).then((values) => {
       // Load URL parameters
       this.fromUrlParams();
 
+      // If code is provided, open the script inspector for it.
+      if (this.app_params.code !== undefined) {
+        if (!this.app_params.entities.path) {
+          this.app_params.entities.path = this.getCodeScriptPath();
+        }
+        this.app_params.entities.inspector_tab = "Script";
+      }
+
       let explicitHost = true;
       if (!this.app_params.host) {
         this.app_params.host = "localhost";
@@ -302,7 +312,7 @@ Promise.all(components).then((values) => {
           if (status == flecs.ConnectionStatus.Connected) {
             if (this.conn.mode == flecs.ConnectionMode.Wasm) {
               if (this.app_params.code) {
-                this.conn.scriptUpdate("etc.assets.scene\\.flecs", this.app_params.code, {
+                this.conn.scriptUpdate(this.getCodeScriptPath(), this.app_params.code, {
                   try: true
                 }, () => {});
               }
@@ -368,6 +378,15 @@ Promise.all(components).then((values) => {
     },
 
     methods: {
+      getCodeScriptPath() {
+        if (this.app_params.entities && this.app_params.entities.path) {
+          return this.app_params.entities.path;
+        }
+        if (this.app_params.script) {
+          return this.app_params.script;
+        }
+        return defaultCodeScript;
+      },
       convertTo(type, value) {
         if (type === "undefined") {
           return value;

etc/js/components/pages/entities/page.vue

@@ -40,6 +40,7 @@
         :path="appParams.entities.path"
         v-model:app_params="appParams.entities"
         @close="onClose"
+        @onCodeChange="onCodeChange"
         @scriptOpen="onScriptOpen"
         @queryOpen="onQueryOpen"
         @selectEntity="onSelectEntity">

etc/js/components/pages/entities/pane-scripts.vue

@@ -22,10 +22,10 @@
         <div class="script-editor">
           <flecs-script 
             :conn="conn"
-            :script="activeScript"
+            :script="activeScript.path"
             v-model:error="scriptError"
-            v-model:changed="scriptChanged"
             @onChange="onCodeChange"
+            @onUpdate="onScriptUpdate"
             v-if="activeScript">
           </flecs-script>
         </div>
@@ -45,7 +45,7 @@ export default { name: "pane-scripts" }
 </script>
 
 <script setup>
-import { computed, onMounted, ref, watch } from 'vue';
+import { defineProps, defineModel, defineEmits, computed, onMounted, ref, watch } from 'vue';
 
 const props = defineProps({
   conn: {type: Object, required: true}
@@ -157,6 +157,10 @@ function onCodeChange(evt) {
   emit("onCodeChange", evt);
 }
 
+function onScriptUpdate(msg) {
+  scriptChanged.value = msg.changed;
+}
+
 defineExpose({openScript, closeScripts});
 
 </script>

etc/js/components/widgets/edit-tabs-close-button.vue

@@ -12,7 +12,7 @@ export default { name: "edit-tabs-close-button" }
 
 <script setup>
 
-import { computed, ref } from 'vue';
+import { defineProps, defineEmits, computed, ref } from 'vue';
 
 const props = defineProps({
   changed: {type: Boolean, required: false, default: false},

etc/js/components/widgets/edit-tabs.vue

@@ -41,7 +41,7 @@ export default { name: "edit-tabs" }
 </script>
 
 <script setup>
-import { onMounted } from 'vue';
+import { defineProps, defineModel, defineEmits, onMounted } from 'vue';
 
 const props = defineProps({
   items: {type: Array, required: true},

etc/js/components/widgets/flecs-script.vue

@@ -11,7 +11,7 @@ export default { name: "flecs-script" }
 </script>
 
 <script setup>
-import { onMounted, computed, ref, watch } from 'vue';
+import { defineProps, defineModel, defineEmits, onMounted, computed, ref, watch } from 'vue';
 
 const props = defineProps({
   conn: {type: Object, required: true},

etc/js/components/widgets/inspector/entity-inspector.vue

@@ -55,6 +55,7 @@
               :conn="conn"
               :script="path"
               v-if="entityQueryResult && isScript"
+              @onChange="onCodeChange"
               @onUpdate="onScriptUpdate">
             </flecs-script>
           </template>
@@ -143,7 +144,7 @@ export default { name: "entity-inspector" }
 <script setup>
 import { defineProps, defineEmits, defineModel, computed, ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
 
-const emit = defineEmits(["abort", "scriptOpen", "queryOpen","selectEntity", "close"]);
+const emit = defineEmits(["abort", "scriptOpen", "queryOpen","selectEntity", "close", "onCodeChange"]);
 
 const props = defineProps({
   conn: {type: Object, required: false},
@@ -431,6 +432,10 @@ function onScriptUpdate(evt) {
   scriptChanged.value = evt.changed;
 }
 
+function onCodeChange(code) {
+  emit("onCodeChange", code);
+}
+
 function onAddComponent(component) {
   props.conn.add(props.path, component, (reply) => {
     entityQuery.value.now();