evilmartians / figma-polychrom Goto Github PK

There is a popular approach to not have IDE and other system-specific files in .gitignore. Rather, each user should put them to their own system-wide git ignore.

The idea is that every user has unique system/IDE with unique file and projects should not take care about each possible IDE, plugin, etc.

I use this approach in my project and had no problem with it.

Right now CSS of lurkers are inside of main ui/style.css. But it is not good for component-isolation approach.

Main CSS should be for basic things like reset and base styles like * { box-sizing: border-box }

I am taking about files like https://github.com/mikhin/vite-figma/blob/main/src/ui/components/Lurkers.tsx

Having SVG in JSX files leads to a few problems:

1. You can’t view SVG files in system image viewer
2. You can’t edit SVG files in GUI editor
3. You can’t use scripts like svgo on these SVG files

Vite has a few tools to convert SVG file to React component automatically https://dev.to/cassidoo/importing-svg-files-as-react-components-with-vite-l3n

Reasons:

1. Inline CSS has worse performance (because their changes re-build CSSOM)
2. A better separation. All styles will be in Tailwind (I think you could use CSS Custom Properties colors in Tailwind config)
3. Often you use the same color in two places (like top and bottom use label color). With CSS Custom Properties they both can share the same token.
4. Very likely that you will be able to remove <ColorMetrics>

If you do not plan to add more components to <App>, it will be better to just rename <Home> to <App>

The project is already on the stage to have some name like figma-apca

It will highlight that they store a logic, not a helpers

By default, culori exports adds all possible color model. Most of them used by nobody (like xyz or rgb-d60).

With moving to culori/fn you will be able to reduce JS bundle, speed up initialization and reduce memory usage a little.

Here is an example of transition:
antiflasher/apcach#13

Right now we manually put font in data:uri format https://github.com/mikhin/vite-figma/blob/main/src/ui/style.css#L15

But it is not really maintainable. You can’t open font/image file in system viewer. You can’t replace font just by replacing the file.

Vite can’t inline font by it own. We should keep fonts/images as a regular files and inline them by built tools.

Also, inline is a little bad practice. Font files are big. And base64 decoding and CSS parser is not free. Maybe we should move to separated file and preload tag in HTML.

There is a convention that all tests should be tun on pnpm test, not just unit tests. The idea behind this approach is to have a simple command to test everything.

This is why I suggest these scripts:

  "scripts": {
    "dev-ui": "vite build --watch -c vite.config.ui.ts",
    "dev-bg": "vite build --watch -c vite.config.bg.ts",
    "dev": "pnpm run dev-ui & pnpm run dev-bg",
    "build-ui": "tsc && vite build -c vite.config.ui.ts",
    "build-bg": "tsc && vite build -c vite.config.bg.ts",
    "build": "pnpm run build-ui && pnpm run build-bg",
    "prettier:format": "prettier --write ./",
    "eslint": "eslint --ext .ts,.tsx ./src --fix",
    "tsc": "tsc --skipLibCheck --noEmit",
    "test-ui": "vitest --watch=false --coverage -c vite.config.ui.ts",
    "test-bg": "vitest --watch=false --coverage -c vite.config.bg.ts",
-   "test": "pnpm run test-ui && pnpm run test-bg"
+   "test": "pnpm run eslint && pnpm run tsc && pnpm run test-ui && pnpm run test-bg"
  },

Or we can even run all tests in parallel:

  "scripts": {
    "dev-ui": "vite build --watch -c vite.config.ui.ts",
    "dev-bg": "vite build --watch -c vite.config.bg.ts",
    "dev": "pnpm run dev-ui & pnpm run dev-bg",
    "build-ui": "tsc && vite build -c vite.config.ui.ts",
    "build-bg": "tsc && vite build -c vite.config.bg.ts",
    "build": "pnpm run build-ui && pnpm run build-bg",
    "prettier:format": "prettier --write ./",
-   "test": "pnpm run test-ui && pnpm run test-bg"
-   "eslint": "eslint --ext .ts,.tsx ./src --fix",
-   "tsc": "tsc --skipLibCheck --noEmit",
-   "test-ui": "vitest --watch=false --coverage -c vite.config.ui.ts",
-   "test-bg": "vitest --watch=false --coverage -c vite.config.bg.ts",
+   "test:lint": "eslint --ext .ts,.tsx ./src --fix",
+   "test:types": "tsc --skipLibCheck --noEmit",
+   "test:unit:ui": "vitest --watch=false --coverage -c vite.config.ui.ts",
+   "test:unit:bg": "vitest --watch=false --coverage -c vite.config.bg.ts",
+   "test": "pnpm run /^test:/"
  },

There are 2 approach of dependencies/devDependencies separation in Node.js projects:

1. Runtime in dependencies, build, deploy, linters, etc in devDependencies
2. Runtime, build, deploy in dependencies, linters, types, etc in devDependencies

The second approach has unique security feature. You can install only dependencies during production deploy and reduce npm dependencies risk. The problem is that every dependency in node_modules and be hacked and still your secrets or inject malware to client’s JS.

By reducing dependencies during build and deploy we can reduce this risk.