Jonny Buchanan insin

ESM modules in node: npm edition

The proposal you’re about to read is not just a proposal. We have a working implementation of almost everything we discussed here. We encourage you to checkout and build our branch: our fork, with the relevant branch selected. Building and using the implementation will give you a better understanding of what using it as a developer is like.

Our implementation ended up differing from the proposal on some minor points. As our last action item before making a PR, we’re writing documentation on what we did. While I loathe pointing to tests in lieu of documentation, they will be helpful until we complete writing docs: the unit tests.

This repo also contains a bundled version of npm that has a new command, asset. You can read the documentation for and goals of that comma

3 Gripes With React

I started using React 3.5 years ago, and I still love it. It was such a well-designed solution that not much has changed since then, only superficial stuff like naming. What I learned then is still wholly applicable today because it's such a good idea (although now you can choose from many other libraries). On top of that, we now benefit from an entirely new architecture (fiber) without changing much.

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

[based on a true story]

So. Your friend's about to teach you how to make a website. Great!

You make a file, and you save it as 'index.html'. Why it's called 'index' isn't really explained to you, but whatever.

You type the following.

hello world

	import 'dart:math';

	import 'package:flutter/material.dart';

	class DotsIndicator extends AnimatedWidget {
	const DotsIndicator({
	@required this.controller,
	@required this.itemCount,
	@required this.onPageSelected,
	this.color = Colors.white,

	const babelOpts = {
	'presets': ['react', 'es2015', 'stage-0'],
	'plugins': ['syntax-dynamic-import'],
	};

	const config = {};

	config.module = {
	rules: [
	{

	import React, { PropTypes, Component } from 'react'
	import { getRef, listToArray } from '../utils/firebase'
	import { ErrorMessage, Loading } from '../Theme'

	/*

	```js
	<Ref path="/somewhere">
	{({ error, loaded, value }) => (
	// `value` is an object w/ keys

	<SyncStore loader={TeamLoader} loadingComponent={Loading}>
	<TeamReaderApp>
	<Match exactly pattern="/" component={LinksIndex} />
	<Match pattern='/links' component={LinksIndex} />
	<Match pattern='/link/new' component={LinkNew} />
	<Match pattern='/link/:id/edit' component={LinkEdit} />

	<Match pattern='/categories' component={CategoriesIndex} />
	<Match pattern='/category/new' component={CategoryNew} />
	<Match pattern='/category/:id/edit' component={CategoryEdit} />

	/* @flow */

	import React from 'react';

	import { pure } from 'recompose';

	import styles from './Clock.css';

	type props = {
	time: string,

	// webcrack, a script that allows you to break webpack.js's sandbox and randomization easily
	// made by @yourcompanionAI
	// licensed under the trust that you will credit me for my work visibly and other than that you can go have fun with this

	// window.wc is the webcrack object
	// wc.get gives you the module attached to the id you give it.
	// literally just what webpack functions use. not much to it
	// this is the basic part of all this, everything else is just to allow you to updateproof your code

	// both find functions return modules in this format: