lalunamel

How does React's act work?

tl;dr: It wraps some work you'd like to do and waits for that work to complete before returning

Why do I get this error?

An update to Component inside a test was not wrapped in act(...).

tl;dr: A React component is updating (probably as a result of changing state, props, or hooks) but that update is not happening inside of something wrapped in act.

• Implemented in ReactFiberWorkLoop
• That error is produced when running react in a test environment (not sure how it knows this tbh) and actQueue is null (actQueue is set when act is called)

axelbdt

How to Install asdf with Nix Home-manager

1. First, add asdf to the Nix configuration with the package named asdf-vm. Add the following line to your configuration.nix file:

   environment.systemPackages = with pkgs; [
     asdf-vm
   ];

cferdinandi

// Core assets
let coreAssets = [];

// On install, cache core assets
self.addEventListener('install', function (event) {

	// Cache core assets
	event.waitUntil(caches.open('app').then(function (cache) {
		for (let asset of coreAssets) {
			cache.add(new Request(asset));

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.

ibare

import { createStore, actionCreator } from "./redux-middleware";

function reducer(state = {}, { type, payload }) {
  switch (type) {
    case "init":
      return {
        ...state,
        count: payload.count
      };
    case "inc":

ibare

import { createStore, actionCreator } from "./tiny-redux";

function reducer(state = {}, { type, payload }) {
  switch (type) {
    case "init":
      return {
        ...state,
        count: payload.count
      };
    case "inc":

brian-mcallister-lab49

It's not uncommon to have a React component that takes props where some of those props are mutually exclusive. Let's imagine a case where we have a Button component. We want our button to allow for the following possibilities:

1. The button has text.
2. The button has text and an icon.
3. The button has an icon, but no text.

An initial implementation might look like:

const Button = ({ text, icon }: { text?: string; icon?: string }) => {

zmts

Docker, TypeScript, Node.js

Preconditions:

• TS application listening port: 7777

|-- dist
|-- src
|-- .dockerignore
|-- Dockerfile

shilman

Storybook Docs w/ CRA & TypeScript

This is a quick-and-dirty walkthrough to set up a fresh project with Storybook Docs, Create React App, and TypeScript. If you're looking for a tutorial, please see Design Systems for Developers, which goes into much more depth but does not use Typescript.

The purpose of this walkthrough is a streamlined Typescript / Docs setup that works out of the box, since there are countless permutations and variables which can influence docs features, such as source code display, docgen, and props tables.

Step 1: Initialize CRA w/ TS

npx create-react-app cra-ts --template typescript

Tamal

$ git clone [email protected]:xxxxx/xxxx.git my-awesome-proj
Cloning into 'my-awesome-proj'...
ssh: connect to host github.com port 22: Connection timed out
fatal: Could not read from remote repository.

$ # This should also timeout
$ ssh -T [email protected]
ssh: connect to host github.com port 22: Connection timed out

$ # but this might work