oleg
/
alpine
mirror of https://github.com/alpinejs/alpine.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
							<html>
    <!-- Using a <blockquote> because it's an obscure tag -->
    <!-- which allows us to use document.querySelector()  -->
    <!-- with generic tags freely inside Cypress tests.   -->
    <blockquote id="root">
        <!-- This is where our test subjects will be injected. -->
    </blockquote>

    <script src="/../../packages/history/dist/cdn.js"></script>
    <script src="/../../packages/morph/dist/cdn.js"></script>
    <script src="/../../packages/persist/dist/cdn.js"></script>
    <script src="/../../packages/trap/dist/cdn.js"></script>
    <script src="/../../packages/intersect/dist/cdn.js"></script>
    <script>
        let root = document.querySelector('#root')

        // We aren't loading Alpine directly because we are expecting
        // Cypress to inject HTML into "#root", THEN we'll call
        // this function from Cypress to boot everything up.
        root.evalScripts = (extraJavaScript) => {
            // Load bespoke JavaScript.
            if (extraJavaScript) {
                let script = document.createElement('script')
                script.src = `data:text/javascript;base64,${btoa(`
                    document.addEventListener('alpine:init', () => {
                        ${extraJavaScript}
                    })
                `)}`
                root.after(script)
            }

            // Load all injected script tags.
            root.querySelectorAll('script').forEach(el => {
                eval(el.innerHTML)
            })

            // Load Alpine.
            let script = document.createElement('script')

            script.src = '/../../packages/alpinejs/dist/cdn.js'

            root.after(script)

            document.addEventListener('alpine:initialized', () => {
                let readyEl = document.createElement('blockquote')
                readyEl.setAttribute('alpine-is-ready', true)
                readyEl.style.width = '1px'
                readyEl.style.height = '1px'

                document.querySelector('blockquote').after(readyEl)
            })
        }
    </script>
</html>