[pull] main from tldraw:main

.oxlintrc.json

@@ -261,7 +261,6 @@
 		{
 			"files": ["packages/editor/**/*", "packages/tldraw/**/*", "packages/utils/**/*"],
 			"rules": {
-				"tldraw/no-exported-arrow-const": "off",
 				"no-restricted-globals": [
 					"error",
 					{
@@ -417,7 +416,6 @@
 			"rules": {
 				"tldraw/no-setter-getter": "off",
 				"tldraw/no-direct-storage": "off",
-				"tldraw/no-exported-arrow-const": "off",
 				"tldraw/img-referrer-policy": "off"
 			}
 		},
@@ -427,7 +425,6 @@
 				"tldraw/prefer-class-methods": "off",
 				"tldraw/no-setter-getter": "off",
 				"tldraw/no-direct-storage": "off",
-				"tldraw/no-exported-arrow-const": "off",
 				"tldraw/img-referrer-policy": "off",
 				"no-console": "off",
 				"tldraw/method-signature-style": "off"

apps/examples/src/examples/events/derived-view/DerivedViewExample.tsx

@@ -31,7 +31,7 @@ function ShowNumberOfDrawShapesOnPage() {
 	)
 }
 
-export const deriveNumberOfDrawShapesInDocument = (editor: Editor) => {
+export function deriveNumberOfDrawShapesInDocument(editor: Editor) {
 	const { store } = editor
 	const shapesIndex = store.query.ids('shape')
 

apps/examples/src/examples/shapes/tools/globs-editor/GlobShapeUtil.tsx

@@ -981,7 +981,7 @@ const getHandleData = (id: string) => {
 	return { edgeType, point }
 }
 
-export const getNeighborGlobs = (editor: Editor, shape: GlobShape) => {
+export function getNeighborGlobs(editor: Editor, shape: GlobShape) {
 	const currentGlobBindings = editor.getBindingsFromShape<GlobBinding>(shape.id, 'glob')
 
 	const neighborGlobs: Set<GlobShape> = new Set()

apps/examples/src/examples/shapes/tools/globs-editor/shared.ts

@@ -4,7 +4,7 @@ import { GlobShape } from './GlobShapeUtil'
 import { NodeShape } from './NodeShapeUtil'
 import { getOuterTangentPoints } from './utils'
 
-export const getStartAndEndNodes = (editor: Editor, glob: TLShapeId) => {
+export function getStartAndEndNodes(editor: Editor, glob: TLShapeId) {
 	const bindings = editor.getBindingsFromShape<GlobBinding>(glob, 'glob')
 	if (!bindings.length) return null
 
@@ -35,14 +35,14 @@ export function getGlobBindings(editor: Editor, shape: GlobShape): GlobBindings
 	return { start, end }
 }
 
-export const getGlobTangentUpdate = (
+export function getGlobTangentUpdate(
 	editor: Editor,
 	globId: TLShapeId,
 	startNodePagePos: VecLike,
 	startRadius: number,
 	endNodePagePos: VecLike,
 	endRadius: number
-) => {
+) {
 	// Calculate midpoint in page space
 	const midPagePos = Vec.Average([startNodePagePos, endNodePagePos])
 

apps/examples/src/examples/shapes/tools/globs-editor/utils.ts

@@ -1,12 +1,12 @@
 import { Vec, VecLike, VecModel } from 'tldraw'
 
-export const getOuterTangentPoints = (
+export function getOuterTangentPoints(
 	c0: VecLike,
 	r0: number,
 	c1: VecLike,
 	r1: number,
 	side?: 'edgeA' | 'edgeB'
-): VecModel[] => {
+): VecModel[] {
 	const offsetAngle = Vec.Angle(c0, c1)
 	const d = Vec.Dist(c0, c1)
 
@@ -43,7 +43,7 @@ export const getOuterTangentPoints = (
 	]
 }
 
-export const getGlobEndPoint = (c: VecModel, d: VecModel, r: number, side: number = 0) => {
+export function getGlobEndPoint(c: VecModel, d: VecModel, r: number, side: number = 0) {
 	const angle = Vec.Angle(c, d)
 
 	const displacement = Vec.Sub(c, d)
@@ -62,7 +62,7 @@ export const getGlobEndPoint = (c: VecModel, d: VecModel, r: number, side: numbe
 	return p
 }
 
-export const getArcFlag = (c: VecModel, e0: VecModel, e1: VecModel) => {
+export function getArcFlag(c: VecModel, e0: VecModel, e1: VecModel) {
 	const d0 = Vec.Angle(c, e0)
 	const d1 = Vec.Angle(c, e1)
 
@@ -73,7 +73,7 @@ export const getArcFlag = (c: VecModel, e0: VecModel, e1: VecModel) => {
 	return theta > 0 ? false : true
 }
 
-export const projectTensionPoint = (lineStart: VecModel, lineEnd: VecModel, handle: VecModel) => {
+export function projectTensionPoint(lineStart: VecModel, lineEnd: VecModel, handle: VecModel) {
 	const lineDir = Vec.Sub(lineEnd, lineStart)
 	const lineLength = lineDir.len()
 
@@ -84,12 +84,12 @@ export const projectTensionPoint = (lineStart: VecModel, lineEnd: VecModel, hand
 	return clampedProjection / lineLength
 }
 
-export const circleCentresOverlap = (c0: VecModel, r0: number, c1: VecModel) => {
+export function circleCentresOverlap(c0: VecModel, r0: number, c1: VecModel) {
 	const d = Vec.Dist(c0, c1)
 	return d <= r0
 }
 
-export const getClosestPointOnCircle = (c: VecModel, r: number, p: VecModel) => {
+export function getClosestPointOnCircle(c: VecModel, r: number, p: VecModel) {
 	const pDirection = Vec.Sub(p, c).uni()
 
 	return Vec.Add(c, Vec.Mul(pDirection, r + 1)).toJson()

apps/examples/src/examples/shapes/tools/speech-bubble/SpeechBubble/helpers.tsx

@@ -1,7 +1,7 @@
 import { Vec, VecLike, lerp, pointInPolygon } from 'tldraw'
 import { SpeechBubbleShape } from './SpeechBubbleUtil'
 
-export const getSpeechBubbleVertices = (shape: SpeechBubbleShape): Vec[] => {
+export function getSpeechBubbleVertices(shape: SpeechBubbleShape): Vec[] {
 	const { w, tail } = shape.props
 
 	const fullHeight = shape.props.h + shape.props.growY

apps/examples/src/examples/use-cases/custom-shape-mermaids/mermaidPipelineBlueprint.ts

@@ -2,7 +2,7 @@ import type { MermaidNodeRenderMapper } from '@tldraw/mermaid'
 import { CUSTOM_SHAPE_TYPE } from './customMermaidShapeUtil'
 
 /** Pass to `createMermaidDiagram` → `blueprintRender.mapNodeToRenderSpec`: custom `flowchart-util` + `mermaidNodeId` (layer badges applied after import via `applyPipelineStepIndices`). */
-export const mapNodeToRenderSpec: MermaidNodeRenderMapper = (input) => {
+export const mapNodeToRenderSpec: MermaidNodeRenderMapper = function mapNodeToRenderSpec(input) {
 	if (input.diagramKind !== 'flowchart') return undefined
 
 	return {

apps/examples/src/examples/use-cases/slideshow/SlidesManager.tsx

@@ -90,7 +90,7 @@ class SlidesManager {
 
 const slidesContext = createContext({} as SlidesManager)
 
-export const SlidesProvider = ({ children }: { children: ReactNode }) => {
+export function SlidesProvider({ children }: { children: ReactNode }) {
 	const [slideManager] = useState(() => new SlidesManager())
 	return <slidesContext.Provider value={slideManager}>{children}</slidesContext.Provider>
 }

apps/examples/src/examples/use-cases/tower-defense/game-state.ts

@@ -60,11 +60,17 @@ export const elapsedMs$ = atom('elapsedMs', 0)
 export const towerCooldowns = new Map<string, TowerCooldown>()
 
 let _nextEnemyId = 1
-export const nextEnemyId = () => _nextEnemyId++
+export function nextEnemyId() {
+	return _nextEnemyId++
+}
 let _nextProjId = 1
-export const nextProjectileId = () => _nextProjId++
+export function nextProjectileId() {
+	return _nextProjId++
+}
 let _nextExplosionId = 1
-export const nextExplosionId = () => _nextExplosionId++
+export function nextExplosionId() {
+	return _nextExplosionId++
+}
 
 export function resetGameState() {
 	enemies$.set([])

packages/editor/api-report.api.md

@@ -712,7 +712,7 @@ export const DefaultShapeWrapper: ForwardRefExoticComponent<TLShapeWrapperProps
 export function DefaultSpinner(props: React.SVGProps<SVGSVGElement>): JSX.Element;
 
 // @public (undocumented)
-export const DefaultSvgDefs: () => null;
+export function DefaultSvgDefs(): null;
 
 // @public (undocumented)
 export const defaultTldrawOptions: {
@@ -2353,7 +2353,7 @@ export function isAccelKey(e: {
 }): boolean;
 
 // @public
-export const isSafeFloat: (n: number) => boolean;
+export function isSafeFloat(n: number): boolean;
 
 // @public
 export function kickoutOccludedShapes(editor: Editor, shapeIds: TLShapeId[], opts?: {
@@ -3286,7 +3286,7 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 }
 
 // @public @deprecated
-export const stopEventPropagation: (e: any) => any;
+export function stopEventPropagation(e: any): any;
 
 // @internal (undocumented)
 export type StoreName = (typeof Table)[keyof typeof Table];

packages/editor/src/lib/components/default-components/DefaultErrorFallback.tsx

@@ -16,7 +16,10 @@ const BASE_ERROR_URL = 'https://github.com/tldraw/tldraw/issues/new'
 export type TLErrorFallbackComponent = ComponentType<{ error: unknown; editor?: Editor }>
 
 /** @public @react */
-export const DefaultErrorFallback: TLErrorFallbackComponent = ({ error, editor }) => {
+export const DefaultErrorFallback: TLErrorFallbackComponent = function DefaultErrorFallback({
+	error,
+	editor,
+}) {
 	const containerRef = useRef<HTMLDivElement>(null)
 	const [shouldShowError, setShouldShowError] = useState(process.env.NODE_ENV === 'development')
 	const [didCopy, setDidCopy] = useState(false)

packages/editor/src/lib/components/default-components/DefaultLoadingScreen.tsx

@@ -1,7 +1,7 @@
 import { useEditorComponents } from '../../hooks/EditorComponentsContext'
 
 /** @public @react */
-export const DefaultLoadingScreen = () => {
+export function DefaultLoadingScreen() {
 	const { Spinner } = useEditorComponents()
 	return (
 		<div className="tl-loading" aria-busy="true" tabIndex={0}>

packages/editor/src/lib/components/default-components/DefaultShapeErrorFallback.tsx

@@ -4,6 +4,7 @@ import { ComponentType } from 'react'
 export type TLShapeErrorFallbackComponent = ComponentType<{ error: any }>
 
 /** @internal */
-export const DefaultShapeErrorFallback: TLShapeErrorFallbackComponent = () => {
-	return <div className="tl-shape-error-boundary" />
-}
+export const DefaultShapeErrorFallback: TLShapeErrorFallbackComponent =
+	function DefaultShapeErrorFallback() {
+		return <div className="tl-shape-error-boundary" />
+	}

packages/editor/src/lib/components/default-components/DefaultSvgDefs.tsx

@@ -1,4 +1,4 @@
 /** @public @react */
-export const DefaultSvgDefs = () => {
+export function DefaultSvgDefs() {
 	return null
 }

packages/editor/src/lib/editor/derivations/bindingsIndex.ts

@@ -29,7 +29,7 @@ function fromScratch(bindingsQuery: Computed<TLBinding[], unknown>) {
 	return shapesToBindings
 }
 
-export const bindingsIndex = (editor: Editor): Computed<TLBindingsIndex> => {
+export function bindingsIndex(editor: Editor): Computed<TLBindingsIndex> {
 	const { store } = editor
 	const bindingsHistory = store.query.filterHistory('binding')
 	const bindingsQuery = store.query.records('binding')

packages/editor/src/lib/editor/derivations/parentsToChildren.ts

@@ -22,7 +22,7 @@ function fromScratch(
 	return result
 }
 
-export const parentsToChildren = (store: TLStore) => {
+export function parentsToChildren(store: TLStore) {
 	const shapeIdsQuery = store.query.ids<'shape'>('shape')
 	const shapeHistory = store.query.filterHistory('shape')
 

packages/editor/src/lib/editor/derivations/shapeIdsInCurrentPage.ts

@@ -33,7 +33,7 @@ const isShapeInPage = (store: TLStore, pageId: TLPageId, shape: TLShape): boolea
  * @param store - The tldraw store.
  * @param getCurrentPageId - A function that returns the current page id.
  */
-export const deriveShapeIdsInCurrentPage = (store: TLStore, getCurrentPageId: () => TLPageId) => {
+export function deriveShapeIdsInCurrentPage(store: TLStore, getCurrentPageId: () => TLPageId) {
 	const shapesIndex = store.query.ids('shape')
 	let lastPageId: null | TLPageId = null
 	function fromScratch() {

packages/editor/src/lib/license/LicenseProvider.tsx

@@ -6,7 +6,9 @@ import { LicenseManager } from './LicenseManager'
 export const LicenseContext = createContext({} as LicenseManager)
 
 /** @internal */
-export const useLicenseContext = () => useContext(LicenseContext)
+export function useLicenseContext() {
+	return useContext(LicenseContext)
+}
 
 function shouldHideEditorAfterDelay(licenseState: string): boolean {
 	return licenseState === 'expired' || licenseState === 'unlicensed-production'

packages/editor/src/lib/primitives/utils.ts

@@ -363,7 +363,7 @@ export function toFixed(v: number) {
  * Check if a float is safe to use. ie: Not too big or small.
  * @public
  */
-export const isSafeFloat = (n: number) => {
+export function isSafeFloat(n: number) {
 	return Math.abs(n) < Number.MAX_SAFE_INTEGER
 }
 

packages/editor/src/lib/utils/dom.ts

@@ -86,14 +86,16 @@ export function releasePointerCapture(
  *
  * @public
  */
-export const stopEventPropagation = (e: any) => e.stopPropagation()
+export function stopEventPropagation(e: any) {
+	return e.stopPropagation()
+}
 
 /** @internal */
-export const setStyleProperty = (
+export function setStyleProperty(
 	elm: HTMLElement | null,
 	property: string,
 	value: string | number
-) => {
+) {
 	if (!elm) return
 	elm.style.setProperty(property, String(value))
 }

packages/tldraw/api-report.api.md

@@ -2397,7 +2397,7 @@ export function GroupMenuItem(): JSX.Element | null;
 export function GroupOrUngroupMenuItem(): JSX.Element;
 
 // @public
-export const handleNativeOrMenuCopy: (editor: Editor, context?: TLClipboardWriteInfo) => Promise<boolean>;
+export function handleNativeOrMenuCopy(editor: Editor, context?: TLClipboardWriteInfo): Promise<boolean>;
 
 // @public (undocumented)
 export class HandTool extends StateNode {
@@ -4172,7 +4172,7 @@ export function TldrawUiComponentsProvider({ overrides, children }: TLUiComponen
 export const TldrawUiContextProvider: NamedExoticComponent<TLUiContextProviderProps>;
 
 // @public
-export const TldrawUiContextualToolbar: ({ children, className, isMousingDown, getSelectionBounds, changeOnlyWhenYChanges, label, }: TLUiContextualToolbarProps) => JSX.Element;
+export function TldrawUiContextualToolbar({ children, className, isMousingDown, getSelectionBounds, changeOnlyWhenYChanges, label }: TLUiContextualToolbarProps): JSX.Element;
 
 // @public (undocumented)
 export function TldrawUiDialogBody({ className, children, style }: TLUiDialogBodyProps): JSX.Element;
@@ -4334,10 +4334,10 @@ export const TldrawUiToolbar: React_3.ForwardRefExoticComponent<TLUiToolbarProps
 export const TldrawUiToolbarButton: React_3.ForwardRefExoticComponent<TLUiToolbarButtonProps & React_3.RefAttributes<HTMLButtonElement>>;
 
 // @public (undocumented)
-export const TldrawUiToolbarToggleGroup: ({ children, className, type, asChild, ...props }: TLUiToolbarToggleGroupProps) => JSX.Element;
+export function TldrawUiToolbarToggleGroup({ children, className, type, asChild, ...props }: TLUiToolbarToggleGroupProps): JSX.Element;
 
 // @public (undocumented)
-export const TldrawUiToolbarToggleItem: ({ children, className, type, value, tooltip, ...props }: TLUiToolbarToggleItemProps) => JSX.Element;
+export function TldrawUiToolbarToggleItem({ children, className, type, value, tooltip, ...props }: TLUiToolbarToggleItemProps): JSX.Element;
 
 // @public (undocumented)
 export const TldrawUiTooltip: React_3.ForwardRefExoticComponent<TldrawUiTooltipProps & React_3.RefAttributes<HTMLButtonElement>>;
@@ -6273,7 +6273,7 @@ export function TrapezoidToolbarItem(): JSX.Element;
 export function TriangleToolbarItem(): JSX.Element;
 
 // @public (undocumented)
-export const truncateStringWithEllipsis: (str: string, maxLength: number) => string;
+export function truncateStringWithEllipsis(str: string, maxLength: number): string;
 
 // @public (undocumented)
 export function UndoRedoGroup(): JSX.Element;
@@ -6472,7 +6472,7 @@ export function useReadonly(): boolean;
 export function useRelevantStyles(stylesToCheck?: readonly StyleProp<any>[]): null | ReadonlySharedStyleMap;
 
 // @public (undocumented)
-export const useSelectedShapesAnnouncer: () => void;
+export function useSelectedShapesAnnouncer(): void;
 
 // @public (undocumented)
 export function useShowCollaborationUi(): boolean;

packages/tldraw/src/lib/shapes/bookmark/bookmarks.ts

@@ -40,7 +40,7 @@ export function setBookmarkHeight(editor: Editor, shape: TLBookmarkShape) {
 }
 
 /** @internal */
-export const getHumanReadableAddress = (url: string) => {
+export function getHumanReadableAddress(url: string) {
 	try {
 		const objUrl = new URL(url)
 		// we want the hostname without any www

packages/tldraw/src/lib/shapes/shared/interpolate-props.ts

@@ -1,11 +1,11 @@
 import { TLDrawShapeSegment, VecModel, b64Vecs, lerp } from '@tldraw/editor'
 
 /** @public */
-export const interpolateSegments = (
+export function interpolateSegments(
 	startSegments: TLDrawShapeSegment[],
 	endSegments: TLDrawShapeSegment[],
 	progress: number
-): TLDrawShapeSegment[] => {
+): TLDrawShapeSegment[] {
 	const startPoints: VecModel[] = []
 	const endPoints: VecModel[] = []
 

packages/tldraw/src/lib/shapes/shared/useEditablePlainText.ts

@@ -3,7 +3,6 @@ import {
 	ExtractShapeByProps,
 	TLShapeId,
 	getPointerInfo,
-	noop,
 	preventDefault,
 	tlenv,
 	useEditor,
@@ -167,8 +166,8 @@ export function useEditableTextCommon(shapeId: TLShapeId) {
 	)
 
 	return {
-		handleFocus: noop,
-		handleBlur: noop,
+		handleFocus: (): void => {},
+		handleBlur: (): void => {},
 		handleInputPointerDown,
 		handleDoubleClick: editor.markEventAsHandled,
 		handlePaste,