Research and Implement simplified way to add Brython to a page

[ghost]

• Research and Implement a simplified way to add Brython to a page.
• 1 line added to add Brython to a existing page. K.I.S.S.
• Move the onLoad somewhere?, bind a callback?, on url parameter?, something else?
• Update Docs to reflect that change. Add Async and Defer script tag attributes to Docs?

Context:
5c5c44e#commitcomment-8631942

e770f9e

😔

[ghost]

How about something like:

(function () {
var _s = document.createElement('script')
_s.type = "text/javascript"
_s.src = "http://brython.info/src/brython_dist.js"
document.head.appendChild(_s)
_s.onload = function () { brython({ debug: 1 }) }
})();

Its not a one line, but pretty close

[ghost]

_s.async = "async"; ❔

[ghost]

okay. code with async added.

(function () {
var _s = document.createElement('script');
_s.type = "text/javascript";
_s.async=true;
_s.src = "http://brython.info/src/brython_dist.js";
document.head.appendChild(_s);
_s.onload = function () { brython({ debug: 1 }) };
})();

[ghost]

I think that with HTML5 you can drop the type thing...

(function() {
    var _s = document.createElement('script');
    _s.async=true;
    _s.src = "http://brython.info/src/brython_dist.js";
    _s.onload = function() { brython({ debug: 1 }) };
    document.head.appendChild(_s);
})();

Pierre have done a nice snippet to try to load it locally, if fail, load it from CDN,
that should be nice to add too, what do you think ?, or its too much ?

[ghost]

Where is the snippet by Pierre? I'd like to take a look at it.

We could put the above code in a file (maybe called brython_loader.js) and
call it from any page like so:

<script src="brython_loader.js" async> So in some ways that would give you your single line of code.... On Tue, Dec 23, 2014 at 12:30 PM, Juan notifications@github.com wrote: > I think that with HTML5 you can drop the type thing... > > (function() { > var _s = document.createElement('script'); > _s.async=true; > _s.src = "http://brython.info/src/brython_dist.js"; > _s.onload = function() { brython({ debug: 1 }) }; > document.head.appendChild(_s); > })(); > > Pierre have done a nice snippet to try to load it locally, if fail, load > it from CDN, > that should be nice to add too, what do you think ?, or its too much ? > > — > Reply to this email directly or view it on GitHub > https://github.com//issues/69#issuecomment-67982983.

[ghost]

No, it was a Billy dude :P

• https://groups.google.com/forum/?utm_medium=email&utm_source=footer#!msg/brython/opfbew4EWyk/zY0Jn0zuUygJ

Yeah that was the idea a single line snippet of a small JS file.

[PierreQuentel]

At the top of brython_builtins.js there is a piece of code to identify the url matching the directory where the Brython distribution stands. This is required for subsequent imports from the standard library

To get this url, the code takes the last loaded script, ie the last element in document.getElementsByTagName('script'). If the script is loaded asynchronously, you can't be sure if the last script is really the script you are currently running

The other issue with <script src="brython_loader.js"> is that you can't specify which set of files you want to load : is is only brython.js, or brython_dist.js, or the set of all individual files of the Brython distribution (as in tests/console.html for instance) ?

[ghost]

Its that a Bug or a Feature ?

I think that all modern JS lib should be compatible with HTML5 new features like Async,
There should be a way to try...catch it and workaround it...

BTW interesting discussion 😄

[ghost]

Pierre,

After looking at the first few lines of brython_builtins.js, I have a few questions.
Doesn't document.getElementsbyTagname('script'), return a list of script elements by the order they are defined (or placed) on the web page (and not by the order they are loaded or parsed)? How do we know that the last script tag even has a .src attribute?

Billy

[PierreQuentel]

I found this solution in the stackoverflow answers to "javascript get current script path". They specify that the script must be loaded synchronously

Previously the path of the Brython distribution was found in function brython(), once all the page was loaded ; the program would search for a script with one of the names "brython.js", "brython_dist.js" or "py2js.js".

I replaced it because one of these days I want to introduce the possibility to load user-specific versions of the brython core engine, for instance the core scripts + all the Python scripts used for an application. In this case, the name of the distribution will be defined by the user, so we can't rely on the script name

If you find another method that also works with an asynchronous load of the Brython engine it's fine for me

[ghost]

I think for now, we could remove the async requirement, and later we could
look for possible solutions to allow an async mode so that loading doesn't
interfere with other components on the page.

On Wed, Dec 24, 2014 at 8:38 AM, Pierre Quentel notifications@github.com
wrote:

I found this solution in the stackoverflow answers to "javascript get
current script path". They specify that the script must be loaded
synchronously

Previously the path of the Brython distribution was found in function
brython(), once all the page was loaded ; the program would search for a
script with one of the names "brython.js", "brython_dist.js" or
"py2js.js".
I replaced it because one of these days I want to introduce the
possibility
to load user-specific versions of the brython core engine, for inst

2014-12-24 14:41 GMT+01:00 Billy Earney notifications@github.com:

Pierre,

After looking at the first few lines of brython_builtins.js, I have a
few
questions.
Doesn't document.getElementsbyTagname('script'), return a list of script
elements by the order they are defined (or placed) on the web page (and
not
by the order they are loaded or parsed)? How do we know that the last
script tag even has a .src attribute?

Billy

—
Reply to this email directly or view it on GitHub
#69 (comment).

—
Reply to this email directly or view it on GitHub
#69 (comment).

[ghost]

👍

[ghost]

can we close this issue? Has it been addressed?

[ghost]

So the Final Version should be a one-liner:

(function(){var _s=document.createElement('script');_s.src="http://brython.info/src/brython_dist.js";_s.onload=function(){brython({debug:1}) };document.head.appendChild(_s);})();

Or expanded:

(function() {
    var _s = document.createElement('script');
    _s.src = "http://brython.info/src/brython_dist.js";
    _s.onload = function() { brython({ debug: 1 }) };
    document.head.appendChild(_s);
})();

❓

[ghost]

or place the "one-liner" in a file and import it with a script tag, like so:

<script type="type/javascript" src="one-liner.js"></script>

On Tue, Jan 6, 2015 at 1:25 AM, Juan notifications@github.com wrote:

So the Final Version should be a one-liner:

(function(){var _s=document.createElement('script');_s.src="http://brython.info/src/brython_dist.js";_s.onload=function(){brython({ debug:1}) };document.head.appendChild(_s);})();

Or expanded:

(function() {
var _s = document.createElement('script');
_s.src = "http://brython.info/src/brython_dist.js";
_s.onload = function() { brython({ debug: 1 }) };
document.head.appendChild(_s);
})();

[image: ❓]

—
Reply to this email directly or view it on GitHub
#69 (comment).

[PierreQuentel]

How do you pass arguments to the function brython() in this case ?

[ghost]

How about this:

<script type="text/javascript" data-brython-options="debug:1;variable2:blah"></script>

On Sun, Jan 11, 2015 at 1:16 PM, Pierre Quentel notifications@github.com
wrote:

How do you pass arguments to the function brython() in this case ?

—
Reply to this email directly or view it on GitHub
#69 (comment).

[ghost]

And as URL parameters ?

[ghost]

I have added an implementation of this to the repo:

See file: /site/one-liner.html , for an example.

This html file uses a new file called /src/one-liner.js, which contains some of the code (described) above, but also adjusts to higher debug values to put script tags of all the py_*.js files instead of the one file brython_dist.js. The script tag that "imports" one-liner.js can contain an attribute "data-brython-options" which accepts a string (a json parseable string) ,and converts it into an object that the brython function accepts after page load.

Billy

[ghost]

Has anyone taken a look at this? Any comments?

[ghost]

I look at this. I leave comments. 😄

[ghost]

What do you think of also providing a tiny .html file to use with HTML Import ❔
http://caniuse.com/#feat=imports Webkit, Chrome, Android, Firefox can use it now.

[kikocorreoso]

@juancarlospaco from the link you provided it seems FF is not supporting that and they do not have plans to do it... 😞

[ghost]

I have pushed some changes to brython_loader.js.

I have decided to create two attributes in the script tag that loads brython_loader.js:
data-loader-options and data-brython-options, Both of these take a json string (and will be parsed by JSON.parse). What ever is passed to data-brython-options will be parsed by JSON.parse and the resultant object is passed to the brython function, which is called on page load.

data-loader-options is also a json string (will be parsed by JSON.parse), and will be used to figure out how load brython source code. the debug variable describes if we should load brython.js, or the individual brython files (py_*.js). If we set VFS to true, we also load py_VFS.js. There is also a dist variable, if set to true, will load the brython_dist.js file (and this will ignore all other passed options).

Here's an example which is taken from sites/one-liner.html:

<script type="text/javascript" src="/src/brython_loader.js" data-loader-options='{"VFS": true, "debug":10}' data-brython-options='{"debug":1,"cache":"none"}'></script>

[ghost]

Thats epic.
Im Ok with this as Close status if you feel like its Done 😺