shoelace-rails 0.1.0

data/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@yuki24/shoelace-rails",
+  "version": "0.1.0-beta.5",
+  "author": "Yuki Nishijima <yuki24@hey.com>",
+  "license": "MIT",
+  "description": "Unobtrusive Javascript and Turbolinks support for shoelace.style",
+  "homepage": "https://github.com/yuki24/shoelace-rails",
+  "module": "dist/shoelace-rails.es2017-esm.js",
+  "main": "dist/shoelace-rails.es2017-umd.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist/*.js",
+    "dist/*.js.map",
+    "dist/types/**/*"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yuki24/shoelace-rails.git"
+  },
+  "bugs": {
+    "url": "https://github.com/yuki24/shoelace-rails"
+  },
+  "scripts": {
+    "build": "yarn types && rollup -c",
+    "clean": "rm -fr dist",
+    "prettier-project": "yarn run prettier-write 'src/**/*.{ts,tsx,js,jsx}'",
+    "prettier-write": "yarn run prettier --write",
+    "release": "yarn clean && yarn build && npm publish --access public",
+    "types": "tsc --noEmit false --emitDeclarationOnly true --outDir dist/types"
+  },
+  "devDependencies": {
+    "@hotwired/turbo": "^7.0.1",
+    "@rollup/plugin-node-resolve": "^13.0.4",
+    "@rollup/plugin-typescript": "^8.2.5",
+    "@shoelace-style/shoelace": "^2.0.0-beta.52",
+    "prettier": "^2.3.2",
+    "rollup": "^2.56.2",
+    "tslib": "^2.3.1",
+    "turbolinks": "5.x",
+    "typescript": "^4.3.5"
+  },
+  "peerDependencies": {
+    "@hotwired/turbo": "7.x",
+    "turbolinks": "5.x"
+  },
+  "prettier": {
+    "printWidth": 120,
+    "semi": false
+  }
+}

data/rollup.config.js

@@ -0,0 +1,49 @@
+import resolve from "@rollup/plugin-node-resolve"
+import typescript from "@rollup/plugin-typescript"
+
+export default [
+  {
+    external: ['turbolinks'],
+    input: "src/index.ts",
+    output: [
+      {
+        name: "Shoelace Rails",
+        file: "dist/shoelace-rails.es5-umd.js",
+        format: "umd",
+        sourcemap: true,
+      }
+    ],
+    plugins: [
+      resolve(),
+      typescript({ target: "es5", downlevelIteration: true })
+    ],
+    watch: {
+      include: "src/**"
+    }
+  },
+
+  {
+    external: ['turbolinks'],
+    input: "src/index.ts",
+    output: [
+      {
+        name: "Shoelace Rails",
+        file: "dist/shoelace-rails.es2017-umd.js",
+        format: "umd",
+        sourcemap: true,
+      },
+      {
+        file: "dist/shoelace-rails.es2017-esm.js",
+        format: "es",
+        sourcemap: true,
+      }
+    ],
+    plugins: [
+      resolve(),
+      typescript()
+    ],
+    watch: {
+      include: "src/**"
+    }
+  }
+]

data/shoelace-rails.gemspec

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+require_relative "lib/shoelace/rails/version"
+
+Gem::Specification.new do |spec|
+  spec.name          = "shoelace-rails"
+  spec.version       = Shoelace::Rails::VERSION
+  spec.authors       = ["Yuki Nishijima"]
+  spec.email         = ["yuki24@hey.com"]
+
+  spec.summary       = "Rails view helpers Shoelace.style, the design system."
+  spec.description   = "The shoelace-rails gem adds useful view helper methods for using Shoalace Web Components."
+  spec.homepage      = "https://github.com/yuki24/shoelace-rails"
+  spec.license       = "MIT"
+  spec.required_ruby_version = ">= 2.5.0"
+
+  spec.metadata["homepage_uri"]    = spec.homepage
+  spec.metadata["source_code_uri"] = "https://github.com/yuki24/shoelace-rails"
+  spec.metadata["changelog_uri"]   = "https://github.com/yuki24/shoelace-rails/releases"
+
+  spec.files = Dir.chdir(File.expand_path(__dir__)) do
+    `git ls-files -z`.split("\x0").reject { |f| f.match(%r{\A?:test/}) }
+  end
+
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{\Aexe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_dependency "actionview", ">= 5.2.0"
+  spec.add_dependency "actionpack", ">= 5.2.0"
+
+  spec.add_development_dependency "appraisal"
+  spec.add_development_dependency "minitest", ">= 5.14.4"
+  spec.add_development_dependency "rails-dom-testing", ">= 2.0.3"
+end

data/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./turbo"
+export * from "./turbolinks"

data/src/turbo/index.ts

@@ -0,0 +1,6 @@
+import "./polyfills/formdata-event"
+import { SlTurboFormElement } from "./sl-turbo-form"
+
+export const startTurbo = () => {
+  customElements.define("sl-turbo-form", SlTurboFormElement)
+}

data/src/turbo/polyfills/formdata-event.js

@@ -0,0 +1,27 @@
+(function(){
+/*
+
+ Copyright (c) 2020 The Polymer Project Authors. All rights reserved. This
+ code may only be used under the BSD style license found at
+ http://polymer.github.io/LICENSE.txt The complete set of authors may be
+ found at http://polymer.github.io/AUTHORS.txt The complete set of
+ contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code
+ distributed by Google as part of the polymer project is also subject to an
+ additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+'use strict';function aa(a){var b=0;return function(){return b<a.length?{done:!1,value:a[b++]}:{done:!0}}}function n(a){var b="undefined"!=typeof Symbol&&Symbol.iterator&&a[Symbol.iterator];return b?b.call(a):{next:aa(a)}}function ba(a){for(var b,c=[];!(b=a.next()).done;)c.push(b.value);return c}var ca="function"==typeof Object.create?Object.create:function(a){function b(){}b.prototype=a;return new b};
+function da(a){a=["object"==typeof globalThis&&globalThis,a,"object"==typeof window&&window,"object"==typeof self&&self,"object"==typeof global&&global];for(var b=0;b<a.length;++b){var c=a[b];if(c&&c.Math==Math)return c}throw Error("Cannot find global object");}var ea=da(this),q;
+if("function"==typeof Object.setPrototypeOf)q=Object.setPrototypeOf;else{var r;a:{var ha={a:!0},ia={};try{ia.__proto__=ha;r=ia.a;break a}catch(a){}r=!1}q=r?function(a,b){a.__proto__=b;if(a.__proto__!==b)throw new TypeError(a+" is not extensible");return a}:null}var ja=q,ka=window.Document.prototype,la=ka.createElement,ma=ka.createEvent;var t=window.Event,u=t.prototype,na=u.initEvent,oa=null===u||void 0===u?void 0:u.stopImmediatePropagation,pa=null===u||void 0===u?void 0:u.stopPropagation,w=Object.getOwnPropertyDescriptor(u,"defaultPrevented"),x=Object.getOwnPropertyDescriptor(u,"target");Object.getOwnPropertyDescriptor(u,"type");var qa=window.document;var ra=null===x||void 0===x?void 0:x.get,y=void 0!==ra?function(a){return ra.call(a)}:function(a){return a.target},sa=null===w||void 0===w?void 0:w.get,ta=void 0!==sa?function(a){return sa.call(a)}:function(a){return a.defaultPrevented};function ua(a,b,c){Object.setPrototypeOf(a,Object.getPrototypeOf(b));for(var d=n(Object.keys(b)),e=d.next();!e.done;e=d.next())e=e.value,"prototype"!==e&&Object.defineProperty(a,e,Object.getOwnPropertyDescriptor(b,e));a.prototype=c;Object.defineProperty(c,"constructor",{writable:!0,configurable:!0,enumerable:!1,value:c.constructor})};var va=new WeakMap,wa=new WeakMap;function z(a,b){b=void 0===b?{}:b;try{var c=new t(a,b)}catch(e){c=ma.call(qa,"Event");var d=b.bubbles;b=b.cancelable;na.call(c,a,void 0===d?!1:d,void 0===b?!1:b)}Object.setPrototypeOf(c,Object.getPrototypeOf(this));return c}ua(z,t,u);
+function xa(){z.prototype.constructor=z;Object.setPrototypeOf(z,Function.prototype);z.prototype.stopImmediatePropagation=function(){wa.set(this,!0);return oa.call(this)};z.prototype.stopPropagation=function(){va.set(this,!0);return pa.call(this)};window.Event=z};var A=window.EventTarget,B=null===A||void 0===A?void 0:A.prototype,ya=null===B||void 0===B?void 0:B.addEventListener,za=null===B||void 0===B?void 0:B.removeEventListener,Aa=null===B||void 0===B?void 0:B.dispatchEvent;var C=window.Node.prototype,E=C.addEventListener,Ba=C.appendChild,Ca=C.dispatchEvent,Da=C.getRootNode,Ea=C.insertBefore,Fa=C.removeChild,Ga=C.removeEventListener,F=Object.getOwnPropertyDescriptor(C,"parentNode");var G=window.Window.prototype,H=G.addEventListener,Ha=G.removeEventListener,Ia=G.dispatchEvent;var Ja=A?ya:function(a,b,c){if(this instanceof Node)return E.call(this,a,b,c);if(this instanceof Window)return H.call(this,a,b,c);throw new TypeError("Unsupported.");},Ka=A?za:function(a,b,c){if(this instanceof Node)return Ga.call(this,a,b,c);if(this instanceof Window)return Ha.call(this,a,b,c);throw new TypeError("Unsupported.");},Ma=A?Aa:function(a){if(this instanceof Node)return Ca.call(this,a);if(this instanceof Window)return Ia.call(this,a);throw new TypeError("Unsupported.");};var Na=null===F||void 0===F?void 0:F.get,I=void 0!==Na?function(a){return Na.call(a)}:function(a){return a.parentNode};function Oa(a){if(void 0!==Da)return Da.call(a,void 0);for(var b=I(a);null!==b;)a=b,b=I(b);return a};var J=window.HTMLInputElement.prototype,K=Object.getOwnPropertyDescriptor(J,"name"),L=Object.getOwnPropertyDescriptor(J,"type"),M=Object.getOwnPropertyDescriptor(J,"value");var N,Pa,Qa,Ra=null!==(N=(null!==L&&void 0!==L?L:{}).set)&&void 0!==N?N:function(a){this.type=a},Sa=null!==(Pa=(null!==K&&void 0!==K?K:{}).set)&&void 0!==Pa?Pa:function(a){this.name=a},Ta=null!==(Qa=(null!==M&&void 0!==M?M:{}).set)&&void 0!==Qa?Qa:function(a){this.value=a};var O=window.Element.prototype,P=O.getAttribute,Ua=O.hasAttribute,Va=O.removeAttribute,Wa=O.setAttribute;var Xa=Object.getOwnPropertyDescriptor(window.HTMLCollection.prototype,"length");var Ya,Za=null!==(Ya=(null!==Xa&&void 0!==Xa?Xa:{}).get)&&void 0!==Ya?Ya:function(){return this.length};var Q=window.HTMLFormElement.prototype,$a=Q.submit,ab=Object.getOwnPropertyDescriptor(Q,"elements");var bb=window.FormData,R=bb.prototype,cb=R.append,db=R.delete,eb=R.set;var fb=new WeakMap;function S(a,b){b=void 0===b?{}:b;a=z.call(this,a,b)||this;b=b.formData;if(!(b instanceof FormData))throw new TypeError("Failed to construct 'FormDataEvent': member formData is not of type FormData.");fb.set(a,b);return a}S.prototype=ca(z.prototype);S.prototype.constructor=S;if(ja)ja(S,z);else for(var T in z)if("prototype"!=T)if(Object.defineProperties){var gb=Object.getOwnPropertyDescriptor(z,T);gb&&Object.defineProperty(S,T,gb)}else S[T]=z[T];
+ea.Object.defineProperties(S.prototype,{formData:{configurable:!0,enumerable:!0,get:function(){return fb.get(this)}}});var U=new WeakMap;function V(a){var b=new bb(a);Object.setPrototypeOf(b,Object.getPrototypeOf(this));U.set(b,[]);a instanceof HTMLFormElement&&Ma.call(a,new S("formdata",{bubbles:!0,formData:b}));return b}ua(V,bb,R);
+function hb(){V.prototype.constructor=V;V.prototype.append=function(a,b){var c=U.get(this);if("string"!==typeof b)throw Error("Unsupported.");c.push({i:"append",name:a,value:b});return cb.call(this,a,b)};void 0!==db&&(V.prototype["delete"]=function(a){U.get(this).push({i:"delete",name:a});return db.call(this,a)});void 0!==eb&&(V.prototype.set=function(a,b){var c=U.get(this);if("string"!==typeof b)throw Error("Unsupported.");c.push({i:"set",name:a,value:b});return eb.call(this,a,b)});window.FormData=
+V};function ib(a){function b(p){for(var h=ab.get.call(a),k=Za.call(h),m=0;m<k;m++){var v=h[m],fa;if(fa=P.call(v,"name")===p)fa=!Ua.call(v,"disabled");if(fa)return v}}function c(p){for(var h=ab.get.call(a),k=Za.call(h),m=0;m<k;m++){var v=h[m];P.call(v,"name")===p&&(f.has(v)||f.set(v,P.call(v,"disabled")),Wa.call(v,"disabled",""))}}function d(p,h,k){var m=la.call(qa,"input",void 0);Ra.call(m,"hidden");Sa.call(m,p);Ta.call(m,h);void 0!==k?(p=I(k),Ea.call(p,m,k)):Ba.call(a,m);g.push(m)}var e=new V(a),g=
+[],f=new Map;e=n(U.get(e));for(var l=e.next();!l.done;l=e.next())switch(l=l.value,l.i){case "append":d(l.name,l.value);break;case "delete":c(l.name);break;case "set":var D=l;l=D.name;D=D.value;var La=b(l);void 0===La?d(l,D):(c(l),d(l,D,La));break;default:throw Error("UNREACHABLE");}setTimeout(function(){for(var p=n(g),h=p.next();!h.done;h=p.next()){h=h.value;var k=I(h);k&&Fa.call(k,h)}p=n(f);for(h=p.next();!h.done;h=p.next())k=n(h.value),h=k.next().value,k=k.next().value,P.call(h,"disabled")!==k&&
+(null===k?Va.call(h,"disabled"):Wa.call(h,"disabled",k))})};function W(){this.h=[]}W.prototype.push=function(a){for(var b=a.g,c=a.capture,d=n(this.h),e=d.next();!e.done;e=d.next())if(e=e.value,b===e.g&&c===e.capture)return;this.h.push(a)};W.prototype.delete=function(a){var b=a.g;a=a.capture;for(var c=0;c<this.h.length;c++){var d=this.h[c];if(b===d.g&&a===d.capture){this.h.splice(c,1);break}}};
+ea.Object.defineProperties(W.prototype,{length:{configurable:!0,enumerable:!0,get:function(){return this.h.length}},l:{configurable:!0,enumerable:!0,get:function(){for(var a=this.h,b=a.length-1;0<=b;b--){var c=a[b];if(c.capture)return c.g}}},j:{configurable:!0,enumerable:!0,get:function(){for(var a=this.h,b=a.length-1;0<=b;b--){var c=a[b];if(!c.capture)return c.g}}}});var X=new WeakMap;function jb(a,b,c){var d;b&&(X.has(a)||X.set(a,new W),c="boolean"===typeof c?c:null!==(d=null===c||void 0===c?void 0:c.capture)&&void 0!==d?d:!1,X.get(a).push({g:b,capture:c}))}function kb(a,b,c){var d;b&&(a=X.get(a),void 0!==a&&(c="boolean"===typeof c?c:null!==(d=null===c||void 0===c?void 0:c.capture)&&void 0!==d?d:!1,a.delete({g:b,capture:c})))};var Y=new WeakMap,lb=new WeakMap,Z=new WeakMap;function mb(a){if(!lb.has(a)){lb.set(a,!0);var b=y(a);if(b instanceof HTMLFormElement){b=Oa(b);var c=nb(function(){});Z.set(a,{target:b,g:c});Ja.call(b,"submit",c);jb(b,c)}}}
+function nb(a){return function e(c,d){for(var g=[],f=1;f<arguments.length;++f)g[f-1]=arguments[f];g="function"===typeof a?a.call.apply(a,[this,c].concat(g instanceof Array?g:ba(n(g)))):a.handleEvent.apply(a,[c].concat(g instanceof Array?g:ba(n(g))));f=y(c)instanceof HTMLFormElement;if(wa.has(c)&&f)ob(c);else if(va.has(c)&&f){f=X.get(this);var l=f.j;e!==f.l&&e!==l||ob(c)}else Z.has(c)&&(f=Z.get(c),void 0!==f&&this===f.target&&(f=X.get(this).j,e===f&&ob(c)));return g}}
+function ob(a){var b=Z.get(a);if(b){var c=b.target;b=b.g;Ka.call(c,"submit",b);kb(c,b);Z.delete(a)}ta(a)||ib(y(a))};var pb=new WeakMap;function qb(a,b){a.addEventListener=function(c,d,e){if("submit"===c&&null!==d){var g=nb(d);pb.set(d,g);d=g}g=b.call(this,c,d,e);if("formdata"===c){c=d;var f;c&&(e="boolean"===typeof e?e:null!==(f=null===e||void 0===e?void 0:e.capture)&&void 0!==f?f:!1,f=Y.get(this),void 0===f?(f=new W,f.push({g:c,capture:e}),Y.set(this,f),Ja.call(this,"submit",mb,!0)):f.push({g:c,capture:e}))}else"submit"===c&&null!==d&&jb(this,d,e);return g}}
+function rb(a,b){a.removeEventListener=function(c,d,e){var g;"submit"===c&&null!==d&&(d=null!==(g=pb.get(d))&&void 0!==g?g:d);g=b.call(this,c,d,e);if("formdata"===c){c=d;var f;c&&(d=Y.get(this),void 0!==d&&(e="boolean"===typeof e?e:null!==(f=null===e||void 0===e?void 0:e.capture)&&void 0!==f?f:!1,d.delete({g:c,capture:e}),0===d.length&&(Y.delete(this),Ka.call(this,"submit",mb,!0))))}else"submit"===c&&null!==d&&kb(this,d,e);return g}};function sb(){Q.submit=function(){ib(this);return $a.call(this)}};void 0===window.FormDataEvent&&(xa(),B&&(qb(B,ya),rb(B,za)),E&&(qb(C,E),rb(C,Ga)),H&&(qb(G,H),rb(G,Ha)),hb(),Object.defineProperty(window,"FormDataEvent",{writable:!0,enumerable:!1,configurable:!0,value:S}),Q&&sb());
+}).call(self);
+
+//# sourceMappingURL=formdata-event.min.js.map

data/src/turbo/sl-turbo-form.ts

@@ -0,0 +1,110 @@
+interface SlForm extends HTMLElement {
+  getFormData: () => FormData
+}
+
+interface SlButton extends HTMLElement {
+  submit: boolean
+}
+
+interface FormDataEvent extends Event {
+  formData: FormData
+}
+
+interface SubmitEvent extends CustomEvent {
+  submitter: Element
+}
+
+const submittersByForm: WeakMap<HTMLFormElement, HTMLElement> = new WeakMap()
+
+const cloneAttributes = (target, source) =>
+  [...source.attributes]
+    .filter(({ nodeName }) => !["id", "class"].includes(nodeName))
+    .forEach(({ nodeName, nodeValue }) => target.setAttribute(nodeName, nodeValue))
+
+const findSubmitterFromClickTarget = (target: EventTarget | null): HTMLElement => {
+  const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null
+
+  if (element?.tagName === "SL-BUTTON") {
+    const slButton = element as SlButton
+    return slButton.submit ? slButton : null
+  } else {
+    const candidate = element?.closest("input, button") as HTMLInputElement | HTMLFormElement
+    return candidate?.type === "submit" ? candidate : null
+  }
+}
+
+export class SlTurboFormElement extends HTMLElement {
+  private readonly form: HTMLFormElement
+  private called: boolean
+
+  static template = `
+    <sl-form>
+      <slot></slot>
+    </sl-form>
+  `
+
+  static get observedAttributes() {
+    return ["action", "method", "enctype", "accept-charset", "data"]
+  }
+
+  constructor() {
+    super()
+
+    // The <sl-form> component needs to be rendered within the shadow DOM so we can safely use the <slot>, which
+    // should contain shoelace form controls.
+    const shadowRoot = this.attachShadow({ mode: "open" })
+    shadowRoot.innerHTML = SlTurboFormElement.template
+
+    // The normal <form> element needs to be rendered within the light DOM so we can emit a custom 'submit' event
+    // with appropriate formdata, target, etc.
+    this.form = document.createElement("form")
+    this.form.style.display = "none"
+    cloneAttributes(this.form, this)
+    this.appendChild(this.form)
+  }
+
+  connectedCallback() {
+    this.addEventListener("click", this.clickCaptured, true)
+    this.addEventListener("sl-submit", this.handleSubmit)
+    this.addEventListener("formdata", this.handleFormData)
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener("click", this.clickCaptured, true)
+    this.removeEventListener("sl-submit", this.handleSubmit)
+    this.removeEventListener("formdata", this.handleFormData)
+  }
+
+  handleFormData = (event: FormDataEvent) => {
+    const { formData, target } = event
+
+    if (this.form === target && !this.called) {
+      this.called = true
+      const slForm = this.shadowRoot.querySelector("sl-form") as SlForm
+
+      for (const [key, value] of slForm.getFormData().entries()) {
+        formData.append(key, value)
+      }
+    }
+  }
+
+  handleSubmit = (event: CustomEvent) => {
+    event.stopImmediatePropagation()
+    const submitter = submittersByForm.get(this.form)
+    const submitEvent = new CustomEvent("submit", { bubbles: true, cancelable: true }) as SubmitEvent
+    Object.defineProperty(submitEvent, "submitter", { get: () => submitter })
+
+    const cancelled = this.form.dispatchEvent(submitEvent)
+    if (cancelled) {
+      this.form.submit()
+    }
+  }
+
+  clickCaptured = (event: Event) => {
+    const submitter = findSubmitterFromClickTarget(event.target)
+
+    if (submitter) {
+      submittersByForm.set(this.form, submitter)
+    }
+  }
+}

data/src/turbolinks/features/confirm.ts

@@ -0,0 +1,42 @@
+// This code was heavily inspired by the rails-ujs project.
+// Copyright (c) 2007-2021 Rails Core team.
+import { fire, stopEverything } from "../utils/event"
+
+export const handleConfirm = (event) => {
+  const { target } = event
+
+  if (!allowAction(target)) {
+    return stopEverything(event)
+  }
+}
+
+// For 'data-confirm' attribute:
+// - Fires `confirm` event
+// - Shows the confirmation dialog
+// - Fires the `confirm:complete` event
+//
+// Returns `true` if no function stops the chain and user chose yes `false` otherwise.
+// Attaching a handler to the element's `confirm` event that returns a `falsy` value cancels the confirmation dialog.
+// Attaching a handler to the element's `confirm:complete` event that returns a `falsy` value makes this function
+// return false. The `confirm:complete` event is fired whether or not the user answered true or false to the dialog.
+const allowAction = (element) => {
+  const message = element.getAttribute("data-confirm")
+
+  if (!message) {
+    return true
+  }
+
+  let callback = null,
+    answer = false
+  if (fire(element, "confirm")) {
+    try {
+      answer = confirm(message)
+    } catch (error) {
+      // no-op...
+    }
+
+    callback = fire(element, "confirm:complete", [answer])
+  }
+
+  return answer && callback
+}

data/src/turbolinks/features/disable.ts

@@ -0,0 +1,94 @@
+// This code was heavily inspired by the rails-ujs project.
+// Copyright (c) 2007-2021 Rails Core team.
+import { buttonDisableSelector, formDisableSelector, formEnableSelector, formSubmitSelector } from "../selectors"
+import { getData, matches, setData } from "../utils/dom"
+import { stopEverything } from "../utils/event"
+import { formElements } from "../utils/form"
+
+export const handleDisabledElement = (event) => {
+  const element: HTMLInputElement | HTMLFormElement = event.target
+
+  if (element.disabled) {
+    return stopEverything(event)
+  }
+}
+
+// Unified function to enable an element (link, button and form)
+export const enableElement = function (e) {
+  let element
+
+  if (e instanceof Event) {
+    if (isXhrRedirect(e)) {
+      return
+    }
+    element = e.target
+  } else {
+    element = e
+  }
+
+  if (matches(element, buttonDisableSelector) || matches(element, formEnableSelector)) {
+    return enableFormElement(element)
+  } else if (matches(element, formSubmitSelector)) {
+    return enableFormElements(element)
+  }
+}
+
+// Unified function to disable an element (link, button and form)
+export const disableElement = function (e) {
+  const element = e instanceof Event ? e.target : e
+
+  if (matches(element, buttonDisableSelector) || matches(element, formDisableSelector)) {
+    return disableFormElement(element)
+  } else if (matches(element, formSubmitSelector)) {
+    return disableFormElements(element)
+  }
+}
+
+// Disables form elements:
+//  - Caches element value in 'ujs:enable-with' data store
+//  - Replaces element text with value of 'data-disable-with' attribute
+//  - Sets disabled property to true
+const disableFormElements = (form) => formElements(form, formDisableSelector).forEach(disableFormElement)
+
+const disableFormElement = function (element) {
+  if (getData(element, "ujs:disabled")) {
+    return
+  }
+
+  const replacement = element.getAttribute("data-disable-with")
+  if (replacement != null) {
+    if (matches(element, "button")) {
+      setData(element, "ujs:enable-with", element.innerHTML)
+      element.innerHTML = replacement
+    } else {
+      setData(element, "ujs:enable-with", element.value)
+      element.value = replacement
+    }
+  }
+  element.disabled = true
+  return setData(element, "ujs:disabled", true)
+}
+
+// Re-enables disabled form elements:
+//  - Replaces element text with cached value from 'ujs:enable-with' data store (created in `disableFormElements`)
+//  - Sets disabled property to false
+const enableFormElements = (form) => formElements(form, formEnableSelector).forEach(enableFormElement)
+
+const enableFormElement = function (element) {
+  const originalText = getData(element, "ujs:enable-with")
+  if (originalText != null) {
+    if (matches(element, "button")) {
+      element.innerHTML = originalText
+    } else {
+      element.value = originalText
+    }
+    setData(element, "ujs:enable-with", null) // clean up cache
+  }
+  element.disabled = false
+  return setData(element, "ujs:disabled", null)
+}
+
+const isXhrRedirect = function (event) {
+  const xhr = event.detail != null ? event.detail[0] : undefined
+  return (xhr != null ? xhr.getResponseHeader("X-Xhr-Redirect") : undefined) != null
+}

data/src/turbolinks/features/remote.ts

@@ -0,0 +1,107 @@
+// This code was heavily inspired by the rails-ujs project.
+// Copyright (c) 2007-2021 Rails Core team.
+import { formSubmitSelector } from "../selectors"
+import { ajax, href, isCrossDomain } from "../utils/ajax"
+import { getData, matches, setData } from "../utils/dom"
+import { fire, stopEverything } from "../utils/event"
+
+const isRemote = function (element) {
+  const value = element.getAttribute("data-remote")
+  return value != null && value !== "false"
+}
+
+export const handleRemote = function (event: CustomEvent<{ formData: FormData; formControls: HTMLElement[] }>) {
+  const element = this
+
+  if (!isRemote(element)) {
+    return true
+  }
+
+  if (!fire(element, "ajax:before")) {
+    fire(element, "ajax:stopped")
+    return false
+  }
+
+  let method, url, data
+
+  const withCredentials = element.getAttribute("data-with-credentials")
+  const dataType = element.getAttribute("data-type") || "script"
+
+  if (matches(element, formSubmitSelector)) {
+    // memoized value from clicked submit button
+    method = getData(element, "ujs:submit-button-formmethod") || element.getAttribute("method") || "GET"
+    url = getData(element, "ujs:submit-button-formaction") || element.getAttribute("action") || location.href
+
+    // strip query string if it's a GET request
+    if (method.toUpperCase() === "GET") {
+      url = url.replace(/\?.*$/, "")
+      data = Array.from<Array<string>, string>(event.detail.formData as any, (e) =>
+        e.map(encodeURIComponent).join("=")
+      ).join("&")
+    } else {
+      data = event.detail.formData
+    }
+
+    setData(element, "ujs:submit-button", null)
+    setData(element, "ujs:submit-button-formmethod", null)
+    setData(element, "ujs:submit-button-formaction", null)
+  } else {
+    method = element.getAttribute("data-method")
+    url = href(element)
+    data = element.getAttribute("data-params")
+  }
+
+  ajax({
+    type: method,
+    url,
+    data,
+    dataType,
+    // stopping the "ajax:beforeSend" event will cancel the ajax request
+    beforeSend: (xhr, options) => {
+      if (fire(element, "ajax:beforeSend", [xhr, options])) {
+        return fire(element, "ajax:send", [xhr])
+      } else {
+        fire(element, "ajax:stopped")
+        return false
+      }
+    },
+    success: (...args) => fire(element, "ajax:success", args),
+    error: (...args) => fire(element, "ajax:error", args),
+    complete: (...args) => fire(element, "ajax:complete", args),
+    crossDomain: isCrossDomain(url),
+    withCredentials: withCredentials != null && withCredentials !== "false",
+  })
+
+  return stopEverything(event)
+}
+
+export const formSubmitButtonClick = (event) => {
+  const button: HTMLButtonElement = event.target
+  const { form } = button
+
+  if (!form) {
+    return
+  }
+
+  if (button.name) {
+    setData(form, "ujs:submit-button", { name: button.name, value: button.value })
+  }
+
+  setData(form, "ujs:formnovalidate-button", button.formNoValidate)
+  setData(form, "ujs:submit-button-formaction", button.getAttribute("formaction"))
+  return setData(form, "ujs:submit-button-formmethod", button.getAttribute("formmethod"))
+}
+
+export const preventInsignificantClick = (event) => {
+  const link: HTMLElement = event.target
+
+  const method = (link.getAttribute("data-method") || "GET").toUpperCase()
+  const data = link.getAttribute("data-params")
+  const metaClick = event.metaKey || event.ctrlKey
+  const insignificantMetaClick = metaClick && method === "GET" && !data
+  const nonPrimaryMouseClick = event.button != null && event.button !== 0
+
+  if (nonPrimaryMouseClick || insignificantMetaClick) {
+    return event.stopImmediatePropagation()
+  }
+}

data/src/turbolinks/index.ts

@@ -0,0 +1,6 @@
+export * from "./utils/event"
+export * from "./utils/dom"
+export * from "./features/remote"
+export * from "./selectors"
+export * from "./turbolinks"
+export * from "./start"

data/src/turbolinks/selectors.ts

@@ -0,0 +1,38 @@
+// This code was heavily inspired by the rails-ujs project.
+// Copyright (c) 2007-2021 Rails Core team.
+export const buttonClickSelector = {
+  selector: "sl-button[data-remote]:not([form]), sl-button[data-confirm]:not([form])",
+  exclude: "sl-form sl-button",
+}
+
+export const formSubmitSelector = "sl-form[data-remote]"
+
+export const formInputClickSelector = [
+  "sl-form sl-button[submit]",
+  "sl-form sl-button:not([type])",
+  "sl-button[submit][sl-form]",
+  "sl-button[sl-form]:not([type])",
+].join(", ")
+
+export const formDisableSelector = [
+  "sl-input[data-disable-with]:not([disabled])",
+  "sl-button[data-disable-with]:not([disabled])",
+  "sl-textarea[data-disable-with]:not([disabled])",
+  "sl-input[data-disable]:not([disabled])",
+  "sl-button[data-disable]:not([disabled])",
+  "sl-textarea[data-disable]:not([disabled])",
+].join(", ")
+
+export const formEnableSelector = [
+  "sl-input[data-disable-with][disabled]",
+  "sl-button[data-disable-with][disabled]",
+  "sl-textarea[data-disable-with][disabled]",
+  "sl-input[data-disable][disabled]",
+  "sl-button[data-disable][disabled]",
+  "sl-textarea[data-disable][disabled]",
+].join(", ")
+
+export const buttonDisableSelector = [
+  "sl-button[data-remote][data-disable-with]",
+  "sl-button[data-remote][data-disable]",
+].join(", ")

data/src/turbolinks/start.ts

@@ -0,0 +1,38 @@
+// This code was heavily inspired by the rails-ujs project.
+// Copyright (c) 2007-2021 Rails Core team.
+import { handleConfirm } from "./features/confirm"
+import { disableElement, enableElement, handleDisabledElement } from "./features/disable"
+import { formSubmitButtonClick, handleRemote, preventInsignificantClick } from "./features/remote"
+import { buttonClickSelector, buttonDisableSelector, formInputClickSelector, formSubmitSelector } from "./selectors"
+
+import { delegate } from "./utils/event"
+
+export const getDefaultAssetPath = () => {
+  const rootUrl = (document.currentScript as any).src.replace(/\/packs.*$/, "")
+
+  return `${rootUrl}/packs/js/`
+}
+
+export const startUjs = () => {
+  delegate(document, buttonDisableSelector, "ajax:complete", enableElement)
+  delegate(document, buttonDisableSelector, "ajax:stopped", enableElement)
+
+  delegate(document, buttonClickSelector, "click", preventInsignificantClick)
+  delegate(document, buttonClickSelector, "click", handleDisabledElement)
+  delegate(document, buttonClickSelector, "click", handleConfirm)
+  delegate(document, buttonClickSelector, "click", disableElement)
+  delegate(document, buttonClickSelector, "click", handleRemote)
+
+  delegate(document, formSubmitSelector, "sl-submit", handleDisabledElement)
+  delegate(document, formSubmitSelector, "sl-submit", handleConfirm)
+  delegate(document, formSubmitSelector, "sl-submit", handleRemote)
+
+  // simulates a normal form submit:
+  delegate(document, formSubmitSelector, "ajax:send", disableElement)
+  delegate(document, formSubmitSelector, "ajax:complete", enableElement)
+
+  delegate(document, formInputClickSelector, "click", preventInsignificantClick)
+  delegate(document, formInputClickSelector, "click", handleDisabledElement)
+  // delegate(document, formInputClickSelector, "click", handleConfirm)
+  delegate(document, formInputClickSelector, "click", formSubmitButtonClick)
+}