Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

View justinfagnani's full-sized avatar

Justin Fagnani justinfagnani

941 followers · 0 following
View GitHub Profile
@justinfagnani
justinfagnani / slot-controller.ts
Created March 31, 2022 22:33
SlotController
import type {ReactiveController, ReactiveControllerHost} from 'lit';
/**
* A reactive controller that updates a host when slotted content changes and
* provides helper methods for checking and getting assigned slot content.
*/
export class SlotController implements ReactiveController {
private _host: ReactiveControllerHost & Element;
private _slotNames?: ReadonlyArray<string>;
@justinfagnani
justinfagnani / apollo-controller-connected-event.ts
Created April 26, 2021 01:24
Apollo Controllers
import {ApolloClient, NormalizedCacheObject} from '@apollo/client/core';
/**
* Fired when an Apollo controller is connected to the document tree via its
* host. Listeners should supply an Apollo client by setting the `client`
* property on the event.
*/
export class ApolloControllerConnectedEvent extends Event {
static readonly eventName = 'apollo-controller-connected';
@justinfagnani
justinfagnani / example.ts
Created March 4, 2020 22:16
Observable LitElement
class ExampleElement extends ObservableLitElement {
@property()
src: string;
@observe('src')
protected async _onSrcChange() {
// fetch the new URL...
}
}
@justinfagnani
justinfagnani / README.md
Last active February 8, 2020 05:38

This is a reproduction for https://bugs.chromium.org/p/chromium/issues/detail?id=1050221

To reproduce:

  1. Download gist
  2. run npm i
  3. run npm start

Chrome will start, cycle through some async tasks, and print the duration to the document and the terminal running node. On my laptop it takes ~500ms.

Next, run npm start again, bug switch back to the terminal as soon as Chrome launches. There should be enough time to put Chrome in the background before the task completes. The tasks should either never start or never complete. If you put Chrome in the foreground, the tasks will finish quickly.

@justinfagnani
justinfagnani / index.html
Created December 14, 2019 04:02 — forked from jridgewell/index.html
Creating an TreeWalker, DOM element, and setting a walker's currentNode #jsbench #jsperf (https://jsbench.github.io/#26a49a6033a8a5de00d00e05bf2cb275) #jsbench #jsperf
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Creating an TreeWalker, DOM element, and setting a walker's currentNode #jsbench #jsperf</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
@justinfagnani
justinfagnani / index.html
Last active September 5, 2019 17:31 — forked from jridgewell/index.html
Directive Implementations (https://jsbench.github.io/#4f3d62eb97bd1c992a5257d34fcebea0) #jsbench #jsperf
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Directive Implementations</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
@justinfagnani
justinfagnani / lottie-player.ts
Created June 6, 2019 18:19
<lottie-player>
import lottie from './lib/lottie-import.js';
export class LottiePlayerElement extends HTMLElement {
get src(): string | null {
return this.getAttribute('src');
}
set src(v: string | null) {
if (v == null) {
@justinfagnani
justinfagnani / index.html
Last active January 2, 2019 22:41 — forked from jridgewell/index.html
Text data vs nodeValue #jsbench #jsperf (http://jsbench.github.io/#b962f11b0802e9be42b4b0a660520727) #jsbench #jsperf
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Text data vs nodeValue #jsbench #jsperf</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
@justinfagnani
justinfagnani / example.js
Last active October 28, 2018 06:23
the-platform with the platform
import {LitElement, html} from 'lit-element';
import {UseWindowSize} from './useWindowSize.js';
class extends UseWindowSize()(LitElement) {
render() {
return html`
<p>
width: ${window.innerWidth}
height: ${window.innerHeight}
</p>
@justinfagnani
justinfagnani / preemptible-js.md
Created October 18, 2018 19:57
Preemptible JavaScript Functions

Preemptible JavaScript Functions

Can we allow JS functions to opt-in to be prempted?

Synchronous

An expensive synchronous function will jank the UI:

function expensive() {}