manifest.jsonのeditorTypeの追加依頼

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 <your project name>
+    git clone https://github.com/kazuyaseki/react-figma-plugin-boilerplate.git <your project name>
     ````
 
 - install node modules either with `Yarn` or `npm`

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"
-}
+}

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",

src/App.tsx

@@ -1,12 +1,7 @@
 import * as React from 'react';
-import { Page, Rectangle, Text } from 'react-figma';
 
 export const App = () => {
     return (
-        <Page isCurrent name="Page X">
-            <Text characters="Hello, react-figma!"/>
-            <Rectangle style={{ width: 200, height: 100, backgroundColor: '#0ddd25' }} />
-            <Rectangle style={{ width: 200, height: 100, backgroundColor: '#a6dd00' }} />
-        </Page>
+        <div>Hello, Figma Plugin with React</div>
     );
 };

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.showUI(__html__);
 
-figma.ui.onmessage = message => {
+figma.ui.onmessage = (message) => {
   subscribeOnMessages(message);
 };
-
-render(<App />, figma.root);
-

src/ui.html

@@ -0,0 +1 @@
+<div id="app"></div>

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(<App />, document.getElementById('app'));

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"