Browse Source

Implement asset optimization to improve loading time and versioning

Lucas de Souza 5 years ago
parent
commit
4dc5d16361
6 changed files with 234 additions and 33 deletions
  1. 13 17
      index.html
  2. 4 2
      js/typeSystem/parsers.js
  3. 6 7
      runner.html
  4. 118 0
      templates/index.html
  5. 77 0
      templates/runner.html
  6. 16 7
      webpack.config.js

+ 13 - 17
index.html

@@ -13,13 +13,6 @@
     <link rel="stylesheet" type="text/css" href="css/ivprog-visual-1.0.css">
     <link rel="stylesheet" type="text/css" href="css/ivprog-term.css">
     <script src="js/jquery-3.3.1.min.js"></script>
-    <script src="js/iassign-integration-functions.js"></script>
-    <script src="build/ivprog.bundle.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>
     
   </head>
   <body>
@@ -109,14 +102,17 @@
     </div>
 
   </div>
-
-    <script>
-      $(document).ready(() => {
-        ivprogCore.LocalizedStrings.updateTagText();
-        ivprogCore.initVisualUI();
-        prepareEnvironment();
-      });
-    </script>
-
-  </body>
+  <script type="text/javascript" src="build/vendors~main.3159d28bcf7272c02dde.js"></script><script type="text/javascript" src="build/main.2d3af48627bfedf98bba.js"></script></body>
+  <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>
+  <script src="js/iassign-integration-functions.js"></script>
+  <script>
+    $(document).ready(() => {
+      ivprogCore.LocalizedStrings.updateTagText();
+      ivprogCore.initVisualUI();
+      prepareEnvironment();
+    });
+  </script>
 </html>

+ 4 - 2
js/typeSystem/parsers.js

@@ -40,11 +40,13 @@ export function toBool (str) {
 export function convertBoolToString (bool) {
   const lexer = LanguageService.getCurrentLexer();
   const instance = new lexer(null);
+  let result = null;
   if (bool) {
-    return instance.literalNames[lexer.RK_TRUE];
+    result = instance.literalNames[lexer.RK_TRUE];
   } else {
-    return instance.literalNames[lexer.RK_FALSE];
+    result = instance.literalNames[lexer.RK_FALSE];
   }
+  return result.replace(/'/g,"");
 }
 
 export function convertToString(value, type) {

+ 6 - 7
runner.html

@@ -25,6 +25,8 @@
     }
   </style>
   <title></title>
+  <script src="js/jquery-3.3.1.min.js"></script>
+  <script type="text/javascript" src="js/jquery.json-editor.min.js"></script>
 </head>
 <body>
     <div style="padding-top: 50px;content: ''"></div>
@@ -65,14 +67,11 @@
   </div>
   
   
-</body>
-
-<script 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>
+<script type="text/javascript" src="build/vendors~main.3159d28bcf7272c02dde.js"></script><script type="text/javascript" src="build/main.2d3af48627bfedf98bba.js"></script></body>
 
 <script>
-  ivprogCore.runner();
+  ( function () {
+    ivprogCore.runner();
+  })();
 </script>
 </html>

+ 118 - 0
templates/index.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <meta http-equiv="cache-control" content="no-cache">
+    <meta http-equiv="cache-control" content="no-store">
+    <meta http-equiv="cache-control" content="max-age=0">
+    <meta http-equiv="expires" content="-1">
+    <meta http-equiv="pragma" content="no-cache">
+    <title></title>
+    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+    <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">
+    <link rel="stylesheet" type="text/css" href="css/ivprog-term.css">
+    <script src="js/jquery-3.3.1.min.js"></script>
+    
+  </head>
+  <body>
+
+    <div class="ui height_100 add_accordion" id="ui_main_div">
+
+      <div class="title default_visual_title">
+        <i class="dropdown icon"></i>
+      </div>
+
+    <div class="content height_100">
+   
+      <div class="ui raised container segment div_to_body">
+
+        <div class="ui container main_title only_in_frame">
+          <h2>iVProg</h2>
+        </div>
+
+        <div class="ui icon menu center aligned container" style="width: 438px; margin-top: -20px;">
+          <a class="item active visual_coding_button">
+            <i class="window maximize outline icon"></i>
+          </a>
+          <a class="item textual_coding_button">
+            <i class="code icon"></i>
+          </a>
+          <a class="item upload_file_button disabled">
+            <i class="upload icon"></i>
+          </a>
+          <a class="item download_file_button disabled">
+            <i class="download icon"></i>
+          </a>
+          <a class="item undo_button disabled">
+            <i class="undo icon"></i>
+          </a>
+          <a class="item redo_button disabled">
+            <i class="redo icon"></i>
+          </a>
+          <a class="item run_button">
+            <i class="play icon"></i>
+          </a>
+          <a class="item assessment assessment_button">
+            <i class="check icon"></i>
+          </a>
+          <!--<a class="item expand_button">
+            <i class="expand arrows alternate icon"></i>
+          </a>-->
+          <a class="item help_button">
+            <i class="help icon"></i>
+          </a>
+        </div>
+
+        <div class="ui one column container segment ivprog_visual_panel loading">
+
+          <div class="global_var">
+            <i class="icon plus circle purple add_global_button"></i>
+            <i class="icon circle white back"></i>
+
+            <div class="ui icon button add-globalVar-button add_global_button purple"><i class="icon superscript"></i></div>
+
+            <div class="list_globals" id="listGlobalsHandle"></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="ui:btn_function">Function</data>
+            <i class="add icon"></i>
+          </div>
+          <div class="program_final"></div>
+
+        </div>
+
+
+        <div class="ui one column container segment ivprog_textual_panel loading" style="display: none;">
+          <textarea class="ivprog_textual_code" readonly></textarea>
+        </div>
+
+        <div id='ivprog-term' class="six column wide">
+          <div class="div_toggle_console"><i class="inverted terminal icon green button_toggle_console"></i></div>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+  </body>
+  <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>
+  <script src="js/iassign-integration-functions.js"></script>
+  <script>
+    $(document).ready(() => {
+      ivprogCore.LocalizedStrings.updateTagText();
+      ivprogCore.initVisualUI();
+      prepareEnvironment();
+    });
+  </script>
+</html>

+ 77 - 0
templates/runner.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+  <link rel="stylesheet" type="text/css" href="css/ivprog-term.css">
+
+  <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>
+  <script src="js/jquery-3.3.1.min.js"></script>
+  <script type="text/javascript" src="js/jquery.json-editor.min.js"></script>
+</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 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="console">
+      </div>
+    </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>
+  ( function () {
+    ivprogCore.runner();
+  })();
+</script>
+</html>

+ 16 - 7
webpack.config.js

@@ -1,13 +1,12 @@
 var path = require('path');
-var webpack = require('webpack');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
 var UpdateVersionPlugin = require('./updateVersionPlugin');
 
 module.exports = {
-    entry: './js/main.js',
-    mode: 'development',
+    entry: path.resolve(__dirname, 'js/main.js'),
     output: {
         path: path.resolve(__dirname, 'build'),
-        filename: 'ivprog.bundle.js',
+        filename: '[name].[contenthash].js',
         library: 'ivprogCore',
         libraryTarget: 'umd'
     },
@@ -38,12 +37,22 @@ module.exports = {
     stats: {
         colors: true
     },
-    plugins: [new UpdateVersionPlugin()],
-    /*optimization: {
+    plugins: [
+      new UpdateVersionPlugin(),
+      new HtmlWebpackPlugin({
+        template: 'templates/index.html',
+        filename: '../index.html'
+      }),
+      new HtmlWebpackPlugin({
+        template: 'templates/runner.html',
+        filename: '../runner.html'
+      })
+    ],
+    optimization: {
         splitChunks: {
             chunks: 'all'
         }
-    },*/
+    },
     devtool: 'source-map',
     watchOptions: {
         ignored: path.resolve(__dirname, '.ima_version.json')