Auto copy the Alpine code from Tailwind UI's copy button

add-alpine-js-to-tailwind-ui.js

// ==UserScript==
// @name         Add AlpineJs to Tailwind UI
// @namespace    http://tampermonkey.net/
// @version      3.0
// @description  Add Alpine JS code to Tailwind Ui copy/paste
// @author       https://gist.github.com/KevinBatdorf/8bd5f808fff6a59e100dfa08a7431822
// @match        https://tailwindui.com/components/*
// @grant        none
// ==/UserScript==

// Requires Tampermonkey 
// Chrome - https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en
// FF - https://addons.mozilla.org/en-US/firefox/addon/tampermonkey/

// Find me on Twitter: https://twitter.com/kevinbatdorf

const code = Array.from(document.querySelectorAll('button')).filter(b => b.getAttribute('@click') && b.getAttribute('@click').includes('clipboard'))
code.forEach(node => {
    node.addEventListener('click', function(event) {
        event.preventDefault()

        // This is the iFrame the component is in
        const iFrame = event.target.closest('[id^=component-]').querySelector('[x-ref=iframe]')
        const contentArea = iFrame.contentWindow.document.querySelector('body > div')
        const markup = contentArea.innerHTML

        // This will attempt to extract the function used in the x-data, like x-data="Component.popover"
        const scripts = Array.from(contentArea.querySelectorAll('[x-data]'))
            .filter((n) => /\(.*\)/.test(n.getAttribute('x-data').toString()))
            .map((n) => {
                const fnNameSplit = n
                    .getAttribute('x-data')
                    .replace('window.', '')
                    .replace(/\(.*\)/, '')
                    .split('.')

                // We need to get the string representation of the method
                const method = new Function(`return ${iFrame.contentWindow[fnNameSplit[0]][fnNameSplit[1]]};`)

                // This adds checks to create the global object then register it.
                return `
window.${fnNameSplit[0]} = window.${fnNameSplit[0]} ?? {}
window.${fnNameSplit[0]}['${fnNameSplit[1]}'] = ${method}()
`
            })
            .join(';')
            .toString()

        const textarea = document.createElement('textarea')
        textarea.textContent = scripts ? `<script>${scripts}</script>` + markup : markup
        document.body.appendChild(textarea)

        setTimeout(() => {
            textarea.select()
            document.execCommand('copy')
            document.body.removeChild(textarea)
        }, 50)

    })
})