Completed Demo

packages/demo-react/src/App.tsx

@@ -2,14 +2,11 @@ import type { FunctionComponent } from "react";
 import React from "react";
 import { Layout } from "./Layout";
 import { BrowserSolidLdoProvider } from "@ldo/solid-react";
-import { MainContainerProvider } from "./MainContainerProvider";
 
 const ProfileApp: FunctionComponent = () => {
   return (
     <BrowserSolidLdoProvider>
-      <MainContainerProvider>
       <Layout />
-      </MainContainerProvider>
     </BrowserSolidLdoProvider>
   );
 };

packages/demo-react/src/Header.tsx

@@ -28,8 +28,8 @@ export const Header: FunctionComponent = () => {
   const { login, signUp, session } = useSolidAuth();
   return (
     <header style={{ display: "flex" }}>
-      {session.webId ? (
-        <LoggedInHeader webId={session.webId} />
+      {session.isLoggedIn ? (
+        <LoggedInHeader webId={session.webId!} />
       ) : (
         <>
           <input

packages/demo-react/src/Layout.tsx

@@ -5,6 +5,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { Dashboard } from "./dashboard/Dashboard";
 import { MediaPage } from "./media/MediaPage";
 import { Header } from "./Header";
+import { MainContainerProvider } from "./MainContainerProvider";
 
 const router = createBrowserRouter([
   {
@@ -26,7 +27,9 @@ export const Layout: FunctionComponent = () => {
     <div>
       <Header />
       <hr />
+      <MainContainerProvider>
         {session.isLoggedIn ? <RouterProvider router={router} /> : undefined}
+      </MainContainerProvider>
     </div>
   );
 };

packages/demo-react/src/MainContainerProvider.tsx

@@ -1,11 +1,23 @@
 import React, { useState, useEffect, createContext } from "react";
 import type { FunctionComponent, PropsWithChildren } from "react";
 import type { Container, LeafUri } from "@ldo/solid";
-import { useSolidAuth, useLdo } from "@ldo/solid-react";
+import { useSolidAuth, useLdo, useResource } from "@ldo/solid-react";
 
-export const MainContainerContext = createContext<Container | undefined>(
-  undefined,
-);
+// Context will be set before any of it's children are rendered.
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+export const MainContainerContext = createContext<Container>(undefined);
+
+const MainContainerSubProvider: FunctionComponent<
+  PropsWithChildren<{ uri: string }>
+> = ({ uri, children }) => {
+  const mainContainer = useResource(uri);
+  return (
+    <MainContainerContext.Provider value={mainContainer as Container}>
+      {children}
+    </MainContainerContext.Provider>
+  );
+};
 
 export const MainContainerProvider: FunctionComponent<PropsWithChildren> = ({
   children,
@@ -48,9 +60,13 @@ export const MainContainerProvider: FunctionComponent<PropsWithChildren> = ({
     }
   }, [session.webId]);
 
+  if (!mainContainer) {
+    return null;
+  }
+
   return (
-    <MainContainerContext.Provider value={mainContainer}>
+    <MainContainerSubProvider uri={mainContainer.uri}>
       {children}
-    </MainContainerContext.Provider>
+    </MainContainerSubProvider>
   );
 };

packages/demo-react/src/dashboard/Dashboard.tsx

@@ -13,8 +13,6 @@ export const Dashboard: FunctionComponent = () => {
     return <p>Loading Main Container</p>;
   }
 
-  console.log(mainContainer.children());
-
   return (
     <div>
       <div>

packages/solid-react/src/BrowserSolidLdoProvider.tsx

@@ -28,7 +28,6 @@ export const BrowserSolidLdoProvider: FunctionComponent<PropsWithChildren> = ({
       restorePreviousSession: true,
     });
     setSession({ ...getDefaultSession().info });
-
     window.history.replaceState(
       {},
       "",
@@ -40,19 +39,14 @@ export const BrowserSolidLdoProvider: FunctionComponent<PropsWithChildren> = ({
   }, []);
 
   const login = useCallback(async (issuer: string, options?: LoginOptions) => {
-    console.log("Before full options");
     const fullOptions = {
       redirectUrl: window.location.href,
       clientName: "Solid App",
       oidcIssuer: issuer,
       ...options,
     };
-    console.log("After full options");
     window.localStorage.setItem(PRE_REDIRECT_URI, fullOptions.redirectUrl);
-    console.log("Set Item");
-    console.log(fullOptions);
     await libraryLogin(fullOptions);
-    console.log("After login");
     setSession({ ...getDefaultSession().info });
   }, []);
 

packages/solid-react/src/useResource.ts

@@ -1,4 +1,4 @@
-import { useMemo, useEffect, useRef } from "react";
+import { useMemo, useEffect, useRef, useState, useCallback } from "react";
 import type {
   Container,
   ContainerUri,
@@ -7,7 +7,6 @@ import type {
   Leaf,
 } from "@ldo/solid";
 import { useLdo } from "./SolidLdoProvider";
-import { useForceReload } from "./util/useForceReload";
 
 export interface UseResourceOptions {
   suppressInitialRead?: boolean;
@@ -28,9 +27,11 @@ export function useResource(
   options?: UseResourceOptions,
 ): Leaf | Container {
   const { getResource } = useLdo();
+
+  // Get the resource
   const resource = useMemo(() => {
-    console.log(uri);
     const resource = getResource(uri);
+    // Run read operations if necissary
     if (!options?.suppressInitialRead) {
       if (options?.reloadOnMount) {
         resource.read();
@@ -40,18 +41,37 @@ export function useResource(
     }
     return resource;
   }, [getResource, uri]);
-  const pastResource = useRef<Resource | undefined>();
-  const forceReload = useForceReload();
+  const [resourceRepresentation, setResourceRepresentation] =
+    useState(resource);
+  const pastResource = useRef<
+    { resource: Resource; callback: () => void } | undefined
+  >();
+
+  // Callback function to force the react dom to reload.
+  const forceReload = useCallback(
+    // Wrap the resource in a proxy so it's techically a different object
+    () => {
+      setResourceRepresentation(new Proxy(resource, {}));
+    },
+    [resource],
+  );
   useEffect(() => {
+    // Remove listeners for the previous resource
     if (pastResource.current) {
-      pastResource.current.off("update", forceReload);
+      pastResource.current.resource.off(
+        "update",
+        pastResource.current.callback,
+      );
     }
-    pastResource.current = resource;
+    // Set a new past resource to the current resource
+    pastResource.current = { resource, callback: forceReload };
+    // Add listener
     resource.on("update", forceReload);
 
+    // Unsubscribe on unmount
     return () => {
       resource.off("update", forceReload);
     };
   }, [resource]);
-  return resource;
+  return resourceRepresentation;
 }

packages/solid-react/src/util/createWrapperProxy.ts

@@ -0,0 +1,7 @@
+import type { Resource } from "@ldo/solid";
+
+export function createWrapperProxy<ResourceType extends Resource>(
+  target: ResourceType,
+): ResourceType {
+  return new Proxy(target, {});
+}

packages/solid/src/SolidLdoDataset.ts

@@ -44,7 +44,6 @@ export class SolidLdoDataset extends LdoDataset {
     | AggregateError<UpdateResultError | InvalidUriError>
   > {
     const changesByGraph = splitChangesByGraph(changes);
-    console.log(changesByGraph);
     const results: [
       GraphNode,
       DatasetChanges<Quad>,

packages/solid/src/resource/Resource.ts

@@ -119,7 +119,6 @@ export abstract class Resource extends (EventEmitter as new () => TypedEmitter<{
   async readIfUnfetched(): Promise<
     ResourceResult<ReadLeafResult | ReadContainerResult, Container | Leaf>
   > {
-    console.log("didInitialFetch", this.didInitialFetch);
     if (this.didInitialFetch) {
       const readResult = this.toReadResult();
       this.status = readResult;