GithubHelp home page GithubHelp logo

blt's Introduction

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": { } } }

blt's People

Contributors

lopatin avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.