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

• nodes attribute and rendered-image attribute (<figspec-frame-viewer>).
• document-node attribute and rendered-images attribute (<figspec-file-viewer>).
• scalechange event and positionchange event.
• panSpeed property and corresponding pan-speed attribute.
• zoomSpeed property and corresponding zoom-speed attribute.
• zoomMargin property and corresponding zoom-margin attribute.
• CommonJS files. This package is now ESM only.

Changed

• nodes property of FigspecFrameViewer has been renamed to apiResponse.
• documentNode property of FigspecFileViewer has been renamed to apiResponse.
• Footer link has been moved to info page.

Added

• preferences property and preferencesupdate event.
• Info page and preference page.
• CSS code generation for text-transform, filter, and backdrop-filter properties.
• 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-js library.
• Only the foreground color inherits value, causing the text unreadable when the page containing Figspec components set color to 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-visible style set.