Skip to content

Instantly share code, notes, and snippets.

🦊
write, the codes

Jason Miller developit

🦊
write, the codes
Block or report user

Report or block developit

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View *babel-plugin-transform-mui-imports.md

babel-plugin-transform-mui-imports npm

A plugin to make authoring with MUI components efficient, both for humans and bundlers.

Here's why:

@developit
developit / material-ui-jsdelivr-cdn.htm
Created Jan 22, 2020 — forked from tomByrer/material-ui-jsdelivr-cdn.htm
React-MUI using jsDelivr CDN for in-browser hydration.
View material-ui-jsdelivr-cdn.htm
<!DOCTYPE html>
<html lang="en">
<head>
<title>My page</title>
<meta charset="utf-8" />
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
<script src="https://cdn.jsdelivr.net/combine/npm/react@16.12/umd/react.development.js,npm/react-dom@16.12/umd/react-dom.development.js,npm/@material-ui/core@4.8/umd/material-ui.development.js,npm/@babel/standalone@7.8/babel.min.js" crossorigin="anonymous"></script>
<!-- Seperate Links
src: https://github.com/mui-org/material-ui/blob/master/examples/cdn/index.html -->
View *finally-polyfill.md

finally-polyfill

A tiny ~150-byte polyfill for Promise.prototype.finally.

Useful for browsers that support Promise but not the .finally() method.

Usage

npm install finally-polyfill

View comlinkage.node.js
import { wrap, expose } from 'https://unpkg.com/comlink@4.2.0/dist/esm/comlink.mjs';
export default name => wrap(new Worker(import.meta.url, { env:{name}, type:'module' }));
if (process.env.name && !self.document) {
const q = []; onmessage = q.push.bind(q);
import(process.env.name).then(expose).then(() => onmessage = q.map(dispatchEvent))
}
View *comlinkage.md
View *module-worker-polyfill.md

Module Worker polyfill for Chrome 61+

Chrome 61+ supports dynamic import() within Classic Workers. We can use this to polyfill Module Workers to a reasonable degree of accuracy.

The only trick is that we need to queue up any messages received while we wait for the module tree to load in the Worker, since Module Workers load the entire dependency graph before flushing messages queued during Worker instantiation.

This polyfill comes in two versions:

module-workers-polyfill-inline.js is a single-file polyfill, but creates Workers with an Opaque Origin. If you're only loading dependencies from absolute URLs and not relying on storage like IndexedDB, this option is fine.

View index.js
import './style';
import { Component } from 'preact';
export default class App extends Component {
render() {
return (
<div>
<h1>Hello, World!</h1>
</div>
);
View url-route.js
import regexparam from 'https://unpkg.com/regexparam@1/dist/regexparam.mjs';
/**
* <url-route href="/profile/:user">
* <div>some content here</div>
* </url-route>
*/
customElements.define('url-route', class UrlRoute extends HTMLElement {
connectedCallback() {
this.route = regexparam(this.getAttribute('href'));
@developit
developit / esmodules-polyfill.js
Last active Jan 23, 2020
polyfill ES2018 standard library stuff for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)
View esmodules-polyfill.js
if (!('trimStart' in String.prototype)) String.prototype.trimStart = String.prototype.trimLeft;
if (!('trimEnd' in String.prototype)) String.prototype.trimEnd = String.prototype.trimRight;
if (!('forEach' in NodeList.prototype)) NodeList.prototype.forEach = [].forEach;
if (!('description' in Symbol.prototype)) {
Object.defineProperty(Symbol.prototype, 'description', {
get() { return /\((.+)\)/.exec(this)[1] }
});
}
@developit
developit / *babel-plugin-dynamic-import-polyfill.md
Created Nov 12, 2019
babel-plugin-dynamic-import-polyfill
View *babel-plugin-dynamic-import-polyfill.md
You can’t perform that action at this time.