copycat.js 🐱

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!

Usage

const objectBeingWatched = copycat(element, object_to_bind, template_function)

• objectBeingWatched: you will be able to modify the properties of this object to get changes in the DOM.
• element: #id or .class of the element where you want to mount the template
• object_to_bind: object you want to bind
• template_function: function with one argument used to fill in the template string

Example

        
<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';
        
      

Installation

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?

Credits

Copycatted from Sindre Sorhus's on-change