viterollupag-grid-vue

Vite: how to exclude one file from treeshaking?


I have one vue app, which uses Ag-Grid and I have a vuejs component as a custom column filter for Ag-Grid.

https://www.ag-grid.com/vue-data-grid/component-filter/ https://www.ag-grid.com/vue-data-grid/vue3-script-setup/

Here is my custom filter component BooleanFilter.vue:

<template>
  <div class="ag-filter">
    <div>
      <div class="ag-filter-body">
        <label class="radio-option">
          <input type="radio" name="value" value="True" v-model="state.value" @change="updateFilter">
          {{ t('Global.True') }}
        </label>
        <label class="radio-option">
          <input type="radio" name="value" value="False" v-model="state.value" @change="updateFilter">
          {{ t('Global.False') }}
        </label>
        <label class="radio-option">
          <input type="radio" name="value" value="" v-model="state.value" @change="updateFilter">
          Clear
        </label>
      </div>
    </div>
  </div>
</template>


<script setup>
const { params } = defineProps();
const { field } = params.colDef;
const state = reactive({
  value: ''
});

 
const isFilterActive = () => {
  return state.value !== '';
}

const updateFilter = (value) => {
  params.filterChangedCallback();
}

const doesFilterPass = (params) => {
  return params.data[field] == state.value;
}

const getModel = () => {
  if (state.value === '') {
    return undefined;
  }
  
  return {
    filter: state.value,
    type: 'equals'
  }
}

const setModel = (model) => {
  if (model !== null) {
    state.value = model.filter;
  }
}
</script>

My issue: vite's tree shaking removes false positive methods from this Ag-Grid extension file. isFilterActive, setModel, getModel etc. removed by tree shaking in production build. How can I disable treeshaking against only this file?


Solution

  • One way is reference the function in defineExpose for example:

    defineExpose({isFilterActive, setModel, getModel});