Skip to content

JavaScript/HTML code generation: follow-up improvements

We are adding JavaScript code generation in #272 (closed). This issue concerns follow-ups:

  • Not/partially supported features (support them or add precondition checks, and document preconditions):

  • Functionality/correctness:

    • Fix print declarations: (!747 (merged))
      • There is now an empty line between state printing and print declaration post prints. Do the empty line after post prints instead. Similarly for initial state and initial prints. It should be clear what belongs to what.
      • Too many times pre/post in initial state. See test model: issue715_html_test_print.cif
      • Escapes don't work properly (\" becomes %22, for instance). See test model: issue715_html_test_print.cif
      • No need for \r, only \n is enough, for HTML textarea.
    • Check whether equality comparison (tuples, Utils.objEquals, etc) satisfies CIF semantics. See !710 (comment 1476565). (!725 (merged))
    • Improve exception handling in the generated code / templates, reporting it to the console. See !716 (comment 1519945). (!1169 (merged))
    • realToStr in utilities template does not produce output in CIF syntax. See !686 (comment 1294138) and riklubking/escet#29.
    • Synchronous/asynchronous handling of user clicks. To be investigated. See !716 (comment 1520603).
    • SVG presentation attributes vs CSS style attributes. How to determine them and set them properly. See !716 (comment 1519943). (!1243 (merged), #1157 (closed))
    • SVG output mapping does not always produce string typed values currently, as it does not use runtimeToString like the CIF simulator. Is this a problem? See !716 (comment 1519946).
    • SVG output mapping for text nodes may be different currently than in the CIF simulator. Check this. See !716 (comment 1519947).
    • All variable references are generated in the same way, accessing them as fields of the main class. For state variables, this is fine. For temporary variables, local variables and parameters of functions, etc, this is wrong:
    • Event names are not logged, but the indices. (!721 (merged))
    • Something is visible between 'Download log' and 'Hide' buttons. The 'Download log' button does not function correctly. (!723 (merged))
    • Check that click listeners are not re-added when the execution in the browser is reset.
    • The code generated for the specific model may use the same names as code that is always present. We need to prevent name conflicts.
    • Testing
      • Make the CIF code generator tests also test JS/HTML targets. (!1059 (merged))
      • Add additional tests for what is not yet covered.
    • Utilities class is missing intToReal function. (!732 (merged))
    • Calls to functions from JavaScriptRealTypeInfo.STANDARD_FUNCTIONS don't get a proper prefix, and thus crash. (!738 (merged))
    • JavaScriptCodeGen.performAssign uses getReadVarInfo for containerInfo, while it is writing to the container. May also affect other targets.
    • For HTML code generation, input variables have no values, and accessing them leads to crashes.
    • Tuples don't work, as shown by this test model: issue715_html_test_tuple.cif (!746 (merged))
    • There is no object equality in JS:
      • Search for object equality in comments.
      • Reconsider equalsObj utility method.
      • Check JavaScript*TypeInfo classes.
    • There is no Integer vs int difference like in Java:
      • Check JavaScriptIntTypeInfo's convertIntNegate, convertAddition, convertSubtraction, convertDiv, convertMod, convertMultiplication.
      • Check JavaScript*TypeInfo classes.
    • For SVG input mappings we currently use boolean variables as additional guards for events, to disallow them until clicked. The CIF simulator uses a single queue for all clicks, so that multiple clicks in quick successing can be processed, rather than our boolean toggling, which only allows one click at a time and discards any consecutive clicks until the first is processed, and to preserve the order of the clicks. See !716 (comment 1521660). Also, if objects are clicked, but a guard prevents the event, the click is remembered until the event is enabled later on. This means the order of clicks is not preserved. (!784 (merged))
    • CSS styling in generated HTML pages for hovering over interactive SVG input elements is not specific enough in case multiple SVG images contain an element with the same id. (!784 (merged))
    • Code generated for JS contains HTML/SVG-related parts. At the very least comments of empty sections. Check what should be generated for JS/HTML.
    • SVG copy/move issues:
      • Moved objects may not be position exactly at the right position. See !748 (comment 1527081).
      • Copy and move are missing the runtime error checks.
    • Constants defined in terms of other constants give a TypeError. See #715 (comment 1611585). (!766 (merged))
    • Element IDs need to be escaped when used in CSS selectors. See #715 (comment 2137124). (!869 (merged))
    • CIF 'tank' example model crashes. If we change edge when tank.V <= 2 to edge when tank.V <= 0.2, generate HTML and run it, it crashes with tank.html:1597 Error: <rect> attribute height: A negative value is not valid. ("-1.824264209557593") / updateUI @ tank.html:1597. and tank.html:1039 Uncaught tankException message: "Invalid operation: sqrt(-0.24323522794101238)." (solved by #1127 (closed))

  • Options:

  • Documentation:

    • Check and improve documentation (correctness, content, style, etc). (!726 (merged))
    • Explain resizing the lower area. (!730 (merged))
    • Explain default transition/state logging in JS docs.
    • Replace final C89 naming by JavaScript in JS docs. (!762 (merged))
    • Make JavaScript and HTML code generation a stable feature (no longer experimental).

  • Code cleanup (for generator, generated code and templates):

    • Do a pass over !716 (closed) to improve small things. (!716 (closed) / !721 (merged))
    • Improve JavaDoc/comments. (!716 (closed) / !721 (merged))
    • Improve exception handling in code generator. (!716 (closed) / !721 (merged))
    • Move any HTML/CSS/JS generation out of Java code and into templates, where possible.
    • Double check that all HTML, CSS, JS in templates is needed.
    • The execEvent* methods use edge indices rather than event indices. Would be better to use event indices. See #715 (comment 1523083). Applies not only to JS/HTML output.
    • Inconsistent use of eventId and eventIdx in JavaScriptCodeGen. (!724 (merged))
    • Remove optimized code for empty arrays in JavaScriptArrayTypeInfo.

  • Other improvements / nice to have features:

    • Allow changing the speed in the generated HTML. See also #1179 for similar request for the CIF simulator. (!1507 (merged), !1509 (merged))
    • Allow disabling state logging in generated HTML pages. (!841 (merged))
    • Allow optionally logging algebraic variables in state logging. (#1381 (closed))
    • Don't generate an enum when not needed. See #700.
    • Templates have JSDoc type hints, but generated code does not. Could add it. See !710 (comment 1474651).
    • Generate trace files that capture a browser execution, for replay in the CIF simulator. See #703 (closed), #704 (closed) and #705.
    • Allow SVGs in the browser to be besides each other rather than under each other.
    • Consider making HTML the default target for the code generator. (!1164 (merged))
    • Allow to disable log panel scroll-lock. Currently, log scrolls when new entries are added. See #715 (comment 1525016).
    • Log state to console after taking an event transition, to ease debugging of the generated JS/HTML code. (!737 (merged))
    • 'Eclipse ESCET' is part of the generated HTML page titles. Is that desired? It is generated by Eclipse ESCET, not part of Eclipse ESCET.
    • Include the version of the generator in the generated HTML, such that we can trace that back in case of issues.
    • Include the version of the model in the generated HTML. This was requested. Maybe we can include the specification's @doc comments in the HTML page?
    • Consider coloring the page blue instead of yellow, as it is generated by CIF, not ESCET in general. Probably should use the CIF website blue color, with 12.5% opacity, like on the CIF website.
    • The log pane buttons now have text. Instead of the Show/Hide texts, could use Unicode symbols 'U+25B2 BLACK UP-POINTING TRIANGLE' and 'U+25BC BLACK DOWN-POINTING TRIANGLE'. See https://symbl.cc/en/25B2/ and https://symbl.cc/en/25BC/. Could also use Bootstrap icons. Applies to other buttons, like settings and download as well.
    • Allow specifying the initial values of input variables for HTML code generation, like the CIF simulator also supports it.
    • Add an option to define the order of SVG visualizations (#1398)
    • Add options to configure interactive HTML element outlines, similar to simulator options added in #1352 (closed).
Edited by Dennis Hendriks

Copyright © Eclipse Foundation AISBL. All rights reserved.     Privacy Policy | Terms of Use | Copyright Agent