Last active
August 3, 2020 15:00
-
-
Save kenwebb/6fcaeb5ce9791594ec4fea999b874d2b to your computer and use it in GitHub Desktop.
Xholon and JSX
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?xml version="1.0" encoding="UTF-8"?> | |
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Mon Aug 03 2020 11:00:36 GMT-0400 (Eastern Daylight Time)--> | |
<XholonWorkbook> | |
<Notes><![CDATA[ | |
Xholon | |
------ | |
Title: Xholon and JSX | |
Description: | |
Url: http://www.primordion.com/Xholon/gwt/ | |
InternalName: 6fcaeb5ce9791594ec4fea999b874d2b | |
Keywords: | |
My Notes | |
-------- | |
August 3, 2020 | |
Be able to specify parts of a Xholon app using JSX. | |
TODO | |
---- | |
- try acorn and acorn-jsx | |
References | |
---------- | |
() https://en.wikipedia.org/wiki/React_(web_framework)#JSX | |
JSX, or JavaScript XML, is an extension to the JavaScript language syntax. | |
Similar in appearance to HTML, JSX provides a way to structure component rendering using syntax familiar to many developers. | |
React components are typically written using JSX, although they do not have to be (components may also be written in pure JavaScript). | |
JSX is similar to another extension syntax created by Facebook for PHP called XHP. | |
An example of JSX code: | |
class App extends React.Component { | |
render() { | |
return ( | |
<div> | |
<p>Header</p> | |
<p>Content</p> | |
<p>Footer</p> | |
</div> | |
); | |
} | |
} | |
Nested elements | |
Multiple elements on the same level need to be wrapped in a single container element such as the <div> element shown above, or returned as an array. | |
Attributes | |
JSX provides a range of element attributes designed to mirror those provided by HTML. Custom attributes can also be passed to the component.[22] All attributes will be received by the component as props. | |
JavaScript expressions | |
JavaScript expressions (but not statements) can be used inside JSX with curly brackets {}: | |
<h1>{10+1}</h1> | |
The example above will render | |
<h1>11</h1> | |
Conditional statements | |
If–else statements cannot be used inside JSX but conditional expressions can be used instead. | |
The example below will render { i === 1 ? 'true' : 'false' } as the string 'true' because i is equal to 1. | |
class App extends React.Component { | |
render() { | |
const i = 1; | |
return ( | |
<div> | |
<h1>{ i === 1 ? 'true' : 'false' }</h1> | |
</div> | |
); | |
} | |
} | |
The above will render: | |
<div> | |
<h1>true</h1> | |
</div> | |
Functions and JSX can be used in conditionals: | |
class App extends React.Component { | |
render() { | |
const sections = [1, 2, 3]; | |
return ( | |
<div> | |
{sections.length > 0 && sections.map(n => ( | |
/* 'key' is used by react to keep track of list items and their changes */ | |
/* Each 'key' must be unique */ | |
<div key={"section-" + n}>Section {n}</div> | |
))} | |
</div> | |
); | |
} | |
} | |
The above will render: | |
<div> | |
<div>Section 1</div> | |
<div>Section 2</div> | |
<div>Section 3</div> | |
</div> | |
Code written in JSX requires conversion with a tool such as Babel before it can be understood by web browsers. | |
This processing is generally performed during a software build process before the application is deployed. | |
() https://github.com/facebook/jsx | |
DRAFT: JSX Specification | |
JSX is an XML-like syntax extension to ECMAScript without any defined semantics. | |
It's NOT intended to be implemented by engines or browsers. | |
It's NOT a proposal to incorporate JSX into the ECMAScript spec itself. | |
It's intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript. | |
Rationale | |
The purpose of this specification is to define a concise and familiar syntax for defining tree structures with attributes. | |
A generic but well defined syntax enables a community of independent parsers and syntax highlighters to conform to a single specification. | |
This specification does not attempt to comply with any XML or HTML specification. | |
JSX is designed as an ECMAScript feature and the similarity to XML is only for familiarity. | |
Parser Implementations | |
acorn-jsx: A fork of acorn. | |
esprima-fb: A fork of esprima. | |
jsx-reader: A sweet.js macro. | |
Transpilers | |
These are a set of transpilers that all conform to the JSX syntax but use different semantics on the output: | |
React JSX: Create ReactElements using JSX. | |
jsx-transform: Configurable implementation of JSX decoupled from React. | |
Babel: An ES2015 and beyond to ES of now transpiler with JSX support. | |
Bublé: Another ES2015 and beyond to ES of now transpiler with JSX support. | |
NOTE: A conforming transpiler may choose to use a subset of the JSX syntax. | |
() https://reactjs.org/docs/introducing-jsx.html | |
Introducing JSX | |
() https://reactjs.org/docs/jsx-in-depth.html | |
JSX In Depth | |
good info | |
() https://github.com/acornjs/acorn/ | |
Marijn Haverbeke, marijnh, Independent open-source programmer person, Berlin | |
This repository holds three packages: | |
acorn: The main parser | |
acorn-loose: The error-tolerant parser | |
acorn-walk: The syntax tree walker | |
) https://github.com/acornjs/acorn/tree/master/acorn | |
A tiny, fast JavaScript parser, written completely in JavaScript. | |
) https://github.com/acornjs/acorn/tree/master/acorn-walk | |
An abstract syntax tree walker for the ESTree format. | |
() https://github.com/RReverser/acorn-jsx | |
forwards to acornjs/acorn-jsx | |
() https://github.com/acornjs/acorn-jsx | |
Alternative, faster React.js JSX parser | |
This is plugin for Acorn - a tiny, fast JavaScript parser, written completely in JavaScript. | |
It was created as an experimental alternative, faster React.js JSX parser. Later, it replaced the official parser and these days is used by many prominent development tools. | |
() https://github.com/acornjs/acorn-jsx/releases/tag/5.2.0 | |
Release 5.2.0 | |
@RReverser RReverser released this on Feb 26 | |
https://github.com/acornjs/acorn-jsx/archive/5.2.0.tar.gz | |
unzipped to ~/nodespace/acorn-jsx-5.2.0 | |
() https://github.com/facebook/esprima | |
) https://github.com/facebookarchive/esprima | |
This project is not actively maintained. Proceed at your own risk! | |
() https://github.com/jquery/esprima | |
the original esprima | |
() https://github.com/jlongster/jsx-reader | |
A reader to hook in JSX syntax to JavaScript, using sweet.js. | |
6 years old | |
() http://facebook.github.io/react/docs/jsx-in-depth.html | |
() https://github.com/alexmingoia/jsx-transform | |
JSX transpiler. A standard and configurable implementation of JSX decoupled from React. | |
out of date | |
() http://babeljs.io/ | |
() http://buble.surge.sh/ | |
) http://buble.surge.sh/guide/#jsx | |
Bublé is an ES2015+ compiler. It takes your ES2015/16 JavaScript code and turns it into code that can run in today's environments, including old versions of Node.js and Internet Explorer. | |
() https://github.com/estree/estree | |
The ESTree Spec | |
Once upon a time, an unsuspecting Mozilla engineer created an API in Firefox that exposed the SpiderMonkey engine's JavaScript parser as a JavaScript API. | |
Said engineer documented the format it produced, and this format caught on as a lingua franca for tools that manipulate JavaScript source code. | |
Meanwhile JavaScript is evolving. | |
This site will serve as a community standard for people involved in building and using these tools to help evolve this format to keep up with the evolution of the JavaScript language. | |
() https://github.com/estree/estree/blob/master/es5.md | |
This document specifies the core ESTree AST node types that support the ES5 grammar. | |
() https://www.sweetjs.org/ | |
Build your dream language | |
Sweet brings the hygienic macros of languages like Scheme and Rust to JavaScript. | |
Macros allow you to sweeten the syntax of JavaScript and craft the language you always wanted. | |
]]></Notes> | |
<_-.XholonClass> | |
<!-- domain objects --> | |
<PhysicalSystem/> | |
<Block/> | |
<Brick/> | |
<!-- quantities --> | |
<Height superClass="Quantity"/> | |
</_-.XholonClass> | |
<xholonClassDetails> | |
<Block> | |
<port name="height" connector="Height"/> | |
</Block> | |
</xholonClassDetails> | |
<PhysicalSystem> | |
<Block> | |
<Height>0.1 m</Height> | |
</Block> | |
<Brick multiplicity="2"/> | |
</PhysicalSystem> | |
<Blockbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[ | |
var a = 123; | |
var b = 456; | |
var c = a * b; | |
if (console) { | |
console.log(c); | |
} | |
//# sourceURL=Blockbehavior.js | |
]]></Blockbehavior> | |
<Heightbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[ | |
var myHeight, testing; | |
var beh = { | |
postConfigure: function() { | |
testing = Math.floor(Math.random() * 10); | |
myHeight = this.cnode.parent(); | |
}, | |
act: function() { | |
myHeight.println(this.toString()); | |
}, | |
toString: function() { | |
return "testing:" + testing; | |
} | |
} | |
//# sourceURL=Heightbehavior.js | |
]]></Heightbehavior> | |
<Brickbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[ | |
$wnd.xh.Brickbehavior = function Brickbehavior() {} | |
$wnd.xh.Brickbehavior.prototype.postConfigure = function() { | |
this.brick = this.cnode.parent(); | |
this.iam = " red brick"; | |
}; | |
$wnd.xh.Brickbehavior.prototype.act = function() { | |
this.brick.println("I am a" + this.iam); | |
}; | |
//# sourceURL=Brickbehavior.js | |
]]></Brickbehavior> | |
<Brickbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[ | |
console.log("I'm another brick behavior"); | |
]]></Brickbehavior> | |
<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml, | |
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg"> | |
<g> | |
<title>Block</title> | |
<rect id="PhysicalSystem/Block" fill="#98FB98" height="50" width="50" x="25" y="0"/> | |
<g> | |
<title>Height</title> | |
<rect id="PhysicalSystem/Block/Height" fill="#6AB06A" height="50" width="10" x="80" y="0"/> | |
</g> | |
</g> | |
</svg> | |
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient> | |
</XholonWorkbook> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment