lopatin / blt

A React IDE

blt

System Overview:

An editor that builds a representation the source AST of React JS program. At first, the editor only knows how to build the AST via built-in components that spit out source code which is compiled via Sweet.js. This also means that they can freely use built-in macros, when necessary.

Eventually, the editor will be able to build and use composite components. These are compositions of the built-ins and may not use macros, therefore they do not have the power to emit raw source code themselves.

Decorators (aka higher-order components) are the logic layer. Standard library includes helpers from recompose as well as some custom ones. As soon as

• Sweet.js macros custom written
• Internal components custom written which generate macro calls
  • Protects against Sweet.js compiler errors
• Public components may be composed of the internal ones

Old System Overview:

• UI that saves the source code of a language that compiles to React source code
• Core Babylon AST extensible via macros, a.k.a. AST transformations
• Compiles to both runtime JS classes and JSON, which compiles to JS code for deployment

Type system:

• A concrete type is something that the compiler has built in code for
• A type alias can always be traced to a concrete type
• AST nodes represented via immutable maps
• Root node of AST is always a Component

Validate props statically:

• Allow props to be unannotated
• Should correspond to/be compilable to PropTypes?
• Missing required prop
• Wrong type

Concrete types:

• TypeRef
• Union
• Any
• ComponentClass
• FunctionalComponent
• ReactElement
• Prop
• Decorator
• String
• Number
• Boolean
• Object
• Array
• Function
• Lambda
• DateTime
• NumberLiteral
• StringLiteral
• BooleanLiteral
• MapLiteral
• ListLiteral

Scope:

• Scopes are used during compilation to store references to built objects

Sample AST: { "_type": "Component", "name": "MyProject", "props": { "_type": "Map", "keyType": { "_type": "TypeRef", "value": "internal.String" }, "valType": { "_type": "TypeRef", "value": "internal.Prop" }, "properties": { "onChange": { "_type": "PropType", "value": { "_type": "TypeRef", "value": "some.package.CustomFuncType" }, "required": true } } }, "render": { "_type": "ReactElement", "elementType": { "_type": "TypeRef", "value": "standard.Div" }, "props": { "_type": "Object", "keyType": { "_type": "TypeRef", "value": "internal.String" }, "valType": { "_type": "TypeRef", "value": "internal.Any" }, "properties": { "className": { "_type": "internal.String", "value": "some css class" } } }, "children": { } } }