Skip to content

Commit

Permalink
Migrate to ecmarkup (#135)
Browse files Browse the repository at this point in the history
* Migrate to ecmarkup

This is the first step to revamp this repo: [ecmarkup](https://github.com/tc39/ecmarkup)
is TC39's official tool for specifying syntax and semantics for ECMAScript.
I proposed that we should adopt it because it has several favorabilities
than the current approach (`README.md` + a `gh-pages` website living in
the `websitescript` branch):
1. The resultant `index.html` has a similar looks and feels with the
   official ECMA-262 spec.
2. It uses [Grammarkdown](https://github.com/rbuckton/grammarkdown)
   which is not only convenient to write but more importantly, can
   enforce the grammar to be more formal.
3. It provides links to ECMA-262 out of the box (closed #112).
   Furthurmore, I can use `<ins>` to make "extension" points explicit.
4. It has single source of truth and prevent from syncing issue between the README and website (close The syntax in 
   website is missing JSXFragment as JSXChild #128)

One possible concern it that it'll make this too like a ECMAScript proposal,
but I think we mediated by opting-out from the "stage-N proposal"
heading, and by explicitly calling out our intention in the
"Introduction" section.

In addition,
- Link to JXON is updated since the original link no more existed.
- Parser and Transpiler section is dropped from the "spec" website.
- Facebook, Inc. is updated to Meta Platform, Inc everywhere.

Once this is merged, we can switch to `main` to host Github Pages.
  • Loading branch information
Huxpro authored Feb 24, 2022
1 parent d76bb1f commit 148bf2a
Show file tree
Hide file tree
Showing 5 changed files with 3,071 additions and 135 deletions.
43 changes: 43 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
# Logs
logs
*.log
npm-debug.log*

# Runtime data
pids
*.pid
*.seed

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules
jspm_packages

# Optional npm cache directory
.npm

# Optional REPL history
.node_repl_history

# Only apps should have lockfiles
yarn.lock
package-lock.json
npm-shrinkwrap.json
pnpm-lock.yaml
143 changes: 8 additions & 135 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
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.

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.

```jsx
// Using JSX to express UI components.
Expand All @@ -18,6 +19,11 @@ var dropdown =
render(dropdown);
```

[See grammar and spec text](https://facebook.github.io/jsx).




Rationale
---------

Expand All @@ -31,139 +37,6 @@ It is our intention to claim minimal syntactic real estate while keeping the syn

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.

Syntax
------

_JSX extends the PrimaryExpression in the [ECMAScript 6th Edition (ECMA-262)](https://www.ecma-international.org/ecma-262/8.0/index.html) grammar:_

PrimaryExpression :

- JSXElement
- JSXFragment

__Elements__

JSXElement :


- JSXSelfClosingElement

- JSXOpeningElement JSXChildren<sub>opt</sub> JSXClosingElement
(names of JSXOpeningElement and JSXClosingElement should match)

JSXSelfClosingElement :

- `<` JSXElementName JSXAttributes<sub>opt</sub> `/` `>`

JSXOpeningElement :

- `<` JSXElementName JSXAttributes<sub>opt</sub> `>`

JSXClosingElement :

- `<` `/` JSXElementName `>`

JSXFragment :

- `<` `>` JSXChildren<sub>opt</sub> `<` `/` `>`

JSXElementName :

- JSXIdentifier
- JSXNamespacedName
- JSXMemberExpression

JSXIdentifier :

- IdentifierStart
- JSXIdentifier IdentifierPart
- JSXIdentifier __NO WHITESPACE OR COMMENT__ `-`

JSXNamespacedName :

- JSXIdentifier `:` JSXIdentifier

JSXMemberExpression :

- JSXIdentifier `.` JSXIdentifier
- JSXMemberExpression `.` JSXIdentifier

__Attributes__

JSXAttributes :


- JSXSpreadAttribute JSXAttributes<sub>opt</sub>
- JSXAttribute JSXAttributes<sub>opt</sub>

JSXSpreadAttribute :

- `{` `...` AssignmentExpression `}`

JSXAttribute :


- JSXAttributeName JSXAttributeInitializer<sub>opt</sub>

JSXAttributeName :

- JSXIdentifier
- JSXNamespacedName

JSXAttributeInitializer :


- `=` JSXAttributeValue

JSXAttributeValue :


- `"` JSXDoubleStringCharacters<sub>opt</sub> `"`
- `'` JSXSingleStringCharacters<sub>opt</sub> `'`
- `{` AssignmentExpression `}`
- JSXElement
- JSXFragment

JSXDoubleStringCharacters :


- JSXDoubleStringCharacter JSXDoubleStringCharacters<sub>opt</sub>

JSXDoubleStringCharacter :


- SourceCharacter __but not `"`__

JSXSingleStringCharacters :


- JSXSingleStringCharacter JSXSingleStringCharacters<sub>opt</sub>

JSXSingleStringCharacter :


- SourceCharacter __but not `'`__

__Children__

JSXChildren :


- JSXChild JSXChildren<sub>opt</sub>

JSXChild :

- JSXText
- JSXElement
- JSXFragment
- `{` JSXChildExpression<sub>opt</sub> `}`

JSXText :

- JSXTextCharacter JSXText<sub>opt</sub>

JSXTextCharacter :

- SourceCharacter __but not one of `{`, `<`, `>` or `}`__

JSXChildExpression :

- AssignmentExpression
- `...` AssignmentExpression

__Whitespace and Comments__

_JSX uses the same punctuators and braces as ECMAScript. WhiteSpace, LineTerminators and Comments are generally allowed between any punctuators._

Parser Implementations
----------------------

Expand Down Expand Up @@ -255,7 +128,7 @@ The JSX syntax is similar to the [E4X Specification (ECMA-357)](http://www.ecma-
License
-------

Copyright (c) 2014 - present, Facebook, Inc.
Copyright (c) 2014 - present, Meta Platform, Inc.
All rights reserved.

This work is licensed under a [Creative Commons Attribution 4.0
Expand Down
Loading

0 comments on commit 148bf2a

Please sign in to comment.