Updates

yuanqing · Dec 9, 2023 · fd9ab92 · fd9ab92
1 parent ae865df
commit fd9ab92
Show file tree

Hide file tree

Showing 387 changed files with 799 additions and 1,085 deletions.
diff --git a/configuration/index.html b/configuration/index.html
diff --git a/index.html b/index.html
diff --git a/quick-start/index.html b/quick-start/index.html
diff --git a/recipes/index.html b/recipes/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Recipes — Create Figma Plugin</title><meta name="description"content="The comprehensive toolkit for developing plugins and widgets for Figma and FigJam"><meta name="twitter:card"content="summary_large_image"><meta name="twitter:description"content="The comprehensive toolkit for developing plugins and widgets for Figma and FigJam"><meta name="twitter:image"content="https://yuanqing.github.io/create-figma-plugin/media/share-recipes.png"><meta name="twitter:title"content="Recipes — Create Figma Plugin"><meta name="viewport"content="width=device-width,initial-scale=1"><meta property="og:description"content="The comprehensive toolkit for developing plugins and widgets for Figma and FigJam"><meta property="og:image"content="https://yuanqing.github.io/create-figma-plugin/media/share-recipes.png"><meta property="og:title"content="Recipes — Create Figma Plugin"><link href="/create-figma-plugin/style.css"rel="stylesheet"><link rel="icon"href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cstyle%3E circle %7B fill: %23000; %7D @media (prefers-color-scheme: dark) %7B circle %7B fill: %23fff; %7D %7D %3C/style%3E%3Ccircle cx='50' cy='50' r='50' /%3E%3C/svg%3E%0A"></head><body class="page"><div class="page__skip-to-content"><a href="#content">Skip to content</a></div><header class="page__header"><h1 class="title"><a href="/create-figma-plugin/">Create Figma Plugin</a></h1><button class="menu-toggle-button"aria-expanded="false"><div class="menu-toggle-button__inner">Toggle menu</div><svg fill="none"viewBox="0 0 20 20"class="menu-toggle-button__svg-menu"><path fill-rule="evenodd"d="M0 3.25h20v1.5H0v-1.5Zm0 6h20v1.5H0v-1.5Zm20 6H0v1.5h20v-1.5Z"clip-rule="evenodd"/></svg> <svg fill="none"viewBox="0 0 20 20"class="menu-toggle-button__svg-close"><path fill-rule="evenodd"d="M10 11.0607L16.4697 17.5303L17.5303 16.4697L11.0607 10L17.5303 3.53033L16.4697 2.46967L10 8.93934L3.53033 2.46967L2.46967 3.53033L8.93934 10L2.46967 16.4697L3.53033 17.5303L10 11.0607Z"clip-rule="evenodd"/></svg></button><nav class="menu"><ul><li><a href="/create-figma-plugin/">Introduction</a></li><li><a href="/create-figma-plugin/quick-start/">Quick start</a></li><li><a href="/create-figma-plugin/configuration/">Configuration</a></li><li><a href="/create-figma-plugin/ui/">UI</a></li><li><a href="/create-figma-plugin/utilities/">Utilities</a></li><li><a href="/create-figma-plugin/recipes/"class="menu__active">Recipes</a><div class="menu__toc"><h2 class="menu__toc-header">On this page</h2><ul><li><a href="#passing-data-between-the-plugin-widgets-main-and-ui-contexts">Passing data between the plugin/widget’s main and UI contexts</a></li><li><a href="#specifying-multiple-commands-in-the-plugin-sub-menu">Specifying multiple commands in the plugin sub-menu</a></li><li><a href="#configuring-relaunch-buttons">Configuring relaunch buttons</a></li><li><a href="#using-image-assets-in-your-plugin-widget-ui">Using image assets in your plugin/widget UI</a></li><li><a href="#making-the-plugin-widget-ui-window-resizable">Making the plugin/widget UI window resizable</a></li><li><a href="#customizing-the-build">Customizing the build</a><ul><li><a href="#customizing-the-underlying-esbuild-configuration">Customizing the underlying esbuild configuration</a><ul><li><a href="#disabling-automatic-swapping-of-react-imports">Disabling automatic swapping of React imports</a></li></ul></li><li><a href="#customizing-the-manifest-json-file">Customizing the <code>manifest.json</code> file</a></li></ul></li></ul></div></li><li><a href="/create-figma-plugin/reference-plugins-and-widgets/">Reference plugins/widgets</a></li></ul><ul><li><a href="/create-figma-plugin/storybook/"target="_blank">Storybook</a></li><li><a href="https://github.com/yuanqing/create-figma-plugin/blob/main/CHANGELOG.md#readme"target="_blank">Changelog</a></li><li><a href="https://github.com/yuanqing/create-figma-plugin"target="_blank">GitHub</a></li><li><a href="https://twitter.com/yuanqinglim"target="_blank">@yuanqinglim</a></li></ul><ul><li><a href="https://figma.com/plugin-docs/"target="_blank">Plugin API docs</a></li><li><a href="https://figma.com/widget-docs/"target="_blank">Widget API docs</a></li></ul><div class="menu__version">v3.0.2</div></nav></header><main role="main"class="page__main"><div class="page__main-inner"><div class="content"id="content"><h1>Recipes</h1><h2 id="passing-data-between-the-plugin-widgets-main-and-ui-contexts">Passing data between the plugin/widget’s main and UI contexts<a aria-hidden class="header-link"tabindex="-1"href="#passing-data-between-the-plugin-widgets-main-and-ui-contexts">#</a></h2><p>The <a href="/create-figma-plugin/utilities/"><code>@create-figma-plugin/utilities</code></a> library includes 3 functions to facilitate data passing (in both directions) between the plugin/widget’s <a href="https://figma.com/plugin-docs/how-plugins-run/"target="_blank">main and UI contexts</a>:</p><ul><li><a href="/create-figma-plugin/utilities/#onhandlername-handler"><code>on(name, handler)</code></a> — Registers an event <code>handler</code> for the given event <code>name</code>.</li><li><a href="/create-figma-plugin/utilities/#oncehandlername-handler"><code>once(name, handler)</code></a> — Ditto <code>on</code>, only that <code>handler</code> will run at most once.</li><li><a href="/create-figma-plugin/utilities/#emithandlername-args"><code>emit(name, ...args)</code></a> — Calling <code>emit</code> in the main context invokes the event handler for the matching event <code>name</code> in your UI. Correspondingly, calling <code>emit</code> in your UI invokes the event handler for the matching event <code>name</code> in the main context. All <code>args</code> passed after <code>name</code> will be directly <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply"target="_blank">applied</a> on the event handler.</li></ul><p>Consider a toy Figma plugin:</p><div data-rehype-pretty-code-fragment=""><pre data-language="ts"data-theme="default"><code data-language="ts"data-theme="default"><span class="line"><span style="color:#878787">// src/main.ts</span></span>
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Recipes — Create Figma Plugin</title><meta name="description"content="The comprehensive toolkit for developing plugins and widgets for Figma and FigJam"><meta name="twitter:card"content="summary_large_image"><meta name="twitter:description"content="The comprehensive toolkit for developing plugins and widgets for Figma and FigJam"><meta name="twitter:image"content="https://yuanqing.github.io/create-figma-plugin/media/share-recipes.png"><meta name="twitter:title"content="Recipes — Create Figma Plugin"><meta name="viewport"content="width=device-width,initial-scale=1"><meta property="og:description"content="The comprehensive toolkit for developing plugins and widgets for Figma and FigJam"><meta property="og:image"content="https://yuanqing.github.io/create-figma-plugin/media/share-recipes.png"><meta property="og:title"content="Recipes — Create Figma Plugin"><link href="/create-figma-plugin/style.css"rel="stylesheet"><link rel="icon"href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cstyle%3E circle %7B fill: %23000; %7D @media (prefers-color-scheme: dark) %7B circle %7B fill: %23fff; %7D %7D %3C/style%3E%3Ccircle cx='50' cy='50' r='50' /%3E%3C/svg%3E%0A"></head><body class="page"><div class="page__skip-to-content"><a href="#content">Skip to content</a></div><header class="page__header"><h1 class="title"><a href="/create-figma-plugin/">Create Figma Plugin</a></h1><button class="menu-toggle-button"aria-expanded="false"><div class="menu-toggle-button__inner">Toggle menu</div><svg fill="none"viewBox="0 0 20 20"class="menu-toggle-button__svg-menu"><path fill-rule="evenodd"d="M0 3.25h20v1.5H0v-1.5Zm0 6h20v1.5H0v-1.5Zm20 6H0v1.5h20v-1.5Z"clip-rule="evenodd"/></svg> <svg fill="none"viewBox="0 0 20 20"class="menu-toggle-button__svg-close"><path fill-rule="evenodd"d="M10 11.0607L16.4697 17.5303L17.5303 16.4697L11.0607 10L17.5303 3.53033L16.4697 2.46967L10 8.93934L3.53033 2.46967L2.46967 3.53033L8.93934 10L2.46967 16.4697L3.53033 17.5303L10 11.0607Z"clip-rule="evenodd"/></svg></button><nav class="menu"><ul><li><a href="/create-figma-plugin/">Introduction</a></li><li><a href="/create-figma-plugin/quick-start/">Quick start</a></li><li><a href="/create-figma-plugin/configuration/">Configuration</a></li><li><a href="/create-figma-plugin/ui/">UI</a></li><li><a href="/create-figma-plugin/utilities/">Utilities</a></li><li><a href="/create-figma-plugin/recipes/"class="menu__active">Recipes</a><div class="menu__toc"><h2 class="menu__toc-header">On this page</h2><ul><li><a href="#passing-data-between-the-plugin-widgets-main-and-ui-contexts">Passing data between the plugin/widget’s main and UI contexts</a></li><li><a href="#specifying-multiple-commands-in-the-plugin-sub-menu">Specifying multiple commands in the plugin sub-menu</a></li><li><a href="#configuring-relaunch-buttons">Configuring relaunch buttons</a></li><li><a href="#using-image-assets-in-your-plugin-widget-ui">Using image assets in your plugin/widget UI</a></li><li><a href="#making-the-plugin-widget-ui-window-resizable">Making the plugin/widget UI window resizable</a></li><li><a href="#customizing-the-build">Customizing the build</a><ul><li><a href="#customizing-the-underlying-esbuild-configuration">Customizing the underlying esbuild configuration</a><ul><li><a href="#disabling-automatic-swapping-of-react-imports">Disabling automatic swapping of React imports</a></li></ul></li><li><a href="#customizing-the-manifest-json-file">Customizing the <code>manifest.json</code> file</a></li></ul></li></ul></div></li><li><a href="/create-figma-plugin/reference-plugins-and-widgets/">Reference plugins/widgets</a></li></ul><ul><li><a href="/create-figma-plugin/storybook/"target="_blank">Storybook</a></li><li><a href="https://github.com/yuanqing/create-figma-plugin/blob/main/CHANGELOG.md#readme"target="_blank">Changelog</a></li><li><a href="https://github.com/yuanqing/create-figma-plugin"target="_blank">GitHub</a></li><li><a href="https://twitter.com/yuanqinglim"target="_blank">@yuanqinglim</a></li></ul><ul><li><a href="https://figma.com/plugin-docs/"target="_blank">Plugin API docs</a></li><li><a href="https://figma.com/widget-docs/"target="_blank">Widget API docs</a></li></ul><div class="menu__version">v3.1.0</div></nav></header><main role="main"class="page__main"><div class="page__main-inner"><div class="content"id="content"><h1>Recipes</h1><h2 id="passing-data-between-the-plugin-widgets-main-and-ui-contexts">Passing data between the plugin/widget’s main and UI contexts<a aria-hidden class="header-link"tabindex="-1"href="#passing-data-between-the-plugin-widgets-main-and-ui-contexts">#</a></h2><p>The <a href="/create-figma-plugin/utilities/"><code>@create-figma-plugin/utilities</code></a> library includes 3 functions to facilitate data passing (in both directions) between the plugin/widget’s <a href="https://figma.com/plugin-docs/how-plugins-run/"target="_blank">main and UI contexts</a>:</p><ul><li><a href="/create-figma-plugin/utilities/#onhandlername-handler"><code>on(name, handler)</code></a> — Registers an event <code>handler</code> for the given event <code>name</code>.</li><li><a href="/create-figma-plugin/utilities/#oncehandlername-handler"><code>once(name, handler)</code></a> — Ditto <code>on</code>, only that <code>handler</code> will run at most once.</li><li><a href="/create-figma-plugin/utilities/#emithandlername-args"><code>emit(name, ...args)</code></a> — Calling <code>emit</code> in the main context invokes the event handler for the matching event <code>name</code> in your UI. Correspondingly, calling <code>emit</code> in your UI invokes the event handler for the matching event <code>name</code> in the main context. All <code>args</code> passed after <code>name</code> will be directly <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply"target="_blank">applied</a> on the event handler.</li></ul><p>Consider a toy Figma plugin:</p><div data-rehype-pretty-code-fragment=""><pre data-language="ts"data-theme="default"><code data-language="ts"data-theme="default"><span class="line"><span style="color:#878787">// src/main.ts</span></span>
 <span class="line"> </span>
 <span class="line"><span style="color:#7cc4f8">import</span><span style="color:#d4d4d4"> {</span></span>
 <span class="line"><span style="color:#d4d4d4">  once,</span></span>

diff --git a/reference-plugins-and-widgets/index.html b/reference-plugins-and-widgets/index.html
diff --git a/storybook/assets/banner-0efaf16b.js.map b/storybook/assets/banner-0efaf16b.js.map
diff --git a/storybook/assets/banner-0efaf16b.js → storybook/assets/banner-_WMKvoGx.js b/storybook/assets/banner-0efaf16b.js → storybook/assets/banner-_WMKvoGx.js
diff --git a/storybook/assets/banner-464dc457.css → storybook/assets/banner-w3c3sfs4.css b/storybook/assets/banner-464dc457.css → storybook/assets/banner-w3c3sfs4.css
diff --git a/storybook/assets/banner.stories-8ad76332.js.map b/storybook/assets/banner.stories-8ad76332.js.map
diff --git a/storybook/assets/banner.stories-8ad76332.js → storybook/assets/banner.stories-Mcfai9vy.js b/storybook/assets/banner.stories-8ad76332.js → storybook/assets/banner.stories-Mcfai9vy.js
diff --git a/storybook/assets/bold-Jm537La9.js b/storybook/assets/bold-Jm537La9.js
diff --git a/storybook/assets/bold-fe504295.js b/storybook/assets/bold-fe504295.js
diff --git a/storybook/assets/bold-fe504295.js.map b/storybook/assets/bold-fe504295.js.map
diff --git a/storybook/assets/bold-bec3b1f9.css → storybook/assets/bold-jfQ55EAv.css b/storybook/assets/bold-bec3b1f9.css → storybook/assets/bold-jfQ55EAv.css
diff --git a/storybook/assets/bold.stories-5a775a7f.js.map b/storybook/assets/bold.stories-5a775a7f.js.map
diff --git a/storybook/assets/bold.stories-5a775a7f.js → storybook/assets/bold.stories-H_NR_i94.js b/storybook/assets/bold.stories-5a775a7f.js → storybook/assets/bold.stories-H_NR_i94.js
@@ -1,6 +1,5 @@
-import{T as s}from"./text-72c2365d.js";import{B as a}from"./bold-fe504295.js";import{o as t}from"./jsxRuntime.module-632ba37d.js";import"./create-class-name-71c46838.js";import"./create-component-b0512abd.js";import"./preact.module-fa42f7d1.js";const u={title:"Inline Text/Bold"},r=function(){return t(s,{children:t(a,{children:"Text"})})};var e,o,n;r.parameters={...r.parameters,docs:{...(e=r.parameters)==null?void 0:e.docs,source:{originalSource:`function () {
+import{T as s}from"./text-SssoFudj.js";import{B as a}from"./bold-Jm537La9.js";import{u as t}from"./jsxRuntime.module-mP9ZGqev.js";import"./create-class-name-gq91Tlk7.js";import"./create-component-a83A1_Pu.js";import"./preact.module-pS-_M4k6.js";const u={title:"Inline Text/Bold"},r=function(){return t(s,{children:t(a,{children:"Text"})})};var e,o,n;r.parameters={...r.parameters,docs:{...(e=r.parameters)==null?void 0:e.docs,source:{originalSource:`function () {
   return <Text>
       <Bold>Text</Bold>
     </Text>;
 }`,...(n=(o=r.parameters)==null?void 0:o.docs)==null?void 0:n.source}}};const f=["Default"];export{r as Default,f as __namedExportsOrder,u as default};
-//# sourceMappingURL=bold.stories-5a775a7f.js.map