shoelace-rails 0.1.0

data/src/turbolinks/turbolinks.ts

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

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

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

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

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

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

data/src/turbolinks/utils/form.ts

@@ -0,0 +1,58 @@
+// This code was heavily inspired by the rails-ujs project.
+// Copyright (c) 2007-2021 Rails Core team.
+import { matches } from "./dom"
+
+const toArray = (e) => Array.prototype.slice.call(e)
+
+export const serializeElement = (element, additionalParam) => {
+  let inputs = [element]
+  if (matches(element, "form")) {
+    inputs = toArray(element.elements)
+  }
+  const params = []
+
+  inputs.forEach(function (input) {
+    if (!input.name || input.disabled) {
+      return
+    }
+
+    if (matches(input, "fieldset[disabled] *")) {
+      return
+    }
+
+    if (matches(input, "select")) {
+      return toArray(input.options).forEach(function (option) {
+        if (option.selected) {
+          return params.push({ name: input.name, value: option.value })
+        }
+      })
+    } else if (input.checked || ["radio", "checkbox", "submit"].indexOf(input.type) === -1) {
+      return params.push({ name: input.name, value: input.value })
+    }
+  })
+
+  if (additionalParam) {
+    params.push(additionalParam)
+  }
+
+  return params
+    .map(function (param) {
+      if (param.name != null) {
+        return `${encodeURIComponent(param.name)}=${encodeURIComponent(param.value)}`
+      } else {
+        return param
+      }
+    })
+    .join("&")
+}
+
+// Helper function that returns form elements that match the specified CSS selector
+// If form is actually a "form" element this will return associated elements outside the from that have
+// the html form attribute set
+export const formElements = (form, selector) => {
+  if (matches(form, "form")) {
+    return toArray(form.elements).filter((el) => matches(el, selector))
+  } else {
+    return toArray(form.querySelectorAll(selector))
+  }
+}

data/test/dummy_app/Gemfile

@@ -0,0 +1,19 @@
+source 'https://rubygems.org'
+
+gem 'rails', '~> 7.0.0'
+gem 'webrick'
+gem 'bootsnap', '>= 1.4.4', require: false
+gem 'rexml'
+gem 'shoelace-rails', path: '../../../shoelace-rails'
+gem 'webpacker', '6.0.0.rc.5'
+
+group :development, :test do
+  gem 'pry-byebug'
+end
+
+group :test do
+  gem 'capybara', '>= 3.26'
+  gem 'capybara-shadowdom'
+  gem 'selenium-webdriver', '>= 4.0.0.rc3'
+  gem 'webdrivers'
+end

data/test/dummy_app/Rakefile

@@ -0,0 +1,6 @@
+# Add your own tasks in files placed in lib/tasks ending in .rake,
+# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
+
+require_relative "config/application"
+
+Rails.application.load_tasks

data/test/dummy_app/app/controllers/hotwire_forms_controller.rb

@@ -0,0 +1,46 @@
+class HotwireFormsController < ActionController::Base
+  layout "application"
+
+  def show
+    @user = User.new(session[:user])
+  end
+
+  # GET /users/new
+  def new
+    @user = User.new(params[:user]&.permit!)
+
+    render 'form'
+  end
+
+  # GET /users/1/edit
+  def edit
+    @user = User.new(name: "Yuki Nishijima")
+
+    render 'form'
+  end
+
+  # POST /users
+  def create
+    @user = User.new(user_params)
+
+    if @user.valid?
+      session[:user] = user_params.to_h
+      redirect_to hotwire_form_path(1)
+    else
+      render 'form', status: 422
+    end
+  end
+
+  # PATCH/PUT /users/1
+  def update
+    @user = User.new(user_params)
+
+    render(@user.valid? ? 'show' : 'form')
+  end
+
+  private
+
+  def user_params
+    params.require(:user).permit!
+  end
+end

data/test/dummy_app/app/controllers/turbolinks_forms_controller.rb

@@ -0,0 +1,37 @@
+class TurbolinksFormsController < ActionController::Base
+  layout "application"
+
+  # GET /users/new
+  def new
+    @user = User.new
+
+    render 'form'
+  end
+
+  # GET /users/1/edit
+  def edit
+    @user = User.new(name: "Yuki Nishijima")
+
+    render 'form'
+  end
+
+  # POST /users
+  def create
+    @user = User.new(user_params)
+
+    render(@user.valid? ? 'show' : 'form')
+  end
+
+  # PATCH/PUT /users/1
+  def update
+    @user = User.new(user_params)
+
+    render(@user.valid? ? 'show' : 'form')
+  end
+
+  private
+
+  def user_params
+    params.require(:user).permit!
+  end
+end

data/test/dummy_app/app/models/user.rb

@@ -0,0 +1,16 @@
+class User
+  include ActiveModel::Model
+  include ActiveModel::Attributes
+
+  attribute :name
+  attribute :description
+  attribute :color
+  attribute :score
+  attribute :current_city
+  attribute :previous_city
+  attribute :past_cities
+  attribute :remember_me
+  attribute :subscribe_to_emails
+
+  validates :name, presence: true
+end

data/test/dummy_app/app/packs/entrypoints/hotwire.js

@@ -0,0 +1 @@
+import "@hotwired/turbo-rails"

data/test/dummy_app/app/packs/entrypoints/turbolinks.js

@@ -0,0 +1,5 @@
+import Turbolinks from "turbolinks"
+import Rails from '@rails/ujs'
+
+Turbolinks.start()
+Rails.start()

data/test/dummy_app/app/views/hotwire_forms/form.html.erb

@@ -0,0 +1,45 @@
+<% locations = { tokyo: "Tokyo", new_york: "New York", london: "London" } %>
+<%= sl_turbo_form_for(@user, url: hotwire_forms_path) do |form| %>
+  <div>
+    <%= form.text_field :name do %>
+      <span slot="help-text" style="color: rgb(var(--sl-color-danger-600));">
+        <%= @user.errors.full_messages_for(:name).first %>
+      </span>
+    <% end %>
+  </div>
+
+  <div>
+    <%= form.color_field :color %>
+  </div>
+
+  <div>
+    <%= form.range_field :score, min: 0, max: 100, step: 1 %>
+  </div>
+
+  <div>
+    <%= form.collection_radio_buttons :current_city, locations, :first, :last %>
+  </div>
+
+  <div>
+    <%= form.collection_select :previous_city, locations, :first, :last, {}, { placeholder: "Select one" } %>
+  </div>
+
+  <div>
+    <%= form.collection_select :past_cities, locations, :first, :last, {}, { placeholder: "Select two or more", multiple: true, clearable: true } %>
+  </div>
+
+  <div>
+    <%= form.check_box :remember_me %>
+  </div>
+
+  <div>
+    <%= form.switch_field :subscribe_to_emails, value: "1" %>
+  </div>
+
+  <div>
+    <%= form.text_area :description %>
+  </div>
+
+  <%= form.submit %>
+  <%= form.submit "Submit without Turbo", data: { turbo: false } %>
+<% end %>

data/test/dummy_app/app/views/hotwire_forms/show.html.erb

@@ -0,0 +1,5 @@
+<% @user.attributes.each do |attribute_name, value| %>
+  <div>
+    <%= attribute_name.titleize %>: <%= value %>
+  </div>
+<% end %>

data/test/dummy_app/app/views/layouts/application.html.erb

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Shoelace Test</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+
+    <style>
+      body {
+        font-family: var(--sl-font-sans);
+        font-size: var(--sl-font-size-medium);
+        font-weight: var(--sl-font-weight-normal);
+        letter-spacing: var(--sl-letter-spacing-normal);
+        color: var(--sl-color-gray-800);
+        line-height: var(--sl-line-height-normal);
+      }
+
+      sl-form div, sl-turbo-form div {
+        margin-bottom: 2em;
+      }
+    </style>
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.65/dist/themes/light.css">
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.65/dist/shoelace.js"></script>
+
+    <% if request.path.include?("hotwire") %>
+      <%= javascript_pack_tag 'hotwire' %>
+    <% else %>
+      <%= javascript_pack_tag 'turbolinks' %>
+    <% end %>
+  </head>
+
+  <body>
+    <div style="width: 950px; margin: auto">
+      <%= yield %>
+    </div>
+  </body>
+</html>