@reearth/core 0.0.7-alpha.60 → 0.0.7-alpha.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reearth/core",
-  "version": "0.0.7-alpha.60",
+  "version": "0.0.7-alpha.62",
   "author": "Re:Earth contributors <community@reearth.io>",
   "license": "Apache-2.0",
   "description": "A library that abstracts a map engine as one common API.",

package/src/Map/Layers/hooks.ts

@@ -204,6 +204,12 @@ export default function useHooks({
     ),
   );
 
+  // Store getComputedLayer in a ref to avoid recreating prototypes on every change
+  const getComputedLayerRef = useRef(getComputedLayer);
+  useEffect(() => {
+    getComputedLayerRef.current = getComputedLayer;
+  }, [getComputedLayer]);
+
   const lazyComputedLayerPrototype = useMemo<object>(() => {
     return objectFromGetter(
       // id and layer should not be accessible
@@ -212,12 +218,12 @@ export default function useHooks({
         const id: string | undefined = (this as any).id;
         if (!id || typeof id !== "string") throw new Error("layer ID is not specified");
 
-        const layer = getComputedLayer(id);
+        const layer = getComputedLayerRef.current(id);
         if (!layer) return undefined;
         return (layer as any)[key];
       },
     );
-  }, [getComputedLayer]);
+  }, []);
 
   const lazyLayerPrototype = useMemo<object>(() => {
     return objectFromGetter(layerKeys, function (key) {
@@ -237,7 +243,7 @@ export default function useHooks({
       else if (key === "isVisible") return layer.visible;
       // computed
       else if (key === "computed") {
-        const computedLayer = getComputedLayer(layer.id);
+        const computedLayer = getComputedLayerRef.current(layer.id);
         if (!computedLayer) return undefined;
         const computed = Object.create(lazyComputedLayerPrototype);
         computed.id = id;
@@ -246,7 +252,7 @@ export default function useHooks({
 
       return (layer as any)[key];
     });
-  }, [getComputedLayer, layerMap, lazyComputedLayerPrototype]);
+  }, [layerMap, lazyComputedLayerPrototype]);
 
   const findById = useCallback(
     (layerId: string): LazyLayer | undefined => {

package/src/mantle/evaluator/simple/expression/README.md

@@ -0,0 +1,392 @@
+# Expression Evaluator
+
+A powerful expression evaluator for evaluating dynamic expressions with feature properties, supporting various operators, functions, and property access methods.
+
+## Table of Contents
+
+- [Basic Usage](#basic-usage)
+- [Property Access](#property-access)
+- [Operators](#operators)
+- [Functions](#functions)
+- [Data Types](#data-types)
+- [Advanced Features](#advanced-features)
+
+## Basic Usage
+
+```typescript
+import { Expression } from "./expression";
+
+const feature = {
+  properties: {
+    height: 100,
+    name: "Building A",
+  },
+};
+
+const expr = new Expression("${height} > 50", feature);
+const result = expr.evaluate(); // true
+```
+
+## Property Access
+
+### 1. Standard Property Names (No Spaces)
+
+For properties without spaces or special characters, use the simple syntax:
+
+```typescript
+${propertyName}
+${height}
+${temperature}
+```
+
+**Example:**
+```typescript
+const feature = {
+  properties: {
+    height: 100,
+    width: 50,
+  },
+};
+
+const expr = new Expression("${height} * ${width}", feature);
+expr.evaluate(); // 5000
+```
+
+### 2. Quoted Property Names (With Spaces)
+
+**✨ NEW:** For properties with spaces or special characters, wrap the property name in quotes:
+
+```typescript
+${"property name"}      // Double quotes (recommended)
+${'property name'}      // Single quotes
+```
+
+**Example:**
+```typescript
+const feature = {
+  properties: {
+    "user name": "Alice",
+    "user score": 95,
+    "email@address": "alice@example.com",
+    "user-info:age": 25,
+  },
+};
+
+// Access properties with spaces
+const expr1 = new Expression('${"user name"}', feature);
+expr1.evaluate(); // "Alice"
+
+// Use in conditionals
+const expr2 = new Expression('${"user score"} > 90 ? "Excellent" : "Good"', feature);
+expr2.evaluate(); // "Excellent"
+
+// Arithmetic operations
+const expr3 = new Expression('${"user-info:age"} + 5', feature);
+expr3.evaluate(); // 30
+
+// Properties with special characters
+const expr4 = new Expression('${"email@address"} !== ""', feature);
+expr4.evaluate(); // true
+```
+
+**Supported Characters in Quoted Names:**
+- Spaces: `${"user name"}`
+- Hyphens: `${"user-info"}`
+- Colons: `${"category:name"}`
+- At signs: `${"email@domain"}`
+- Any other special characters
+
+### 3. Special Variables
+
+```typescript
+${id}              // Access feature.id
+${rootProperties}  // Access entire feature.properties object
+```
+
+**Example:**
+```typescript
+const feature = {
+  id: "feature-123",
+  properties: {
+    height: 100,
+  },
+};
+
+const expr = new Expression('${id}', feature);
+expr.evaluate(); // "feature-123"
+```
+
+## Operators
+
+### Comparison Operators
+
+```typescript
+${height} > 50          // Greater than
+${height} >= 50         // Greater than or equal
+${height} < 100         // Less than
+${height} <= 100        // Less than or equal
+${height} === 50        // Strict equality
+${height} !== 50        // Strict inequality
+${height} == 50         // Loose equality (with type coercion)
+${height} != 50         // Loose inequality
+```
+
+### Arithmetic Operators
+
+```typescript
+${a} + ${b}            // Addition
+${a} - ${b}            // Subtraction
+${a} * ${b}            // Multiplication
+${a} / ${b}            // Division
+${a} % ${b}            // Modulo
+```
+
+### Logical Operators
+
+```typescript
+${a} && ${b}           // Logical AND
+${a} || ${b}           // Logical OR
+!${a}                  // Logical NOT
+```
+
+### Conditional (Ternary) Operator
+
+```typescript
+${condition} ? ${trueValue} : ${falseValue}
+```
+
+**Example:**
+```typescript
+const expr = new Expression('${height} > 100 ? "Tall" : "Short"', feature);
+```
+
+## Functions
+
+### Type Conversion Functions
+
+```typescript
+Boolean(${value})      // Convert to boolean
+Number(${value})       // Convert to number
+String(${value})       // Convert to string
+```
+
+### Math Functions
+
+```typescript
+abs(${value})          // Absolute value
+sqrt(${value})         // Square root
+ceil(${value})         // Round up
+floor(${value})        // Round down
+round(${value})        // Round to nearest integer
+sin(${value})          // Sine
+cos(${value})          // Cosine
+tan(${value})          // Tangent
+```
+
+### Utility Functions
+
+```typescript
+isNaN(${value})        // Check if Not a Number
+isFinite(${value})     // Check if finite number
+```
+
+### Color Functions
+
+```typescript
+color("red")                           // Named color
+color("#ff0000")                       // Hex color
+color("#ff0000", 0.5)                  // Hex color with alpha
+rgb(255, 0, 0)                         // RGB color
+rgba(255, 0, 0, 0.5)                   // RGBA color
+hsl(0, 100, 50)                        // HSL color
+hsla(0, 100, 50, 0.5)                  // HSLA color
+```
+
+**Example:**
+```typescript
+const expr = new Expression('${height} > 100 ? color("red") : color("blue")', feature);
+```
+
+## Data Types
+
+### Supported Types
+
+- **Numbers**: `42`, `3.14`, `Infinity`, `NaN`
+- **Strings**: `"hello"`, `'world'`
+- **Booleans**: `true`, `false`
+- **Null**: `null`
+- **Undefined**: `undefined`
+- **Arrays**: `[1, 2, 3]`
+- **Colors**: Result of color functions
+
+### Constants
+
+```typescript
+Math.PI                // 3.141592653589793
+Math.E                 // 2.718281828459045
+Number.POSITIVE_INFINITY
+NaN
+Infinity
+undefined
+```
+
+## Advanced Features
+
+### String Interpolation
+
+Within string literals, you can interpolate property values:
+
+```typescript
+"Hello, ${name}!"
+"Height: ${height}m"
+```
+
+**Note:** String interpolation only supports simple property names (without spaces). For properties with spaces or special characters, use concatenation instead (see below).
+
+**Example:**
+```typescript
+const feature = {
+  properties: {
+    name: "Building A",
+    height: 100,
+  },
+};
+
+const expr = new Expression('"Building: ${name}, Height: ${height}m"', feature);
+expr.evaluate(); // "Building: Building A, Height: 100m"
+```
+
+**For properties with spaces, use concatenation:**
+```typescript
+const feature = {
+  properties: {
+    "building name": "Tower A",
+    floors: 30,
+  },
+};
+
+// Use concatenation with + operator
+const expr = new Expression('${"building name"} + " has " + ${floors} + " floors"', feature);
+expr.evaluate(); // "Tower A has 30 floors"
+```
+
+### Array Comparisons
+
+The equality operators support checking if a value is in an array:
+
+```typescript
+${value} == [1, 2, 3]      // Check if value is in array
+${value} != [1, 2, 3]      // Check if value is not in array
+```
+
+**Example:**
+```typescript
+const feature = {
+  properties: {
+    status: "active",
+  },
+};
+
+const expr = new Expression('${status} == ["active", "pending"]', feature);
+expr.evaluate(); // true
+```
+
+### Defines (Variable Substitution)
+
+You can define placeholder values that get substituted before evaluation:
+
+```typescript
+const defines = {
+  MAX_HEIGHT: "100",
+  MIN_HEIGHT: "10",
+};
+
+const expr = new Expression("${height} > ${MAX_HEIGHT}", feature, defines);
+// Becomes: "${height} > 100"
+```
+
+### Expression Caching
+
+Expressions are cached automatically for better performance. To clear caches:
+
+```typescript
+import { clearExpressionCaches } from "./expression";
+
+clearExpressionCaches(expressionString, feature, defines);
+```
+
+## Property Name Comparison
+
+| Syntax | Use Case | Example |
+|--------|----------|---------|
+| `${name}` | Simple properties (no spaces) | `${height}`, `${temperature}` |
+| `${"property name"}` | Properties with spaces/special chars | `${"user name"}`, `${"email@domain"}` |
+| `${rootProperties}` | Access entire properties object | `${rootProperties["dynamic-key"]}` |
+
+## Complete Example
+
+```typescript
+import { Expression } from "./expression";
+
+const feature = {
+  id: "building-001",
+  properties: {
+    "building name": "Tower A",
+    "building height": 150,
+    "building color": "blue",
+    floors: 30,
+    status: "active",
+    "contact info": {
+      "email address": "info@tower-a.com",
+    },
+  },
+};
+
+// Simple comparison
+const expr1 = new Expression('${"building height"} > 100', feature);
+console.log(expr1.evaluate()); // true
+
+// Conditional with color
+const expr2 = new Expression(
+  '${"building height"} > 100 ? color("red") : color("green")',
+  feature
+);
+console.log(expr2.evaluate()); // #ff0000 (red)
+
+// String concatenation (for properties with spaces)
+const expr3 = new Expression(
+  '${"building name"} + " has " + ${floors} + " floors"',
+  feature
+);
+console.log(expr3.evaluate()); // "Tower A has 30 floors"
+
+// Array membership check
+const expr4 = new Expression(
+  '${status} == ["active", "pending"]',
+  feature
+);
+console.log(expr4.evaluate()); // true
+```
+
+## Migration Guide
+
+### From Standard Syntax to Quoted Syntax
+
+If you have properties with spaces, you need to update your expressions:
+
+**Before (doesn't work):**
+```typescript
+${user name}           // ❌ Fails: interpreted as two separate identifiers
+```
+
+**After (works):**
+```typescript
+${"user name"}         // ✅ Works: quoted property name
+```
+
+### Best Practices
+
+1. **Use simple syntax** for properties without spaces: `${height}`
+2. **Use quoted syntax** for properties with spaces: `${"user name"}`
+3. **Prefer double quotes** for consistency: `${"property"}` instead of `${'property'}`
+4. **Avoid special characters in property names** when possible to keep expressions simple

package/src/mantle/evaluator/simple/expression/expression.test.ts

@@ -110,6 +110,71 @@ describe("Expression evaluation", () => {
       expression.evaluate();
     }).toThrow('Unexpected function call "czm_住所"');
   });
+
+  test("should evaluate expression with quoted property names containing spaces", () => {
+    const expressionString = '${"user name"}';
+    const feature = {
+      properties: {
+        "user name": "Alice",
+        "user age": 25,
+      },
+    } as Feature;
+
+    const expression = new Expression(expressionString, feature);
+    const result = expression.evaluate();
+
+    expect(result).toBe("Alice");
+  });
+
+  test("should evaluate conditional expression with quoted property names", () => {
+    const expressionString = '${"user score"} > 50 ? "Pass" : "Fail"';
+    const feature1 = {
+      properties: {
+        "user score": 75,
+      },
+    } as Feature;
+    const feature2 = {
+      properties: {
+        "user score": 30,
+      },
+    } as Feature;
+
+    const expression1 = new Expression(expressionString, feature1);
+    const expression2 = new Expression(expressionString, feature2);
+
+    expect(expression1.evaluate()).toBe("Pass");
+    expect(expression2.evaluate()).toBe("Fail");
+  });
+
+  test("should evaluate arithmetic expression with quoted property names", () => {
+    const expressionString = '${"item price"} * ${"item quantity"}';
+    const feature = {
+      properties: {
+        "item price": 10.5,
+        "item quantity": 3,
+      },
+    } as Feature;
+
+    const expression = new Expression(expressionString, feature);
+    const result = expression.evaluate();
+
+    expect(result).toBe(31.5);
+  });
+
+  test("should handle quoted property names with special characters", () => {
+    const expressionString = '${"user-info:name"} === "Bob Smith"';
+    const feature = {
+      properties: {
+        "user-info:name": "Bob Smith",
+        "email@address": "bob@example.com",
+      },
+    } as Feature;
+
+    const expression = new Expression(expressionString, feature);
+    const result = expression.evaluate();
+
+    expect(result).toBe(true);
+  });
 });
 
 describe("expression caches", () => {

package/src/mantle/evaluator/simple/expression/variableReplacer.test.ts

@@ -51,4 +51,182 @@ describe("replaceVariables", () => {
     const [result, _] = replaceVariables("${vari-able}");
     expect(result).toBe(`czm_vari$reearth_hyphen_$able`);
   });
+
+  test("should handle property names with spaces using bracket notation with double quotes", () => {
+    const [, res] = replaceVariables('${$["property name"]}', {
+      "property name": "value with space",
+      normalProperty: "normal value",
+    });
+    expect(res[0].literalValue).toBe("value with space");
+  });
+
+  test("should handle property names with spaces using bracket notation with single quotes", () => {
+    const [, res] = replaceVariables("${$['user name']}", {
+      "user name": "John Doe",
+      normalProperty: "normal value",
+    });
+    expect(res[0].literalValue).toBe("John Doe");
+  });
+
+  test("should handle nested property names with spaces", () => {
+    const [, res] = replaceVariables('${$["contact info"]["email address"]}', {
+      "contact info": {
+        "email address": "john@example.com",
+        "phone number": "123-456-7890",
+      },
+    });
+    expect(res[0].literalValue).toBe("john@example.com");
+  });
+
+  test("should handle array elements with property names containing spaces", () => {
+    const [, res] = replaceVariables('${$.items[0]["item name"]}', {
+      items: [
+        { "item name": "Product A", "item price": 100 },
+        { "item name": "Product B", "item price": 200 },
+      ],
+    });
+    expect(res[0].literalValue).toBe("Product A");
+  });
+
+  test("should handle array slice with property names containing spaces", () => {
+    const [, res] = replaceVariables('${$.items[:1]["item price"]}', {
+      items: [
+        { "item name": "Product A", "item price": 100 },
+        { "item name": "Product B", "item price": 200 },
+      ],
+    });
+    expect(res[0].literalValue).toBe(100);
+  });
+
+  test("should handle quoted dot notation for property names with spaces", () => {
+    const [, res] = replaceVariables("${$.'property name'}", {
+      "property name": "value with space",
+    });
+    expect(res[0].literalValue).toBe("value with space");
+  });
+
+  test("should handle multiple property names with spaces in one expression", () => {
+    const [result, res] = replaceVariables('${$["user name"]} - ${$["property name"]}', {
+      "user name": "John Doe",
+      "property name": "value with space",
+    });
+    expect(res).toHaveLength(2);
+    expect(res[0].literalValue).toBe("John Doe");
+    expect(res[1].literalValue).toBe("value with space");
+    expect(result).toContain(res[0].literalName);
+    expect(result).toContain(res[1].literalName);
+  });
+
+  test("should handle quoted property names with double quotes", () => {
+    const [result, res] = replaceVariables('${"user info"}', {
+      "user info": "John Doe",
+      normalProperty: "normal value",
+    });
+    expect(res).toHaveLength(1);
+    expect(res[0].literalValue).toBe("John Doe");
+    expect(result).toBe(res[0].literalName);
+  });
+
+  test("should handle quoted property names with single quotes", () => {
+    const [result, res] = replaceVariables("${'property name'}", {
+      "property name": "value with space",
+      normalProperty: "normal value",
+    });
+    expect(res).toHaveLength(1);
+    expect(res[0].literalValue).toBe("value with space");
+    expect(result).toBe(res[0].literalName);
+  });
+
+  test("should handle multiple quoted property names in one expression", () => {
+    const [result, res] = replaceVariables('${"user name"} - ${"user age"}', {
+      "user name": "John Doe",
+      "user age": 30,
+    });
+    expect(res).toHaveLength(2);
+    expect(res[0].literalValue).toBe("John Doe");
+    expect(res[1].literalValue).toBe(30);
+    expect(result).toContain(res[0].literalName);
+    expect(result).toContain("-");
+    expect(result).toContain(res[1].literalName);
+  });
+
+  test("should handle quoted property names with special characters", () => {
+    const [result, res] = replaceVariables('${"user-info:name"}', {
+      "user-info:name": "Jane Smith",
+    });
+    expect(res).toHaveLength(1);
+    expect(res[0].literalValue).toBe("Jane Smith");
+    expect(result).toBe(res[0].literalName);
+  });
+
+  test("should reject mismatched quote types (double to single)", () => {
+    const [result, res] = replaceVariables("${\"user info'}", {
+      "user info": "John Doe",
+    });
+    // Should not match the quoted pattern, should fall back to variable name
+    expect(result).toContain("czm_");
+    expect(res).toHaveLength(0);
+  });
+
+  test("should reject mismatched quote types (single to double)", () => {
+    const [result, res] = replaceVariables("${'user info\"}", {
+      "user info": "Jane Doe",
+    });
+    // Should not match the quoted pattern, should fall back to variable name
+    expect(result).toContain("czm_");
+    expect(res).toHaveLength(0);
+  });
+
+  test("should correctly handle consecutive properties with different quote types", () => {
+    const [result, res] = replaceVariables("${\"prop1\"} + ${'prop2'}", {
+      prop1: "value1",
+      prop2: "value2",
+    });
+    expect(res).toHaveLength(2);
+    expect(res[0].literalValue).toBe("value1");
+    expect(res[1].literalValue).toBe("value2");
+    expect(result).toContain(res[0].literalName);
+    expect(result).toContain("+");
+    expect(result).toContain(res[1].literalName);
+  });
+
+  test("should return empty string when quoted property is missing (consistent with regular variables)", () => {
+    const [result, res] = replaceVariables('${"missing"}', {
+      existing: "value",
+    });
+    // Returns empty string for missing quoted property (consistent with regular variables)
+    expect(res).toHaveLength(1);
+    expect(res[0].literalValue).toBe("");
+    expect(result).toBe(res[0].literalName);
+  });
+
+  test("should pass through regular variable name when property might be missing", () => {
+    const [result, res] = replaceVariables("${missing}");
+    // Regular variables are passed through as czm_variableName
+    // They will be evaluated later by Node._evaluateVariable
+    expect(result).toBe("czm_missing");
+    expect(res).toHaveLength(0);
+  });
+
+  test("should return empty string for missing JSONPath properties (consistent with regular variables)", () => {
+    const [result, res] = replaceVariables("${$.missingPath}", {
+      existing: "value",
+    });
+    // Returns empty string for missing JSONPath property
+    expect(res).toHaveLength(1);
+    expect(res[0].literalValue).toBe("");
+    expect(result).toBe(res[0].literalName);
+  });
+
+  test("should handle mixed existing and missing properties consistently", () => {
+    const [result, res] = replaceVariables('${"existing"} - ${"missing"}', {
+      existing: "value",
+    });
+    expect(res).toHaveLength(2);
+    expect(res[0].literalValue).toBe("value");
+    expect(res[1].literalValue).toBe(""); // Missing property returns empty string
+    expect(result).toContain(res[0].literalName);
+    expect(result).toContain("-");
+    expect(result).toContain(res[1].literalName);
+  });
 });