Use unpkg as a default for serving assets. (#1548)

Use unpkg to host our assets and use that as a default. This will smooth
out the first run experience.

The way this works for different use cases:
- It doesn't change the asset loading for VS Code extension and
tldraw.com
- When running our examples (and our local development) [we still
override the
urls](4a9ef5044c/apps/examples/src/index.tsx (L32-L34))
to use the assets from the filesystem. This allows the assets to still
update when you change them.
- When you use our `Tldraw` component and when just copying the examples
code we will now serve the assets from unpkg by default.

I guess it's a breaking change since we will now use unpkg by default.

### Change Type

- [x] `major` — Breaking Change

### Release Notes

- Use unpkg asset hosting as a default.

apps/docs/content/docs/installation.mdx

@@ -13,6 +13,3 @@ yarn add @tldraw/tldraw@alpha signia signia-react
 # or
 npm install @tldraw/tldraw@alpha signia signia-react
 ```
-
-Next, copy the following folders: `icons`, `embed-icons`, `fonts`, and `translations` from the [assets folder](https://github.com/tldraw/tldraw/tree/main/assets). Put them in your project's public path so that, e.g. `your-website.com/icons` points to the icons folder you copied. (Ability to customize the base asset URL is coming soon!)
-

apps/docs/content/docs/introduction.mdx

@@ -96,11 +96,19 @@ If you wanted to have more granular control, you could also use those subcompone
 
 ### Assets
 
-In order to use the `<Tldraw/>` component, the app must be able to find certain assets on the host. These are contained in the `embed-icons`, `fonts`, `icons`, and `translations` folders. If you are using the `<Tldraw/>` component in your app, you must also copy these folders into your public path.
+In order to use the `<Tldraw/>` component, the app must be able to find certain assets. These are contained in the `embed-icons`, `fonts`, `icons`, and `translations` folders. By default we serve these assets from a [public CDN called unpkg](https://unpkg.com/browse/@tldraw/assets@2.0.0-alpha.12/) so everything should work out of the box.
 
-You can copy these files from the [assets folder](https://github.com/tldraw/tldraw/tree/main/assets) repository. Place the folders in your project's public path as shown in that repository.
+If you want more flexibility you can also host these assets yourself:
+1. Download the `embed-icons`, `fonts`, `icons`, and `translations` folders from the [assets folder](https://github.com/tldraw/tldraw/tree/main/assets) of the tldraw repository.
+2. Place the folders in your project's public path.
+3. Pass `assetUrls` prop to our `<Tldraw/>` component to let the component know where the assets live. You can use our [`getAssetUrlsByMetaUrl` helper](https://github.com/tldraw/tldraw/blob/5d826c926d2b8eea633caccbe1049b9e1b4b9070/packages/assets/urls.js#L32) from the `@tldraw/assets` package.
+```
+import { getAssetUrlsByMetaUrl } from '@tldraw/assets/urls'
 
-> **Note:** This requirement is very likely to change in the near future.
+const assetUrls = getAssetUrlsByMetaUrl()
+
+<Tldraw assetUrls={assetUrls} />
+```
 
 While these files must be available, you can overwrite the individual files: for example, by placing different icons under the same name or modifying / adding translations.
 

apps/docs/content/docs/usage.mdx

@@ -68,11 +68,19 @@ If you wanted to have more granular control, you could also use those subcompone
 
 ### Assets
 
-In order to use the `<Tldraw/>` component, the app must be able to find certain assets on the host. These are contained in the `embed-icons`, `fonts`, `icons`, and `translations` folders. If you are using the `<Tldraw/>` component in your app, you must also copy these folders into your public path.
+In order to use the `<Tldraw/>` component, the app must be able to find certain assets. These are contained in the `embed-icons`, `fonts`, `icons`, and `translations` folders. By default we serve these assets from a [public CDN called unpkg](https://unpkg.com/browse/@tldraw/assets@2.0.0-alpha.12/) so everything should work out of the box.
 
-You can copy these files from the [assets folder](https://github.com/tldraw/tldraw/tree/main/assets). Place the folders in your project's public path as shown in that repository.
+If you want more flexibility you can also host these assets yourself:
+1. Download the `embed-icons`, `fonts`, `icons`, and `translations` folders from the [assets folder](https://github.com/tldraw/tldraw/tree/main/assets) of the tldraw repository.
+2. Place the folders in your project's public path.
+3. Pass `assetUrls` prop to our `<Tldraw/>` component to let the component know where the assets live. You can use our [`getAssetUrlsByMetaUrl` helper](https://github.com/tldraw/tldraw/blob/5d826c926d2b8eea633caccbe1049b9e1b4b9070/packages/assets/urls.js#L32) from the `@tldraw/assets` package.
+```
+import { getAssetUrlsByMetaUrl } from '@tldraw/assets/urls'
 
-> **Note:** This requirement is very likely to change in the near future.
+const assetUrls = getAssetUrlsByMetaUrl()
+
+<Tldraw assetUrls={assetUrls} />
+```
 
 While these files must be available, you can overwrite the individual files: for example, by placing different icons under the same name or modifying / adding translations.
 

packages/editor/src/lib/assetUrls.ts

@@ -1,3 +1,5 @@
+import { version } from '../version'
+
 /** @public */
 export type TLEditorAssetUrls = {
 	fonts: {
@@ -11,10 +13,10 @@ export type TLEditorAssetUrls = {
 /** @public */
 export let defaultEditorAssetUrls: TLEditorAssetUrls = {
 	fonts: {
-		draw: '/fonts/Shantell_Sans-Normal-SemiBold.woff2',
-		serif: '/fonts/IBMPlexSerif-Medium.woff2',
-		sansSerif: '/fonts/IBMPlexSans-Medium.woff2',
-		monospace: '/fonts/IBMPlexMono-Medium.woff2',
+		draw: `https://unpkg.com/@tldraw/assets@${version}/fonts/Shantell_Sans-Normal-SemiBold.woff2`,
+		serif: `https://unpkg.com/@tldraw/assets@${version}/fonts/IBMPlexSerif-Medium.woff2`,
+		sansSerif: `https://unpkg.com/@tldraw/assets@${version}/fonts/IBMPlexSans-Medium.woff2`,
+		monospace: `https://unpkg.com/@tldraw/assets@${version}/fonts/IBMPlexMono-Medium.woff2`,
 	},
 }
 

packages/editor/src/version.ts

@@ -0,0 +1 @@
+export const version = '2.0.0-alpha.12'

packages/ui/src/lib/assetUrls.ts

@@ -4,6 +4,7 @@ import {
 	TLEditorAssetUrls,
 	defaultEditorAssetUrls,
 } from '@tldraw/editor'
+import { version } from '../version'
 import { TLUiIconType, iconTypes } from './icon-types'
 
 export type TLUiAssetUrls = TLEditorAssetUrls & {
@@ -14,15 +15,23 @@ export type TLUiAssetUrls = TLEditorAssetUrls & {
 
 export let defaultUiAssetUrls: TLUiAssetUrls = {
 	...defaultEditorAssetUrls,
-	icons: Object.fromEntries(iconTypes.map((name) => [name, `/icons/icon/${name}.svg`])) as Record<
-		TLUiIconType,
-		string
-	>,
+	icons: Object.fromEntries(
+		iconTypes.map((name) => [
+			name,
+			`https://unpkg.com/@tldraw/assets@${version}/icons/icon/${name}.svg`,
+		])
+	) as Record<TLUiIconType, string>,
 	translations: Object.fromEntries(
-		LANGUAGES.map((lang) => [lang.locale, `/translations/${lang.locale}.json`])
+		LANGUAGES.map((lang) => [
+			lang.locale,
+			`https://unpkg.com/@tldraw/assets@${version}/translations/${lang.locale}.json`,
+		])
 	) as Record<(typeof LANGUAGES)[number]['locale'], string>,
 	embedIcons: Object.fromEntries(
-		EMBED_DEFINITIONS.map((def) => [def.type, `/embed-icons/${def.type}.png`])
+		EMBED_DEFINITIONS.map((def) => [
+			def.type,
+			`https://unpkg.com/@tldraw/assets@${version}/embed-icons/${def.type}.png`,
+		])
 	) as Record<(typeof EMBED_DEFINITIONS)[number]['type'], string>,
 }
 

packages/ui/src/version.ts

@@ -0,0 +1 @@
+export const version = '2.0.0-alpha.12'

scripts/lib/publishing.ts

@@ -50,6 +50,10 @@ export function setAllVersions(version: string) {
 			path.join(packageDetails.dir, 'package.json'),
 			JSON.stringify(manifest, null, '\t') + '\n'
 		)
+		if (manifest.name === '@tldraw/ui' || manifest.name === '@tldraw/editor') {
+			const versionFileContents = `export const version = '${version}'\n`
+			writeFileSync(path.join(packageDetails.dir, 'src', 'version.ts'), versionFileContents)
+		}
 	}
 
 	const lernaJson = JSON.parse(readFileSync('lerna.json', 'utf8'))