sindresorhus

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

1. Use ESM yourself. (preferred)
   Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
3. Stay on the existing version of the package until you can move to ESM.

jamiebuilds

assert() (sometimes called invariant())

Instead of checks like:

if (value === null) {
  throw new Error("missing value")
}
doSomethingThatNeedsValue(value)

mjackson

import React from "react";

export type ColorScheme = "light" | "dark";

export default function useColorSchemePreference(
  defaultColorScheme: ColorScheme = "light"
) {
  let darkQuery = "(prefers-color-scheme: dark)";
  let [colorScheme, setColorScheme] = React.useState<ColorScheme>(
    typeof window === "object" && window.matchMedia

jordansinger

import SwiftUI
import PlaygroundSupport

struct iPod: View {
    var body: some View {
        VStack(spacing: 40) {
            Screen()
            ClickWheel()
            Spacer()
        }

acdlite

Demo: Coordinating async React with non-React views

tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.

A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.

But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.

How do we solve this with React?

jaredpalmer

import React from 'react';

class ReducerComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  reducer = (state, action) => state;

  dispatch = action => this.setState(state => this.reducer(state, action));

whmountains

const SW_PRECACHE_CONFIG = './sw-precache-config'
const OUT_FILE = 'build/precache.appcache'

const glob = require('globby')
const { staticFileGlobs, stripPrefix } = require(SW_PRECACHE_CONFIG)
const fs = require('fs')
const path = require('path')

glob(staticFileGlobs).then(files => {
  // filter out directories

developit

tracked

@tracked is a decorator for Preact that makes working with state values no different than properties on your component instance.

It's one 300 byte function that creates a getter/setter alias into state/setState() for a given key, with an optional initial value. The "magic" here is simply that it works as a property decorator rather than a function, so it appears to integrate directly into the language.

tracked has no dependencies and works with any component implementation that uses this.state and this.setState().

Installation

tamlyn

Execution order of Jest/Jasmine test code

While tests run in source order, surrounding code does not which can lead to hard to debug issues.

Compare the test file below with the sample output below that and note the order of the log messages.

Key points

• Any code not inside of it, beforeAll, afterAll, beforeEach or afterEach runs immediately on initialisation.
• This means code at the end of your file runs before even your before hooks.

ryanflorence

import React from 'react'
import Router from 'react-router/BrowserRouter'
import Match from 'react-router/Match'
import Link from 'react-router/Link'
import Redirect from 'react-router/Redirect'

function elementInViewport(el) {
  var top = el.offsetTop
  var left = el.offsetLeft
  var width = el.offsetWidth