Security News
RubyGems.org Adds New Maintainer Role
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
@kitschpatrol/vite-plugin-tldraw
Advanced tools
Vite plugin enabling module-like import of local tldraw .tldr files with automatic conversion to SVG or PNG.
Vite plugin enabling module-like import of local tldraw .tldr files with automatic conversion to SVG or PNG.
A Vite plugin to automate the import and conversion of local tldraw .tldr
files into SVG or PNG image assets.
This allows .tldr
files to be imported just like regular .webp
, .jpeg
etc. files in Vite-powered projects:
// main.ts
import tldrImage from './assets/test-sketch.tldr'
const body = document.querySelector<HTMLDivElement>('body')
if (body) body.innerHTML = `<img src="${tldrImage}" />`
The above transforms ./assets/test-sketch.tldr
into ./assets/test-sketch-{hash}.svg
, caches the output file, and then returns an SVG URL ready to be passed to an img
element's src
attribute.
The plugin provides a global configuration object to customize of several aspects of the conversion process, and also allows overrides on a per-import basis via query parameters on the asset import path, e.g.:
import tldrImage from './assets/test-sketch.tldr?format=png&tldr'
For lower-level processing of .tldr
files in Node projects or via the command line, please see @kitschpatrol/tldraw-cli.
Assuming you're starting with a Vite project of some flavor:
npm install --save-dev @kitschpatrol/vite-plugin-tldraw
vite.config
file// vite.config.ts
import tldraw from '@kitschpatrol/vite-plugin-tldraw'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [tldraw()],
})
Skip this step if you're using plain JavaScript.
Add the extension declarations to your types in tsconfig.json:
{
"compilerOptions": {
"types": ["@kitschpatrol/vite-plugin-tldraw/ext"]
}
}
Alternately, you can add a triple-slash package dependency directive to your global types file (e.g. env.d.ts
or similar):
/// <reference types="@kitschpatrol/vite-plugin-tldraw/ext" />
This step should take care of errors like:
Cannot find module './assets/test-sketch.tldr' or its corresponding type declarations.ts(2307)
Save your tldraw project to a .tldr
file.
Add it to your project, most likely in an assets
folder.
Then simply import the .tldr
file to get a working asset URL:
// example.ts
import tldrImage from './assets/test-sketch.tldr'
// Logs a working SVG URL
console.log(tldrImage)
See the sections below for additional conversion options.
vite-plugin-tldraw
inherits most of the configuration flags available in @kitschpatrol/tldraw-cli.
TldrawPluginOptions
Key | Type | Description | Default |
---|---|---|---|
defaultImageOptions | TldrawImageOptions | Default options object for all the image conversion process. See section below for more detail. | See section below |
cacheEnabled | boolean | Caches generated image files. Hashes based on the source .tldr content and any TldrawImageOptions or import query parameters ensure the cache regenerates as needed. Cached files are stored in Vite's config.cacheDir (usually /node_modules/.vite ). | true |
verbose | boolean | Log information about the conversion process to the console. | false |
TldrawImageOptions
Key | Type | Description | Default |
---|---|---|---|
format | "png" | "svg" | Output image format. | "svg" |
transparent | boolean | Output image with a transparent background. | false |
dark | boolean | Output a dark theme version of the image. | false |
stripStyle | boolean | Remove <style> elements from SVG output, useful to lighten the load of embedded fonts or if you are providing your own stylesheet for the SVG. | false |
Configure the plugin to always generate PNGs with a transparent background, and to log conversion details:
// vite.config.ts
import tldraw from '@kitschpatrol/vite-plugin-tldraw'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
tldraw({
verbose: true,
format: 'png',
transparent: true,
}),
],
})
The @kitschpatrol/vite-plugin-tldraw
also exports TldrawPluginOptions
and TldrawImageOptions
types for your convenience.
Import directives may include query parameters to set image conversion options on a per-import basis.
Query parameters take precedence over TldrawPluginOptions
set at plugin instantiation in your vite.config.ts
.
Note: Due to constraints in TypeScript's module declaration wildcards, the import path must be suffixed with &tldr
or &tldraw
when query parameters are used.
In addition to all TldrawImageOptions
, query parameters also accept a frame
option:
Key | Type | Description | Default |
---|---|---|---|
frame | string | undefined | When defined, outputs only a specific frame from the .tldr file. Provide either the frame name or its shape ID, e.g. Frame 1 . Slugified frame names will also match, e.g. frame-1 . | undefined |
// example.ts
import tldrImagePng from './assets/test-sketch.tldr?format=png&tldr'
import tldrImageTransparentPng from './assets/test-sketch.tldr?format=png&transparent=true&tldr'
import tldrImageFrame from './assets/test-sketch-three-frames.tldr?frame=frame-1&tldr'
// Logs a PNG URL
console.log(tldrImagePng)
// Logs a transparent-background PNG URL
console.log(tldrImageTransparentPng)
// Logs an SVG URL for "Frame 1" in the source `.tldr`
console.log(tldrImageFrame)
This tool is not a part of the official tldraw project, and it is currently only tested and known to be compatible with tldraw 2.0.0-beta.2.
Behind the scenes, the plugin calls @kitschpatrol/tldraw-cli's Node API to generate image files from .tldr
files, and then passes the resulting URL as the value of the module import.
Because tldraw-cli
relies on the browser automation tool Puppeteer for its output, conversion can be a bit slow (on the order of a second or two), so by default generated image assets are cached to expedite subsequent builds.
During development, images are served from the cache, and when Vite builds for production the image files are bundled into the output with a hashed filename to simplify cache busting.
Possible paths for future improvements include the following:
Any other suggestions are welcome.
I'm consciously releasing this tool under the @kitschpatrol
namespace on NPM to leave the vite-plugin-tldraw
package name available to the core tldraw project.
Some links and issues from development are retained for my own reference below:
TypeScript module query parameter compatibility:
Vite asset plugin approach:
Vite asset Path issues:
Issues and pull requests are welcome.
MIT © Eric Mika
FAQs
Vite plugin enabling module-like import of local tldraw .tldr files with automatic conversion to SVG or PNG.
The npm package @kitschpatrol/vite-plugin-tldraw receives a total of 0 weekly downloads. As such, @kitschpatrol/vite-plugin-tldraw popularity was classified as not popular.
We found that @kitschpatrol/vite-plugin-tldraw demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.