developit

/** Converts destructured parameters with default values to non-shorthand syntax, fixing Edge 16 & 17. */
module.exports = (babel, options = {}) => {
  const { types: t } = babel;
  
  const isArrowParent = p => p.parentKey=='params' && p.parentPath && p.parentPath.isArrowFunctionExpression();

  return {
    name: "transform-edge-default-parameters",
    visitor: {
      AssignmentPattern(path) {

developit

export default code => code.replace(/(?:[\s\t]+\/\*[\s\S]*?\*\/[\s\t]*|\s*(\n)\s*\/\/.*(?:\n\s*\/\/.*)*)/g, '$1')

developit

# scaffold your project
npx preact-cli@rc create default my-app && cd my-app
# upgrade to Preact X
npm i -D preact-cli@rc && npm i preact@next preact-router@next

developit

const IS_SERVER = typeof window === 'undefined';

export function RenderOnServer(props) {
  return IS_SERVER ? props.children : null;
}

export function RenderOnClient(props) {
  return IS_SERVER ? null : return props.children;
}

developit

{
  "name": "preact-string-styles",
  "main": "preact-string-styles.js",
  "module": "preact-string-styles.js",
  "version": "0.1.0",
  "homepage": "https://gist.github.com/developit/d55dc3c47dd1fe81d84f5ee0ab5bfc58"
}

developit

module.exports = (babel, options = {}) => {
  const { types: t } = babel;
  
  return {
    name: "optimize-tagged-templates",
    visitor: {
      TemplateLiteral(path) {
        for (let i=0; i<path.node.expressions.length; i++) {
          const expr = path.node.expressions[i];
          let isLiteral = t.isStringLiteral(expr);

developit

import Link from 'next/link'
import { withRouter } from 'next/router'
import histore from 'histore'

const historyStore = histore();

const linkStyle = {
  marginRight: 10
}

developit

// import fetch from 'isomorphic-unfetch';

const RETRIES = 5;

/**
 * Example:
 *   global.fetch = fetchWithRetry;
 */

function fetchWithRetry(url, options) {

developit

'oncopy oncut onpaste onabort onblur oncancel onchange onclick onclose oncontextmenu ondblclick ondrag ondragend ondragenter ondragleave ondragover ondragstart ondrop ondurationchange onemptied onended onerror onfocus oninput oninvalid onkeydown onkeypress onkeyup onload onloadeddata onloadedmetadata onloadstart onmousedown onmouseenter onmouseleave onmousemove onmouseout onmouseover onmouseup onmousewheel onpause onprogress onreset onresize onscroll onselect onstalled onsubmit onsuspend ontoggle onwaiting onwheel onpointerdown onpointermove onpointerup onpointercancel onpointerover onpointerout onpointerenter onpointerleave onselectstart onselectionchange onbeforecopy onbeforecut onbeforepaste onsearch onfullscreenchange onfullscreenerror'
  .split(' ')
  .map(e => {
    Element.prototype[e] = null;
  });

developit

respond

this isn't a library, don't use this.

it's a 1.5kb react-ey thing but using HTML instead of VDOM. diffing done via a hacked up version of set-dom.

Important Counter Demo

// this is a standard react component, except render() returns an HTML string