@mintjamsinc/ichigojs 0.1.64 → 0.1.66

package/dist/ichigo.umd.js

@@ -6865,11 +6865,16 @@
                     const ast = parse(source, { ecmaVersion: "latest" });
                     const dependencies = new Set();
                     const declaredVariables = new Set();
+                    const thisAliases = new Set();
                     // First, collect all declared variables (const, let, var, function params, etc.)
                     ancestor(ast, {
                         VariableDeclarator(node) {
                             if (node.id.type === 'Identifier') {
                                 declaredVariables.add(node.id.name);
+                                // Detect aliases assigned from `this`, e.g. `let vm = this;`
+                                if (node.init && node.init.type === 'ThisExpression') {
+                                    thisAliases.add(node.id.name);
+                                }
                             }
                         },
                         FunctionDeclaration(node) {
@@ -6921,9 +6926,14 @@
                             }
                         },
                         MemberExpression(node) {
-                            // Handle 'this.propertyName' patterns
-                            if (node.object.type === 'ThisExpression' && node.property.type === 'Identifier') {
-                                dependencies.add(node.property.name);
+                            // Handle 'this.propertyName' patterns and aliases like 'vm.x' when 'vm = this'
+                            if (node.property.type === 'Identifier') {
+                                if (node.object.type === 'ThisExpression') {
+                                    dependencies.add(node.property.name);
+                                }
+                                else if (node.object.type === 'Identifier' && thisAliases.has(node.object.name)) {
+                                    dependencies.add(node.property.name);
+                                }
                             }
                         }
                     });
@@ -7017,7 +7027,7 @@
                 return expression;
             }
             try {
-                // Build a map of positions to replace: { start: number, end: number, name: string }[]
+                // Build a map of positions to replace: { start: number, end: number, name: string, asThisAlias?: boolean }[]
                 const replacements = [];
                 // In script mode we must not wrap in parens (that would make multi-statement input invalid).
                 // Offsets from the parser therefore refer directly to the original expression, so no shift.
@@ -7026,13 +7036,17 @@
                 const offsetShift = asScript ? 0 : 1;
                 const parsedAst = parse(source, { ecmaVersion: 'latest' });
                 // Track identifiers that are locally declared within the handler body (let/const/var, function
-                // params) so we don't rewrite them to `this.xxx`. Only relevant in script mode, where the user
-                // can write declarations; in expression mode there are no declarations to track.
+                // params) so we don't rewrite them to `this.xxx`. Additionally detect `this` aliases such as
+                // `let vm = this;` so that `vm.x` can be rewritten to `this.x` even though `vm` is locally declared.
                 const locallyDeclared = new Set();
+                const thisAliases = new Set();
                 if (asScript) {
                     full(parsedAst, (node) => {
                         if (node.type === 'VariableDeclarator' && node.id?.type === 'Identifier') {
                             locallyDeclared.add(node.id.name);
+                            if (node.init && node.init.type === 'ThisExpression') {
+                                thisAliases.add(node.id.name);
+                            }
                         }
                         else if (node.type === 'FunctionDeclaration' && node.id?.type === 'Identifier') {
                             locallyDeclared.add(node.id.name);
@@ -7049,20 +7063,34 @@
                     if (!bindingIdentifiers.has(node.name)) {
                         return;
                     }
-                    // Skip identifiers that were declared locally in the handler body
+                    // Locally declared identifiers must not be rewritten to `this.xxx`. The one
+                    // exception is a `this`-alias (e.g. `let vm = this;`): when such an alias is
+                    // used as the OBJECT of a MemberExpression (`vm.x`), we replace just the
+                    // object with `this` so that `vm.x` becomes `this.x`. In every other position
+                    // (the declaration LHS, a bare reference such as `console.log(vm)`, an
+                    // argument, etc.) the alias must be left untouched — rewriting it to
+                    // `this.vm` would either produce a syntax error (`let this.vm = this;`) or
+                    // change the meaning at runtime.
+                    // walk.fullAncestor includes the visited node itself as the last entry of
+                    // `ancestors`, so the actual parent node is at length - 2.
+                    const parentNode = ancestors.length >= 2 ? ancestors[ancestors.length - 2] : undefined;
+                    const isAliasAsMemberObject = parentNode?.type === 'MemberExpression' && parentNode.object === node;
                     if (locallyDeclared.has(node.name)) {
+                        if (!thisAliases.has(node.name) || !isAliasAsMemberObject) {
+                            return;
+                        }
+                        replacements.push({
+                            start: node.start - offsetShift,
+                            end: node.end - offsetShift,
+                            name: node.name,
+                            asThisAlias: true
+                        });
                         return;
                     }
-                    // Check if this identifier is a property of a MemberExpression
-                    // (e.g., in 'obj.prop', we should skip 'prop')
-                    if (ancestors.length >= 1) {
-                        const parent = ancestors[ancestors.length - 1];
-                        if (parent.type === 'MemberExpression') {
-                            // Skip if this identifier is the property (not the object) of a non-computed member access
-                            if (!parent.computed && parent.property === node) {
-                                return;
-                            }
-                        }
+                    // Skip identifiers that are the property (not the object) of a non-computed
+                    // member access (e.g., the `prop` in `obj.prop`).
+                    if (parentNode?.type === 'MemberExpression' && !parentNode.computed && parentNode.property === node) {
+                        return;
                     }
                     // Add to replacements list (adjust for the wrapping parentheses in expression mode)
                     replacements.push({
@@ -7076,9 +7104,8 @@
                 // Apply replacements
                 let result = expression;
                 for (const replacement of replacements) {
-                    result = result.substring(0, replacement.start) +
-                        `this.${replacement.name}` +
-                        result.substring(replacement.end);
+                    const insertion = replacement.asThisAlias ? 'this' : `this.${replacement.name}`;
+                    result = result.substring(0, replacement.start) + insertion + result.substring(replacement.end);
                 }
                 return result;
             }
@@ -7443,6 +7470,13 @@
         get expression() {
             return this.#expression;
         }
+        /**
+         * Evaluates the bound expression and returns the current value.
+         * Returns undefined when no evaluator is available (e.g., empty expression).
+         */
+        evaluate() {
+            return this.#evaluator?.evaluate();
+        }
         /**
          * @inheritdoc
          */
@@ -8655,6 +8689,29 @@
         get keyDirective() {
             return this.#keyDirective;
         }
+        /**
+         * Finds a VBindDirective that binds the given attribute name (e.g. "value",
+         * "true-value", "false-value"). Returns undefined if no matching v-bind
+         * directive is registered on this node.
+         *
+         * Used by directives such as v-model that need to read the typed value of a
+         * sibling v-bind without depending on the attribute order in the source HTML.
+         */
+        findBindDirective(attrName) {
+            if (!this.#directives || this.#directives.length === 0) {
+                return undefined;
+            }
+            for (const directive of this.#directives) {
+                if (directive.name !== StandardDirectiveName.V_BIND) {
+                    continue;
+                }
+                const bindDirective = directive;
+                if (bindDirective.attributeName === attrName) {
+                    return bindDirective;
+                }
+            }
+            return undefined;
+        }
         /**
          * Gets the VBindDirective for options specific to the given directive name.
          * Searches in order: `:options.{directive}` -> `:options`
@@ -11108,14 +11165,13 @@
          * @inheritdoc
          */
         get domUpdater() {
-            const identifiers = this.#evaluator?.dependentIdentifiers ?? [];
-            // Create and return the DOM updater
+            const self = this;
             const updater = {
                 get dependentIdentifiers() {
-                    return identifiers;
+                    return self.#collectDependentIdentifiers();
                 },
                 applyToDOM: () => {
-                    this.#render();
+                    self.#render();
                 }
             };
             return updater;
@@ -11130,7 +11186,38 @@
          * @inheritdoc
          */
         get dependentIdentifiers() {
-            return this.#evaluator?.dependentIdentifiers ?? [];
+            return this.#collectDependentIdentifiers();
+        }
+        /**
+         * Collects identifiers this directive's render depends on. For checkboxes
+         * this includes the v-model expression itself plus the expressions bound to
+         * `:value`, `:true-value`, and `:false-value`, since the rendered checked
+         * state changes when any of these change.
+         */
+        #collectDependentIdentifiers() {
+            const ids = new Set(this.#evaluator?.dependentIdentifiers ?? []);
+            const element = this.#vNode.node;
+            if (element instanceof HTMLInputElement) {
+                const manager = this.#vNode.directiveManager;
+                // For checkboxes and radios, v-model's rendered state depends on
+                // the element's typed `:value` binding (if present). Checkboxes
+                // additionally depend on `:true-value` / `:false-value` bindings.
+                if (element.type === 'checkbox' || element.type === 'radio') {
+                    const valueBind = manager?.findBindDirective('value');
+                    if (valueBind) {
+                        valueBind.dependentIdentifiers.forEach(id => ids.add(id));
+                    }
+                }
+                if (element.type === 'checkbox') {
+                    for (const attrName of ['true-value', 'false-value']) {
+                        const bindDirective = manager?.findBindDirective(attrName);
+                        if (bindDirective) {
+                            bindDirective.dependentIdentifiers.forEach(id => ids.add(id));
+                        }
+                    }
+                }
+            }
+            return Array.from(ids);
         }
         /**
          * @inheritdoc
@@ -11210,14 +11297,16 @@
             // Update the element based on its type
             if (element instanceof HTMLInputElement) {
                 if (element.type === 'checkbox') {
-                    element.checked = !!value;
+                    this.#renderCheckbox(element, value);
                 }
                 else if (element.type === 'radio') {
-                    // Prefer the original typed value stored by VBindDirective (:value binding)
-                    // to avoid type coercion issues (e.g., boolean false vs string "false").
-                    const radioValue = element._value !== undefined
-                        ? element._value
-                        : element.value;
+                    // Prefer the typed value from a sibling :value binding when present,
+                    // falling back to any stored `_value` or the raw string `value`.
+                    const manager = this.#vNode.directiveManager;
+                    const bindDirective = manager?.findBindDirective('value');
+                    const radioValue = bindDirective !== undefined
+                        ? bindDirective.evaluate()
+                        : (element._value !== undefined ? element._value : element.value);
                     element.checked = radioValue === value;
                 }
                 else {
@@ -11243,14 +11332,16 @@
                 // Get the new value based on element type
                 if (target instanceof HTMLInputElement) {
                     if (target.type === 'checkbox') {
-                        newValue = target.checked;
+                        newValue = this.#computeCheckboxNewValue(target);
                     }
                     else if (target.type === 'radio') {
-                        // Prefer the original typed value stored by VBindDirective (:value binding)
-                        // to preserve the type on write-back (e.g., boolean false, number 0).
-                        newValue = target._value !== undefined
-                            ? target._value
-                            : target.value;
+                        // Prefer the typed value from a sibling :value binding when present,
+                        // falling back to any stored `_value` or the raw string `value`.
+                        const manager = this.#vNode.directiveManager;
+                        const bindDirective = manager?.findBindDirective('value');
+                        newValue = bindDirective !== undefined
+                            ? bindDirective.evaluate()
+                            : (target._value !== undefined ? target._value : target.value);
                     }
                     else {
                         newValue = target.value;
@@ -11259,13 +11350,109 @@
                 else if (target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) {
                     newValue = target.value;
                 }
-                // Apply modifiers to the value
-                newValue = this.#applyModifiers(newValue);
+                // Apply modifiers to the value (skip for checkboxes: their value
+                // is either boolean, a custom true/false value, or an array, none
+                // of which should be coerced by .trim or .number).
+                const isCheckbox = target instanceof HTMLInputElement && target.type === 'checkbox';
+                if (!isCheckbox) {
+                    newValue = this.#applyModifiers(newValue);
+                }
                 // Update the binding
                 this.#updateBinding(newValue);
             };
             element.addEventListener(eventName, this.#listener);
         }
+        /**
+         * Renders a checkbox in one of three modes (Vue-compatible):
+         *   1. Array binding: the bound value is an array; the checkbox is checked
+         *      when its element-value is a member of that array.
+         *   2. true-value/false-value binding: when `:true-value` (and optionally
+         *      `:false-value`) is provided via v-bind, the checkbox is checked
+         *      when the bound value strictly equals the resolved true-value.
+         *   3. Boolean binding (default): the bound value is coerced to boolean.
+         */
+        #renderCheckbox(element, value) {
+            if (Array.isArray(value)) {
+                const elementValue = this.#resolveCheckboxElementValue(element);
+                element.checked = value.indexOf(elementValue) !== -1;
+                return;
+            }
+            const trueValueDescriptor = this.#resolveCheckboxTrueFalseValues(element);
+            if (trueValueDescriptor) {
+                element.checked = value === trueValueDescriptor.trueValue;
+                return;
+            }
+            element.checked = !!value;
+        }
+        /**
+         * Computes the value to write back to the bound expression when a checkbox
+         * change event fires. Mirrors the three-mode logic of #renderCheckbox.
+         *
+         * For array binding, the current value of the bound expression is read so
+         * that a fresh array can be returned (the existing array is not mutated,
+         * which preserves reactivity semantics).
+         */
+        #computeCheckboxNewValue(target) {
+            const currentValue = this.#evaluator?.evaluate();
+            if (Array.isArray(currentValue)) {
+                const elementValue = this.#resolveCheckboxElementValue(target);
+                const next = currentValue.slice();
+                const index = next.indexOf(elementValue);
+                if (target.checked) {
+                    if (index === -1) {
+                        next.push(elementValue);
+                    }
+                }
+                else {
+                    if (index !== -1) {
+                        next.splice(index, 1);
+                    }
+                }
+                return next;
+            }
+            const trueValueDescriptor = this.#resolveCheckboxTrueFalseValues(target);
+            if (trueValueDescriptor) {
+                return target.checked ? trueValueDescriptor.trueValue : trueValueDescriptor.falseValue;
+            }
+            return target.checked;
+        }
+        /**
+         * Resolves the typed element value for a checkbox. Prefers the value bound
+         * via `:value` (evaluated through the sibling VBindDirective so type is
+         * preserved), then the typed value previously stored on the element by
+         * VBindDirective, and finally the raw string `value` attribute.
+         */
+        #resolveCheckboxElementValue(element) {
+            const bindDirective = this.#vNode.directiveManager?.findBindDirective('value');
+            if (bindDirective) {
+                return bindDirective.evaluate();
+            }
+            if (element._value !== undefined) {
+                return element._value;
+            }
+            return element.value;
+        }
+        /**
+         * Resolves the (true-value, false-value) pair for a checkbox if either is
+         * bound via `:true-value` or `:false-value`. Returns undefined when no
+         * true/false value binding is present, signalling that the default boolean
+         * mode should be used.
+         *
+         * If only one of the two is bound, the other defaults match Vue: an unbound
+         * true-value defaults to literal `true`, an unbound false-value to `false`.
+         */
+        #resolveCheckboxTrueFalseValues(element) {
+            const manager = this.#vNode.directiveManager;
+            const trueBind = manager?.findBindDirective('true-value');
+            const falseBind = manager?.findBindDirective('false-value');
+            if (!trueBind && !falseBind) {
+                return undefined;
+            }
+            return {
+                trueValue: trueBind ? trueBind.evaluate() : true,
+                falseValue: falseBind ? falseBind.evaluate() : false,
+            };
+        }
         /**
          * Applies modifiers to the input value.
          * @param value The value to process.