shoelace-rails 0.4.1 → 0.5.0

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()
-    }
-  })

data/src/turbolinks/utils/form.ts

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

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

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

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

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

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

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

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

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

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

@@ -1,45 +0,0 @@
-<% locations = { tokyo: "Tokyo", new_york: "New York", london: "London" } %>
-<%= sl_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

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

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

@@ -1,39 +0,0 @@
-<!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.88/dist/themes/light.css">
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.88/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>

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

@@ -1,44 +0,0 @@
-<% locations = { tokyo: "Tokyo", new_york: "New York", london: "London" } %>
-<%= sl_form_for(@user, url: turbolinks_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 %>
-<% end %>

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

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

data/test/dummy_app/bin/rails

@@ -1,5 +0,0 @@
-#!/usr/bin/env ruby
-
-APP_PATH = File.expand_path('../config/application', __dir__)
-require_relative "../config/boot"
-require "rails/commands"

data/test/dummy_app/bin/webpack

@@ -1,18 +0,0 @@
-#!/usr/bin/env ruby
-
-ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
-ENV["NODE_ENV"]  ||= "development"
-
-require "pathname"
-ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
-  Pathname.new(__FILE__).realpath)
-
-require "bundler/setup"
-
-require "webpacker"
-require "webpacker/webpack_runner"
-
-APP_ROOT = File.expand_path("..", __dir__)
-Dir.chdir(APP_ROOT) do
-  Webpacker::WebpackRunner.run(ARGV)
-end