add auto run on load - Githubissues

haz commented 3 years ago

This would be quite useful. I've been messing around to accomplish a few things:

Autoload and run one chunk of code.
Hide that load library that's run once.
Allow for the console output to be placed in a pre tag (spacing matters)

Few hurdles I had to cross:

Recursively call a (500ms) delayed check on the interpreter being initialized.
Pretty brittle jquery access to run code (going based on input value didn't work).
Had to run the code once before hi-jacking the console behaviour (this one took me a while to figure out :S).

In case you'd like to have a look:

  <wc-code-zone mode="python" theme="monokai">
    <wc-code id="lib-code" src="wff.py" readonly>
    </wc-code>
    <wc-code id="user-code" src="main.py">
    </wc-code>
  </wc-code-zone>

  <script>

    function check_and_delay() {
      if (WCCode.zones.get(0).interpreter && WCCode.zones.get(0).interpreter.initialized) {

        $("#lib-code input")[0].click();

        $('.wc-code-console').remove();
        $("#user-code input")[0].click();

        var console_output = `
        <div class="card border-dark mb-3">
          <div class="card-header"><h5 class="card-title">Output</h5></div>
          <div class="card-body text-dark">
            <pre class="wc-code-console2"></pre>
          </div>
        </div>`;
        $('#user-code').append(console_output);

        WCCode.zones.get(0).console.addEl = function (t) { $('#user-code .wc-code-console2').append(t + '\n'); };
        WCCode.zones.get(0).console.addText = function (t) { WCCode.zones.get(0).console.addEl(t) };
        WCCode.zones.get(0).console.clear = function () { $('#user-code .wc-code-console2').html(''); };
        console.log('Ready!');

      } else {
        setTimeout(check_and_delay, 500);
      }
    }

    $(document).ready(function () {
      $('#lib-code').hide();
      check_and_delay();
    });
  </script>

I'll be using this common pattern -- one boilerplate chunk of code (here, wff.py) and one user-facing code that students can play around with. With bootstrap touching things up a bit (you can see the card HTML used in the example above), I think this should do nicely embedded in our school's learning management system.

Thanks for the great project!

therealadityashankar commented 3 years ago

Holy crap!, I'm amazed by how much code you managed to figure out despite the lack of documentation (I'm so sorry, I was quite naive when I created this library).

I will look into this issue, I think this code would also be benefited if there was an on-load event that would be triggered when the code is run (https://github.com/vanillawc/wc-code/issues/18#issue-965545987)

PRs would be appreciated, I will try to get to this when I find the time

therealadityashankar commented 3 years ago

also heads-up this entire codebase needs a massive rewrite, and move to the shadow dom (which I should have done to begin with), (and needs to get rid of the "constructor" completely)

Also about jquery, wc-code utilizes the iodide project for python underneath, the last example at https://alpha.iodide.io/tryit/ is how you may import javascript libraries in python

vanillawc / wc-code

add auto run on load #9