Chore: clean up sort imports with prettier (#870)

* Update prettier to latest

* Add format command

* Create .prettierignore

* Add prettier plugin sort imports

* Update prettier config

* Update prettier config

* Update .prettierignore

* Fix @babel/parser conflict

https://github.com/trivago/prettier-plugin-sort-imports/issues/156

* Revert "Update .prettierignore"

This reverts commit 282e5b838376f16b3df7f4c1f99f1106baaffea4.

* Revert change for apps/www/pages/v/[id].tsx

* Sort imports

Moves the third party imports to the top, "~" imports in middle, and "./" at last

* Sorting of the specifiers

in an import declarations

* [www] use path vs  "../"

* [core] use path "~" vs "../"

* [tldraw] use path "~" vs "../.../"

* [tldraw] use path "~" vs "../"

* [tldraw] Cleanup

* Update prettier config

* Last use path "~" vs "../.../"

* [www] Fix order of the third party imports

* Clean prettier config

.prettierignore

@@ -0,0 +1,17 @@
+assets
+**/assets
+**/dist
+**/extension/editor
+**/out
+**/public
+
+.DS_Store
+.next
+.tldr
+.turbo
+.vercel
+.vsix
+
+*.lock
+*.log
+*.yaml

.prettierrc

@@ -2,5 +2,8 @@
   "trailingComma": "es5",
   "singleQuote": true,
   "semi": false,
-  "printWidth": 100
+  "printWidth": 100,
+  "importOrder": ["^[~]", "^[./]"],
+  "importOrderSortSpecifiers": true,
+  "importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy"]
 }

apps/electron/src/main/createMenu.ts

@@ -1,4 +1,4 @@
-import { shell, Menu, MenuItemConstructorOptions } from 'electron'
+import { Menu, MenuItemConstructorOptions, shell } from 'electron'
 import type { Message } from 'src/types'
 
 export async function createMenu(send: (message: Message) => Promise<void>) {

apps/electron/src/main/createWindow.ts

@@ -1,6 +1,6 @@
-import path from 'path'
 import { BrowserWindow } from 'electron'
 import { is } from 'electron-util'
+import path from 'path'
 
 export async function createWindow() {
   let win: BrowserWindow | null = null

apps/electron/src/main/main.ts

@@ -1,4 +1,4 @@
-import { app, BrowserWindow } from 'electron'
+import { BrowserWindow, app } from 'electron'
 import { is } from 'electron-util'
 import type { Message } from 'src/types'
 import { createMenu } from './createMenu'

apps/electron/src/renderer/app.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
 import { Tldraw, TldrawApp } from '@tldraw/tldraw'
+import * as React from 'react'
 import type { Message, TldrawBridgeApi } from 'src/types'
 
 declare const window: Window & { TldrawBridgeApi: TldrawBridgeApi }

apps/new-tab-extension/src/App.tsx

@@ -1,6 +1,6 @@
 import { Tldraw, TldrawApp, TldrawProps, useFileSystem } from '@tldraw/tldraw'
-import { useUploadAssets } from './hooks/useUploadAssets'
 import * as React from 'react'
+import { useUploadAssets } from './hooks/useUploadAssets'
 
 declare const window: Window & { app: TldrawApp }
 

apps/new-tab-extension/vite.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({

apps/vscode/editor/scripts/build.mjs

@@ -1,6 +1,6 @@
 /* eslint-disable */
-import fs from 'fs'
 import esbuild from 'esbuild'
+import fs from 'fs'
 import { createRequire } from 'module'
 import path from 'path'
 

apps/vscode/editor/scripts/dev.mjs

@@ -1,7 +1,7 @@
 /* eslint-disable no-undef */
-import fs from 'fs'
-import esbuildServe from 'esbuild-serve'
 import dotenv from 'dotenv'
+import esbuildServe from 'esbuild-serve'
+import fs from 'fs'
 import path from 'path'
 
 dotenv.config()

apps/vscode/extension/src/TldrawWebviewManager.ts

@@ -1,6 +1,6 @@
-import * as vscode from 'vscode'
 import { TDFile } from '@tldraw/tldraw'
-import { MessageFromWebview, MessageFromExtension } from './types'
+import * as vscode from 'vscode'
+import { MessageFromExtension, MessageFromWebview } from './types'
 
 /**
  * When a new editor is opened, an instance of this class will

apps/www/components/Editor.tsx

@@ -1,7 +1,7 @@
 import { Tldraw, TldrawApp, TldrawProps, useFileSystem } from '@tldraw/tldraw'
-import { useUploadAssets } from 'hooks/useUploadAssets'
 import * as React from 'react'
-import * as gtag from 'utils/gtag'
+import { useUploadAssets } from '~hooks/useUploadAssets'
+import * as gtag from '~utils/gtag'
 
 declare const window: Window & { app: TldrawApp }
 

apps/www/components/IFrameWarning.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { styled } from 'styles'
+import { styled } from '~styles'
 
 export default function IFrameWarning({ url = 'https://tldraw.com' }: { url?: string }) {
   const [copied, setCopied] = React.useState(false)

apps/www/components/MultiplayerEditor.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react'
-import { RoomProvider } from '../utils/liveblocks'
 import { Tldraw, useFileSystem } from '@tldraw/tldraw'
-import { useMultiplayerAssets } from 'hooks/useMultiplayerAssets'
+import * as React from 'react'
-import { useMultiplayerState } from 'hooks/useMultiplayerState'
+import { useMultiplayerAssets } from '~hooks/useMultiplayerAssets'
-import { useUploadAssets } from 'hooks/useUploadAssets'
+import { useMultiplayerState } from '~hooks/useMultiplayerState'
-import { styled } from 'styles'
+import { useUploadAssets } from '~hooks/useUploadAssets'
+import { styled } from '~styles'
+import { RoomProvider } from '~utils/liveblocks'
 
 interface Props {
   roomId: string

apps/www/components/ReadOnlyMultiplayerEditor.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react'
-import { RoomProvider } from '../utils/liveblocks'
 import { Tldraw, useFileSystem } from '@tldraw/tldraw'
-import { styled } from 'styles'
+import * as React from 'react'
-import { useReadOnlyMultiplayerState } from 'hooks/useReadOnlyMultiplayerState'
+import { useReadOnlyMultiplayerState } from '~hooks/useReadOnlyMultiplayerState'
+import { styled } from '~styles'
+import { RoomProvider } from '~utils/liveblocks'
 
 interface Props {
   roomId: string

apps/www/hooks/useMultiplayerState.ts

@@ -1,10 +1,8 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import React, { useState, useRef, useCallback } from 'react'
-import type { TldrawApp, TDUser, TDShape, TDBinding, TDAsset } from '@tldraw/tldraw'
-import { Storage, useRedo, useUndo, useRoom, useUpdateMyPresence } from '../utils/liveblocks'
-import { useHotkeys } from 'react-hotkeys-hook'
 import { LiveMap } from '@liveblocks/client'
+import type { TDAsset, TDBinding, TDShape, TDUser, TldrawApp } from '@tldraw/tldraw'
+import React, { useCallback, useRef, useState } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
+import { Storage, useRedo, useRoom, useUndo, useUpdateMyPresence } from '~utils/liveblocks'
 
 declare const window: Window & { app: TldrawApp }
 

apps/www/hooks/useReadOnlyMultiplayerState.ts

@@ -1,10 +1,8 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import React, { useState, useRef, useCallback } from 'react'
-import type { TldrawApp, TDUser, TDShape, TDBinding, TDAsset } from '@tldraw/tldraw'
-import { Storage, useRedo, useUndo, useRoom, useUpdateMyPresence } from '../utils/liveblocks'
-import { useHotkeys } from 'react-hotkeys-hook'
 import { LiveMap } from '@liveblocks/client'
+import type { TDAsset, TDBinding, TDShape, TDUser, TldrawApp } from '@tldraw/tldraw'
+import React, { useCallback, useRef, useState } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
+import { Storage, useRedo, useRoom, useUndo, useUpdateMyPresence } from '~utils/liveblocks'
 
 declare const window: Window & { app: TldrawApp }
 

apps/www/pages/_app.tsx

@@ -1,8 +1,8 @@
-import '../styles/globals.css'
 import Head from 'next/head'
-import useGtag from 'utils/useGtag'
-import { init } from 'utils/sentry'
 import type React from 'react'
+import '~styles/globals.css'
+import { init } from '~utils/sentry'
+import useGtag from '~utils/useGtag'
 
 init()
 

apps/www/pages/_document.tsx

@@ -1,6 +1,6 @@
-import NextDocument, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
+import NextDocument, { DocumentContext, Head, Html, Main, NextScript } from 'next/document'
-import { getCssText } from 'styles'
+import { getCssText } from '~styles'
-import { GA_TRACKING_ID } from 'utils/gtag'
+import { GA_TRACKING_ID } from '~utils/gtag'
 
 class MyDocument extends NextDocument {
   static async getInitialProps(ctx: DocumentContext): Promise<any> {

apps/www/pages/api/create.ts

@@ -1,6 +1,6 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import { TDDocument } from '@tldraw/tldraw'
 import { Utils } from '@tldraw/core'
+import { TDDocument } from '@tldraw/tldraw'
+import { NextApiRequest, NextApiResponse } from 'next'
 
 type RequestBody = {
   pageId: string

apps/www/pages/index.tsx

@@ -3,7 +3,7 @@ import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { useMemo } from 'react'
 
-const Editor = dynamic(() => import('components/Editor'), { ssr: false }) as any
+const Editor = dynamic(() => import('~components/Editor'), { ssr: false }) as any
 
 const Home = () => {
   const { query } = useRouter()

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

@@ -1,12 +1,12 @@
-import * as React from 'react'
 import type { GetServerSideProps } from 'next'
 import dynamic from 'next/dynamic'
+import * as React from 'react'
 
-const IFrameWarning = dynamic(() => import('components/IFrameWarning'), {
+const IFrameWarning = dynamic(() => import('~components/IFrameWarning'), {
   ssr: false,
 }) as any
 
-const MultiplayerEditor = dynamic(() => import('components/MultiplayerEditor'), {
+const MultiplayerEditor = dynamic(() => import('~components/MultiplayerEditor'), {
   ssr: false,
 }) as any
 

apps/www/pages/r/index.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
 import type { GetServerSideProps } from 'next'
 import Head from 'next/head'
+import * as React from 'react'
 
 export default function RandomRoomPage() {
   return (

apps/www/pages/v/[id].tsx

@@ -1,13 +1,13 @@
-import * as React from 'react'
+import { Utils } from '@tldraw/core'
 import type { GetServerSideProps } from 'next'
 import dynamic from 'next/dynamic'
-import { Utils } from '@tldraw/core'
+import * as React from 'react'
 
-const IFrameWarning = dynamic(() => import('components/IFrameWarning'), {
+const IFrameWarning = dynamic(() => import('~components/IFrameWarning'), {
   ssr: false,
 }) as any
 
-const ReadOnlyMultiplayerEditor = dynamic(() => import('components/ReadOnlyMultiplayerEditor'), {
+const ReadOnlyMultiplayerEditor = dynamic(() => import('~components/ReadOnlyMultiplayerEditor'), {
   ssr: false,
 }) as any
 

apps/www/tsconfig.json

@@ -19,7 +19,7 @@
     "rootDir": ".",
     "baseUrl": ".",
     "paths": {
-      "*": ["./*"],
+      "~*": ["./*"],
       "@tldraw/core": ["../../packages/core"],
       "@tldraw/tldraw": ["../../packages/tldraw"]
     }

apps/www/utils/liveblocks.ts

@@ -1,7 +1,7 @@
 import { createClient } from '@liveblocks/client'
 import type { EnsureJson, LiveMap, LiveObject } from '@liveblocks/client'
 import { createRoomContext } from '@liveblocks/react'
-import type { TDUser, TDShape, TDBinding, TDDocument, TDAsset } from '@tldraw/tldraw'
+import type { TDAsset, TDBinding, TDDocument, TDShape, TDUser } from '@tldraw/tldraw'
 
 const client = createClient({
   publicApiKey: process.env.NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_API_KEY || '',

apps/www/utils/sentry.ts

@@ -1,5 +1,5 @@
-import * as Sentry from '@sentry/node'
 import { RewriteFrames } from '@sentry/integrations'
+import * as Sentry from '@sentry/node'
 
 export function init(): void {
   if (!process.env.NEXT_PUBLIC_SENTRY_DSN) return

apps/www/utils/useGtag.ts

@@ -1,7 +1,6 @@
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import router from 'next/router'
 import { useEffect } from 'react'
-import * as gtag from 'utils/gtag'
+import * as gtag from './gtag'
 
 function handleRouteChange(url: URL) {
   gtag.pageview(url)

examples/core-example-advanced/scripts/build.mjs

@@ -1,6 +1,6 @@
 /* eslint-disable */
-import fs from 'fs'
 import esbuild from 'esbuild'
+import fs from 'fs'
 import { createRequire } from 'module'
 
 const pkg = createRequire(import.meta.url)('../package.json')

examples/core-example-advanced/scripts/dev.mjs

@@ -1,6 +1,6 @@
 /* eslint-disable no-undef */
-import fs from 'fs'
 import esbuildServe from 'esbuild-serve'
+import fs from 'fs'
 
 const { log: jslog } = console
 

examples/core-example-advanced/src/app.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useStateDesigner } from '@state-designer/react'
 import {
   Renderer,
   TLBounds,
@@ -7,14 +7,14 @@ import {
   TLPointerEventHandler,
   TLWheelEventHandler,
 } from '@tldraw/core'
-import { useStateDesigner } from '@state-designer/react'
+import * as React from 'react'
+import { Api } from 'state/api'
+import styled from 'stitches.config'
+import { TitleLinks } from './components/TitleLinks'
+import { Toolbar } from './components/Toolbar'
 import { shapeUtils } from './shapes'
 import { machine } from './state/machine'
-import { Toolbar } from './components/Toolbar'
-import { TitleLinks } from './components/TitleLinks'
 import './styles.css'
-import styled from 'stitches.config'
-import { Api } from 'state/api'
 
 declare const window: Window & { api: Api }
 

examples/core-example-advanced/src/shapes/arrow/ArrowComponent.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react'
+import { SVGContainer, TLShapeUtil } from '@tldraw/core'
-import { TLShapeUtil, SVGContainer } from '@tldraw/core'
-import type { ArrowShape } from './ArrowShape'
 import Vec from '@tldraw/vec'
+import * as React from 'react'
+import type { ArrowShape } from './ArrowShape'
 
 export const ArrowComponent = TLShapeUtil.Component<ArrowShape, SVGSVGElement>(
   ({ shape, events, isGhost, meta }, ref) => {

examples/core-example-advanced/src/shapes/arrow/ArrowIndicator.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react'
 import { TLShapeUtil } from '@tldraw/core'
-import type { ArrowShape } from './ArrowShape'
 import Vec from '@tldraw/vec'
+import * as React from 'react'
+import type { ArrowShape } from './ArrowShape'
 
 export const ArrowIndicator = TLShapeUtil.Indicator<ArrowShape>(({ shape }) => {
   const { start, end } = shape.handles

examples/core-example-advanced/src/shapes/arrow/ArrowUtil.ts

@@ -1,4 +1,4 @@
-import { Utils, TLBounds } from '@tldraw/core'
+import { TLBounds, Utils } from '@tldraw/core'
 import { intersectBoundsLineSegment, intersectLineSegmentLineSegment } from '@tldraw/intersect'
 import Vec from '@tldraw/vec'
 import { nanoid } from 'nanoid'

examples/core-example-advanced/src/shapes/box/BoxComponent.tsx

@@ -1,5 +1,5 @@
+import { SVGContainer, TLShapeUtil } from '@tldraw/core'
 import * as React from 'react'
-import { TLShapeUtil, SVGContainer } from '@tldraw/core'
 import type { BoxShape } from './BoxShape'
 
 export const BoxComponent = TLShapeUtil.Component<BoxShape, SVGSVGElement>(

examples/core-example-advanced/src/shapes/box/BoxIndicator.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
 import { TLShapeUtil } from '@tldraw/core'
+import * as React from 'react'
 import type { BoxShape } from './BoxShape'
 
 export const BoxIndicator = TLShapeUtil.Indicator<BoxShape>(({ shape }) => {

examples/core-example-advanced/src/shapes/box/BoxUtil.ts

@@ -1,4 +1,4 @@
-import { Utils, TLBounds } from '@tldraw/core'
+import { TLBounds, Utils } from '@tldraw/core'
 import { intersectLineSegmentBounds } from '@tldraw/intersect'
 import { nanoid } from 'nanoid'
 import { CustomShapeUtil } from 'shapes/CustomShapeUtil'

examples/core-example-advanced/src/shapes/pencil/PencilComponent.tsx

@@ -1,5 +1,5 @@
+import { SVGContainer, TLShapeUtil } from '@tldraw/core'
 import * as React from 'react'
-import { TLShapeUtil, SVGContainer } from '@tldraw/core'
 import type { PencilShape } from './PencilShape'
 import { getComponentSvgPath } from './pencil-helpers'
 

examples/core-example-advanced/src/shapes/pencil/PencilUtil.ts

@@ -1,15 +1,15 @@
-import { Utils, TLBounds } from '@tldraw/core'
+import { TLBounds, Utils } from '@tldraw/core'
 import {
   intersectBoundsBounds,
   intersectBoundsPolyline,
   intersectLineSegmentPolyline,
 } from '@tldraw/intersect'
+import Vec from '@tldraw/vec'
 import { nanoid } from 'nanoid'
 import { CustomShapeUtil } from 'shapes/CustomShapeUtil'
 import { PencilComponent } from './PencilComponent'
-import { PencilIndicator } from './PenclIndicator'
 import type { PencilShape } from './PencilShape'
-import Vec from '@tldraw/vec'
+import { PencilIndicator } from './PenclIndicator'
 
 type T = PencilShape
 type E = SVGSVGElement

examples/core-example-advanced/src/shapes/pencil/PenclIndicator.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
 import { TLShapeUtil } from '@tldraw/core'
+import * as React from 'react'
 import type { PencilShape } from './PencilShape'
 import { getIndicatorSvgPath } from './pencil-helpers'
 

examples/core-example-advanced/src/state/actions/bindings/getBoundHandlePoint.ts

@@ -1,7 +1,7 @@
 import { Utils } from '@tldraw/core'
 import { intersectLineSegmentBounds } from '@tldraw/intersect'
 import Vec from '@tldraw/vec'
-import { getShapeUtils, Shape } from 'shapes'
+import { Shape, getShapeUtils } from 'shapes'
 import type { ArrowShape } from 'shapes/arrow'
 import { AppData, BINDING_PADDING } from 'state/constants'
 

examples/core-example-advanced/src/state/actions/camera/panCamera.ts

@@ -1,6 +1,6 @@
-import type { Action } from 'state/constants'
 import type { TLPointerInfo } from '@tldraw/core'
 import Vec from '@tldraw/vec'
+import type { Action } from 'state/constants'
 
 export const panCamera: Action = (data, payload: TLPointerInfo) => {
   const { point, zoom } = data.pageState.camera

examples/core-example-advanced/src/state/actions/camera/pinchCamera.ts

@@ -1,6 +1,6 @@
-import type { Action } from 'state/constants'
 import type { TLPointerInfo } from '@tldraw/core'
 import Vec from '@tldraw/vec'
+import type { Action } from 'state/constants'
 
 export const pinchCamera: Action = (data, payload: TLPointerInfo) => {
   const { camera } = data.pageState

examples/core-example-advanced/src/state/actions/camera/zoomIn.ts

@@ -1,5 +1,5 @@
-import type { Action } from 'state/constants'
 import Vec from '@tldraw/vec'
+import type { Action } from 'state/constants'
 import { mutables } from 'state/mutables'
 
 export const zoomIn: Action = (data) => {

examples/core-example-advanced/src/state/actions/camera/zoomOut.ts

@@ -1,5 +1,5 @@
-import type { Action } from 'state/constants'
 import Vec from '@tldraw/vec'
+import type { Action } from 'state/constants'
 import { mutables } from 'state/mutables'
 
 export const zoomOut: Action = (data) => {

examples/core-example-advanced/src/state/actions/camera/zoomToFit.ts

@@ -1,8 +1,8 @@
-import { Action, FIT_TO_SCREEN_PADDING } from 'state/constants'
 import { Utils } from '@tldraw/core'
 import Vec from '@tldraw/vec'
-import { mutables } from 'state/mutables'
 import { getShapeUtils } from 'shapes'
+import { Action, FIT_TO_SCREEN_PADDING } from 'state/constants'
+import { mutables } from 'state/mutables'
 
 export const zoomToFit: Action = (data) => {
   const { camera } = data.pageState

examples/core-example-advanced/src/state/actions/camera/zoomToSelection.ts

@@ -1,8 +1,8 @@
-import { Action, FIT_TO_SCREEN_PADDING } from 'state/constants'
 import { Utils } from '@tldraw/core'
-import { mutables } from 'state/mutables'
-import { getShapeUtils } from 'shapes'
 import Vec from '@tldraw/vec'
+import { getShapeUtils } from 'shapes'
+import { Action, FIT_TO_SCREEN_PADDING } from 'state/constants'
+import { mutables } from 'state/mutables'
 
 export const zoomToSelection: Action = (data) => {
   const { camera, selectedIds } = data.pageState

examples/core-example-advanced/src/state/actions/data/restoreSavedDocument.ts

@@ -1,5 +1,5 @@
 import type { Action } from 'state/constants'
-import { mutables } from '../../mutables'
+import { mutables } from 'state/mutables'
 
 export const restoreSavedDocument: Action = (data) => {
   const snapshot = mutables.history.restore()

examples/core-example-advanced/src/state/actions/erase/eraseShapes.ts

@@ -1,6 +1,6 @@
 import type { TLPointerInfo } from '@tldraw/core'
-import type { Action } from 'state/constants'
 import { getShapeUtils } from 'shapes'
+import type { Action } from 'state/constants'
 import { mutables } from 'state/mutables'
 
 export const eraseShapes: Action = (data, payload: TLPointerInfo) => {

examples/core-example-advanced/src/state/actions/erase/eraseShapesAtPoint.ts

@@ -1,5 +1,5 @@
-import type { Action } from 'state/constants'
 import { getShapeUtils } from 'shapes'
+import type { Action } from 'state/constants'
 import { mutables } from 'state/mutables'
 
 export const eraseShapesAtPoint: Action = (data) => {

examples/core-example-advanced/src/state/actions/handles/getBoundTarget.ts

@@ -1,6 +1,6 @@
 import { Utils } from '@tldraw/core'
 import Vec from '@tldraw/vec'
-import { getShapeUtils, Shape } from 'shapes'
+import { Shape, getShapeUtils } from 'shapes'
 import type { ArrowShape } from 'shapes/arrow'
 import type { AppData } from 'state/constants'
 

examples/core-example-advanced/src/state/actions/handles/translateHandle.ts

@@ -1,10 +1,10 @@
-import type { Action, CustomBinding } from 'state/constants'
-import { getShapeUtils, Shape } from 'shapes'
-import { mutables } from 'state/mutables'
-import { nanoid } from 'nanoid'
 import { TLPointerInfo, Utils } from '@tldraw/core'
-import type { ArrowShape } from 'shapes/arrow'
 import Vec from '@tldraw/vec'
+import { nanoid } from 'nanoid'
+import { Shape, getShapeUtils } from 'shapes'
+import type { ArrowShape } from 'shapes/arrow'
+import type { Action, CustomBinding } from 'state/constants'
+import { mutables } from 'state/mutables'
 
 export const translateHandle: Action = (data, payload: TLPointerInfo) => {
   const { initialPoint, snapshot, pointedHandleId } = mutables

examples/core-example-advanced/src/state/actions/history/addToHistory.ts

@@ -1,5 +1,5 @@
 import type { Action } from 'state/constants'
-import { mutables } from '../../mutables'
+import { mutables } from 'state/mutables'
 
 export const addToHistory: Action = (data) => {
   mutables.history.push(data)

examples/core-example-advanced/src/state/actions/history/redo.ts

@@ -1,5 +1,5 @@
 import type { Action } from 'state/constants'
-import { mutables } from '../../mutables'
+import { mutables } from 'state/mutables'
 
 export const redo: Action = (data) => {
   const snapshot = mutables.history.redo()

examples/core-example-advanced/src/state/actions/history/undo.ts

@@ -1,5 +1,5 @@
 import type { Action } from 'state/constants'
-import { mutables } from '../../mutables'
+import { mutables } from 'state/mutables'
 
 export const undo: Action = (data) => {
   const snapshot = mutables.history.undo()

examples/core-example-advanced/src/state/actions/selection/updateBrush.ts

@@ -1,7 +1,7 @@
-import type { Action } from 'state/constants'
 import { TLPointerInfo, Utils } from '@tldraw/core'
-import { mutables } from '../../mutables'
 import { getShapeUtils } from 'shapes'
+import type { Action } from 'state/constants'
+import { mutables } from 'state/mutables'
 
 export const updateBrush: Action = (data, payload: TLPointerInfo) => {
   const { initialPoint, snapshot } = mutables

examples/core-example-advanced/src/state/actions/shapes/createArrowShape.ts

@@ -1,9 +1,9 @@
-import { nanoid } from 'nanoid'
-import Vec from '@tldraw/vec'
 import { TLPointerInfo, Utils } from '@tldraw/core'
-import { getShapeUtils, Shape, shapeUtils } from 'shapes'
+import Vec from '@tldraw/vec'
-import { mutables } from 'state/mutables'
+import { nanoid } from 'nanoid'
+import { Shape, getShapeUtils, shapeUtils } from 'shapes'
 import type { Action, CustomBinding } from 'state/constants'
+import { mutables } from 'state/mutables'
 
 export const createArrowShape: Action = (data, payload: TLPointerInfo) => {
   const shape = shapeUtils.arrow.getShape({

examples/core-example-advanced/src/state/actions/shapes/createPencilShape.ts

@@ -1,6 +1,6 @@
 import type { TLPointerInfo } from '@tldraw/core'
-import type { Action } from 'state/constants'
 import { shapeUtils } from 'shapes'
+import type { Action } from 'state/constants'
 import { mutables } from 'state/mutables'
 
 export const createPencilShape: Action = (data, payload: TLPointerInfo) => {

examples/core-example-advanced/src/state/actions/shapes/createShapes.ts

@@ -1,5 +1,5 @@
 import { nanoid } from 'nanoid'
-import { getShapeUtils, Shape } from 'shapes'
+import { Shape, getShapeUtils } from 'shapes'
 import type { Action } from 'state/constants'
 
 export const createShapes: Action = (

examples/core-example-advanced/src/state/constants.ts

@@ -1,6 +1,6 @@
-import type { TLBinding, TLPage, TLPageState, TLPerformanceMode, TLSnapLine } from '@tldraw/core'
-import type { Shape } from '../shapes'
 import type { S } from '@state-designer/react'
+import type { TLBinding, TLPage, TLPageState, TLPerformanceMode, TLSnapLine } from '@tldraw/core'
+import type { Shape } from 'shapes'
 
 export const VERSION = 1
 export const PERSIST_DATA = true

examples/core-example-advanced/src/state/history.ts

@@ -1,5 +1,5 @@
-import { AppData, INITIAL_DATA, PERSIST_DATA } from './constants'
 import { current } from 'immer'
+import { AppData, INITIAL_DATA, PERSIST_DATA } from './constants'
 
 export function makeHistory(ID = '@tldraw/core_advanced_example') {
   let initialData = INITIAL_DATA

examples/core-example-advanced/src/state/machine.ts

@@ -1,8 +1,8 @@
 import { createState } from '@state-designer/react'
 import type { TLPointerInfo } from '@tldraw/core'
-import { INITIAL_DATA } from './constants'
 import Vec from '@tldraw/vec'
 import * as actions from './actions'
+import { INITIAL_DATA } from './constants'
 import { mutables } from './mutables'
 
 export const machine = createState({

examples/core-example/scripts/build.mjs

@@ -1,6 +1,6 @@
 /* eslint-disable */
-import fs from 'fs'
 import esbuild from 'esbuild'
+import fs from 'fs'
 import { createRequire } from 'module'
 
 const pkg = createRequire(import.meta.url)('../package.json')

examples/core-example/scripts/dev.mjs

@@ -1,6 +1,6 @@
 /* eslint-disable no-undef */
-import fs from 'fs'
 import esbuildServe from 'esbuild-serve'
+import fs from 'fs'
 
 const { log: jslog } = console
 

examples/core-example/src/app.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react'
 import { Renderer, TLPointerEventHandler, TLShapeUtilsMap } from '@tldraw/core'
+import { observer } from 'mobx-react-lite'
+import * as React from 'react'
 import { RectUtil, Shape } from './shapes'
 import { Page, PageState } from './stores'
-import { observer } from 'mobx-react-lite'
 
 const page = new Page({
   id: 'page1',

examples/core-example/src/shapes/rect/RectComponent.tsx

@@ -1,5 +1,5 @@
+import { SVGContainer, TLShapeUtil } from '@tldraw/core'
 import * as React from 'react'
-import { TLShapeUtil, SVGContainer } from '@tldraw/core'
 import type { RectShape } from './RectShape'
 
 export const RectComponent = TLShapeUtil.Component<RectShape, SVGSVGElement>(

examples/core-example/src/shapes/rect/RectIndicator.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
 import { TLShapeUtil } from '@tldraw/core'
+import * as React from 'react'
 import type { RectShape } from './RectShape'
 
 export const RectIndicator = TLShapeUtil.Indicator<RectShape>(({ shape }) => {

examples/tldraw-example/scripts/build.mjs

@@ -1,8 +1,8 @@
 /* eslint-disable */
-import fs from 'fs'
-import path from 'path'
 import esbuild from 'esbuild'
+import fs from 'fs'
 import { createRequire } from 'module'
+import path from 'path'
 
 const pkg = createRequire(import.meta.url)('../package.json')
 

examples/tldraw-example/scripts/dev.mjs

@@ -1,8 +1,8 @@
 /* eslint-disable no-undef */
+import dotenv from 'dotenv'
+import esbuildServe from 'esbuild-serve'
 import fs from 'fs'
 import path from 'path'
-import esbuildServe from 'esbuild-serve'
-import dotenv from 'dotenv'
 
 dotenv.config()
 

examples/tldraw-example/src/api-control.tsx

@@ -1,6 +1,5 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { ColorStyle, TDShapeType, Tldraw, TldrawApp } from '@tldraw/tldraw'
 import * as React from 'react'
-import { ColorStyle, Tldraw, TDShapeType, TldrawApp } from '@tldraw/tldraw'
 
 export default function Imperative() {
   const rTldrawApp = React.useRef<TldrawApp>()

examples/tldraw-example/src/api.tsx

@@ -1,5 +1,5 @@
+import { ColorStyle, TDShapeType, Tldraw, TldrawApp } from '@tldraw/tldraw'
 import * as React from 'react'
-import { Tldraw, TldrawApp, TDShapeType, ColorStyle } from '@tldraw/tldraw'
 
 declare const window: Window & { app: TldrawApp }
 

examples/tldraw-example/src/app.tsx

@@ -1,24 +1,24 @@
 import * as React from 'react'
-import { Routes, Route, Link } from 'react-router-dom'
+import { Link, Route, Routes } from 'react-router-dom'
-import Basic from './basic'
-import DarkMode from './dark-mode'
-import ReadOnly from './readonly'
-import PropsControl from './props-control'
-import ApiControl from './api-control'
-import LoadingFiles from './loading-files'
-import Embedded from './embedded'
-import NoSizeEmbedded from './no-size-embedded'
-import ChangingId from './changing-id'
-import Persisted from './persisted'
-import Develop from './develop'
-import Api from './api'
-import Scroll from './scroll'
-import FileSystem from './file-system'
-import UIOptions from './ui-options'
-import { Multiplayer } from './multiplayer'
-import './styles.css'
 import Export from '~export'
 import IFrame from '~iframe'
+import Api from './api'
+import ApiControl from './api-control'
+import Basic from './basic'
+import ChangingId from './changing-id'
+import DarkMode from './dark-mode'
+import Develop from './develop'
+import Embedded from './embedded'
+import FileSystem from './file-system'
+import LoadingFiles from './loading-files'
+import { Multiplayer } from './multiplayer'
+import NoSizeEmbedded from './no-size-embedded'
+import Persisted from './persisted'
+import PropsControl from './props-control'
+import ReadOnly from './readonly'
+import Scroll from './scroll'
+import './styles.css'
+import UIOptions from './ui-options'
 
 const pages: ({ path: string; component: any; title: string } | '---')[] = [
   { path: '/develop', component: Develop, title: 'Develop' },

examples/tldraw-example/src/basic.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
 import { Tldraw } from '@tldraw/tldraw'
+import * as React from 'react'
 
 export default function Basic() {
   return (

examples/tldraw-example/src/changing-id.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
 import { Tldraw } from '@tldraw/tldraw'
+import * as React from 'react'
 
 export default function ChangingId() {
   const [id, setId] = React.useState('example')

examples/tldraw-example/src/dark-mode.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
 import { Tldraw } from '@tldraw/tldraw'
+import * as React from 'react'
 
 export default function DarkMode() {
   return (

examples/tldraw-example/src/develop.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import * as React from 'react'
 import { Tldraw, TldrawApp, useFileSystem } from '@tldraw/tldraw'
+import * as React from 'react'
 
 declare const window: Window & { app: TldrawApp }
 

examples/tldraw-example/src/export-to-server.tsx

@@ -1,17 +1,17 @@
-import * as React from 'react'
+import { Utils } from '@tldraw/core'
 import {
-  TldrawApp,
   ImageShape,
-  TDExportType,
-  TDAssets,
   TDAssetType,
-  TDShapeType,
+  TDAssets,
+  TDExportType,
   TDShape,
-  Tldraw,
+  TDShapeType,
   TLDR,
+  Tldraw,
+  TldrawApp,
 } from '@tldraw/tldraw'
 import Vec from '@tldraw/vec'
-import { Utils } from '@tldraw/core'
+import * as React from 'react'
 
 export default function Export() {
   const handleExport = React.useCallback(async (app: TldrawApp) => {

examples/tldraw-example/src/export.tsx

@@ -1,5 +1,5 @@
+import { TDExport, TDExportType, Tldraw, TldrawApp } from '@tldraw/tldraw'
 import * as React from 'react'
-import { TldrawApp, TDExport, TDExportType, Tldraw } from '@tldraw/tldraw'
 
 const ACTION = 'download' as 'download' | 'open'
 

examples/tldraw-example/src/file-system.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
 import { Tldraw, useFileSystem } from '@tldraw/tldraw'
+import * as React from 'react'
 
 export default function FileSystem() {
   const fileSystemEvents = useFileSystem()

examples/tldraw-example/src/index.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import App from './app'
 import { HashRouter } from 'react-router-dom'
+import App from './app'
 
 const container = document.getElementById('root')!
 const root = createRoot(container)

examples/tldraw-example/src/loading-files.tsx

@@ -1,4 +1,4 @@
-import { Tldraw, TDFile } from '@tldraw/tldraw'
+import { TDFile, Tldraw } from '@tldraw/tldraw'
 import * as React from 'react'
 
 export default function LoadingFiles() {

examples/tldraw-example/src/multiplayer/liveblocks.config.ts

@@ -1,7 +1,7 @@
 import { createClient } from '@liveblocks/client'
 import type { EnsureJson, LiveMap, LiveObject } from '@liveblocks/client'
 import { createRoomContext } from '@liveblocks/react'
-import type { TDUser, TDShape, TDBinding, TDDocument, TDAsset } from '@tldraw/tldraw'
+import type { TDAsset, TDBinding, TDDocument, TDShape, TDUser } from '@tldraw/tldraw'
 
 const client = createClient({
   publicApiKey: 'YOUR_PUBLIC_KEY' || '',

examples/tldraw-example/src/multiplayer/multiplayer.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import * as React from 'react'
 import { Tldraw } from '@tldraw/tldraw'
+import * as React from 'react'
 import { RoomProvider } from './liveblocks.config'
 import { useMultiplayerState } from './useMultiplayerState'
+
 const roomId = 'mp-test-8'
 
 /*

examples/tldraw-example/src/multiplayer/useMultiplayerState.ts

@@ -1,11 +1,8 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import React, { useState, useRef, useCallback } from 'react'
-import type { TldrawApp, TDUser, TDShape, TDBinding, TDAsset } from '@tldraw/tldraw'
-import { useHotkeys } from 'react-hotkeys-hook'
 import { LiveMap } from '@liveblocks/client'
-
+import type { TDAsset, TDBinding, TDShape, TDUser, TldrawApp } from '@tldraw/tldraw'
-import { useRedo, useUndo, useRoom, useUpdateMyPresence } from './liveblocks.config'
+import React, { useCallback, useRef, useState } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
+import { useRedo, useRoom, useUndo, useUpdateMyPresence } from './liveblocks.config'
 import type { Storage } from './liveblocks.config'
 
 declare const window: Window & { app: TldrawApp }

examples/tldraw-example/src/persisted.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
 import { Tldraw } from '@tldraw/tldraw'
+import * as React from 'react'
 
 export default function Persisted() {
   return (

examples/tldraw-example/src/props-control.tsx

@@ -1,13 +1,13 @@
-import * as React from 'react'
 import {
-  Tldraw,
   ColorStyle,
   DashStyle,
   SizeStyle,
   TDDocument,
   TDShapeType,
+  Tldraw,
   TldrawApp,
 } from '@tldraw/tldraw'
+import * as React from 'react'
 
 export default function Controlled() {
   const rDocument = React.useRef<TDDocument>({

examples/tldraw-example/src/readonly.tsx

@@ -1,4 +1,4 @@
-import { Tldraw, TDFile } from '@tldraw/tldraw'
+import { TDFile, Tldraw } from '@tldraw/tldraw'
 import * as React from 'react'
 
 export default function ReadOnly() {

examples/tldraw-example/src/scroll.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import * as React from 'react'
 import { Tldraw, TldrawApp } from '@tldraw/tldraw'
+import * as React from 'react'
 
 declare const window: Window & { app: TldrawApp }
 

guides/translation.md

@@ -27,9 +27,10 @@ Rename the new file to the [language code](https://gist.github.com/wpsmith/76048
 In the `packages/tldraw/src/translations/translations.ts` file, import your file and create a new entry in to the `TRANSLATIONS` array like this:
 
 ```ts
-import en from './en.json'
 import ar from './ar.json'
-import eo from './eo.json' // <-- import here
+import en from './en.json'
+// import here ↲
+import eo from './eo.json'
 
 export const TRANSLATIONS: TDTranslations = [
   // Default language:

package.json

@@ -33,6 +33,7 @@
     "test": "turbo run test --stream",
     "test:ci": "turbo run test:ci --stream",
     "test:watch": "turbo run test:watch --stream",
+    "format": "prettier --write .",
     "lint": "turbo run lint",
     "clean": "turbo run clean",
     "postinstall": "husky install",
@@ -44,6 +45,7 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
     "@tldraw/lfg": "latest",
+    "@trivago/prettier-plugin-sort-imports": "^3.3.0",
     "@types/jest": "^27.4.0",
     "@types/node": "^17.0.14",
     "@types/vscode": "^1.63.2",
@@ -57,7 +59,7 @@
     "jest": "^27.4.7",
     "lint-staged": "^12.3.3",
     "mobx": "^6.3.8",
-    "prettier": "^2.5.1",
+    "prettier": "^2.7.1",
     "resize-observer-polyfill": "^1.5.1",
     "source-map-loader": "^3.0.1",
     "tslib": "^2.4.0",
@@ -65,6 +67,9 @@
     "typescript": "^4.7.3",
     "webpack": "^5.68.0"
   },
+  "resolutions": {
+    "@trivago/prettier-plugin-sort-imports/**/@babel/parser": "^7.17.0"
+  },
   "lint-staged": {
     "*": "prettier --ignore-unknown --write",
     "*.{ts,tsx}": "eslint --fix"

packages/core/README.md

@@ -312,9 +312,8 @@ Next, use `TLShapeUtil.Component` to create a second component for your shape's
 
 ```tsx
 // BoxComponent.ts
-
+import { SVGContainer, shapeComponent } from '@tldraw/core'
 import * as React from 'react'
-import { shapeComponent, SVGContainer } from '@tldraw/core'
 import type { BoxShape } from './BoxShape'
 
 export const BoxComponent = TLShapeUtil.Component<BoxShape, SVGSVGElement>(
@@ -391,8 +390,7 @@ Next, create a "shape util" for your shape. This is a class that extends `TLShap
 
 ```ts
 // BoxUtil.ts
-
+import { TLBounds, TLShapeUtil, Utils } from '@tldraw/core'
-import { Utils, TLBounds, TLShapeUtil } from '@tldraw/core'
 import { BoxComponent } from './BoxComponent'
 import { BoxIndicator } from './BoxIndicator'
 import type { BoxShape } from './BoxShape'

packages/core/src/TLShapeUtil/TLShapeUtil.spec.tsx

@@ -1,9 +1,9 @@
-import * as React from 'react'
-import type { TLShape, TLBounds, TLComponentProps } from '../types'
-import { TLShapeUtil } from './TLShapeUtil'
 import { render } from '@testing-library/react'
+import * as React from 'react'
 import { SVGContainer } from '~components'
-import Utils from '../utils'
+import type { TLBounds, TLComponentProps, TLShape } from '~types'
+import Utils from '~utils'
+import { TLShapeUtil } from './TLShapeUtil'
 
 export interface BoxShape extends TLShape {
   type: 'box'

packages/core/src/TLShapeUtil/TLShapeUtil.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react'
-import Utils from '../utils'
-import type { TLBounds, TLComponentProps, TLForwardedRef, TLShape, TLUser } from '../types'
 import { intersectPolygonBounds } from '@tldraw/intersect'
+import * as React from 'react'
+import type { TLBounds, TLComponentProps, TLForwardedRef, TLShape, TLUser } from '~types'
+import Utils from '~utils'
 
 export abstract class TLShapeUtil<T extends TLShape, E extends Element = any, M = any> {
   refMap = new Map<string, React.RefObject<E>>()

packages/core/src/TLShapeUtil/index.ts

@@ -1,4 +1,4 @@
-import type { TLShape } from '../types'
+import type { TLShape } from '~types'
 import type { TLShapeUtil } from './TLShapeUtil'
 
 export type TLShapeUtilsMap<T extends TLShape> = {

packages/core/src/components/Bounds/Bounds.tsx

@@ -1,14 +1,14 @@
+import { observer } from 'mobx-react-lite'
 import * as React from 'react'
-import { TLBoundsEdge, TLBoundsCorner, TLBounds } from '~types'
-import { CenterHandle } from './CenterHandle'
-import { RotateHandle } from './RotateHandle'
-import { CornerHandle } from './CornerHandle'
-import { LinkHandle } from './LinkHandle'
-import { EdgeHandle } from './EdgeHandle'
-import { CloneButtons } from './CloneButtons'
 import { Container } from '~components/Container'
 import { SVGContainer } from '~components/SVGContainer'
-import { observer } from 'mobx-react-lite'
+import { TLBounds, TLBoundsCorner, TLBoundsEdge } from '~types'
+import { CenterHandle } from './CenterHandle'
+import { CloneButtons } from './CloneButtons'
+import { CornerHandle } from './CornerHandle'
+import { EdgeHandle } from './EdgeHandle'
+import { LinkHandle } from './LinkHandle'
+import { RotateHandle } from './RotateHandle'
 
 interface BoundsProps {
   zoom: number

packages/core/src/components/Bounds/BoundsBg.tsx

@@ -1,9 +1,9 @@
 import { observer } from 'mobx-react-lite'
 import * as React from 'react'
-import type { TLBounds } from '~types'
-import { useBoundsEvents } from '~hooks'
 import { Container } from '~components/Container'
 import { SVGContainer } from '~components/SVGContainer'
+import { useBoundsEvents } from '~hooks'
+import type { TLBounds } from '~types'
 
 interface BoundsBgProps {
   bounds: TLBounds

packages/core/src/components/Bounds/CornerHandle.tsx

@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react-lite'
 import * as React from 'react'
 import { useBoundsHandleEvents } from '~hooks'
-import { TLBoundsCorner, TLBounds } from '~types'
+import { TLBounds, TLBoundsCorner } from '~types'
 
 const cornerBgClassnames = {
   [TLBoundsCorner.TopLeft]: 'tl-cursor-nwse',

packages/core/src/components/Bounds/EdgeHandle.tsx

@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react-lite'
 import * as React from 'react'
 import { useBoundsHandleEvents } from '~hooks'
-import { TLBoundsEdge, TLBounds } from '~types'
+import { TLBounds, TLBoundsEdge } from '~types'
 
 const edgeClassnames = {
   [TLBoundsEdge.Top]: 'tl-cursor-ns',

packages/core/src/components/Bounds/__tests__/Bounds.test.tsx

@@ -1,6 +1,6 @@
-import { renderWithContext } from '~test'
 import { screen } from '@testing-library/react'
 import * as React from 'react'
+import { renderWithContext } from '~test'
 import { Bounds } from '../Bounds'
 
 describe('bounds', () => {

packages/core/src/components/Bounds/__tests__/CloneButton.test.tsx

@@ -1,6 +1,6 @@
-import { renderWithContext } from '~test'
 import { screen } from '@testing-library/react'
 import * as React from 'react'
+import { renderWithContext } from '~test'
 import { CloneButton } from '../CloneButton'
 
 jest.spyOn(console, 'error').mockImplementation(() => void null)