插件开发 #

Alpine.plugin((Alpine) => {
    Alpine.magic('foo', () => 'bar')
    Alpine.directive('foo', (el, { value }) => { })
})

import MyPlugin from './my-plugin'

Alpine.plugin(MyPlugin)

Alpine.magic('now', () => {
    return Date.now()
})

<div x-data>
    <span x-text="$now"></span>
</div>

Alpine.magic('log', (el, { Alpine }) => {
    return (message) => {
        console.log(`[${el.tagName}]:`, message)
    }
})

<div x-data>
    <button @click="$log('clicked!')">点击</button>
</div>

Alpine.magic('utils', () => ({
    formatCurrency(value) {
        return new Intl.NumberFormat('zh-CN', {
            style: 'currency',
            currency: 'CNY'
        }).format(value)
    },
    
    formatDate(date) {
        return new Intl.DateTimeFormat('zh-CN').format(new Date(date))
    },
    
    debounce(fn, delay) {
        let timer
        return (...args) => {
            clearTimeout(timer)
            timer = setTimeout(() => fn(...args), delay)
        }
    }
}))

<div x-data="{ price: 1234.56 }">
    <span x-text="$utils.formatCurrency(price)"></span>
</div>

Alpine.magic('localStorage', () => ({
    get(key, defaultValue = null) {
        const value = localStorage.getItem(key)
        return value ? JSON.parse(value) : defaultValue
    },
    
    set(key, value) {
        localStorage.setItem(key, JSON.stringify(value))
    },
    
    remove(key) {
        localStorage.removeItem(key)
    }
}))

<div x-data x-init="theme = $localStorage.get('theme', 'light')">
    <select x-model="theme" @change="$localStorage.set('theme', theme)">
        <option value="light">浅色</option>
        <option value="dark">深色</option>
    </select>
</div>

Alpine.magic('clipboard', () => ({
    async copy(text) {
        await navigator.clipboard.writeText(text)
        return true
    },
    
    async read() {
        return await navigator.clipboard.readText()
    }
}))

<div x-data>
    <button @click="$clipboard.copy('Hello World')">复制</button>
</div>

Alpine.directive('uppercase', (el, { expression }, { effect, evaluateLater }) => {
    const getValue = evaluateLater(expression)
    
    effect(() => {
        getValue(value => {
            el.textContent = value.toUpperCase()
        })
    })
})

<div x-data="{ name: 'john' }">
    <span x-uppercase="name"></span>
</div>

Alpine.directive('click-outside', (el, { expression }, { evaluateLater, cleanup }) => {
    const handler = evaluateLater(expression)
    
    const onClick = (e) => {
        if (!el.contains(e.target)) {
            handler()
        }
    }
    
    document.addEventListener('click', onClick)
    
    cleanup(() => {
        document.removeEventListener('click', onClick)
    })
})

<div x-data="{ open: false }">
    <button @click="open = true">打开</button>
    <div x-show="open" x-click-outside="open = false">
        内容
    </div>
</div>

Alpine.directive('tooltip', (el, { expression, modifiers }, { evaluateLater, effect }) => {
    const getContent = evaluateLater(expression)
    const position = modifiers.includes('top') ? 'top' : 'bottom'
    
    let tooltip = null
    
    el.addEventListener('mouseenter', () => {
        getContent(content => {
            tooltip = document.createElement('div')
            tooltip.className = `tooltip tooltip-${position}`
            tooltip.textContent = content
            document.body.appendChild(tooltip)
            
            const rect = el.getBoundingClientRect()
            tooltip.style.left = rect.left + 'px'
            tooltip.style.top = position === 'top' 
                ? (rect.top - tooltip.offsetHeight - 8) + 'px'
                : (rect.bottom + 8) + 'px'
        })
    })
    
    el.addEventListener('mouseleave', () => {
        if (tooltip) {
            tooltip.remove()
            tooltip = null
        }
    })
})

<div x-data>
    <button x-tooltip.top="'这是提示'">悬停查看</button>
</div>

Alpine.directive('intersect', (el, { value, expression }, { evaluateLater }) => {
    const handler = evaluateLater(expression)
    const options = {
        threshold: value ? parseFloat(value) : 0.5
    }
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                handler()
            }
        })
    }, options)
    
    observer.observe(el)
})

<div x-data>
    <div x-intersect:0.3="console.log('进入视口')">
        滚动到此处触发
    </div>
</div>

Alpine.bind('submitBtn', () => ({
    type: 'submit',
    class: 'btn btn-primary',
    ':disabled': 'loading',
    '@click': 'submit()',
    x-text: "loading ? '提交中...' : '提交'"
}))

<div x-data="{ loading: false, submit() { } }">
    <button x-bind="submitBtn"></button>
</div>

function PersistPlugin(Alpine) {
    Alpine.magic('persist', (el, { Alpine }) => {
        return (key, defaultValue = null) => {
            const stored = localStorage.getItem(key)
            return stored ? JSON.parse(stored) : defaultValue
        }
    })
    
    Alpine.directive('persist', (el, { expression, value }, { effect, evaluateLater }) => {
        const key = expression || el.getAttribute('x-persist-key') || 'persist'
        const getValue = value ? evaluateLater(value) : null
        
        effect(() => {
            if (getValue) {
                getValue(val => {
                    localStorage.setItem(key, JSON.stringify(val))
                })
            }
        })
    })
}

Alpine.plugin(PersistPlugin)

function ValidationPlugin(Alpine) {
    Alpine.magic('validate', () => {
        return (value, rules) => {
            const errors = []
            
            if (rules.required && !value) {
                errors.push('此字段必填')
            }
            if (rules.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
                errors.push('请输入有效的邮箱地址')
            }
            if (rules.minLength && value.length < rules.minLength) {
                errors.push(`最少 ${rules.minLength} 个字符`)
            }
            if (rules.maxLength && value.length > rules.maxLength) {
                errors.push(`最多 ${rules.maxLength} 个字符`)
            }
            if (rules.pattern && !rules.pattern.test(value)) {
                errors.push(rules.message || '格式不正确')
            }
            
            return errors
        }
    })
    
    Alpine.directive('validate', (el, { expression, modifiers }, { evaluateLater, effect, cleanup }) => {
        const getRules = evaluateLater(expression)
        const showError = modifiers.includes('show')
        
        let errorEl = null
        
        effect(() => {
            getRules(rules => {
                const value = el.value
                const errors = Alpine.magic('validate')(value, rules)
                
                if (showError) {
                    if (errorEl) errorEl.remove()
                    
                    if (errors.length > 0) {
                        errorEl = document.createElement('span')
                        errorEl.className = 'error-message'
                        errorEl.textContent = errors[0]
                        el.parentNode.appendChild(errorEl)
                        el.classList.add('error')
                    } else {
                        el.classList.remove('error')
                    }
                }
            })
        })
    })
}

Alpine.plugin(ValidationPlugin)

function FocusPlugin(Alpine) {
    Alpine.directive('focus', (el, { value, modifiers }, { effect, cleanup }) => {
        const delay = value ? parseInt(value) : 0
        const select = modifiers.includes('select')
        
        effect(() => {
            setTimeout(() => {
                el.focus()
                if (select) el.select()
            }, delay)
        })
    })
    
    Alpine.magic('focus', () => ({
        first(selector) {
            const el = document.querySelector(selector)
            el?.focus()
        },
        all(selector) {
            document.querySelectorAll(selector).forEach(el => el.focus())
        }
    }))
}

Alpine.plugin(FocusPlugin)

my-alpine-plugin/
├── src/
│   └── index.js
├── dist/
│   ├── index.js
│   └── index.min.js
├── package.json
└── README.md

{
    "name": "alpinejs-my-plugin",
    "version": "1.0.0",
    "main": "dist/index.js",
    "module": "dist/index.esm.js",
    "peerDependencies": {
        "alpinejs": "^3.0.0"
    }
}

export default function MyPlugin(Alpine) {
    Alpine.magic('myMagic', () => { })
    Alpine.directive('myDirective', () => { })
}

if (window.Alpine) {
    window.Alpine.plugin(MyPlugin)
}

Alpine.magic('myFeature', () => { })    // $myFeature
Alpine.directive('my-feature', () => { }) // x-my-feature

Alpine.directive('myDirective', (el, {}, { cleanup }) => {
    const handler = () => { }
    document.addEventListener('click', handler)
    
    cleanup(() => {
        document.removeEventListener('click', handler)
    })
})

function MyPlugin(Alpine, options = {}) {
    const prefix = options.prefix || 'my'
    
    Alpine.directive(`${prefix}-directive`, () => { })
}