Make DOM elements copy properties of objects in 1 KB!
Try evaluating cat.name = 'Sylvester'
and
cat.value = 100'
in your console.
Copycat works recursively, just like the library it was copied from.
Here is some nested data {nested: {value: 1}}
, try executing cat2.nested.value = 10
!
const objectBeingWatched = copycat(element, object_to_bind, template_function)
<div id="app"></div>
const cat = copyCat(
'#app',
{
name: 'cat',
value: 1
},
data => `<p>
Hi, I'm ${data.name}. I have a value of ${data.value}
</p>`
);
cat.name = 'Tom';
Copy the following code into your project:
function copyCat(e,t,r){function n(t){document.querySelector(e).innerHTML=r(t)}return n(t),function(e,t){const r=Symbol("ProxyTarget");let n=!1,o=!1;const c=new WeakMap,f=()=>{n?o||(o=!0):t(e)},u=(e,t)=>{c.has(e)&&c.get(e).delete(t)},l={get(e,t,n){if(t===r)return e;const o=Reflect.get(e,t,n);if((e=>null===e||"object"!=typeof e&&"function"!=typeof e)(o))return o;const f=((e,t)=>{c.has(e)||c.set(e,new Map);const r=c.get(e);if(r.has(t))return r.get(t);const n=Reflect.getOwnPropertyDescriptor(e,t);return r.set(t,n),n})(e,t);if(f&&!f.configurable){if(f.set&&!f.get)return;if(!1===f.writable)return o}return new Proxy(o,l)},set(e,t,n,o){n&&void 0!==n[r]&&(n=n[r]);const c=Reflect.get(e,t,n,o),u=Reflect.set(e,t,n);return c!==n&&f(),u},defineProperty(e,t,r){const n=Reflect.defineProperty(e,t,r);return u(e,t),f(),n},deleteProperty(e,t){const r=Reflect.deleteProperty(e,t);return u(e,t),f(),r},apply(r,c,f){if(!n){n=!0;const u=Reflect.apply(r,c,f);return o&&t(e),n=!1,o=!1,u}return Reflect.apply(r,c,f)}};return new Proxy(e,l)}(t,n)}
Link to the minified version or did you want to see the code?
Copycatted from Sindre Sorhus's on-change