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

CLI Tools

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

Command-line utilities for manual version switching and compatibility testing during development. These tools allow developers to test their libraries against different Vue versions and resolve compatibility issues.

Capabilities

Version Switching

Manually switch between Vue 2 and Vue 3 compatibility modes for testing and development.

# Switch to Vue 2 compatibility mode
npx vue-demi-switch 2

# Switch to Vue 3 compatibility mode  
npx vue-demi-switch 3

# Switch to Vue 2.7 compatibility mode
npx vue-demi-switch 2.7

Usage Examples:

# Test library with Vue 2
npm install vue@2 @vue/composition-api
npx vue-demi-switch 2
npm test

# Test library with Vue 3
npm install vue@3
npx vue-demi-switch 3  
npm test

# Test library with Vue 2.7
npm install vue@2.7
npx vue-demi-switch 2.7
npm test

Package Aliasing

Switch versions while using a custom package alias instead of 'vue'. This is useful when working with multiple Vue versions or custom builds.

# Switch to Vue 2 with custom alias
npx vue-demi-switch 2 vue2

# Switch to Vue 3 with custom alias
npx vue-demi-switch 3 vue3

# Switch to Vue 2.7 with custom alias  
npx vue-demi-switch 2.7 vue-compat

Usage Examples:

# Use Vue 2 aliased as 'vue2'
npm install vue2@npm:vue@2 @vue/composition-api
npx vue-demi-switch 2 vue2

# Use Vue 3 aliased as 'vue3'
npm install vue3@npm:vue@3
npx vue-demi-switch 3 vue3

After running with an alias, vue-demi will import from the specified package:

// Generated code will use the alias
import * as Vue from 'vue2'; // instead of 'vue'

var isVue2 = true;
var isVue3 = false;
var Vue2 = Vue;

export * from 'vue2'; // instead of 'vue'

Automatic Fix

Manually trigger the postinstall script to fix vue-demi configuration based on the currently installed Vue version.

# Manually run the postinstall fix
npx vue-demi-fix

This command:

Detects the installed Vue version
Automatically switches to the appropriate compatibility mode
Updates the vue-demi files accordingly

Usage Examples:

# After installing Vue dependencies
npm install vue@3
npx vue-demi-fix  # Automatically switches to Vue 3 mode

# After changing Vue version
npm uninstall vue@3
npm install vue@2 @vue/composition-api
npx vue-demi-fix  # Automatically switches to Vue 2 mode

# Fix configuration issues
npx vue-demi-fix  # Resets to correct configuration

Development Workflow

Common development workflows using the CLI tools.

Cross-Version Testing:

#!/bin/bash
# test-all-versions.sh

echo "Testing with Vue 2..."
npm install vue@2 @vue/composition-api
npx vue-demi-switch 2
npm test

echo "Testing with Vue 2.7..."
npm install vue@2.7
npx vue-demi-switch 2.7
npm test

echo "Testing with Vue 3..."
npm install vue@3
npx vue-demi-switch 3
npm test

echo "All tests completed!"

Package.json Scripts:

{
  "scripts": {
    "test:vue2": "npm install vue@2 @vue/composition-api && npx vue-demi-switch 2 && npm test",
    "test:vue2.7": "npm install vue@2.7 && npx vue-demi-switch 2.7 && npm test",
    "test:vue3": "npm install vue@3 && npx vue-demi-switch 3 && npm test",
    "test:all": "npm run test:vue2 && npm run test:vue2.7 && npm run test:vue3",
    "fix": "npx vue-demi-fix"
  }
}

CI/CD Integration:

# .github/workflows/test.yml
name: Test
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        vue-version: [2, 2.7, 3]
        
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '16'
          
      - name: Install Vue ${{ matrix.vue-version }}
        run: |
          if [ "${{ matrix.vue-version }}" = "2" ]; then
            npm install vue@2 @vue/composition-api
          elif [ "${{ matrix.vue-version }}" = "2.7" ]; then
            npm install vue@2.7
          else  
            npm install vue@3
          fi
          
      - name: Switch Vue Demi
        run: npx vue-demi-switch ${{ matrix.vue-version }}
        
      - name: Run tests
        run: npm test

Troubleshooting

Common issues and solutions when using CLI tools.

Permission Issues:

# If npx fails due to permissions
npm install -g vue-demi
vue-demi-switch 3

# Or use local installation
./node_modules/.bin/vue-demi-switch 3

Version Detection Issues:

# Clear npm cache and reinstall
npm cache clean --force
rm -rf node_modules package-lock.json
npm install
npx vue-demi-fix

Multiple Vue Versions:

# Remove conflicting versions
npm uninstall vue @vue/composition-api
# Install desired version
npm install vue@3
npx vue-demi-fix

Advanced Usage

Custom Build Integration:

// build-script.js
const { exec } = require('child_process');

const switchVueVersion = (version) => {
  return new Promise((resolve, reject) => {
    exec(`npx vue-demi-switch ${version}`, (error, stdout, stderr) => {
      if (error) reject(error);
      else resolve(stdout);
    });
  });
};

// Build for all Vue versions
async function buildAll() {
  for (const version of ['2', '2.7', '3']) {
    console.log(`Building for Vue ${version}...`);
    await switchVueVersion(version);
    // Run your build process here
  }
}

Configuration Validation:

// validate-config.js
const fs = require('fs');
const path = require('path');

const libPath = path.join(__dirname, 'node_modules/vue-demi/lib');
const indexFile = path.join(libPath, 'index.mjs');

if (fs.existsSync(indexFile)) {
  const content = fs.readFileSync(indexFile, 'utf-8');
  
  if (content.includes('isVue2 = true')) {
    console.log('Vue Demi configured for Vue 2');
  } else if (content.includes('isVue3 = true')) {
    console.log('Vue Demi configured for Vue 3');
  }
} else {
  console.log('Vue Demi not properly installed');
  process.exit(1);
}

Install with Tessl CLI