tessl/npm-vue-demi

Vue Demi is a developing utility that allows you to write Universal Vue Libraries for Vue 2 & 3

—

Pending

Overview

Eval results

Files

Reactive Utilities

Name: tessl/npm-vue-demi
Author: tessl

Vue 2 style reactive utilities with Vue 3 compatibility polyfills for universal reactive data manipulation. These functions provide consistent behavior across Vue versions for setting and deleting reactive properties.

Capabilities

Reactive Set

Sets a property on a reactive object, ensuring reactivity is maintained. In Vue 2, this uses Vue.set internally. In Vue 3, it uses simple property assignment since all objects are reactive by default.

/**
 * Set a property on target object maintaining reactivity
 * Vue 2: Uses Vue.set for reactivity
 * Vue 3: Uses property assignment (objects are reactive by default)
 * @param target - Target object or array
 * @param key - Property key or array index
 * @param val - Value to set
 * @returns The value that was set
 */
export function set<T>(target: any, key: any, val: T): T;

Usage Examples:

import { set, reactive, ref } from "vue-demi";

// Object property setting
const user = reactive({ name: 'John' });
set(user, 'email', 'john@example.com'); // Reactive in both Vue 2 & 3
console.log(user.email); // 'john@example.com'

// Array manipulation
const items = ref(['apple', 'banana']);
set(items.value, 2, 'cherry'); // Reactive array update
console.log(items.value); // ['apple', 'banana', 'cherry']

// Dynamic property addition
const config = reactive({});
set(config, 'theme', 'dark'); // Adds reactive property
set(config, 'language', 'en'); // Adds another reactive property

// Array length manipulation
const numbers = ref([1, 2, 3]);
set(numbers.value, 'length', 5); // Extends array length
set(numbers.value, 4, 10); // Sets value at new index

Reactive Delete

Deletes a property from a reactive object, ensuring reactivity is maintained. In Vue 2, this uses Vue.delete internally. In Vue 3, it uses the delete operator.

/**
 * Delete a property from target object maintaining reactivity
 * Vue 2: Uses Vue.delete for reactivity
 * Vue 3: Uses delete operator (objects are reactive by default)
 * @param target - Target object or array
 * @param key - Property key or array index to delete
 */
export function del(target: any, key: any): void;

Usage Examples:

import { del, reactive, ref } from "vue-demi";

// Object property deletion
const user = reactive({ 
  name: 'John', 
  email: 'john@example.com',
  age: 30 
});
del(user, 'age'); // Reactively removes property
console.log(user.age); // undefined

// Array element removal
const items = ref(['apple', 'banana', 'cherry']);
del(items.value, 1); // Removes 'banana', shifts array
console.log(items.value); // ['apple', 'cherry']

// Conditional deletion
const settings = reactive({
  theme: 'dark',
  notifications: true,
  beta: false
});

// Remove beta flag if disabled
if (!settings.beta) {
  del(settings, 'beta');
}

Combined Usage Patterns

Common patterns for using set and del together for dynamic object manipulation.

Dynamic Form Fields:

import { set, del, reactive } from "vue-demi";

export default {
  setup() {
    const formData = reactive({});
    
    const addField = (name: string, value: any) => {
      set(formData, name, value);
    };
    
    const removeField = (name: string) => {
      del(formData, name);
    };
    
    const toggleField = (name: string, value: any) => {
      if (name in formData) {
        del(formData, name);
      } else {
        set(formData, name, value);
      }
    };
    
    return {
      formData,
      addField,
      removeField,
      toggleField
    };
  }
};

Dynamic List Management:

import { set, del, ref } from "vue-demi";

export default {
  setup() {
    const items = ref([]);
    
    const addItem = (item: any) => {
      const index = items.value.length;
      set(items.value, index, item);
    };
    
    const removeItem = (index: number) => {
      del(items.value, index);
    };
    
    const updateItem = (index: number, item: any) => {
      set(items.value, index, item);
    };
    
    return {
      items,
      addItem,
      removeItem,
      updateItem
    };
  }
};

Conditional Property Management:

import { set, del, reactive, computed } from "vue-demi";

export default {
  setup() {
    const config = reactive({
      mode: 'development'
    });
    
    const isDevelopment = computed(() => config.mode === 'development');
    
    // Add debug properties only in development
    const updateDebugMode = (enabled: boolean) => {
      if (enabled && isDevelopment.value) {
        set(config, 'debug', true);
        set(config, 'verbose', true);
      } else {
        del(config, 'debug');
        del(config, 'verbose');
      }
    };
    
    return {
      config,
      isDevelopment,
      updateDebugMode
    };
  }
};

Migration Notes

When migrating from Vue 2 to Vue 3:

set and del continue to work but are not strictly necessary in Vue 3
Vue 3's reactivity system handles property addition/deletion automatically
These utilities provide consistency for libraries targeting both versions
Consider using direct property access in Vue 3-only code for better performance

// Vue 2 & 3 compatible (recommended for libraries)
import { set, del } from "vue-demi";
set(obj, 'prop', value);
del(obj, 'prop');

// Vue 3 only (direct manipulation)
obj.prop = value;
delete obj.prop;

Install with Tessl CLI