Spaces:
Build error
Build error
interface FeatureAPI { | |
title: string | |
description: string | |
pattern: string | |
} | |
const getPromptFromFeatures = (feats: FeatureAPI[]) => | |
feats.map(({ title, description, pattern }) => `## "${title}": ${description}.\nExample: \`${pattern}\``).join("\n") | |
export const attributes: FeatureAPI[] = [ | |
{ | |
title: "x-data", | |
description: "Declare a new Alpine component and its data for a block of HTML", | |
pattern: | |
`<div x-data="{ open: false }"> | |
... | |
</div>` | |
}, | |
{ | |
title: "x-bind", | |
description: "Dynamically set HTML attributes on an element", | |
pattern: | |
`<div x-bind:class="! open ? 'hidden' : ''"> | |
... | |
</div>` | |
}, | |
{ | |
title: "x-on", | |
description: "Listen for browser events on an element", | |
pattern: | |
`<button x-on:click="open = ! open"> | |
Toggle | |
</button>` | |
}, | |
{ | |
title: "x-text", | |
description: "Set the text content of an element", | |
pattern: | |
`<div> | |
Copyright © | |
<span x-text="new Date().getFullYear()"></span> | |
</div>` | |
}, | |
{ | |
title: "x-html", | |
description: "Set the inner HTML of an element", | |
pattern: | |
`<div x-html="(await axios.get('/some/html/partial')).data"> | |
... | |
</div>` | |
}, | |
{ | |
title: "x-model", | |
description: "Synchronize a piece of data with an input element", | |
pattern: | |
`<div x-data="{ search: '' }"> | |
<input type="text" x-model="search"> | |
Searching for: <span x-text="search"></span> | |
</div>` | |
}, | |
{ | |
title: "x-show", | |
description: "Toggle the visibility of an element", | |
pattern: | |
`<div x-show="open"> | |
... | |
</div>` | |
}, | |
{ | |
title: "x-transition", | |
description: "Transition an element in and out using CSS transitions", | |
pattern: | |
`<div x-show="open" x-transition> | |
... | |
</div>` | |
}, | |
{ | |
title: "x-for", | |
description: "Repeat a block of HTML based on a data set", | |
pattern: | |
`<template x-for="post in posts"> | |
<h2 x-text="post.title"></h2> | |
</template>` | |
}, | |
{ | |
title: "x-if", | |
description: "Conditionally add/remove a block of HTML from the page entirely", | |
pattern: | |
`<template x-if="open"> | |
<div>...</div> | |
</template>` | |
}, | |
{ | |
title: "x-init", | |
description: "Run code when an element is initialized by Alpine", | |
pattern: | |
`<div x-init="date = new Date()"></div>` | |
}, | |
{ | |
title: "x-effect", | |
description: "Execute a script each time one of its dependencies change", | |
pattern: | |
`<div x-effect="console.log('Count is '+count)"></div>` | |
}, | |
{ | |
title: "x-ref", | |
description: "Reference elements directly by their specified keys using the $refs magic property", | |
pattern: | |
`<input type="text" x-ref="content"> | |
<button x-on:click="navigator.clipboard.writeText($refs.content.value)"> | |
Copy | |
</button>` | |
}, | |
{ | |
title: "x-cloak", | |
description: "Hide a block of HTML until after Alpine is finished initializing its contents", | |
pattern: | |
`<div x-cloak> | |
... | |
</div>` | |
}, | |
{ | |
title: "x-ignore", | |
description: "Prevent a block of HTML from being initialized by Alpine", | |
pattern: | |
`<div x-ignore> | |
... | |
</div>` | |
}, | |
] | |
export const attributesPrompt = getPromptFromFeatures(attributes) | |
export const properties: FeatureAPI[] = [ | |
{ | |
title: "$store", | |
description: "Access a global store registered using Alpine.store(...)", | |
pattern: `<h1 x-text="$store.site.title"></h1>` | |
}, | |
{ | |
title: "$el", | |
description: "Reference the current DOM element", | |
pattern:`<div x-init="new Pikaday($el)"></div>` | |
}, | |
{ | |
title: "$dispatch", | |
description: "Dispatch a custom browser event from the current element", | |
pattern: | |
`<div x-on:notify="..."> | |
<button x-on:click="$dispatch('notify')">...</button> | |
</div>` | |
}, | |
{ | |
title: "$watch", | |
description: "Watch a piece of data and run the provided callback anytime it changes", | |
pattern: | |
`<div x-init="$watch('count', value => { | |
console.log('count is ' + value) | |
})">...</div>` | |
}, | |
{ | |
title: "$refs", | |
description: "Reference an element by key (specified using x-ref)", | |
pattern: | |
`<div x-init="$refs.button.remove()"> | |
<button x-ref="button">Remove Me</button> | |
</div>` | |
}, | |
{ | |
title: "$nextTick", | |
description: "Wait until the next \"tick\" (browser paint) to run a bit of code", | |
pattern: | |
`<div | |
x-text="count" | |
x-text="$nextTick(() => {" | |
console.log('count is ' + $el.textContent) | |
}) | |
>...</div>` | |
}, | |
] | |
export const propertiesPrompt = getPromptFromFeatures(properties) | |
export const methods: FeatureAPI[] = [ | |
{ | |
title: "Alpine.data", | |
description: "Reuse a data object and reference it using x-data", | |
pattern: | |
`<div x-data="dropdown"> | |
... | |
</div>` | |
}, | |
{ | |
title: "Alpine.store", | |
description: "Declare a piece of global, reactive, data that can be accessed from anywhere using $store", | |
pattern: | |
`<button @click="$store.notifications.notify('...')"> | |
Notify | |
</button> | |
... | |
Alpine.store('notifications', { | |
items: [], | |
notify(message) { | |
this.items.push(message) | |
} | |
})` | |
}, | |
] | |
export const methodsPrompt = getPromptFromFeatures(methods) | |
export const alpine = "# Alpine.js docs\n"+ attributesPrompt // + propertiesPrompt + methodsPrompt |