shoelace-rails 0.4.1 → 0.6.0

data/src/turbolinks/features/disable.ts

@@ -1,94 +0,0 @@
-// 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

@@ -1,107 +0,0 @@
-// 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

@@ -1,6 +0,0 @@
-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

@@ -1,38 +0,0 @@
-// 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

@@ -1,38 +0,0 @@
-// 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)
-}

data/src/turbolinks/turbolinks.ts

@@ -1,78 +0,0 @@
-import { Snapshot, SnapshotRenderer, ErrorRenderer, uuid } from "turbolinks"
-import { formSubmitSelector } from "./selectors"
-import { matches } from "./utils/dom"
-import { delegate } from "./utils/event"
-
-const nullCallback = function () {}
-const nullDelegate = {
-  viewInvalidated: nullCallback,
-  viewWillRender: nullCallback,
-  viewRendered: nullCallback,
-}
-
-const renderWithTurbolinks = (htmlContent) => {
-  const currentSnapshot = Snapshot.fromHTMLElement(document.documentElement)
-  const newSnapshot = Snapshot.fromHTMLString(htmlContent)
-  let renderer = new SnapshotRenderer(currentSnapshot, newSnapshot, false)
-
-  if (!renderer.shouldRender()) {
-    renderer = new ErrorRenderer(htmlContent)
-  }
-
-  renderer.delegate = nullDelegate
-  renderer.render(nullCallback)
-}
-
-const findActiveElement = (shadowRoot: ShadowRoot) => {
-  let el = shadowRoot.activeElement
-
-  while (el && el.shadowRoot && el.shadowRoot.activeElement) {
-    el = el.shadowRoot.activeElement
-  }
-
-  return el
-}
-
-export const addShadowDomSupportToTurbolinks = (turbolinksController) => {
-  // From https://github.com/turbolinks/turbolinks/blob/71b7a7d0546a573735af99113b622180e8a813c2/src/util.ts#L9
-  // © 2019 Basecamp, LLC.
-  const originalClosest: typeof turbolinksController.closest = turbolinksController.closest
-
-  turbolinksController.closest = (node, selector) => {
-    if (!!node.shadowRoot) {
-      const rootActiveElement = findActiveElement(node.shadowRoot) || node
-
-      if (matches(rootActiveElement, selector)) {
-        return rootActiveElement
-      }
-    } else {
-      return originalClosest(node, selector)
-    }
-  }
-}
-
-// Turbolinks does not automatically handle form responses. This creates a handler that does it.
-// From https://github.com/turbolinks/turbolinks/issues/85#issuecomment-299617076
-export const handleResponse = (turbolinksInstance) => {
-  return (event: CustomEvent<[XMLHttpRequest, string]>) => {
-    const [xhr, _status] = event.detail
-
-    if (xhr.getResponseHeader("Content-Type").startsWith("text/html")) {
-      turbolinksInstance.restorationIdentifier = uuid()
-      turbolinksInstance.clearCache()
-      turbolinksInstance.dispatch("turbolinks:before-cache")
-      turbolinksInstance.controller.pushHistoryWithLocationAndRestorationIdentifier(
-        xhr.responseURL,
-        turbolinksInstance.restorationIdentifier
-      )
-      renderWithTurbolinks(xhr.responseText)
-      window.scroll(0, 0)
-      turbolinksInstance.dispatch("turbolinks:load")
-    }
-  }
-}
-
-export const startTurbolinks = (turbolinksInstance) => {
-  delegate(document, formSubmitSelector, "ajax:complete", handleResponse(turbolinksInstance))
-  addShadowDomSupportToTurbolinks(turbolinksInstance)
-}

data/src/turbolinks/utils/ajax.ts

@@ -1,146 +0,0 @@
-// This code was heavily inspired by the rails-ujs project.
-// Copyright (c) 2007-2021 Rails Core team.
-import { cspNonce } from "./csp"
-import { CSRFProtection } from "./csrf"
-
-const AcceptHeaders = {
-  "*": "*/*",
-  text: "text/plain",
-  html: "text/html",
-  xml: "application/xml, text/xml",
-  json: "application/json, text/javascript",
-  script: "text/javascript, application/javascript, application/ecmascript, application/x-ecmascript",
-}
-
-export const ajax = (options) => {
-  options = prepareOptions(options)
-  var xhr = createXHR(options, function () {
-    const response = processResponse(
-      xhr.response != null ? xhr.response : xhr.responseText,
-      xhr.getResponseHeader("Content-Type")
-    )
-
-    if (Math.floor(xhr.status / 100) === 2) {
-      if (typeof options.success === "function") {
-        options.success(response, xhr.statusText, xhr)
-      }
-    } else {
-      if (typeof options.error === "function") {
-        options.error(response, xhr.statusText, xhr)
-      }
-    }
-    return typeof options.complete === "function" ? options.complete(xhr, xhr.statusText) : undefined
-  })
-
-  if (options.beforeSend != null && !options.beforeSend(xhr, options)) {
-    return false
-  }
-
-  if (xhr.readyState === XMLHttpRequest.OPENED) {
-    return xhr.send(options.data)
-  }
-}
-
-const prepareOptions = (options) => {
-  options.url = options.url || location.href
-  options.type = options.type.toUpperCase()
-  // append data to url if it's a GET request
-  if (options.type === "GET" && options.data) {
-    if (options.url.indexOf("?") < 0) {
-      options.url += "?" + options.data
-    } else {
-      options.url += "&" + options.data
-    }
-  }
-
-  // Use "*" as default dataType
-  if (AcceptHeaders[options.dataType] == null) {
-    options.dataType = "*"
-  }
-
-  options.accept = AcceptHeaders[options.dataType]
-  if (options.dataType !== "*") {
-    options.accept += ", */*; q=0.01"
-  }
-
-  return options
-}
-
-const createXHR = (options, done) => {
-  const xhr = new XMLHttpRequest()
-
-  // Open and set up xhr
-  xhr.open(options.type, options.url, true)
-  xhr.setRequestHeader("Accept", options.accept)
-
-  // Set Content-Type only when sending a string
-  // Sending FormData will automatically set Content-Type to multipart/form-data
-  if (typeof options.data === "string") {
-    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8")
-  }
-
-  if (!options.crossDomain) {
-    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest")
-    CSRFProtection(xhr)
-  }
-
-  xhr.withCredentials = !!options.withCredentials
-  xhr.onreadystatechange = function () {
-    if (xhr.readyState === XMLHttpRequest.DONE) {
-      return done(xhr)
-    }
-  }
-  return xhr
-}
-
-const processResponse = (response, type) => {
-  if (typeof response === "string" && typeof type === "string") {
-    if (type.match(/\bjson\b/)) {
-      try {
-        response = JSON.parse(response)
-      } catch (error) {
-        // no-op...
-      }
-    } else if (type.match(/\b(?:java|ecma)script\b/)) {
-      const script = document.createElement("script")
-      script.setAttribute("nonce", cspNonce())
-      script.text = response
-      document.head.appendChild(script).parentNode.removeChild(script)
-    } else if (type.match(/\b(xml|html|svg)\b/)) {
-      const parser = new DOMParser()
-      type = type.replace(/;.+/, "") // remove something like ';charset=utf-8'
-
-      try {
-        response = parser.parseFromString(response, type)
-      } catch (error1) {}
-    }
-  }
-
-  return response
-}
-
-// Default way to get an element's href. May be overridden at Rails.href.
-export const href = (element) => element.href
-
-// Determines if the request is a cross domain request.
-export const isCrossDomain = (url) => {
-  const originAnchor = document.createElement("a")
-  originAnchor.href = location.href
-  const urlAnchor = document.createElement("a")
-
-  try {
-    urlAnchor.href = url
-    // If URL protocol is false or is a string containing a single colon
-    // *and* host are false, assume it is not a cross-domain request
-    // (should only be the case for IE7 and IE compatibility mode).
-    // Otherwise, evaluate protocol and host of the URL against the origin
-    // protocol and host.
-    return !(
-      ((!urlAnchor.protocol || urlAnchor.protocol === ":") && !urlAnchor.host) ||
-      originAnchor.protocol + "//" + originAnchor.host === urlAnchor.protocol + "//" + urlAnchor.host
-    )
-  } catch (e) {
-    // If there is an error parsing the URL, assume it is crossDomain.
-    return true
-  }
-}

data/src/turbolinks/utils/csp.ts

@@ -1,20 +0,0 @@
-// This code was heavily inspired by the rails-ujs project.
-// Copyright (c) 2007-2021 Rails Core team.
-let nonce = null
-
-const loadCSPNonce = () => {
-  if (nonce) {
-    return nonce
-  }
-
-  const cspMetaTag: HTMLMetaElement = document.querySelector("meta[name=csp-nonce]")
-
-  if (cspMetaTag) {
-    nonce = cspMetaTag.content
-  }
-
-  return nonce
-}
-
-// Returns the Content-Security-Policy nonce for inline scripts.
-export const cspNonce = () => (nonce != null ? nonce : loadCSPNonce())

data/src/turbolinks/utils/csrf.ts

@@ -1,33 +0,0 @@
-// This code was heavily inspired by the rails-ujs project.
-// Copyright (c) 2007-2021 Rails Core team.
-const $ = (selector) => Array.prototype.slice.call(document.querySelectorAll(selector))
-
-// Up-to-date Cross-Site Request Forgery token
-export const csrfToken = () => {
-  const meta: HTMLMetaElement = document.querySelector("meta[name=csrf-token]")
-  return meta && meta.content
-}
-
-// URL param that must contain the CSRF token
-export const csrfParam = () => {
-  const meta: HTMLMetaElement = document.querySelector("meta[name=csrf-param]")
-  return meta && meta.content
-}
-
-// Make sure that every Ajax request sends the CSRF token
-export const CSRFProtection = (xhr) => {
-  const token = csrfToken()
-  if (token != null) {
-    return xhr.setRequestHeader("X-CSRF-Token", token)
-  }
-}
-
-// Make sure that all forms have actual up-to-date tokens (cached forms contain old ones)
-export const refreshCSRFTokens = () => {
-  const token = csrfToken()
-  const param = csrfParam()
-
-  if (token != null && param != null) {
-    return $('sl-form input[name="' + param + '"]').forEach((input) => (input.value = token))
-  }
-}

data/src/turbolinks/utils/dom.ts

@@ -1,40 +0,0 @@
-// This code was heavily inspired by the rails-ujs project.
-// Copyright (c) 2007-2021 Rails Core team.
-const elementPrototype = Element.prototype as any
-
-const m: (this: Element, selector: string) => boolean =
-  elementPrototype.matches ||
-  elementPrototype.matchesSelector ||
-  elementPrototype.mozMatchesSelector ||
-  elementPrototype.msMatchesSelector ||
-  elementPrototype.oMatchesSelector ||
-  elementPrototype.webkitMatchesSelector
-
-// Checks if the given native dom element matches the selector
-// element::
-//   native DOM element
-// selector::
-//   CSS selector string or
-//   a JavaScript object with `selector` and `exclude` properties
-//   Examples: "form", { selector: "form", exclude: "form[data-remote='true']"}
-export const matches = (element, selector) => {
-  if (selector.exclude != null) {
-    return m.call(element, selector.selector) && !m.call(element, selector.exclude)
-  } else {
-    return m.call(element, selector)
-  }
-}
-
-// get and set data on a given element using "expando properties"
-// See: https://developer.mozilla.org/en-US/docs/Glossary/Expando
-const expando = "_ujsData"
-
-export const getData = (element, key) => (element[expando] != null ? element[expando][key] : undefined)
-
-export const setData = (element, key, value) => {
-  if (element[expando] == null) {
-    element[expando] = {}
-  }
-
-  return (element[expando][key] = value)
-}

data/src/turbolinks/utils/event.ts

@@ -1,57 +0,0 @@
-// This code was heavily inspired by the rails-ujs project.
-// Copyright (c) 2007-2021 Rails Core team.
-import { matches } from "./dom"
-
-// Triggers a custom event on an element and returns false if the event result is false
-// obj::
-//   a native DOM element
-// name::
-//   string that corresponds to the event you want to trigger
-//   e.g. 'click', 'submit'
-// data::
-//   data you want to pass when you dispatch an event
-export const fire = (obj, name, data = {}) => {
-  const event = new CustomEvent(name, {
-    bubbles: true,
-    cancelable: true,
-    detail: data,
-  })
-
-  obj.dispatchEvent(event)
-  return !event.defaultPrevented
-}
-
-// Helper function, needed to provide consistent behavior in IE
-export const stopEverything = (event) => {
-  fire(event.target, "ujs:everythingStopped")
-
-  event.preventDefault()
-  event.stopPropagation()
-
-  return event.stopImmediatePropagation()
-}
-
-// Delegates events
-// to a specified parent `element`, which fires event `handler`
-// for the specified `selector` when an event of `eventType` is triggered
-// element::
-//   parent element that will listen for events e.g. document
-// selector::
-//   CSS selector; or an object that has `selector` and `exclude` properties (see: Rails.matches)
-// eventType::
-//   string representing the event e.g. 'submit', 'click'
-// handler::
-//   the event handler to be called
-export const delegate = (element, selector, eventType, handler) =>
-  element.addEventListener(eventType, function (event) {
-    let { target } = event
-
-    while (!!(target instanceof Element) && !matches(target, selector)) {
-      target = target.parentNode
-    }
-
-    if (target instanceof Element && handler.call(target, event) === false) {
-      event.preventDefault()
-      return event.stopPropagation()
-    }
-  })