Is extending UI with HOC is normal behavior ?

[dante01yoon]

Greetings, I just starts learning vue, I wonder extend UI like adding layout or mouse pointer could be sort of High Order Component patterns in Vue. (Assume Its not Vue agonistic question)

Here is my sample codes.

Normal options API

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  <div 
    class="pointer"
    :style="{transform: `translate(-50%, -50%) translate(${x}px, ${y}px)`}"
  >
    <div>{{x}} {{y}}</div>
  </div>
</div>

<script>
  const { createApp } = Vue;

  const MousePointer = {
    data() {
      return {
        x: 0,
        y: 0,
      }
    }, 
    methods: {
      update(e){
        this.x = e.pageX;
        this.y = e.pageY;
      }
    },
    mounted() {
      window.addEventListener('mousemove', this.update)
    },
    unmounted() {
      window.removeEventListener("mousemove", this.update)
    }
  }

  createApp(MousePointer).mount('#app');
</script>



<style>
  .pointer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 120px;
    height: 120px;
    color: white;
    background: rgb(114, 224, 36);
    border-radius: 50%;
    top: 0;
    left: 0;
    pointer-events: none;
    mix-blend-mode: difference;
    transition: 0.15s all cubic-bezier(0.07, 0.82, 0.17, 1);
    z-index: 9999;
  }
  </style>

Apply HOC

  
  <script src="https://unpkg.com/vue@next"></script>
  
  <div id="app">
    
  </div>
  
  <script>
    const { createApp, h } = Vue;
    function withMouse(Inner) {
      const WrapperComponent = {
        props: ['x','y'],
        template: `
          <div 
              class="pointer"
              :style="{
                transform: 'translate(-50%, -50%) translate(' +x + 'px, ' +y +'px)'
              }"
          >
            <slot name="inner"/>
          </div>
        `
      }

      return {
        data() {
          return {
            x: 0,
            y: 0,
          }
        },
        methods: {
          update(e){
            this.x = e.pageX;
            this.y = e.pageY;
          }
        },
        mounted() {
        window.addEventListener('mousemove', this.update)
        },
        unmounted() {
          window.removeEventListener("mousemove", this.update)
        },
        render() {
          return h(WrapperComponent, {
            x: this.x,
            y: this.y,
          },
          {
            inner: () => h(Inner, {x: this.x, y: this.y})
          }
          )
        }
      }
    }
      
    const CursorIndicator = {
      props: ['x','y'],
      template: `<div>{{x}} {{y}}</div>`
    }

    const App = withMouse(CursorIndicator)
    
  
    createApp(App).mount('#app');
  </script>
  


<style>
  .pointer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 120px;
    height: 120px;
    color: white;
    background: rgb(114, 224, 36);
    border-radius: 50%;
    top: 0;
    left: 0;
    pointer-events: none;
    mix-blend-mode: difference;
    transition: 0.15s all cubic-bezier(0.07, 0.82, 0.17, 1);
    z-index: 9999;
  }
  </style>

codesandbox: https://codesandbox.io/s/dry-star-7tfwsv?file=/index.html