Modification - Build - Implement treeshaking #252

Author: graphieros

TestingArena/ArenaVueUiSparkbar.vue

@@ -230,11 +230,11 @@ const showTitleSlot = ref(false);
                     </div>
                 </template>
 
-                <template #data-label="{ bar }">
+                <!-- <template #data-label="{ bar }">
                     <div style="width:100%">
                         {{ bar.name }}: {{ bar.valueLabel }} to {{ bar.targetLabel }}
                     </div>
-                </template>
+                </template> -->
             </VueUiSparkbar>
         </template>
 
@@ -247,11 +247,11 @@ const showTitleSlot = ref(false);
                     </div>
                 </template>
 
-                <template #data-label="{ bar }">
+                <!-- <template #data-label="{ bar }">
                     <div style="width:100%">
                         {{ bar.name }}: {{ bar.valueLabel }} to {{ bar.targetLabel }}
                     </div>
-                </template>
+                </template> -->
             </VueDataUi>
         </template>
 

TestingArena/ArenaVueUiWheel.vue

@@ -44,7 +44,7 @@ function alterDataset() {
 
 const model = ref([
     { key: 'debug', def: true, type: 'checkbox'},
-    { key: 'loading', def: true, type: 'checkbox'},
+    { key: 'loading', def: false, type: 'checkbox'},
     { key: 'responsive', def: false, type: 'checkbox'},
     { key: 'userOptions.show', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.pdf', def: true, type: 'checkbox'},

TestingArena/ArenaVueUiXy.vue

@@ -6,6 +6,8 @@ import Box from "./Box.vue";
 import convertArrayToObject from "./convertModel";
 import { useArena } from "../src/useArena";
 
+const xyLoader = () => import('vue-data-ui/vue-ui-xy')
+
 const { local, build, vduiLocal, vduiBuild, toggleTable, toggleLabels, toggleStack } = useArena()
 
 const dates = [
@@ -1398,7 +1400,7 @@ onMounted(async () => {
         </template>
 
         <template #VDUI-local>
-            <LocalVueDataUi  component="VueUiXy" :dataset="isPropsToggled ? alternateDataset : dataset"
+            <LocalVueDataUi :loader="xyLoader" :dataset="isPropsToggled ? alternateDataset : dataset"
                 :config="isPropsToggled ? alternateConfig : config" :key="`VDUI-lodal_${step}`"
                 :selectedXIndex="selectedIndex"
                 @selectLegend="selectLegend" @selectX="selectX" ref="vduiLocal">
@@ -1494,7 +1496,7 @@ onMounted(async () => {
         </template>
 
         <template #VDUI-build>
-            <VueDataUi component="VueUiXy" :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`VDUI-build_${step}`"
+            <VueDataUi :loader="xyLoader" :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`VDUI-build_${step}`"
                 @selectLegend="selectLegend" @selectX="selectX" ref="vduiBuild">
                 <template #time-label="{x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
                     <g @click="() => selectTimeLabel({x, y, fontSize, absoluteIndex })">                

copy-types.cjs

@@ -27,7 +27,7 @@ fs.readdirSync(typesDir).forEach((file) => {
   const distFile = path.join(distTypesDir, file);
 
   fs.copyFileSync(srcFile, distFile);
-  fs.copyFileSync(srcFile, distFile.replace(/\.d\.ts$/, ".d.cts"));
+  // fs.copyFileSync(srcFile, distFile.replace(/\.d\.ts$/, ".d.cts"));
 });
 
 console.log("Types copied successfully.");

package-lock.json

@@ -64,17 +64,25 @@
   ],
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/types/vue-data-ui.d.ts",
-        "default": "./dist/vue-data-ui.js"
-      },
-      "default": {
-        "types": "./dist/types/vue-data-ui.d.cts",
-        "default": "./dist/vue-data-ui.cjs"
-      }
+      "types": "./dist/types/vue-data-ui.d.ts",
+      "import": "./dist/vue-data-ui.js",
+      "default": "./dist/vue-data-ui.js"
+    },
+    "./*": {
+      "types": "./dist/types/*.d.ts",
+      "import": "./dist/components/*.js",
+      "default": "./dist/components/*.js"
+    },
+    "./universal": {
+      "types": "./dist/types/universal.d.ts",
+      "import": "./dist/universal.js",
+      "default": "./dist/universal.js"
     },
     "./style.css": "./dist/style.css"
   },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "module": "dist/vue-data-ui.js",
   "types": "dist/types/vue-data-ui.d.ts",
   "scripts": {
@@ -111,4 +119,4 @@
     "vitest": "^3.2.4",
     "vue": "^3.5.21"
   }
-}
+}

package.json

@@ -127,7 +127,7 @@ const mapping = ref({
 })
 
 const options = computed(() => Object.keys(mapping.value));
-const selectedComponent = ref('VueUiDashboard');
+const selectedComponent = ref('VueUiXy');
 
 /**
  * Legacy testing arena where some non chart components can be tested

src/App.vue

@@ -0,0 +1,67 @@
+export const fallbackLoaders = {
+    VueUi3dBar: () => import('./vue-ui-3d-bar.vue'),
+    VueUiAgePyramid: () => import('./vue-ui-age-pyramid.vue'),
+    VueUiAnnotator: () => import('./vue-ui-annotator.vue'),
+    VueUiCandlestick: () => import('./vue-ui-candlestick.vue'),
+    VueUiChestnut: () => import('./vue-ui-chestnut.vue'),
+    VueUiDashboard: () => import('./vue-ui-dashboard.vue'),
+    VueUiDigits: () => import('./vue-ui-digits.vue'),
+    VueUiDonut: () => import('./vue-ui-donut.vue'),
+    VueUiDonutEvolution: () => import('./vue-ui-donut-evolution.vue'),
+    VueUiGalaxy: () => import('./vue-ui-galaxy.vue'),
+    VueUiGauge: () => import('./vue-ui-gauge.vue'),
+    VueUiHeatmap: () => import('./vue-ui-heatmap.vue'),
+    VueUiKpi: () => import('./vue-ui-kpi.vue'),
+    VueUiMiniLoader: () => import('./vue-ui-mini-loader.vue'),
+    VueUiMolecule: () => import('./vue-ui-molecule.vue'),
+    VueUiMoodRadar: () => import('./vue-ui-mood-radar.vue'),
+    VueUiNestedDonuts: () => import('./vue-ui-nested-donuts.vue'),
+    VueUiOnion: () => import('./vue-ui-onion.vue'),
+    VueUiQuadrant: () => import('./vue-ui-quadrant.vue'),
+    VueUiRadar: () => import('./vue-ui-radar.vue'),
+    VueUiRating: () => import('./vue-ui-rating.vue'),
+    VueUiRelationCircle: () => import('./vue-ui-relation-circle.vue'),
+    VueUiRings: () => import('./vue-ui-rings.vue'),
+    VueUiScatter: () => import('./vue-ui-scatter.vue'),
+    VueUiSkeleton: () => import('./vue-ui-skeleton.vue'),
+    VueUiSmiley: () => import('./vue-ui-smiley.vue'),
+    VueUiSparkbar: () => import('./vue-ui-sparkbar.vue'),
+    VueUiSparkgauge: () => import('./vue-ui-sparkgauge.vue'),
+    VueUiSparkHistogram: () => import('./vue-ui-sparkhistogram.vue'),
+    VueUiSparkline: () => import('./vue-ui-sparkline.vue'),
+    VueUiSparkStackbar: () => import('./vue-ui-sparkstackbar.vue'),
+    VueUiTable: () => import('./vue-ui-table.vue'),
+    VueUiTableSparkline: () => import('./vue-ui-table-sparkline.vue'),
+    VueUiThermometer: () => import('./vue-ui-thermometer.vue'),
+    VueUiTiremarks: () => import('./vue-ui-tiremarks.vue'),
+    VueUiTreemap: () => import('./vue-ui-treemap.vue'),
+    VueUiVerticalBar: () => import('./vue-ui-vertical-bar.vue'), // delete in v4
+    VueUiHorizontalBar: () => import('./vue-ui-vertical-bar.vue'), // v3 renaming
+    VueUiWaffle: () => import('./vue-ui-waffle.vue'),
+    VueUiWheel: () => import('./vue-ui-wheel.vue'),
+    VueUiXy: () => import('./vue-ui-xy.vue'),
+    VueUiTableHeatmap: () => import('./vue-ui-table-heatmap.vue'),
+    VueUiAccordion: () => import('./vue-ui-accordion.vue'),
+    VueUiQuickChart: () => import('./vue-ui-quick-chart.vue'),
+    VueUiCursor: () => import('./vue-ui-cursor.vue'),
+    VueUiSparkTrend: () => import('./vue-ui-spark-trend.vue'),
+    VueUiStripPlot: () => import('./vue-ui-strip-plot.vue'),
+    VueUiDumbbell: () => import('./vue-ui-dumbbell.vue'),
+    VueUiWordCloud: () => import('./vue-ui-word-cloud.vue'),
+    VueUiXyCanvas: () => import('./vue-ui-xy-canvas.vue'),
+    VueUiFlow: () => import('./vue-ui-flow.vue'),
+    VueUiParallelCoordinatePlot: () => import('./vue-ui-parallel-coordinate-plot.vue'),
+    VueUiTimer: () => import('./vue-ui-timer.vue'),
+    VueUiCarouselTable: () => import('./vue-ui-carousel-table.vue'),
+    VueUiGizmo: () => import('./vue-ui-gizmo.vue'),
+    VueUiStackbar: () => import('./vue-ui-stackbar.vue'),
+    VueUiBullet: () => import('./vue-ui-bullet.vue'),
+    VueUiFunnel: () => import('./vue-ui-funnel.vue'),
+    VueUiHistoryPlot: () => import('./vue-ui-history-plot.vue'),
+    VueUiCirclePack: () => import('./vue-ui-circle-pack.vue'),
+    VueUiWorld: () => import('./vue-ui-world.vue'),
+    VueUiRidgeline: () => import('./vue-ui-ridgeline.vue'),
+    VueUiChord: () => import('./vue-ui-chord.vue'),
+};
+
+export const supportedNames = Object.keys(fallbackLoaders);