Skip to content

Instantly share code, notes, and snippets.

View justinfagnani's full-sized avatar

Justin Fagnani justinfagnani

943 followers · 0 following
View GitHub Profile
@justinfagnani
justinfagnani / example-worker.ts
Created August 7, 2018 14:12
ModuleWorker - Easily access and call exports of a JS module in a Worker
export const a = 'hello';
export const f = (a: any, b: any, c: any) => {
return {
a, b, c
};
};
@justinfagnani
justinfagnani / README.md
Last active April 21, 2022 08:45
Inline JavaScript Modules Definitions

Inline JavaScript Module Definitions

Motivation

Domenic's blöcks proposal outlines a way to conveniently define functions that run in another worker/worklet as an inline, non-capturing scope, function body.

Blöcks as proposed have a few open questions and lack a few features that could generalize them to more use cases and with more practical ergonomics.

  • Blöcks don't allow static imports, which makes it harder for them to import neccessary library code. They must rely on dynamic import, which is somewhat more difficult to statically analyzer.
@justinfagnani
justinfagnani / mixins.md
Last active April 13, 2022 12:14
Maximally Minimal Mixins
@justinfagnani
justinfagnani / Async Module Initialization.md
Last active January 26, 2021 08:24
Async Module Initialization with Inline Modules

Async Module Initialization with Inline Modules

The Problem

Modules may need to load non-JS resources that would clearly categorized as dependencies - the module is not truly ready until those resources are (example: templates for UI components). Loading APIs, like fetch() are asynchronous, and there is currently no way to make a module wait for asynchronous calls.

The Problem with Top-Level await

Top-level await, which would block execution within a module on a await expression, has been proposed as a way to solve this problem. It has a critical problem as highlighted here by Rich Harris.

@justinfagnani
justinfagnani / Scoped-Custom-Element-Registries.md
Last active June 26, 2023 02:08
Scoped Custom Element Registries

Outdated - current proposal is at https://github.com/justinfagnani/scoped-custom-elements

Scoped Custom Element Definitions

Overview

Scoped Custom Element definitions is an oft-requested feature of Web Components. The global registry is a possible source of name collisions that may arise from coincidence, or from an app trying to define multiple versions of the same element, or from more advanced scenarios like registering mocks during tests, or a component explicitly replacing an element definition for its scope.

Since the key DOM creation APIs are global, scoping definitions is tricky because we'd need a machanis to determind which scope to use. But if we offer scoped versions of these APIs the problem is tractable. This requires that DOM creation code is upgraded to use the new scoped APIs, something that hopefully could be done in template libraries and frameworks.

@justinfagnani
justinfagnani / findIndexAsync.js
Created October 17, 2017 13:22
findIndexAsync.js
async function findIndexAsync(promises, predicate) {
let i = 0;
for await (const p of asyncIterate(promises)) {
if (predicate(p)) {
return i;
}
i++;
}
}
@justinfagnani
justinfagnani / custom-element-conformance.js
Created October 8, 2017 22:38
Web Components Conformance Tests
const NativeHTMLElement = window.HTMLElement;
const documentWrite = document.write;
const documentOpen = document.open;
window.HTMLElement = class extends NativeHTMLElement {
constructor(...args) {
console.assert(args.length === 0);
super();
@justinfagnani
justinfagnani / index.html
Last active August 1, 2017 02:48
<!doctype html>
<html>
<head>
<script src="shadow-root.js"></script>
</head>
<div>
<div slot="main">
I'm some projected content.
</div>
<shadow-root>
@justinfagnani
justinfagnani / designer.html
Created November 5, 2015 21:39
designer
<link rel="import" href="../polymer/polymer.html">
<polymer-element name="my-element">
<template>
<style>
:host {
position: absolute;
width: 100%;
height: 100%;
@justinfagnani
justinfagnani / gist-server.json
Last active January 12, 2016 22:10
{
"font-roboto": "https://raw.githubusercontent.com/PolymerElements/font-roboto/v1.0.1/",
"iron-flex-layout": "https://raw.githubusercontent.com/PolymerElements/iron-flex-layout/v1.0.2/",
"paper-material": "https://raw.githubusercontent.com/PolymerElements/paper-material/v1.0.1/",
"paper-styles": "https://raw.githubusercontent.com/PolymerElements/paper-styles/v1.0.10/",
"polymer": "https://raw.githubusercontent.com/Polymer/polymer/v1.0.7/",
"webcomponentsjs": "https://raw.githubusercontent.com/webcomponents/webcomponentsjs/v0.7.7/"
}