AlpineJS Extension for Nova

Introduction

This extension provides the AlpineJS Autocompletion + Snippets to Nova Editor!

This extension has been inspired by Jason Platts's AMAZING 💯 TailwindCSS Nova extension and Adrian Wilczyński's VSCode AlpineJS extension. In fact I used the dictionary from Adrain's repo, I tidied it up a bit to suit this project, and then made an extension around it utilising the informations from there.

Good luck with your projects & I hope you find the extension helpful! 🚀

Usage

• The Attribute Autocompletion are triggered in the Tags in supported languages.
• The Snippets are triggered only in the HTML body to avoid confusion and name resolution issues.

Prerequisites

• You need to have the syntax highlighting extension of your choice installed for any of the languages below
• The extension works in
• HTML
• Blade
• PHP
• HTML.ERB
• Liquid
• Twig
• Looking for support in any other syntax? please raise an issue on GitHub and I will try to add them as soon as possible.

Requirements

• There are no requirements for the extension apart from having a Nova v3.0+ just plug and play 🚀

Report a Bug or Feature Request

Please use the GitHub Repository for all requests. 😊

To Do: 🥵

1. Adding modifiers support ☑️
2. Getting JS Syntax highlighting working in the attribute (would be a killer feature!, not possible atm due to extension API limitation.) ❌
3. Better Documentations ☑️
4. Allowing user configuration ☑️
5. Bug fix as we go 🐞? ☑️

version 1.1.2

New Syntax Support 🎉

• The extension now works in TWIG files/syntax highlighting ✅

version 1.1.1

• Bug Fix:
• removed the autocompletion in the value scope.

version 1.1.0

Annoying pesky bug 🐞 fix (the colon : bug) and new features addition:

• Bug Fix:
• Issue resulting in removal of (:) from the directives
• Such as (:) in x-on:click (x-onclick ➡️ x-on:click) etc...

• Enhancement:

• More sound directive expansion/snippet depending on the directive

• e.g x-cloak x-ignore expand correctly
• In x-bind: & x-on: the cursor falls in the correct position
• better keyup and keydown insertion position/snippet

• removed the keypress directive (Deprecated Event)

• New Directives:

• x-ignore
• :style
• x-modelable
• x-teleport
• x-id

version 1.0.7

New Directive: Support for Alpine Mask (x-mask & x-mask:dynamic)

version 1.0.6

Snippet Update: Alpine-CDN snippet has been updated to the lates version (3.x.x) ⤴️

version 1.0.5

New Syntax Support 🎉

• The extension now supports Ruby on Rails html.erb files as well as .liquid files ✅

Version 1.0.3

Bug fix: outputting double "@" sign or ":" for directives that start with them such as @click or :class

Version 1.0.2

Bug fix: The bracket autocompletion now only applies to the x-data attribute.

Version 1.0.1

fixed the broken photo link for md file

Version 1.0

Initial release