Fix build errors

.eslintrc.js

@@ -8,7 +8,7 @@ module.exports = {
       // enable the rule specifically for TypeScript files
       files: ['*.ts', '*.tsx'],
       rules: {
-        '@typescript-eslint/explicit-module-boundary-types': [false],
+        '@typescript-eslint/explicit-module-boundary-types': [0],
       },
     },
   ],

package.json

@@ -19,7 +19,7 @@
     "test": "jest",
     "lerna": "lerna",
     "start": "lerna run dev --stream --parallel",
-    "start:www": "lerna run dev --stream --parallel &  cd packages/www && yarn build",
+    "start:www": "lerna run dev --stream --parallel & cd packages/www && yarn build",
     "build": "yarn build:packages && cd packages/www && yarn build",
     "build:packages": "cd packages/core && yarn build && cd ../tldraw && yarn build"
   },

packages/core/src/types.d.ts

@@ -0,0 +1,257 @@
+/// <reference types="react" />
+export interface TLPage<T extends TLShape> {
+    id: string;
+    name?: string;
+    childIndex?: number;
+    shapes: Record<string, T>;
+    bindings: Record<string, TLBinding>;
+    backgroundColor?: string;
+}
+export interface TLPageState {
+    id: string;
+    brush?: TLBounds;
+    pointedId?: string;
+    hoveredId?: string;
+    editingId?: string;
+    bindingId?: string;
+    boundsRotation?: number;
+    currentParentId?: string;
+    selectedIds: string[];
+    camera: {
+        point: number[];
+        zoom: number;
+    };
+}
+export interface TLHandle {
+    id: string;
+    index: number;
+    point: number[];
+    canBind?: boolean;
+    bindingId?: string;
+}
+export interface TLShape {
+    id: string;
+    type: string;
+    parentId: string;
+    childIndex: number;
+    name: string;
+    point: number[];
+    rotation?: number;
+    children?: string[];
+    handles?: Record<string, TLHandle>;
+    isLocked?: boolean;
+    isHidden?: boolean;
+    isEditing?: boolean;
+    isGenerated?: boolean;
+    isAspectRatioLocked?: boolean;
+}
+export declare type TLShapeUtils<T extends TLShape> = Record<string, TLShapeUtil<T>>;
+export interface TLRenderInfo<T extends SVGElement | HTMLElement = any> {
+    isEditing: boolean;
+    isBinding: boolean;
+    isDarkMode: boolean;
+    isCurrentParent: boolean;
+    ref?: React.RefObject<T>;
+    onTextChange?: TLCallbacks['onTextChange'];
+    onTextBlur?: TLCallbacks['onTextBlur'];
+    onTextFocus?: TLCallbacks['onTextFocus'];
+    onTextKeyDown?: TLCallbacks['onTextKeyDown'];
+    onTextKeyUp?: TLCallbacks['onTextKeyUp'];
+}
+export interface TLTool {
+    id: string;
+    name: string;
+}
+export interface TLBinding {
+    id: string;
+    type: string;
+    toId: string;
+    fromId: string;
+}
+export interface TLSettings {
+    isDebugMode: boolean;
+    isDarkMode: boolean;
+    isPenMode: boolean;
+}
+export interface TLTheme {
+    brushFill?: string;
+    brushStroke?: string;
+    selectFill?: string;
+    selectStroke?: string;
+    background?: string;
+    foreground?: string;
+}
+export declare type TLWheelEventHandler = (info: TLPointerInfo<string>, e: React.WheelEvent<Element> | WheelEvent) => void;
+export declare type TLPinchEventHandler = (info: TLPointerInfo<string>, e: React.WheelEvent<Element> | WheelEvent | React.TouchEvent<Element> | TouchEvent) => void;
+export declare type TLPointerEventHandler = (info: TLPointerInfo<string>, e: React.PointerEvent) => void;
+export declare type TLCanvasEventHandler = (info: TLPointerInfo<'canvas'>, e: React.PointerEvent) => void;
+export declare type TLBoundsEventHandler = (info: TLPointerInfo<'bounds'>, e: React.PointerEvent) => void;
+export declare type TLBoundsHandleEventHandler = (info: TLPointerInfo<TLBoundsCorner | TLBoundsEdge | 'rotate'>, e: React.PointerEvent) => void;
+export interface TLCallbacks {
+    onChange: (ids: string[]) => void;
+    onPinchStart: TLPinchEventHandler;
+    onPinchEnd: TLPinchEventHandler;
+    onPinch: TLPinchEventHandler;
+    onPan: TLWheelEventHandler;
+    onZoom: TLWheelEventHandler;
+    onPointerMove: TLPointerEventHandler;
+    onPointerUp: TLPointerEventHandler;
+    onPointerDown: TLPointerEventHandler;
+    onPointCanvas: TLCanvasEventHandler;
+    onDoubleClickCanvas: TLCanvasEventHandler;
+    onRightPointCanvas: TLCanvasEventHandler;
+    onDragCanvas: TLCanvasEventHandler;
+    onReleaseCanvas: TLCanvasEventHandler;
+    onPointShape: TLPointerEventHandler;
+    onDoubleClickShape: TLPointerEventHandler;
+    onRightPointShape: TLPointerEventHandler;
+    onDragShape: TLPointerEventHandler;
+    onHoverShape: TLPointerEventHandler;
+    onUnhoverShape: TLPointerEventHandler;
+    onReleaseShape: TLPointerEventHandler;
+    onPointBounds: TLBoundsEventHandler;
+    onDoubleClickBounds: TLBoundsEventHandler;
+    onRightPointBounds: TLBoundsEventHandler;
+    onDragBounds: TLBoundsEventHandler;
+    onHoverBounds: TLBoundsEventHandler;
+    onUnhoverBounds: TLBoundsEventHandler;
+    onReleaseBounds: TLBoundsEventHandler;
+    onPointBoundsHandle: TLBoundsHandleEventHandler;
+    onDoubleClickBoundsHandle: TLBoundsHandleEventHandler;
+    onRightPointBoundsHandle: TLBoundsHandleEventHandler;
+    onDragBoundsHandle: TLBoundsHandleEventHandler;
+    onHoverBoundsHandle: TLBoundsHandleEventHandler;
+    onUnhoverBoundsHandle: TLBoundsHandleEventHandler;
+    onReleaseBoundsHandle: TLBoundsHandleEventHandler;
+    onPointHandle: TLPointerEventHandler;
+    onDoubleClickHandle: TLPointerEventHandler;
+    onRightPointHandle: TLPointerEventHandler;
+    onDragHandle: TLPointerEventHandler;
+    onHoverHandle: TLPointerEventHandler;
+    onUnhoverHandle: TLPointerEventHandler;
+    onReleaseHandle: TLPointerEventHandler;
+    onTextChange: (id: string, text: string) => void;
+    onTextBlur: (id: string) => void;
+    onTextFocus: (id: string) => void;
+    onTextKeyDown: (id: string, key: string) => void;
+    onTextKeyUp: (id: string, key: string) => void;
+    onBlurEditingShape: () => void;
+    onError: (error: Error) => void;
+}
+export interface TLBounds {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+    width: number;
+    height: number;
+    rotation?: number;
+}
+export declare type TLIntersection = {
+    didIntersect: boolean;
+    message: string;
+    points: number[][];
+};
+export declare enum TLBoundsEdge {
+    Top = "top_edge",
+    Right = "right_edge",
+    Bottom = "bottom_edge",
+    Left = "left_edge"
+}
+export declare enum TLBoundsCorner {
+    TopLeft = "top_left_corner",
+    TopRight = "top_right_corner",
+    BottomRight = "bottom_right_corner",
+    BottomLeft = "bottom_left_corner"
+}
+export interface TLPointerInfo<T extends string = string> {
+    target: T;
+    pointerId: number;
+    origin: number[];
+    point: number[];
+    delta: number[];
+    pressure: number;
+    shiftKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    altKey: boolean;
+}
+export interface TLKeyboardInfo {
+    origin: number[];
+    point: number[];
+    key: string;
+    keys: string[];
+    shiftKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    altKey: boolean;
+}
+export interface TLTransformInfo<T extends TLShape> {
+    type: TLBoundsEdge | TLBoundsCorner;
+    initialShape: T;
+    scaleX: number;
+    scaleY: number;
+    transformOrigin: number[];
+}
+export interface TLBezierCurveSegment {
+    start: number[];
+    tangentStart: number[];
+    normalStart: number[];
+    pressureStart: number;
+    end: number[];
+    tangentEnd: number[];
+    normalEnd: number[];
+    pressureEnd: number;
+}
+export declare abstract class TLShapeUtil<T extends TLShape> {
+    boundsCache: WeakMap<TLShape, TLBounds>;
+    isEditableText: boolean;
+    isAspectRatioLocked: boolean;
+    canEdit: boolean;
+    canBind: boolean;
+    abstract type: T['type'];
+    abstract defaultProps: T;
+    abstract render(shape: T, info: TLRenderInfo): JSX.Element;
+    abstract renderIndicator(shape: T): JSX.Element | null;
+    abstract getBounds(shape: T): TLBounds;
+    abstract getRotatedBounds(shape: T): TLBounds;
+    abstract hitTest(shape: T, point: number[]): boolean;
+    abstract hitTestBounds(shape: T, bounds: TLBounds): boolean;
+    abstract transform(shape: T, bounds: TLBounds, info: TLTransformInfo<T>): Partial<T>;
+    transformSingle(shape: T, bounds: TLBounds, info: TLTransformInfo<T>): Partial<T>;
+    shouldRender(_prev: T, _next: T): boolean;
+    shouldDelete(_shape: T): boolean;
+    getCenter(shape: T): number[];
+    getBindingPoint(shape: T, point: number[], origin: number[], direction: number[], padding: number, anywhere: boolean): {
+        point: number[];
+        distance: number;
+    } | undefined;
+    create(props: Partial<T>): T;
+    mutate(shape: T, props: Partial<T>): T;
+    updateChildren<K extends TLShape>(_shape: T, _children: K[]): Partial<K>[] | void;
+    onChildrenChange(_shape: T, _children: TLShape[]): Partial<T> | void;
+    onBindingChange(_shape: T, _binding: TLBinding, _target: TLShape, _targetBounds: TLBounds, _center: number[]): Partial<T> | void;
+    onHandleChange(_shape: T, _handle: Partial<T['handles']>, _info: Partial<TLPointerInfo>): Partial<T> | void;
+    onRightPointHandle(_shape: T, _handle: Partial<T['handles']>, _info: Partial<TLPointerInfo>): Partial<T> | void;
+    onDoubleClickHandle(_shape: T, _handle: Partial<T['handles']>, _info: Partial<TLPointerInfo>): Partial<T> | void;
+    onSessionComplete(_shape: T): Partial<T> | void;
+    onBoundsReset(_shape: T): Partial<T> | void;
+    onStyleChange(_shape: T): Partial<T> | void;
+}
+export interface IShapeTreeNode {
+    shape: TLShape;
+    children?: IShapeTreeNode[];
+    isEditing: boolean;
+    isBinding: boolean;
+    isDarkMode: boolean;
+    isCurrentParent: boolean;
+}
+export declare type MappedByType<T extends {
+    type: string;
+}> = {
+    [P in T['type']]: T extends any ? (P extends T['type'] ? T : never) : never;
+};
+export declare type RequiredKeys<T> = {
+    [K in keyof T]-?: Record<string, unknown> extends Pick<T, K> ? never : K;
+}[keyof T];
+export {};

packages/core/tsconfig.json

@@ -3,6 +3,7 @@
   "include": ["src"],
   "exclude": ["node_modules", "**/*.test.ts", "dist"],
   "compilerOptions": {
+    "baseUrl": "src",
     "jsx": "preserve",
     "lib": ["dom", "esnext"],
     "module": "esnext",

packages/dev/package.json

@@ -1,10 +1,9 @@
 {
-  "name": "react-esbuild-starter",
+  "name": "@tldraw/dev",
-  "version": "2.1.0",
+  "version": "0.0.41",
-  "private": true,
+  "private": false,
-  "description": "Starter template for React + Typescript, powered by Esbuild",
+  "description": "A tiny little drawing app (core).",
-  "repository": "https://github.com/belaczek/react-esbuild-starter.git",
+  "author": "@steveruizok",
-  "author": "Tomas Belada <tomas@belada.net>",
   "license": "MIT",
   "keywords": [
     "react",

packages/tldraw/package.json

@@ -17,6 +17,7 @@
   ],
   "main": "./dist/cjs/index.js",
   "types": "./dist/types/index.d.ts",
+  "typings": "./dist/types/index.d.ts",
   "scripts": {
     "dev": "node scripts/dev & tsc --watch --incremental --emitDeclarationOnly --outDir dist/types",
     "build": "yarn clean && node scripts/build && tsc --emitDeclarationOnly --outDir dist/types",

packages/tldraw/src/shape/shape-types.ts

@@ -1,4 +1,4 @@
-import type { TLBinding } from './../../../core/src/types'
+import type { TLBinding } from '@tldraw/core'
 import { TLShape, TLShapeUtil, TLHandle } from '@tldraw/core'
 
 export enum TLDrawToolType {

packages/tldraw/src/state/command/flip/flip.command.ts

@@ -1,4 +1,4 @@
-import { FlipType } from './../../../types'
+import { FlipType } from '../../../types'
 import { TLBoundsCorner, Utils } from '@tldraw/core'
 import type { Data, Command } from '../../state-types'
 import { TLDR } from '../../tldr'

packages/tldraw/src/state/command/toggle/toggle.command.spec.ts

@@ -1,4 +1,4 @@
-import type { RectangleShape } from './../../../shape/shape-types'
+import type { RectangleShape } from '../../../shape/shape-types'
 import { TLDrawState } from '../../tlstate'
 import { mockDocument } from '../../test-helpers'
 
@@ -27,33 +27,17 @@ describe('Toggle command', () => {
   it('toggles on before off when mixed values', () => {
     tlstate.loadDocument(mockDocument)
     tlstate.setSelectedIds(['rect2'])
-    expect(tlstate.getShape<RectangleShape>('rect1').isAspectRatioLocked).toBe(
+    expect(tlstate.getShape<RectangleShape>('rect1').isAspectRatioLocked).toBe(undefined)
-      undefined
+    expect(tlstate.getShape<RectangleShape>('rect2').isAspectRatioLocked).toBe(undefined)
-    )
-    expect(tlstate.getShape<RectangleShape>('rect2').isAspectRatioLocked).toBe(
-      undefined
-    )
     tlstate.toggleAspectRatioLocked()
-    expect(tlstate.getShape<RectangleShape>('rect1').isAspectRatioLocked).toBe(
+    expect(tlstate.getShape<RectangleShape>('rect1').isAspectRatioLocked).toBe(undefined)
-      undefined
+    expect(tlstate.getShape<RectangleShape>('rect2').isAspectRatioLocked).toBe(true)
-    )
-    expect(tlstate.getShape<RectangleShape>('rect2').isAspectRatioLocked).toBe(
-      true
-    )
     tlstate.selectAll()
     tlstate.toggleAspectRatioLocked()
-    expect(tlstate.getShape<RectangleShape>('rect1').isAspectRatioLocked).toBe(
+    expect(tlstate.getShape<RectangleShape>('rect1').isAspectRatioLocked).toBe(true)
-      true
+    expect(tlstate.getShape<RectangleShape>('rect1').isAspectRatioLocked).toBe(true)
-    )
-    expect(tlstate.getShape<RectangleShape>('rect1').isAspectRatioLocked).toBe(
-      true
-    )
     tlstate.toggleAspectRatioLocked()
-    expect(tlstate.getShape<RectangleShape>('rect1').isAspectRatioLocked).toBe(
+    expect(tlstate.getShape<RectangleShape>('rect1').isAspectRatioLocked).toBe(false)
-      false
+    expect(tlstate.getShape<RectangleShape>('rect1').isAspectRatioLocked).toBe(false)
-    )
-    expect(tlstate.getShape<RectangleShape>('rect1').isAspectRatioLocked).toBe(
-      false
-    )
   })
 })

packages/tldraw/src/state/session/sessions/handle/handle.session.ts

@@ -1,4 +1,3 @@
-import { ArrowBinding } from './../../../../shape/shape-types'
 import { Vec } from '@tldraw/core'
 import type { TLDrawShape } from '../../../../shape'
 import type { Session } from '../../../state-types'

packages/tldraw/src/state/session/sessions/translate/translate.session.ts

@@ -1,5 +1,5 @@
 import { Utils, Vec } from '@tldraw/core'
-import type { TLBinding } from 'packages/core/src/types'
+import type { TLBinding } from '@tldraw/core'
 import type { TLDrawShape } from '../../../../shape'
 import type { Session } from '../../../state-types'
 import type { Data } from '../../../state-types'

packages/tldraw/tsconfig.json

@@ -3,12 +3,10 @@
   "include": ["src"],
   "exclude": ["node_modules", "**/*.test.ts", "dist"],
   "compilerOptions": {
+    "rootDir": "src",
     "jsx": "preserve",
     "lib": ["dom", "esnext"],
     "module": "esnext",
-    "outDir": "./dist/types",
+    "outDir": "./dist/types"
-    "paths": {
-      "@tldraw/core": ["packages/core/dist"]
-    }
   }
 }

packages/www/next-env.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

packages/www/package.json

@@ -36,4 +36,4 @@
     "eslint-config-next": "11.0.1",
     "typescript": "^4.3.5"
   }
-}
+}

packages/www/pages/_app.tsx

@@ -1,4 +1,4 @@
-import { AppProps } from 'next/app'
+import type { AppProps } from 'next/app'
 import useGtag from '../hooks/useGtag'
 import Head from 'next/head'
 import './styles.css'

packages/www/pages/r/[id].tsx

@@ -1,4 +1,4 @@
-import { GetServerSideProps } from 'next'
+import type { GetServerSideProps } from 'next'
 import * as React from 'react'
 
 export default function Room(): JSX.Element {

packages/www/tsconfig.json

@@ -15,7 +15,7 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "paths": {
-      "@tldraw/tldraw": ["../tldraw"]
+      "@tldraw/tldraw": ["packages/tldraw/dist"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],

tsconfig.json

@@ -29,7 +29,8 @@
     "typeRoots": ["node_modules/@types", "node_modules/jest"],
     "types": ["node", "jest"],
     "paths": {
-      "@tldraw/*": ["./packages/*"]
+      "@tldraw/tldraw": ["./packages/tldraw/dist"],
+      "@tldraw/core": ["./packages/core/dist"]
     }
   }
 }