UP | HOME

grati.co

Table of Contents

Introduction

Features

  • Polymorphic Document Format
  • Extensible IDE
  • Extensible REPL/Runtime
  • Support for legacy code
  • Tags
  • Preview
  • Tests

Example Document Format

  • Code/Typescript using Language Bridge
  • Table
  • MDX
  • Test Files
  • Storybook
  • GraphQL
  • CSS Styles
  • SVG Editor

Language Bridge

Simple typed language AST format to interface over multiple GPL Languages like typescript/python etc.

Syntax

  • BasicLiterals(String/Number/Boolean/Null/Undefined/Void)
  • Object
  • Arrays
  • Identifiers
  • VariableAssignment
  • Function
  • FunctionApplication
  • JSXElement
  • JSXExpression
  • TypeDeclaration
  • InterfaceDeclaration
  • Types
    • LiteralTypes("john")
    • BasicTypes(string | number | boolean | null | undefined | any | unknown)
    • TypeApplication(to describe Functions/List/Tuple/Object)

Implication

Due to simple structure of AST

  • we can transpile to multiple languages
  • Easily create JSONSchema for types generated

UI Editor

Architecture

Root<RootProps>

  • ComponentList

    Loops through document and display all React Components in scope and the html ones.

  • Canvas

    Compiles AST into TS and loads it into runtime to render it.

  • PropEditor

    Shows props and allows to edit their value for selectedBlock.

  • StyleEditor

    If selected prop is style.

    • Layout/Display
    • Spacing
    • Size
    • Position
    • Background
    • Border
    • Typography
    • Effects

Typeschecker Intergation

Required methods

  • getFunctionType
  • getType
import ts from 'typescript'
import {IKernel} from './kernel'
import {INode} from '../langauge/language'
export interface RootProps {
    kernel: IKernel
    document: INode,
    path: any[];
    selectedBlock: any[];
    typechecker: ts.typechecker
}

Author: Abhishiv Saxena

Created: 2020-09-10 Thu 19:29

Validate