refactoring of html templates and javascript code

[WolfgangFahl]

Discussed in https://github.com/justpy-org/justpy/discussions/471

^{Originally posted by **WolfgangFahl** August 30, 2022} Currently justpy creates a html page for startup that is 2405 lines long. Unfortunately this verbosity leads to hiding the clean structure behind the code which is shown below: ```html

``` **the core Vue component 'app1'** ```javascript var app1 = new Vue({ el: '#components', data: { justpyComponents: justpyComponents }, render: function (h) { var comps = []; for (var i = 0; i < this.justpyComponents.length; i++) { if (this.justpyComponents[i].show) { comps.push(h(this.justpyComponents[i].vue_type, { props: { jp_props: this.justpyComponents[i] } })) } } return h('div', {}, comps); } }); ``` The html is a mixture of css and javascript imports and declarations. A separation of concern is not visible and would IMHO be the core task of refactoring making sure that only a few lines of clean html are left that are commented to show what the parts do. To get this new clean result i suggest to get rid of the Jinja templates and instead write the generator for the code as a pure python code with an object oriented structure. The logic to be used for version handling and other configuration task can then be implemented much clean and be tested and debugged. Jinja templates are executed out of the standard python debugging context and are a nightmare for testing and debugging. The extra value the templates seem to bring at first look does IMHO evaporate as soon as maintainance work as we need to do is to be done. **First step - replace %include** The explosion of html lines in the code is mostly from the use of the %include% option of the Jinja templates: ``` {% include 'js/event_handler.js' %} {% include 'js/html_component.js' %} {% include 'js/quasar_component.js' %} {% include 'js/chartjp.js' %} {% include 'js/aggrid.js' %} {% include 'js/iframejp.js' %} {% include 'js/deckgl.js' %} {% include 'js/altairjp.js' %} {% include 'js/plotlyjp.js' %} {% include 'js/bokehjp.js' %} {% include 'js/katexjp.js' %} {% include 'js/editorjp.js' %} ```

[WolfgangFahl]

we need to be able to talk about issues and debugging in code with comments like - there is a problem in line xyz of somecode.js in function somefunction ...

[WolfgangFahl]

let justpy_core=new JustpyCore(
      this, // window
      'JustPy', // title
      false, // page_ready
      false, // result_ready     
      0, // reload_interval
      false   // debug
    );

is now generated by the template.py modules's Context class. The following code still has to be done:

{% if page_options.redirect %}
        location.href = '{{ page_options.redirect|safe }}';
    {%endif %}
    {% if page_options.display_url is not none %}
        window.history.pushState("", "", '{{ page_options.display_url }}');
    {%endif %}
    var page_id = {{ page_id | safe }};
    var websocket_id = '';
    var use_websockets = JSON.parse('{{ use_websockets }}');
    var justpyComponents = {{ justpy_dict.replace('</' + 'script>', '</" + "script>') | safe }};