@tanstack/table-devtools
Version:
Devtools for TanStack Table.
417 lines (415 loc) • 16.5 kB
JavaScript
import { useTableDevtoolsContext } from "../TableContextProvider.js";
import { useStyles } from "../styles/use-styles.js";
import { useTableStore } from "../useTableStore.js";
import { NoTableConnected } from "./NoTableConnected.js";
import { ResizableSplit } from "./ResizableSplit.js";
import { For, Show, createMemo } from "solid-js";
import { className, createComponent, effect, insert, memo, template } from "solid-js/web";
import { coreFeatures, stockFeatures } from "@tanstack/table-core";
//#region src/components/FeaturesPanel.tsx
var _tmpl$ = /*#__PURE__*/ template(`<div><span></span><span></span><span>`);
var _tmpl$2 = /*#__PURE__*/ template(`<div>`);
var _tmpl$3 = /*#__PURE__*/ template(`<div>Features`);
var _tmpl$4 = /*#__PURE__*/ template(`<div><div>Estimated table-core package</div><div><span>Registered features</span><span></span></div><div><span>Client row models</span><span></span></div><div><span>Total</span><span></span></div><div>Allocated from the current \`size-limit\` metric: minified and Brotli-compressed.`);
var _tmpl$5 = /*#__PURE__*/ template(`<div><div>Core Features`);
var _tmpl$6 = /*#__PURE__*/ template(`<div><div>Stock Features`);
var _tmpl$7 = /*#__PURE__*/ template(`<div><div>Additional Plugins`);
var _tmpl$8 = /*#__PURE__*/ template(`<div>Client Side Row Models and Fns`);
var _tmpl$9 = /*#__PURE__*/ template(`<div>Full package reference: `);
var _tmpl$0 = /*#__PURE__*/ template(`<div><div>Execution Order`);
var _tmpl$1 = /*#__PURE__*/ template(`<div><div><span></span><span> rows, `);
var _tmpl$10 = /*#__PURE__*/ template(`<div><div><span>aggregationFns</span><span> registered`);
var _tmpl$11 = /*#__PURE__*/ template(`<div>No row models configured`);
var _tmpl$12 = /*#__PURE__*/ template(`<span>`);
function toFnBuckets(value) {
return typeof value === "object" && value != null ? value : {};
}
const CORE_REACTIVITY_FEATURE_NAME = "coreReactivityFeature";
const CORE_FEATURE_NAMES = [CORE_REACTIVITY_FEATURE_NAME, ...Object.keys(coreFeatures).filter((featureName) => featureName !== CORE_REACTIVITY_FEATURE_NAME)];
const STOCK_FEATURE_NAMES = Object.keys(stockFeatures);
const PACKAGE_SIZE_LIMIT_BYTES = 16987;
const FEATURE_SIZE_ESTIMATES_BYTES = {
rowAggregationFeature: 1500,
coreCellsFeature: 358,
coreColumnsFeature: 803,
coreHeadersFeature: 1012,
coreRowModelsFeature: 633,
coreRowsFeature: 695,
coreTablesFeature: 508,
columnFacetingFeature: 953,
columnFilteringFeature: 1266,
columnGroupingFeature: 1141,
columnOrderingFeature: 511,
columnPinningFeature: 995,
columnResizingFeature: 779,
columnSizingFeature: 678,
columnVisibilityFeature: 612,
globalFilteringFeature: 435,
rowExpandingFeature: 650,
rowPaginationFeature: 605,
rowPinningFeature: 671,
rowSelectionFeature: 883,
rowSortingFeature: 798
};
const ROW_MODEL_SIZE_ESTIMATES_BYTES = {
coreRowModel: 223,
filteredRowModel: 588,
groupedRowModel: 459,
sortedRowModel: 341,
expandedRowModel: 181,
paginatedRowModel: 209
};
const ROW_MODEL_FEATURE_SLOTS = [
"coreRowModel",
"filteredRowModel",
"groupedRowModel",
"sortedRowModel",
"expandedRowModel",
"paginatedRowModel",
"facetedRowModel",
"facetedMinMaxValues",
"facetedUniqueValues"
];
const ROW_MODEL_SHARED_SIZE_LABELS = {
preFilteredRowModel: "shared",
preGroupedRowModel: "shared",
preSortedRowModel: "shared"
};
const ROW_MODEL_TO_FN_KIND = {
filteredRowModel: "filterFns",
preFilteredRowModel: "filterFns",
sortedRowModel: "sortFns",
preSortedRowModel: "sortFns",
groupedRowModel: null,
preGroupedRowModel: null
};
const EXECUTION_ORDER_GETTERS = [
"getCoreRowModel",
"getFilteredRowModel",
"getGroupedRowModel",
"getSortedRowModel",
"getExpandedRowModel",
"getPaginatedRowModel",
"getRowModel"
];
function getterToRowModelKey(getter) {
if (getter === "getRowModel") return "paginatedRowModel";
const withoutGet = getter.slice(3);
return withoutGet.charAt(0).toLowerCase() + withoutGet.slice(1);
}
const ROW_MODEL_TO_GETTER = {
coreRowModel: "getCoreRowModel",
filteredRowModel: "getFilteredRowModel",
preFilteredRowModel: "getFilteredRowModel",
groupedRowModel: "getGroupedRowModel",
preGroupedRowModel: "getGroupedRowModel",
sortedRowModel: "getSortedRowModel",
preSortedRowModel: "getSortedRowModel",
expandedRowModel: "getExpandedRowModel",
paginatedRowModel: "getRowModel"
};
function getRowCountForModel(tableInstance, rowModelName) {
const getter = ROW_MODEL_TO_GETTER[rowModelName];
if (!getter || !tableInstance) return 0;
const tableRecord = tableInstance;
if (typeof tableRecord[getter] !== "function") return 0;
return tableRecord[getter]().rows?.length ?? 0;
}
function formatEstimatedSize(sizeInBytes) {
if (typeof sizeInBytes !== "number") return "n/a";
return `~${(sizeInBytes / 1e3).toFixed(2)} kB brotli`;
}
function normalizeRowModelEstimateKey(rowModelName) {
if (rowModelName === "preFilteredRowModel") return "filteredRowModel";
if (rowModelName === "preGroupedRowModel") return "groupedRowModel";
if (rowModelName === "preSortedRowModel") return "sortedRowModel";
return rowModelName;
}
function FeaturesPanel() {
const styles = useStyles();
const { table } = useTableDevtoolsContext();
const tableState = useTableStore(() => table()?.store, (state) => state);
const optionsStoreValue = useTableStore(() => table()?.optionsStore, (options) => options);
const tableFeatures = createMemo(() => {
const tableInstance = table();
if (!tableInstance) return /* @__PURE__ */ new Set();
return new Set(Object.keys(tableInstance._features));
});
const rowModelNames = createMemo(() => {
const tableInstance = table();
if (!tableInstance) return [];
optionsStoreValue();
return Object.keys(tableInstance.options.features ?? {}).filter((key) => ROW_MODEL_FEATURE_SLOTS.includes(key));
});
const getFnNames = (kind) => {
const tableInstance = table();
if (!tableInstance) return [];
optionsStoreValue();
const rowModelFns = toFnBuckets(tableInstance._rowModelFns);
const optionFns = toFnBuckets(tableInstance.options);
return Object.keys(rowModelFns[kind] ?? optionFns[kind] ?? {});
};
const additionalPlugins = createMemo(() => {
const currentFeatures = tableFeatures();
const knownFeatures = /* @__PURE__ */ new Set([...CORE_FEATURE_NAMES, ...STOCK_FEATURE_NAMES]);
return [...currentFeatures].filter((f) => !knownFeatures.has(f)).sort();
});
const aggregationFunctionNames = createMemo(() => getFnNames("aggregationFns"));
const getRowModelFunctions = (rowModelName) => {
const fnKind = ROW_MODEL_TO_FN_KIND[rowModelName];
if (!fnKind) return [];
return getFnNames(fnKind);
};
const enabledFeatureEstimate = createMemo(() => [...tableFeatures()].reduce((total, featureName) => {
return total + (FEATURE_SIZE_ESTIMATES_BYTES[featureName] ?? 0);
}, 0));
const enabledRowModelEstimate = createMemo(() => [...new Set(rowModelNames())].map((rowModelName) => normalizeRowModelEstimateKey(rowModelName)).filter((rowModelName, index, all) => all.indexOf(rowModelName) === index).reduce((total, rowModelName) => {
return total + (ROW_MODEL_SIZE_ESTIMATES_BYTES[rowModelName] ?? 0);
}, 0));
const totalEstimatedBundleSize = createMemo(() => enabledFeatureEstimate() + enabledRowModelEstimate());
const rowModels = createMemo(() => {
const tableInstance = table();
if (!tableInstance) return [];
tableState();
return rowModelNames().map((rowModelName) => {
const sharedLabel = ROW_MODEL_SHARED_SIZE_LABELS[rowModelName];
return {
rowModelName,
fns: getRowModelFunctions(rowModelName),
rowCount: getRowCountForModel(tableInstance, rowModelName),
estimateLabel: sharedLabel ?? formatEstimatedSize(ROW_MODEL_SIZE_ESTIMATES_BYTES[normalizeRowModelEstimateKey(rowModelName)])
};
});
});
const renderFeatureItem = (name, isEnabled, sizeLabel) => (() => {
var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
insert(_el$2, isEnabled ? "✓" : "○");
insert(_el$3, name);
insert(_el$4, sizeLabel);
effect((_p$) => {
var _v$ = styles().featureListItem, _v$2 = isEnabled ? styles().featureCheck : styles().featureUncheck, _v$3 = styles().featureLabel, _v$4 = styles().featureMeta;
_v$ !== _p$.e && className(_el$, _p$.e = _v$);
_v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
_v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
_v$4 !== _p$.o && className(_el$4, _p$.o = _v$4);
return _p$;
}, {
e: void 0,
t: void 0,
a: void 0,
o: void 0
});
return _el$;
})();
return createComponent(Show, {
get fallback() {
return createComponent(NoTableConnected, { title: "Features" });
},
get when() {
return table();
},
get children() {
var _el$5 = _tmpl$2();
insert(_el$5, createComponent(ResizableSplit, {
get left() {
return [
(() => {
var _el$6 = _tmpl$3();
effect(() => className(_el$6, styles().sectionTitle));
return _el$6;
})(),
(() => {
var _el$7 = _tmpl$4(), _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling, _el$1 = _el$9.firstChild.nextSibling, _el$10 = _el$9.nextSibling, _el$12 = _el$10.firstChild.nextSibling, _el$13 = _el$10.nextSibling, _el$15 = _el$13.firstChild.nextSibling, _el$16 = _el$13.nextSibling;
insert(_el$1, () => formatEstimatedSize(enabledFeatureEstimate()));
insert(_el$12, () => formatEstimatedSize(enabledRowModelEstimate()));
insert(_el$15, () => formatEstimatedSize(totalEstimatedBundleSize()));
effect((_p$) => {
var _v$5 = styles().featureEstimateSummary, _v$6 = styles().featureEstimateSummaryTitle, _v$7 = styles().featureEstimateSummaryRow, _v$8 = styles().featureEstimateSummaryRow, _v$9 = styles().featureEstimateSummaryTotal, _v$0 = styles().featureEstimateSummaryNote;
_v$5 !== _p$.e && className(_el$7, _p$.e = _v$5);
_v$6 !== _p$.t && className(_el$8, _p$.t = _v$6);
_v$7 !== _p$.a && className(_el$9, _p$.a = _v$7);
_v$8 !== _p$.o && className(_el$10, _p$.o = _v$8);
_v$9 !== _p$.i && className(_el$13, _p$.i = _v$9);
_v$0 !== _p$.n && className(_el$16, _p$.n = _v$0);
return _p$;
}, {
e: void 0,
t: void 0,
a: void 0,
o: void 0,
i: void 0,
n: void 0
});
return _el$7;
})(),
(() => {
var _el$17 = _tmpl$5(), _el$18 = _el$17.firstChild;
insert(_el$17, createComponent(For, {
each: CORE_FEATURE_NAMES,
children: (name) => renderFeatureItem(name, tableFeatures().has(name), formatEstimatedSize(FEATURE_SIZE_ESTIMATES_BYTES[name]))
}), null);
effect((_p$) => {
var _v$1 = styles().featureSubsection, _v$10 = styles().featureSubsectionTitle;
_v$1 !== _p$.e && className(_el$17, _p$.e = _v$1);
_v$10 !== _p$.t && className(_el$18, _p$.t = _v$10);
return _p$;
}, {
e: void 0,
t: void 0
});
return _el$17;
})(),
(() => {
var _el$19 = _tmpl$6(), _el$20 = _el$19.firstChild;
insert(_el$19, createComponent(For, {
each: STOCK_FEATURE_NAMES,
children: (name) => renderFeatureItem(name, tableFeatures().has(name), formatEstimatedSize(FEATURE_SIZE_ESTIMATES_BYTES[name]))
}), null);
effect((_p$) => {
var _v$11 = styles().featureSubsection, _v$12 = styles().featureSubsectionTitle;
_v$11 !== _p$.e && className(_el$19, _p$.e = _v$11);
_v$12 !== _p$.t && className(_el$20, _p$.t = _v$12);
return _p$;
}, {
e: void 0,
t: void 0
});
return _el$19;
})(),
memo(() => memo(() => additionalPlugins().length > 0)() && (() => {
var _el$21 = _tmpl$7(), _el$22 = _el$21.firstChild;
insert(_el$21, createComponent(For, {
get each() {
return additionalPlugins();
},
children: (name) => renderFeatureItem(name, true, "custom")
}), null);
effect((_p$) => {
var _v$13 = styles().featureSubsection, _v$14 = styles().featureSubsectionTitle;
_v$13 !== _p$.e && className(_el$21, _p$.e = _v$13);
_v$14 !== _p$.t && className(_el$22, _p$.t = _v$14);
return _p$;
}, {
e: void 0,
t: void 0
});
return _el$21;
})())
];
},
get right() {
return [
(() => {
var _el$23 = _tmpl$8();
effect(() => className(_el$23, styles().sectionTitle));
return _el$23;
})(),
createComponent(For, {
get each() {
return rowModels();
},
children: (rowModel) => (() => {
var _el$29 = _tmpl$1(), _el$30 = _el$29.firstChild, _el$31 = _el$30.firstChild, _el$32 = _el$31.nextSibling, _el$33 = _el$32.firstChild;
insert(_el$31, () => rowModel.rowModelName);
insert(_el$32, () => rowModel.rowCount, _el$33);
insert(_el$32, () => rowModel.estimateLabel, null);
insert(_el$29, createComponent(For, {
get each() {
return rowModel.fns;
},
children: (fnName) => (() => {
var _el$34 = _tmpl$2();
insert(_el$34, fnName);
effect(() => className(_el$34, styles().rowModelFnItem));
return _el$34;
})()
}), null);
effect((_p$) => {
var _v$17 = styles().rowModelItem, _v$18 = styles().featureLabel, _v$19 = styles().featureMeta;
_v$17 !== _p$.e && className(_el$30, _p$.e = _v$17);
_v$18 !== _p$.t && className(_el$31, _p$.t = _v$18);
_v$19 !== _p$.a && className(_el$32, _p$.a = _v$19);
return _p$;
}, {
e: void 0,
t: void 0,
a: void 0
});
return _el$29;
})()
}),
memo(() => memo(() => !!tableFeatures().has("rowAggregationFeature"))() && (() => {
var _el$35 = _tmpl$10(), _el$36 = _el$35.firstChild, _el$37 = _el$36.firstChild, _el$38 = _el$37.nextSibling, _el$39 = _el$38.firstChild;
insert(_el$38, () => aggregationFunctionNames().length, _el$39);
insert(_el$35, createComponent(For, {
get each() {
return aggregationFunctionNames();
},
children: (fnName) => (() => {
var _el$40 = _tmpl$2();
insert(_el$40, fnName);
effect(() => className(_el$40, styles().rowModelFnItem));
return _el$40;
})()
}), null);
effect((_p$) => {
var _v$20 = styles().rowModelItem, _v$21 = styles().featureLabel, _v$22 = styles().featureMeta;
_v$20 !== _p$.e && className(_el$36, _p$.e = _v$20);
_v$21 !== _p$.t && className(_el$37, _p$.t = _v$21);
_v$22 !== _p$.a && className(_el$38, _p$.a = _v$22);
return _p$;
}, {
e: void 0,
t: void 0,
a: void 0
});
return _el$35;
})()),
memo(() => memo(() => rowModelNames().length === 0)() && (() => {
var _el$41 = _tmpl$11();
effect(() => className(_el$41, styles().rowModelItem));
return _el$41;
})()),
(() => {
var _el$24 = _tmpl$9();
_el$24.firstChild;
insert(_el$24, () => formatEstimatedSize(PACKAGE_SIZE_LIMIT_BYTES), null);
effect(() => className(_el$24, styles().featureEstimateSummaryNote));
return _el$24;
})(),
(() => {
var _el$27 = _tmpl$0(), _el$28 = _el$27.firstChild;
insert(_el$27, createComponent(For, {
each: EXECUTION_ORDER_GETTERS,
children: (getter, index) => {
const rowModelKey = getterToRowModelKey(getter);
const isPresent = rowModelKey !== null && rowModelNames().includes(rowModelKey);
return [memo(() => index() > 0 && " → "), (() => {
var _el$42 = _tmpl$12();
insert(_el$42, getter);
effect(() => className(_el$42, isPresent ? styles().rowModelExecutionOrderBold : void 0));
return _el$42;
})()];
}
}), null);
effect((_p$) => {
var _v$15 = styles().rowModelExecutionOrder, _v$16 = styles().featureSubsectionTitle;
_v$15 !== _p$.e && className(_el$27, _p$.e = _v$15);
_v$16 !== _p$.t && className(_el$28, _p$.t = _v$16);
return _p$;
}, {
e: void 0,
t: void 0
});
return _el$27;
})()
];
}
}));
effect(() => className(_el$5, styles().panelScroll));
return _el$5;
}
});
}
//#endregion
export { FeaturesPanel };