tldraw_final_v6_final(old version).docx.pdf (#2998)

Rename `@tldraw/tldraw` to just `tldraw`! `@tldraw/tldraw` still exists
as an alias to `tldraw` for folks who are still using that.

### Test Plan

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

### Release Notes

- The `@tldraw/tldraw` package has been renamed to `tldraw`. You can
keep using the old version if you want though!
This commit is contained in:
alex 2024-02-29 16:06:19 +00:00 committed by GitHub
parent ae531da193
commit a0628f9cb2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
206 changed files with 1602 additions and 1263 deletions

View file

@ -35,7 +35,7 @@ export default function ExampleCodeBlock({
customSetup={{
dependencies: {
'@tldraw/assets': 'latest',
'@tldraw/tldraw': 'latest',
tldraw: 'latest',
},
}}
files={{

View file

@ -36,7 +36,7 @@ export function CodeBlock({ code }: { code: SandpackFiles }) {
customSetup={{
dependencies: {
'@tldraw/assets': 'latest',
'@tldraw/tldraw': 'latest',
tldraw: 'latest',
},
}}
files={trimmedCode}

View file

@ -6,4 +6,4 @@ date: 3/22/2023
order: 8
---
See the [tldraw-yjs example](https://github.com/tldraw/tldraw-yjs-example) for an example of how to use yjs with the `@tldraw/tldraw` library.
See the [tldraw-yjs example](https://github.com/tldraw/tldraw-yjs-example) for an example of how to use yjs with the `tldraw` library.

View file

@ -29,7 +29,7 @@ The editor also exposes many _computed_ values which are derived from other reco
You can use these properties directly or you can use them in signals.
```tsx
import { track, useEditor } from '@tldraw/tldraw'
import { track, useEditor } from 'tldraw'
export const SelectedShapeIdsCount = track(() => {
const editor = useEditor()
@ -159,7 +159,7 @@ Note that the paths you pass to [Editor#isIn](?) or [Editor#isInAny](?) can be t
> If all you're interested in is the state below `root`, there is a convenience method, [Editor#getCurrentToolId](?), that can help with the editor's currently selected tool.
```tsx
import { track, useEditor } from '@tldraw/tldraw'
import { track, useEditor } from 'tldraw'
export const BubbleToolUi = track(() => {
const editor = useEditor()
@ -193,7 +193,7 @@ The editor's user preferences are shared between all instances. See the [TLUserP
To create an id for a shape (a [TLShapeId](?)), use the libary's [createShapeId](?) helper.
```ts
import { createShapeId } from '@tldraw/tldraw'
import { createShapeId } from 'tldraw'
createShapeId() // `shape:some-random-uuid`
createShapeId('kyle') // `shape:kyle`

View file

@ -20,8 +20,8 @@ Persistence in tldraw means storing information about the editor's state to a da
Both the `<Tldraw>` or `<TldrawEditor>` components support local persitence and cross-tab synchronization via the `persistenceKey` prop. Passing a value to this prop will persist the contents of the editor locally to the browser's IndexedDb.
```tsx
import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
export default function () {
return (
@ -35,8 +35,8 @@ export default function () {
Using a `persistenceKey` will synchronize data automatically with any other tldraw component with the same `persistenceKey` prop, even if that component is in a different browser tab.
```tsx
import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
export default function () {
return (

View file

@ -25,7 +25,7 @@ The editor's core shapes are shapes that are built in and always present. At the
### Default shapes
The default shapes are all of the shapes that are included by default in the [Tldraw](?) component, such as the [TLArrowShape](?) or [TLDrawShape](?). They are exported from the `@tldraw/tldraw` library as [defaultShapeUtils](?).
The default shapes are all of the shapes that are included by default in the [Tldraw](?) component, such as the [TLArrowShape](?) or [TLDrawShape](?). They are exported from the `tldraw` library as [defaultShapeUtils](?).
### Custom shapes
@ -96,7 +96,7 @@ You can create your own custom shapes. In the examples below, we will create a c
In tldraw's data model, each shape is represented by a JSON object. Let's first create a type that describes what this object will look like.
```ts
import { TLBaseShape } from '@tldraw/tldraw'
import { TLBaseShape } from 'tldraw'
type CardShape = TLBaseShape<'card', { w: number; h: number }>
```
@ -112,7 +112,7 @@ While tldraw's shapes themselves are simple JSON objects, we use [ShapeUtil](?)
Let's create a [ShapeUtil](?) class for the shape.
```tsx
import { HTMLContainer, ShapeUtil } from '@tldraw/tldraw'
import { HTMLContainer, ShapeUtil } from 'tldraw'
class CardShapeUtil extends ShapeUtil<CardShape> {
static override type = 'card' as const

View file

@ -6,27 +6,27 @@ date: 3/22/2023
order: 1
---
At the moment the `@tldraw/tldraw` package is in beta. We also ship a canary version which is always up to date with the main branch of tldraw [repository](https://github.com/tldraw/tldraw).
At the moment the `tldraw` package is in beta. We also ship a canary version which is always up to date with the main branch of tldraw [repository](https://github.com/tldraw/tldraw).
## Beta
First, install the `@tldraw/tldraw` package using `@beta` for the latest beta release.
First, install the `tldraw` package using `@beta` for the latest beta release.
<CodeBlock code={{'yarn': 'yarn add @tldraw/tldraw@beta', 'npm': 'npm install @tldraw/tldraw@beta', 'pnpm': 'pnpm add @tldraw/tldraw@beta'}} />
<CodeBlock code={{'yarn': 'yarn add tldraw@beta', 'npm': 'npm install tldraw@beta', 'pnpm': 'pnpm add tldraw@beta'}} />
## Canary
To get the very latest version, use the [latest canary release](https://www.npmjs.com/package/@tldraw/tldraw?activeTab=versions). Docs for the very latest version are also available at [canary.tldraw.dev](https://canary.tldraw.dev).
To get the very latest version, use the [latest canary release](https://www.npmjs.com/package/tldraw?activeTab=versions). Docs for the very latest version are also available at [canary.tldraw.dev](https://canary.tldraw.dev).
<CodeBlock code={{'yarn': 'yarn add @tldraw/tldraw@canary', 'npm': 'npm install @tldraw/tldraw@canary', 'pnpm': 'pnpm add @tldraw/tldraw@canary'}} />
<CodeBlock code={{'yarn': 'yarn add tldraw@canary', 'npm': 'npm install tldraw@canary', 'pnpm': 'pnpm add tldraw@canary'}} />
## Usage
You can use the [Tldraw](?) component inside of any React component.
```tsx
import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
export default function () {
return (
@ -43,16 +43,16 @@ It's important that the [Tldraw](?) component is wrapped in a parent container t
### CSS
In addition to the [Tldraw](?) component itself, you should also import the `tldraw.css` file from the `@tldraw/tldraw` package.
In addition to the [Tldraw](?) component itself, you should also import the `tldraw.css` file from the `tldraw` package.
```tsx
import '@tldraw/tldraw/tldraw.css'
import 'tldraw/tldraw.css'
```
You can alternatively import this file inside of another CSS file using the `@import` syntax.
```css
@import url('@tldraw/tldraw/tldraw.css');
@import url('tldraw/tldraw.css');
```
If you'd like to deeply change the way that tldraw looks, you can copy the `tldraw.css` file into a new CSS file, make your changes, and import that instead.
@ -80,15 +80,15 @@ This may not be critical to [Tldraw](?) performing correctly, however some featu
The [Tldraw](?) component can't be server-rendered. If you're using the component in a server-rendered framework (such as Next.js) then you need to import it dynamically.
```tsx
const Tldraw = dynamic(async () => (await import('@tldraw/tldraw')).Tldraw, { ssr: false })
const Tldraw = dynamic(async () => (await import('tldraw')).Tldraw, { ssr: false })
```
### Using a bundler
If you're using a bundler like webpack or rollup, you can import the assets directly from the `@tldraw/assets` package. Here you can use `getAssetUrlsByMetaUrl` helper function:
If you're using a bundler like webpack or rollup, you can import the assets directly from the `assets` package. Here you can use `getAssetUrlsByMetaUrl` helper function:
```tsx
import { getAssetUrlsByMetaUrl } from '@tldraw/assets/urls'
import { getAssetUrlsByMetaUrl } from 'assets/urls'
const assetUrls = getAssetUrlsByMetaUrl()

View file

@ -24,7 +24,7 @@ By the end of this guide you will have made something that looks like this:
- Install the tldraw library using this command:
```bash
npm install @tldraw/tldraw@beta
npm install tldraw@beta
```
</li>
<li>
@ -36,7 +36,7 @@ By the end of this guide you will have made something that looks like this:
- Copy and paste this into the file:
```CSS
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Roboto+Mono:wght@400;700&display=swap");
@import url("@tldraw/tldraw/tldraw.css");
@import url("tldraw/tldraw.css");
body {
font-family: "Inter";
@ -48,14 +48,14 @@ By the end of this guide you will have made something that looks like this:
<br />
To render the Tldraw component
- Import the `<Tldraw />` component from `@tldraw/tldraw`
- Import the `<Tldraw />` component from `tldraw`
- Import the `index.css` CSS file from earlier
- Wrap the Tldraw component in a `<div>` element with the style attribute set to: `{ position: 'fixed', inset: 0 }`
<p className="">This will render a full screen canvas:</p>
```javascript
import { Tldraw } from "@tldraw/tldraw";
import { Tldraw } from "tldraw";
import "./index.css";
export default function App() {

View file

@ -97,7 +97,7 @@
},
{
"id": "tldraw",
"title": "@tldraw/tldraw",
"title": "tldraw",
"description": "",
"groups": [
{

View file

@ -63,7 +63,7 @@ export async function fetchReleases() {
fs.writeFileSync(filePath, m)
})
} else {
throw Error(`x Could not get releases for @tldraw/tldraw.`)
throw Error(`x Could not get releases for tldraw.`)
}
} catch (error) {
nicelog(`x Could not generate release content.`)