functional ivy

app.treaty

<style>
  button { cursor: pointer }
  label { display: inline-flex; align-items: center; cursor: pointer; user-select: none; }
  .cm-editor { height: 100%; }
  #loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; justify-content: center; align-items: center; }
  #container { display: flex; height: 100vh; }
  #left { display: flex; flex: 1; flex-direction: column; border-right: 1px solid #444 }
  #editor { flex: 1; overflow-y: auto; }
  #panel { height: 20%; overflow-y: auto; padding: 1em; color: #d1d5da; border-top: 1px solid #444!important; }
  #right { flex: 1; display:flex; flex-direction: column; min-width: 0; }
  .header {  border-bottom: 1px solid #444; display: flex; height: 50px; align-items: stretch; }
  .left-container { padding: .6em; display: flex; align-items: center; justify-content: space-between; }
  .controls { padding: .6em; }
  .controls > div { padding: .2em .5em; display: flex; flex-wrap: wrap; gap: 4px; }
  .controls > div > button { padding: 8px 16px; background-color: #2c3136; color: white; border: 1px solid #444; transition: background-color 0.3s; white-space: nowrap; }
  .controls > div > button:hover { background-color: #444; }
  .controls > div > button.active { background-color: #555; }
  .controls > div > label { margin-right: 4px; }
  .controls label { font-size: 14px; }
  #duration { margin-left: auto; }
  #viewer { flex: 1; overflow-y: auto; }
  #divider { width: 4px; background: #444; }
  #divider:hover { background: #666; cursor: col-resize; }
</style>

import logo from './component/logo.treaty';
import { viewChild, ElementRef, effect } from '@angular/core';
import {EditorView, basicSetup} from "codemirror"
import {javascript} from "@codemirror/lang-javascript"
import { treaty } from './lang-treaty/treatyjs'

const editor = viewChild('editor');
const viewer = viewChild('viewer');


effect(() => {
  if (editor()?.nativeElement) {

    window.view = new EditorView({
      doc: 'console.log("Welcome to Treaty")',
      extensions: [
        basicSetup,
        javascript(),
        treaty()
      ],
      parent: editor()?.nativeElement
    })
  }
});


<div id="container">
  <div id="left">
    <div class="header left-container">
      <logo></logo>
      <div>
        <label>
          File
          <select id="file-type-select" style="margin-left: 4px">
            <option value="treat">treaty</option>
            <option disabled value="angular-html">Angular IVY HTML (coming soon)</option>
            <option disabled value="angular">Angular IVY (coming soon)</option>
          </select>
        </label>
      </div>
    </div>
    <div #editor id="editor"></div>
  </div>
  <div id="divider"></div>
  <div #right id="right">
    <div class="header controls">
      <div>
        <button type="button" id="codegen" (click)="onClick(viewer)">Codegen</button>
      </div>
    </div>
    <div #viewer id="viewer"></div>
  </div>
</div>

import { treatyToIvy } from '../tools/treaty-sfc/treat-to-ivy'
import * as compiler from '@angular/compiler'

const onClick = async (viwer) => {
  const result = await treatyToIvy(window.view.state.doc.toLocaleString(), 'example.treat', compiler, () => 'example')
  console.log(result);
}

app.treaty -> app.ts

import logo from './component/logo.treaty';
import { viewChild, ElementRef, effect } from '@angular/core';
import {EditorView, basicSetup} from "codemirror"
import {javascript} from "@codemirror/lang-javascript"
import { treaty } from './lang-treaty/treatyjs'
import { treatyToIvy } from '../tools/treaty-sfc/treat-to-ivy'
import * as compiler from '@angular/compiler'
  import * as i0 from "@angular/core";
  import * as i1 from "@angular/common";
  const _c0 = ['editor'];
const _c1 = ['viewer'];
  function example() {
  const editor = viewChild('editor');
const viewer = viewChild('viewer');


effect(() => {
  if (editor()?.nativeElement) {

    window.view = new EditorView({
      doc: 'console.log("Welcome to Treaty")',
      extensions: [
        basicSetup,
        javascript(),
        treaty()
      ],
      parent: editor()?.nativeElement
    })
  }
});



const onClick = async (viwer) => {
  const result = await treatyToIvy(window.view.state.doc.toLocaleString(), 'example.treat', compiler, () => 'example')
  console.log(result);
}
  return { editor, viewer, onClick };
}

example.ɵfac = function example_Factory(t) { return (t || example)(); };
example.ɵcmp = i0.ɵɵdefineComponent({type: example, selectors: [['example'], ['example'], ['Example']], viewQuery: function example_Query(rf, ctx) {if (rf&1) {i0.ɵɵviewQuerySignal(ctx.editor, _c0, 5);
i0.ɵɵviewQuerySignal(ctx.viewer, _c1, 5);}
if (rf&2) {i0.ɵɵqueryAdvance(2);}}, standalone: true, signals: true, features: [i0.ɵɵStandaloneFeature], decls: 25, vars: 0, consts: [['editor', ''], ['right', ''], ['viewer', ''], ['id', 'container'], ['id', 'left'], [1, 'header', 'left-container'], ['id', 'file-type-select', 2, 'margin-left', '4px'], ['value', 'treat'], ['disabled', '', 'value', 'angular-html'], ['disabled', '', 'value', 'angular'], ['id', 'editor'], ['id', 'divider'], ['id', 'right'], [1, 'header', 'controls'], ['type', 'button', 'id', 'codegen', 3, 'click'], ['id', 'viewer']], template: function example_Template(rf, ctx) {if (rf&1) {const _r1 = i0.ɵɵgetCurrentView()
i0.ɵɵelementStart(0, 'div', 3)(1, 'div', 4)(2, 'div', 5);
i0.ɵɵelement(3, 'logo');
i0.ɵɵelementStart(4, 'div')(5, 'label');
i0.ɵɵtext(6, ' File ');
i0.ɵɵelementStart(7, 'select', 6)(8, 'option', 7);
i0.ɵɵtext(9, 'treaty');
i0.ɵɵelementEnd();
i0.ɵɵelementStart(10, 'option', 8);
i0.ɵɵtext(11, 'Angular IVY HTML (coming soon)');
i0.ɵɵelementEnd();
i0.ɵɵelementStart(12, 'option', 9);
i0.ɵɵtext(13, 'Angular IVY (coming soon)');
i0.ɵɵelementEnd()()()()();
i0.ɵɵelement(14, 'div', 10, 0);
i0.ɵɵelementEnd();
i0.ɵɵelement(16, 'div', 11);
i0.ɵɵelementStart(17, 'div', 12, 1)(19, 'div', 13)(20, 'div')(21, 'button', 14);
i0.ɵɵlistener('click', function example_Template_button_click_21_listener() {i0.ɵɵrestoreView(_r1);
const viewer_r2 = i0.ɵɵreference(24)
return i0.ɵɵresetView(ctx.onClick(viewer_r2));});
i0.ɵɵtext(22, 'Codegen');
i0.ɵɵelementEnd()()();
i0.ɵɵelement(23, 'div', 15, 2);
i0.ɵɵelementEnd()();}}, styles: ['button[_ngcontent-%COMP%] { cursor: pointer }  label[_ngcontent-%COMP%] { display: inline-flex; align-items: center; cursor: pointer; user-select: none; }  .cm-editor[_ngcontent-%COMP%] { height: 100%; }  #loading[_ngcontent-%COMP%] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; justify-content: center; align-items: center; }  #container[_ngcontent-%COMP%] { display: flex; height: 100vh; }  #left[_ngcontent-%COMP%] { display: flex; flex: 1; flex-direction: column; border-right: 1px solid #444 }  #editor[_ngcontent-%COMP%] { flex: 1; overflow-y: auto; }  #panel[_ngcontent-%COMP%] { height: 20%; overflow-y: auto; padding: 1em; color: #d1d5da; border-top: 1px solid #444!important; }  #right[_ngcontent-%COMP%] { flex: 1; display:flex; flex-direction: column; min-width: 0; }  .header[_ngcontent-%COMP%] {  border-bottom: 1px solid #444; display: flex; height: 50px; align-items: stretch; }  .left-container[_ngcontent-%COMP%] { padding: .6em; display: flex; align-items: center; justify-content: space-between; }  .controls[_ngcontent-%COMP%] { padding: .6em; }  .controls[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%] { padding: .2em .5em; display: flex; flex-wrap: wrap; gap: 4px; }  .controls[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]    > button[_ngcontent-%COMP%] { padding: 8px 16px; background-color: #2c3136; color: white; border: 1px solid #444; transition: background-color 0.3s; white-space: nowrap; }  .controls[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]    > button[_ngcontent-%COMP%]:hover { background-color: #444; }  .controls[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]    > button.active[_ngcontent-%COMP%] { background-color: #555; }  .controls[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]    > label[_ngcontent-%COMP%] { margin-right: 4px; }  .controls[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] { font-size: 14px; }  #duration[_ngcontent-%COMP%] { margin-left: auto; }  #viewer[_ngcontent-%COMP%] { flex: 1; overflow-y: auto; }  #divider[_ngcontent-%COMP%] { width: 4px; background: #444; }  #divider[_ngcontent-%COMP%]:hover { background: #666; cursor: col-resize; }'], dependencies: [logo]})

export default example;