Now I have rewritten the Tic-Tac-Toe example
to be 100% Prolog. Originally the Tic-Tac-Toe example
was conceived as a first stab in exploring the

foreign function interface (FFI) of Dogelog Player
inside the browser to register JavaScript functions
that do all kind of stuff with the DOM and events.

But now I have library(markup) for DOM generation
and library(react) for events. So I rewrote Tic-Tac-Toe
using these utilities, reducing the amount of

JavaScript logic to zero. Tic-Tac-Toe is now 100% Prolog.

What also went down the drain abusing consult_async()
to do the game intialization, instead I am now using
perform_async(). So the code went from dangerous.

await consult_async(":- ensure_loaded('browser.p').");

dangerous because of possible file name quoting issues.
To this where the file name is a string object and doesn't
need to be Prolog encoded, because we don't invoke a Prolog

text encoded query but a Prolog term:

await perform_async(new Compound("ensure_loaded", ["browser.p"]));

In has far we should make some Hydration experiment.
What is Hydration. Its a new buzzword around the partially
obsolete design, to have first the HTML body in a broswer

doument and then at the end of the HTML body some scripts:

r/webdev - What is Hydration?
https://www.reddit.com/r/webdev/comments/xqd4i8/what_is_hydration/

The bundle end of HTML body design has usually takes
time time(html)+time(bundle). A better deisgn is unsing
async loading and the quasi-parallelism of the browser,

and load the bundle in the head if possible. The load time
is then around max(time(bundle), time(html))). which might
give better user experience. We should try the same

for our examples, load Dogelog Player in the head. But
the Prolog text loader is not yet task safe. So this might
involve some more work until we can try it.

Also we might nevertheless want to do a little hydration
when the HTML body is read, like wiring event handlers.

Mild Shock schrieb:
> Now I have rewritten the Tic-Tac-Toe example
> to be 100% Prolog. Originally the Tic-Tac-Toe example
> was conceived as a first stab in exploring the
>
> foreign function interface (FFI) of Dogelog Player
> inside the browser to register JavaScript functions
> that do all kind of stuff with the DOM and events.
>
> But now I have library(markup) for DOM generation
> and library(react) for events. So I rewrote Tic-Tac-Toe
> using these utilities, reducing the amount of
>
> JavaScript logic to zero. Tic-Tac-Toe is now 100% Prolog.

Note because of the await in front of the
perform_async() our loading doesn't create a task yet.
It will change the current load sequence. It will

only allow that tasks create before the await get
their share of work. We would need to add one of our
create_task utilities, or use the async option of a

script tag, as recommened here for MathJax v3:

/* put this in the head */
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>

The async option of a script tag is described as:

"For module scripts, if the async attribute is
present then the scripts and all their dependencies
will be fetched in parallel to parsing and evaluated
as soon as they are available."
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#async

Mild Shock schrieb:
>
> What also went down the drain abusing consult_async()
> to do the game intialization, instead I am now using
> perform_async(). So the code went from dangerous.
>
>     await consult_async(":- ensure_loaded('browser.p').");
>
> dangerous because of possible file name quoting issues.
> To this where the file name is a string object and doesn't
> need to be Prolog encoded, because we don't invoke a Prolog
>
> text encoded query but a Prolog term:
>
>     await perform_async(new Compound("ensure_loaded", ["browser.p"]));
>
> In has far we should make some Hydration experiment.
> What is Hydration. Its a new buzzword around the partially
> obsolete design, to have first the HTML body in a broswer
>
> doument and then at the end of the HTML body some scripts:
>
> r/webdev - What is Hydration?
> https://www.reddit.com/r/webdev/comments/xqd4i8/what_is_hydration/
>
> The bundle end of HTML body design has usually takes
> time time(html)+time(bundle). A better deisgn is unsing
> async loading and the quasi-parallelism of the browser,
>
> and load the bundle in the head if possible. The load time
> is then around max(time(bundle), time(html))). which might
> give better user experience. We should try the same
>
> for our examples, load Dogelog Player in the head. But
> the Prolog text loader is not yet task safe. So this might
> involve some more work until we can try it.
>
> Also we might nevertheless want to do a little hydration
> when the HTML body is read, like wiring event handlers.
>
> Mild Shock schrieb:
>> Now I have rewritten the Tic-Tac-Toe example
>> to be 100% Prolog. Originally the Tic-Tac-Toe example
>> was conceived as a first stab in exploring the
>>
>> foreign function interface (FFI) of Dogelog Player
>> inside the browser to register JavaScript functions
>> that do all kind of stuff with the DOM and events.
>>
>> But now I have library(markup) for DOM generation
>> and library(react) for events. So I rewrote Tic-Tac-Toe
>> using these utilities, reducing the amount of
>>
>> JavaScript logic to zero. Tic-Tac-Toe is now 100% Prolog.
>

Corr. Typo

It will NOT change the current load sequence.

Mild Shock schrieb:
>
> Note because of the await in front of the
> perform_async() our loading doesn't create a task yet.
> It will change the current load sequence. It will
>
> only allow that tasks create before the await get
> their share of work. We would need to add one of our
> create_task utilities, or use the async option of a
>
> script tag, as recommened here for MathJax v3:
>
> /* put this in the head */
> <script type="text/javascript" id="MathJax-script" async
>   src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
> </script>
>
> The async option of a script tag is described as:
>
> "For module scripts, if the async attribute is
> present then the scripts and all their dependencies
> will be fetched in parallel to parsing and evaluated
> as soon as they are available."
> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#async
>
> Mild Shock schrieb:
>>
>> What also went down the drain abusing consult_async()
>> to do the game intialization, instead I am now using
>> perform_async(). So the code went from dangerous.
>>
>>      await consult_async(":- ensure_loaded('browser.p').");
>>
>> dangerous because of possible file name quoting issues.
>> To this where the file name is a string object and doesn't
>> need to be Prolog encoded, because we don't invoke a Prolog
>>
>> text encoded query but a Prolog term:
>>
>>      await perform_async(new Compound("ensure_loaded", ["browser.p"]));
>>
>> In has far we should make some Hydration experiment.
>> What is Hydration. Its a new buzzword around the partially
>> obsolete design, to have first the HTML body in a broswer
>>
>> doument and then at the end of the HTML body some scripts:
>>
>> r/webdev - What is Hydration?
>> https://www.reddit.com/r/webdev/comments/xqd4i8/what_is_hydration/
>>
>> The bundle end of HTML body design has usually takes
>> time time(html)+time(bundle). A better deisgn is unsing
>> async loading and the quasi-parallelism of the browser,
>>
>> and load the bundle in the head if possible. The load time
>> is then around max(time(bundle), time(html))). which might
>> give better user experience. We should try the same
>>
>> for our examples, load Dogelog Player in the head. But
>> the Prolog text loader is not yet task safe. So this might
>> involve some more work until we can try it.
>>
>> Also we might nevertheless want to do a little hydration
>> when the HTML body is read, like wiring event handlers.
>>
>> Mild Shock schrieb:
>>> Now I have rewritten the Tic-Tac-Toe example
>>> to be 100% Prolog. Originally the Tic-Tac-Toe example
>>> was conceived as a first stab in exploring the
>>>
>>> foreign function interface (FFI) of Dogelog Player
>>> inside the browser to register JavaScript functions
>>> that do all kind of stuff with the DOM and events.
>>>
>>> But now I have library(markup) for DOM generation
>>> and library(react) for events. So I rewrote Tic-Tac-Toe
>>> using these utilities, reducing the amount of
>>>
>>> JavaScript logic to zero. Tic-Tac-Toe is now 100% Prolog.
>>
>