Migrating from Vue.js to Juris: A Practical Guide

# Find all Vue components find src -name "*.vue" | wc -l # Identify complex components (>100 lines) find src -name "*.vue" -exec wc -l {} + | sort -nr # List Vuex store modules ls src/store/modules/ 

<!-- Include Juris from unpkg CDN --> <script src="https://unpkg.com/juris@0.5.2/juris.js"></script> 

// Create Juris instance alongside Vue window.jurisApp = new Juris({ states: { // Initial state from your Vuex store user: vuexStore.state.user, ui: vuexStore.state.ui }, services: { // Migrate Vuex actions to services userService: { login: async (credentials) => { const user = await api.login(credentials); jurisApp.setState('user', user); return user; }, logout: () => { jurisApp.setState('user', null); localStorage.removeItem('token'); } } } }); 

// Keep Vuex and Juris in sync during transition const stateBridge = { // Sync Vuex changes to Juris vuexToJuris: (store) => { store.subscribe((mutation, state) => { // Mirror important state changes if (mutation.type === 'SET_USER') { jurisApp.setState('user', state.user); } if (mutation.type === 'UPDATE_UI') { jurisApp.setState('ui', state.ui); } }); }, // Sync Juris changes to Vuex jurisToVuex: (store) => { jurisApp.subscribe('user', (user) => { store.commit('SET_USER', user); }); jurisApp.subscribe('ui', (ui) => { store.commit('UPDATE_UI', ui); }); } }; // Initialize bridges stateBridge.vuexToJuris(vuexStore); stateBridge.jurisToVuex(vuexStore); 

<!-- UserGreeting.vue --> <template> <div class="greeting"> <h2>Welcome, {{ user.name }}!</h2> <p>Last login: {{ formatDate(user.lastLogin) }}</p> <button @click="refreshData">Refresh</button> </div> </template> <script> export default { computed: { user() { return this.$store.state.user; } }, methods: { formatDate(date) { return new Date(date).toLocaleDateString(); }, refreshData() { this.$store.dispatch('user/refresh'); } } } </script> 

// Replace the Vue component with enhancement juris.enhance('.greeting', ({ getState, userService }) => ({ children: () => { const user = getState('user'); if (!user) return [{ div: { text: 'Please log in' } }]; return [ { h2: { text: `Welcome, ${user.name}!` } }, { p: { text: `Last login: ${new Date(user.lastLogin).toLocaleDateString()}` } }, { button: { text: 'Refresh', onclick: () => userService.refresh() }} ]; } })); 

<!-- ContactForm.vue --> <template> <form @submit.prevent="handleSubmit"> <div class="field"> <label>Name</label> <input v-model="form.name" :class="{ error: errors.name }" @blur="validateName" /> <span v-if="errors.name" class="error">{{ errors.name }}</span> </div> <div class="field"> <label>Email</label> <input type="email" v-model="form.email" :class="{ error: errors.email }" @blur="validateEmail" /> <span v-if="errors.email" class="error">{{ errors.email }}</span> </div> <button type="submit" :disabled="!isValid"> {{ isSubmitting ? 'Sending...' : 'Send Message' }} </button> </form> </template> <script> export default { data() { return { form: { name: '', email: '', message: '' }, errors: {}, isSubmitting: false } }, computed: { isValid() { return Object.keys(this.errors).length === 0 && this.form.name && this.form.email; } }, methods: { validateName() { if (!this.form.name.trim()) { this.$set(this.errors, 'name', 'Name is required'); } else { this.$delete(this.errors, 'name'); } }, validateEmail() { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(this.form.email)) { this.$set(this.errors, 'email', 'Valid email required'); } else { this.$delete(this.errors, 'email'); } }, async handleSubmit() { this.isSubmitting = true; try { await this.$store.dispatch('contact/send', this.form); this.resetForm(); } catch (error) { this.handleError(error); } finally { this.isSubmitting = false; } } } } </script> 

const juris = new Juris({ services: { contactForm: { validate: (field, value) => { let error = null; if (field === 'name' && !value.trim()) { error = 'Name is required'; } else if (field === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) { error = 'Valid email required'; } juris.setState(`contactForm.errors.${field}`, error); return !error; }, isValid: () => { const errors = juris.getState('contactForm.errors', {}); const form = juris.getState('contactForm.data', {}); return Object.values(errors).every(error => !error) && form.name && form.email; }, submit: async () => { juris.setState('contactForm.submitting', true); try { const formData = juris.getState('contactForm.data'); await api.contact.send(formData); juris.setState('contactForm.data', {}); juris.setState('contactForm.errors', {}); } catch (error) { console.error('Contact form error:', error); } finally { juris.setState('contactForm.submitting', false); } } } } }); juris.enhance('form.contact-form', { selectors: { 'input[name]': (ctx) => { const field = ctx.element.name; return { value: () => juris.getState(`contactForm.data.${field}`, ''), oninput: (e) => juris.setState(`contactForm.data.${field}`, e.target.value), onblur: ({ contactForm }) => contactForm.validate(field, ctx.element.value), className: () => juris.getState(`contactForm.errors.${field}`) ? 'error' : '' }; }, '.error-message': (ctx) => { const field = ctx.element.dataset.field; return { text: () => juris.getState(`contactForm.errors.${field}`, ''), style: () => ({ display: juris.getState(`contactForm.errors.${field}`) ? 'block' : 'none' }) }; }, 'button[type="submit"]': ({ contactForm }) => ({ disabled: () => !contactForm.isValid(), text: () => juris.getState('contactForm.submitting') ? 'Sending...' : 'Send Message', onclick: (e) => { e.preventDefault(); contactForm.submit(); } }) } }); 

<!-- TodoList.vue --> <template> <div class="todo-list"> <div class="filters"> <button v-for="filter in filters" :key="filter" :class="{ active: currentFilter === filter }" @click="setFilter(filter)" > {{ filter }} </button> </div> <div class="todos"> <todo-item v-for="todo in filteredTodos" :key="todo.id" :todo="todo" @toggle="toggleTodo" @delete="deleteTodo" /> </div> <div class="stats"> {{ activeCount }} of {{ totalCount }} remaining </div> </div> </template> <script> import TodoItem from './TodoItem.vue'; export default { components: { TodoItem }, data() { return { filters: ['all', 'active', 'completed'] } }, computed: { todos() { return this.$store.state.todos; }, currentFilter() { return this.$store.state.filter; }, filteredTodos() { return this.todos.filter(todo => { if (this.currentFilter === 'active') return !todo.completed; if (this.currentFilter === 'completed') return todo.completed; return true; }); }, activeCount() { return this.todos.filter(t => !t.completed).length; }, totalCount() { return this.todos.length; } }, methods: { setFilter(filter) { this.$store.commit('SET_FILTER', filter); }, toggleTodo(id) { this.$store.dispatch('todos/toggle', id); }, deleteTodo(id) { this.$store.dispatch('todos/delete', id); } } } </script> 

const juris = new Juris({ services: { todoManager: { setFilter: (filter) => { juris.setState('todos.filter', filter); }, toggle: (id) => { const todos = juris.getState('todos.items', []); const updated = todos.map(todo => todo.id === id ? { ...todo, completed: !todo.completed } : todo ); juris.setState('todos.items', updated); }, delete: (id) => { const todos = juris.getState('todos.items', []); juris.setState('todos.items', todos.filter(t => t.id !== id)); }, getFiltered: () => { const todos = juris.getState('todos.items', []); const filter = juris.getState('todos.filter', 'all'); return todos.filter(todo => { if (filter === 'active') return !todo.completed; if (filter === 'completed') return todo.completed; return true; }); }, getStats: () => { const todos = juris.getState('todos.items', []); return { active: todos.filter(t => !t.completed).length, total: todos.length }; } } } }); juris.enhance('.todo-list', ({ getState, todoManager }) => ({ children: () => [ // Filters { div: { className: 'filters', children: ['all', 'active', 'completed'].map(filter => ({ button: { text: filter, className: getState('todos.filter') === filter ? 'active' : '', onclick: () => todoManager.setFilter(filter) } })) } }, // Todo items { div: { className: 'todos', children: todoManager.getFiltered().map(todo => ({ div: { className: `todo-item ${todo.completed ? 'completed' : ''}`, children: [ { input: { type: 'checkbox', checked: todo.completed, onchange: () => todoManager.toggle(todo.id) } }, { span: { text: todo.text } }, { button: { text: '×', onclick: () => todoManager.delete(todo.id) } } ] } })) } }, // Stats { div: { className: 'stats', text: () => { const stats = todoManager.getStats(); return `${stats.active} of ${stats.total} remaining`; } } } ] })); 

// store/modules/user.js export default { namespaced: true, state: { profile: null, preferences: {}, isLoading: false }, mutations: { SET_PROFILE(state, profile) { state.profile = profile; }, SET_PREFERENCES(state, preferences) { state.preferences = preferences; }, SET_LOADING(state, loading) { state.isLoading = loading; } }, actions: { async fetchProfile({ commit }) { commit('SET_LOADING', true); try { const profile = await api.user.getProfile(); commit('SET_PROFILE', profile); } catch (error) { console.error('Failed to fetch profile:', error); } finally { commit('SET_LOADING', false); } }, async updatePreferences({ commit }, preferences) { try { await api.user.updatePreferences(preferences); commit('SET_PREFERENCES', preferences); } catch (error) { console.error('Failed to update preferences:', error); } } }, getters: { isLoggedIn: state => !!state.profile, displayName: state => state.profile?.name || 'Guest', theme: state => state.preferences.theme || 'light' } } 

const juris = new Juris({ states: { user: { profile: null, preferences: {}, isLoading: false } }, services: { userService: { async fetchProfile() { juris.setState('user.isLoading', true); try { const profile = await api.user.getProfile(); juris.setState('user.profile', profile); } catch (error) { console.error('Failed to fetch profile:', error); } finally { juris.setState('user.isLoading', false); } }, async updatePreferences(preferences) { try { await api.user.updatePreferences(preferences); juris.setState('user.preferences', preferences); } catch (error) { console.error('Failed to update preferences:', error); } }, // Getters as computed functions isLoggedIn: () => !!juris.getState('user.profile'), getDisplayName: () => juris.getState('user.profile')?.name || 'Guest', getTheme: () => juris.getState('user.preferences.theme', 'light') } } }); 

// composables/useShoppingCart.js import { computed, reactive } from 'vue'; import { useStore } from 'vuex'; export function useShoppingCart() { const store = useStore(); const cartItems = computed(() => store.state.cart.items); const cartTotal = computed(() => cartItems.value.reduce((sum, item) => sum + (item.price * item.quantity), 0) ); const addItem = (product) => { store.dispatch('cart/addItem', product); }; const removeItem = (productId) => { store.dispatch('cart/removeItem', productId); }; const updateQuantity = (productId, quantity) => { store.dispatch('cart/updateQuantity', { productId, quantity }); }; return { cartItems, cartTotal, addItem, removeItem, updateQuantity }; } 

const juris = new Juris({ states: { cart: { items: [] } }, services: { cartService: { getItems: () => juris.getState('cart.items', []), getTotal: () => { const items = juris.getState('cart.items', []); return items.reduce((sum, item) => sum + (item.price * item.quantity), 0); }, addItem: (product) => { const items = juris.getState('cart.items', []); const existingItem = items.find(item => item.id === product.id); if (existingItem) { const updated = items.map(item => item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item ); juris.setState('cart.items', updated); } else { juris.setState('cart.items', [...items, { ...product, quantity: 1 }]); } }, removeItem: (productId) => { const items = juris.getState('cart.items', []); juris.setState('cart.items', items.filter(item => item.id !== productId)); }, updateQuantity: (productId, quantity) => { const items = juris.getState('cart.items', []); const updated = items.map(item => item.id === productId ? { ...item, quantity } : item ); juris.setState('cart.items', updated); } } } }); // Usage in components juris.enhance('.cart-summary', ({ cartService }) => ({ children: () => [ { div: { className: 'cart-total', text: `Total: $${cartService.getTotal().toFixed(2)}` } }, { div: { className: 'cart-items', children: cartService.getItems().map(item => ({ div: { className: 'cart-item', children: [ { span: { text: item.name } }, { span: { text: `$${item.price}` } }, { input: { type: 'number', value: item.quantity, onchange: (e) => cartService.updateQuantity(item.id, parseInt(e.target.value)) } }, { button: { text: 'Remove', onclick: () => cartService.removeItem(item.id) } } ] } })) } } ] })); 

// router/index.js import { createRouter, createWebHistory } from 'vue-router'; import Home from '../views/Home.vue'; import About from '../views/About.vue'; import Contact from '../views/Contact.vue'; const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact } ]; export default createRouter({ history: createWebHistory(), routes }); 

const juris = new Juris({ states: { router: { currentRoute: '/', params: {}, query: {} } }, services: { router: { navigate: (path) => { juris.setState('router.currentRoute', path); history.pushState({}, '', path); }, getCurrentRoute: () => juris.getState('router.currentRoute'), parseUrl: () => { const path = window.location.pathname; const query = new URLSearchParams(window.location.search); const queryObj = Object.fromEntries(query.entries()); juris.setState('router.currentRoute', path); juris.setState('router.query', queryObj); }, init: () => { // Parse initial URL juris.services.router.parseUrl(); // Listen for browser navigation window.addEventListener('popstate', () => { juris.services.router.parseUrl(); }); } } } }); // Initialize routing juris.services.router.init(); // Route-based rendering juris.enhance('.app-content', ({ getState }) => ({ children: () => { const route = getState('router.currentRoute'); switch (route) { case '/': return [{ div: { className: 'home-page', innerHTML: homePageContent } }]; case '/about': return [{ div: { className: 'about-page', innerHTML: aboutPageContent } }]; case '/contact': return [{ div: { className: 'contact-page', innerHTML: contactPageContent } }]; default: return [{ div: { className: 'not-found', text: '404 - Page not found' } }]; } } })); // Navigation links juris.enhance('nav a', ({ router }) => ({ onclick: (e) => { e.preventDefault(); const path = e.target.getAttribute('href'); router.navigate(path); } })); 

// tests/enhancements.test.js describe('Contact Form Enhancement', () => { let juris; let mockElement; beforeEach(() => { // Setup Juris instance juris = new Juris({ services: { contactForm: { validate: (field, value) => { // Test validation logic } } } }); // Create mock DOM element mockElement = document.createElement('form'); mockElement.innerHTML = ` <input name="email" type="email" /> <button type="submit">Submit</button> `; document.body.appendChild(mockElement); }); afterEach(() => { document.body.removeChild(mockElement); }); test('should validate email input', () => { // Enhance the form juris.enhance('form', { /* enhancement config */ }); // Test email validation const emailInput = mockElement.querySelector('input[name="email"]'); emailInput.value = 'invalid-email'; emailInput.dispatchEvent(new Event('blur')); // Assert validation error expect(juris.getState('contactForm.errors.email')).toBeTruthy(); }); test('should enable submit when form is valid', () => { juris.enhance('form', { /* enhancement config */ }); // Fill valid data const emailInput = mockElement.querySelector('input[name="email"]'); emailInput.value = 'test@example.com'; emailInput.dispatchEvent(new Event('input')); // Check submit button state const submitBtn = mockElement.querySelector('button[type="submit"]'); expect(submitBtn.disabled).toBeFalsy(); }); }); 

// tests/integration.test.js describe('Vue to Juris Migration', () => { test('should maintain state sync between Vue and Juris', () => { // Setup both Vue and Juris instances const vueApp = createApp(/* Vue app */); const juris = new Juris(/* Juris config */); // Setup state bridge setupStateBridge(vueApp, juris); // Test state synchronization vueApp.$store.commit('SET_USER', { name: 'John' }); expect(juris.getState('user.name')).toBe('John'); juris.setState('user.email', 'john@example.com'); expect(vueApp.$store.state.user.email).toBe('john@example.com'); }); }); 

// Before migration (Vue + Vuex + Router) // Total bundle size: ~150KB gzipped // After migration (Juris only) // Total bundle size: ~25KB gzipped // Reduction: 83% smaller // Measurement script function measureBundleSize() { const scripts = document.querySelectorAll('script[src]'); let totalSize = 0; scripts.forEach(script => { fetch(script.src) .then(response => response.blob()) .then(blob => { totalSize += blob.size; console.log(`${script.src}: ${blob.size} bytes`); }); }); setTimeout(() => { console.log(`Total bundle size: ${totalSize} bytes`); }, 1000); } 

// Performance monitoring const performanceMonitor = { startTime: performance.now(), measureRenderTime: (label) => { const endTime = performance.now(); console.log(`${label}: ${endTime - performanceMonitor.startTime}ms`); performanceMonitor.startTime = endTime; }, measureMemoryUsage: () => { if (performance.memory) { console.log('Memory usage:', { used: Math.round(performance.memory.usedJSHeapSize / 1024 / 1024) + 'MB', total: Math.round(performance.memory.totalJSHeapSize / 1024 / 1024) + 'MB' }); } } }; // Test Vue component render time performanceMonitor.measureRenderTime('Vue component mount'); // Test Juris enhancement time performanceMonitor.measureRenderTime('Juris enhancement'); // Memory comparison performanceMonitor.measureMemoryUsage(); 

// Improved state bridge with error handling const robustStateBridge = { setupSync: (vueStore, juris) => { // Vuex to Juris with validation vueStore.subscribe((mutation, state) => { try { const stateMapping = { 'SET_USER': () => juris.setState('user', state.user), 'UPDATE_UI': () => juris.setState('ui', state.ui) }; if (stateMapping[mutation.type]) { stateMapping[mutation.type](); } } catch (error) { console.error('State sync error:', error); } }); // Juris to Vuex with validation juris.subscribe('user', (user) => { try { vueStore.commit('SET_USER', user); } catch (error) { console.error('Reverse sync error:', error); } }); } }; 

// Simulate Vue lifecycle with Juris patterns const lifecycleSimulator = { onMounted: (callback) => { // Use MutationObserver to detect when elements are added const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.type === 'childList') { mutation.addedNodes.forEach((node) => { if (node.nodeType === Node.ELEMENT_NODE) { // Element was mounted setTimeout(callback, 0); } }); } }); }); observer.observe(document.body, { childList: true, subtree: true }); return observer; }, onUnmounted: (element, callback) => { // Use MutationObserver to detect removal const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.type === 'childList') { mutation.removedNodes.forEach((node) => { if (node === element || node.contains(element)) { callback(); observer.disconnect(); } }); } }); }); observer.observe(document.body, { childList: true, subtree: true }); return observer; } }; 

// Event bus pattern for component communication const eventBus = { listeners: new Map(), emit: (event, data) => { const callbacks = eventBus.listeners.get(event) || []; callbacks.forEach(callback => callback(data)); }, on: (event, callback) => { if (!eventBus.listeners.has(event)) { eventBus.listeners.set(event, []); } eventBus.listeners.get(event).push(callback); // Return unsubscribe function return () => { const callbacks = eventBus.listeners.get(event); const index = callbacks.indexOf(callback); if (index > -1) { callbacks.splice(index, 1); } }; } }; // Use in Juris enhancements juris.enhance('.parent-component', ({ getState }) => ({ children: () => [ { div: { className: 'child-component', onclick: () => eventBus.emit('child-clicked', { id: 1 }) } } ] })); // Listen for events in another component const unsubscribe = eventBus.on('child-clicked', (data) => { console.log('Child clicked:', data); });