diff --git a/src/lib/internal/ClsPad.svelte b/src/lib/internal/ClsPad.svelte
index f0dbb97..730104f 100644
--- a/src/lib/internal/ClsPad.svelte
+++ b/src/lib/internal/ClsPad.svelte
@@ -25,20 +25,20 @@
const showDebugBlocks = false;
function getRandomCssColor() {
- return '#' + Math.floor(Math.random() * 16777215).toString(16);
+ return '#' + Math.floor(Math.random() * 16_777_215).toString(16);
}
function getPixelValue(s: string): number {
- return parseFloat(s.replace('px', ''));
+ return Number.parseFloat(s.replace('px', ''));
}
function getTotal(add: typeof keysAdd, sub: typeof keysSubtract, extra: number = 0): number {
return (
- add.reduce((acc, key) => {
- return (acc += getPixelValue(getValueOrFallback(theme, key)));
+ add.reduce((accumulator, key) => {
+ return (accumulator += getPixelValue(getValueOrFallback(theme, key)));
}, 0) -
- sub.reduce((acc, key) => {
- return (acc += getPixelValue(getValueOrFallback(theme, key)));
+ sub.reduce((accumulator, key) => {
+ return (accumulator += getPixelValue(getValueOrFallback(theme, key)));
}, 0) +
extra
);
diff --git a/src/lib/internal/GenericBladeFolding.svelte b/src/lib/internal/GenericBladeFolding.svelte
index c95c798..66e7a63 100644
--- a/src/lib/internal/GenericBladeFolding.svelte
+++ b/src/lib/internal/GenericBladeFolding.svelte
@@ -56,8 +56,8 @@
(ref.controller as any)?.valueController?.foldable_
?.value('expanded')
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- .emitter.on('change', (e: any) => {
- internalExpanded = e.rawValue;
+ .emitter.on('change', (event: any) => {
+ internalExpanded = event.rawValue;
expanded = internalExpanded;
});
}
@@ -76,8 +76,8 @@
$: ref &&
buttonClass !== undefined &&
expanded !== internalExpanded &&
- ref.element.getElementsByClassName(buttonClass).length > 0 &&
- (ref.element.getElementsByClassName(buttonClass)[0] as HTMLButtonElement).click();
+ ref.element.querySelectorAll(`.${buttonClass}`).length > 0 &&
+ (ref.element.querySelector(`.${buttonClass}`) as HTMLButtonElement).click();
-
+
diff --git a/src/lib/monitor/FpsGraph.svelte b/src/lib/monitor/FpsGraph.svelte
index 3429f95..e3c19c2 100644
--- a/src/lib/monitor/FpsGraph.svelte
+++ b/src/lib/monitor/FpsGraph.svelte
@@ -134,8 +134,11 @@
observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
if (mutation.type === 'characterData' || mutation.type === 'childList') {
- const fps = parseInt((mutation.target as HTMLElement).innerText);
- !isNaN(fps) && dispatch('change', fps);
+ const fpsText = (mutation.target as HTMLElement).textContent;
+ if (fpsText !== null) {
+ const fps = Number.parseInt(fpsText);
+ !Number.isNaN(fps) && dispatch('change', fps);
+ }
}
}
});
@@ -191,23 +194,23 @@ position='inline'>`.
@example
```svelte
@@ -228,12 +231,12 @@ position='inline'>`.
- {#each Array.from({ length: gridSize }, (_, i) => i) as x}
- {#each Array.from({ length: gridSize }, (_, i) => i) as y}
+ {#each Array.from({ length: gridSize }, (_, index) => index) as x}
+ {#each Array.from({ length: gridSize }, (_, index) => index) as y}
- import { Monitor } from 'svelte-tweakpane-ui';
+import { Monitor } from 'svelte-tweakpane-ui';
- let booleanToMonitor = false;
- let stringToMonitor = 'Reticulating';
- let numberToMonitor = 85;
+let booleanToMonitor = false;
+let stringToMonitor = 'Reticulating';
+let numberToMonitor = 85;
- setInterval(() => {
- numberToMonitor = Math.random() * 100;
- }, 100);
+setInterval(() => {
+ numberToMonitor = Math.random() * 100;
+}, 100);
- setInterval(() => {
- booleanToMonitor = !booleanToMonitor;
- stringToMonitor = stringToMonitor.split('').reverse().join('');
- }, 1000);
+setInterval(() => {
+ booleanToMonitor = !booleanToMonitor;
+ stringToMonitor = [...stringToMonitor].reverse().join('');
+}, 1000);
diff --git a/src/lib/monitor/Profiler.svelte b/src/lib/monitor/Profiler.svelte
index 2a7de87..d53a49b 100644
--- a/src/lib/monitor/Profiler.svelte
+++ b/src/lib/monitor/Profiler.svelte
@@ -4,8 +4,11 @@
export type ProfilerCalcMode = 'frame' | 'mean' | 'median';
export type ProfilerChangeEvent = CustomEvent
;
- export type ProfilerMeasure = (name: string, fn: () => void) => void;
- export type ProfilerMeasureAsync = (name: string, fn: () => Promise) => Promise;
+ export type ProfilerMeasure = (name: string, functionToMeasure: () => void) => void;
+ export type ProfilerMeasureAsync = (
+ name: string,
+ functionToMeasure: () => Promise
+ ) => Promise;
export type ProfilerMeasureHandler = Simplify;
@@ -106,12 +109,15 @@
};
// exporting a const function might be cleaner, but less expected by the user?
- function _measure(name: string, fn: () => void): void {
- profilerBlade?.measure(name, fn);
+ function _measure(name: string, functionToMeasure: () => void): void {
+ profilerBlade?.measure(name, functionToMeasure);
}
- async function _measureAsync(name: string, fn: () => Promise): Promise {
- profilerBlade?.measureAsync(name, fn);
+ async function _measureAsync(
+ name: string,
+ functionToMeasure: () => Promise
+ ): Promise {
+ profilerBlade?.measureAsync(name, functionToMeasure);
}
//unique
@@ -163,8 +169,11 @@
for (const mutation of mutations) {
if (mutation.type === 'characterData' || mutation.type === 'childList') {
// parse float ignore the deltaUnit suffix
- const delta = parseFloat((mutation.target as HTMLElement).innerText);
- !isNaN(delta) && dispatch('change', delta);
+ const fpsText = (mutation.target as HTMLElement).textContent;
+ if (fpsText !== null) {
+ const delta = Number.parseFloat(fpsText);
+ !Number.isNaN(delta) && dispatch('change', delta);
+ }
}
}
});
@@ -217,57 +226,57 @@ position='inline'>`.
@example
```svelte
-
+
`.
@example
```svelte
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
index 0b50fca..45b0f13 100644
--- a/src/lib/theme.ts
+++ b/src/lib/theme.ts
@@ -93,9 +93,9 @@ const standard: Theme = {
};
export const keys = Object.keys(standard).reduce(
- (acc, key) => {
- acc[key] = key;
- return acc;
+ (accumulator, key) => {
+ accumulator[key] = key;
+ return accumulator;
},
{} as Record
);
@@ -324,9 +324,9 @@ function expandVariableKey(name: string): string {
if (name.startsWith('--tp-')) {
return name;
} else {
- const varName = keyToCssVariableMap.get(name);
- if (varName) {
- return varName;
+ const variableName = keyToCssVariableMap.get(name);
+ if (variableName) {
+ return variableName;
} else {
throw new Error(`Unknown Tweakpane CSS theme map variable key: "${name}"`);
}
@@ -337,27 +337,25 @@ function expandVariableKey(name: string): string {
* Used during SSR to calculate metrics Returns CSS string.
*/
export function getValueOrFallback(theme: Theme | undefined, key: keyof ThemeKeys): string {
- if (theme === undefined || theme[key] === undefined) {
- return stringToCssValue(standard[key]!)!;
- } else {
- return stringToCssValue(theme[key]!)!;
- }
+ return theme === undefined || theme[key] === undefined
+ ? stringToCssValue(standard[key]!)!
+ : stringToCssValue(theme[key]!)!;
}
export function applyTheme(element: HTMLElement, theme: Theme | undefined) {
- const rootDoc = getWindowDocument().documentElement;
+ const rootDocument = getWindowDocument().documentElement;
if (theme === undefined) {
- Object.keys(standard).forEach((k) => {
+ for (const k of Object.keys(standard)) {
const key = expandVariableKey(k);
if (element.style.getPropertyValue(key).length > 0) {
// console.log(`Unsetting via undefined theme ${key}`);
element.style.removeProperty(key);
}
- });
+ }
} else {
- Object.entries(theme).forEach(([k, v]) => {
+ for (const [k, v] of Object.entries(theme)) {
const key = expandVariableKey(k);
const value = stringToCssValue(v);
// console.log(`Inspecting ${key}: ${value}`);
@@ -368,7 +366,7 @@ export function applyTheme(element: HTMLElement, theme: Theme | undefined) {
// representation for comparison? TODO tests for this logic
const standardValue = standard[k] || undefined;
- const rootValue = rootDoc.style.getPropertyValue(key) || undefined;
+ const rootValue = rootDocument.style.getPropertyValue(key) || undefined;
const isDeviationFromRoot = (rootValue && value !== rootValue) || false;
const isDeviationFromStandard = (standardValue && value !== standardValue) || false;
@@ -386,7 +384,7 @@ export function applyTheme(element: HTMLElement, theme: Theme | undefined) {
element.style.removeProperty(key);
}
}
- });
+ }
}
}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index f0eb51a..68c038a 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -46,9 +46,9 @@ export type UnwrapCustomEvents = {
* For CLS SSR calculation
*/
export function rowsForMonitor(
- buffer: number | undefined = undefined,
- rows: number | undefined = undefined,
- graph: boolean | undefined = undefined
+ buffer?: number | undefined,
+ rows?: number | undefined,
+ graph?: boolean | undefined
) {
if (graph) {
return Math.max(rows ?? 3, 3);
@@ -70,7 +70,7 @@ export function rowsForMonitor(
* Fills an array of length `quantity` with a `value`
*/
export function fillWith(value: T, quantity: number): T[] {
- return [...Array(quantity).fill(value)];
+ return Array.from({ length: quantity }, () => value);
}
/**
@@ -100,7 +100,7 @@ export function enforceReadonly(
internal: unknown,
external: unknown,
componentName?: string,
- propName?: string,
+ propertyName?: string,
allowAssignmentToUndefined?: boolean
) {
allowAssignmentToUndefined ??= false;
@@ -112,10 +112,10 @@ export function enforceReadonly(
)
) {
const componentString = componentName ? `<${componentName}> ` : '';
- const propString = propName ? `property "${propName}" ` : '';
+ const propertyString = propertyName ? `property "${propertyName}" ` : '';
console.error(
- `Svelte component ${componentString}property ${propString}is intended for readonly use.\nAssigning\n"${external}"\nto\n"${internal}"\nis not allowed.`
+ `Svelte component ${componentString}property ${propertyString}is intended for readonly use.\nAssigning\n"${external}"\nto\n"${internal}"\nis not allowed.`
);
}
}
@@ -140,19 +140,19 @@ export function getElementIndex(element: HTMLElement): number {
}
// doesn't create a new object, only works with string keys
-export function removeKeys(obj: T, ...keys: string[]): T {
- keys.forEach((key) => {
- if (key in obj) {
- delete obj[key as keyof T];
+export function removeKeys(object: T, ...keys: string[]): T {
+ for (const key of keys) {
+ if (key in object) {
+ delete object[key as keyof T];
}
- });
- return obj;
+ }
+ return object;
}
-function clickBlocker(e: MouseEvent) {
+function clickBlocker(event: MouseEvent) {
// only block user clicks, not programmatic ones
- console.log(e.detail);
- if (e.isTrusted) e.stopPropagation();
+ console.log(event.detail);
+ if (event.isTrusted) event.stopPropagation();
}
// used by folder and pane TODO rewrite to use getSwatchButton etc.
@@ -163,11 +163,11 @@ export function updateCollapsibility(
iconClass?: string
) {
if (element) {
- const titleBarElement = element.getElementsByClassName(titleBarClass)[0] as HTMLButtonElement;
+ const titleBarElement = element.querySelector(`.${titleBarClass}`) as HTMLButtonElement;
if (titleBarElement !== undefined) {
const iconElement = iconClass
- ? (element.getElementsByClassName(iconClass)[0] as HTMLDivElement)
+ ? (element.querySelector(`.${iconClass}`) as HTMLDivElement)
: undefined;
if (isUserExpandableEnabled) {
@@ -232,35 +232,35 @@ export function tupleToObject(
): O {
const result = {} as O;
- keys.forEach((key, index) => {
+ for (const [index, key] of keys.entries()) {
// Assert that the assignment is safe
result[key as keyof O] = tuple[index] as O[keyof O];
- });
+ }
return result;
}
export function objectToTuple>(
- obj: O,
+ object: O,
keys: [T]
): [number];
export function objectToTuple>(
- obj: O,
+ object: O,
keys: [T, T]
): [number, number];
export function objectToTuple>(
- obj: O,
+ object: O,
keys: [T, T, T]
): [number, number, number];
export function objectToTuple>(
- obj: O,
+ object: O,
keys: [T, T, T, T]
): [number, number, number, number];
export function objectToTuple>(
- obj: O,
+ object: O,
keys: T[]
): number[] {
- return keys.map((key) => obj[key]);
+ return keys.map((key) => object[key]);
}
// tweakpane helpers
diff --git a/tsconfig.json b/tsconfig.json
index 8c2ffd0..2c7647d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,17 +1,19 @@
{
- "extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
+ "module": "esnext",
+ "moduleResolution": "Bundler",
+ "noErrorTruncation": true,
+ "removeComments": false,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
- "moduleResolution": "Bundler",
- "noErrorTruncation": true,
- "removeComments": false
+ "target": "esnext"
},
- "exclude": ["/docs/**", "/dist/**"]
+ "exclude": ["/docs/**", "/dist/**"],
+ "extends": "./.svelte-kit/tsconfig.json"
}
