Replace event dispatching with bindings

Signed-off-by: Alexis Sellier <self@cloudhead.io>

src/base/projects/Browser.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { createEventDispatcher, onMount } from 'svelte';
   import { navigate } from 'svelte-routing';
   import type { Config } from '@app/config';
   import * as proj from '@app/project';
@@ -10,8 +9,6 @@
   import Blob from './Blob.svelte';
   import Readme from './Readme.svelte';
 
-  const dispatch = createEventDispatcher();
-
   enum Status {
     Loading,
     Loaded,
@@ -29,23 +26,22 @@
   export let branches: [string, string][];
   export let locator: string; // eg. "master/README.md"
   export let content: proj.ProjectContent;
-
-  // Bind content to file tree to trigger updates in parent components.
-  content = proj.ProjectContent.Tree;
+  export let revision: string;
+  export let path: string;
 
   // This is reactive to respond to path changes that don't originate from this
   // component, eg. when using the browser's "back" button.
-  $: [revision, path] = proj.splitPrefixFromPath(locator, branches, project.head);
+  $: [revision_, path_] = proj.splitPrefixFromPath(locator, branches, project.head);
+  // Bind content to file tree to trigger updates in parent components.
+  $: content = proj.ProjectContent.Tree;
+  $: revision = revision_;
+  $: path = path_;
 
   // When the component is loaded the first time, the blob is yet to be loaded.
   let state: State = { status: Status.Loading, path };
   // Whether the mobile file tree is visible.
   let mobileFileTree = false;
 
-  onMount(() => {
-    dispatch("routeParamsChange", { content: proj.ProjectContent.Tree, revision, path });
-  });
-
   const loadBlob = async (path: string): Promise<proj.Blob> => {
     if (state.status == Status.Loaded && state.path === path) {
       return state.blob;
@@ -69,8 +65,6 @@
     const blob = await loadBlob(newPath);
     getBlob = new Promise(resolve => resolve(blob));
 
-    dispatch("routeParamsChange", { content: proj.ProjectContent.Tree, revision, path });
-
     // Close mobile tree if user navigates to other file
     mobileFileTree = false;
     navigateBrowser(revision, newPath);
@@ -98,7 +92,6 @@
   };
 
   $: commit = proj.getOid(project.head, revision, branches);
-  $: dispatch("routeParamsChange", { content: proj.ProjectContent.Tree, revision, path });
   $: getBlob = loadBlob(path);
   $: loadingPath = state.status == Status.Loading ? state.path : null;
 </script>

src/base/projects/Commit/History.svelte

@@ -1,30 +1,22 @@
 <script lang="ts">
-  import { createEventDispatcher, onMount } from "svelte";
   import CommitTeaser from "./CommitTeaser.svelte";
   import { getCommits, Info, getOid, ProjectContent, splitPrefixFromPath } from "@app/project";
   import type { Config } from "@app/config";
   import Loading from "@app/Loading.svelte";
   import { groupCommitHistory, GroupedCommitsHistory } from "./lib";
 
-  const dispatch = createEventDispatcher();
-
   export let locator: string;
   export let urn: string;
   export let config: Config;
   export let project: Info;
   export let branches: [string, string][];
   export let content: ProjectContent;
-
-  $: [revision,] = splitPrefixFromPath(locator, branches, project.head);
+  export let revision: string;
 
   // Bind content to commit history to trigger updates in parent components.
-  content = ProjectContent.History;
-
-  onMount(() => {
-    dispatch("routeParamsChange", { content: ProjectContent.History, revision });
-  });
-
-  $: dispatch("routeParamsChange", { content: ProjectContent.History, revision });
+  $: [revision_,] = splitPrefixFromPath(locator, branches, project.head);
+  $: content = ProjectContent.History;
+  $: revision = revision_;
 
   async function fetchCommits(revision: string): Promise<GroupedCommitsHistory> {
     const commitsQuery = await getCommits(urn, getOid(project.head, revision, branches), config);

src/base/projects/ProjectContentRoutes.svelte

@@ -13,6 +13,8 @@
   export let user: string;
   export let branches: [string, string][];
   export let content: ProjectContent;
+  export let revision: string;
+  export let path: string;
 </script>
 
 <Router>
@@ -21,28 +23,31 @@
     <Browser {urn} {org} {user} {config} {tree} {project} {branches}
       locator={project.head}
       bind:content={content}
-      on:routeParamsChange />
+      bind:path={path}
+      bind:revision={revision} />
   </Route>
   <Route path="/tree">
     <Browser {urn} {org} {user} {config} {tree} {project} {branches}
       locator={project.head}
       bind:content={content}
-      on:routeParamsChange />
+      bind:path={path}
+      bind:revision={revision} />
   </Route>
   <Route path="/tree/*" let:params>
     <Browser {urn} {org} {user} {config} {tree} {project} {branches}
       locator={params["*"]}
       bind:content={content}
-      on:routeParamsChange />
+      bind:path={path}
+      bind:revision={revision} />
   </Route>
   <Route path="/history">
     <History {urn} locator={project.head} {config} {project} {branches}
       bind:content={content}
-      on:routeParamsChange />
+      bind:revision={revision} />
   </Route>
   <Route path="/history/*" let:params>
     <History {urn} locator={params["*"]} {config} {project} {branches}
       bind:content={content}
-      on:routeParamsChange />
+      bind:revision={revision} />
   </Route>
 </Router>

src/base/projects/View.svelte

@@ -174,7 +174,8 @@
         branches={result.branches}
         config={result.config}
         bind:content={content}
-        on:routeParamsChange={updateRouteParams} />
+        bind:revision={revision}
+        bind:path={path} />
     {:catch err}
       <div class="container center-content">
         <div class="error error-message text-xsmall">