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?
One way is reference the function in defineExpose
for example:
defineExpose({isFilterActive, setModel, getModel});