Legacy Wrapper

This component acts as a wrapper for libraries such as d3 or p5.js which expects to have full control of the DOM beneath a certain element and thus is useful when converting old visualizations to the new library.

Usage

In order to utilize this wrapper the file that is included needs to default export function which will be executed on the component load. This function also conveniently will encapsulate any var keywords used inside of it to prevent access to globals.

<template>
    <iv-legacy-wrapper :execute="legacyCode" />
</template>
<script>
import legacyCode from './legacyCode.js'
export default {
  data(){
     return { legacyCode }
  }
}
</script>

API

Name

Tagname: iv-legacy-wrapper

Props

• execute [Function] - Function to execute when this component is loaded
• src [String - not working] - String to path of file containing an exported function
• id [String] - ID of the div which will be automatically created by the legacy wrapper