Update many usages of goto to redirect to improve routing history and fix many blocking navigation cycles

packages/builder/src/helpers/urlStateSync.js

@@ -36,7 +36,7 @@ export const syncURLToState = options => {
   let cachedRedirect = get(routify.redirect)
   let cachedPage = get(routify.page)
   let previousParamsHash = null
-  let debug = false
+  let debug = true
   const log = (...params) => debug && console.log(...params)
 
   // Navigate to a certain URL

packages/builder/src/pages/builder/app/[application]/_fallback.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { goto } from "@roxi/routify"
+  import { redirect } from "@roxi/routify"
 
-  $goto("../design")
+  $redirect("../design")
 </script>

packages/builder/src/pages/builder/app/[application]/_layout.svelte

@@ -27,6 +27,7 @@
 
   async function getPackage() {
     try {
+      store.actions.reset()
       const pkg = await API.fetchAppPackage(application)
       await store.actions.initialise(pkg)
       await automationStore.actions.fetch()
@@ -65,10 +66,6 @@
       hasSynced = true
     }
   })
-
-  onDestroy(() => {
-    store.actions.reset()
-  })
 </script>
 
 {#await promise}

packages/builder/src/pages/builder/app/[application]/automate/index.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { goto, leftover } from "@roxi/routify"
+  import { redirect, leftover } from "@roxi/routify"
   import { onMount } from "svelte"
   import { automationStore } from "builderStore"
 
@@ -11,7 +11,7 @@
       (!$automationStore.selectedAutomation ||
         !$automationStore.selectedAutomation?.automation?._id)
     ) {
-      $goto(`./${$automationStore.automations[0]._id}`)
+      $redirect(`./${$automationStore.automations[0]._id}`)
     }
   })
 </script>

packages/builder/src/pages/builder/app/[application]/data/_layout.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { goto, params } from "@roxi/routify"
+  import { redirect, params } from "@roxi/routify"
   import { Icon, Tabs, Tab } from "@budibase/bbui"
   import { BUDIBASE_INTERNAL_DB } from "constants"
   import DatasourceNavigator from "components/backend/DatasourceNavigator/DatasourceNavigator.svelte"
@@ -14,7 +14,7 @@
     $params.selectedDatasource !== BUDIBASE_INTERNAL_DB
 
   function selectFirstDatasource() {
-    $goto("./table")
+    $redirect("./table")
   }
 </script>
 

packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/[query]/_layout.svelte

@@ -2,7 +2,7 @@
   import { params } from "@roxi/routify"
   import { queries, datasources } from "stores/backend"
   import { IntegrationTypes } from "constants/backend"
-  import { goto } from "@roxi/routify"
+  import { redirect } from "@roxi/routify"
 
   let datasourceId
   if ($params.query) {
@@ -16,7 +16,7 @@
     ds => ds._id === $datasources.selected || ds._id === datasourceId
   )
   if (datasource?.source === IntegrationTypes.REST) {
-    $goto(`../rest/${$params.query}`)
+    $redirect(`../rest/${$params.query}`)
   }
 </script>
 

packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { params, goto } from "@roxi/routify"
+  import { params, redirect } from "@roxi/routify"
   import { database, datasources, queries } from "stores/backend"
   import QueryInterface from "components/integration/QueryViewer.svelte"
   import { IntegrationTypes } from "constants/backend"
@@ -18,7 +18,7 @@
   )
   $: {
     if (datasource?.source === IntegrationTypes.REST) {
-      $goto(`../rest/${$params.query}`)
+      $redirect(`../rest/${$params.query}`)
     }
   }
 </script>

packages/builder/src/pages/builder/app/[application]/data/datasource/index.svelte

@@ -1,11 +1,11 @@
 <script>
   import { datasources } from "stores/backend"
-  import { goto } from "@roxi/routify"
+  import { redirect } from "@roxi/routify"
   import { onMount } from "svelte"
 
   onMount(async () => {
     // navigate to first table in list, if not already selected
-    $datasources.list.length > 0 && $goto(`./${$datasources.list[0]._id}`)
+    $datasources.list.length > 0 && $redirect(`./${$datasources.list[0]._id}`)
   })
 </script>
 

packages/builder/src/pages/builder/app/[application]/data/index.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { goto } from "@roxi/routify"
+  import { redirect } from "@roxi/routify"
   import { onMount } from "svelte"
   import { admin } from "stores/portal"
   import CreateDatasourceModal from "components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte"
@@ -14,7 +14,7 @@
     if (!setupComplete && !$admin.isDev) {
       modal.show()
     } else {
-      $goto("./table")
+      $redirect("./table")
     }
   })
 </script>

packages/builder/src/pages/builder/app/[application]/data/table/[selectedTable]/relationship/[selectedRow]/index.svelte

@@ -1,6 +1,6 @@
 <script>
-  import { goto } from "@roxi/routify"
+  import { redirect } from "@roxi/routify"
-  $goto("../../")
+  $redirect("../../")
 </script>
 
 <!-- routify:options index=false -->

packages/builder/src/pages/builder/app/[application]/data/table/[selectedTable]/relationship/index.svelte

@@ -1,6 +1,6 @@
 <script>
-  import { goto } from "@roxi/routify"
+  import { redirect } from "@roxi/routify"
-  $goto("../")
+  $redirect("../")
 </script>
 
 <!-- routify:options index=false -->

packages/builder/src/pages/builder/app/[application]/data/table/_layout.svelte

@@ -1,6 +1,6 @@
 <script>
   import { tables } from "stores/backend"
-  import { goto, leftover } from "@roxi/routify"
+  import { redirect, leftover } from "@roxi/routify"
   import { onMount } from "svelte"
 
   onMount(async () => {
@@ -11,7 +11,7 @@
       $tables.list.length > 0 &&
       (!$tables.selected || !$tables.selected._id)
     ) {
-      $goto(`./${$tables.list[0]._id}`)
+      $redirect(`./${$tables.list[0]._id}`)
     }
   })
 </script>

packages/builder/src/pages/builder/app/[application]/data/table/index.svelte

@@ -1,10 +1,10 @@
 <script>
-  import { goto } from "@roxi/routify"
+  import { redirect } from "@roxi/routify"
   import { onMount } from "svelte"
   import { tables } from "stores/backend"
 
   onMount(async () => {
-    $tables.list.length > 0 && $goto(`./${$tables.list[0]._id}`)
+    $tables.list.length > 0 && $redirect(`./${$tables.list[0]._id}`)
   })
 </script>
 

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte

@@ -17,7 +17,10 @@
     routify,
   })
 
-  onDestroy(stopSyncing)
+  onDestroy(() => {
+    console.log("============= stop syncing screen ID!")
+    stopSyncing()
+  })
 </script>
 
 <div class="design">

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte

@@ -15,7 +15,10 @@
     routify,
   })
 
-  onDestroy(stopSyncing)
+  onDestroy(() => {
+    console.log("============= stop syncing component ID!")
+    stopSyncing()
+  })
 </script>
 
 <slot />

packages/builder/src/pages/builder/app/[application]/index.svelte

@@ -1,4 +1,4 @@
 <script>
-  import { goto } from "@roxi/routify"
+  import { redirect } from "@roxi/routify"
-  $goto("./design")
+  $redirect("./design")
 </script>

packages/builder/src/pages/builder/app/index.svelte

@@ -1,4 +1,4 @@
 <script>
-  import { goto } from "@roxi/routify"
+  import { redirect } from "@roxi/routify"
-  $goto("../portal")
+  $redirect("../portal")
 </script>