Switch to ESM module loading.

js/gresource.xml

@@ -1,12 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <gresources>
-  <gresource prefix="/org/gnome/liferea/readability">
-    <file compressed="true">Readability.js</file>
-  </gresource>
   <gresource prefix="/org/gnome/liferea/js">
     <file compressed="true">htmlview.js</file>
-    <file compressed="true">purify.min.js</file>
-    <file compressed="true">handlebars.min.js</file>
+    <file compressed="true">helpers/render.js</file>
+    <file compressed="true">vendor/Readability.js</file>
+    <file compressed="true">vendor/purify.min.js</file>
+    <file compressed="true">vendor/handlebars.min.js</file>
   </gresource>
   <gresource prefix="/org/gnome/liferea/templates">
     <file compressed="true">item.xml</file>

js/helpers/render.js

@@ -0,0 +1,89 @@
+// vim: set ts=4 sw=4:
+
+import Handlebars from '../vendor/handlebars.min.js';
+
+// Handlebars convenience helpers
+
+if (Handlebars) {
+	// FIXME: register only once
+	Handlebars.registerHelper("eachSorted", function (obj, options) {
+		let data = Handlebars.createFrame(options, options.hash);
+		let result = '';
+
+		for (const key of Object.keys(obj).sort((a, b) => {
+			return a.toLowerCase().localeCompare(b.toLowerCase());
+		})) {
+			if (Object.prototype.hasOwnProperty.call(obj, key)) {
+				data.key = key;
+				result += options.fn(obj[key], { data: data });
+			}
+		}
+		return result;
+	});
+
+	Handlebars.registerHelper('ifTrue', function (v1, options) {
+		if (v1 == true) {
+			return options.fn(this);
+		}
+		return options.inverse(this);
+	});
+	Handlebars.registerHelper('ifFalse', function (v1, options) {
+		if (v1 == true) {
+			return options.fn(this);
+		}
+		return options.inverse(this);
+	});
+
+	Handlebars.registerHelper('contains', function (needle, haystack, options) {
+		needle = Handlebars.escapeExpression(needle);
+		haystack = Handlebars.escapeExpression(haystack);
+		return (haystack.indexOf(needle) > -1) ? options.fn(this) : options.inverse(this);
+	});
+
+	Handlebars.registerHelper('compare', function (v1, operator, v2, options) {
+		var operators = {
+			'==': v1 == v2 ? true : false,
+			'===': v1 === v2 ? true : false,
+			'!=': v1 != v2 ? true : false,
+			'!==': v1 !== v2 ? true : false,
+			'>': v1 > v2 ? true : false,
+			'>=': v1 >= v2 ? true : false,
+			'<': v1 < v2 ? true : false,
+			'<=': v1 <= v2 ? true : false,
+			'||': v1 || v2 ? true : false,
+			'&&': v1 && v2 ? true : false
+		}
+		if (Object.prototype.hasOwnProperty.call(operators, operator)) {
+			if (operators[operator]) {
+				return options.fn(this);
+			}
+			return options.inverse(this);
+		}
+		return console.error('Error: Expression "' + operator + '" not found');
+	});
+}
+
+function template(str) {
+	return Handlebars.compile(str);
+}
+
+function render(selector, template, params, append = false) {
+	let e = document.querySelector(selector);
+	let result;
+
+	if (!e)
+		return;
+
+	try {
+		result = template(params);
+	} catch (e) {
+		result = `Rendering exception: ${e}`;
+	}
+
+	if (append)
+		e.innerHTML += result;
+	else
+		e.innerHTML = result;
+}
+
+export { template, render };

js/htmlview.js

@@ -19,7 +19,8 @@
  * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
  */
 
-var template;
+import { render, template } from './helpers/render.js';
+import DOMPurify from './vendor/purify.min.js';
 
 function prepare(baseURL, title) {
 	if (title) {
@@ -31,8 +32,6 @@ function prepare(baseURL, title) {
 		base.setAttribute("href", baseURL);
 		document.head.appendChild(base);
 	}
-
-	template = Handlebars.compile(document.getElementById('template').innerHTML);
 }
 
 // returns first occurence of a given metadata type
@@ -61,17 +60,12 @@ function parseStatus(parsePhase, errorCode) {
 
 async function load_node(data, baseURL, direction) {
 	let node = JSON.parse(decodeURIComponent(data));
-	let publisher	= metadata_get(node, "publisher");
-	let author		= metadata_get(node, "author");
-	let copyright	= metadata_get(node, "copyright");
-	let description	= metadata_get(node, "description");
-	let homepage	= metadata_get(node, "homepage");
 
 	// FIXME
 	console.log(node);
 
 	prepare(baseURL, node.title);
-	document.body.innerHTML = template({
+	render("body", template(document.getElementById('template').innerHTML), {
 		node,
 		direction,
 		publisher  		: metadata_get(node, "publisher"),
@@ -155,8 +149,6 @@ async function load_item(data, baseURL, direction) {
 
 		article = new Readability(shadowDoc, {charThreshold: 100}).parse();
 		if (article) {
-			description = article.content;
-
 			// Use rich content from Readability if available and better!
 			if (article.content.length > item.description.length) {
 				item.description = article.content;
@@ -168,7 +160,7 @@ async function load_item(data, baseURL, direction) {
 	console.log(item);
 
 	prepare(baseURL, item.title);
-	document.body.innerHTML = template({
+	render("body", template (document.getElementById('template').innerHTML), {
 		item,
 		direction,
 
@@ -295,3 +287,5 @@ function youtube_embed(id) {
 
 	return false;
 }
+
+export { load_node, load_item };

js/item.xml.in

@@ -1,11 +1,8 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<script src='liferea:///readability/Readability.js'></script>
-	<script src='liferea:///js/purify.min.js'></script>
-	<script src='liferea:///js/handlebars.min.js'></script>
-	<script src='liferea:///js/htmlview.js'></script>
-
+        <script src='/js/vendor/Readability.js'></script>
+
 	<!-- FIXME: consider adding CSP meta tag here as e.g. Firefox reader mode page does -->
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
@@ -74,7 +71,9 @@
 </head>
 <body>
 </body>
-<script>
+<script type="module">
+        import { load_item } from '/js/htmlview.js';
+
         REPLACE_MARKER
 </script>
 </html>

js/node.xml.in

@@ -1,10 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<script src='liferea:///readability/Readability.js'></script>
-	<script src='liferea:///js/purify.min.js'></script>
-	<script src='liferea:///js/handlebars.min.js'></script>
-	<script src='liferea:///js/htmlview.js'></script>
+	<script src='/js/vendor/Readability.js'></script>
 
 	<!-- FIXME: consider adding CSP meta tag here as e.g. Firefox reader mode page does -->
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
@@ -47,6 +44,8 @@
 <body>
 </body>
 <script>
+	import { load_node } from '/js/htmlview.js';
+
         REPLACE_MARKER
 </script>
 </html>

package.json

@@ -4,7 +4,7 @@
     "installDeps": "ls node_modules"
   },
   "dependencies": {
-    "dompurify": "^3.0.6",
+    "dompurify": "^3.2.3",
     "readability": "^0.1.0",
     "handlebars": "^4.7.8"
   },

src/Makefile.am

@@ -22,9 +22,10 @@ js_files = $(js_in_files:.xml.in=.xml)
 
 js_deps = $(top_srcdir)/js/gresource.xml \
 	$(top_srcdir)/js/htmlview.js \
-	$(top_srcdir)/js/Readability.js \
-	$(top_srcdir)/js/purify.min.js \
-	$(top_srcdir)/js/handlebars.min.js \
+	$(top_srcdir)/js/helpers/render.js \
+	$(top_srcdir)/js/vendor/Readability.js \
+	$(top_srcdir)/js/vendor/purify.min.js \
+	$(top_srcdir)/js/vendor/handlebars.min.js \
 	$(top_srcdir)/js/item.xml \
 	$(top_srcdir)/js/node.xml \
 	$(top_srcdir)/js/i18n-filter.xslt

src/webkit/webkit.c

@@ -381,9 +381,18 @@ liferea_webkit_handle_liferea_scheme (WebKitURISchemeRequest *request, gpointer
 	if (b) {
 		gsize length = 0;
 		const guchar *data = g_bytes_get_data (b, &length);
+		const gchar *mime;
+
 		// FIXME: what about freeing b?
 		g_autoptr(GInputStream) stream = g_memory_input_stream_new_from_data (data, length, NULL);
-		webkit_uri_scheme_request_finish (request, stream, length, "text/plain");
+
+		// For now we assume all resources are javascript, so MIME is hardcoded
+		if (g_str_has_suffix (path, ".js"))
+			mime = "text/javascript";
+		else
+			mime = "text/plain";
+
+		webkit_uri_scheme_request_finish (request, stream, length, mime);
 	} else {
 		debug (DEBUG_HTML, "Failed to load liferea:// request for path %s (%s)", path, rpath);
 		g_autoptr(GError) error = g_error_new (G_IO_ERROR, G_IO_ERROR_NOT_FOUND, "Resource not found");
@@ -404,7 +413,10 @@ liferea_webkit_init (LifereaWebKit *self)
 
 	security_manager = webkit_web_context_get_security_manager (webkit_web_context_get_default ());
 	website_data_manager = webkit_web_context_get_website_data_manager (webkit_web_context_get_default ());
-	webkit_security_manager_register_uri_scheme_as_local (security_manager, "liferea");
+	/* CORS is necessary to have ESM modules working. Security wise this should be ok as this scheme 
+	   is only used to fetch static resources. */
+	webkit_security_manager_register_uri_scheme_as_cors_enabled (security_manager, "liferea");
+
 
 	conf_signal_connect (
 		"changed::" ENABLE_ITP,