replace literal string type into enum for performance optimization (#34)

* refactor lerp on Constraints

* refactor tightFor oon Constraints

* refactor throw error phrase on render object

* optimize normalize on Constraints by return itself when aleady normalized

* optimize translated by avoid unneccessary new instance on not changed

* remove unneccessary comment on matrix4

* caching frequent called Matrix.identity on matrix4.js

* add pretest:dev script

* fix matrix identity() created whenever called again

* fix indexedstack

* optimize paint by mutate dom only neccessary

* minimize create new matrix on render object by using Matrix.Constants

* optimize hitTest by replacing boud object into primitiv variables

* remove inline callback on visitChildren in RenderObject

* optimize get renderObject

* replace string into enum on Element.type

* refactor name on Container

* constraints.constraint accept plain object instead of Size instance on RenderAlign

* version up flitter-chart

* avoid unneccessary creating instance on enforce in Constraits

* replace string into enum on Flex

* track performance

* replace string into enum on text baseline

* fix spell on inline-span

* repalce string into enum on stack-fit

* replace string into enum on text

* publish 1.0.1

package.json

@@ -12,6 +12,7 @@
     "test:dev": "npm run dev --workspace=@meursyphus/test",
     "test:playwright": "npm run test:integration --workspace=@meursyphus/test",
     "pretest:playwright": "npm run flitter:build",
+    "pretest:dev": "npm run flitter:build",
     "prestory:chromatic": "npm run flitter:build",
     "prestory:build": "npm run flitter:build",
     "predocs:build": "npm run flitter:build"

packages/flitter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meursyphus/flitter",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A declarative, widget-based library built on SVG for simplifying data visualization with a Flutter-like syntax.",
   "keywords": [
     "flitter",

packages/flitter/src/component/Container.ts

@@ -1,5 +1,11 @@
-import type { Decoration, Matrix4 } from "../type";
-import { type EdgeInsets, type Alignment, Constraints, Rect } from "../type";
+import {
+  type EdgeInsets,
+  type Alignment,
+  type Decoration,
+  type Matrix4,
+  Constraints,
+  Rect,
+} from "../type";
 import { assert, classToFunction } from "../utils";
 import type Widget from "../widget/Widget";
 import Align from "./Align";
@@ -30,7 +36,7 @@ type ContainerProps = {
   key?: any;
 };
 
-class _Container extends StatelessWidget {
+class Container extends StatelessWidget {
   padding?: EdgeInsets;
   margin?: EdgeInsets;
   width?: number;
@@ -187,4 +193,4 @@ class _Container extends StatelessWidget {
   }
 }
 
-export default classToFunction(_Container);
+export default classToFunction(Container);

packages/flitter/src/component/base/BaseAlign.ts

@@ -1,5 +1,5 @@
 import { RenderAligningShiftedBox } from "../../renderobject";
-import { Size, Alignment, TextDirection } from "../../type";
+import { Alignment, TextDirection } from "../../type";
 import SingleChildRenderObjectWidget from "../../widget/SingleChildRenderObjectWidget";
 import type Widget from "../../widget/Widget";
 
@@ -89,24 +89,20 @@ class RenderAlign extends RenderAligningShiftedBox {
 
     if (this.child != null) {
       this.child.layout(constraints.loosen());
-      this.size = constraints.constrain(
-        new Size({
-          width: shrinkWrapWidth
-            ? this.child.size.width * (this.widthFactor ?? 1)
-            : Infinity,
-          height: shrinkWrapHeight
-            ? this.child.size.height * (this.heightFactor ?? 1)
-            : Infinity,
-        }),
-      );
+      this.size = constraints.constrain({
+        width: shrinkWrapWidth
+          ? this.child.size.width * (this.widthFactor ?? 1)
+          : Infinity,
+        height: shrinkWrapHeight
+          ? this.child.size.height * (this.heightFactor ?? 1)
+          : Infinity,
+      });
       this.alignChild();
     } else {
-      this.size = constraints.constrain(
-        new Size({
-          width: shrinkWrapWidth ? 0 : Infinity,
-          height: shrinkWrapHeight ? 0 : Infinity,
-        }),
-      );
+      this.size = constraints.constrain({
+        width: shrinkWrapWidth ? 0 : Infinity,
+        height: shrinkWrapHeight ? 0 : Infinity,
+      });
     }
   }
 }

packages/flitter/src/component/base/BaseFlex.ts

@@ -1,5 +1,4 @@
 import MultiChildRenderObject from "../../renderobject/MultiChildRenderObject";
-import type { Axis } from "../../type";
 import {
   Constraints,
   CrossAxisAlignment,
@@ -8,6 +7,7 @@ import {
   Offset,
   Size,
   VerticalDirection,
+  Axis,
 } from "../../type";
 import MultiChildRenderObjectWidget from "../../widget/MultiChildRenderObjectWidget";
 import type Widget from "../../widget/Widget";
@@ -119,22 +119,22 @@ class RenderFlex extends MultiChildRenderObject {
   }
 
   get mainAxisSizeName(): "width" | "height" {
-    return this.direction === "horizontal" ? "width" : "height";
+    return this.direction === Axis.horizontal ? "width" : "height";
   }
   get crossAxisSizeName(): "width" | "height" {
-    return this.direction === "horizontal" ? "height" : "width";
+    return this.direction === Axis.horizontal ? "height" : "width";
   }
   get minMainAxisSizeName(): "minWidth" | "minHeight" {
-    return this.direction === "horizontal" ? "minWidth" : "minHeight";
+    return this.direction === Axis.horizontal ? "minWidth" : "minHeight";
   }
   get maxMainAxisSizeName(): "maxWidth" | "maxHeight" {
-    return this.direction === "horizontal" ? "maxWidth" : "maxHeight";
+    return this.direction === Axis.horizontal ? "maxWidth" : "maxHeight";
   }
   get minCrossAxisSizeName(): "minWidth" | "minHeight" {
-    return this.direction === "horizontal" ? "minHeight" : "minWidth";
+    return this.direction === Axis.horizontal ? "minHeight" : "minWidth";
   }
   get maxCrossAxisSizeName(): "maxWidth" | "maxHeight" {
-    return this.direction === "horizontal" ? "maxHeight" : "maxWidth";
+    return this.direction === Axis.horizontal ? "maxHeight" : "maxWidth";
   }
   constructor({
     direction,
@@ -160,7 +160,7 @@ class RenderFlex extends MultiChildRenderObject {
     let totalFlex = 0;
     let [childIntrinsicMainAxisValue, crossAxisValue] = [0, 0];
     const sortedChildren =
-      this.verticalDirection === "down"
+      this.verticalDirection === VerticalDirection.down
         ? this.children
         : [...this.children].reverse();
 
@@ -174,7 +174,7 @@ class RenderFlex extends MultiChildRenderObject {
         childIntrinsicMainAxisValue += child.size[this.mainAxisSizeName];
       }
       crossAxisValue =
-        this.crossAxisAlignment === "stretch"
+        this.crossAxisAlignment === CrossAxisAlignment.stretch
           ? this.constraints.getMax(this.crossAxisSizeName)
           : Math.max(crossAxisValue, child.size[this.crossAxisSizeName]);
     });
@@ -211,7 +211,7 @@ class RenderFlex extends MultiChildRenderObject {
     this.size = this.constraints.constrain(
       new Size({
         [this.mainAxisSizeName]:
-          this.mainAxisSize === "max"
+          this.mainAxisSize === MainAxisSize.max
             ? this.constraints.getMax(this.mainAxisSizeName)
             : sortedChildren
                 .map(child => child.size[this.mainAxisSizeName])
@@ -225,8 +225,8 @@ class RenderFlex extends MultiChildRenderObject {
     );
 
     sortedChildren.forEach((child, i) => {
-      const [mainAxisOffset, crossAxisOffset]: ("x" | "y")[] =
-        this.direction === "horizontal" ? ["x", "y"] : ["y", "x"];
+      const [mainAxisOffset, crossAxisOffset]: ["x" | "y", "x" | "y"] =
+        this.direction === Axis.horizontal ? ["x", "y"] : ["y", "x"];
 
       child.offset = new Offset({
         [mainAxisOffset]: mainAxisOffsets[i],
@@ -250,7 +250,7 @@ class RenderFlex extends MultiChildRenderObject {
   private getFlexItemConstraint(childExtent: number, fit: "loose" | "tight") {
     return new Constraints({
       [this.minCrossAxisSizeName]:
-        this.crossAxisAlignment === "stretch"
+        this.crossAxisAlignment === CrossAxisAlignment.stretch
           ? this.constraints[this.maxCrossAxisSizeName]
           : 0,
       [this.maxCrossAxisSizeName]: this.constraints[this.maxCrossAxisSizeName],
@@ -266,44 +266,44 @@ class RenderFlex extends MultiChildRenderObject {
       this.size[this.mainAxisSizeName] - childMainAxisValues.reduce(sum, 0);
 
     switch (this.mainAxisAlignment) {
-      case "start":
+      case MainAxisAlignment.start:
         offsetsOnMainAxis = this._getChildOffsetsOnMainAxis({
           startOffset: 0,
           additionalSpace: 0,
           childMainAxisValues,
         });
         break;
-      case "end":
+      case MainAxisAlignment.end:
         offsetsOnMainAxis = this._getChildOffsetsOnMainAxis({
           startOffset: restSpaceSize,
           additionalSpace: 0,
           childMainAxisValues,
         });
         break;
-      case "spaceAround":
+      case MainAxisAlignment.spaceAround:
         const aroundSpace = restSpaceSize / childMainAxisValues.length;
         offsetsOnMainAxis = this._getChildOffsetsOnMainAxis({
           startOffset: aroundSpace / 2,
           additionalSpace: aroundSpace,
           childMainAxisValues,
         });
         break;
-      case "spaceBetween":
+      case MainAxisAlignment.spaceBetween:
         offsetsOnMainAxis = this._getChildOffsetsOnMainAxis({
           startOffset: 0,
           additionalSpace: restSpaceSize / (childMainAxisValues.length - 1),
           childMainAxisValues,
         });
         break;
-      case "spaceEvenly":
+      case MainAxisAlignment.spaceEvenly:
         const evenSpace = restSpaceSize / (childMainAxisValues.length + 1);
         offsetsOnMainAxis = this._getChildOffsetsOnMainAxis({
           startOffset: evenSpace,
           additionalSpace: evenSpace,
           childMainAxisValues,
         });
         break;
-      case "center":
+      case MainAxisAlignment.center:
         offsetsOnMainAxis = this._getChildOffsetsOnMainAxis({
           startOffset: restSpaceSize / 2,
           additionalSpace: 0,
@@ -312,7 +312,7 @@ class RenderFlex extends MultiChildRenderObject {
         break;
       default:
         throw new Error(
-          `this mainAixsAlignment(${this.mainAxisAlignment}) is not supported yet`,
+          `this mainAxisAlignment(${this.mainAxisAlignment}) is not supported yet`,
         );
     }
 
@@ -363,7 +363,7 @@ class RenderFlex extends MultiChildRenderObject {
     const childIntrinsicHeights = this.children.map(child =>
       child.getIntrinsicHeight(width),
     );
-    return this.direction === "horizontal"
+    return this.direction === Axis.horizontal
       ? childIntrinsicHeights.reduce(max, 0)
       : childIntrinsicHeights.reduce(sum, 0);
   }
@@ -375,7 +375,7 @@ class RenderFlex extends MultiChildRenderObject {
       child.getIntrinsicWidth(height),
     );
 
-    return this.direction === "vertical"
+    return this.direction === Axis.vertical
       ? childIntrinsicWidths.reduce(max, 0)
       : childIntrinsicWidths.reduce(sum, 0);
   }