jbilcke-hf/template-node-wizardcoder-express

1 2interface FeatureAPI {3  title: string4  description: string5  pattern: string6}7 8const getPromptFromFeatures = (feats: FeatureAPI[]) =>9  feats.map(({ title, description, pattern }) => `## "${title}": ${description}.\nExample: \`${pattern}\``).join("\n")10 11 12export const attributes: FeatureAPI[] = [13  {14    title: "x-data",15    description: "Declare a new Alpine component and its data for a block of HTML",16    pattern:17`<div x-data="{ open: false }">18...19</div>`20  },21  {22    title: "x-bind",23    description: "Dynamically set HTML attributes on an element",24    pattern:25`<div x-bind:class="! open ? 'hidden' : ''">26...27</div>`28  },29  {30    title: "x-on",31    description: "Listen for browser events on an element",32    pattern:33`<button x-on:click="open = ! open">34Toggle35</button>`36  },37  {38    title: "x-text",39    description: "Set the text content of an element",40    pattern:41`<div>42Copyright ©43 44<span x-text="new Date().getFullYear()"></span>45</div>`46  },47  {48    title: "x-html",49    description: "Set the inner HTML of an element",50    pattern:51`<div x-html="(await axios.get('/some/html/partial')).data">52...53</div>`54  },55  {56    title: "x-model",57    description: "Synchronize a piece of data with an input element",58    pattern:59`<div x-data="{ search: '' }">60<input type="text" x-model="search">61 62Searching for: <span x-text="search"></span>63</div>`64  },65  {66    title: "x-show",67    description: "Toggle the visibility of an element",68    pattern:69`<div x-show="open">70...71</div>`72  },73  {74    title: "x-transition",75    description: "Transition an element in and out using CSS transitions",76    pattern:77`<div x-show="open" x-transition>78...79</div>`80  },81  {82    title: "x-for",83    description: "Repeat a block of HTML based on a data set",84    pattern:85`<template x-for="post in posts">86<h2 x-text="post.title"></h2>87</template>`88  },89  {90    title: "x-if",91    description: "Conditionally add/remove a block of HTML from the page entirely",92    pattern:93`<template x-if="open">94<div>...</div>95</template>`96  },97  {98    title: "x-init",99    description: "Run code when an element is initialized by Alpine",100    pattern:101`<div x-init="date = new Date()"></div>`102  },103  {104    title: "x-effect",105    description: "Execute a script each time one of its dependencies change",106    pattern:107`<div x-effect="console.log('Count is '+count)"></div>`108  },109  {110    title: "x-ref",111    description: "Reference elements directly by their specified keys using the $refs magic property",112    pattern:113`<input type="text" x-ref="content">114 115<button x-on:click="navigator.clipboard.writeText($refs.content.value)">116  Copy117</button>`118  },119  {120    title: "x-cloak",121    description: "Hide a block of HTML until after Alpine is finished initializing its contents",122    pattern:123`<div x-cloak>124...125</div>`126  },127  {128    title: "x-ignore",129    description: "Prevent a block of HTML from being initialized by Alpine",130    pattern:131`<div x-ignore>132...133</div>`134  },135]136 137export const attributesPrompt = getPromptFromFeatures(attributes)138 139export const properties: FeatureAPI[] = [140  {141    title: "$store",142    description: "Access a global store registered using Alpine.store(...)",143    pattern: `<h1 x-text="$store.site.title"></h1>`144  },145  {146    title: "$el",147    description: "Reference the current DOM element",148    pattern:`<div x-init="new Pikaday($el)"></div>`149  },150  {151    title: "$dispatch",152    description: "Dispatch a custom browser event from the current element",153    pattern:154`<div x-on:notify="...">155  <button x-on:click="$dispatch('notify')">...</button>156</div>`157  },158  {159    title: "$watch",160    description: "Watch a piece of data and run the provided callback anytime it changes",161    pattern:162`<div x-init="$watch('count', value => {163  console.log('count is ' + value)164})">...</div>`165  },166  {167    title: "$refs",168    description: "Reference an element by key (specified using x-ref)",169    pattern:170`<div x-init="$refs.button.remove()">171<button x-ref="button">Remove Me</button>172</div>`173  },174  {175    title: "$nextTick",176    description: "Wait until the next \"tick\" (browser paint) to run a bit of code",177    pattern:178`<div179x-text="count"180x-text="$nextTick(() => {"181  console.log('count is ' + $el.textContent)182})183>...</div>`184  },185]186 187export const propertiesPrompt = getPromptFromFeatures(properties)188 189export const methods: FeatureAPI[] = [190  {191    title: "Alpine.data",192    description: "Reuse a data object and reference it using x-data",193    pattern:194`<div x-data="dropdown">195...196</div>`197  },198  {199    title: "Alpine.store",200    description: "Declare a piece of global, reactive, data that can be accessed from anywhere using $store",201    pattern:202`<button @click="$store.notifications.notify('...')">203Notify204</button>205 206...207 208Alpine.store('notifications', {209items: [],210 211notify(message) { 212  this.items.push(message)213}214})`215  },216]217 218export const methodsPrompt = getPromptFromFeatures(methods)219 220export const alpine = "# Alpine.js docs\n"+ attributesPrompt // + propertiesPrompt + methodsPrompt