Charles Pick phpnode

## esx.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                phpnode
                / esx.md
            
            
              Created
              November 8, 2022 12:53
                — forked from WebReflection/esx.md
            
              
                Proposal: an ESX for JS implementation
              
          
    About

In a quest to explore improvements over common JSX transformers I have managed to find great performance able to compete with template literal based libraries.
In this document I would like to describe, via JS itself, and as PoC, how JSX could be both rebranded as ESX and improved.
Goal

Differently from E4X, but also differently from JSX, this proposal leaves developers provide their own "render" implementation, freeing ESX usage from any previous attempt to confine JSX or E4X into the DOM world, where it's been proven, in the JSX case, it's not really where it belongs, as it can be used as neutral DSL.

  
## machine.js

 function createApprovalMachine(context) {
    return Machine({
        id: 'approval',
        initial: 'initializing',
        context,
        states: {
            initializing: {
                on: {
                    '': [

## match.js

const invalidMatchSignal = new Error();

function makeProxyThrower(input) {
  return new Proxy(input, {
    get(target, prop, receiver) {
      if (prop in target) {
        const result = Reflect.get(target, prop, receiver);
        if (typeof result === "object" && result !== null) {
          return makeProxyThrower(result);

## demo.js
// @flow

const proxyCache = new WeakMap();
const extensionMethods = new WeakMap();

function extended<T>(instance: T): $Supertype<T> {
  if (isPrimitive(instance)) {
    return instance;
  }
  const existingProxy = proxyCache.get(instance);

## constraints.js
// paste me into https://codemix.github.io/flow-runtime/#/try
// (no gist support yet :( )

import t, {reify} from 'flow-runtime';

type ValidURL = string;

(reify: ValidURL).addConstraint(url => {
  if (/^(.|\/)/.test(url)) {
     return "Don't use relative URLs for some reason";

## somefile.js
type Linkable = {
  name: string,
  profileURL: string
};

function bigOldObject () {
  return {
    id: 1,
    name: 'foo',
    email: 'foo@bar.com',

## react.js
// This is how the world looks at the moment

import {render} from 'react-dom';

render(
  <Router>
    <Route path="/" component={HomeScreen} />
  </Router>,
  document.getElementById('root')
);

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Untitled benchmark</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
</head>
<body>
	<h1>Open the console to view the results</h1>

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Array#forEach</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
</head>
<body>
	<h1>Open the console to view the results</h1>

## input.js
function demo (input: Array<number>): Array<number> {
  return function blah () {
    return function foo () {
      return input.map(item => item + 1).map(item => item + 2);
    };
  };
}

	function createApprovalMachine(context) {
	return Machine({
	id: 'approval',
	initial: 'initializing',
	context,
	states: {
	initializing: {
	on: {
	'': [

	const invalidMatchSignal = new Error();

	function makeProxyThrower(input) {
	return new Proxy(input, {
	get(target, prop, receiver) {
	if (prop in target) {
	const result = Reflect.get(target, prop, receiver);
	if (typeof result === "object" && result !== null) {
	return makeProxyThrower(result);
	// @flow

	const proxyCache = new WeakMap();
	const extensionMethods = new WeakMap();

	function extended<T>(instance: T): $Supertype<T> {
	if (isPrimitive(instance)) {
	return instance;
	}
	const existingProxy = proxyCache.get(instance);
	// paste me into https://codemix.github.io/flow-runtime/#/try
	// (no gist support yet :( )

	import t, {reify} from 'flow-runtime';

	type ValidURL = string;

	(reify: ValidURL).addConstraint(url => {
	if (/^(.\|\/)/.test(url)) {
	return "Don't use relative URLs for some reason";
	type Linkable = {
	name: string,
	profileURL: string
	};

	function bigOldObject () {
	return {
	id: 1,
	name: 'foo',
	email: 'foo@bar.com',
	// This is how the world looks at the moment

	import {render} from 'react-dom';

	render(
	<Router>
	<Route path="/" component={HomeScreen} />
	</Router>,
	document.getElementById('root')
	);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>Untitled benchmark</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
	</head>
	<body>
	<h1>Open the console to view the results</h1>
	function demo (input: Array<number>): Array<number> {
	return function blah () {
	return function foo () {
	return input.map(item => item + 1).map(item => item + 2);
	};
	};
	}