WebReflection

About

Highly Experimental

If you are using this already, consider changes soon due the discussion around current ESX proposal.

Feel free to keep an eye on udomsay as that will be the implementation reference for consumers.

---

parterburn

-- For the latest version:
-- https://gist.github.com/parterburn/e832b9090ee35eb830529de8bd978b82

-- Set this property to true to always open in a new window
property open_in_new_window : false

-- Set this property to false to reuse the current tab
property open_in_new_tab : true

-- Handlers

rista404

function Component() {
	const [items, setItems] = useState([])

  	async function fetchItems(abortSignal: AbortSignal) {
		try {
			const res = await fetch(`/api/items/`, { signal: abortSignal })
			const resp = await res.json()
			if (res.ok && resp.ok) {
				setItems(resp.items)
			} else {

sindresorhus

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

1. Use ESM yourself. (preferred)
   Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
3. Stay on the existing version of the package until you can move to ESM.

developit

if (!Element.prototype.getInnerHTML) {
  Element.prototype.getInnerHTML = function(opts) {
    var html = this.innerHTML;
    if (!opts || !opts.includeShadowRoots) return html;
    var m = new (self.WeakMap || Map)();
    for (var c of (opts.closedRoots || [])) m.set(c.host, c);
    var p = [];
    function walk(node) {
      var c, shadow = node.shadowRoot || m.get(node);
      if (shadow) p.push(node.innerHTML, `<template shadowroot="${shadow.mode}">${shadow.innerHTML}</template>`);

calebdwilliams

import { LitElement } from 'https://cdn.pika.dev/lit-element@^2.3.1';

/** @typedef {new (...args: any[]) => any} Constructor */

/**
 * @template {!Constructor} T
 * @param {T} superclass - The class to extend
 */
const FormControlMixin = (superclass) => 
  class FormControl extends superclass {

blankhart

/* Adapted from snabbdom/updateChildren - The MIT License - Simon Friis Vindum */

import { api } from 'sinuous';

export function map(items, expr) {
	const { subscribe, root, cleanup } = api;

	let parent = document.createDocumentFragment();
	const beforeNode = parent.appendChild(document.createTextNode(''));
	const afterNode = parent.appendChild(document.createTextNode(''));

developit

140b polyfill for [].flat() & [].flatMap()

Install: npm i tiny-array-flat-polyfill

Usage:

import 'tiny-array-flat-polyfill';

const ARR = [1, [2, [3]], [[[4]]], 5]

developit

export const h=(t,p,...c)=>({t,p,c,k:p&&p.key})
export const render=(e,d,t=d.t||(d.t={}),p,r,c,m,y)=>
  // arrays
  e.map?e.map((e,p)=>render(e,d,t.o&&t.o[p])):
  // components
  e.t.call?(e.i=render((render.c=e).t(Object.assign({children:e.c},e.p),e.s=t.s||{},t=>
    render(Object.assign(e.s,t)&&e,d,e)),t.i||d,t&&t.i||{}),d.t=t=e):(
  // create notes
  m=t.d||(e.t?document.createElement(e.t):new Text(e.p)),
  // diff props

jakub-g

<script> async, defer, async defer, module, nomodule, src, inline - the cheat sheet

With the addition of ES modules, there's now no fewer than 24 ways to load your JS code: (inline|not inline) x (defer|no defer) x (async|no async) x (type=text/javascript | type=module | nomodule) -- and each of them is subtly different.

This document is a comparison of various ways the <script> tags in HTML are processed depending on the attributes set.

If you ever wondered when to use inline <script async type="module"> and when <script nomodule defer src="...">, you're in the good place!

Note that this article is about <script>s inserted in the HTML; the behavior of <script>s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)