Jason Miller developit

## *babel-plugin-transform-mui-imports.md

      
              3 files
            
          
              1 fork
            
          
              3 comments
            
          
              12 stars
            
          
                developit
                / *babel-plugin-transform-mui-imports.md
            
            
              Last active Jan 24, 2020
            
          
      View *babel-plugin-transform-mui-imports.md
  
    
  babel-plugin-transform-mui-imports
  

A plugin to make authoring with MUI components efficient, both for humans and bundlers.
Here's why:


## 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 -->

## *finally-polyfill.md

      
              4 files
            
          
              1 fork
            
          
              0 comments
            
          
              28 stars
            
          
                developit
                / *finally-polyfill.md
            
            
              Last active Jan 24, 2020
            
          
      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

  
## 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))
}

## *comlinkage.md

      
              2 files
            
          
              0 forks
            
          
              0 comments
            
          
              6 stars
            
          
                developit
                / *comlinkage.md
            
            
              Last active Dec 21, 2019
            
          
      View *comlinkage.md
  
    
    comlinkage
Dynamic import, but where the module you import runs in a different thread.
Powered by Comlink and Module Workers.
Available via unpkg: https://unpkg.com/comlinkage
Usage

  
## *module-worker-polyfill.md

      
              4 files
            
          
              0 forks
            
          
              0 comments
            
          
              1 star
            
          
                developit
                / *module-worker-polyfill.md
            
            
              Last active Dec 21, 2019
            
          
      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.

  
## index.js
import './style';
import { Component } from 'preact';

export default class App extends Component {
	render() {
		return (
			<div>
				<h1>Hello, World!</h1>
			</div>
		);

## 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'));

## 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] }
  });
}

## *babel-plugin-dynamic-import-polyfill.md

      
              2 files
            
          
              0 forks
            
          
              0 comments
            
          
              8 stars
            
          
                developit
                / *babel-plugin-dynamic-import-polyfill.md
            
            
              Created Nov 12, 2019
            
              
                babel-plugin-dynamic-import-polyfill
              
          
      View *babel-plugin-dynamic-import-polyfill.md
  
    
    Polyfill dynamic import() in all ES Modules-supporting browsers.
Drop this polyfill into your page:
https://github.com/GoogleChromeLabs/dynamic-import-polyfill
... then add the Babel transform:
import dynamicImportPolyfill from 'dynamic-import-polyfill';