Releases: pocka/figspec
v2.0.4
v2.0.3
v1.0.3
v2.0.2
Fixed
- Built files use extension-less imports even though package is
type: "module"(pocka/figspec-react#1)
v2.0.1
v2.0.0
Notable changes
The main focus of this release is rewrite to plain DOM architecture, to improve performance and make the package dependency-free. As a side-effect of the process, UI overhaul and CSS tidy-up has been made.
Efficient rendering
Prior to this version, Figspec has used Lit for rendering/state management. However, using Lit for this project became pain quickly performance-wise and architecture-wise.
The most painful point is the React-like "render the whole-tree every updates" approach. Even the updates to DOM is minimized, the cost of running render function is exceptionally high, especially large and/or complex files (#30).
Now, Figspec uses plain DOM operations (e.g. document.createElement, Node.prototype.insertBefore) for its UI and renderer, with a thin wrapper for element creation. For where reactive-update is necessary, Signal based update mechanism is used. Signal is essentially Observable but implicit and easier to use.
Although the performance is not good for large files due to browsers' SVG rendering capacity, I would say Figspec itself is sufficiently optimized. (I couldn't put performance measurement comparisons because I don't know how to reliably measure click-to-update performance. Duration for script running time is dramatically reduced as far as I could see)
Preferences is set by a user, not by a page author
Each components had been exposed panSpeed and zoomSpeed properties along with corresponding attributes. However, these are user preferences, not file/frame settings. Figspec v2 distinct preferences and settings.
- Settings are set by a page author (who put
<figspec-*-viewer>to the page). - Preferences are set by a user in UI inside Figspec.
Changes made to the preferences are notified via preferencesupdate events. It's the page author's responsibility to persist/restore user's preferences. Below is a sample code to persist user's preference to browser's local storage.
const figspec = document.getElementById("figspec_file");
const FIGSPEC_PREFERENCES_KEY = "figspec_preferences";
const savedPreferences = localStorage.getItem(FIGSPEC_PREFERENCES_KEY);
if (savedPreferences) {
try {
const pref = JSON.parse(savedPreferences);
figspec.preferences = pref;
} catch (error) {
console.warn("Saved Figspec preference is not valid JSON data");
}
}
figspec.addEventListener("preferencesupdate", ev => {
localStorage.setItem(
FIGSPEC_PREFERENCES_KEY,
JSON.stringify(ev.detail.preferences)
);
});This version also brings additional preference field such as CSS length unit or color notation.
Customising / Theming
Whole CSS is rewritten to use CSS custom property extensibly. You can now customise almost all of UI colors and sizes via CSS custom properties. HTML docs also have new section listing available CSS custom properties.
CHANGELOG
Removed
nodesattribute andrendered-imageattribute (<figspec-frame-viewer>).document-nodeattribute andrendered-imagesattribute (<figspec-file-viewer>).scalechangeevent andpositionchangeevent.panSpeedproperty and correspondingpan-speedattribute.zoomSpeedproperty and correspondingzoom-speedattribute.zoomMarginproperty and correspondingzoom-marginattribute.- CommonJS files. This package is now ESM only.
Changed
nodesproperty ofFigspecFrameViewerhas been renamed toapiResponse.documentNodeproperty ofFigspecFileViewerhas been renamed toapiResponse.- Footer link has been moved to info page.
Added
preferencesproperty andpreferencesupdateevent.- Info page and preference page.
- CSS code generation for
text-transform,filter, andbackdrop-filterproperties. - Dark mode UI.
- Display feedback UI when clipboard copy succeeded or failed.
Fixed
- Inefficient rendering causes performance problems, notably on complex or large frames/files (#30 ).
- TypeScript typing is now fully working without installing
figma-jslibrary. - Only the foreground color inherits value, causing the text unreadable when the page containing Figspec components set
colorto white or brighter color. Both foreground and background color is now explicitly set by Figspec components. - Some action UI elements (e.g. button) being not focusable. Every action UI elements are now focusable and
:focus-visiblestyle set.
