Hello,

I have added initial support for resource linking.

This means that directives like

{$R *.html}

or

{$R left.png}
{$R right.png}
{$R up.png}
{$R down.png}

Will now actually do something.

The mechanism is pluggable, and the compiler currently supports 2 mechanisms:

- The resources are added to a javascript structure in the generated javascript.

- The resources are emitted to a file with html snippet. this will look like this:

<link rel="preload" id="resource-testres" data-unit="consoledemo" href="data:text/html;base64,PGgzPlRlc3QgcmVzb3VyY2UgaW4gSFRNTDwvaDM+ClRoaXMgaXMgYSBtYWluIHByb2dyYW0gZmlsZSByZXNvdXJjZSBpbiBIVE1MLgo=" /> <link rel="preload" id="resource-testb" data-unit="unitb" href="data:text/html;base64,PGgzPkhlbGxvIFJlc291cmNlIFdvcmxkIFBhcnQgQjwvaDM+CjxwPgpUaGlzIG1lc3NhZ2UgaXMgc2F2ZWQgaW4gYSByZXNvdXJjZSBmaWxlIChQYXJ0IEIpLgo8L3A+Cgo=" /> <link rel="preload" id="resource-testa" data-unit="unita" href="data:text/html;base64,PGgzPkhlbGxvIFJlc291cmNlIFdvcmxkIFBhcnQgQTwvaDM+CjxwPgpUaGlzIG1lc3NhZ2UgaXMgc2F2ZWQgaW4gYSByZXNvdXJjZSBmaWxlIChQYXJ0IEEpLgo8L3A+Cgo=" />

This html can be pasted into the HTML file of your project. Or the HTML snippet can be loaded dynamically.

In both cases, the resource is base64-encoded before including it.

Other mechanisms can probably be invented, but I thought the above 2 are the simplest and easiest.

There are 3 "bare bones" demoes:

Using javascript-embedded resources:

https://www.freepascal.org/~michael/pas2js-demos/resources/htmldemo.html

Using HTML <link> resources:

https://www.freepascal.org/~michael/pas2js-demos/resources/htmllinkdemo.html

Using dynamically loaded HTML <link> resources:

https://www.freepascal.org/~michael/pas2js-demos/resources/htmlloadlinkdemo.html

As you can see in these demoes, there is an API (unit p2jsres) for getting resource information, as well as a calll to dynamically load the resources from the compiler-generated snippet. The API is the same for both kind of resources, this is transparant.

There is also a nodejs demo, but this one needs to be compiled from source and run on your local machine.

This is just an initial implementation.

Planned:

- Support {$R *.res}
This will need to extract the actual resources from the *.res file and add them separately to the JS/HTML. I only plan this for the native pas2js compiler, not yet for the javascript version.

- Add support in the Lazarus IDE to specify what resources you want to use, and automatically include the generated HTML snippet into the project HTML.

- Any suggestions you may have...

Enjoy !

Michael.

Cool! Seems like I should retry/rework that widgets example from a few months back :D

Regards,
Sven

I have a HUGE commit waiting for these widgets. They have received soe bugfixes, lots of additions, including templating, rendering from database etc. :) Amongst others, I have hooked up the template widget to the resources. But I wanted to create a demo page before committing. So maybe if you have a little patience the reward will be bigger :)

Michael.

I was talking about the LCL-like approach. :P

But I'm looking forward to your idea as well. :)

Regards,
Sven

Well, so many approaches already. Difficult not to get confused... :-)

Michael.

Another approach: Loading HTML templates from the script tag.

e.g.

live preview:
https://pas2js.github.io/master/projhtmltemplateresource/index.html download project:
https://pas2js.github.io/master/projhtmltemplateresource.rar

This kind of thing:

---
<script type="application/json" id="resource-pj2" data-type="interface" data-name="pas2js2" data-compressed="false">M <!doctype html>M
<html><head>M
<meta charset="utf-8">M
<title>Test</title>M
<style class="cssdeck">div#theatre {M
border: inset red 10px;M
height: 300px;M
width: 80%;M
margin: 2em auto;M
text-align: center;M
line-height: 120px;M
font-size: 30px;M
position: relative;M
overflow: hidden;M
---

is not recommended. This is likely to break in the future, because browsers become more and more picky about what they accept.

I aleady had to modify my original code because for example firefox didn't warn, but chrome did warn about what is acceptable in <link> tags.

So mixing things is IMO not a good idea and likely to break in the future.

Michael.

Hey, I added to getHTML method to rtl, and modified the js output, and did a quick test on Firefox using this getHTML to load async html resources and another the original using the base64 enconding.

getHTML: async function(u) {
	var f;
	  f = await fetch(u);
	  return await f.text();
  }
rtl.addResource({name: "testres", unit: "consoledemo", format: "text/html",
encoding: "text", data: "", RC: rtl.getHTML("testres.html")});
rtl.addResource({name: "curtain", unit: "consoledemo", format: "text/html",
encoding: "text", data: "", RC: rtl.getHTML("curtain.html")});
rtl.addResource({name: "testb", unit: "unitb", format: "text/html",
encoding: "text", data: "", RC: rtl.getHTML("testb.html")});
rtl.addResource({name: "testa", unit: "unita", format: "text/html",
encoding: "text", data: "", RC: rtl.getHTML("testa.html")});

Encoding: base64 (original)
=================
3 requests
63.07KB resources / 16.68KB transferred
96ms = Finish
23ms = DOMContentLoaded
28ms = Loaded

Encoding: text (async requests)
====================
7 requests
62.44KB resources / 16.65KB transferred
81ms = Finish
26ms = DOMContentLoaded
34ms = Loaded