tldraw/apps/vscode/extension/scripts/dev.ts
alex b88a2370b3
Styles API (#1580)
Removes `propsForNextShape` and replaces it with the new styles API. 

Changes in here:
- New custom style example
- `setProp` is now `setStyle` and takes a `StyleProp` instead of a
string
- `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and
`Editor.sharedOpacity`
- They return an object that flags mixed vs shared types instead of
using null to signal mixed types
- `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp`
instead of `string`
- `StateNode.shapeType` is now the shape util rather than just a string.
This lets us pull the styles from the shape type directly.
- `color` is no longer a core part of the editor set on the shape
parent. Individual child shapes have to use color directly.
- `propsForNextShape` is now `stylesForNextShape`
- `InstanceRecordType` is created at runtime in the same way
`ShapeRecordType` is. This is so it can pull style validators out of
shape defs for `stylesForNextShape`
- Shape type are now defined by their props rather than having separate
validators & type defs

### Change Type

- [x] `major` — Breaking change

### Test Plan

1. Big time regression testing around styles!
2. Check UI works as intended for all shape/style/tool combos

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

### Release Notes

-

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00

60 lines
1.4 KiB
TypeScript

import esbuild from 'esbuild'
import { join } from 'path'
import { logEnv } from '../../vscode-script-utils/cli'
import { copyEditor, removeDistDirectory } from '../../vscode-script-utils/helpers'
import { getDirname } from '../../vscode-script-utils/path'
const rootDir = getDirname(import.meta.url, '../')
const log = logEnv('extension')
async function dev() {
await copyEditor({ log })
await removeDistDirectory({ log })
const entryPoints = [join(rootDir, 'src', 'extension.ts')]
log({ cmd: 'esbuild', args: { entryPoints } })
try {
const builder = await esbuild.context({
entryPoints,
outdir: join(rootDir, 'dist', 'web'),
minify: false,
bundle: true,
format: 'cjs',
target: 'es6',
sourcemap: 'inline',
platform: 'node',
define: {
'process.env.NODE_ENV': '"development"',
},
tsconfig: './tsconfig.json',
external: ['vscode'],
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: {} })
}
})
},
},
],
loader: {
'.woff2': 'dataurl',
'.woff': 'dataurl',
'.svg': 'file',
'.png': 'file',
'.json': 'file',
},
})
await builder.watch()
} catch (error) {
log({ cmd: 'esbuild:error', args: { error } })
throw error
}
}
dev()