From 60a76e2dc825b3e52919d51c4ae1318de27431bb Mon Sep 17 00:00:00 2001 From: kazuyaseki Date: Sun, 5 Apr 2020 00:30:34 +0900 Subject: [PATCH 1/4] install react-dom --- package.json | 2 ++ yarn.lock | 43 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 45 insertions(+) diff --git a/package.json b/package.json index af19e41..5acc1b1 100644 --- a/package.json +++ b/package.json @@ -21,10 +21,12 @@ "license": "ISC", "dependencies": { "react": "^16.9.0", + "react-dom": "^16.13.1", "react-figma": "latest", "yoga-layout-prebuilt": "^1.9.3" }, "devDependencies": { + "@types/react-dom": "^16.9.6", "html-webpack-inline-source-plugin": "^0.0.10", "html-webpack-plugin": "^3.2.0", "react-figma-webpack-config": "latest", diff --git a/yarn.lock b/yarn.lock index 54d5a2c..a42be5f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,26 @@ # yarn lockfile v1 +"@types/prop-types@*": + version "15.7.3" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7" + integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw== + +"@types/react-dom@^16.9.6": + version "16.9.6" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.6.tgz#9e7f83d90566521cc2083be2277c6712dcaf754c" + integrity sha512-S6ihtlPMDotrlCJE9ST1fRmYrQNNwfgL61UB4I1W7M6kPulUKx9fXAleW5zpdIjUQ4fTaaog8uERezjsGUj9HQ== + dependencies: + "@types/react" "*" + +"@types/react@*": + version "16.9.32" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.32.tgz#f6368625b224604148d1ddf5920e4fefbd98d383" + integrity sha512-fmejdp0CTH00mOJmxUPPbWCEBWPvRIL4m8r0qD+BSDUqmutPyGQCHifzMpMzdvZwROdEdL78IuZItntFWgPXHQ== + dependencies: + "@types/prop-types" "*" + csstype "^2.2.0" + "@webassemblyjs/ast@1.8.5": version "1.8.5" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359" @@ -770,6 +790,11 @@ css-what@2.1: resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2" integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg== +csstype@^2.2.0: + version "2.6.10" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b" + integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w== + cyclist@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9" @@ -2559,6 +2584,16 @@ rc@^1.2.7: minimist "^1.2.0" strip-json-comments "~2.0.1" +react-dom@^16.13.1: + version "16.13.1" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f" + integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + prop-types "^15.6.2" + scheduler "^0.19.1" + react-fetch-hook@1.7.2: version "1.7.2" resolved "https://registry.yarnpkg.com/react-fetch-hook/-/react-fetch-hook-1.7.2.tgz#5aaddea774746f8e19fc3157248575d140d92108" @@ -2787,6 +2822,14 @@ scheduler@^0.17.0: loose-envify "^1.1.0" object-assign "^4.1.1" +scheduler@^0.19.1: + version "0.19.1" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196" + integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + schema-utils@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770" From e51f02e162f86324c9d2d1a9c56de2cfb7291d29 Mon Sep 17 00:00:00 2001 From: kazuyaseki Date: Sun, 5 Apr 2020 00:39:31 +0900 Subject: [PATCH 2/4] modified to render Figma plugin content with React --- README.md | 12 ++++-------- src/App.tsx | 7 +------ src/code.tsx | 9 ++------- src/ui.html | 1 + src/ui.tsx | 6 ++++++ 5 files changed, 14 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 8081a46..6ec7564 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,12 @@ -# react-figma boilerplate -A basic template to start working with [react-figma](https://www.npmjs.com/package/react-figma) package +# react-figma-plugin boilerplate +This is a fork of [react-figma boilerplate](https://github.com/react-figma/react-figma-boilerplate). -The template includes: - -- Basic file structure -- TypeScript configuration -- Webpack configuration +This boilerplate is intended to make it easier to create UI for figma plugin with React. ## Quick start - clone repository from GitHub ```` - git clone https://github.com/react-figma/react-figma-boilerplate.git + git clone https://github.com/kazuyaseki/react-figma-plugin-boilerplate.git ```` - install node modules either with `Yarn` or `npm` diff --git a/src/App.tsx b/src/App.tsx index 218ad29..9667ca7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,12 +1,7 @@ import * as React from 'react'; -import { Page, Rectangle, Text } from 'react-figma'; export const App = () => { return ( - - - - - +
Hello, Figma Plugin with React
); }; diff --git a/src/code.tsx b/src/code.tsx index 3ebaf70..54a3d1e 100644 --- a/src/code.tsx +++ b/src/code.tsx @@ -1,12 +1,7 @@ -import * as React from 'react'; -import { render, subscribeOnMessages } from 'react-figma'; -import { App } from './App'; +import { subscribeOnMessages } from 'react-figma'; figma.showUI(__html__, { visible: false }); figma.ui.onmessage = message => { subscribeOnMessages(message); -}; - -render(, figma.root); - +}; \ No newline at end of file diff --git a/src/ui.html b/src/ui.html index e69de29..865e670 100644 --- a/src/ui.html +++ b/src/ui.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/src/ui.tsx b/src/ui.tsx index 80df07d..6a65d24 100644 --- a/src/ui.tsx +++ b/src/ui.tsx @@ -1,8 +1,14 @@ +import * as React from 'react'; +import * as ReactDom from 'react-dom'; import * as yoga from 'yoga-layout-prebuilt'; import { uiWorker } from 'react-figma'; +import { App } from './App'; + const handler = uiWorker({ yoga, fetch }); onmessage = event => { handler(event); }; + +ReactDom.render(, document.getElementById('app')); From bd90b2da58834b141b98c261ce129b90fdca131b Mon Sep 17 00:00:00 2001 From: kazuyaseki Date: Mon, 6 Apr 2020 19:09:56 +0900 Subject: [PATCH 3/4] Fix not showing dialog --- src/code.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/code.tsx b/src/code.tsx index 54a3d1e..22f77d9 100644 --- a/src/code.tsx +++ b/src/code.tsx @@ -1,7 +1,7 @@ import { subscribeOnMessages } from 'react-figma'; -figma.showUI(__html__, { visible: false }); +figma.showUI(__html__); -figma.ui.onmessage = message => { +figma.ui.onmessage = (message) => { subscribeOnMessages(message); -}; \ No newline at end of file +}; From 216e96893bcbf8d77bec7fae0792cbd13a682c8b Mon Sep 17 00:00:00 2001 From: kazuyaseki Date: Mon, 6 Apr 2020 19:10:11 +0900 Subject: [PATCH 4/4] Modified default plugin name --- manifest.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/manifest.json b/manifest.json index 56bf78b..7fef68b 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { - "name": "react-figma-boilerplate", + "name": "react-figma-plugin-boilerplate", "id": "745995778738837862", "api": "1.0.0", "main": "dist/code.js", "ui": "dist/ui.html" -} \ No newline at end of file +}