commit 9894c165c10175f8260ccd2882d4c13362433187
parent 4161981743ba8c18fa0750ebd91f222dea30e2e1
Author: finwo <finwo@pm.me>
Date: Fri, 30 Oct 2020 12:33:06 +0100
Support both riot-style and vue-style components
Diffstat:
3 files changed, 29 insertions(+), 17 deletions(-)
diff --git a/fwebc.js b/fwebc.js
@@ -79,13 +79,25 @@
fwebc.register = (name, source) => {
if (window.customElements.get(name)) return;
- // Remove nested template tags
+ // Parse remplate
let template = document.createElement('template');
template.innerHTML = source;
- if (template.content.firstChild instanceof HTMLTemplateElement) {
+
+ // Remove template wrapper
+ while(
+ (template.content.children.length == 1) &&
+ (template.content.firstChild instanceof HTMLTemplateElement)
+ ) {
template = template.content.firstChild;
}
+ // Remove template wrapper around html section
+ if (template.content.firstChild instanceof HTMLTemplateElement) {
+ const wrapper = template.content.firstChild;
+ template.content.prepend(...wrapper.content.children);
+ template.content.removeChild(wrapper);
+ }
+
// Extract scripts
let code = '';
for(const child of [...template.content.children]) {
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)),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});
+(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,c,s){if(e[o]===c)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(c)===c?r.observable(c,t,`${n}${o}.`):c,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 c=document.createElement("template");for(c.innerHTML=o;1==c.content.children.length&&c.content.firstChild instanceof HTMLTemplateElement;)c=c.content.firstChild;if(c.content.firstChild instanceof HTMLTemplateElement){const e=c.content.firstChild;c.content.prepend(...e.content.children),c.content.removeChild(e)}let s="";for(const e of[...c.content.children])e instanceof HTMLScriptElement&&(s+=e.innerHTML,c.content.removeChild(e));c=r.unescape(c.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(s).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 `"+c+"`;");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/partial/my-app.tag b/test/partial/my-app.tag
@@ -6,18 +6,18 @@
<li>I'm item ${i}</li>
`).join('')}
</ul>
- <style>
- h2 {
- color: #555;
- }
- </style>
- <script>
- this.state = {
- n : 0,
- subject: 'word',
- };
- setInterval(() => {
- this.state.n++;
- }, 1000);
- </script>
</template>
+<style>
+ h2 {
+ color: #555;
+ }
+</style>
+<script>
+ this.state = {
+ n : 0,
+ subject: 'word',
+ };
+ setInterval(() => {
+ this.state.n++;
+ }, 1000);
+</script>
