Minor improvements (#100)

package.json

@@ -4,18 +4,17 @@
   "description": "Penpot exporter",
   "type": "module",
   "scripts": {
-    "build": "npm run build:ui && npm run build:main -- --minify",
+    "build": "concurrently -n widget,iframe 'npm:build:main' 'npm:build:ui'",
-    "build:main": "esbuild plugin-src/code.ts --bundle --outfile=dist/code.js --target=es2016",
+    "build:main": "esbuild plugin-src/code.ts --bundle --outfile=dist/code.js --target=es2016 --minify",
-    "build:ui": "vite build --minify esbuild --emptyOutDir=false",
+    "build:ui": "vite build",
-    "build:watch": "concurrently -n widget,iframe \"npm run build:main -- --watch\" \"npm run build:ui -- --watch\"",
+    "build:watch": "concurrently -n widget,iframe 'npm:build:main -- --watch' 'npm:build:ui -- --watch'",
-    "dev": "concurrently -n tsc,build,vite 'npm:tsc:watch' 'npm:build:watch' 'vite'",
+    "lint": "concurrently 'npm:lint:*'",
-    "lint": "concurrently \"npm:lint:*\"",
     "lint:eslint": "eslint .",
     "lint:stylelint": "stylelint ui-src/**.css",
     "lint:prettier": "prettier --check .",
     "lint:tsc-ui": "tsc -p ui-src/tsconfig.json --noEmit --pretty false",
     "lint:tsc-plugin": "tsc -p plugin-src/tsconfig.json --noEmit --pretty false",
-    "fix-lint": "concurrently \"npm:fix-lint:*\"",
+    "fix-lint": "concurrently 'npm:fix-lint:*'",
     "fix-lint:eslint": "eslint . --fix",
     "fix-lint:stylelint": "stylelint ui-src/**.css --fix",
     "fix-lint:prettier": "prettier --write ."
@@ -37,11 +36,11 @@
     "@changesets/cli": "^2.27",
     "@figma/eslint-plugin-figma-plugins": "^0.15",
     "@figma/plugin-typings": "^1.93",
-    "@preact/preset-vite": "^2.8",
     "@trivago/prettier-plugin-sort-imports": "^4.3",
     "@types/svg-path-parser": "^1.1",
     "@typescript-eslint/eslint-plugin": "^7.8",
     "@typescript-eslint/parser": "^7.8",
+    "@vitejs/plugin-react-swc": "^3.6",
     "concurrently": "^8.2",
     "esbuild": "^0.21",
     "eslint": "^8.57",

ui-src/App.tsx

@@ -4,8 +4,7 @@ import useResizeObserver from 'use-resize-observer';
 import Penpot from '@ui/assets/penpot.svg?react';
 import { PenpotExporter } from '@ui/components/PenpotExporter';
 import { Stack } from '@ui/components/Stack';
-
+import { Wrapper } from '@ui/components/Wrapper';
-import { Wrapper } from './components/Wrapper/Wrapper';
 
 // Safe default value to avoid overflowing from the screen
 const MAX_HEIGHT = 800;

ui-src/components/Wrapper/index.ts

@@ -0,0 +1 @@
+export * from './Wrapper';

ui-src/converters/createPenpotArtboard.ts

@@ -1,4 +1,4 @@
-import { PenpotFile } from '@ui/lib/penpot';
+import { PenpotFile } from '@ui/lib/types/penpotFile';
 import { FrameShape } from '@ui/lib/types/shapes/frameShape';
 
 import { createPenpotItem } from '.';

ui-src/converters/createPenpotCircle.ts

@@ -1,4 +1,4 @@
-import { PenpotFile } from '@ui/lib/penpot';
+import { PenpotFile } from '@ui/lib/types/penpotFile';
 import { CircleShape } from '@ui/lib/types/shapes/circleShape';
 
 import { translateFillGradients, translateUiBlendMode } from '../translators';

ui-src/converters/createPenpotFile.ts

@@ -1,4 +1,4 @@
-import { createFile } from '@ui/lib/penpot.js';
+import { createFile } from '@ui/lib/penpot';
 import { PenpotDocument } from '@ui/lib/types/penpotDocument';
 
 import { createPenpotPage } from '.';

ui-src/converters/createPenpotGroup.ts

@@ -1,4 +1,4 @@
-import { PenpotFile } from '@ui/lib/penpot';
+import { PenpotFile } from '@ui/lib/types/penpotFile';
 import { GroupShape } from '@ui/lib/types/shapes/groupShape';
 import { translateUiBlendMode } from '@ui/translators';
 

ui-src/converters/createPenpotItem.ts

@@ -1,4 +1,4 @@
-import { PenpotFile } from '@ui/lib/penpot';
+import { PenpotFile } from '@ui/lib/types/penpotFile';
 import { PenpotNode } from '@ui/lib/types/penpotNode';
 
 import {

ui-src/converters/createPenpotPage.ts

@@ -1,4 +1,4 @@
-import { PenpotFile } from '@ui/lib/penpot';
+import { PenpotFile } from '@ui/lib/types/penpotFile';
 import { PenpotPage } from '@ui/lib/types/penpotPage';
 
 import { createPenpotItem } from '.';

ui-src/converters/createPenpotPath.ts

@@ -1,4 +1,4 @@
-import { PenpotFile } from '@ui/lib/penpot';
+import { PenpotFile } from '@ui/lib/types/penpotFile';
 import { PathShape } from '@ui/lib/types/shapes/pathShape';
 import {
   translateFillGradients,

ui-src/converters/createPenpotRectangle.ts

@@ -1,4 +1,4 @@
-import { PenpotFile } from '@ui/lib/penpot';
+import { PenpotFile } from '@ui/lib/types/penpotFile';
 import { RectShape } from '@ui/lib/types/shapes/rectShape';
 import { translateFillGradients, translateUiBlendMode } from '@ui/translators';
 

ui-src/converters/createPenpotText.ts

@@ -1,4 +1,4 @@
-import { PenpotFile } from '@ui/lib/penpot';
+import { PenpotFile } from '@ui/lib/types/penpotFile';
 import {
   Paragraph,
   ParagraphSet,

ui-src/lib/penpot.d.ts

@@ -1,40 +1,3 @@
-import { PenpotPageOptions } from '@ui/lib/types/penpotPage';
+import { PenpotFile } from '@ui/lib/types/penpotFile';
-import { BoolShape } from '@ui/lib/types/shapes/boolShape';
-import { CircleShape } from '@ui/lib/types/shapes/circleShape';
-import { FrameShape } from '@ui/lib/types/shapes/frameShape';
-import { GroupShape } from '@ui/lib/types/shapes/groupShape';
-import { PathShape } from '@ui/lib/types/shapes/pathShape';
-import { RectShape } from '@ui/lib/types/shapes/rectShape';
-import { TextShape } from '@ui/lib/types/shapes/textShape';
-
-export interface PenpotFile {
-  addPage(name: string, options?: PenpotPageOptions): void;
-  closePage(): void;
-  addArtboard(artboard: FrameShape): void;
-  closeArtboard(): void;
-  addGroup(group: GroupShape): void;
-  closeGroup(): void;
-  addBool(bool: BoolShape): void;
-  closeBool(): void;
-  createRect(rect: RectShape): void;
-  createCircle(circle: CircleShape): void;
-  createPath(path: PathShape): void;
-  createText(options: TextShape): void;
-  // createSVG(svg: any): void;
-  // closeSVG(): void;
-  // addLibraryColor(color: any): void;
-  // updateLibraryColor(color: any): void;
-  // deleteLibraryColor(color: any): void;
-  // addLibraryTypography(typography: any): void;
-  // deleteLibraryTypography(typography: any): void;
-  // startComponent(component: any): void;
-  // finishComponent(): void;
-  // createComponentInstance(instance: any): void;
-  // lookupShape(shapeId: string): void;
-  // updateObject(id: string, object: any): void;
-  // deleteObject(id: string): void;
-  asMap(): unknown;
-  export(): void;
-}
 
 export function createFile(name: string): PenpotFile;

ui-src/lib/penpot.js

@@ -6866,4 +6866,3 @@ e.export=function(){return $V(function(a){if(B(a,P))return null;var b=y(a,0,null
 e.addLibraryColor=function(a){var b=this.file;a=LY(a);var c=T.W(a);c=g(c)?c:hJ();this.file=H.ba(M1(b,new f(null,2,[P,a3,QT,H.ba(a,T,c)],null)),f2,c);return k.W(f2.W(this.file))};e.updateLibraryColor=function(a){var b=this.file;a=LY(a);var c=Hj(T.W(a));this.file=H.ba(M1(b,new f(null,2,[P,m5,QT,H.ba(a,T,c)],null)),f2,T.W(a));return k.W(f2.W(this.file))};e.finishComponent=function(){return this.file=Gva(this.file)};e.closeSVG=function(){return this.file=m2(this.file)};
 e.addGroup=function(a){var b=this.file;a=LY(a);var c=P1.W(b);a=c2(LU(H.cb(a,P,YH,x([jU,c]))),b,YH);this.file=Ul.ea(b2(H.ba($1(b,a),f2,T.W(a)),Q.W(a)),X1,U1,T.W(a));return k.W(f2.W(this.file))};e.addLibraryMedia=function(a){var b=this.file;a=LY(a);var c=T.W(a);c=g(c)?c:hJ();this.file=H.ba(M1(b,new f(null,2,[P,E3,Vs,H.ba(a,T,c)],null)),f2,c);return k.W(f2.W(this.file))};e.asMap=function(){return vl(this.file)};
 e.addArtboard=function(a){var b=this.file;a=LY(a);a=c2(LU(H.ba(a,P,BQ)),b,BQ);this.file=Ul.ea(b2(H.ba(H.ba($1(b,a),P1,T.W(a)),f2,T.W(a)),Q.W(a)),X1,U1,T.W(a));return k.W(f2.W(this.file))};e.deleteObject=function(a){var b=this.file;a=Hj(a);var c=R1.W(b);return this.file=M1(b,new f(null,4,[P,g2,Q1,c,Z1,!0,T,a],null))};export const renderPage=function(a,b){b=Hj(b);var c=Hl.j(a.file,new J(null,3,5,M,[tC,yQ,b],null));return KK(function(d,h){var m=hW(wLa(c));return ZV(m,d,h)})};export const createFile=function(a){var b=hJ();a=new f(null,4,[T,b,Q,a,tC,H.ba(fAa,T,b),T1,I],null);return new yMa(a)};
-//# sourceMappingURL=penpot.js.map

ui-src/lib/types/penpotFile.ts

@@ -0,0 +1,38 @@
+import { PenpotPageOptions } from '@ui/lib/types/penpotPage';
+import { BoolShape } from '@ui/lib/types/shapes/boolShape';
+import { CircleShape } from '@ui/lib/types/shapes/circleShape';
+import { FrameShape } from '@ui/lib/types/shapes/frameShape';
+import { GroupShape } from '@ui/lib/types/shapes/groupShape';
+import { PathShape } from '@ui/lib/types/shapes/pathShape';
+import { RectShape } from '@ui/lib/types/shapes/rectShape';
+import { TextShape } from '@ui/lib/types/shapes/textShape';
+
+export interface PenpotFile {
+  addPage(name: string, options?: PenpotPageOptions): void;
+  closePage(): void;
+  addArtboard(artboard: FrameShape): void;
+  closeArtboard(): void;
+  addGroup(group: GroupShape): void;
+  closeGroup(): void;
+  addBool(bool: BoolShape): void;
+  closeBool(): void;
+  createRect(rect: RectShape): void;
+  createCircle(circle: CircleShape): void;
+  createPath(path: PathShape): void;
+  createText(options: TextShape): void;
+  // createSVG(svg: any): void;
+  // closeSVG(): void;
+  // addLibraryColor(color: any): void;
+  // updateLibraryColor(color: any): void;
+  // deleteLibraryColor(color: any): void;
+  // addLibraryTypography(typography: any): void;
+  // deleteLibraryTypography(typography: any): void;
+  // startComponent(component: any): void;
+  // finishComponent(): void;
+  // createComponentInstance(instance: any): void;
+  // lookupShape(shapeId: string): void;
+  // updateObject(id: string, object: any): void;
+  // deleteObject(id: string): void;
+  asMap(): unknown;
+  export(): void;
+}

ui-src/main.tsx

@@ -1,4 +1,3 @@
-import 'node_modules/@create-figma-plugin/ui/lib/css/base.css';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 

vite.config.ts

@@ -1,4 +1,4 @@
-import preact from '@preact/preset-vite';
+import react from '@vitejs/plugin-react-swc';
 import { defineConfig } from 'vite';
 import { viteSingleFile } from 'vite-plugin-singlefile';
 import svgr from 'vite-plugin-svgr';
@@ -6,18 +6,18 @@ import tsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
   root: './ui-src',
-  plugins: [svgr(), preact(), viteSingleFile(), tsconfigPaths()],
+  plugins: [svgr(), react(), viteSingleFile({ removeViteModuleLoader: true }), tsconfigPaths()],
-  build: {
+  resolve: {
-    target: 'esnext',
+    alias: {
-    assetsInlineLimit: 100000000,
+      'react': 'preact/compat',
-    chunkSizeWarningLimit: 100000000,
+      'react-dom': 'preact/compat',
-    cssCodeSplit: false,
+      '!../css/base.css': '../css/base.css'
-    outDir: '../dist',
-    rollupOptions: {
-      output: {
-        inlineDynamicImports: true
-      },
-      external: ['!../css/base.css']
     }
+  },
+  build: {
+    emptyOutDir: false,
+    target: 'esnext',
+    reportCompressedSize: false,
+    outDir: '../dist'
   }
 });