Roots Discourse

How to add AlpineJS to Sage

I recently started working with AlpineJs and wanted to integrate it into my sage project. I wasn’t really able to add that through the npm dependency so I enqueued it. It was working perfectly fine until I had to use the template tag in my code.

The HotReloading feature completely broke down.

        switch (left.nodeType) {
            case type.DOCUMENT_NODE:
               return this.compareNode(left.documentElement, right.documentElement);
            case type.ELEMENT_NODE:
               return this._compareAttributes(left.attributes, right.attributes) &&
                     this._compareNodeList(left.childNodes, right.childNodes);
            case type.TEXT_NODE:
               // fallthrough
            case type.CDATA_SECTION_NODE:
               // fallthrough
            case type.COMMENT_NODE:
               if (left.nodeType == type.COMMENT_NODE && !this._options.compareComments)
                  return true;
               vLeft = "" + left.nodeValue;
               vRight = "" + right.nodeValue;
               if (this._options.stripSpaces && left.nodeType !== type.CDATA_SECTION_NODE) {
                  vLeft = vLeft.trim();
                  vRight = vRight.trim();
               r = vLeft === vRight;
               return !r ? this._collector.collectFailure(left, right) : r;
               throw Error("Node type " + left.nodeType + " comparison is not implemented");

I saw this issue with Vue integration and people solving it here

But I don’t know a lot about webpack.

How should I add AlpineJS as a dependency?

run npm i alpinejs on the project directory and then add import 'alpinejs' to the main.js file in your theme.

Once ready run yarn build to compile everything

1 Like