alpinejs

app/javascript/application.js

@@ -5,6 +5,13 @@ import "controllers"
 import "@hotwired/turbo-rails"
 Turbo.setProgressBarDelay(300)
 
+// AlpineJs
+import Alpine from 'alpinejs'
+import 'alpine-turbo-drive-adapter'
+import 'alpine-clipboard'
+window.Alpine = Alpine
+Alpine.start()
+
 // Toastify
 import Toastify from 'toastify-js'
 window.Toastify = Toastify

app/views/layouts/_navbar.html.erb

@@ -3,4 +3,5 @@
   <%= Rails.configuration.application_title %>
   <span class='title'>this is a text</span>
   <span>this is toto</span>
+  <h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>
 </nav>

config/importmap.rb

@@ -6,9 +6,14 @@ pin_all_from 'app/javascript/controllers', under: 'controllers'
 pin '@hotwired/turbo-rails', to: 'turbo.min.js', preload: true
 pin '@hotwired/stimulus', to: 'stimulus.min.js'
 pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js'
+
 pin 'toastify-js' # @1.12.0
+
 pin '@fortawesome/fontawesome-svg-core', to: '@fortawesome--fontawesome-svg-core.js' # @6.5.2
 pin '@fortawesome/free-brands-svg-icons', to: '@fortawesome--free-brands-svg-icons.js' # @6.5.2
 pin '@fortawesome/free-regular-svg-icons', to: '@fortawesome--free-regular-svg-icons.js' # @6.5.2
 pin '@fortawesome/free-solid-svg-icons', to: '@fortawesome--free-solid-svg-icons.js' # @6.5.2
-pin "@fortawesome/fontawesome-free", to: "@fortawesome--fontawesome-free.js" # @6.5.2
+pin '@fortawesome/fontawesome-free', to: '@fortawesome--fontawesome-free.js' # @6.5.2
+pin 'alpinejs' # @3.14.1
+pin 'alpine-clipboard'
+pin 'alpine-turbo-drive-adapter' # @2.1.0

vendor/javascript/alpine-clipboard.js

@@ -0,0 +1,2 @@
+var e={};const t={start(){if(!window.Alpine)throw new Error("Alpine is required for `alpine-clipboard` to work.");Alpine.addMagicProperty("clipboard",()=>function(e){let t=e;if("string"!=typeof t)try{t=JSON.stringify(t)}catch(e){console.warn(e)}const n=document.createElement("textarea");if(n.value=t,n.setAttribute("readonly",""),n.style.cssText="position:fixed;pointer-events:none;z-index:-9999;opacity:0;",document.body.appendChild(n),navigator.userAgent&&navigator.userAgent.match(/ipad|ipod|iphone/i)){n.contentEditable=!0,n.readOnly=!0;const e=document.createRange();e.selectNodeContents(n);const t=window.getSelection();t.removeAllRanges(),t.addRange(e),n.setSelectionRange(0,999999)}else n.select();try{document.execCommand("copy")}catch(e){console.warn(err)}document.body.removeChild(n)})}},n=window.deferLoadingAlpine||(e=>e());window.deferLoadingAlpine=function(e){t.start(),n(e)},e=t;var o=e;export default o;
+

vendor/javascript/alpine-turbo-drive-adapter.js

@@ -0,0 +1,2 @@
+function isValidVersion(e,t){var r=e.split(".");var a=t.split(".");for(var i=0;i<r.length;i++)if(a[i]&&a[i]>r[i])return true;return a[r.length-1]===r[r.length-1]}function dispatch(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};e.dispatchEvent(new CustomEvent(t,{detail:r,bubbles:true,composed:true,cancelable:true}))}class Bridge{init(){if(!window.Alpine.version||!isValidVersion("3.0.0",window.Alpine.version))throw new Error("Invalid Alpine version. Please use Alpine 3.0.0 or above");window.Alpine.mutateDom((()=>{document.body.querySelectorAll("[x-cloak]").forEach((e=>{var t;e.setAttribute("data-alpine-was-cloaked",null!==(t=e.getAttribute("x-cloak"))&&void 0!==t?t:"")}))}));this.configureEventHandlers()}configureEventHandlers(){var renderCallback=e=>{if(!document.documentElement.hasAttribute("data-turbo-preview")){dispatch(document,"alpine:init");dispatch(document,"alpine:initializing");window.Alpine.flushAndStopDeferringMutations();dispatch(document,"alpine:initialised");window.Alpine.mutateDom((()=>{document.querySelectorAll("[data-alpine-ignored]").forEach((e=>{e.removeAttribute("x-ignore");e.removeAttribute("data-alpine-ignored")}))}))}};var beforeRenderCallback=e=>{window.Alpine.mutateDom((()=>{document.documentElement.hasAttribute("data-turbo-preview")||e.detail.newBody.querySelectorAll("[data-alpine-generated-me],[x-cloak]").forEach((e=>{if(e.hasAttribute("x-cloak")){var t;e.setAttribute("data-alpine-was-cloaked",null!==(t=e.getAttribute("x-cloak"))&&void 0!==t?t:"")}if(e.hasAttribute("data-alpine-generated-me")){e.removeAttribute("data-alpine-generated-me");e.remove()}}))}));window.Alpine.deferMutations()};var beforeCacheCallback=e=>{window.Alpine.mutateDom((()=>{document.body.querySelectorAll("[x-for],[x-if],[x-teleport],[data-alpine-was-cloaked]").forEach((e=>{if(e.hasAttribute("data-alpine-was-cloaked")){var t;e.setAttribute("x-cloak",null!==(t=e.getAttribute("data-alpine-was-cloaked"))&&void 0!==t?t:"");e.removeAttribute("data-alpine-was-cloaked")}e.hasAttribute("x-for")&&e._x_lookup&&Object.values(e._x_lookup).forEach((e=>e.setAttribute("data-alpine-generated-me",true)));e.hasAttribute("x-if")&&e._x_currentIfEl&&e._x_currentIfEl.setAttribute("data-alpine-generated-me",true);e.hasAttribute("x-teleport")&&e._x_teleport&&e._x_teleport.setAttribute("data-alpine-generated-me",true)}))}));document.querySelectorAll("[data-turbo-permanent]").forEach((e=>{window.Alpine.mutateDom((()=>{if(!e.hasAttribute("x-ignore")){e.setAttribute("x-ignore",true);e.setAttribute("data-alpine-ignored",true)}e.querySelectorAll("[data-alpine-generated-me]").forEach((e=>{e.removeAttribute("data-alpine-generated-me")}))}))}))};document.addEventListener("turbo:render",renderCallback);document.addEventListener("turbo:before-render",beforeRenderCallback);document.addEventListener("turbo:before-cache",beforeCacheCallback)}}window.Alpine&&console.error("Alpine-turbo-drive-adapter must be included before AlpineJs");Object.getOwnPropertyDescriptor(NodeList.prototype,"forEach")||Object.defineProperty(NodeList.prototype,"forEach",Object.getOwnPropertyDescriptor(Array.prototype,"forEach"));document.addEventListener("alpine:init",(()=>{var e=new Bridge;e.init()}),{once:true});var e={};export{e as default};
+