commit eecbb72d253e6f8d209a4efe3cda7ee8f587e690
parent c9475dc981fa91ab5026be534bc5705959468d80
Author: finwo <finwo@pm.me>
Date: Thu, 29 Oct 2020 12:49:26 +0100
Added support for basic iteration
Diffstat:
5 files changed, 35 insertions(+), 3 deletions(-)
diff --git a/fwebc.js b/fwebc.js
@@ -23,6 +23,11 @@
if (Array.isArray(obj)) return false;
return true;
},
+ unescape(input) {
+ const el = document.createElement('textarea');
+ el.innerHTML = input;
+ return el.childNodes.length === 0 ? "" : el.childNodes[0].nodeValue;
+ },
observable(obj, callback, prefix = '') {
if (Object(obj) !== obj) throw new Error(`Object is not an object, got: ${obj}`);
if ('function' !== typeof callback) throw new Error(`Callback is not a function, got: ${callback}`);
@@ -90,7 +95,7 @@
}
// Template should be a string
- template = template.innerHTML;
+ template = util.unescape(template.innerHTML);
// Register the actual element
window.customElements.define(name, class extends HTMLElement {
@@ -122,7 +127,7 @@
}
render() {
- const fn = new Function(...Object.keys(this.state), "return `"+ template.replace(/`/g,'\\`') + "`;");
+ const fn = new Function(...Object.keys(this.state), 'return `'+template+'`;');
try { this.root.innerHTML = fn(...Object.values(this.state)); } catch(e) { console.error(e); }
};
diff --git a/fwebc.min.js b/fwebc.min.js
@@ -1 +1 @@
-(e=>{"object"==typeof module&&"exports"in module?module.exports=e({fetch:require("node-fetch")}):"object"==typeof window&&(window.fwebc=e({fetch:window.fetch}))})(({fetch:e})=>{const t={},n=[],o={ext:"tag",base:"/partial"},r=t.util={isObject:e=>null!==e&&("object"==typeof e&&!Array.isArray(e)),observable(e,t,n=""){if(Object(e)!==e)throw new Error(`Object is not an object, got: ${e}`);if("function"!=typeof t)throw new Error(`Callback is not a function, got: ${t}`);for(const o of Object.keys(e))Object(e[o])===e[o]&&(e[o]=r.observable(e[o],t,`${n}${o}.`));return new Proxy(e,{set(e,o,s,i){if(e[o]===s)return;let c=o in e?"update":"add";const l={name:o,type:c,object:e};return"update"==c&&(l.oldValue=e[o]),e[o]=Object(s)===s?r.observable(s,t,`${n}${o}.`):s,t([l]),!0},deleteProperty(e,n,o){if(!(n in e))return;const r={name:n,type:"delete",object:e,oldValue:e[n]};return delete e[n],t([r]),!0}})}};return t.cfg=(e=>{Object.assign(o,e)}),t.install=(e=>{"function"==typeof e&&n.push(e)}),t.uninstall=(e=>{const t=n.indexOf(e);~t&&n.splice(t,1)}),t.register=((e,o)=>{if(window.customElements.get(e))return;let s=document.createElement("template");s.innerHTML=o,s.content.firstChild instanceof HTMLTemplateElement&&(s=s.content.firstChild);let i="";for(const e of[...s.content.children])e instanceof HTMLScriptElement&&(i+=e.innerHTML,s.content.removeChild(e));s=s.innerHTML,window.customElements.define(e,class extends HTMLElement{constructor(){super(),this.state={},this.root=this.attachShadow({mode:"open"});for(const e of n)e(this);new Function(i).call(this),this.dependencies&&dependencies.forEach(t.load),this.state=r.observable(this.state,this.render.bind(this)),this.render()}render(){const e=new Function(...Object.keys(this.state),"return `"+s.replace(/`/g,"\\`")+"`;");try{this.root.innerHTML=e(...Object.values(this.state))}catch(e){console.error(e)}}})}),t.load=(n=>{e(`${o.base}/${n}.${o.ext}`).then(e=>e.text()).then(e=>{t.register(n,e)})}),t});
+(e=>{"object"==typeof module&&"exports"in module?module.exports=e({fetch:require("node-fetch")}):"object"==typeof window&&(window.fwebc=e({fetch:window.fetch}))})(({fetch:e})=>{const t={},n=[],o={ext:"tag",base:"/partial"},r=t.util={isObject:e=>null!==e&&("object"==typeof e&&!Array.isArray(e)),unescape(e){const t=document.createElement("textarea");return t.innerHTML=e,0===t.childNodes.length?"":t.childNodes[0].nodeValue},observable(e,t,n=""){if(Object(e)!==e)throw new Error(`Object is not an object, got: ${e}`);if("function"!=typeof t)throw new Error(`Callback is not a function, got: ${t}`);for(const o of Object.keys(e))Object(e[o])===e[o]&&(e[o]=r.observable(e[o],t,`${n}${o}.`));return new Proxy(e,{set(e,o,s,c){if(e[o]===s)return;let i=o in e?"update":"add";const l={name:o,type:i,object:e};return"update"==i&&(l.oldValue=e[o]),e[o]=Object(s)===s?r.observable(s,t,`${n}${o}.`):s,t([l]),!0},deleteProperty(e,n,o){if(!(n in e))return;const r={name:n,type:"delete",object:e,oldValue:e[n]};return delete e[n],t([r]),!0}})}};return t.cfg=(e=>{Object.assign(o,e)}),t.install=(e=>{"function"==typeof e&&n.push(e)}),t.uninstall=(e=>{const t=n.indexOf(e);~t&&n.splice(t,1)}),t.register=((e,o)=>{if(window.customElements.get(e))return;let s=document.createElement("template");s.innerHTML=o,s.content.firstChild instanceof HTMLTemplateElement&&(s=s.content.firstChild);let c="";for(const e of[...s.content.children])e instanceof HTMLScriptElement&&(c+=e.innerHTML,s.content.removeChild(e));s=r.unescape(s.innerHTML),window.customElements.define(e,class extends HTMLElement{constructor(){super(),this.state={},this.root=this.attachShadow({mode:"open"});for(const e of n)e(this);new Function(c).call(this),this.dependencies&&dependencies.forEach(t.load),this.state=r.observable(this.state,this.render.bind(this)),this.render()}render(){const e=new Function(...Object.keys(this.state),"return `"+s+"`;");try{this.root.innerHTML=e(...Object.values(this.state))}catch(e){console.error(e)}}})}),t.load=(n=>{e(`${o.base}/${n}.${o.ext}`).then(e=>e.text()).then(e=>{t.register(n,e)})}),t});
diff --git a/test/assets/fwebc.min.js b/test/assets/fwebc.min.js
@@ -0,0 +1 @@
+../../fwebc.min.js
+\ No newline at end of file
diff --git a/test/minified.html b/test/minified.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf8">
+ <link rel="stylesheet" href="/assets/style.css">
+ </head>
+ <body>
+ <my-app></my-app>
+ <script src="/assets/fwebc.min.js"></script>
+ <script>
+ (async () => {
+ fwebc.cfg({
+ base: '/partial',
+ ext : 'tag',
+ });
+ fwebc.load('my-app');
+ })();
+ </script>
+ </body>
+</html>
diff --git a/test/partial/my-app.tag b/test/partial/my-app.tag
@@ -1,6 +1,11 @@
<template>
<h2>Bird is the ${subject}!</h2>
<p> Currently running for ${n} seconds</p>
+ <ul>
+ ${Array(5).fill(0).map((a,i) => `
+ <li>I'm item ${i}</li>
+ `).join('')}
+ </ul>
<style>
h2 {
color: #555;
