Startseite Erkunden Hilfe
Registrieren Anmelden
LInE
/
iVProg
2
0
Fork 1
Dateien Issues 0 Pull-Requests 0 Wiki
Quellcode durchsuchen

Refactor code to use webpack and define a UI entry point

Lucas de Souza vor 5 Jahren
Ursprung
09c9a3a99c
Commit
5c999dda76
12 geänderte Dateien mit 387 neuen und 272 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 18 32
      i18n/i18n-engine.js
  2. 113 60
      index.html
  3. 8 45
      js/main.js
  4. 49 0
      js/runner.js
  5. 4 7
      js/semantic/semantic-buttons.js
  6. 43 0
      js/visualUI/functions.js
  7. 0 0
      js/visualUI/old_functions.js
  8. 0 0
      js/visualUI/old_visual.js
  9. 76 0
      js/visualUI/visual.js
  10. 0 126
      main.html
  11. 73 0
      runner.html
  12. 3 2
      webpack.config.js

+ 18 - 32
i18n/i18n-engine.js
Datei anzeigen 

@@ -1,15 +1,21 @@
 
 
+var LocalizedStrings = ivprogCore.LocalizedStrings;
 
+var StringTypes = ivprogCore.StringTypes;
 
+
 
 function i18n(identifier) {
 
-  if (!i18n.db[i18n.locale]) {
 
-    if (!i18n.db['en'][identifier]) {
 
-      return "{MISSING_I18N_IDENTIFIER}";
 
-    }
 
-    return i18n.db['en'][identifier];
 
-  }
 
-  if (!i18n.db[i18n.locale][identifier]) {
 
-    return "{MISSING_I18N_IDENTIFIER}";
 
+  var opts = identifier.split(':');
 
+  var type = opts[0].toLowerCase();
 
+  var id = opts[1];
 
+  if (StringTypes.ERROR === type) {
 
+    return LocalizedStrings.getError(id);
 
+  } else if (StringTypes.MESSAGE === type) {
 
+    return LocalizedStrings.getMessage(id); 
+  } else if (StringTypes.UI === type) {
 
+    return LocalizedStrings.getUI(id);
 
+  } else {
 
+    console.warn(" A string has been passed to the i18n helper function that was not in the form type:id -> " + identifier);
 
+    return LocalizedStrings.getString(id, type);
 
   }
 
-  return i18n.db[i18n.locale][identifier];
 
 }
 
 
 i18n.set = function(locale, identifier, translate) {
 
@@ -20,34 +26,14 @@ i18n.set = function(locale, identifier, translate) {
 
 }
 
 
 i18n.updateLocale = function(new_locale) {
 
-  i18n.locale = new_locale;
 
-  $( "data.i18n" ).each(function( index ) {
 
+  localStorage.setItem('ivprog.lang', new_locale);
 
+  $( "data.i18n" ).each(function() {
 
     $( this ).text(i18n($( this ).val()));
 
   });
 
 }
 
 
-i18n.locale = iLMparameters.lang;
 
-i18n.db = {};
 
-
 
-$.ajaxSetup({
 
-    async: false
 
-});
 
-
 
-$.getJSON('i18n/i18n-database.json', function(data) {
 
-    for (x in data) {
 
-      l = data[x];
 
-      i18n.set('en', x, l.en);
 
-      i18n.set('es', x, l.es);
 
-      i18n.set('pt', x, l.pt);
 
-    }
 
-});
 
-
 
-$.ajaxSetup({
 
-    async: true
 
-});
 
-
 
 $( document ).ready(function() {
 
-  $( "data.i18n" ).each(function( index ) {
 
+  $( "data.i18n" ).each(function() {
 
     $( this ).text(i18n($( this ).val()));
 
   });
 
 });

+ 113 - 60
index.html
Datei anzeigen 

@@ -1,70 +1,123 @@
 
 <!DOCTYPE html>
 
 <html>
 
-<head>
 
-  <link rel="stylesheet" type="text/css" href="js/semantic/semantic.min.css">
 
-  <style>
 
-    .ivprog-io-output {
 
-      border: 1px solid gainsboro;
 
-      width: 80%;
 
-      height: 360px;
 
-      overflow-y: scroll;
 
-      background-color: black;
 
-      color: white;
 
-    }
 
-
 
-    .ivprog-io-input {
 
-      width: 80%;
 
-      margin-top: 10px;
 
-      border: 1.5px solid green;
 
-      height: 3rem;
 
-      color: black;
 
-      font-size: 12pt;
 
-    }
 
-  </style>
 
-  <title></title>
 
-</head>
 
-<body>
 
-    <div style="padding-top: 50px;content: ''"></div>
 
-  <div class="ui container grid">
 
+  <head>
 
+    <title></title>
 
+    <link rel="stylesheet" type="text/css" href="js/semantic/semantic.min.css">
 
+    <link rel="stylesheet" type="text/css" href="css/ivprog-visual-1.0.css">
 
+    <script src="build/vendors~main.ivprog.bundle.js"></script>
 
+    <script src="js/jquery-3.3.1.min.js"></script>
 
+    <script src="build/ivprog.bundle.js"></script>
 
+
 
+    <script src="js/iassign-integration-functions.js"></script>
 
+    <script src="i18n/i18n-engine.js"></script>
 
+
 
+    <script src="js/semantic/semantic.min.js"></script>
 
+    <script src="js/semantic/semantic-buttons.js"></script>
 
+
 
+    <script src="js/jquery-ui.js"></script>
 
+    <script src="js/Sortable.js"></script>
 
     
-    <div class="four wide column">
 
-      <div class="row">
 
-        <textarea class="ui form control" name="input" id="input" cols="100" rows="30">
 
-            programa {
 
-
 
-              const real C = 5.5
 
-             
-              funcao inteiro inicio() {
 
-               inteiro a = 8
 
-               se (a * C > 80) {
 
-                a = 0
 
-               } senao {
 
-                 a = -1
 
-               }
 
-              }
 
-             }
 
-        </textarea>
 
-      </div>
 
-      <div class="row">
 
-          <button class="ui button" id="btn">Run</button>
 
+  </head>
 
+  <body>
 
+   
+    <div class="ui one column doubling stackable grid container">
 
+      <div class="column">
 
+        <div class="ui container main_title">
 
+          <h2>iVProg</h2>
 
+          <span>interactive coding</span>
 
+        </div>
 
+
 
+        
+
 
+        <div class="ui container content_margin">
 
+          <div class="content_sub_margin">
 
+              <div class="blue ui ivprog_format buttons">
 
+                <button class="ui button active">Visual</button>
 
+                <button class="ui button">Textual</button>
 
+                <button class="ui button">XML</button>
 
+              </div>
 
+
 
+              <a class="ivprog_format_info">
 
+                <i class="circular inverted some-wrapping-div teal info icon small label ivprog_format_info popup"></i>
 
+              </a>
 
+              <div class="ui custom popup">
 
+                Choice how you prefer to develop. If disabled, teacher doesn't allow this change. <a href="#">See documentation about it.</a>
 
+              </div>
 
+            </div>
 
+          </div>
 
+
 
+
 
       </div>
 
+      
     </div>
 
-    <div class="six wide column">
 
-      <div id="dom-out" class="ivprog-io-output">
 
 
+    
+
 
+    
+
 
+    <div class="ui raised container segment div_to_body">
 
+
 
+      <div class="ui icon menu center aligned container" style="width: 438px; margin-top: -10px;">
 
+        <a class="item">
 
+          <i class="file icon"></i>
 
+        </a>
 
+        <a class="item">
 
+          <i class="save icon"></i>
 
+        </a>
 
+        <a class="item">
 
+          <i class="upload icon"></i>
 
+        </a>
 
+        <a class="item">
 
+          <i class="download icon"></i>
 
+        </a>
 
+        <a class="item undo_button disabled">
 
+          <i class="undo icon"></i>
 
+        </a>
 
+        <a class="item">
 
+          <i class="redo icon"></i>
 
+        </a>
 
+        <a class="item">
 
+          <i class="play icon"></i>
 
+        </a>
 
+        <a class="item">
 
+          <i class="stop icon"></i>
 
+        </a>
 
+        <a class="item">
 
+          <i class="help icon"></i>
 
+        </a>
 
       </div>
 
-      <input id="dom-in" type="text" class="ivprog-io-input">
 
-    </div>
 
-    <div class="six wide column">
 
-        <div style="overflow-y: scroll; height: 70%;">
 
-            <pre id="json-renderer" class="ui right floated"></pre>
 
+
 
+      <div class="ui one column container segment ivprog_visual_panel loading">
 
+        <div class="program_signature"><span class="program_signature_text">programa</span> { </div>
 
+
 
+        <div class="global_var">
 
+          <div class="ui icon button add-globalVar-button"><i class="icon superscript"></i></div>
 
+          <div class="list_globals"></div>
 
+        </div>
 
+
 
+        <div class="all_functions list-group" id="listWithHandle">
 
+
 
         </div>
 
+
 
+
 
+        <div class="ui teal small labeled icon button add_function_button">
 
+          <data class="i18n" value="Function">Function</data>
 
+          <i class="add icon"></i>
 
+        </div>
 
+        <div class="program_final">}</div>
 
+
 
+      </div>
 
+      
     </div>
 
-  </div>
 
-  
-  
-</body>
 
-<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
 
-<script type="text/javascript" src="js/jquery.json-editor.min.js"></script>
 
-<script type="text/javascript" src="build/ivprog.bundle.js"></script>
 
+
 
+    <i class="icon trash alternate outline huge" onmouseover="console.log('oi');" ></i>
 
+
 
+    <script>
 
+      $(document).ready(() => {
 
+        ivprogCore.initVisualUI();
 
+      });
 
+    </script>
 
+
 
+
 
+  </body>
 
 </html>

+ 8 - 45
js/main.js
Datei anzeigen 

@@ -1,47 +1,10 @@
 
-import { IVProgParser } from './ast/ivprogParser';
 
-import { IVProgProcessor } from './processor/ivprogProcessor';
 
-import {DOMInput} from './io/domInput';
 
-import {DOMOutput} from './io/domOutput';
 
-import { LanguageService } from './services/languageService';
 
-import { LocalizedStrings } from './services/localizedStringsService';
 
+import { runner } from './runner';
 
+import { initVisualUI } from './visualUI/functions';
 
+import { LocalizedStrings, StringTypes } from './services/localizedStringsService';
 
 
-const ivprogLexer = LanguageService.getCurrentLexer();
 
-console.log(LocalizedStrings.getUI('start'));
 
-
 
-// const lexer = new ivprogLexer(new InputStream(input));
 
-// const stream = new CommonTokenStream(lexer);
 
-// stream.fill();
 
-// let i = 1;
 
-// let token = null;
 
-// while ((token = stream.LT(i)).type !== ivprogLexer.EOF && token.type !== ivprogLexer.WHITESPACE) {
 
-//     console.log(`${token.type}-${token.text}`);
 
-//     console.log('\n')
 
-//     i++;
 
-// }
 
-// const anaSin = new IVProgParser(input, ivprogLexer);
 
-const editor = new JsonEditor('#json-renderer', {});
 
-const domIn = new DOMInput('#dom-in');
 
-const domOut = new DOMOutput('#dom-out');
 
-// proc.interpretAST().then( sto => {
 
-//   console.log(sto.applyStore('a'));
 
-// }).catch(e => console.log(e));
 
-try {
 
-  $('#btn').click( () => {
 
-    const input = $('#input').val();
 
-    const analiser = new IVProgParser(input, ivprogLexer);
 
-    try {
 
-      const data = analiser.parseTree();
 
-      const proc = new IVProgProcessor(data);
 
-      proc.registerInput(domIn);
 
-      domOut.clear();
 
-      proc.registerOutput(domOut);
 
-      proc.interpretAST().then(sto => editor.load(sto.store))
 
-        .catch( e => alert(e));
 
-    } catch (error) {
 
-      alert(error);
 
-    }
 
-    
-  });
 
-} catch(a) {
 
-  console.log(a);
 
+export {
 
+  runner,
 
+  initVisualUI,
 
+  LocalizedStrings,
 
+  StringTypes
 
 }

+ 49 - 0
js/runner.js
Datei anzeigen 

@@ -0,0 +1,49 @@
 
+import { IVProgParser } from './ast/ivprogParser';
 
+import { IVProgProcessor } from './processor/ivprogProcessor';
 
+import {DOMInput} from './io/domInput';
 
+import {DOMOutput} from './io/domOutput';
 
+import { LanguageService } from './services/languageService';
 
+import { LocalizedStrings } from './services/localizedStringsService';
 
+
 
+export function runner () {
 
+  const ivprogLexer = LanguageService.getCurrentLexer();
 
+console.log(LocalizedStrings.getUI('start'));
 
+
 
+// const lexer = new ivprogLexer(new InputStream(input));
 
+// const stream = new CommonTokenStream(lexer);
 
+// stream.fill();
 
+// let i = 1;
 
+// let token = null;
 
+// while ((token = stream.LT(i)).type !== ivprogLexer.EOF && token.type !== ivprogLexer.WHITESPACE) {
 
+//     console.log(`${token.type}-${token.text}`);
 
+//     console.log('\n')
 
+//     i++;
 
+// }
 
+// const anaSin = new IVProgParser(input, ivprogLexer);
 
+const editor = new JsonEditor('#json-renderer', {});
 
+const domIn = new DOMInput('#dom-in');
 
+const domOut = new DOMOutput('#dom-out');
 
+// proc.interpretAST().then( sto => {
 
+//   console.log(sto.applyStore('a'));
 
+// }).catch(e => console.log(e));
 
+try {
 
+  $('#btn').click( () => {
 
+    const input = $('#input').val();
 
+    const analiser = new IVProgParser(input, ivprogLexer);
 
+    try {
 
+      const data = analiser.parseTree();
 
+      const proc = new IVProgProcessor(data);
 
+      proc.registerInput(domIn);
 
+      domOut.clear();
 
+      proc.registerOutput(domOut);
 
+      proc.interpretAST().then(sto => editor.load(sto.store))
 
+        .catch( e => alert(e));
 
+    } catch (error) {
 
+      alert(error);
 
+    }
 
+    
+  });
 
+} catch(a) {
 
+  console.log(a);
 
+}
 
+}

+ 4 - 7
js/semantic/semantic-buttons.js
Datei anzeigen 

@@ -36,11 +36,8 @@ var button_ready = function() {
 
 
   $('.program_signature_text').text(i18n('program'));
 
 
-
 
-  $('.add_function_button').on('click', addFunctionHandler);
 
-
 
   // Atualiza a tela do algoritmo
 
-  renderAlgorithm();
 
+  //renderAlgorithm();
 
 
   $('.ivprog_visual_panel').removeClass("loading");
 
 
@@ -62,9 +59,9 @@ var button_ready = function() {
 
     animation: 100,
 
     ghostClass: 'ghost',
 
     group: 'functions_divs_drag',
 
-    onEnd: function (evt) {
 
-      updateSequenceFunctionHandler(evt.oldIndex, evt.newIndex);
 
-    }
 
+    // onEnd: function (evt) {
 
+    //   updateSequenceFunctionHandler(evt.oldIndex, evt.newIndex);
 
+    // }
 
   });
 
 
 };

+ 43 - 0
js/visualUI/functions.js
Datei anzeigen 

@@ -0,0 +1,43 @@
 
+import $ from 'jquery';
 
+import { Types } from './../ast/types';
 
+import * as Modelos from './visual';
 
+import { LocalizedStrings } from './../services/localizedStringsService';
 
+
 
+var counter_new_functions = 0;
 
+var counter_new_parameters = 0;
 
+var counter_new_variables = 0;
 
+var counter_new_globals = 0;
 
+
 
+const programa = new Modelos.Programa()
 
+const funcaoPrincipal = new Modelos.Funcao(LocalizedStrings.getUI("start"), Types.VOID, 0, [], true);
 
+funcaoPrincipal.comentario_funcao = new Modelos.Comentario(LocalizedStrings.getUI('text_comment_main'));
 
+programa.adicionarFuncao(funcaoPrincipal);
 
+
 
+function addFunctionHandler() {
 
+	new_function = new Modelos.Funcao(LocalizedStrings.getUI("new_function") + "_" + counter_new_functions, Types.VOID, 0, new Array(), false, false, null, new Comentario(LocalizedStrings.getUI('text_comment_start')));
 
+	programa.adicionarFuncao(new_function);
 
+
 
+	counter_new_functions ++;
 
+	//renderAlgorithm();
 
+}
 
+
 
+function addGlobalVar() {
 
+	var v = new Modelos.Variavel(Types.INTEGER, LocalizedStrings.getUI('new_global') + '_' + counter_new_globals, 1);
 
+	counter_new_globals ++;
 
+
 
+	programa.adicionarGlobal(v);
 
+	//renderAlgorithm();
 
+}
 
+
 
+export function initVisualUI () {
 
+  // MUST USE CONST, LET, OR VAR !!!!!!
 
+  const mainDiv = $('#visual-main-div');
 
+  // fill mainDiv with functions and globals...
 
+  // renderAlgorithm()...
 
+  $('.add_function_button').on('click', () => {
 
+    addFunctionHandler()
 
+  });
 
+  $('.add-globalVar-button').on('click', () => {
 
+    addGlobalVar()
 
+  });
 
+}

js/ivprog-visual-functions-1.0.js → js/visualUI/old_functions.js
Datei anzeigen


js/ivprog-visual-1.0.js → js/visualUI/old_visual.js
Datei anzeigen


+ 76 - 0
js/visualUI/visual.js
Datei anzeigen 

@@ -0,0 +1,76 @@
 
+import { Types } from './../ast/types';
 
+
 
+const tiposComandos = Object.freeze({comment:"comment", reader:"reader", writer:"writer"});
 
+
 
+export class Variavel {
 
+
 
+  constructor (tipo, nome, valor, dimensoes = 0, eh_constante = false, linhas = 0, colunas = 0) {
 
+    this.tipo = tipo;
 
+    this.nome = nome;
 
+    this.valor = valor;
 
+    this.dimensoes = dimensoes;
 
+    this.eh_constante = eh_constante;
 
+    this.linhas = linhas;
 
+    this.colunas = colunas;
 
+  }
 
+}
 
+
 
+export class Funcao {
 
+
 
+  constructor (nome, tipo_retorno = Types.VOID, dimensoes_retorno = 0, lista_parametros = null, eh_principal = false, esta_oculta = false, variaveis = [], comentario_funcao = null) {
 
+    this.nome = nome;
 
+    this.tipo_retorno = tipo_retorno;
 
+    this.dimensoes_retorno = dimensoes_retorno;
 
+    this.lista_parametros = lista_parametros;
 
+    this.eh_principal = eh_principal;
 
+    this.esta_oculta = esta_oculta;
 
+    this.variaveis = variaveis;
 
+    this.comentario_funcao = comentario_funcao;
 
+    this.comandos = [];
 
+  }
 
+}
 
+
 
+export class Comentario {
 
+  
+  constructor (texto_comentario) {
 
+    this.tipo = tiposComandos.comment;
 
+    this.texto_comentario = texto_comentario;
 
+  }
 
+}
 
+
 
+export class Comando {
 
+
 
+  constructor (tipo) {
 
+    this.tipo = tipo;
 
+  }
 
+} 
+
 
+export class Expressao {
 
+
 
+  constructor (conteudo) {
 
+    this.conteudo = conteudo;
 
+  }
 
+}
 
+
 
+
 
+export class Programa {
 
+  constructor () {
 
+    this.funcoes = [];
 
+    this.globais = [];
 
+  };
 
+
 
+  adicionarFuncao (funcao) {
 
+    this.funcoes.push(funcao);
 
+  }
 
+
 
+  adicionarVariavel(funcao, variavel) {
 
+    if (this.funcoes[funcao].variaveis === null) {
 
+      this.funcoes[funcao].variaveis = [];
 
+    }
 
+    this.funcoes[funcao].variaveis.push(variavel);
 
+  }
 
+
 
+  adicionarGlobal (variavel) {
 
+    this.globais.push(variavel);
 
+  }
 
+}

+ 0 - 126
main.html
Datei anzeigen 

@@ -1,126 +0,0 @@
 
-<!DOCTYPE html>
 
-<html>
 
-  <head>
 
-    <title></title>
 
-    <link rel="stylesheet" type="text/css" href="js/semantic/semantic.min.css">
 
-    <link rel="stylesheet" type="text/css" href="css/ivprog-visual-1.0.css">
 
-    <script src="js/jquery-3.3.1.min.js"></script>
 
-
 
-    <script src="js/iassign-integration-functions.js"></script>
 
-
 
-    <script src="i18n/i18n-engine.js"></script>
 
-
 
-    <script src="js/semantic/semantic.min.js"></script>
 
-    <script src="js/semantic/semantic-buttons.js"></script>
 
-
 
-    <script src="js/ivprog-visual-1.0.js"></script>
 
-    <script src="js/ivprog-visual-functions-1.0.js"></script>
 
-
 
-    <script src="js/jquery-ui.js"></script>
 
-    <script src="js/Sortable.js"></script>
 
-  </head>
 
-  <body>
 
-   
-    <div class="ui one column doubling stackable grid container">
 
-      <div class="column">
 
-        <div class="ui container main_title">
 
-          <h2>iVProg</h2>
 
-          <span>interactive coding</span>
 
-        </div>
 
-
 
-        
-
 
-        <div class="ui container content_margin">
 
-          <div class="content_sub_margin">
 
-              <div class="blue ui ivprog_format buttons">
 
-                <button class="ui button active">Visual</button>
 
-                <button class="ui button">Textual</button>
 
-                <button class="ui button">XML</button>
 
-              </div>
 
-
 
-              <a class="ivprog_format_info">
 
-                <i class="circular inverted some-wrapping-div teal info icon small label ivprog_format_info popup"></i>
 
-              </a>
 
-              <div class="ui custom popup">
 
-                Choice how you prefer to develop. If disabled, teacher doesn't allow this change. <a href="#">See documentation about it.</a>
 
-              </div>
 
-            </div>
 
-          </div>
 
-
 
-
 
-      </div>
 
-      
-    </div>
 
-
 
-    
-
 
-    
-
 
-    <div class="ui raised container segment div_to_body">
 
-
 
-      <div class="ui icon menu center aligned container" style="width: 438px; margin-top: -10px;">
 
-        <a class="item">
 
-          <i class="file icon"></i>
 
-        </a>
 
-        <a class="item">
 
-          <i class="save icon"></i>
 
-        </a>
 
-        <a class="item">
 
-          <i class="upload icon"></i>
 
-        </a>
 
-        <a class="item">
 
-          <i class="download icon"></i>
 
-        </a>
 
-        <a class="item undo_button disabled">
 
-          <i class="undo icon"></i>
 
-        </a>
 
-        <a class="item">
 
-          <i class="redo icon"></i>
 
-        </a>
 
-        <a class="item">
 
-          <i class="play icon"></i>
 
-        </a>
 
-        <a class="item">
 
-          <i class="stop icon"></i>
 
-        </a>
 
-        <a class="item">
 
-          <i class="help icon"></i>
 
-        </a>
 
-      </div>
 
-
 
-      <div class="ui one column container segment ivprog_visual_panel loading">
 
-        <div class="program_signature"><span class="program_signature_text">programa</span> { </div>
 
-
 
-        <div class="global_var">
 
-          <div class="ui icon button" onclick="addGlobalVar()"><i class="icon superscript"></i></div>
 
-          <div class="list_globals"></div>
 
-        </div>
 
-
 
-        <div class="all_functions list-group" id="listWithHandle">
 
-
 
-        </div>
 
-
 
-
 
-        <div class="ui teal small labeled icon button add_function_button">
 
-          <data class="i18n" value="Function">Function</data>
 
-          <i class="add icon"></i>
 
-        </div>
 
-        <div class="program_final">}</div>
 
-
 
-      </div>
 
-      
-    </div>
 
-
 
-    <i class="icon trash alternate outline huge" onmouseover="console.log('oi');" ></i>
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-  </body>
 
-</html>

+ 73 - 0
runner.html
Datei anzeigen 

@@ -0,0 +1,73 @@
 
+<!DOCTYPE html>
 
+<html>
 
+<head>
 
+  <link rel="stylesheet" type="text/css" href="js/semantic/semantic.min.css">
 
+  <style>
 
+    .ivprog-io-output {
 
+      border: 1px solid gainsboro;
 
+      width: 80%;
 
+      height: 360px;
 
+      overflow-y: scroll;
 
+      background-color: black;
 
+      color: white;
 
+    }
 
+
 
+    .ivprog-io-input {
 
+      width: 80%;
 
+      margin-top: 10px;
 
+      border: 1.5px solid green;
 
+      height: 3rem;
 
+      color: black;
 
+      font-size: 12pt;
 
+    }
 
+  </style>
 
+  <title></title>
 
+</head>
 
+<body>
 
+    <div style="padding-top: 50px;content: ''"></div>
 
+  <div class="ui container grid">
 
+    
+    <div class="four wide column">
 
+      <div class="row">
 
+        <textarea class="ui form control" name="input" id="input" cols="100" rows="30">
 
+            programa {
 
+
 
+              const real C = 5.5
 
+             
+              funcao inteiro inicio() {
 
+               inteiro a = 8
 
+               se (a * C > 80) {
 
+                a = 0
 
+               } senao {
 
+                 a = -1
 
+               }
 
+              }
 
+             }
 
+        </textarea>
 
+      </div>
 
+      <div class="row">
 
+          <button class="ui button" id="btn">Run</button>
 
+      </div>
 
+    </div>
 
+    <div class="six wide column">
 
+      <div id="dom-out" class="ivprog-io-output">
 
+
 
+      </div>
 
+      <input id="dom-in" type="text" class="ivprog-io-input">
 
+    </div>
 
+    <div class="six wide column">
 
+        <div style="overflow-y: scroll; height: 70%;">
 
+            <pre id="json-renderer" class="ui right floated"></pre>
 
+        </div>
 
+    </div>
 
+  </div>
 
+  
+  
+</body>
 
+<script type="text/javascript" src="js/jquery.json-editor.min.js"></script>
 
+<script type="text/javascript" src="build/ivprog.bundle.js"></script>
 
+
 
+<script>
 
+  ivprogCore.runner();
 
+</script>
 
+</html>

+ 3 - 2
webpack.config.js
Datei anzeigen 

@@ -3,10 +3,11 @@ var webpack = require('webpack');
 
 module.exports = {
 
     entry: './js/main.js',
 
     mode: 'development',
 
-    watch: true,
 
+    watch: false,
 
     output: {
 
         path: path.resolve(__dirname, 'build'),
 
-        filename: 'ivprog.bundle.js'
 
+        filename: 'ivprog.bundle.js',
 
+        library: 'ivprogCore'
 
     },
 
     node: {
 
         fs: 'empty',