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:main": "esbuild plugin-src/code.ts --bundle --outfile=dist/code.js --target=es2016",
-    "build:ui": "vite build --minify esbuild --emptyOutDir=false",
-    "build:watch": "concurrently -n widget,iframe \"npm run build:main -- --watch\" \"npm run build:ui -- --watch\"",
-    "dev": "concurrently -n tsc,build,vite 'npm:tsc:watch' 'npm:build:watch' 'vite'",
-    "lint": "concurrently \"npm:lint:*\"",
+    "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 --minify",
+    "build:ui": "vite build",
+    "build:watch": "concurrently -n widget,iframe 'npm:build:main -- --watch' 'npm:build:ui -- --watch'",
+    "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 './components/Wrapper/Wrapper';
+import { Wrapper } from '@ui/components/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 { 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;
-}
+import { PenpotFile } from '@ui/lib/types/penpotFile';
 
 export function createFile(name: string): PenpotFile;

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,23 +1,23 @@
-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';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
   root: './ui-src',
-  plugins: [svgr(), preact(), viteSingleFile(), tsconfigPaths()],
+  plugins: [svgr(), react(), viteSingleFile({ removeViteModuleLoader: true }), tsconfigPaths()],
+  resolve: {
+    alias: {
+      'react': 'preact/compat',
+      'react-dom': 'preact/compat',
+      '!../css/base.css': '../css/base.css'
+    }
+  },
   build: {
+    emptyOutDir: false,
     target: 'esnext',
-    assetsInlineLimit: 100000000,
-    chunkSizeWarningLimit: 100000000,
-    cssCodeSplit: false,
-    outDir: '../dist',
-    rollupOptions: {
-      output: {
-        inlineDynamicImports: true
-      },
-      external: ['!../css/base.css']
-    }
+    reportCompressedSize: false,
+    outDir: '../dist'
   }
 });