Merge pull request #1 from bigtimebuddy/master

iGoodie · web-flow · commit 4cbed8b58611 · 2024-01-11T02:42:14.000+03:00
Chore: Clean-up, Fixes and Dependency Updates
diff --git a/README.md b/README.md
@@ -40,7 +40,7 @@
 
 4. **_Bundled into One File:_** Figma plugins only accept a single file for `main` (js) and `ui` (html), which makes deployment of multiple files linked to each other impossible. This boilerplate is configured to bundle/inline most of the things you need like rasterize/vector image asset imports, CSS URL statements, and of course, source code imports.
 
-5. **_SVG as Component:_** Yes, you can import SVGs as inlined sources with `*.svg?inline`, but what about actually importing them as React components? Easy! You can import an SVG file as a React component with `*.svg?component!` (See `/src/ui/app.tsx` for examples)
+5. **_SVG as Component:_** Yes, you can import SVGs as inlined sources with `*.svg?inline`, but what about actually importing them as React components? Easy! You can import an SVG file as a React component with `*.svg?react` (See `/src/ui/app.tsx` for examples)
 
 6. **_Sassy:_** A classic, this boilerplate supports Sass/Scss/Less and modules! Check out `/src/ui/styles/` for 7-1 Sass Template and `/src/ui/components/Button.module.scss` for module examples.
 
@@ -62,7 +62,7 @@ npm i
 Since UI is powered by Vite + React, you can use your browser to code the UI with HMR but **without** the figma context. Just run the following command line:
 
 ```
-npm run dev
+npm start
 ```
 
 ### Building
@@ -94,16 +94,11 @@ After building, built `dist` folder is going to contain every artifact you need
 
 ### 1. Make sure to either inline or component SVG imports!
 
-Importing image assets other than `.svg` is easy. However, when you are importing `.svg` you MUST make sure it is imported using either one of the suffixes `?inline` or `?component`.
+Importing image assets other than `.svg` is easy. However, when you are importing `.svg`, by default it will load as a base64 data-uri, to import as a React component, you must add the query string `?react`.
 
 ```tsx
-// ❌ WRONG! Won't be visible in Figma
-import myImage from "@ui/assets/my_image.svg";
-
-// ✔️ Correct!
-import MyImage from "@ui/assets/my_image.svg?component";
-import myImage from "@ui/assets/my_image.svg?inline";
-
+import MyImage from "@ui/assets/my_image.svg?react"; // Import as React component
+import myImage from "@ui/assets/my_image.svg"; // Import as base64 data-uri
 ...
 
 <MyImage className="something" />
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,11 +4,19 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite -c ./vite.config.ui.ts",
-    "build": "tsc && npm run build:ui && npm run build:plugin && cross-os refresh-figma",
-    "build:ui": "vite build -c ./vite.config.ui.ts --emptyOutDir",
-    "build:plugin": "vite build -c ./vite.config.plugin.ts",
-    "preview": "vite preview"
+    "start": "run-s watch",
+    "watch": "run-p watch:*",
+    "watch:ui": "npm run build:ui -- --watch --mode=development",
+    "watch:plugin": "npm run build:plugin -- --watch --mode=development",
+    "clean": "rimraf dist/*",
+    "prebuild": "run-s types clean",
+    "types": "run-s types:*",
+    "types:src": "tsc",
+    "types:node": "tsc -P tsconfig.node.json",
+    "build": "run-s build:*",
+    "postbuild": "cross-os refresh-figma",
+    "build:ui": "vite build -c ./vite.config.ui.ts",
+    "build:plugin": "vite build -c ./vite.config.plugin.ts"
   },
   "cross-os": {
     "refresh-figma": {
@@ -21,21 +29,23 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@figma/plugin-typings": "^1.62.0",
-    "@svgr/core": "^6.5.1",
+    "@figma/plugin-typings": "^1.83.0",
+    "@rollup/pluginutils": "^5.1.0",
     "@types/node": "^18.15.11",
     "@types/postcss-url": "^10.0.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
-    "@vitejs/plugin-react": "^3.1.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "cross-os": "^1.5.0",
+    "npm-run-all": "^4.1.5",
     "postcss": "^8.4.21",
     "postcss-url": "^10.1.3",
+    "rimraf": "^5.0.5",
     "sass": "^1.60.0",
-    "typescript": "^4.9.3",
-    "vite": "^4.2.0",
-    "vite-plugin-generate-file": "^0.0.4",
-    "vite-plugin-singlefile": "^0.13.3",
-    "vite-plugin-svgr": "^2.4.0"
+    "typescript": "^5.3.0",
+    "vite": "^5.0.11",
+    "vite-plugin-generate-file": "^0.1.1",
+    "vite-plugin-singlefile": "^0.13.5",
+    "vite-plugin-svgr": "^4.2.0"
   }
 }
diff --git a/scripts/vite/vite-inline-svg.ts b/scripts/vite/vite-inline-svg.ts
diff --git a/scripts/vite/vite-svgr-component.ts b/scripts/vite/vite-svgr-component.ts
diff --git a/src/ui/app.tsx b/src/ui/app.tsx
@@ -2,8 +2,8 @@ import { useState } from "react";
 import * as Networker from "monorepo-networker";
 import { NetworkMessages } from "@common/network/messages";
 
-import ReactLogo from "@ui/assets/react.svg?component";
-import viteLogo from "@ui/assets/vite.svg?inline";
+import ReactLogo from "@ui/assets/react.svg?react";
+import viteLogo from "@ui/assets/vite.svg";
 import figmaLogo from "@ui/assets/figma.png";
 
 import { Button } from "@ui/components/Button";
diff --git a/src/ui/index.html b/src/ui/index.html
@@ -1,13 +1,2 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="./assets/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Figma + Vite + React</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./main.tsx"></script>
-  </body>
-</html>
+<div id="root"></div>
+<script type="module" src="./main.tsx"></script>
diff --git a/src/ui/vite-env.d.ts b/src/ui/vite-env.d.ts
@@ -1,11 +1,2 @@
 /// <reference types="vite/client" />
-
-declare module "*.svg?component" {
-  import * as React from "react";
-
-  const ReactComponent: React.FunctionComponent<
-    React.ComponentProps<"svg"> & { title?: string }
-  >;
-
-  export default ReactComponent;
-}
+/// <reference types="vite-plugin-svgr/client" />
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,37 +1,27 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
-    "module": "ES2020",
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "Node",
     "useDefineForClassFields": true,
-    "allowJs": false,
     "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": false,
     "noEmit": true,
     "jsx": "react-jsx",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "typeRoots": ["./node_modules/@types/", "./node_modules/@figma"],
-    "rootDir": ".",
-    "baseUrl": ".",
-    "outDir": "dist/",
-    "sourceMap": false,
+    "typeRoots": ["./node_modules/@figma"],
     "paths": {
       "@common/*": ["./src/common/*"],
       "@ui/*": ["./src/ui/*"],
       "@plugin/*": ["./src/plugin/*"]
     }
   },
   "include": [
-    "src/**/*.d.ts",
     "src/**/*.d.ts",
     "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.js",
-    "src/**/*.jsx"
+    "src/**/*.tsx"
   ]
 }
diff --git a/tsconfig.node.json b/tsconfig.node.json
@@ -1,13 +1,12 @@
 {
   "compilerOptions": {
-    "composite": true,
+    "noEmit": true,
+    "skipLibCheck": true,
     "module": "ESNext",
     "moduleResolution": "Node",
-    "allowSyntheticDefaultImports": true
+    "esModuleInterop": true
   },
   "include": [
-    "vite.config.plugin.ts",
-    "vite.config.ui.ts",
-    "./scripts/vite/*.ts"
+    "*.ts"
   ]
 }
diff --git a/vite.config.plugin.ts b/vite.config.plugin.ts
@@ -1,10 +1,10 @@
-import path from "path";
+import path from "node:path";
 import { defineConfig } from "vite";
 import generateFile from "vite-plugin-generate-file";
 import { viteSingleFile } from "vite-plugin-singlefile";
 import figmaManifest from "./figma.manifest";
 
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
   plugins: [
     viteSingleFile(),
     generateFile({
@@ -14,20 +14,22 @@ export default defineConfig({
     }),
   ],
   build: {
-    target: "es2017",
-    lib: {
-      name: figmaManifest.name,
-      entry: path.resolve(__dirname, "./src/plugin/plugin.ts"),
-      fileName: "plugin",
-      formats: ["es"],
-    },
+    minify: mode === 'production',
+    sourcemap: mode !== 'production' ? 'inline' : false,
+    target: 'es2017',
     emptyOutDir: false,
-    outDir: path.resolve(__dirname, "./dist"),
+    outDir: path.resolve("dist"),
+    rollupOptions: {
+      input: path.resolve('src/plugin/plugin.ts'),
+      output: {
+        entryFileNames: 'plugin.js',
+      },
+    },
   },
   resolve: {
     alias: {
-      "@common": path.resolve(__dirname, "./src/common"),
-      "@plugin": path.resolve(__dirname, "./src/plugin"),
+      "@common": path.resolve("src/common"),
+      "@plugin": path.resolve("src/plugin"),
     },
   },
-});
+}));
diff --git a/vite.config.ui.ts b/vite.config.ui.ts
@@ -1,26 +1,22 @@
 import { defineConfig } from "vite";
-import path from "path";
-
+import path from "node:path";
 import { viteSingleFile } from "vite-plugin-singlefile";
 import react from "@vitejs/plugin-react";
-import inlineSvg from "./scripts/vite/vite-inline-svg";
-import svgComponent from "./scripts/vite/vite-svgr-component";
-
+import svgr from "vite-plugin-svgr";
 import postcssUrl from "postcss-url";
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react(), svgComponent(), inlineSvg(), viteSingleFile()],
-  root: path.resolve(__dirname, "./src/ui/"),
+export default defineConfig(({ mode }) => ({
+  plugins: [react(), svgr(), viteSingleFile()],
+  root: path.resolve("src/ui"),
   build: {
-    outDir: path.resolve(__dirname, "./dist"),
+    minify: mode === 'production',
+    cssMinify: mode === 'production',
+    sourcemap: mode !== 'production' ? 'inline' : false,
+    emptyOutDir: false,
+    outDir: path.resolve("dist"),
     rollupOptions: {
-      input: {
-        ui: path.relative(__dirname, "./src/ui/index.html"),
-      },
-      output: {
-        entryFileNames: "[name].js",
-      },
+      input: path.resolve("src/ui/index.html"),
     },
   },
   css: {
@@ -30,8 +26,8 @@ export default defineConfig({
   },
   resolve: {
     alias: {
-      "@common": path.resolve(__dirname, "./src/common"),
-      "@ui": path.resolve(__dirname, "./src/ui"),
+      "@common": path.resolve("src/common"),
+      "@ui": path.resolve("src/ui"),
     },
   },
-});
+}));

Original file line number	Diff line number	Diff line change
`@@ -1,13 +1,12 @@`
`1`	`1`	`{`
`2`	`2`	`"compilerOptions": {`
`3`		`- "composite": true,`
	`3`	`+ "noEmit": true,`
	`4`	`+ "skipLibCheck": true,`
`4`	`5`	`"module": "ESNext",`
`5`	`6`	`"moduleResolution": "Node",`
`6`		`- "allowSyntheticDefaultImports": true`
	`7`	`+ "esModuleInterop": true`
`7`	`8`	`},`
`8`	`9`	`"include": [`
`9`		`- "vite.config.plugin.ts",`
`10`		`- "vite.config.ui.ts",`
`11`		`- "./scripts/vite/*.ts"`
	`10`	`+ "*.ts"`
`12`	`11`	`]`
`13`	`12`	`}`