├── .gitignore ├── .npmignore ├── .travis.yml ├── LICENSE ├── README.md ├── example ├── asbundle │ ├── client │ │ └── index.js │ ├── dist │ │ └── main.js │ ├── package.json │ └── server │ │ └── index.js ├── rollup │ ├── client │ │ └── index.js │ ├── dist │ │ └── main.js │ ├── package.json │ ├── rollup.config.js │ └── server │ │ └── index.js └── webpack │ ├── client │ └── index.js │ ├── dist │ └── main.js │ ├── package.json │ ├── server │ └── index.js │ └── webpack.config.js ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | package-lock.json 3 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | example/ 3 | .gitignore 4 | .travis.yml 5 | package-lock.json 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - stable 4 | git: 5 | depth: 1 6 | branches: 7 | only: 8 | - master 9 | - /^greenkeeper/.*$/ 10 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | ISC License 2 | 3 | Copyright (c) 2018, Andrea Giammarchi, @WebReflection 4 | 5 | Permission to use, copy, modify, and/or distribute this software for any 6 | purpose with or without fee is hereby granted, provided that the above 7 | copyright notice and this permission notice appear in all copies. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 10 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 11 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 12 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 13 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE 14 | OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 15 | PERFORMANCE OF THIS SOFTWARE. 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # hypermorphic ![build status](https://travis-ci.org/WebReflection/hypermorphic.svg?branch=master) 2 | 3 | [![Greenkeeper badge](https://badges.greenkeeper.io/WebReflection/hypermorphic.svg)](https://greenkeeper.io/) 4 | 5 | An isomorphic [hyperHTML](https://viperhtml.js.org/hyper.html) & [viperHTML](https://viperhtml.js.org/viper.html) importer, compatible with bundlers. 6 | 7 | ```js 8 | // ESM example (assuming bundlers/ESM loaders in place) 9 | import {bind, wire} from 'hypermorphic'; 10 | 11 | // CommonJS example 12 | const {bind, wire} = require('hypermorphic'); 13 | ``` 14 | 15 | ### Bundlers 16 | 17 | Please have a look at the [example](https://github.com/WebReflection/hypermorphic/tree/master/example) folder to find out how to configure your favorite bundler to load _hyperHTML_ on the client side, fully ignoring _viperHTML_. 18 | 19 | ### Examples 20 | 21 | You can clone this repository, enter in the `example` folder, 22 | pick one of the solutions and then run `npm install`. 23 | 24 | You can reach `http://localhost:8080/` to see a page 25 | powered by _hyperHTML_ on the client and _viperHTML_ on the server. 26 | -------------------------------------------------------------------------------- /example/asbundle/client/index.js: -------------------------------------------------------------------------------- 1 | // client side, ESM 2 | 3 | import {bind} from 'hypermorphic'; 4 | 5 | bind(document.querySelector('main'))` 6 |

hypermorphic 🎉

`; 7 | -------------------------------------------------------------------------------- /example/asbundle/dist/main.js: -------------------------------------------------------------------------------- 1 | !function(e,t){function n(o){return e[o]||function(o){var r={},s={exports:r};return t[o].call(r,window,n,s,r),e[o]=s.exports}(o)}var o=n(0);o.__esModule&&o.default}([],[function(e,t,n,o){"use strict";const{bind:r}=t(1);r(document.querySelector("main"))` 2 |

hypermorphic 🎉

`},function(e,t,n,o){n.exports="object"==typeof document?t(2):null},function(e,t,n,o){"use strict"; 3 | /*! (c) Andrea Giammarchi (ISC) */const r=(e=>e.__esModule?e.default:e)(t(3)),{setup:s}=t(3),l=(e=>e.__esModule?e.default:e)(t(6)),c=(e=>e.__esModule?e.default:e)(t(7)),{content:i,weakly:a}=t(7),u=(e=>e.__esModule?e.default:e)(t(13)),d=(e=>e.__esModule?e.default:e)(t(17)),f=e=>u.bind(e),h=l.define;function p(e){return arguments.length<2?null==e?i("html"):"string"==typeof e?p.wire(null,e):"raw"in e?i("html")(e):"nodeType"in e?p.bind(e):a(e,"html"):("raw"in e?i("html"):p.wire).apply(null,arguments)}p.Component=r,p.bind=f,p.define=h,p.diff=d,p.hyper=p,p.wire=c,s(i),o.Component=r,o.bind=f,o.define=h,o.diff=d,o.hyper=p,o.wire=c,Object.defineProperty(o,"__esModule",{value:!0}).default=p},function(e,t,n,o){"use strict";const{WeakMap:r}=t(4);function s(){return this}Object.defineProperty(o,"__esModule",{value:!0}).default=s,o.setup=function(e){const t=new r,n=Object.create;Object.defineProperties(s,{for:{configurable:!0,value(e,o){return((e,t,o,s)=>{switch(typeof s){case"object":case"function":const l=t.w||(t.w=new r);return l.get(s)||((e,t,n)=>(e.set(t,n),n))(l,s,new e(o));default:const c=t.p||(t.p=n(null));return c[s]||(c[s]=new e(o))}})(this,t.get(e)||(e=>{const n={w:null,p:null};return t.set(e,n),n})(e),e,null==o?"default":o)}}}),Object.defineProperties(s.prototype,{handleEvent:{value(e){const t=e.currentTarget;this["getAttribute"in t&&t.getAttribute("data-call")||"on"+e.type](e)}},html:l("html",e),svg:l("svg",e),state:l("state",function(){return this.defaultState}),defaultState:{get:()=>({})},setState:{value(e,t){const n=this.state,o="function"==typeof e?e.call(this,n):e;for(const e in o)n[e]=o[e];return!1!==t&&this.render(),this}}})};const l=(e,t)=>{const n="_"+e+"$";return{get(){return this[n]||(this[e]=t.call(this,e))},set(e){Object.defineProperty(this,n,{configurable:!0,value:e})}}}},function(e,t,n,o){"use strict";const{G:r,UID:s}=t(5);let l=r.Event;try{new l("Event")}catch(e){l=function(e){const t=document.createEvent("Event");return t.initEvent(e,!1,!1),t}}o.Event=l;const c=r.Map||function(){const e=[],t=[];return{get:n=>t[e.indexOf(n)],set(n,o){t[e.push(n)-1]=o}}};o.Map=c;const i=r.WeakMap||function(){return{get:e=>e[s],set(e,t){Object.defineProperty(e,s,{configurable:!0,value:t})}}};o.WeakMap=i;const a=r.WeakSet||function(){const e=new i;return{add(t){e.set(t,!0)},has:t=>!0===e.get(t)}};o.WeakSet=a;const u=Array.isArray||(e=>t=>"[object Array]"===e.call(t))({}.toString);o.isArray=u;const d=s.trim||function(){return this.replace(/^\s+|\s+$/g,"")};o.trim=d},function(e,t,n,o){"use strict";const r=document.defaultView;o.G=r;o.ELEMENT_NODE=1;o.ATTRIBUTE_NODE=2;o.TEXT_NODE=3;o.COMMENT_NODE=8;o.DOCUMENT_FRAGMENT_NODE=11;o.VOID_ELEMENTS=/^area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr$/i;o.OWNER_SVG_ELEMENT="ownerSVGElement";o.SVG_NAMESPACE="http://www.w3.org/2000/svg";o.CONNECTED="connected";o.DISCONNECTED="disconnected";o.EXPANDO="_hyper: ";o.SHOULD_USE_TEXT_CONTENT=/^style|textarea$/i;const s="_hyper: "+(Math.random()*new Date|0)+";";o.UID=s;const l="\x3c!--"+s+"--\x3e";o.UIDC=l},function(e,t,n,o){"use strict";const r={},s=[],l=r.hasOwnProperty;let c=0;Object.defineProperty(o,"__esModule",{value:!0}).default={define:(e,t)=>{e in r||(c=s.push(e)),r[e]=t},invoke:(e,t)=>{for(let n=0;ne.__esModule?e.default:e)(t(12)),h=(e=>e.__esModule?e.default:e)(t(13)),p=new l,m=e=>{let t,n,o,r,l;return function(c){c=d(c);let f=r!==c;return f&&(r=c,o=i(document),n="svg"===e?document.createElementNS(s,"svg"):o,l=h.bind(n)),l.apply(null,arguments),f&&("svg"===e&&a(o,u.call(n.childNodes)),t=N(o)),t}},E=(e,t)=>{const n=t.indexOf(":");let o=p.get(e),r=t;return-1{const t=e.childNodes,n=t.length,o=[];for(let e=0;enull==e?m(t||"html"):E(e,t||"html"))},function(e,t,n,o){"use strict";o.create=((e,t)=>r(e).createElement(t));const r=e=>e.ownerDocument||e;o.doc=r;o.fragment=(e=>r(e).createDocumentFragment());o.text=((e,t)=>r(e).createTextNode(t))},function(e,t,n,o){"use strict";const{attrName:r,attrSeeker:s}=t(10),{G:l,OWNER_SVG_ELEMENT:c,SVG_NAMESPACE:i,UID:a,UIDC:u}=t(5),{hasAppend:d,hasContent:f,hasDoomedCloneNode:h,hasImportNode:p}=t(11),{create:m,doc:E,fragment:N}=t(8),g=d?(e,t)=>{e.append.apply(e,t)}:(e,t)=>{const n=t.length;for(let o=0;o"<"+t+n.replace(_,y)+o,y=(e,t,n)=>t+(n||'"')+a+(n||'"');o.createFragment=((e,t)=>(c in e?T:C)(e,t.replace(s,b)));const v=h?e=>{const t=e.cloneNode(),n=e.childNodes||[],o=n.length;for(let e=0;ee.cloneNode(!0),M=p?(e,t)=>e.importNode(t,!0):(e,t)=>v(t);o.importNode=M;const O=[].slice;o.slice=O;o.unique=(e=>w(e));let w=e=>{if(e.propertyIsEnumerable("raw")||/Firefox\/(\d+)/.test((l.navigator||{}).userAgent)&&parseFloat(RegExp.$1)<55){const e={};w=(t=>{const n="_"+t.join(a);return e[n]||(e[n]=t)})}else w=(e=>e);return w(e)};const C=f?(e,t)=>{const n=m(e,"template");return n.innerHTML=t,n.content}:(e,t)=>{const n=m(e,"template"),o=N(e);if(/^[^\S]*?<(col(?:group)?|t(?:head|body|foot|r|d|h))/i.test(t)){const e=RegExp.$1;n.innerHTML=""+t+"
",g(o,O.call(n.querySelectorAll(e)))}else n.innerHTML=t,g(o,O.call(n.childNodes));return o},T=f?(e,t)=>{const n=N(e),o=E(e).createElementNS(i,"svg");return o.innerHTML=t,g(n,O.call(o.childNodes)),n}:(e,t)=>{const n=N(e),o=m(e,"div");return o.innerHTML=''+t+"",g(n,O.call(o.firstChild.childNodes)),n}},function(e,t,n,o){"use strict";const r=" \\f\\n\\r\\t",s="[ "+r+"]+[^ \\f\\n\\r\\t\\/>\"'=]+",l="<([A-Za-z]+[A-Za-z0-9:_-]*)((?:",c="(?:=(?:'[^']*?'|\"[^\"]*?\"|<[^>]*?>|[^ \\f\\n\\r\\t\\/>\"'=]+))?)",i=new RegExp(l+s+c+"+)([ "+r+"]*/?>)","g"),a=new RegExp(l+s+c+"*)([ "+r+"]*/>)","g");o.attrName=s,o.attrSeeker=i,o.selfClosing=a},function(e,t,n,o){"use strict";const{create:r,fragment:s,text:l}=t(8),c=s(document),i="append"in c;o.hasAppend=i;const a="content"in r(document,"template");o.hasContent=a,c.appendChild(l(c,"g")),c.appendChild(l(c,""));const u=1===c.cloneNode(!0).childNodes.length;o.hasDoomedCloneNode=u;const d="importNode"in document;o.hasImportNode=d},function(e,t,n,o){"use strict";const{append:r}=t(9),{doc:s,fragment:l}=t(8);function c(e){this.childNodes=e,this.length=e.length,this.first=e[0],this.last=e[this.length-1]}Object.defineProperty(o,"__esModule",{value:!0}).default=c,c.prototype.insert=function(){const e=l(this.first);return r(e,this.childNodes),e},c.prototype.remove=function(){const e=this.first,t=this.last;if(2===this.length)t.parentNode.removeChild(t);else{const n=s(e).createRange();n.setStartBefore(this.childNodes[1]),n.setEndAfter(t),n.deleteContents()}return e}},function(e,t,n,o){"use strict";const{Map:r,WeakMap:s}=t(4),{UIDC:l,VOID_ELEMENTS:c}=t(5),i=(e=>e.__esModule?e.default:e)(t(14)),{createFragment:a,importNode:u,unique:d}=t(9),{selfClosing:f}=t(10),h=new s,p=new r;function m(){const e=arguments.length;for(let t=1;tc.test(t)?e:"<"+t+n+">";Object.defineProperty(o,"__esModule",{value:!0}).default=function(e){const t=h.get(this);return t&&t.template===d(e)?m.apply(t.updates,arguments):function(e){e=d(e);const t=p.get(e)||function(e){const t=[],n=e.join(l).replace(E,N),o=a(this,n);i.find(o,t,e.slice());const r={fragment:o,paths:t};return p.set(e,r),r}.call(this,e),n=u(this.ownerDocument,t.fragment),o=i.create(n,t.paths);h.set(this,{template:e,updates:o}),m.apply(o,arguments),this.textContent="",this.appendChild(n)}.apply(this,arguments),this}},function(e,t,n,o){"use strict";const{CONNECTED:r,DISCONNECTED:s,COMMENT_NODE:l,DOCUMENT_FRAGMENT_NODE:c,ELEMENT_NODE:i,TEXT_NODE:a,OWNER_SVG_ELEMENT:u,SHOULD_USE_TEXT_CONTENT:d,UID:f,UIDC:h}=t(5),p=(e=>e.__esModule?e.default:e)(t(3)),m=(e=>e.__esModule?e.default:e)(t(12)),E=(e=>e.__esModule?e.default:e)(t(15)),N=(e=>e.__esModule?e.default:e)(t(16)),g=(e=>e.__esModule?e.default:e)(t(6)),_=(e=>e.__esModule?e.default:e)(t(17)),{text:b}=t(8),{Event:y,WeakSet:v,isArray:M,trim:O}=t(4),{createFragment:w,slice:C}=t(9),T=new v;function D(){}D.prototype=Object.create(null);const x=e=>({html:e}),S=(e,t)=>"ELEMENT_NODE"in e?e:e.constructor===m?1/t<0?t?e.remove():e.last:t?e.insert():e.first:S(e.render(),t),A=(e,t,n)=>{const o=e.childNodes,r=o.length;for(let s=0;s{const o=new D,r=e.attributes,s=C.call(r),l=[],c=s.length;for(let e=0;e{t(e.placeholder),"text"in e?Promise.resolve(e.text).then(String).then(t):"any"in e?Promise.resolve(e.any).then(t):"html"in e?Promise.resolve(e.html).then(x).then(t):Promise.resolve(g.invoke(e,t)).then(t)},L=e=>null!=e&&"then"in e,P=(e,t)=>{let n,o=!1;const r=s=>{switch(typeof s){case"string":case"number":case"boolean":o?n!==s&&(n=s,t[0].textContent=s):(o=!0,n=s,t=_(e.parentNode,t,[b(e,s)],S,e));break;case"object":case"undefined":if(null==s){o=!1,t=_(e.parentNode,t,[],S,e);break}default:if(o=!1,n=s,M(s))if(0===s.length)t.length&&(t=_(e.parentNode,t,[],S,e));else switch(typeof s[0]){case"string":case"number":case"boolean":r({html:s});break;case"object":if(M(s[0])&&(s=s.concat.apply([],s)),L(s[0])){Promise.all(s).then(r);break}default:t=_(e.parentNode,t,s,S,e)}else(e=>"ELEMENT_NODE"in e||e instanceof m||e instanceof p)(s)?t=_(e.parentNode,t,s.nodeType===c?C.call(s.childNodes):[s],S,e):L(s)?s.then(r):"placeholder"in s?k(s,r):"text"in s?r(String(s.text)):"any"in s?r(s.any):"html"in s?t=_(e.parentNode,t,C.call(w(e,[].concat(s.html).join("")).childNodes),S,e):r("length"in s?C.call(s):g.invoke(s,r))}};return r},I=(e,t,n)=>{const o=u in e;let l;if("style"===t)return N(e,n,o);if(/^on/.test(t)){let n=t.slice(2);return n===r||n===s?(R&&(R=!1,function(){const e=(e,n)=>{const o=new y(n),r=e.length;for(let n=0;n{T.has(e)&&e.dispatchEvent(n);const o=e.children,r=o.length;for(let e=0;e{const n=t.length;for(let o=0;o{e([t.target],s)},!1),document.addEventListener("DOMNodeInserted",t=>{e([t.target],r)},!1)}}()),T.add(e)):t.toLowerCase()in e&&(n=n.toLowerCase()),t=>{l!==t&&(l&&e.removeEventListener(n,l,!1),l=t,t&&e.addEventListener(n,t,!1))}}if("data"===t||!o&&t in e)return n=>{l!==n&&(l=n,e[t]!==n&&(e[t]=n,null==n&&e.removeAttribute(t)))};{let t=!1;const o=n.cloneNode(!0);return n=>{l!==n&&(l=n,o.value!==n&&(null==n?(t&&(t=!1,e.removeAttributeNode(o)),o.value=n):(o.value=n,t||(t=!0,e.setAttributeNode(o)))))}}},U=e=>{let t;const n=o=>{t!==o&&(t=o,"object"==typeof o&&o?L(o)?o.then(n):"placeholder"in o?k(o,n):n("text"in o?String(o.text):"any"in o?o.any:"html"in o?[].concat(o.html).join(""):"length"in o?C.call(o).join(""):g.invoke(o,n)):e.textContent=null==o?"":o)};return n};Object.defineProperty(o,"__esModule",{value:!0}).default={create:(e,t)=>{const n=[],o=t.length;for(let r=0;r{e.unshift(e.indexOf.call(t.childNodes,n))};Object.defineProperty(o,"__esModule",{value:!0}).default={create:(e,t,n)=>({type:e,name:n,node:t,path:(e=>{const t=[];let n;switch(e.nodeType){case l:case s:n=e;break;case r:n=e.parentNode,c(t,n,e);break;default:n=e.ownerElement}for(e=n;n=n.parentNode;e=n)c(t,n,e);return t})(t)}),find:(e,t)=>{const n=t.length;for(let o=0;o{if(n){const o=t.cloneNode(!0);return o.value="",e.setAttributeNode(o),s(o,n)}return s(e.style,n)});const s=(e,t)=>{let n,o;return s=>{switch(typeof s){case"object":if(s){if("object"===n){if(!t&&o!==s)for(const t in o)t in s||(e[t]="")}else t?e.value="":e.cssText="";const l=t?{}:e;for(const e in s){const t=s[e];l[e]="number"!=typeof t||r.test(e)?t:t+"px"}n="object",t?e.value=i(o=l):o=s;break}default:o!=s&&(n="string",o=s,t?e.value=s||"":e.cssText=s||"")}}},l=/([^A-Z])([A-Z]+)/g,c=(e,t,n)=>t+"-"+n.toLowerCase(),i=e=>{const t=[];for(const n in e)t.push(n.replace(l,c),":",e[n],";");return t.join("")}},function(e,t,n,o){"use strict"; 4 | /*! (c) 2017 Andrea Giammarchi (ISC) */const r=e=>e,s=(e,t,n)=>{const o=e.ownerDocument.createRange();o.setStartBefore(t),o.setEndAfter(n),o.deleteContents()};Object.defineProperty(o,"__esModule",{value:!0}).default=((e,t,n,o,l)=>{const c=o||r,i=null==l?null:c(l,0);let a=0,u=0,d=t.length-1,f=t[0],h=t[d],p=n.length-1,m=n[0],E=n[p];for(;a<=d&&u<=p;)if(null==f)f=t[++a];else if(null==h)h=t[--d];else if(null==m)m=n[++u];else if(null==E)E=n[--p];else if(f==m)f=t[++a],m=n[++u];else if(h==E)h=t[--d],E=n[--p];else if(f==E)e.insertBefore(c(f,1),c(h,-0).nextSibling),f=t[++a],E=n[--p];else if(h==m)e.insertBefore(c(h,1),c(f,0)),h=t[--d],m=n[++u];else{let o=t.indexOf(m);if(o<0)e.insertBefore(c(m,1),c(f,0)),m=n[++u];else{let r=o,l=u;for(;r<=d&&l<=p&&t[r]===n[l];)r++,l++;if(1d){const t=n[p+1],o=null==t?i:c(t,0);if(u===p)e.insertBefore(c(n[u],1),o);else{const t=e.ownerDocument.createDocumentFragment();for(;u<=p;)t.appendChild(c(n[u++],1));e.insertBefore(t,o)}}else null==t[a]&&a++,a===d?e.removeChild(c(t[a],-1)):s(e,c(t[a],-1),c(t[d],-1));return n})}]); 5 | -------------------------------------------------------------------------------- /example/asbundle/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "devDependencies": { 4 | "asbundle": "^2.6.0", 5 | "hypermorphic": "^0.1.0", 6 | "uglify-es": "^3.3.9", 7 | "watch": "^1.0.2" 8 | }, 9 | "scripts": { 10 | "bundle": "asbundle client/index.js --ignore=viperhtml | uglifyjs --comments=/^!/ -c -m > dist/main.js", 11 | "postinstall": "npm start", 12 | "start": "npm run watch & node server/index.js", 13 | "watch": "watch 'npm run bundle' ./client" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /example/asbundle/server/index.js: -------------------------------------------------------------------------------- 1 | // server side, CJS 2 | 3 | const {wire} = require('hypermorphic'); 4 | 5 | const index = (title) => wire(process, ':document')` 6 | 7 | 8 | ${title} 9 | 10 | 11 | 12 | ${body()} 13 | `; 14 | 15 | const body = () => wire(process, ':body')` 16 | 17 |
18 |
19 | served @ ${(new Date).toLocaleString()} 20 |
21 | `; 22 | 23 | const fs = require('fs'); 24 | const http = require('http'); 25 | const path = require('path'); 26 | const zlib = require('zlib'); 27 | 28 | const mainJS = path.join(__dirname, '..', 'dist', 'main.js'); 29 | 30 | http.createServer((req, res) => { 31 | if (req.url === '/dist/index.js') { 32 | res.writeHead(200, { 33 | 'content-type': 'application/javascript', 34 | 'content-encoding': 'gzip' 35 | }); 36 | fs.createReadStream(mainJS).pipe(zlib.createGzip()).pipe(res); 37 | } else if (req.url === '/favicon.ico') { 38 | res.writeHead(200, {'content-type': 'text/plain'}); 39 | res.end(''); 40 | } else { 41 | res.writeHead(200, {'content-type': 'text/html'}); 42 | res.end(index('hypermorphic')); 43 | } 44 | }).listen(8080, function () { 45 | console.log(`http://localhost:${this.address().port}/`); 46 | }); 47 | -------------------------------------------------------------------------------- /example/rollup/client/index.js: -------------------------------------------------------------------------------- 1 | // client side, ESM 2 | 3 | import {bind} from 'hypermorphic'; 4 | 5 | bind(document.querySelector('main'))` 6 |

hypermorphic 🎉

`; 7 | -------------------------------------------------------------------------------- /example/rollup/dist/main.js: -------------------------------------------------------------------------------- 1 | !function(){"use strict";const e=document.defaultView,t=1,n=/^area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr$/i,o="http://www.w3.org/2000/svg",r="connected",s="dis"+r,l=/^style|textarea$/i,c="_hyper: "+(Math.random()*new Date|0)+";",i="\x3c!--"+c+"--\x3e";let a=e.Event;try{new a("Event")}catch(e){a=function(e){const t=document.createEvent("Event");return t.initEvent(e,!1,!1),t}}const u=e.Map||function(){const e=[],t=[];return{get:n=>t[e.indexOf(n)],set(n,o){t[e.push(n)-1]=o}}},d=e.WeakMap||function(){return{get:e=>e[c],set(e,t){Object.defineProperty(e,c,{configurable:!0,value:t})}}},h=e.WeakSet||function(){const e=new d;return{add(t){e.set(t,!0)},has:t=>!0===e.get(t)}},f=Array.isArray||(e=>t=>"[object Array]"===e.call(t))({}.toString),p=c.trim||function(){return this.replace(/^\s+|\s+$/g,"")};function m(){return this}const g=(e,t)=>{const n="_"+e+"$";return{get(){return this[n]||(this[e]=t.call(this,e))},set(e){Object.defineProperty(this,n,{configurable:!0,value:e})}}},b={},v=[],N=b.hasOwnProperty;let y=0;var w=(e,t)=>{for(let n=0;nE(e).createElement(t),E=e=>e.ownerDocument||e,C=e=>E(e).createDocumentFragment(),j=(e,t)=>E(e).createTextNode(t),A=" \\f\\n\\r\\t",S="[ "+A+"]+[^ \\f\\n\\r\\t\\/>\"'=]+",k="<([A-Za-z]+[A-Za-z0-9:_-]*)((?:",L="(?:=(?:'[^']*?'|\"[^\"]*?\"|<[^>]*?>|[^ \\f\\n\\r\\t\\/>\"'=]+))?)",T=new RegExp(k+S+L+"+)([ "+A+"]*/?>)","g"),O=new RegExp(k+S+L+"*)([ "+A+"]*/>)","g"),M=C(document),D="append"in M,$="content"in x(document,"template");M.appendChild(j(M,"g")),M.appendChild(j(M,""));const P=1===M.cloneNode(!0).childNodes.length,B="importNode"in document,R=D?(e,t)=>{e.append.apply(e,t)}:(e,t)=>{const n=t.length;for(let o=0;o"<"+t+n.replace(_,F)+o,F=(e,t,n)=>t+(n||'"')+c+(n||'"'),Z=(e,t)=>("ownerSVGElement"in e?J:W)(e,t.replace(T,H)),z=P?e=>{const t=e.cloneNode(),n=e.childNodes||[],o=n.length;for(let e=0;ee.cloneNode(!0),V=B?(e,t)=>e.importNode(t,!0):(e,t)=>z(t),q=[].slice,G=e=>I(e);let I=t=>{if(t.propertyIsEnumerable("raw")||/Firefox\/(\d+)/.test((e.navigator||{}).userAgent)&&parseFloat(RegExp.$1)<55){const e={};I=(t=>{const n="_"+t.join(c);return e[n]||(e[n]=t)})}else I=(e=>e);return I(t)};const W=$?(e,t)=>{const n=x(e,"template");return n.innerHTML=t,n.content}:(e,t)=>{const n=x(e,"template"),o=C(e);if(/^[^\S]*?<(col(?:group)?|t(?:head|body|foot|r|d|h))/i.test(t)){const e=RegExp.$1;n.innerHTML=""+t+"
",R(o,q.call(n.querySelectorAll(e)))}else n.innerHTML=t,R(o,q.call(n.childNodes));return o},J=$?(e,t)=>{const n=C(e),r=E(e).createElementNS(o,"svg");return r.innerHTML=t,R(n,q.call(r.childNodes)),n}:(e,t)=>{const n=C(e),r=x(e,"div");return r.innerHTML=''+t+"",R(n,q.call(r.firstChild.childNodes)),n};function K(e){this.childNodes=e,this.length=e.length,this.first=e[0],this.last=e[this.length-1]}K.prototype.insert=function(){const e=C(this.first);return R(e,this.childNodes),e},K.prototype.remove=function(){const e=this.first,t=this.last;if(2===this.length)t.parentNode.removeChild(t);else{const n=E(e).createRange();n.setStartBefore(this.childNodes[1]),n.setEndAfter(t),n.deleteContents()}return e};const Q=(e,t,n)=>{e.unshift(e.indexOf.call(t.childNodes,n))};var U=(e,n,o)=>({type:e,name:o,node:n,path:(e=>{const n=[];let o;switch(e.nodeType){case t:case 11:o=e;break;case 8:o=e.parentNode,Q(n,o,e);break;default:o=e.ownerElement}for(e=o;o=o.parentNode;e=o)Q(n,o,e);return n})(n)}),X=(e,t)=>{const n=t.length;for(let o=0;o{let n,o;return r=>{switch(typeof r){case"object":if(r){if("object"===n){if(!t&&o!==r)for(const t in o)t in r||(e[t]="")}else t?e.value="":e.cssText="";const s=t?{}:e;for(const e in r){const t=r[e];s[e]="number"!=typeof t||Y.test(e)?t:t+"px"}n="object",t?e.value=oe(o=s):o=r;break}default:o!=r&&(n="string",o=r,t?e.value=r||"":e.cssText=r||"")}}},te=/([^A-Z])([A-Z]+)/g,ne=(e,t,n)=>t+"-"+n.toLowerCase(),oe=e=>{const t=[];for(const n in e)t.push(n.replace(te,ne),":",e[n],";");return t.join("")},re=e=>e,se=(e,t,n)=>{const o=e.ownerDocument.createRange();o.setStartBefore(t),o.setEndAfter(n),o.deleteContents()},le=(e,t,n,o,r)=>{const s=o||re,l=null==r?null:s(r,0);let c=0,i=0,a=t.length-1,u=t[0],d=t[a],h=n.length-1,f=n[0],p=n[h];for(;c<=a&&i<=h;)if(null==u)u=t[++c];else if(null==d)d=t[--a];else if(null==f)f=n[++i];else if(null==p)p=n[--h];else if(u==f)u=t[++c],f=n[++i];else if(d==p)d=t[--a],p=n[--h];else if(u==p)e.insertBefore(s(u,1),s(d,-0).nextSibling),u=t[++c],p=n[--h];else if(d==f)e.insertBefore(s(d,1),s(u,0)),d=t[--a],f=n[++i];else{let o=t.indexOf(f);if(o<0)e.insertBefore(s(f,1),s(u,0)),f=n[++i];else{let r=o,l=i;for(;r<=a&&l<=h&&t[r]===n[l];)r++,l++;if(1a){const t=n[h+1],o=null==t?l:s(t,0);if(i===h)e.insertBefore(s(n[i],1),o);else{const t=e.ownerDocument.createDocumentFragment();for(;i<=h;)t.appendChild(s(n[i++],1));e.insertBefore(t,o)}}else null==t[c]&&c++,c===a?e.removeChild(s(t[c],-1)):se(e,s(t[c],-1),s(t[a],-1));return n},ce=new h;function ie(){}ie.prototype=Object.create(null);const ae=e=>({html:e}),ue=(e,t)=>"ELEMENT_NODE"in e?e:e.constructor===K?1/t<0?t?e.remove():e.last:t?e.insert():e.first:ue(e.render(),t),de=(e,n,o)=>{const r=e.childNodes,s=r.length;for(let a=0;a{const o=new ie,r=e.attributes,s=q.call(r),l=[],i=s.length;for(let e=0;e{t(e.placeholder),"text"in e?Promise.resolve(e.text).then(String).then(t):"any"in e?Promise.resolve(e.any).then(t):"html"in e?Promise.resolve(e.html).then(ae).then(t):Promise.resolve(w(e,t)).then(t)},pe=e=>null!=e&&"then"in e,me=(e,t)=>{let n,o=!1;const r=s=>{switch(typeof s){case"string":case"number":case"boolean":o?n!==s&&(n=s,t[0].textContent=s):(o=!0,n=s,t=le(e.parentNode,t,[j(e,s)],ue,e));break;case"object":case"undefined":if(null==s){o=!1,t=le(e.parentNode,t,[],ue,e);break}default:if(o=!1,n=s,f(s))if(0===s.length)t.length&&(t=le(e.parentNode,t,[],ue,e));else switch(typeof s[0]){case"string":case"number":case"boolean":r({html:s});break;case"object":if(f(s[0])&&(s=s.concat.apply([],s)),pe(s[0])){Promise.all(s).then(r);break}default:t=le(e.parentNode,t,s,ue,e)}else(e=>"ELEMENT_NODE"in e||e instanceof K||e instanceof m)(s)?t=le(e.parentNode,t,11===s.nodeType?q.call(s.childNodes):[s],ue,e):pe(s)?s.then(r):"placeholder"in s?fe(s,r):"text"in s?r(String(s.text)):"any"in s?r(s.any):"html"in s?t=le(e.parentNode,t,q.call(Z(e,[].concat(s.html).join("")).childNodes),ue,e):r("length"in s?q.call(s):w(s,r))}};return r},ge=(e,n,o)=>{const l="ownerSVGElement"in e;let c;if("style"===n)return((e,t,n)=>{if(n){const o=t.cloneNode(!0);return o.value="",e.setAttributeNode(o),ee(o,n)}return ee(e.style,n)})(e,o,l);if(/^on/.test(n)){let o=n.slice(2);return o===r||o===s?(Ne&&(Ne=!1,function(){const e=(e,o)=>{const r=new a(o),s=e.length;for(let o=0;o{ce.has(e)&&e.dispatchEvent(t);const o=e.children,r=o.length;for(let e=0;e{const n=t.length;for(let o=0;o{e([t.target],s)},!1),document.addEventListener("DOMNodeInserted",t=>{e([t.target],r)},!1)}}()),ce.add(e)):n.toLowerCase()in e&&(o=o.toLowerCase()),t=>{c!==t&&(c&&e.removeEventListener(o,c,!1),c=t,t&&e.addEventListener(o,t,!1))}}if("data"===n||!l&&n in e)return t=>{c!==t&&(c=t,e[n]!==t&&(e[n]=t,null==t&&e.removeAttribute(n)))};{let t=!1;const n=o.cloneNode(!0);return o=>{c!==o&&(c=o,n.value!==o&&(null==o?(t&&(t=!1,e.removeAttributeNode(n)),n.value=o):(n.value=o,t||(t=!0,e.setAttributeNode(n)))))}}},be=e=>{let t;const n=o=>{t!==o&&(t=o,"object"==typeof o&&o?pe(o)?o.then(n):"placeholder"in o?fe(o,n):n("text"in o?String(o.text):"any"in o?o.any:"html"in o?[].concat(o.html).join(""):"length"in o?q.call(o).join(""):w(o,n)):e.textContent=null==o?"":o)};return n};var ve={create:(e,t)=>{const n=[],o=t.length;for(let r=0;rn.test(t)?e:"<"+t+o+">",Ae=(new d,e=>{const n=e.childNodes,o=n.length,r=[];for(let e=0;exe.bind(e);!function(e){const t=new d,n=Object.create;Object.defineProperties(m,{for:{configurable:!0,value(e,o){return((e,t,o,r)=>{switch(typeof r){case"object":case"function":const s=t.w||(t.w=new d);return s.get(r)||((e,t,n)=>(e.set(t,n),n))(s,r,new e(o));default:const l=t.p||(t.p=n(null));return l[r]||(l[r]=new e(o))}})(this,t.get(e)||(e=>{const n={w:null,p:null};return t.set(e,n),n})(e),e,null==o?"default":o)}}}),Object.defineProperties(m.prototype,{handleEvent:{value(e){const t=e.currentTarget;this["getAttribute"in t&&t.getAttribute("data-call")||"on"+e.type](e)}},html:g("html",e),svg:g("svg",e),state:g("state",function(){return this.defaultState}),defaultState:{get:()=>({})},setState:{value(e,t){const n=this.state,o="function"==typeof e?e.call(this,n):e;for(const e in o)n[e]=o[e];return!1!==t&&this.render(),this}}})}(e=>{let t,n,r,s,l;return function(c){c=G(c);let i=s!==c;return i&&(s=c,r=C(document),n="svg"===e?document.createElementNS(o,"svg"):r,l=xe.bind(n)),l.apply(null,arguments),i&&("svg"===e&&R(r,q.call(n.childNodes)),t=Ae(r)),t}}),Se(document.querySelector("main"))` 2 |

hypermorphic 🎉

`}(); 3 | -------------------------------------------------------------------------------- /example/rollup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "devDependencies": { 4 | "hypermorphic": "^0.1.0", 5 | "rollup": "^0.57.1", 6 | "rollup-plugin-alias": "^1.4.0", 7 | "rollup-plugin-uglify": "^3.0.0" 8 | }, 9 | "scripts": { 10 | "bundle": "rollup --config rollup.config.js", 11 | "postinstall": "npm start", 12 | "start": "rollup -w --config rollup.config.js & node server/index.js" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /example/rollup/rollup.config.js: -------------------------------------------------------------------------------- 1 | import alias from 'rollup-plugin-alias'; 2 | import uglify from 'rollup-plugin-uglify'; 3 | 4 | export default { 5 | input: 'client/index.js', 6 | output: { 7 | file: 'dist/main.js', 8 | format: 'iife' 9 | }, 10 | plugins: [ 11 | alias({ 12 | hypermorphic: 'node_modules/hyperhtml/esm/index.js' 13 | }), 14 | uglify({ 15 | output: { 16 | comments: (node, comment) => /^!/.test(comment.value) 17 | } 18 | }) 19 | ], 20 | watch: { 21 | exclude: ['node_modules/**'] 22 | } 23 | }; 24 | -------------------------------------------------------------------------------- /example/rollup/server/index.js: -------------------------------------------------------------------------------- 1 | // server side, CJS 2 | 3 | const {wire} = require('hypermorphic'); 4 | 5 | const index = (title) => wire(process, ':document')` 6 | 7 | 8 | ${title} 9 | 10 | 11 | 12 | ${body()} 13 | `; 14 | 15 | const body = () => wire(process, ':body')` 16 | 17 |
18 |
19 | served @ ${(new Date).toLocaleString()} 20 |
21 | `; 22 | 23 | const fs = require('fs'); 24 | const http = require('http'); 25 | const path = require('path'); 26 | const zlib = require('zlib'); 27 | 28 | const mainJS = path.join(__dirname, '..', 'dist', 'main.js'); 29 | 30 | http.createServer((req, res) => { 31 | if (req.url === '/dist/index.js') { 32 | res.writeHead(200, { 33 | 'content-type': 'application/javascript', 34 | 'content-encoding': 'gzip' 35 | }); 36 | fs.createReadStream(mainJS).pipe(zlib.createGzip()).pipe(res); 37 | } else if (req.url === '/favicon.ico') { 38 | res.writeHead(200, {'content-type': 'text/plain'}); 39 | res.end(''); 40 | } else { 41 | res.writeHead(200, {'content-type': 'text/html'}); 42 | res.end(index('hypermorphic')); 43 | } 44 | }).listen(8080, function () { 45 | console.log(`http://localhost:${this.address().port}/`); 46 | }); 47 | -------------------------------------------------------------------------------- /example/webpack/client/index.js: -------------------------------------------------------------------------------- 1 | // client side, ESM 2 | 3 | import {bind} from 'hypermorphic'; 4 | 5 | bind(document.querySelector('main'))` 6 |

hypermorphic 🎉

`; 7 | -------------------------------------------------------------------------------- /example/webpack/dist/main.js: -------------------------------------------------------------------------------- 1 | !function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=17)}([function(e,t,n){"use strict";const o=document.defaultView;t.G=o;t.ELEMENT_NODE=1;t.ATTRIBUTE_NODE=2;t.TEXT_NODE=3;t.COMMENT_NODE=8;t.DOCUMENT_FRAGMENT_NODE=11;t.VOID_ELEMENTS=/^area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr$/i;t.OWNER_SVG_ELEMENT="ownerSVGElement";t.SVG_NAMESPACE="http://www.w3.org/2000/svg";t.CONNECTED="connected";t.DISCONNECTED="disconnected";t.EXPANDO="_hyper: ";t.SHOULD_USE_TEXT_CONTENT=/^style|textarea$/i;const r="_hyper: "+(Math.random()*new Date|0)+";";t.UID=r;const s="\x3c!--"+r+"--\x3e";t.UIDC=s},function(e,t,n){"use strict";t.create=((e,t)=>o(e).createElement(t));const o=e=>e.ownerDocument||e;t.doc=o;t.fragment=(e=>o(e).createDocumentFragment());t.text=((e,t)=>o(e).createTextNode(t))},function(e,t,n){"use strict";const{attrName:o,attrSeeker:r}=n(8),{G:s,OWNER_SVG_ELEMENT:l,SVG_NAMESPACE:c,UID:i,UIDC:a}=n(0),{hasAppend:u,hasContent:d,hasDoomedCloneNode:f,hasImportNode:p}=n(16),{create:h,doc:m,fragment:E}=n(1),N=u?(e,t)=>{e.append.apply(e,t)}:(e,t)=>{const n=t.length;for(let o=0;o"<"+t+n.replace(g,b)+o,b=(e,t,n)=>t+(n||'"')+i+(n||'"');t.createFragment=((e,t)=>(l in e?C:w)(e,t.replace(r,_)));const y=f?e=>{const t=e.cloneNode(),n=e.childNodes||[],o=n.length;for(let e=0;ee.cloneNode(!0),v=p?(e,t)=>e.importNode(t,!0):(e,t)=>y(t);t.importNode=v;const M=[].slice;t.slice=M;t.unique=(e=>O(e));let O=e=>{if(e.propertyIsEnumerable("raw")||/Firefox\/(\d+)/.test((s.navigator||{}).userAgent)&&parseFloat(RegExp.$1)<55){const e={};O=(t=>{const n="_"+t.join(i);return e[n]||(e[n]=t)})}else O=(e=>e);return O(e)};const w=d?(e,t)=>{const n=h(e,"template");return n.innerHTML=t,n.content}:(e,t)=>{const n=h(e,"template"),o=E(e);if(/^[^\S]*?<(col(?:group)?|t(?:head|body|foot|r|d|h))/i.test(t)){const e=RegExp.$1;n.innerHTML=""+t+"
",N(o,M.call(n.querySelectorAll(e)))}else n.innerHTML=t,N(o,M.call(n.childNodes));return o},C=d?(e,t)=>{const n=E(e),o=m(e).createElementNS(c,"svg");return o.innerHTML=t,N(n,M.call(o.childNodes)),n}:(e,t)=>{const n=E(e),o=h(e,"div");return o.innerHTML=''+t+"",N(n,M.call(o.firstChild.childNodes)),n}},function(e,t,n){"use strict";const{G:o,UID:r}=n(0);let s=o.Event;try{new s("Event")}catch(e){s=function(e){const t=document.createEvent("Event");return t.initEvent(e,!1,!1),t}}t.Event=s;const l=o.Map||function(){const e=[],t=[];return{get:n=>t[e.indexOf(n)],set(n,o){t[e.push(n)-1]=o}}};t.Map=l;const c=o.WeakMap||function(){return{get:e=>e[r],set(e,t){Object.defineProperty(e,r,{configurable:!0,value:t})}}};t.WeakMap=c;const i=o.WeakSet||function(){const e=new c;return{add(t){e.set(t,!0)},has:t=>!0===e.get(t)}};t.WeakSet=i;const a=Array.isArray||(e=>t=>"[object Array]"===e.call(t))({}.toString);t.isArray=a;const u=r.trim||function(){return this.replace(/^\s+|\s+$/g,"")};t.trim=u},function(e,t,n){"use strict";const{WeakMap:o}=n(3);function r(){return this}Object.defineProperty(t,"__esModule",{value:!0}).default=r,t.setup=function(e){const t=new o,n=Object.create;Object.defineProperties(r,{for:{configurable:!0,value(e,r){return((e,t,r,s)=>{switch(typeof s){case"object":case"function":const l=t.w||(t.w=new o);return l.get(s)||((e,t,n)=>(e.set(t,n),n))(l,s,new e(r));default:const c=t.p||(t.p=n(null));return c[s]||(c[s]=new e(r))}})(this,t.get(e)||(e=>{const n={w:null,p:null};return t.set(e,n),n})(e),e,null==r?"default":r)}}}),Object.defineProperties(r.prototype,{handleEvent:{value(e){const t=e.currentTarget;this["getAttribute"in t&&t.getAttribute("data-call")||"on"+e.type](e)}},html:s("html",e),svg:s("svg",e),state:s("state",function(){return this.defaultState}),defaultState:{get:()=>({})},setState:{value(e,t){const n=this.state,o="function"==typeof e?e.call(this,n):e;for(const e in o)n[e]=o[e];return!1!==t&&this.render(),this}}})};const s=(e,t)=>{const n="_"+e+"$";return{get(){return this[n]||(this[e]=t.call(this,e))},set(e){Object.defineProperty(this,n,{configurable:!0,value:e})}}}},function(e,t,n){"use strict"; 2 | /*! (c) 2017 Andrea Giammarchi (ISC) */const o=e=>e,r=(e,t,n)=>{const o=e.ownerDocument.createRange();o.setStartBefore(t),o.setEndAfter(n),o.deleteContents()};Object.defineProperty(t,"__esModule",{value:!0}).default=((e,t,n,s,l)=>{const c=s||o,i=null==l?null:c(l,0);let a=0,u=0,d=t.length-1,f=t[0],p=t[d],h=n.length-1,m=n[0],E=n[h];for(;a<=d&&u<=h;)if(null==f)f=t[++a];else if(null==p)p=t[--d];else if(null==m)m=n[++u];else if(null==E)E=n[--h];else if(f==m)f=t[++a],m=n[++u];else if(p==E)p=t[--d],E=n[--h];else if(f==E)e.insertBefore(c(f,1),c(p,-0).nextSibling),f=t[++a],E=n[--h];else if(p==m)e.insertBefore(c(p,1),c(f,0)),p=t[--d],m=n[++u];else{let o=t.indexOf(m);if(o<0)e.insertBefore(c(m,1),c(f,0)),m=n[++u];else{let s=o,l=u;for(;s<=d&&l<=h&&t[s]===n[l];)s++,l++;if(1d){const t=n[h+1],o=null==t?i:c(t,0);if(u===h)e.insertBefore(c(n[u],1),o);else{const t=e.ownerDocument.createDocumentFragment();for(;u<=h;)t.appendChild(c(n[u++],1));e.insertBefore(t,o)}}else null==t[a]&&a++,a===d?e.removeChild(c(t[a],-1)):r(e,c(t[a],-1),c(t[d],-1));return n})},function(e,t,n){"use strict";const{Map:o,WeakMap:r}=n(3),{UIDC:s,VOID_ELEMENTS:l}=n(0),c=(e=>e.__esModule?e.default:e)(n(15)),{createFragment:i,importNode:a,unique:u}=n(2),{selfClosing:d}=n(8),f=new r,p=new o;function h(){const e=arguments.length;for(let t=1;tl.test(t)?e:"<"+t+n+">";Object.defineProperty(t,"__esModule",{value:!0}).default=function(e){const t=f.get(this);return t&&t.template===u(e)?h.apply(t.updates,arguments):function(e){e=u(e);const t=p.get(e)||function(e){const t=[],n=e.join(s).replace(m,E),o=i(this,n);c.find(o,t,e.slice());const r={fragment:o,paths:t};return p.set(e,r),r}.call(this,e),n=a(this.ownerDocument,t.fragment),o=c.create(n,t.paths);f.set(this,{template:e,updates:o}),h.apply(o,arguments),this.textContent="",this.appendChild(n)}.apply(this,arguments),this}},function(e,t,n){"use strict";const{append:o}=n(2),{doc:r,fragment:s}=n(1);function l(e){this.childNodes=e,this.length=e.length,this.first=e[0],this.last=e[this.length-1]}Object.defineProperty(t,"__esModule",{value:!0}).default=l,l.prototype.insert=function(){const e=s(this.first);return o(e,this.childNodes),e},l.prototype.remove=function(){const e=this.first,t=this.last;if(2===this.length)t.parentNode.removeChild(t);else{const n=r(e).createRange();n.setStartBefore(this.childNodes[1]),n.setEndAfter(t),n.deleteContents()}return e}},function(e,t,n){"use strict";const o=" \\f\\n\\r\\t",r="[ "+o+"]+[^ \\f\\n\\r\\t\\/>\"'=]+",s="<([A-Za-z]+[A-Za-z0-9:_-]*)((?:",l="(?:=(?:'[^']*?'|\"[^\"]*?\"|<[^>]*?>|[^ \\f\\n\\r\\t\\/>\"'=]+))?)",c=new RegExp(s+r+l+"+)([ "+o+"]*/?>)","g"),i=new RegExp(s+r+l+"*)([ "+o+"]*/>)","g");t.attrName=r,t.attrSeeker=c,t.selfClosing=i},function(e,t,n){"use strict";const{ELEMENT_NODE:o,SVG_NAMESPACE:r}=n(0),{WeakMap:s,trim:l}=n(3),{fragment:c}=n(1),{append:i,slice:a,unique:u}=n(2),d=(e=>e.__esModule?e.default:e)(n(7)),f=(e=>e.__esModule?e.default:e)(n(6)),p=new s,h=e=>{let t,n,o,s,l;return function(d){d=u(d);let p=s!==d;return p&&(s=d,o=c(document),n="svg"===e?document.createElementNS(r,"svg"):o,l=f.bind(n)),l.apply(null,arguments),p&&("svg"===e&&i(o,a.call(n.childNodes)),t=E(o)),t}},m=(e,t)=>{const n=t.indexOf(":");let o=p.get(e),r=t;return-1{const t=e.childNodes,n=t.length,r=[];for(let e=0;enull==e?h(t||"html"):m(e,t||"html"))},function(e,t,n){"use strict";const o={},r=[],s=o.hasOwnProperty;let l=0;Object.defineProperty(t,"__esModule",{value:!0}).default={define:(e,t)=>{e in o||(l=r.push(e)),o[e]=t},invoke:(e,t)=>{for(let n=0;ne.__esModule?e.default:e)(n(4)),{setup:r}=n(4),s=(e=>e.__esModule?e.default:e)(n(10)),l=(e=>e.__esModule?e.default:e)(n(9)),{content:c,weakly:i}=n(9),a=(e=>e.__esModule?e.default:e)(n(6)),u=(e=>e.__esModule?e.default:e)(n(5)),d=e=>a.bind(e),f=s.define;function p(e){return arguments.length<2?null==e?c("html"):"string"==typeof e?p.wire(null,e):"raw"in e?c("html")(e):"nodeType"in e?p.bind(e):i(e,"html"):("raw"in e?c("html"):p.wire).apply(null,arguments)}p.Component=o,p.bind=d,p.define=f,p.diff=u,p.hyper=p,p.wire=l,r(c),t.Component=o,t.bind=d,t.define=f,t.diff=u,t.hyper=p,t.wire=l,Object.defineProperty(t,"__esModule",{value:!0}).default=p},function(e,t,n){e.exports=n(11)},function(e,t,n){"use strict";const o=/acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i;Object.defineProperty(t,"__esModule",{value:!0}).default=((e,t,n)=>{if(n){const o=t.cloneNode(!0);return o.value="",e.setAttributeNode(o),r(o,n)}return r(e.style,n)});const r=(e,t)=>{let n,r;return s=>{switch(typeof s){case"object":if(s){if("object"===n){if(!t&&r!==s)for(const t in r)t in s||(e[t]="")}else t?e.value="":e.cssText="";const l=t?{}:e;for(const e in s){const t=s[e];l[e]="number"!=typeof t||o.test(e)?t:t+"px"}n="object",t?e.value=c(r=l):r=s;break}default:r!=s&&(n="string",r=s,t?e.value=s||"":e.cssText=s||"")}}},s=/([^A-Z])([A-Z]+)/g,l=(e,t,n)=>t+"-"+n.toLowerCase(),c=e=>{const t=[];for(const n in e)t.push(n.replace(s,l),":",e[n],";");return t.join("")}},function(e,t,n){"use strict";const{COMMENT_NODE:o,DOCUMENT_FRAGMENT_NODE:r,ELEMENT_NODE:s}=n(0),l=(e,t,n)=>{e.unshift(e.indexOf.call(t.childNodes,n))};Object.defineProperty(t,"__esModule",{value:!0}).default={create:(e,t,n)=>({type:e,name:n,node:t,path:(e=>{const t=[];let n;switch(e.nodeType){case s:case r:n=e;break;case o:n=e.parentNode,l(t,n,e);break;default:n=e.ownerElement}for(e=n;n=n.parentNode;e=n)l(t,n,e);return t})(t)}),find:(e,t)=>{const n=t.length;for(let o=0;oe.__esModule?e.default:e)(n(4)),h=(e=>e.__esModule?e.default:e)(n(7)),m=(e=>e.__esModule?e.default:e)(n(14)),E=(e=>e.__esModule?e.default:e)(n(13)),N=(e=>e.__esModule?e.default:e)(n(10)),g=(e=>e.__esModule?e.default:e)(n(5)),{text:_}=n(1),{Event:b,WeakSet:y,isArray:v,trim:M}=n(3),{createFragment:O,slice:w}=n(2),C=new y;function T(){}T.prototype=Object.create(null);const D=e=>({html:e}),x=(e,t)=>"ELEMENT_NODE"in e?e:e.constructor===h?1/t<0?t?e.remove():e.last:t?e.insert():e.first:x(e.render(),t),S=(e,t,n)=>{const o=e.childNodes,r=o.length;for(let l=0;l{const o=new T,r=e.attributes,s=w.call(r),l=[],c=s.length;for(let e=0;e{t(e.placeholder),"text"in e?Promise.resolve(e.text).then(String).then(t):"any"in e?Promise.resolve(e.any).then(t):"html"in e?Promise.resolve(e.html).then(D).then(t):Promise.resolve(N.invoke(e,t)).then(t)},k=e=>null!=e&&"then"in e,L=(e,t)=>{let n,o=!1;const r=s=>{switch(typeof s){case"string":case"number":case"boolean":o?n!==s&&(n=s,t[0].textContent=s):(o=!0,n=s,t=g(e.parentNode,t,[_(e,s)],x,e));break;case"object":case"undefined":if(null==s){o=!1,t=g(e.parentNode,t,[],x,e);break}default:if(o=!1,n=s,v(s))if(0===s.length)t.length&&(t=g(e.parentNode,t,[],x,e));else switch(typeof s[0]){case"string":case"number":case"boolean":r({html:s});break;case"object":if(v(s[0])&&(s=s.concat.apply([],s)),k(s[0])){Promise.all(s).then(r);break}default:t=g(e.parentNode,t,s,x,e)}else(e=>"ELEMENT_NODE"in e||e instanceof h||e instanceof p)(s)?t=g(e.parentNode,t,s.nodeType===l?w.call(s.childNodes):[s],x,e):k(s)?s.then(r):"placeholder"in s?j(s,r):"text"in s?r(String(s.text)):"any"in s?r(s.any):"html"in s?t=g(e.parentNode,t,w.call(O(e,[].concat(s.html).join("")).childNodes),x,e):r("length"in s?w.call(s):N.invoke(s,r))}};return r},P=(e,t,n)=>{const s=a in e;let l;if("style"===t)return E(e,n,s);if(/^on/.test(t)){let n=t.slice(2);return n===o||n===r?(U&&(U=!1,function(){const e=(e,n)=>{const o=new b(n),r=e.length;for(let n=0;n{C.has(e)&&e.dispatchEvent(n);const o=e.children,r=o.length;for(let e=0;e{const n=t.length;for(let s=0;s{e([t.target],r)},!1),document.addEventListener("DOMNodeInserted",t=>{e([t.target],o)},!1)}}()),C.add(e)):t.toLowerCase()in e&&(n=n.toLowerCase()),t=>{l!==t&&(l&&e.removeEventListener(n,l,!1),l=t,t&&e.addEventListener(n,t,!1))}}if("data"===t||!s&&t in e)return n=>{l!==n&&(l=n,e[t]!==n&&(e[t]=n,null==n&&e.removeAttribute(t)))};{let t=!1;const o=n.cloneNode(!0);return n=>{l!==n&&(l=n,o.value!==n&&(null==n?(t&&(t=!1,e.removeAttributeNode(o)),o.value=n):(o.value=n,t||(t=!0,e.setAttributeNode(o)))))}}},I=e=>{let t;const n=o=>{t!==o&&(t=o,"object"==typeof o&&o?k(o)?o.then(n):"placeholder"in o?j(o,n):n("text"in o?String(o.text):"any"in o?o.any:"html"in o?[].concat(o.html).join(""):"length"in o?w.call(o).join(""):N.invoke(o,n)):e.textContent=null==o?"":o)};return n};Object.defineProperty(t,"__esModule",{value:!0}).default={create:(e,t)=>{const n=[],o=t.length;for(let r=0;rhypermorphic 🎉`}]); -------------------------------------------------------------------------------- /example/webpack/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "devDependencies": { 4 | "hypermorphic": "^0.1.0", 5 | "webpack": "^4.5.0", 6 | "webpack-cli": "^2.0.13" 7 | }, 8 | "scripts": { 9 | "bundle": "webpack", 10 | "postinstall": "npm start", 11 | "start": "npm run watch & node server/index.js", 12 | "watch": "webpack --watch --info-verbosity verbose ./client" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /example/webpack/server/index.js: -------------------------------------------------------------------------------- 1 | // server side, CJS 2 | 3 | const {wire} = require('hypermorphic'); 4 | 5 | const index = (title) => wire(process, ':document')` 6 | 7 | 8 | ${title} 9 | 10 | 11 | 12 | ${body()} 13 | `; 14 | 15 | const body = () => wire(process, ':body')` 16 | 17 |
18 | 21 | `; 22 | 23 | const fs = require('fs'); 24 | const http = require('http'); 25 | const path = require('path'); 26 | const zlib = require('zlib'); 27 | 28 | const mainJS = path.join(__dirname, '..', 'dist', 'main.js'); 29 | 30 | http.createServer((req, res) => { 31 | if (req.url === '/dist/index.js') { 32 | res.writeHead(200, { 33 | 'content-type': 'application/javascript', 34 | 'content-encoding': 'gzip' 35 | }); 36 | fs.createReadStream(mainJS).pipe(zlib.createGzip()).pipe(res); 37 | } else if (req.url === '/favicon.ico') { 38 | res.writeHead(200, {'content-type': 'text/plain'}); 39 | res.end(''); 40 | } else { 41 | res.writeHead(200, {'content-type': 'text/html'}); 42 | res.end(index('hypermorphic')); 43 | } 44 | }).listen(8080, function () { 45 | console.log(`http://localhost:${this.address().port}/`); 46 | }); 47 | -------------------------------------------------------------------------------- /example/webpack/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mode: 'production', 3 | entry: './client/index.js', 4 | resolve: { 5 | alias: { 6 | // hyperhtml/cjs is returned by hypermorphic 7 | // so that aliasing viperhtml as hyperhtml/cjs 8 | // will basically nullify viperhtml require 9 | 'viperhtml': 'hyperhtml/cjs' 10 | } 11 | } 12 | }; 13 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Original solution proposed by László Balogh 3 | * after my reply in Stack Overflow 4 | * https://stackoverflow.com/questions/49638355/isomorphic-hyperhtml-components-without-passing-in-wires/49647934#49647934 5 | * Readapted as module by Andrea Giammarchi 6 | * to be installed and consumed as regular module 7 | */ 8 | 9 | module.exports = typeof document === 'object' ? 10 | require('hyperhtml/cjs') : 11 | require('viperhtml'); 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hypermorphic", 3 | "version": "0.9.0", 4 | "description": "An isomorphic hyperHTML & viperHTML importer, compatible with bundlers", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "node -e 'console.assert(typeof require(\"./\").bind === typeof Function)'" 8 | }, 9 | "keywords": [ 10 | "hyperhtml", 11 | "viperhtml", 12 | "isomorphic", 13 | "dom", 14 | "html" 15 | ], 16 | "author": "Andrea Giammarchi", 17 | "license": "ISC", 18 | "dependencies": { 19 | "hyperhtml": "^2.28.0", 20 | "viperhtml": "^2.17.0" 21 | }, 22 | "devDependencies": {}, 23 | "repository": { 24 | "type": "git", 25 | "url": "git+https://github.com/WebReflection/hypermorphic.git" 26 | }, 27 | "bugs": { 28 | "url": "https://github.com/WebReflection/hypermorphic/issues" 29 | }, 30 | "homepage": "https://github.com/WebReflection/hypermorphic#readme" 31 | } 32 | --------------------------------------------------------------------------------