KonnorRogers

<template component="MyComponent" store="global">
  <div 
    @click="(e) => console.log('Clicked on: ' + this.name)" // event listeners 
    .name={{ name }} // properties
    name="{{ name }}" // attributes
  >
    Hello {{ name }}
  </div>
</template>

KonnorRogers

const originalFetch = window.fetch

window.fetch = function (url, options = {}) {
  if (url === "http://example.net/locale") {
    return new Response(JSON.stringify({
              locale: "en-US",
              timeZone: "UTC"
    }))
  } else {

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