f9ed1bf2c9
Typescript's type aliases (`type X = thing`) can refer to basically
anything, which makes it hard to write an automatic document formatter
for them. Interfaces on the other hand are only object, so they play
much nicer with docs. Currently, object-flavoured type aliases don't
really get expanded at all on our docs site, which means we have a bunch
of docs content that's not shown on the site.
This diff introduces a lint rule that forces `interface X {foo: bar}`s
instead of `type X = {foo: bar}` where possible, as it results in a much
better documentation experience:
Before:
<img width="437" alt="Screenshot 2024-05-22 at 15 24 13"
src="https://github.com/tldraw/tldraw/assets/1489520/32606fd1-6832-4a1e-aa5f-f0534d160c92">
After:
<img width="431" alt="Screenshot 2024-05-22 at 15 33 01"
src="https://github.com/tldraw/tldraw/assets/1489520/4e0d59ee-c38e-4056-b9fd-6a7f15d28f0f">
### Change Type
- [x] `sdk` — Changes the tldraw SDK
- [x] `docs` — Changes to the documentation, examples, or templates.
- [x] `improvement` — Improving existing features
|
||
|---|---|---|
| .. | ||
| src | ||
| api-extractor.json | ||
| api-report.md | ||
| CHANGELOG.md | ||
| LICENSE.md | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
@tldraw/tlschema
This package houses type definitions, schema migrations, and other type metadata for the tldraw editor's default persisted data.
There are three main kinds of types:
-
Record types
These are root record types added to the
Storeclass. They are defined in the./src/recordsdirectory. -
Shape types
These are subtypes of the root TLShape record type. They allow specifying a unique name and custom props for a particular kind of shape.
-
Asset types
These are subtypes of the root TLAsset record type. They allow specifying a unique name and custom props for a particular kind of asset.
Adding migrations
If you make any kind of change to any persisted data shape in this package, you must add migrations that are able to convert old versions to new versions, and vice-versa.
If you are making a change that affects the structure of a record, shape, or asset, update the migrations in the same file as the record, shape, or asset is defined.
If you are making a change that affects the structure of the store (e.g. renaming or deleting a type, consolidating two shape types into one, etc), add your changes in the migrations in schema.ts.
After making your changes, add a new version number, using a meaninful name. For example, if you add a new property
to the TLShape type called ownerId that points to a user, you might do this:
In TLShape.ts
const Versions = {
RemoveSomeProp: 1,
+ AddOwnerId: 2,
} as const
and then in the TLShape type
x: number
y: number
+ ownerId: ID<TLUser> | null
props: Props
parentId: ID<TLShape> | ID<TLPage>
and then adding a migration:
export const shapeTypeMigrations = defineMigrations({
currentVersion: Versions.Initial,
firstVersion: Versions.Initial,
migrators: {
+ [Versions.AddOwnerId]: {
+ // add ownerId property
+ up: (shape) => ({...shape, ownerId: null}),
+ // remove ownerId property
+ down: ({ownerId, ...shape}) => shape,
+ }
},
After you've added your migration, make sure to add a test for it in src/migrations.test.ts. It will complain if you do not!
Distributions
You can find tldraw on npm here.
Contribution
Please see our contributing guide. Found a bug? Please submit an issue.
License
The tldraw source code and its distributions are provided under the tldraw license. This license does not permit commercial use. To purchase a commercial license or learn more, please fill out this form.
Trademarks
Copyright (c) 2023-present tldraw Inc. The tldraw name and logo are trademarks of tldraw. Please see our trademark guidelines for info on acceptable usage.
Contact
Find us on Twitter/X at @tldraw.
Community
Have questions, comments or feedback? Join our discord or start a discussion. For the latest news and release notes, check out our Substack.