jbilcke-hf's picture
jbilcke-hf HF staff
adding some libs to make things prettier
610725e
raw
history blame
5.01 kB
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