Build improvements.

.editorconfig

@@ -0,0 +1,2 @@
+[*]
+max_line_length = 100

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": true
+}

package.json

@@ -13,7 +13,7 @@
     "downloadjs": "^1.4.7",
     "i18next": "^25.3.2",
     "i18next-browser-languagedetector": "8.2.0",
-    "lodash": "^4.17.5",
+    "lodash-es": "^4.17.21",
     "mobx": "^6.13.0",
     "mobx-react-observer": "^1.1.0",
     "react": "^19.1.0",

src/ColorDropDownField.jsx

@@ -1,4 +1,3 @@
-import { range } from "lodash";
 import Color from "color";
 
 import DropDownField from "./DropDownField";
@@ -7,7 +6,7 @@ const colors = [
   { key: "transparent" },
   { key: "black" },
   { key: "gray" },
-  ...range(1, 10).map((v) => ({
+  ...Array.from({ length: 9 }, (_, i) => i + 1).map((v) => ({
     key: Color.rgb(255, 255, 255)
       .darken(v / 10.0)
       .string(),

src/PracticePage.jsx

@@ -1,5 +1,3 @@
-import { times } from "lodash";
-
 import LineSet from "./LineSet";
 import WatermarkSVG from "./WatermarkSVG";
 
@@ -36,7 +34,7 @@ const PracticePage = ({ store }) => {
         style={{ backgroundColor: "white" }}
       >
         <g key="X">
-          {times(count, (i) => (
+          {[...Array(count)].map((_, i) => (
             <text
               key={`x-${i}`}
               x={1}
@@ -48,7 +46,7 @@ const PracticePage = ({ store }) => {
             </text>
           ))}
         </g>
-        {times(count, (i) => (
+        {[...Array(count)].map((_, i) => (
           <g key={`lineset-${i}`}>
             <rect {...gapRect} y={1 + lineSetHeight * i + workHeight} />
             <LineSet

src/ga.js

@@ -1,4 +1,4 @@
-import { debounce, partial } from "lodash";
+import debounce from "lodash-es/debounce";
 import { reaction } from "mobx";
 
 export const gtagEvent = (action, params) => {
@@ -16,13 +16,13 @@ export const trackEvent = (action, label) => {
   gtagEvent(action, { eventLabel: label });
 };
 
-export const presetChange = partial(trackEvent, "select_preset");
+export const presetChange = (label) => trackEvent("select_preset", label);
 
-export const ratiosChange = partial(trackEvent, "change_ratios");
+export const ratiosChange = (label) => trackEvent("change_ratios", label);
 
-export const xHeightChange = partial(trackEvent, "change_x_height");
+export const xHeightChange = (label) => trackEvent("change_x_height", label);
 
-export const outputAttempt = partial(trackEvent, "output_attempt");
+export const outputAttempt = (label) => trackEvent("output_attempt", label);
 
 export const gaLangChange = (lng) => {
   gtagEvent("language_change", { language: lng });

src/lines.js

@@ -1,5 +1,3 @@
-import { merge } from "lodash";
-
 export const basicLine = (width, offset) => {
   return {
     x1: 0,
@@ -25,12 +23,12 @@ export const lineDash = (name) => {
 };
 
 export const composeLine = (spec) => {
-  return merge(
-    basicLine(spec.width, spec.offset),
-    color(spec.color),
-    thickness(spec.thickness),
-    lineDash(spec.dash),
-  );
+  return {
+    ...basicLine(spec.width, spec.offset),
+    ...color(spec.color),
+    ...thickness(spec.thickness),
+    ...lineDash(spec.dash),
+  };
 };
 
 export const defaultLineSpec = (overrides = {}) => {

src/store.js

@@ -1,5 +1,5 @@
-import { reduce, range } from "lodash";
-import { action, computed, observable, makeObservable } from "mobx";
+import range from "lodash-es/range";
+import { action, computed, makeObservable, observable } from "mobx";
 
 import { composeLine, defaultLineSpec } from "./lines";
 
@@ -195,7 +195,7 @@ class PenStore {
   }
 
   get lineSetHeight() {
-    return reduce(this.heights, (sum, h) => sum + h, 0);
+    return this.heights.reduce((sum, h) => sum + h, 0);
   }
 
   get guideLineSet() {

vite.config.js

@@ -1,4 +1,5 @@
 import { defineConfig } from "vite";
+
 import react from "@vitejs/plugin-react";
 import observerPlugin from "mobx-react-observer/babel-plugin";
 
@@ -8,15 +9,7 @@ export default defineConfig({
     rollupOptions: {
       output: {
         manualChunks: {
-          uicore: [
-            "react",
-            "react-dom",
-            "mobx",
-            "mobx-react-observer",
-            "i18next",
-            "react-i18next",
-            "lodash",
-          ],
+          react: ["react", "react-dom", "react-i18next", "i18next", "mobx", "mobx-react-observer"],
         },
       },
     },
@@ -28,9 +21,6 @@ export default defineConfig({
       },
     }),
   ],
-  server: {
-    host: true,
-  },
   test: {
     environment: "jsdom",
   },