tldraw/apps/vscode/editor/scripts/dev.ts
Steve Ruiz b7d9c8684c
tldraw zero - package shuffle (#1710)
This PR moves code between our packages so that:
- @tldraw/editor is a “core” library with the engine and canvas but no
shapes, tools, or other things
- @tldraw/tldraw contains everything particular to the experience we’ve
built for tldraw

At first look, this might seem like a step away from customization and
configuration, however I believe it greatly increases the configuration
potential of the @tldraw/editor while also providing a more accurate
reflection of what configuration options actually exist for
@tldraw/tldraw.

## Library changes

@tldraw/editor re-exports its dependencies and @tldraw/tldraw re-exports
@tldraw/editor.

- users of @tldraw/editor WITHOUT @tldraw/tldraw should almost always
only import things from @tldraw/editor.
- users of @tldraw/tldraw should almost always only import things from
@tldraw/tldraw.

- @tldraw/polyfills is merged into @tldraw/editor
- @tldraw/indices is merged into @tldraw/editor
- @tldraw/primitives is merged mostly into @tldraw/editor, partially
into @tldraw/tldraw
- @tldraw/file-format is merged into @tldraw/tldraw
- @tldraw/ui is merged into @tldraw/tldraw

Many (many) utils and other code is moved from the editor to tldraw. For
example, embeds now are entirely an feature of @tldraw/tldraw. The only
big chunk of code left in core is related to arrow handling.

## API Changes

The editor can now be used without tldraw's assets. We load them in
@tldraw/tldraw instead, so feel free to use whatever fonts or images or
whatever that you like with the editor.

All tools and shapes (except for the `Group` shape) are moved to
@tldraw/tldraw. This includes the `select` tool.

You should use the editor with at least one tool, however, so you now
also need to send in an `initialState` prop to the Editor /
<TldrawEditor> component indicating which state the editor should begin
in.

The `components` prop now also accepts `SelectionForeground`.

The complex selection component that we use for tldraw is moved to
@tldraw/tldraw. The default component is quite basic but can easily be
replaced via the `components` prop. We pass down our tldraw-flavored
SelectionFg via `components`.

Likewise with the `Scribble` component: the `DefaultScribble` no longer
uses our freehand tech and is a simple path instead. We pass down the
tldraw-flavored scribble via `components`.

The `ExternalContentManager` (`Editor.externalContentManager`) is
removed and replaced with a mapping of types to handlers.

- Register new content handlers with
`Editor.registerExternalContentHandler`.
- Register new asset creation handlers (for files and URLs) with
`Editor.registerExternalAssetHandler`

### Change Type

- [x] `major` — Breaking change

### Test Plan

- [x] Unit Tests
- [x] End to end tests

### Release Notes

- [@tldraw/editor] lots, wip
- [@tldraw/ui] gone, merged to tldraw/tldraw
- [@tldraw/polyfills] gone, merged to tldraw/editor
- [@tldraw/primitives] gone, merged to tldraw/editor / tldraw/tldraw
- [@tldraw/indices] gone, merged to tldraw/editor
- [@tldraw/file-format] gone, merged to tldraw/tldraw

---------

Co-authored-by: alex <alex@dytry.ch>
2023-07-17 21:22:34 +00:00

77 lines
1.9 KiB
TypeScript

import dotenv from 'dotenv'
import esbuild from 'esbuild'
import fs from 'fs'
import fse, { exists } from 'fs-extra'
import path from 'path'
import { logEnv } from './cli'
import { copyEditor } from './helpers'
import { getDirname } from './path'
dotenv.config()
const rootDir = getDirname(import.meta.url, '../')
const log = logEnv('editor')
export async function run() {
try {
const targetFolder = `${rootDir}dist/`
if (await exists(targetFolder)) {
log({ cmd: 'remove', args: { target: targetFolder } })
await fs.promises.rm(targetFolder, { recursive: true })
}
await fs.promises.mkdir(targetFolder)
const topSource = `${rootDir}public`
const files = await fs.promises.readdir(topSource)
for (const file of files) {
const dest = targetFolder + path.basename(file)
const source = path.join(topSource, file)
log({ cmd: 'copy', args: { source, dest } })
await fse.copy(source, dest)
}
const entryPoints = [`${rootDir}src/index.tsx`]
log({ cmd: 'esbuild', args: { entryPoints } })
const builder = await esbuild.context({
entryPoints,
outfile: `${rootDir}/dist/index.js`,
minify: false,
bundle: true,
target: 'es6',
jsxFactory: 'React.createElement',
jsxFragment: 'React.Fragment',
loader: {
'.woff2': 'dataurl',
'.woff': 'dataurl',
'.svg': 'file',
'.png': 'file',
'.json': 'file',
},
define: {
'process.env.NODE_ENV': '"development"',
},
plugins: [
{
name: 'log-builds',
setup(build) {
build.onEnd((result) => {
if (result.errors.length) {
log({ cmd: 'esbuild:error', args: { err: result.errors } })
} else {
copyEditor({ log })
log({ cmd: 'esbuild:success', args: {} })
}
})
},
},
],
})
await builder.watch()
} catch (error) {
log({ cmd: 'esbuild:error', args: { error } })
throw error
}
}
run()