Skip to content

Commit

Permalink
First draft of an fully-in-browser code generation project
Browse files Browse the repository at this point in the history
build the code generator using `expandToString`
  • Loading branch information
sailingKieler committed May 25, 2023
1 parent aaffaac commit e7ed0cb
Show file tree
Hide file tree
Showing 9 changed files with 2,522 additions and 0 deletions.
33 changes: 33 additions & 0 deletions .github/workflows/actions.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
name: Build

on:
push:
branches:
- '**'
tags-ignore:
- '**'
pull_request_target: # enables builds of PRs to branch 'master' from forked repos, with the workflow being taken from the target revision, i.e. the 'master' branch
branches:
- main
workflow_dispatch: # enables manual triggering

jobs:
build:
# suppress triggering this job on 'synchronize' events of PR's (i.e. branch updates) within the same repo, as that is covered by 'push' already, but fire on updates of PRs coming from outside
if: github.event_name != 'pull_request_target' || github.event.action != 'synchronize' || github.event.pull_request.base.repo.id != github.event.pull_request.head.repo.id
runs-on: ubuntu-latest
strategy:
fail-fast: false
timeout-minutes: 20
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: '16'
- name: Build
shell: bash
run: |
npm ci
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
node_modules
public/*
out/
!index.html
31 changes: 31 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<div id="langium-logo" align="center">
<a href="https://github.com/langium/langium">
<img alt="Langium Logo" width="500" src="https://user-images.githubusercontent.com/4377073/135283991-90ef7724-649d-440a-8720-df13c23bda82.png">
</a>
<h3>
Example application demonstrating a fully-in-browser DSL implementation including Code Generation based on Langium's arithmetics example DSL
</h3>
</div>

<div id="badges" align="center">

[![Build](https://github.com/langium/langium-in-browser-codegen-example/actions/workflows/actions.yml/badge.svg)](https://github.com/langium/langium-in-browser-codegen-example/actions/workflows/actions.yml)
[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/langium/langium-in-browser-codegen-example/)

</div>

<hr>

This example project demonstrates the usage of Langium in the browser without any backend.
The language server is run in a web worker. It parses and validates the input text on change and — in this special case — sends a serialized snapshot of the abstract syntax tree (AST) to the browser's main thread, provided the text is free of errors. The code generation is than executed in the browser's main thread, and the obtained code is executed subsequently.
_Remark_: This setup well-suited for the sake of this demostration, but it is not common in production (yet 😁).

## Get started

Run
```
npm i
npm run serve
```
and open http://localhost:3000 in your browser.
Open the browser's developer tools, and put a break point at https://github.com/langium/langium-in-browser-codegen-example/blob/a2e590d9aeccf94178ebed83ab64ad40ebe1c635/src/arithmeticsEditor/index.ts#L44
Loading

0 comments on commit e7ed0cb

Please sign in to comment.