Git Product home page Git Product logo

[Build Status]

Freon, previously know as ProjectIt

Projectional Editor for the Web. The current release (version 0.6.0-beta.0) can be found on npm.

This beta release supports LIonWeb (de)serialization. As LIonWeb is in motion, excpect this release to change according to LIonWeb changes before it becomes final.

What is Freon

Freon is a TypeScript/JavaScript framework to create and implement projectional editors for Domain-Specific Languages (DSLs). Additional to the core framework, there are generators for many parts of the work environment for your DSL.

For more information see the Freon website.

Developing Freon

The main prerequisites are: Node.js and yarn. We are typically using the latest versions of both, although older versions likely work just as well. You could also try and use NPM instead of yarn.

Clone or fork this github project, check out the development branch, and install lerna:

  git clone https://github.com/freon4dsl/Freon4dsl.git
  yarn global add lerna

Setup the lerna structure:

  yarn bootstrap

Now you can build Freon with:

  yarn build

Choose one of the projects in playground. Note that not all of them will work correctly (it is a playground :-)). Generate the code for that project (we have choosen the 'example' project):

  cd packages/playground
  yarn install-example
  yarn example

To start the projectional editor for the choosen language in the playground package, do two things in separate terminals:

Go to directory packages/server and start the server:

    cd packages/server
    yarn start

Goto the playground directory packages/playground (or stay there if you are already there) and start Freon:

    cd packages/playground
    yarn dev

This will open a browser with the example from the playground package on the URL displayed: http://localhost:5000/. The example and all other projects in playground are work in progress.

Source organisation

The source code for Freon is organised into the following packages.

  • docs: documentation, i.e. this website
  • packages/core: framework source code.
  • packages/core/src/editor: the editor framework source code.
  • packages/core/src/language/decorators: source code for MobX decorators that can be used to easily implement a language that can be directly used by Freon.
  • packages/meta: source code that reads the language definition files and generates the language environment.
  • packages/meta/src/languagedef: source code that generates code from a language structure definition (.ast) file.
  • packages/meta/src/editordef: source code that generates code from an editor definition (.edit) file.
  • packages/meta/src/scoperdef: source code that generates code from a scoper definition (.scope) file.
  • packages/meta/src/typerdef: source code that generates code from a typer definition (.type) file.
  • packages/meta/src/validatordef: source code that generates code from a validator definition (.valid) file.
  • packages/playground: source code generated from the language definition files.
  • packages/playground/src/webapp: a copy of packages/webapp, for use within the playground.
  • packages/playground/src/example/defs: the language definition files for the example language called 'Example'.
  • packages/server: source code for a minimalistic model-server used for demonstration purposes.
  • packages/webapp: source code for the web-application used for all generated languages.
  • /*: the usual suspects.

Freon's Projects

freon-example icon freon-example

An example project showing how to build a projectional editor with ProjectIt

freon4dsl icon freon4dsl

Web Native language Workbench with Projectional Web Editor

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.