alpine.mts

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