Chrome 135 संस्करण से बटनों में `command` और `commandfor` पेश

• dynamic web applications बनाने के लिए बटन अनिवार्य हैं। इनका उपयोग menu खोलने, actions switch करने और form submit करने में होता है
• Chrome 135 में नए command और commandfor attributes, पुराने popovertargetaction और popovertarget attributes को बेहतर बनाते हैं और उनकी जगह लेते हैं
• पहले button behavior implement करते समय आने वाली समस्याएँ:
  • HTML के onclick handler पर security policy (CSP) के कारण वास्तविक code में उपयोग की पाबंदियाँ हो सकती हैं
  • बटन और दूसरे elements की state sync करनी पड़ती है, और accessibility बनाए रखते हुए state manage करने वाला code जटिल हो जाता है
  • React, AlpineJS, Svelte आदि में भी state और event handling जटिल रहती है

command और commandfor पैटर्न

• command और commandfor attributes का उपयोग करने पर बटन दूसरे elements पर declarative तरीके से काम कर सकते हैं। इससे framework जैसी सुविधा मिलती है, जबकि flexibility भी बनी रहती है
• commandfor बटन ID का उपयोग करता है (for attribute की तरह), और command built-in values लेता है, जिससे तरीका अधिक intuitive बनता है
• उदाहरण: menu खोलने वाला बटन implement करना
  • aria-expanded या अतिरिक्त JavaScript की ज़रूरत नहीं

  <button commandfor="my-menu" command="show-popover">  
    Open Menu  
  </button>  
  <div popover id="my-menu">  
    <!-- ... -->  
  </div>  
  

command और commandfor बनाम popovertargetaction और popovertarget

• अगर आपने popover इस्तेमाल किया है, तो आप popovertarget और popovertargetaction attributes से परिचित हो सकते हैं
• ये commandfor और command की तरह काम करते हैं, लेकिन खास तौर पर popover के लिए बने हैं
• नए attributes पुराने attributes को पूरी तरह replace करते हैं और अतिरिक्त functionality भी देते हैं

built-in commands

• command attribute में ऐसे actions built-in हैं जो अलग-अलग APIs से map होते हैं
  • show-popover: el.showPopover() से map होता है
  • hide-popover: el.hidePopover() से map होता है
  • toggle-popover: el.togglePopover() से map होता है
  • show-modal: dialogEl.showModal() से map होता है
  • close: dialogEl.close() से map होता है
• उदाहरण: delete confirmation dialog implement करना
  • JavaScript के बिना state और accessibility manage की जा सकती है

  <button commandfor="confirm-dialog" command="show-modal">  
    Delete Record  
  </button>  
  <dialog id="confirm-dialog">  
    <header>  
      <h1>Delete Record?</h1>  
      <button commandfor="confirm-dialog" command="close" aria-label="Close">  
        <img role="none" src="/close-icon.svg">  
      </button>  
    </header>  
    <p>Are you sure? This action cannot be undone</p>  
    <footer>  
      <button commandfor="confirm-dialog" command="close" value="cancel">  
        Cancel  
      </button>  
      <button commandfor="confirm-dialog" command="close" value="delete">  
        Delete  
      </button>  
    </footer>  
  </dialog>  
  

  • result handling code: dialog के close event में return value को process किया जा सकता है

  dialog.addEventListener("close", (event) => {  
    if (event.target.returnValue === "cancel") {  
      console.log("Cancel was clicked");  
    } else if (event.target.returnValue === "delete") {  
      console.log("Delete was clicked");  
    }  
  });  
  

custom commands

• built-in commands के अलावा -- prefix का उपयोग करके custom commands define किए जा सकते हैं
• custom commands target element पर "command" event trigger करते हैं, लेकिन कोई अतिरिक्त logic execute नहीं करते
• उदाहरण: image rotation command implement करना

  <button commandfor="the-image" command="--rotate-landscape">  
    Landscape  
  </button>  
  <button commandfor="the-image" command="--rotate-portrait">  
    Portrait  
  </button>  
  <img id="the-image" src="photo.jpg">  
  
  <script type="module">  
    const image = document.getElementById("the-image");  
    image.addEventListener("command", (event) => {  
      if (event.command === "--rotate-landscape") {  
        image.style.rotate = "-90deg";  
      } else if (event.command === "--rotate-portrait") {  
        image.style.rotate = "0deg";  
      }  
    });  
  </script>  
  

Shadow DOM में command handling

• Shadow DOM में commandfor ID के आधार पर काम करता है, इसलिए ये सीमाएँ हैं:
  • अलग-अलग Shadow DOMs के बीच element reference नहीं किया जा सकता
  • ऐसे मामले में JavaScript API का उपयोग करके .commandForElement property set की जा सकती है
• उदाहरण: Shadow DOM में command connect करना

  <my-element>  
    <template shadowrootmode="open">  
      <button command="show-popover">Show popover</button>  
      <slot></slot>  
    </template>  
    <div popover><!-- ... --></div>  
  </my-element>  
  
  <script>  
    customElements.define("my-element", class extends HTMLElement {  
      connectedCallback() {  
        const popover = this.querySelector('[popover]');  
        this.shadowRoot.querySelector('button').commandForElement = popover;  
      }  
    });  
  </script>  
  

आगे की योजना

• Chrome आगे और built-in commands जोड़ने की योजना बना रहा है:
  • <details> element को खोलना और बंद करना
  • <input> और <select> में "show-picker" command support
  • <video> और <audio> playback commands
  • elements से text copy करने की सुविधा

[GN⁺]

Hacker News टिप्पणियाँ

• प्रोग्रामिंग भाषा सिद्धांतकार 80 के दशक से goto के एक अधिक शक्तिशाली संस्करण comefrom के बारे में अटकलें लगाते रहे हैं। इसे केवल intercal में लागू किया गया था। intercal, C जैसी भाषाओं की तुलना में सुरक्षा, प्रदर्शन और एर्गोनॉमिक्स के मामले में बेहतर है, लेकिन व्यावसायिक बाज़ार में प्रवेश करने में इसे कठिनाई हुई है। यह देखना दिलचस्प है कि javascript, intercal की इस सुविधा को अपना रहा है। उम्मीद है कि इससे शिष्ट प्रोग्रामिंग में उछाल आएगा, जैसे javascript के closure-आधारित objects ने functional programming को मुख्यधारा में पहुँचाया था

• Invokers केवल Chrome की चीज़ नहीं हैं। Firefox nightly में भी ये पहले से उपलब्ध हैं

• JS के बिना declarative UI behavior लागू करने का विचार आकर्षक है

  • यह popover/modal boilerplate को हटाता है (aria-expanded को manipulate करने की ज़रूरत नहीं)
  • show-modal जैसे built-in commands accessibility को markup में एकीकृत करते हैं
  • custom commands (e.g., --rotate-landscape) components को HTML के ज़रिए API expose करने देते हैं

• सवाल:

  • abstraction बनाम जादू: क्या यह सिर्फ complexity को JS से HTML में ले जा रहा है? frameworks पहले से state को abstract करते हैं। यह उनके साथ कैसे सह-अस्तित्व में रहेगा?
  • Shadow DOM friction: shadow roots के बीच .commandForElement सेट करने के लिए JS चाहिए। यह आधा-हल हुई समस्या जैसा लगता है
  • future-proofing: अगर OpenUI 20 से अधिक commands (e.g., show-picker, toggle-details) जोड़ता है, तो क्या platform niche syntax से फूला हुआ हो जाएगा?

• spec:

  • button element, commandfor attribute
  • button element, command attribute

• क्या यह वही action/messaging pattern है जिसका इस्तेमाल Next, Be, Apple आदि लगभग 30 साल पहले करते थे, या मैं कुछ मिस कर रहा हूँ

  • यह उपयोगी था, लेकिन मूल design pattern को बनाए रखने की जटिलता के कारण यह interface-based controller pattern में विकसित हुआ। इसलिए अगर यह डिब्बा खुला, तो बहुत सारे सुधार अनुरोध आने की उम्मीद है

• Netscape के शुरुआती Java UI toolkit (IFC) ने action elements को wire up करने की सुविधा दी थी

• नए command और commandfor attributes, popovertargetaction और popovertarget attributes को बेहतर बनाते हैं और उनका स्थान लेते हैं

  • क्या ये अब डिफ़ॉल्ट रूप से उपलब्ध हो गए हैं? इन्हें replace करने का मतलब क्या है? क्या इन्हें कभी हटा दिया जाएगा? वेब डेवलपर्स update के ज़रिए ऐसी चीज़ें हटा नहीं सकते जिनकी अब ज़रूरत नहीं है

• strings के ज़रिए programming करने से मुझे पूरी तरह एलर्जी है। accessibility के फ़ायदे समझ में आते हैं, लेकिन web app behavior की एक और layer के लिए element IDs का इस्तेमाल मुझे खास उत्साहित नहीं करता

• इसे पूरे API के बिना लागू नहीं करना चाहिए था। लगभग 5 commands की बजाय, ऐसा लगता है जैसे HTML के ज़रिए JavaScript की सारी functionality लागू की जा सकती है। इसका मतलब हज़ारों commands हो सकता है

• HTML में command and conquer को लेकर उम्मीद थी

• HTML को बेहतर और विस्तारित करना अच्छी बात है, लेकिन अभी बहुत लंबा रास्ता बाकी है। HTMX टीम के पास कुछ अच्छे ideas हैं