The ESM standard is considered stable in NodeJS and well supported by a lot of modern JavaScript tools.
ESLint does a good job validating and fixing ESM code (as long as you don't use top-level await, coming in ESLint v8). Make sure to enable the latest ECMA features in the ESLint config.
{
| /* | |
| Copy this into the console of any web page that is interactive and doesn't | |
| do hard reloads. You will hear your DOM changes as different pitches of | |
| audio. | |
| I have found this interesting for debugging, but also fun to hear web pages | |
| render like UIs do in movies. | |
| */ | |
| const audioCtx = new (window.AudioContext || window.webkitAudioContext)() |
This gist will no longer be updated as the changelog will be on the official website.
Converted via https://domchristie.github.io/turndown
This is an alternative to the Modern Script Loading tchnique, that doesn't need to wait for the load event.
This technique has been successfully tested down to IE9.
<!DOCTYPE html>
<html lang="en">
| const env = { | |
| m1: `import {func} from './m2.mjs'; console.log(func());`, | |
| m2: `export function func() { return 'abc'; }` | |
| }; | |
| const inlineModule = (env, text) => `data:text/javascript;base64,${ | |
| btoa(inlineModules(env, text)) | |
| }`; | |
| const inlineModules = (env, text) => text.replace( |
| import { | |
| Component, | |
| ChangeDetectionStrategy, | |
| ViewChild, | |
| ViewContainerRef, | |
| ComponentFactoryResolver, | |
| Injector, Input, OnChanges, | |
| SimpleChanges, EventEmitter, OnDestroy, Output, ChangeDetectorRef, OnInit | |
| } from '@angular/core'; | |
| import {takeUntil} from 'rxjs/operators'; |
| const obj = { a: { b: 1, c: 2, d: { e:4 , f:[1,2,3,4,5,6,7,8,9,0]} }, g:42 }; | |
| const res = Object.fromEntries(flatProps(objectRecursiveEntries(obj))); | |
| /* | |
| { | |
| "a.b": 1, | |
| "a.c": 2, | |
| "a.d.e": 4, | |
| "a.d.f.0": 1, | |
| "a.d.f.1": 2, |
This gist is a collection of common patterns I've personally used here and there with Custom Elements.
These patterns are all basic suggestions that could be improved, enriched, readapted, accordingly with your needs.
| // change 'agent' lines as appropriate | |
| pipeline { | |
| agent none | |
| stages { | |
| stage('Run CI?') { | |
| agent any | |
| steps { |