trys

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 *
 */

import stylex from '@stylexjs/stylex';

gaearon

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

paulmillr

Fun parts of developing noble-hashes and scure-base

• Base58 is quadratic (O(n^2)). Basically you can’t encode 1MB of data with it. This has been found with our DoS tests, which we employ for scure-base and noble-hashes. See README for more details
• Hashes are additionally tested against huge multi-gig inputs, scrypt/pbkdf2 are tested against all possible combination of options. They take 2 hours to run on a decent machine
• Hashes are actually faster than many wasm alternatives. A single sha256 hashing of 32 bytes of data takes 888 nanoseconds on mac with M1
• The last fact is extremely remarkable, because we do not employ loop unrolls in the code. A loop unroll is when you’re writing code which could have been executed in loop like for (let step = 0; step < 64), but instead, you’re writing every iteration step-by-step. Which incr

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.

slikts

Why using the children prop makes React.memo() not work

I've recently ran into a pitfall of [React.memo()][memo] that seems generally overlooked; skimming over the top results in Google just finds it mentioned in passing in a [React issue][regit], but not in the [FAQ] or API [overview][react-api], and not in the articles that set out to explain React.memo() (at least the ones I looked at). The issue is specifically that nesting children defeats memoization, unless the children are just plain text. To give a simplified code example:

const Memoized = React.memo(({ children }) => (<div>{children}</div>));
// Won't ever re-render
<Memoized>bar</Memoized>
// Will re-render every time; the memoization does nothing

OliverJAsh

Option vs non-Option

	Option<T>	non-Option (T | undefined)
accessing property	userOption.map(user => user.age)	userNullish?.age
calling a method	userOption.map(user => user.fn())	userNullish?.fn()
providing fallback	ageOption.getOrElse(0)	ageNullish ?? 0
filter	ageOption.filter(checkIsOddNumber)	`ageNull

ruizb

The following section is not part of monet.js documentation, but I think it's worth showing how we can compose readers using fp-ts.

Reader composition

Let's say we have the following piece of code:

interface Dependencies {
  logger: { log: (message: string) => void }
 env: 'development' | 'production'

rosskevin

// @flow

declare module 'react-relay' {
  declare export type RecordState = 'EXISTENT' | 'NONEXISTENT' | 'UNKNOWN';

  declare export type onCompleted = (response: ?Object, errors: ?Array<PayloadError>) => void
  declare export type onError = (error: Error) => void

  declare export type CommitOptions = {
    onCompleted: onCompleted,

tomkis

import { createStore, applyMiddleware } from 'redux';
import { Observable, Subject } from 'rxjs';

const api = type => {
  console.log(`calling API ${type}`);
  return new Promise(res => setTimeout(() => res(), 500));
};

const actionOrder = (actions, order) => actions.every((action, index) => action.type === order[index]);
const actionPredicate = actions => filterableAction => actions.some(action => action === filterableAction.type);

fson

This is a proposal for a lightning talk at the Reactive 2015 conference.

NOTE: If you like this, star ⭐ the Gist - the amount of stars decides whether it makes the cut!

Rapid prototyping with Relay

Relay makes data fetching in React apps simpler, by letting you declare the data needs of your components instead of writing complex imperative code. React, Relay, GraphQL and the other complementary tools are changing how apps are built.