ChenYong chenyong

useSubscription and useMutableSource¹ tearing and deopt behavior.

Mounting a new tree

The tree below represents a React application mounting. During mount, two components read from an external, mutable source. The first one (List) reads version 1 of that data and the second one (Item) reads version 2.

Deopt

`useSubscription` (legacy mode)

N/A.

Note:

When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.

Javascript files from the examples folder (such as OrbitControls) are not CommonJS or ES Modules, but they can still be used in Webpack bundles:

In package.json:

"dependencies": {
	"three": "0.84.0",
	"webpack": "2.4.1"
}

How can we extend functionality in Clojure without modifying the orignal source?

Let's say we want to computer the area of some Shape types like Square and Circle

We have multiple shapes all of which have an area function

We may have some function called sum-areas that takes a list of Shape , calls area on each of them, and sums them up. We don't have access to the original source, but want the ability to add new shapes.

Using `<details>` in GitHub

Suppose you're opening an issue and there's a lot noisey logs that may be useful.

Rather than wrecking readability, wrap it in a <details> tag!

<details>
 Summary Goes Here

I really liked @tjvantoll article Handling Failed HTTP Responses With fetch(). The one thing I found annoying with it, though, is that response.statusText always returns the generic error message associated with the error code. Most APIs, however, will generally return some kind of useful, more human friendly message in the body.

Here's a modification that will capture this message. The key is that rather than throwing an error, you just throw the response and then process it in the catch block to extract the message in the body:

fetch("/api/foo")
  .then( response => {
    if (!response.ok) { throw response }
    return response.json()  //we only get here if there is no error
 })

Calling `alert` from WebAssembly (WASM)

This very simple and minimal tutorial documents in a few easy steps how to play with WebAssembly (WASM) and get first results within minutes.

While the code below is mostly useless, it will show, how to call the alert function from within a WASM file and thus demonstrate how to import and export DOM objects.

Of course, this exercise has no real use. It is just meant to show, that getting started with WASM isn't hard. And there is no need for a complex build-chain, tons of tools or a dedicated VMs. Just use a browser, one online tool and that's it.

And Now?

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

	import os, asyncnet, asyncdispatch


	proc callback1(): Future[int] =
	var retFuture = newFuture[int]("callback1")

	echo "Callback1: Waiting"
	sleep(3000)
	retFuture.complete(10)
	return retFuture

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Test App</title>
	</head>

	<style>
	html, body {
	height: 100%;