298fe26 Replace event dispatching with bindings — radicle-explorer

modified 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>

modified 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);

modified 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>

modified 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">