npm - @kitschpatrol/tldraw-cli - Versions diffs - 4.6.8 → 4.6.10 - Mend

@kitschpatrol/tldraw-cli 4.6.8 → 4.6.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (74) hide show

package/dist/tldraw/icons/icon/vertical-align-middle.svg CHANGED Viewed

	@@ -1 +1 @@
1	- <svg xmlns="http://www.w3.org/2000/svg" width="30" height="31" fill="none"><rect width="2" height="8" x="15" y="19.~~297~~" fill="#000" rx="1" transform="rotate(45 15 19.~~297~~)"/><rect width="2" height="8" x="13.586" y="20.~~711~~" fill="#000" rx="1" transform="rotate(-45 13.586 20.~~711~~)"/><rect width="2" height="8" x="15" y="11.~~118~~" fill="#000" rx="1" transform="rotate(-135 15 11.~~118~~)"/><rect width="2" height="8" x="16.414" y="9.~~704~~" fill="#000" rx="1" transform="rotate(135 16.414 9.~~704~~)"/><rect width="2" height="22" x="4" y="16~~.207~~" fill="#000" rx="1" transform="rotate(-90 4 16~~.207~~)"/></svg>
1	+ <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="none"><rect width="2" height="8" x="15" y="19.09" fill="#000" rx="1" transform="rotate(45 15 19.09)"/><rect width="2" height="8" x="13.586" y="20.504" fill="#000" rx="1" transform="rotate(-45 13.586 20.504)"/><rect width="2" height="8" x="15" y="10.911" fill="#000" rx="1" transform="rotate(-135 15 10.911)"/><rect width="2" height="8" x="16.414" y="9.497" fill="#000" rx="1" transform="rotate(135 16.414 9.497)"/><rect width="2" height="22" x="4" y="16" fill="#000" rx="1" transform="rotate(-90 4 16)"/></svg>

package/dist/tldraw/icons/icon/vertical-align-start.svg CHANGED Viewed

	@@ -1 +1 @@
1	- <svg xmlns="http://www.w3.org/2000/svg" width="30" height="31" fill="none"><rect width="2" height="22" x="4" y="10.~~707~~" fill="#000" rx="1" transform="rotate(-90 4 10.~~707~~)"/><rect width="2" height="8" x="15" y="13.~~799~~" fill="#000" rx="1" transform="rotate(45 15 13.~~799~~)"/><rect width="2" height="8" x="13.586" y="15.~~213~~" fill="#000" rx="1" transform="rotate(-45 13.586 15.~~213~~)"/></svg>
1	+ <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="none"><rect width="2" height="22" x="4" y="10.5" fill="#000" rx="1" transform="rotate(-90 4 10.5)"/><rect width="2" height="8" x="15" y="13.592" fill="#000" rx="1" transform="rotate(45 15 13.592)"/><rect width="2" height="8" x="13.586" y="15.006" fill="#000" rx="1" transform="rotate(-45 13.586 15.006)"/></svg>

package/dist/tldraw/icons/icon/warning-triangle.svg CHANGED Viewed

	@@ -1 +1 @@
1	- <svg xmlns="http://www.w3.org/2000/svg" width="32" height="30" fill="none"><circle cx="16.4" cy="19.439" r="1.5" fill="#000"/><path fill="#000" d="~~M15~~.054 10.46a1.347 1.347 0 1 1 2.692 0l-.308 5.001a1.04 1.04 0 0 1-2.076 0z"/><path stroke="#000" stroke-width="2" d="~~M29~~.96 23.85 16.~~514~~ 1.~~293a~~.6.6 0 0 0-1.03 ~~0L2~~.04 23.~~85a~~.6.6 0 0 0 .~~515~~.~~907h26~~.~~888a~~.6.6 0 0 0 .~~515~~-.~~907Z~~"/></svg>
1	+ <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="none"><circle cx="15.4" cy="19.439" r="1.5" fill="#000"/><path fill="#000" d="M14.054 10.46a1.347 1.347 0 1 1 2.692 0l-.308 5.001a1.04 1.04 0 0 1-2.076 0z"/><path stroke="#000" stroke-width="2" d="M28.483 23.858 15.52 1.332a.6.6 0 0 0-1.04 0L1.517 23.858a.6.6 0 0 0 .52.9h25.926a.6.6 0 0 0 .52-.9Z"/></svg>

package/dist/tldraw/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>tldraw via tldraw-cli</title>
-		<script type="module" crossorigin src="/assets/index-B0zSeFIu.js"></script>
-		<link rel="stylesheet" crossorigin href="/assets/index-lYfYBaQA.css">
+		<script type="module" crossorigin src="/assets/index-BpL0JxLJ.js"></script>
+		<link rel="stylesheet" crossorigin href="/assets/index-DNGZJ3vS.css">
 	</head>
 	<body>
 		<div id="root"></div>

package/dist/tldraw/translations/main.json CHANGED Viewed

@@ -245,6 +245,7 @@
 	"menu.file": "File",
 	"menu.language": "Language",
 	"menu.preferences": "Preferences",
+	"menu.help": "Help",
 	"menu.view": "View",
 	"context-menu.edit": "Edit",
 	"context-menu.arrange": "Arrange",
@@ -295,6 +296,7 @@
 	"people-menu.invite": "Invite others",
 	"help-menu.title": "Help and resources",
 	"help-menu.about": "About",
+	"help-menu.docs": "Documentation & API",
 	"help-menu.discord": "Discord",
 	"help-menu.github": "GitHub",
 	"help-menu.keyboard-shortcuts": "Keyboard shortcuts",

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@kitschpatrol/tldraw-cli",
-  "version": "4.6.8",
+  "version": "4.6.10",
   "type": "module",
   "description": "A CLI tool for exporting tldraw sketch URLs and local .tldr files to SVG or PNG images.",
   "repository": {
@@ -44,16 +44,16 @@
     "npm-package"
   ],
   "dependencies": {
-    "@fontsource/inter": "^5.0.19",
+    "@fontsource/inter": "^5.0.20",
     "express": "^4.19.2",
-    "puppeteer": "^22.13.0",
-    "uint8array-extras": "^1.3.0",
+    "puppeteer": "^22.15.0",
+    "uint8array-extras": "^1.4.0",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
     "@kitschpatrol/shared-config": "^4.7.2",
     "@sindresorhus/slugify": "^2.2.1",
-    "@tldraw/assets": "2.4.0-canary.922dd416b17f",
+    "@tldraw/assets": "2.4.3",
     "@types/express": "^4.17.21",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
@@ -64,25 +64,25 @@
     "cheerio": "1.0.0-rc.12",
     "esbuild": "^0.23.0",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.8",
+    "eslint-plugin-react-refresh": "^0.4.9",
     "get-port": "^7.1.0",
     "nanoid": "^5.0.7",
     "open": "^10.1.0",
-    "path-type": "^5.0.0",
+    "path-type": "^6.0.0",
     "plur": "^5.1.0",
-    "pretty-ms": "^9.0.0",
+    "pretty-ms": "^9.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "safe-stable-stringify": "^2.4.3",
     "sharp": "^0.33.4",
     "sharp-phash": "^2.1.0",
     "strip-ansi": "^7.1.0",
-    "tldraw": "2.4.0-canary.922dd416b17f",
-    "tsx": "^4.16.2",
-    "typescript": "^5.5.3",
+    "tldraw": "2.4.3",
+    "tsx": "^4.16.3",
+    "typescript": "^5.5.4",
     "untildify": "^5.0.0",
-    "vite": "^5.3.3",
-    "vitest": "^2.0.2"
+    "vite": "^5.3.5",
+    "vitest": "^2.0.5"
   },
   "publishConfig": {
     "access": "public"

package/readme.md CHANGED Viewed

@@ -28,6 +28,7 @@
 - [Usage](#usage)
   - [CLI](#cli)
   - [API](#api)
+  - [Common workflows](#common-workflows)
 - [Background](#background)
 - [Implementation notes](#implementation-notes)
 - [The future](#the-future)
@@ -431,6 +432,66 @@ Returns a live "share" url for a given local or remote tldraw sketch URL.
 > \[!CAUTION]
 > Passing a local .tldr file to this function will upload and share your local file to tldraw\.com.
+### Common workflows
+If you're working with .tldr files and `tldraw-cli` locally, it's often convenient to automatically export image files from your sketches whenever they've changed.
+Depending on your workspace and particularly use-cases, there are several approaches that can work well to trigger re-export on change:
+#### A pure CLI workflow
+The [`chokidar-cli`](https://www.npmjs.com/package/chokidar-cli) tool (which wraps the [Chokidar](https://github.com/paulmillr/chokidar) library) makes quick work of this:
+```sh
+npx chokidar-cli "**/*.tldr" -c "npx @kitschpatrol/tldraw-cli export ${path}"
+```
+This will watch for changes to .tldr files anywhere in or below the current directory, and then export an SVG every time they change. Pass [additional flags](#subcommand-tldraw-export) to `tldraw-cli export` if you need particular export settings.
+#### VS Code tldraw extension workflow
+The [tldraw extension for VS Code](https://marketplace.visualstudio.com/items?itemName=tldraw-org.tldraw-vscode) allows you to edit local .tldr files directly from a tab in your editor. This combines well with the [File Watcher](https://marketplace.visualstudio.com/items?itemName=appulate.filewatcher) extension to trigger re-exports after making edits in a tldraw tab:
+Install the extensions (assuming you have `code` in your path):
+```sh
+code --install-extension tldraw-org.tldraw-vscode
+code --install-extension appulate.filewatcher
+```
+Then configure your workspace's `.vscode/settings.json` file to include the following:
+```json
+{
+  "filewatcher.commands": [
+    {
+      "match": "\\.tldr",
+      "isAsync": true,
+      "cmd": "cd ${workspaceRoot} && npx @kitschpatrol/tldraw-cli export ${file}",
+      "event": "onFileChange"
+    }
+  ]
+}
+```
+#### Vite / static-site workflow
+If you're using one of the many [Vite](https://vitejs.dev/)-powered web frameworks out there, the [`@kitschpatrol/vite-plugin-tldraw`](https://github.com/kitschpatrol/vite-plugin-tldraw) plugin can help you treat .tldr as regular importable / linkable assets in your site by automating conversion to a web-friendly format during both development and production builds of your site.
+See the [plugin's readme](https://github.com/kitschpatrol/vite-plugin-tldraw/blob/main/readme.md) for details, but the gist is that it lets you import and use .tldr files as if they were already SVGs:
+```ts
+import tldrFile from './test-sketch.tldr'
+document.body.innerHTML = `<img src="${tldrFile}">`
+```
+Will render:
+```html
+<img src="./test-sketch.svg" />
+```
 ## Background
 The potential utility of a tldraw CLI app has received mention a few times.