alpine-turbo-drive-adapter
Version:
Bridge library to enable full support for Alpine components in pages using Turbolinks/Turbo Drive
110 lines (92 loc) • 3.95 kB
HTML
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@hotwired/turbo/dist/turbo.es2017-umd.min.js"></script>
<script src="/dist/alpine-turbo-drive-adapter.js" defer></script>
<script src="https://unpkg.com/alpinejs" defer></script>
</head>
<body>
<h1>First Page</h1>
<a href="/examples/navigated-away">Second Page</a>
<script>
function componentAdder() {
return {
counter: 0,
add: function (base) {
var div = document.createElement("div");
this.counter++;
var name = `${base} ${this.counter}`
div.innerHTML = `<div x-data="{ open: true }">
<template x-if="open">
<span>${name}</span>
</template>
</div>`;
this.$el.appendChild(div);
},
}
}
</script>
<h2>8.4 The components added when pushing the button should be preserved when navigating away and back</h2>
<div x-data="componentAdder()" id="t8_4" data-turbo-permanent>
<button @click="add('First')"
style="width: 50px; height:30px; background-color: lightgrey; margin-bottom: 20px;">Add
1</button>
<div x-data="componentAdder()" id="t8_4_2">
<button @click="add('Second')"
style="width: 50px; height:30px; background-color: lightblue; margin-bottom: 20px;">Add 2</button>
</div>
</div>
<h2>1.1 This component should be preserved and be working in the Second page</h2>
<div x-data="{ foo: 'bar' }" id="t1_1" data-turbo-permanent>
<input x-model="foo"></input>
<button x-on:click="foo = 'baz'"></button>
</div>
<h2>2.0 This item should not add a duplicate span item when navigating away and back to this page</h2>
<div x-data="{ foo: 'bar', open: true }">
<template x-if="open">
<span x-text="foo"></span>
</template>
</div>
<h2>3.0 This item should not add duplicate span items when navigating away and back to this page</h2>
<div x-data="{ foo: ['bar', 'baz'] }">
<template x-for="item3 in foo">
<span x-text="item3"></span>
</template>
</div>
<h2>4.0 This component should be preserved and not be logging any errors when navigating to the Second page</h2>
<div x-data="{ foo: ['bar', 'baz'] }" id="t4_0" data-turbo-permanent>
<template x-for="item4 in foo">
<span x-text="item4"></span>
</template>
</div>
<h2>4.2 This component should be preserved and not be logging any errors when navigating to the Second page</h2>
<div x-data="{ foo: ['bar', 'baz'] }" id="t4_2" data-turbo-permanent>
<template x-for="item42 in foo">
<span x-text="item42"></span>
</template>
</div>
<h2>5.0 This item should not add duplicate span items nor errors when navigating away and back to this page</h2>
<div x-data="{ foo: 'bar' }" id="t5_0" data-turbo-permanent>
<div x-data="{ bob: ['bar', 'baz'] }">
<template x-for="item5 in bob">
<span x-text="item5"></span>
</template>
</div>
</div>
<h2>6.3 This item should be preserved when navigating away and back</h2>
<div x-data="{ foo: 'bar' }" id="t6_3" data-turbo-permanent>
<div x-data="{ open: true }">
<template x-if="open">
<span>Item</span>
</template>
</div>
</div>
<h2>7.0 This item should be preserved when navigating away and back</h2>
<div x-data="{ foo: 'bar' }" id="t7_0" data-turbo-permanent>
<div x-data="{ open: true }">
<template x-if="open">
<span>Item</span>
</template>
</div>
</div>
</body>
</html>