cleanup

packages/core/src/components/renderer/renderer.tsx

 
 export interface RendererProps<T extends TLShape, M extends Record<string, unknown>>
   extends Partial<TLCallbacks> {
-  /**
-   * An id representing the current document. Changing the id will
-   * update the context and trigger a re-render.
-   */
-  id?: string
   /**
    * An object containing instances of your shape classes.
    */
    * An object of custom options that should be passed to rendered shapes.
    */
   meta?: M
-  // Temp
-  onTest?: () => void
 }
 
 /**
  * @returns
  */
 export function Renderer<T extends TLShape, M extends Record<string, unknown>>({
-  id,
   shapeUtils,
   page,
   pageState,
     rPageState.current = pageState
   }, [pageState])
 
-  const rId = React.useRef(id)
-
-  const [context, setContext] = React.useState<TLContextType>(() => ({
-    id,
+  const [context] = React.useState<TLContextType>(() => ({
     callbacks: rest,
     shapeUtils,
     rScreenBounds,
     rPageState,
   }))
 
-  React.useEffect(() => {
-    if (id !== rId.current) {
-      rest.onTest?.()
-      setContext({
-        id,
-        callbacks: rest,
-        shapeUtils,
-        rScreenBounds,
-        rPageState,
-      })
-
-      rId.current = id
-    }
-  }, [id])
-
   return (
     <TLContext.Provider value={context}>
       <Canvas

packages/dev/src/app.tsx

 import * as React from 'react'
-import Controlled from './controlled'
-import Basic from './basic'
 import NewId from './newId'
 
 export default function App(): JSX.Element {

packages/tldraw/src/components/tldraw/tldraw.tsx

   return (
     <TLDrawContext.Provider value={context}>
       <IdProvider>
-        <InnerTldraw
-          key={sId || 'tldraw'}
-          id={sId}
-          currentPageId={currentPageId}
-          document={document}
-        />
+        <InnerTldraw key={sId || 'tldraw'} currentPageId={currentPageId} document={document} />
       </IdProvider>
     </TLDrawContext.Provider>
   )
 }
 
 function InnerTldraw({
-  id,
   currentPageId,
   document,
 }: {
-  id?: string
   currentPageId?: string
   document?: TLDrawDocument
 }) {
     tlstate.changePage(currentPageId)
   }, [currentPageId, tlstate])
 
-  React.useEffect(() => {
-    'Id Changed!'
-    console.log(id, tlstate.id)
-  }, [id])
-
   return (
     <Layout>
       <ContextMenu>
         <Renderer
-          id={id}
           page={page}
           pageState={pageState}
           shapeUtils={tldrawShapeUtils}

packages/tldraw/src/components/tools-panel/tools-panel.tsx

 
   const isDebugMode = useSelector(isDebugModeSelector)
 
-  console.log(activeTool)
-
   const selectSelectTool = React.useCallback(() => {
-    console.log(tlstate.id)
     tlstate.selectTool('select')
   }, [tlstate])
 
   const selectDrawTool = React.useCallback(() => {
-    console.log(tlstate.id)
     tlstate.selectTool(TLDrawShapeType.Draw)
   }, [tlstate])
 

packages/tldraw/src/state/tlstate.spec.ts

   })
 
   describe('when the document prop changes', () => {
-    it.todo('updates the document if the new id is the same as the old one')
-
     it.todo('replaces the document if the ids are different')
+
+    it.todo('updates the document if the new id is the same as the old one')
   })
   /*
     We want to be able to use the `document` property to update the