index.html

<html>
    <style>.bottom-100 { bottom: 100%; }</style>

    <script src="/packages/intersect/dist/cdn.js" defer></script>
    <script src="/packages/morph/dist/cdn.js" defer></script>
    <script src="/packages/history/dist/cdn.js"></script>
    <script src="/packages/persist/dist/cdn.js"></script>
    <script src="/packages/trap/dist/cdn.js"></script>
    <script src="/packages/alpinejs/dist/cdn.js" defer></script>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

    <script src="https://unpkg.com/jsdon@0.1.14/min.js"></script>


    <!-- <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script> -->


    <!-- A -->
    <!-- <div x-data="{ step: 1 }" x-history="step">
        <button x-text="step" @click="step++"></button>
    </div> -->

    <div x-data="{ count: 0 }">
       <button @click="count++">increment</button>

       <span x-text="count"></span>
    </div>

    <!-- <div x-data="{ count: 0, open: true }">
        <span x-text="count" :class="open && 'foo'"></span>

        <div x-intersect="count++" style="margin-top: 100vh;">hi</div>
    </div> -->

    <!-- <div x-data="test">
        <button x-text="foo.step" @click="foo.step++"></button>
    </div>

    <div x-data="{ foo: 'bar' }"></div> -->

    <!-- Now let's say you want the URL bar to say ?foo=bar -->
    <!-- (and change when "foo" changes, etc...): -->


    <script>
        let old = Element.prototype.setAttribute

        Element.prototype.setAttribute = function (name, value) {
            if (! name.includes('@')) {
                old.bind(this)(name, value)
            } else {
                let el = document.createRange().createContextualFragment(
                    `<div ${name}="${value}"></div>`
                ).firstElementChild

                let attr = el.getAttributeNode(name)

                el.removeAttributeNode(attr)

                this.setAttributeNode(attr)

                delete el
            }
        }

        // benchmark(5000, {
        //     first: () => {
        //         let div = document.createElement('div')

        //         div.setAttribute('foo', 'bar')
        //     },
        //     second: () => {
        //         let div = document.createElement('div')

        //         div.setAttribute('@foo', 'bar')
        //     },
        // })


        function benchmark(times, callbacks) {
            if (typeof callbacks === 'function') {
                callbacks = { function: callbacks }
            }

            let result = {}

            Object.entries(callbacks).forEach(([key, value]) => {
                let thing = {}

                let start = performance.now()
                for (let index = 0; index < times; index++) {
                    value()
                }
                let end = performance.now() - start

                result[key] = {
                    time: end,
                }
            })

            console.table(result)
        }
    </script>


<article>
    <nav>
        <h1></h1>
        <h2></h2>
    </nav>
    <main>
        <h3></h3>
        <h4></h4>
    </main>
</article>

<!-- Initialization Strategies: -->
<!-- Crawl Everything -->
    <!-- Is there a way to render partials of page -->
<!-- Find Roots And Crawl Them -->

<script>
//     let cally = (el, skip ) => { if (el.tagName === 'NAV') { skip() }; let attrs = el.attributes }
//     // benchmark(250, {
//     //     recursive() {
//     //         walk(document.querySelector('article'), cally)
//     //     },
//     //     tree() {
//     //         treeWalk(document.querySelector('article'), cally)
//     //     },
//     // })
// // walk3(document.querySelector('article'), el => console.log(el))
//     walk3(document.querySelector('article'), (el, next) => {
//         console.log(el);
//         requestAnimationFrame(() => {
//             console.log("nextFrame");
//             next()
//         })
//     }).then(() => {
//         console.log('finished');
//     })

//  function walk3(el, callback) {
//     callback(el, () => {
//         let node = el.firstElementChild

//         node && walk3(node, (el, next) => {
//             callback(el, next)
//         })

//         // while (node) {
//         //     walk3(node, callback)

//         //     node = node.nextElementSibling
//         // }
//     })
// }

//     function walker2(el, callback) {
//         callback(el, () => {
//             let node = el.firstElementChild

//             while (node) {
//                 walker2(node, callback)

//                 let children = node.children

//                 for (let index = 0; index < children.length; index++) {
//                     const element = children[index];


//                     walker2(element, callback)
//                 }

//                 node = node.firstElementChild
//             }
//         })
//     }

//     function walker(el, callback, after) {
//         return new Promise(resolve => {
//             callback(el, () => {
//                 let promises = []

//                 let node = el.firstElementChild

//                 while (node) {
//                     promises.push(walker(node, callback, () => {}))

//                     node = node.nextElementSibling
//                 }

//                 Promise.all(promises).then(() => {
//                     resolve()
//                 })
//             })

//         })
//     }

//     function walk(el, callback) {
//             // if (el instanceof ShadowRoot) {
//             //     Array.from(el.children).forEach(el => walk(el, callback))

//             //     return
//             // }

//             let skip = false

//             callback(el, () => skip = true)

//             if (skip) return

//             let node = el.firstElementChild

//             while (node) {
//                 walk(node, callback, false)

//                 node = node.nextElementSibling
//             }
//         }

//     function treeWalk(el, callback) {
//         var treeWalker = document.createTreeWalker(
//             el,
//             NodeFilter.SHOW_ELEMENT,
//             {acceptNode(node) {
//                 let skip

//                 callback(node, () => skip = true)

//                 if (skip) return NodeFilter.FILTER_REJECT

//                 return NodeFilter.FILTER_ACCEPT
//             }}
//         );

//         while(treeWalker.nextNode() !== null) {}
//     }
</script>
    <!-- <div x-data="{ word: $uppercase('hey') }">
        <button x-text="word"></button>

        <input type="text" x-model="word">
    </div> -->

    <!-- <div x-data="{ items: $fetch(url, []).loading() }">
        <button @click="count++" x-text="count"></button>
    </div> -->


    <script>
        document.addEventListener('alpine:initializing', () => {
            Alpine.magic('uppercase', () => Alpine.interceptor((key, path) => {
                console.log(key, path);

                return {
                    init(value, setter) {
                        setter(value.toUpperCase())
                    },
                    set(value, setter) {
                        setter(value.toUpperCase())
                    }
                }
            }))
        })
    </script>


    <!-- <div x-data="{ foo: 'bar' }" x-query-string="foo"></div> -->

    <!-- Or maybe you want to persist the value of "foo" to -->
    <!-- localStorage so it persists between page refreshes:-->

    <!-- <div x-data="{ foo: $queryString('bar') }"></div> -->

    <script>
        document.addEventListener('alpine:initializing', () => {
            Alpine.data('test', function () {
                return {
                    foo: { step: this.$persist(1) }
                }
            })
        })
    </script>

    <!-- B -->
    <!-- <div x-data="{ step: $history(1) }">...</div> -->

    <!-- <div x-data="{ foo: 'bar' }">
        <button @click="foo = 'baz'">Change Foo</button>
        <span x-text="foo"></span>
    </div>

    <button onclick="morph()">morph</button>

    <script>
        let div = document.querySelector('div')
        let html = div.outerHTML

        function morph() {
            morphit(div, html)
        }
    </script> -->

    <!-- Use Cases: -->
    <!-- Animating in -->
        <!-- only animate once -->
        <!-- only animate from one direction -->
    <!-- Popper type functionality -->
    <!-- Animating based on position in viewport -->
    <!-- Infinite Scroll -->
    <!-- Lazzy loading -->
    <!-- Show some dirty modal to sign up if the person read the whole blog post -->

    <!-- When any portion of an element comes into the viewport -->
    <!-- <div x-intersect=""></div>
    <div x-intersect.once=""></div> -->

    <!-- <script src="https://unpkg.com/wicg-inert@3.1.1/dist/inert.min.js" defer></script> -->

    <!-- <div class="h-64"></div>
    <div class="h-64"></div>
    <div class="h-64" x-data x-effect="console.log($bound($el))">yoyoyo</div> -->
    <!-- <div x-data @scroll.window="$el.style['margin-left'] = $el.getBoundingClientRect().top + 'px'">hey</div> -->
    <!-- <div x-data :style="{ transform: 'translateX('+$bound($el).top+'px)' }" style="transition: all 1s">hey</div>
    <div class="h-64"></div>
    <div class="h-64"></div> -->


    <script>
        function $bound(el) {
            let data = Alpine.reactive({
                top: el.getBoundingClientRect().top,
            })

            window.addEventListener('scroll', () => {
                data.top = el.getBoundingClientRect().top
            }, { passive: true })

            return data
        }
    </script>


    <!-- <div x-data="{ count: 1 }">
        <button @click="count++">inc</button>

        <span x-text></span>
    </div>

    <div x-data="{ county: 1 }" x-history="county">
        <button @click="county++">inc</button>

        <span x-text="county"></span>
    </div> -->

    <!-- <div x-data="{ search: '', html: '' }" x-history="search" x-effect="html = '<h1>'+search+'</h1>'">
        <input type="text" x-model="search">

        <div x-morph="html"></div>
    </div> -->

    <!-- <div x-data="{ foo: 'bar' }">
        <button @click="$el.remove()" x-destroy="foo = 'baz'">Remove Me</button>

        <span x-text="foo"></span>
    </div> -->

    <!-- <div x-data="{ foo: 1 }" x-history="foo">
        <button @click="foo++">inc</button>

        foo: <span x-text="foo"></span>
    </div>

    <div x-data="{ bar: 1 }" x-history="bar">
        <button @click="bar++">inc</button>

        bar: <span x-text="bar"></span>

        <template x-if="bar > 1">
            <div x-data="{ baz: 1 }" x-history="baz">
                <button @click="baz++">inc</button>

                baz: <span x-text="baz"></span>
            </div>
        </template>
    </div> -->

    <script>
        window.historyStateManager = {
            replaceState(url, response, component) {
                this.updateState('replaceState', url, response, component)
            },

            pushState(url, response, component) {
                this.updateState('pushState', url, response, component)
            },

            updateState(method, url, response, component) {
                let state = this.currentState()

                state.storeResponse(response, component)

                let stateArray = state.toStateArray()

                // Copy over existing history state if it's an object, so we don't overwrite it.
                let fullstateObject = Object.assign(history.state || {}, { livewire: stateArray })

                let capitalize = subject => subject.charAt(0).toUpperCase() + subject.slice(1)

                store.callHook('before'+capitalize(method), fullstateObject, url, component)

                try {
                    history[method](fullstateObject, '', url)
                } catch (error) {
                    // Firefox has a 160kb limit to history state entries.
                    // If that limit is reached, we'll instead put it in
                    // sessionStorage and store a reference to it.
                    if (error.name === 'NS_ERROR_ILLEGAL_VALUE') {
                        let key = this.storeInSession(stateArray)

                        fullstateObject.livewire = key

                        history[method](fullstateObject, '', url)
                    }
                }
            },

            replayResponses(event, callback) {
                if (! event.state.livewire) return

                let state = typeof event.state.livewire === 'string'
                    ? new LivewireState(this.getFromSession(event.state.livewire))
                    : new LivewireState(event.state.livewire)

                state.replayResponses(callback)
            },

            currentState() {
                if (! history.state) return new LivewireState
                if (! history.state.livewire) return new LivewireState

                let state = typeof history.state.livewire === 'string'
                    ? new LivewireState(this.getFromSession(history.state.livewire))
                    : new LivewireState(history.state.livewire)

                return state
            },

            missingState(event) {
                return ! (event.state && event.state.livewire)
            },

            clearState() {
                // This is to prevent exponentially increasing the size of our state on page refresh.
                if (window.history.state) window.history.state.livewire = (new LivewireState).toStateArray();
            },

            storeInSession(value) {
                let key = 'livewire:'+(new Date).getTime()

                let stringifiedValue = JSON.stringify(value)

                this.tryToStoreInSession(key, stringifiedValue)

                return key
            },

            tryToStoreInSession(key, value) {
                // sessionStorage has a max storage limit (usally 5MB).
                // If we meet that limit, we'll start removing entries
                // (oldest first), until there's enough space to store
                // the new one.
                try {
                    sessionStorage.setItem(key, value)
                } catch (error) {
                    // 22 is Chrome, 1-14 is other browsers.
                    if (! [22, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14].includes(error.code)) return

                    let oldestTimestamp = Object.keys(sessionStorage)
                        .map(key => Number(key.replace('livewire:', '')))
                        .sort()
                        .shift()

                    if (! oldestTimestamp) return

                    sessionStorage.removeItem('livewire:'+oldestTimestamp)

                    this.tryToStoreInSession(key, value)
                }
            },

            getFromSession(key) {
                let item = sessionStorage.getItem(key)

                if (! item) return

                return JSON.parse(item)
            },
        }


    </script>


    <div class="h-64"></div>

    <!-- <h1 x-data x-intersect="console.log('yoyo')">yoyo</h1> --> -->

    <script>
        window.eventStack = []

        let playing = false;

        ['click', 'mouseenter', 'mouseleave', 'scroll'].forEach(key => {
            window.addEventListener(key, event => {
                if (playing) return

                window.eventStack.push(event)
            });
        });

        function play() {
            playing = true

            let recurse = (stack, end) => setTimeout(() => {
                if (stack.length === 0) return end()

                let event = stack.pop()

                event.target.dispatchEvent(event)

                recurse(stack, end)
            }, 5)

            recurse(window.eventStack, () => playing = false)
        }
    </script>

    <!-- <br>
    <br>
    <br>

    <div x-data="{ search: '' }" x-effect="console.log(search)">
        <input x-model="search" placeholder="Search...">
    </div>

    <script>
        document.addEventListener('alpine:initializing', () => {
            Alpine.component('component', () => ({
                init() {
                    window.addEventListener('click', () => {
                        this.foo = 'baz'
                    })
                },

                foo: 'bar'
            }))
        })
    </script>

    <div x-data="component">
        <span x-text="foo"></span>

        <button>click me</button>
    </div>

    <div x-data="{ show: false }">
        <button @click="show = true">Show</button>

        <h1 x-show="show" @click.away="show = false">h1</h1>

        <h2>h2</h2>
    </div>

    <div x-data x-init="$refs.blab.textContent = 'bar'">
        <div x-data>
            <span @click="$refs"></span>
            <span @click="$refs.blab"></span>

            <span x-ref="blab">foo</span>
        </div>

        <span x-ref="blab">foo</span>
    </div> -->

    <!-- <div x-data="{ show: false }">
        <button @click="show = true">Show</button>

        <h1 x-show="show" @click.away="show = false">h1</h1>

        <h2>h2</h2>
    </div> -->

    <div class="h-64"></div>

    <!-- <div x-data="dropdown" x-init="load()" x-on:keydown.window.escape="open = false"
        x-on:click.away="open = false" class="relative inline-block text-left z-0">
        <div>
            <span class="rounded-md shadow-sm">
                <button x-ref="button" x-on:click="toggle()" type="button"
                    class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
                    id="options-menu" aria-haspopup="true" x-bind:aria-expanded="open" aria-expanded="true">


                    Actions

                    <svg class="h-5 w-5" x-description="Heroicon name: chevron-down" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                            clip-rule="evenodd"></path>
                    </svg>
                </button>
            </span>
        </div>


        <div x-ref="dropdown" x-show="open" style="display: none;"

            // Popper dropdowns
            // Enter on scroll animations (leave on scroll away)

            x-intersect:out.bottom="$entry up = true"
            x-intersect:out.top="up = false"

            x-intersect:leave:bottom-edge="up = true"
            x-intersect:leave:top-edge="up = false"

            x-intersect="doSomething"

            x-intersect:enter="console.log('in'); up = true;"
            x-intersect:leave="console.log('out'); up = false;"
            x-description="Dropdown panel, show/hide based on dropdown state."
            x-transition:enter="transition ease-out duration-100"
            x-transition:enter-start="transform opacity-0 scale-95"
            x-transition:enter-end="transform opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-75"
            x-transition:leave-start="transform opacity-100 scale-100"
            x-transition:leave-end="transform opacity-0 scale-95"
            class="origin-top-right absolute block  w-56 rounded-md shadow-lg border border-gray-300"
            x-bind:class="{'bottom-100 mb-2' : !up, 'mt-2' : up}" x-on:toggle-direction.document="up = !up">
            <div class="rounded-md bg-white shadow-xs">
                <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
                    <a href="#" x-on:click.prevent="$dispatch('toggle-modal-quote-copy-search'); open = false"
                        class="px-4 py-2 flex items-center space-x-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
                        role="menuitem">
                        Copy Items
                    </a>
                    <a href="#" x-on:click.prevent="$dispatch('toggle-modal-add-existing-drawing-to-quote'); open = false"
                        class="px-4 py-2 flex items-center space-x-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
                        role="menuitem">
                        Add Existing Item
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="h-64"></div>

    <script>
        document.addEventListener('alpine:initializing', () => {
            Alpine.component('dropdown', () => ({
                open: false,
                up: true,
                dropdownEl: null,
                load() {

                    // let el = document.querySelector('[x-ref="dropdown"]')

                    // var observer = new IntersectionObserver((entries) => {

                    //     if (entries[0].boundingClientRect.bottom > entries[0].intersectionRect.bottom && this.up) {

                    //             this.up = false;

                    //     } else if (entries[0].boundingClientRect.top < entries[0].intersectionRect.top && !this.up) {

                    //             this.up = true;
                    //     }

                    // }, { threshold: [0, 1] }

                    // );

                    // observer.observe(el);
                },

                toggle() {
                    this.open = !this.open;
                }
            }))
        })

    </script> -->
</html>

<!--
    Solutions:
    - No batching
    - Batch effects
-->


    <!--
        // Light-dom story:
        // add "x-element" to all custom elements
        // walk through and initialize
        // when you hit x-element, process element bindings
        // on the side:
        // initialize template element with props
        // get bindings on slot
        // attach bindings as scope on x-scope to element
        // continue rendering tree
        // when all is over, replace x-element with real elements
        // attach scope to slotted element roots
        // replace slots with slotted elements

        // Shadow-dom story:
        // Should be same except handling of slot replacement and element replacement
        // Just attach shadow instead

        // Stand-alone story
        // Upgrade elements, but don't wait for Alpine to hit "x-element" directive.
        // Just initialize element tree -->


        <!--


            <div x-data="{ foo: 'baz' }">
                <the-outer class="bg-gray-100" :foo="foo + '-nested'">
                    <div>
                        <span x-text="foo"></span>
                    </div>
                </the-outer>
            </div>

            <template x-element="the-outer" x-props="{ foo: 'fiiii' }">
                <div class="border-b-8" x-data="{ hey: 'there' }" x-provide="hey">
                    <h1 x-text="foo"></h1>

                    <the-inner :foo="foo + '-nested-deep'">
                        <span x-text="foo"></span>
                    </the-inner>

                    <slot></slot>
                </div>
            </template>

            <template x-element="the-inner" x-props="{ foo: '' }" x-inject="hey">
                <div class="border-b-8">
                    <h1 x-text="hey"></h1>

                    <slot></slot>
                </div>
            </template> -->

            <!--
                Problems:
                - Shadow DOM styling
                - Root element?
                - Attribute/event forwarding
                - Attribute/event attaching to root from component
                - x-scope?
                - Spruce? $store?
            -->

            <!--
                Homework:
                - inject styles cost
                - compare to x-spread
            -->

            <!-- <body class="bg-gray-100 text-gray-900 font-sans antialiased">
                <div class="flex items-center justify-center p-12" x-data="{ checked: false }">
                    <div class="w-full max-w-xs mx-auto">

                        <div x-spread="window.headlessUI.switchGroup">
                            <label x-spread="window.headlessUI.switchLabel">Thing Here</label>

                            <button x-spread="window.headlessUI.switchButton">
                                <span :class="checked && 'bg-blue-500'">Hey Hey</span>
                            </button>
                        </div>

                        <switch-group class="flex items-center space-x-4">
                            <switch-label>Enable notifications</switch-label>

                            <the-switch x-model="checked" x-scope="{ props }">
                                <button
                                x-spread="{ props }"
                                class="relative inline-flex flex-shrink-0 h-6 transition-colors duration-200 ease-in-out border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:ring"
                                :class="checked ? 'bg-indigo-600' : 'bg-gray-200'"
                                >
                                <span
                                class="inline-block w-5 h-5 transition duration-200 ease-in-out transform bg-white rounded-full"
                                :class="{ 'translate-x-5': checked, 'translate-x-0': ! checked }"
                                ></span>
                            </button>
                        </the-switch>
                    </switch-group>

                </div>
            </div>

            <template x-element="switch-group">
                <slot :foo="'bar'" x-data="{ api: { labelEl: null, switchEl: null} }" x-provide="api"></slot>
            </template>

            <template x-element="switch-label" x-inject="api">
                <label
                x-data="{ id: Math.random().toString(36).substring(7) }"
                x-init="api.labelEl = $el"
                :id="'headlessui-switch-label-' + id"
                @pointerup="api.switchEl.click() && api.switchEl.focus({ preventScroll: true })"
                >
                <slot></slot>
            </label>
        </template>

        <template x-element="the-switch" x-props="{ value: false }" x-inject="api" x-as="label">
            <slot
            x-init="if(api) api.switchEl = $el"
            @click.prevent="$dispatch('input', ! value)"
            @keyup.space.prevent="$dispatch('input', ! value)"
            @keypress.prevent
            role="switch"
            tabindex="0"
            :aria-checked="!! value"
            :aria-labelledby="api && api.labelEl.id"
            ></slot>
        </template>
    </body> -->
    </html>

    <!-- Todo: work with "value" props and models -->

    <!--
        Alpine Portage || x-element?

        Alpine Evolve || x-morph?

        Alpine Evolve

        Alpine Erode

        Alpenglow

        Glacier

        Groves

        Guide

        Alpa

        Altitude

        Slide

        Biome

        Lake

        Lodge

        Tundra

        Yak

        Yodle

        Cairn

        Soar

        Frost -->


        <!-- <div class="space-x-4">
            <slot>
                <span>first</span>
                <span>second</span>
            </slot>
            <slot>
                <span>first</span>
                <span>second</span>
            </slot>
            <span>third</span>
            <slot>
                <span>fourth</span>
            </slot>
        </div> -->

        <!-- <div class="space-x-4">
            <div style="display: contents" invisible>
                <span>first</span>
                <span>second</span>
            </div>
            <div style="display: contents" invisible>
                <span>first</span>
                <span>second</span>
            </div>
            <span>third</span>
            <div style="display: contents" invisible>
                <span>fourth</span>
            </div>
        </div> -->


        <!-- <style>
            .space-x-4>slot>:not([hidden])~:not([hidden]),
            .space-x-4>[invisible]>:not([hidden])~:not([hidden]),
            .space-x-4>:not([hidden])~slot>:not([hidden]),
            .space-x-4>:not([hidden])~[invisible]>:not([hidden]),

            .space-x-4>:not([hidden])~:not([hidden]) {
                background: blue;
                --tw-space-x-reverse: 0;
                margin-right: calc(1rem * var(--tw-space-x-reverse));
                margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
            }
        </style> -->