Adds onChange and onMount to constructor

packages/dev/src/components/editor.tsx

@@ -2,10 +2,26 @@ import * as React from 'react'
 import { TLDraw, TLDrawState } from '@tldraw/tldraw'
 
 export default function Editor(): JSX.Element {
-  const handleMount = React.useCallback((tlstate: TLDrawState) => {
+  const rTLDrawState = React.useRef<TLDrawState>()
+
+  const handleMount = React.useCallback((state: TLDrawState) => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    window.tlstate = tlstate
+    window.tlstate = state
+
+    rTLDrawState.current = state
+    state.selectAll()
+    state.createShapes({
+      id: 'rect1',
+      type: 'rectangle',
+      point: [100, 100],
+      size: [200, 200],
+    })
+    state.updateShapes({
+      id: 'rect1',
+      point: [150, 150],
+    })
   }, [])
+
   return <TLDraw id="tldraw" onMount={handleMount} />
 }

packages/tldraw/package.json

@@ -63,7 +63,7 @@
     "@tldraw/core": "^0.0.58",
     "perfect-freehand": "^0.5.3",
     "react-hotkeys-hook": "^3.4.0",
-    "rko": "^0.5.19"
+    "rko": "^0.5.20"
   },
   "gitHead": "838fabdbff1a66d4d7ee8aa5c5d117bc55acbff2"
-}
+}

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

@@ -50,11 +50,11 @@ export interface TLDrawProps {
   onChange?: TLDrawState['_onChange']
 }
 
-export function TLDraw({ id, document, currentPageId, onMount, onChange: _onChange }: TLDrawProps) {
+export function TLDraw({ id, document, currentPageId, onMount, onChange }: TLDrawProps) {
   const [tlstate, setTlstate] = React.useState(() => new TLDrawState(id))
 
   React.useEffect(() => {
-    setTlstate(new TLDrawState(id))
+    setTlstate(new TLDrawState(id, onChange, onMount))
   }, [id])
 
   const [context] = React.useState(() => {
@@ -63,7 +63,7 @@ export function TLDraw({ id, document, currentPageId, onMount, onChange: _onChan
 
   React.useEffect(() => {
     if (!document) return
-    tlstate.loadDocument(document, _onChange)
+    tlstate.loadDocument(document)
   }, [document, tlstate])
 
   React.useEffect(() => {
@@ -71,10 +71,6 @@ export function TLDraw({ id, document, currentPageId, onMount, onChange: _onChan
     tlstate.changePage(currentPageId)
   }, [currentPageId, tlstate])
 
-  React.useEffect(() => {
-    onMount?.(tlstate)
-  }, [])
-
   return (
     <TLDrawContext.Provider value={context}>
       <IdProvider>

packages/tldraw/src/state/tlstate.ts

@@ -96,6 +96,7 @@ const initialData: Data = {
 
 export class TLDrawState extends StateManager<Data> {
   private _onChange?: (tlstate: TLDrawState, data: Data, reason: string) => void
+  private _onMount?: (tlstate: TLDrawState) => void
 
   selectHistory: SelectHistory = {
     stack: [[]],
@@ -116,7 +117,11 @@ export class TLDrawState extends StateManager<Data> {
 
   selectedGroupId?: string
 
-  constructor(id = Utils.uniqueId()) {
+  constructor(
+    id = Utils.uniqueId(),
+    onChange?: (tlstate: TLDrawState, data: Data, reason: string) => void,
+    onMount?: (tlstate: TLDrawState) => void
+  ) {
     super(initialData, id, 2, (prev, next, prevVersion) => {
       const state = { ...prev }
       if (prevVersion === 1)
@@ -127,11 +132,18 @@ export class TLDrawState extends StateManager<Data> {
       return state
     })
 
+    this._onChange = onChange
+    this._onMount = onMount
+
     this.session = undefined
     this.pointedId = undefined
   }
   /* -------------------- Internal -------------------- */
 
+  onReady = () => {
+    this._onMount?.(this)
+  }
+
   /**
    * Cleanup the state after each state change.
    * @param state The new state
@@ -474,8 +486,7 @@ export class TLDrawState extends StateManager<Data> {
    * @param onChange (optional) A callback to call when the document changes
    * @returns this
    */
-  loadDocument = (document: TLDrawDocument, onChange?: TLDrawState['_onChange']): this => {
-    this._onChange = onChange
+  loadDocument = (document: TLDrawDocument): this => {
     this.deselectAll()
     this.resetHistory()
     this.clearSelectHistory()

yarn.lock

@@ -11530,10 +11530,10 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
-rko@^0.5.19:
-  version "0.5.19"
-  resolved "https://registry.yarnpkg.com/rko/-/rko-0.5.19.tgz#33577596167178abc30063b6dd0a8bbde0362c27"
-  integrity sha512-0KSdDnbhD11GCDvZFARvCJedJuwWIh5F1cCqTGljFF/wQi9PUVu019qH4ME4LdPF3HotMLcdQsxEXmIDeeD0zQ==
+rko@^0.5.19, rko@^0.5.20:
+  version "0.5.20"
+  resolved "https://registry.yarnpkg.com/rko/-/rko-0.5.20.tgz#a0a374e9b8d6880f05a1d13f2efc277299644e19"
+  integrity sha512-u9V6n0rx9nHI+hO0e20LYdvKEHCDDwVRsD0vMxMe2A2sHWVb6qtmwMw3hifJTo0Tn3UJQDOiBy+uE7zxEyrS/g==
   dependencies:
     idb-keyval "^5.1.3"
     zustand "^3.5.9"