cleanup

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

@@ -14,11 +14,6 @@ import { useTLTheme, TLContext, TLContextType } from '../../hooks'
 
 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.
    */
@@ -57,8 +52,6 @@ export interface RendererProps<T extends TLShape, M extends Record<string, unkno
    * An object of custom options that should be passed to rendered shapes.
    */
   meta?: M
-  // Temp
-  onTest?: () => void
 }
 
 /**
@@ -70,7 +63,6 @@ export interface RendererProps<T extends TLShape, M extends Record<string, unkno
  * @returns
  */
 export function Renderer<T extends TLShape, M extends Record<string, unknown>>({
-  id,
   shapeUtils,
   page,
   pageState,
@@ -90,31 +82,13 @@ export function Renderer<T extends TLShape, M extends Record<string, unknown>>({
     rPageState.current = pageState
   }, [pageState])
 
-  const rId = React.useRef(id)
+  const [context] = React.useState<TLContextType>(() => ({
-
-  const [context, setContext] = React.useState<TLContextType>(() => ({
-    id,
     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

@@ -1,6 +1,4 @@
 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

@@ -69,23 +69,16 @@ export function TLDraw({ id, document, currentPageId, onMount, onChange }: TLDra
   return (
     <TLDrawContext.Provider value={context}>
       <IdProvider>
-        <InnerTldraw
+        <InnerTldraw key={sId || 'tldraw'} currentPageId={currentPageId} document={document} />
-          key={sId || 'tldraw'}
-          id={sId}
-          currentPageId={currentPageId}
-          document={document}
-        />
       </IdProvider>
     </TLDrawContext.Provider>
   )
 }
 
 function InnerTldraw({
-  id,
   currentPageId,
   document,
 }: {
-  id?: string
   currentPageId?: string
   document?: TLDrawDocument
 }) {
@@ -150,16 +143,10 @@ function InnerTldraw({
     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

@@ -32,15 +32,11 @@ export const ToolsPanel = React.memo((): JSX.Element => {
 
   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

@@ -447,9 +447,9 @@ describe('TLDrawState', () => {
   })
 
   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