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>

apps/vscode/editor/package.json

@@ -47,7 +47,7 @@
 		"concurrently": "7.0.0",
 		"create-serve": "1.0.1",
 		"dotenv": "^16.0.3",
-		"esbuild": "^0.16.7",
+		"esbuild": "^0.18.3",
 		"fs-extra": "^11.1.0",
 		"lazyrepo": "0.0.0-alpha.27",
 		"nanoid": "4.0.2",

apps/vscode/editor/scripts/dev.ts

@@ -32,12 +32,12 @@ export async function run() {
 		const entryPoints = [`${rootDir}src/index.tsx`]
 
 		log({ cmd: 'esbuild', args: { entryPoints } })
-		esbuild.build({
+
+		const builder = await esbuild.context({
 			entryPoints,
 			outfile: `${rootDir}/dist/index.js`,
 			minify: false,
 			bundle: true,
-			incremental: true,
 			target: 'es6',
 			jsxFactory: 'React.createElement',
 			jsxFragment: 'React.Fragment',
@@ -51,17 +51,23 @@ export async function run() {
 			define: {
 				'process.env.NODE_ENV': '"development"',
 			},
-			watch: {
-				onRebuild(err) {
-					if (err) {
-						log({ cmd: 'esbuild:error', args: { err } })
-					} else {
-						copyEditor({ log })
-						log({ cmd: 'esbuild:success', args: {} })
-					}
+			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

apps/vscode/extension/package.json

@@ -139,7 +139,7 @@
 		"@typescript-eslint/eslint-plugin": "^5.10.2",
 		"@typescript-eslint/parser": "^5.10.2",
 		"assert": "^2.0.0",
-		"esbuild": "^0.16.7",
+		"esbuild": "^0.18.3",
 		"fs-extra": "^11.1.0",
 		"lazyrepo": "0.0.0-alpha.27",
 		"lodash": "^4.17.21",

apps/vscode/extension/scripts/dev.ts

@@ -14,7 +14,7 @@ async function dev() {
 
 	log({ cmd: 'esbuild', args: { entryPoints } })
 	try {
-		esbuild.build({
+		const builder = await esbuild.context({
 			entryPoints,
 			outdir: join(rootDir, 'dist', 'web'),
 			minify: false,
@@ -28,16 +28,21 @@ async function dev() {
 			},
 			tsconfig: './tsconfig.json',
 			external: ['vscode'],
-			incremental: true,
-			watch: {
-				onRebuild(err) {
-					if (err) {
-						log({ cmd: 'esbuild:error', args: { error: err } })
-					} else {
-						log({ cmd: 'esbuild:success', args: {} })
-					}
+			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',
@@ -46,6 +51,7 @@ async function dev() {
 				'.json': 'file',
 			},
 		})
+		await builder.watch()
 	} catch (error) {
 		log({ cmd: 'esbuild:error', args: { error } })
 		throw error