freon4dsl/freon4dsl

Web Native language Workbench with Projectional Web Editor

[]

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.

freon4dsl's Issues

Enable TSLint

Enable tslint for all modules

DOD

• ts lint runs in all projects
• all violations are fixed

Lerna migration

Migrate TS projects to Lerna/Yarn workspace.

DOD

• build and dev mode works from cli
• project compiles without error in webstorm and vscode
• refactoring across modules is working
• dist and node_modules are excluded from search and refactoring

Setup domain www.projectit.org correctly

The domain www.projectit.org now points to the githup repo. It should point to the github pages root. Needs changes in github, and in the provider where the domain is registered.

Lerna run start stalls

Lerna run start stalls because the start command in packages like core are defailed as tsc -w which bwill never end.

yarn bootstrap removed

After cloning and following the Read.Me, installing using homebrew, the yarn bootstrap command fails. So the instructions or build be updated?

yarn bootstrap
yarn run v1.22.21
$ lerna bootstrap
ERR! bootstrap The "bootstrap" command was removed by default in v7, and is no longer maintained.
ERR! bootstrap Learn more about this change at https://lerna.js.org/docs/legacy-package-management
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

De-couple toolbar from editor

The toolbar should not be part of the projectional editor itself. It needs to be refactored into a helper component that can optionally be used.

Development support

Hi,

I have been interested in building a react based projectional editor for some time. Would you mind some development support.

I have forked and will be adding:

• replace ts projects with real npm modules using lerna
  e.g. @projectit/core, @projectit/meta ...
• Replace docs (MDX) with GatsbyJS and MDX for site an documentation
• exchange sass for typestyle
• make the ui more usable

please let me know if this sounds good and what you would like to do.

Create overview documentation for defining a projection

Create new project for antora UI bundle

The default UI bundle of Antora needs to be adapted to ProjectIt. This bundle is used in building the documentation with Antora. This build now uses a local repo, but it should go to github.

TS2307: Cannot find module '../config/WebappConfiguration'

On current HEAD 80163e2, following the README instructions,
when doing the step of

cd packages/playground
yarn dev

I get the following error:

% yarn dev
yarn run v1.22.15
$ cross-env NODE_PORT=3002 rollup -c -w
rollup v2.77.0
bundles src/webapp/main.ts → public/build/bundle.js...
(!) Plugin typescript: @rollup/plugin-typescript TS2307: Cannot find module '../config/WebappConfiguration' or its corresponding type declarations.
src/webapp/language/EditorRequestsHandler.ts: (1:35)

1 import { editorEnvironment } from "../config/WebappConfiguration";
                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/webapp/language/EditorState.ts: (22:56)

22 import { editorEnvironment, serverCommunication } from "../config/WebappConfiguration";
                                                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/webapp/language/ImportExportHandler.ts: (3:56)

3 import { editorEnvironment, serverCommunication } from "../config/WebappConfiguration";
                                                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/webapp/language/LanguageInitializer.ts: (8:35)

8 import { editorEnvironment } from "../config/WebappConfiguration";
                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[!] Error: Could not resolve './config/WebappConfiguration' from src/webapp/FreonLayout.svelte
Error: Could not resolve './config/WebappConfiguration' from src/webapp/FreonLayout.svelte
    at error (/Users/yairchu/dev/src/ProjectIt/packages/playground/node_modules/rollup/dist/shared/rollup.js:198:30)
    at ModuleLoader.handleResolveId (/Users/yairchu/dev/src/ProjectIt/packages/playground/node_modules/rollup/dist/shared/rollup.js:22463:24)
    at /Users/yairchu/dev/src/ProjectIt/packages/playground/node_modules/rollup/dist/shared/rollup.js:22426:26

Register @inspectit with npm

We should reserve the @inspectIT with the npm org

DDD

• @inspectIT is registered and ready for publishing modules

Create development branch

Not sure how you work with git but it would be nice to have a development branch and lock the master. What do you think?

Add Travis CI build

Create a travis ci build for the library and doc

DDD

• a travis job is configured for the source
• a travis job is configured for the doc

Enable all typescript build time checks

To get the most out of the tsc then all ts build time check should be enabled:

"noFallthroughCasesInSwitch": true,
"noImplicitAny": true,
"noImplicitReturns": true,
"skipLibCheck": true,
"strictNullChecks": true,
"strint": true

Navigate through URL

For the example IDEs: it would be cool if you could choose a model or model + unit per URL. That saves the user - especially if they are a dev working on the DSL's implementation - having to interact with dialog boxes.

Add Travis CI release build

Create a job for releasing all modules.

File styles.scss is missing in distribution

When trying to use the first release, it seems that the file styles.scss is missing.
It should be in @projectit/core/dist/components/dropdopwn.

Use IndexedDB for persistence

Instead of having to run a model server/backend, use the browser's built-in IndexedDB (more flexible than LocalStorage) for persistence, so the playground IDEs can be fully offline.

Demo app fails to start

Following the setup instructions steps with the latest commit in the development branch at the time of writing (and a few older ones at random) I get a blank page in the browser and the following error in the console:

[HMR] Waiting for update signal from WDS... log.js:24
Download the React DevTools for a better development experience: https://fb.me/react-devtools react-dom.development.js:24994
@fluentui/react-northstar: CSSinJS Debug data collection is disabled. To enable data collection paste `window.localStorage.fluentUIDebug = true` to your browser console and reload the page. debugEnabled.js:15
@fluentui/react-northstar: You are running Fela in production mode. This limits your ability to edit styles in browsers development tools. To enable development mode please paste `window.localStorage.felaDevMode = true` to your browsers console and reload the page. felaRenderer.js:25
Uncaught Error: Cannot find module '../../example/environment/gen/ExampleEnvironment'
    webpackMissingModule WebappConfiguration.ts:7
    <anonymous> WebappConfiguration.ts:7
    ts bundle.js:1776
    __webpack_require__ bundle.js:785
    fn bundle.js:151
    <anonymous> EditorCommunication.tsx:3
    tsx bundle.js:1752
    __webpack_require__ bundle.js:785
    fn bundle.js:151
    <anonymous> Menubar.tsx:4
    tsx bundle.js:1859
    __webpack_require__ bundle.js:785
    fn bundle.js:151
    <anonymous> MainGrid.tsx:3
    tsx bundle.js:1847
    __webpack_require__ bundle.js:785
    fn bundle.js:151
    <anonymous> App.tsx:6
    tsx bundle.js:1811
    __webpack_require__ bundle.js:785
    fn bundle.js:151
    <anonymous> index.tsx:4
    tsx bundle.js:1799
    __webpack_require__ bundle.js:785
    fn bundle.js:151
    0 bundle.js:1896
    __webpack_require__ bundle.js:785
    checkDeferredModules bundle.js:46
    <anonymous> bundle.js:861
    <anonymous> bundle.js:864
WebappConfiguration.ts:7
    webpackMissingModule WebappConfiguration.ts:7
    <anonymous> WebappConfiguration.ts:7
    ts bundle.js:1776
    __webpack_require__ bundle.js:785
    fn bundle.js:151
    <anonymous> EditorCommunication.tsx:3
    tsx bundle.js:1752
    __webpack_require__ bundle.js:785
    fn bundle.js:151
    <anonymous> Menubar.tsx:4
    tsx bundle.js:1859
    __webpack_require__ bundle.js:785
    fn bundle.js:151
    <anonymous> MainGrid.tsx:3
    tsx bundle.js:1847
    __webpack_require__ bundle.js:785
    fn bundle.js:151
    <anonymous> App.tsx:6
    tsx bundle.js:1811
    __webpack_require__ bundle.js:785
    fn bundle.js:151
    <anonymous> index.tsx:4
    tsx bundle.js:1799
    __webpack_require__ bundle.js:785
    fn bundle.js:151
    0 bundle.js:1896
    __webpack_require__ bundle.js:785
    checkDeferredModules bundle.js:46
    <anonymous> bundle.js:861
    <anonymous> bundle.js:864
[WDS] Hot Module Replacement enabled. client:48
[WDS] Live Reloading enabled. client:52
[WDS] Errors while compiling. Reload prevented. client:150
./webapp/gateway-to-projectit/WebappConfiguration.ts
Module not found: Error: Can't resolve '../../example/environment/gen/ExampleEnvironment' in '/home/i/ProjectIt/packages/playground/src/webapp/gateway-to-projectit' client:159
[at-loader] ./src/example/editor/CustomExampleActions.ts:12:41 
    TS2307: Cannot find module '../language/gen'. client:159
[at-loader] ./src/webapp/gateway-to-projectit/WebappConfiguration.ts:7:36 
    TS2307: Cannot find module '../../example/environment/gen/ExampleEnvironment'. client:159
[at-loader] ./src/example/editor/CustomExampleProjection.ts:17:33 
    TS2307: Cannot find module './styles/styles'. client:159
[at-loader] ./src/example/editor/CustomExampleProjection.ts:18:36 
    TS2307: Cannot find module '../environment/gen/ExampleEnvironment'. client:159
[at-loader] ./src/example/editor/CustomExampleProjection.ts:19:124 
    TS2307: Cannot find module '../language/gen'. client:159
[at-loader] ./src/example/editor/CustomExampleProjection.ts:20:40 
    TS2307: Cannot find module '../projectit/ProjectitConfiguration'. client:159
[at-loader] ./src/example/editor/CustomExampleProjection.ts:21:41 
    TS2307: Cannot find module './gen/ExampleSelectionHelpers'. client:159

Would like to check it out, so any advice is appreciated. While I am here, any chance there is a prerecorded demo you could share?