Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.refactron.dev/llms.txt

Use this file to discover all available pages before exploring further.

Transform ID: vue_set_delete_to_assignment Language: TypeScript

​
What it does

Rewrites Vue 2 reactivity helpers to plain JavaScript:
  • Vue.set(obj, key, value) → obj[key] = value (or obj.key = value for ident-shaped string keys)
  • Vue.delete(obj, key) → delete obj[key] (or delete obj.key)
  • this.$set(obj, key, value) → obj[key] = value
  • this.$delete(obj, key) → delete obj[key]
Key form selection: a string-literal key that is a valid JS identifier AND not a reserved word (class, interface, for, …) is rendered as dot notation. Anything else (spaces, digit-first, reserved words, numeric literals, identifier expressions, computed keys) uses bracket notation. Transform at src/transform/transforms/typescript/vue-set-delete.ts.

​
Detector pattern

The detector at src/analyze/detectors/typescript/vue-set-delete.ts matches CallExpression whose callee is Vue.set / Vue.delete (identifier + property access) or this.$set / this.$delete (this-expression + property access).

​
Preconditions

  1. vue_sfc_not_supported — refuses any .vue Single-File-Component file. SFC support requires a dedicated parser and is deferred to v0.4. .js / .ts files only.
  2. wrong_arity — refuses when the call doesn’t have the expected argument count (3 for set, 2 for delete).
  3. delete_in_expression_context — refuses Vue.delete(...) (and this.$delete(...)) anywhere its return value is consumed. Vue.delete returns undefined; the native delete operator returns a boolean — silently switching values would change semantics. Vue.set is safe in expression position because obj.k = v evaluates to v, which is what Vue.set already returns; the rewritten form is paren-wrapped for precedence.

​
Before / after

const obj: Record<string, number> = {};

Vue.set(obj, 'foo', 1);
Vue.set(obj, 'foo bar', 2);
Vue.delete(obj, 'foo');

class C {
  items: unknown[] = [];
  update(idx: number, item: unknown): void {
    this.$set(this.items, idx, item);
  }
}
Reserved-word string keys (class, interface, …) preserve bracket notation: 
Vue.set(obj, 'class', 'x');
// → obj["class"] = "x"

​
Edge cases NOT handled (skip via precondition)

  • .vue Single-File-Component files — vue_sfc_not_supported; v0.4 follow-up.
  • Vue.delete(...) used in expression position (const r = Vue.delete(obj, k), function-call args, binary operands) — delete_in_expression_context; return-value semantics differ.
  • Wrong arity (Vue.set(a, b), Vue.delete(a)) — wrong_arity.
Vue 2 reactivity caveat (ships in the suggestion text, not as a precondition): Vue 2’s Object.defineProperty-based reactivity requires Vue.set to add NEW reactive keys; direct assignment is not reactive for new keys on a Vue 2 instance. Vue 3 (Proxy-based) makes direct assignment reactive, so the rewrite is semantically equivalent. v0.2.3 assumes Vue 3 — on Vue 2 codebases, exclude this transform via --exclude vue_set_delete_to_assignment or your .refactronrc.json. A vueMajorVersion config key is a v0.4 follow-up.