KonnorRogers

  class SlButton < Phlex::HTML
    register_element :sl_button

    def initialize(
      caret: false,
      circle: false,
      disabled: false,
      download: nil,
      form: nil,
      formaction: nil,

KonnorRogers

        const selection = document.getSelection()

        if (!selection) { return }

        let hasNode = false

        if (typeof selection.getComposedRanges === "function") {
            const staticRange = selection.getComposedRanges(this.contentEditableElement.getRootNode())[0]
            if (!staticRange) { return }

KonnorRogers

# test/application_system_test_case.rb
require "test_helper"
require "playwright"
require "fileutils"

class CapybaraNullDriver < Capybara::Driver::Base
  def needs_server?
    true
  end
end

KonnorRogers

  /**
   * @param {InputEvent} e
   */
  handleBeforeInput (e) {
    // All level 2 input types: <https://w3c.github.io/input-events/#interface-InputEvent-Attributes>
    switch (e.inputType) {
 	    // insert typed plain text
      case "insertText":
        break;
      // insert or replace existing text by means of a spell checker, auto-correct, writing suggestions or similar

KonnorRogers

<button type="button" data-controller="refresh">Refresh</button>

<script type="module">
  import { Controller } from "@hotwired/stimulus"
  
  export default class RefreshController extends Controller {
    connect () {
      this.element.addEventListener("click", this.sendRefresh)
    }
    

KonnorRogers

<!-- Case 1 -->
<my-input value="foo">
  <template shadowrootmode="open">
     <input value="foo">
  </template>
</my-input>

<script>
  myInput.value = "bar"
  customElements.define("my-input", MyInput)

KonnorRogers

  /**
    This fancy shenanigans is what allows users to only select 1 side of a diff.
    Inspired by this hack: https://stackoverflow.com/posts/73517303/revisions
  */
  tr td {
    user-select: none;
  }

  /** I'm not quite sure why its "n+4" instead of "n+3", when <td> 1-3 is the left, and <td> 4-6 is the right */

KonnorRogers

class MyElement extends LitElement {
  protected update(changedProperties: PropertyValues<this>): void {
    try {
      super.update(changedProperties)
    } catch (e) {
      // We should probably check the contents of the message since this could error on a regular update??
      // I really dont know. Its hacky, but it works.
      const event = new Event("lit-hydration-error", { bubbles: true, composed: true, cancelable: false })
      // @ts-expect-error leave me alone TS.
      event.error = e

KonnorRogers

if (typeof ResizeObserver === "undefined") {
  globalThis.ResizeObserver = class {
    // eslint-disable-next-line
    constructor (..._args: ConstructorParameters<typeof ResizeObserver>) {}
    // eslint-disable-next-line
    observe (..._args: Parameters<ResizeObserver["observe"]>) {}
    // eslint-disable-next-line
    unobserve (..._args: Parameters<ResizeObserver["unobserve"]>) {}
    // eslint-disable-next-line
    disconnect (..._args: Parameters<ResizeObserver["disconnect"]>) {}

KonnorRogers

rm -rf ../../shoelace-nextjs-lazy/node_modules/@shoelace-style/shoelace \
&& mkdir -p ../../shoelace-nextjs-lazy/node_modules/@shoelace-style/shoelace \
&& cp -R ./{LICENSE.md,README.md,cdn,dist,package.json}  ../../shoelace-nextjs-lazy/node_modules/@shoelace-style/shoelace/