migration to Svelte 4

This commit is contained in:
Anantha Kumaran 2023-08-04 20:51:44 +05:30
parent f0265fa5e7
commit 3480fe0207
20 changed files with 2666 additions and 1291 deletions

View File

@ -1,24 +1,33 @@
module.exports = {
root: true,
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:svelte/recommended",
"prettier"
],
parser: "@typescript-eslint/parser",
extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
plugins: ["svelte3", "@typescript-eslint"],
ignorePatterns: ["*.cjs"],
overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }],
settings: {
"svelte3/typescript": () => require("typescript")
},
plugins: ["@typescript-eslint"],
parserOptions: {
sourceType: "module",
ecmaVersion: 2020
ecmaVersion: 2020,
extraFileExtensions: [".svelte"]
},
env: {
browser: true,
es2017: true,
es2021: true,
node: true
},
overrides: [
{
files: ["*.svelte"],
parser: "svelte-eslint-parser",
parserOptions: {
parser: "@typescript-eslint/parser"
}
}
],
rules: {
"a11y-missing-attribute": "off",
"@typescript-eslint/no-explicit-any": "off"
}
};

View File

@ -1,7 +1,6 @@
{
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte"],
"pluginSearchDirs": ["."],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte"],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}

View File

@ -22,7 +22,7 @@ lint:
test -z $$(gofmt -l .)
test:
npm run test
NODE_OPTIONS=--experimental-vm-modules npm run test
npm run build
go test ./...

View File

@ -1,6 +1,18 @@
/** @type {import('ts-jest').JestConfigWithTsJest} */
export default {
preset: "ts-jest",
testEnvironment: "jsdom",
globals: {}
preset: "ts-jest/presets/default-esm", // or other ESM presets
moduleNameMapper: {
"^(\\.{1,2}/.*)\\.js$": "$1"
},
transform: {
// '^.+\\.[tj]sx?$' to process js/ts with `ts-jest`
// '^.+\\.m?[tj]sx?$' to process js/ts/mjs/mts with `ts-jest`
"^.+\\.[tj]sx?$": [
"ts-jest",
{
useESM: true
}
]
},
testEnvironment: "jsdom"
};

3752
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -8,8 +8,8 @@
"build": "vite build",
"build:watch": "vite build --watch",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --compiler-warnings 'a11y-aria-attributes:ignore,a11y-incorrect-aria-attribute-type:ignore,a11y-unknown-aria-attribute:ignore,a11y-hidden:ignore,a11y-misplaced-role:ignore,a11y-unknown-role:ignore,a11y-no-abstract-role:ignore,a11y-no-redundant-roles:ignore,a11y-role-has-required-aria-props:ignore,a11y-accesskey:ignore,a11y-autofocus:ignore,a11y-misplaced-scope:ignore,a11y-positive-tabindex:ignore,a11y-invalid-attribute:ignore,a11y-missing-attribute:ignore,a11y-img-redundant-alt:ignore,a11y-label-has-associated-control:ignore,a11y-media-has-caption:ignore,a11y-distracting-elements:ignore,a11y-structure:ignore,a11y-mouse-events-have-key-events:ignore,a11y-missing-content:ignore,a11y-click-events-have-key-events:ignore'",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch --compiler-warnings 'a11y-aria-attributes:ignore,a11y-incorrect-aria-attribute-type:ignore,a11y-unknown-aria-attribute:ignore,a11y-hidden:ignore,a11y-misplaced-role:ignore,a11y-unknown-role:ignore,a11y-no-abstract-role:ignore,a11y-no-redundant-roles:ignore,a11y-role-has-required-aria-props:ignore,a11y-accesskey:ignore,a11y-autofocus:ignore,a11y-misplaced-scope:ignore,a11y-positive-tabindex:ignore,a11y-invalid-attribute:ignore,a11y-missing-attribute:ignore,a11y-img-redundant-alt:ignore,a11y-label-has-associated-control:ignore,a11y-media-has-caption:ignore,a11y-distracting-elements:ignore,a11y-structure:ignore,a11y-mouse-events-have-key-events:ignore,a11y-missing-content:ignore,a11y-click-events-have-key-events:ignore'",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --compiler-warnings 'a11y-aria-attributes:ignore,a11y-incorrect-aria-attribute-type:ignore,a11y-unknown-aria-attribute:ignore,a11y-hidden:ignore,a11y-misplaced-role:ignore,a11y-unknown-role:ignore,a11y-no-abstract-role:ignore,a11y-no-redundant-roles:ignore,a11y-role-has-required-aria-props:ignore,a11y-accesskey:ignore,a11y-autofocus:ignore,a11y-misplaced-scope:ignore,a11y-positive-tabindex:ignore,a11y-invalid-attribute:ignore,a11y-missing-attribute:ignore,a11y-img-redundant-alt:ignore,a11y-label-has-associated-control:ignore,a11y-media-has-caption:ignore,a11y-distracting-elements:ignore,a11y-structure:ignore,a11y-mouse-events-have-key-events:ignore,a11y-missing-content:ignore,a11y-click-events-have-key-events:ignore,a11y-no-static-element-interactions:ignore'",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch --compiler-warnings 'a11y-aria-attributes:ignore,a11y-incorrect-aria-attribute-type:ignore,a11y-unknown-aria-attribute:ignore,a11y-hidden:ignore,a11y-misplaced-role:ignore,a11y-unknown-role:ignore,a11y-no-abstract-role:ignore,a11y-no-redundant-roles:ignore,a11y-role-has-required-aria-props:ignore,a11y-accesskey:ignore,a11y-autofocus:ignore,a11y-misplaced-scope:ignore,a11y-positive-tabindex:ignore,a11y-invalid-attribute:ignore,a11y-missing-attribute:ignore,a11y-img-redundant-alt:ignore,a11y-label-has-associated-control:ignore,a11y-media-has-caption:ignore,a11y-distracting-elements:ignore,a11y-structure:ignore,a11y-mouse-events-have-key-events:ignore,a11y-missing-content:ignore,a11y-click-events-have-key-events:ignore,a11y-no-static-element-interactions:ignore'",
"lint": "prettier --plugin-search-dir . --check . && eslint .",
"format": "prettier --plugin-search-dir . --write ."
},
@ -51,7 +51,7 @@
"devDependencies": {
"@sveltejs/adapter-auto": "^1.0.0",
"@sveltejs/adapter-static": "^1.0.0",
"@sveltejs/kit": "^1.0.0",
"@sveltejs/kit": "^1.20.4",
"@types/chroma-js": "^2.1.4",
"@types/clusterize.js": "^0.18.1",
"@types/d3": "^7.4.0",
@ -61,22 +61,26 @@
"@types/sprintf-js": "^1.1.2",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
"autoprefixer": "^10.4.14",
"concurrently": "^7.6.0",
"daisyui": "^3.5.1",
"esbuild": "^0.14.29",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte3": "^4.0.0",
"eslint-config-prettier": "^8.0",
"eslint-plugin-svelte": "^2.32.4",
"jest": "^29.5.0",
"jest-environment-jsdom": "^29.5.0",
"nodemon": "^2.0.15",
"prettier": "^2.8.1",
"prettier-plugin-svelte": "^2.8.1",
"postcss": "^8.4.27",
"prettier": "^3.0",
"prettier-plugin-svelte": "^3.0",
"sass": "^1.57.1",
"svelte": "^3.54.0",
"svelte-check": "^2.9.2",
"svelte": "^4.0.0",
"svelte-check": "^3.4.3",
"tailwindcss": "^3.3.3",
"ts-jest": "^29.1.0",
"tslib": "^2.4.1",
"typescript": "^4.9.3",
"typescript": "^5.0.0",
"vite": "^4.0.0"
},
"type": "module"

6
postcss.config.js Normal file
View File

@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

View File

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html class="has-background-white-bis">
<head>
<meta charset="utf-8" />

View File

@ -46,6 +46,10 @@ $menu-item-active-background-color: $link-light;
@import "bulma-switch/src/sass/index.sass";
@import "@cityssm/bulma-sticky-table/sticky-table";
@tailwind base;
@tailwind components;
@tailwind utilities;
:focus {
outline: 0;
}

View File

@ -372,7 +372,7 @@ export function renderAllocationTimeline(aggregatesTimeline: { [key: string]: Ag
d3
.line<Point>()
.curve(d3.curveLinear)
.defined((p, i) => p[group] > 0 || points[i + 1]?.[group] > 0)
.defined((p, i) => (p[group] as number) > 0 || (points[i + 1]?.[group] as number) > 0)
.x((p) => x(p.date))
.y((p) => y(p[group]));

View File

@ -25,16 +25,21 @@
</script>
{#if options.length > 1}
<div class="buttons has-addons">
<div class="du-tabs du-tabs-boxed">
{#each options as option}
<button
class="button is-small {option.value === value
? 'is-selected has-background-white-ter'
: ''}"
<a
class="du-tab du-tab-sm {option.value === value ? 'du-tab-active' : ''}"
on:click={() => (value = option.value)}
>
{option.label}
</button>
</a>
{/each}
</div>
{/if}
<style lang="postcss">
.du-tab-active {
background-color: hsl(var(--b1)) !important;
color: hsl(var(--bc)) !important;
}
</style>

View File

@ -12,7 +12,6 @@
const now = dayjs();
let carousel: Carousel;
let pageSize = _.min([20, ts.transactions.length]);
function showPage(pageIndex: number) {
@ -82,7 +81,7 @@
<div use:chart={{ ts: ts, next: n }}>
<svg height="50" width="100%" />
</div>
<div>
<div class="">
<span>Started on</span>
<b>{_.last(ts.transactions).date.format("DD MMM YYYY")}</b>, with a total of
<b>{ts.transactions.length}</b> transactions so far.
@ -91,14 +90,13 @@
</div>
<div class="column is-8">
<Carousel
bind:this={carousel}
let:showPrevPage
let:showNextPage
infinite={false}
initialPageIndex={pageSize - 1}
>
<div slot="prev" on:click={showPrevPage} class="custom-arrow custom-arrow-prev">
<Carousel bind:this={carousel} infinite={false} initialPageIndex={pageSize - 1}>
<div
slot="prev"
let:showPrevPage
on:click={showPrevPage}
class="custom-arrow custom-arrow-prev"
>
<i class="fa-solid has-text-grey-light fa-angle-left" />
</div>
{#each _.reverse(_.take(ts.transactions, 20)) as t}
@ -106,7 +104,12 @@
<Transaction {t} compact={true} />
</div>
{/each}
<div slot="next" on:click={showNextPage} class="custom-arrow custom-arrow-next">
<div
slot="next"
let:showNextPage
on:click={showNextPage}
class="custom-arrow custom-arrow-next"
>
<i class="fa-solid has-text-grey-light fa-angle-right" />
</div>
</Carousel>

View File

@ -476,7 +476,12 @@ export function renderCurrentExpensesBreakdown(z: d3.ScaleOrdinal<string, string
xAxis
.attr("transform", "translate(0," + height + ")")
.transition(t)
.call(d3.axisBottom(x).tickSize(-height).tickFormat(skipTicks(60, x, formatCurrencyCrude)));
.call(
d3
.axisBottom(x)
.tickSize(-height)
.tickFormat(skipTicks(60, x, formatCurrencyCrude))
);
yAxis
.transition(t)

View File

@ -433,7 +433,12 @@ export function renderCurrentExpensesBreakdown(z: d3.ScaleOrdinal<string, string
xAxis
.attr("transform", "translate(0," + height + ")")
.transition(t)
.call(d3.axisBottom(x).tickSize(-height).tickFormat(skipTicks(60, x, formatCurrencyCrude)));
.call(
d3
.axisBottom(x)
.tickSize(-height)
.tickFormat(skipTicks(60, x, formatCurrencyCrude))
);
yAxis
.transition(t)

View File

@ -114,7 +114,12 @@ export function renderOverview(gains: Gain[]) {
g.append("g")
.attr("class", "axis y")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).tickSize(-height).tickFormat(skipTicks(60, x, formatCurrencyCrude)));
.call(
d3
.axisBottom(x)
.tickSize(-height)
.tickFormat(skipTicks(60, x, formatCurrencyCrude))
);
g.append("g")
.attr("class", "axis y")

View File

@ -1,4 +1,7 @@
import { describe, expect, test } from "@jest/globals";
import { describe, expect, test, jest } from "@jest/globals";
jest.mock("pdfjs-dist/build/pdf.worker.js?url", () => ({}), { virtual: true });
import { parse, render, asRows } from "./sheet";
import fs from "fs";
import helpers from "./template_helpers";
@ -10,12 +13,6 @@ dayjs.extend(customParseFormat);
import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
dayjs.extend(isSameOrBefore);
jest.mock("../store", () => ({
accountTfIdf: null
}));
jest.mock("pdfjs-dist/build/pdf.worker.js?url", () => ({}), { virtual: true });
Handlebars.registerHelper(
_.mapValues(helpers, (helper, name) => {
return function (...args: any[]) {

View File

@ -147,7 +147,12 @@ export function renderOverview(gains: Interest[]) {
g.append("g")
.attr("class", "axis y")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).tickSize(-height).tickFormat(skipTicks(60, x, formatCurrencyCrude)));
.call(
d3
.axisBottom(x)
.tickSize(-height)
.tickFormat(skipTicks(60, x, formatCurrencyCrude))
);
g.append("g")
.attr("class", "axis y")

View File

@ -20,7 +20,7 @@ function tokenize(s: string) {
}
function tfidf(query: string) {
if (accountTfIdf === null) {
if (accountTfIdf === null || get(accountTfIdf) == null) {
return {};
}
@ -40,7 +40,7 @@ function tfidf(query: string) {
}
function findMatch(query: string) {
if (accountTfIdf === null) {
if (accountTfIdf === null || get(accountTfIdf) == null) {
return [];
}
@ -55,7 +55,7 @@ function findMatch(query: string) {
return [account, similarity(q, a)];
})
.sortBy(([, score]) => score)
.filter(([, score]) => score > 0)
.filter(([, score]: [string, number]) => score > 0)
.reverse()
.value();
}

19
tailwind.config.js Normal file
View File

@ -0,0 +1,19 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ["./src/**/*.{html,js,svelte,ts}"],
theme: {
extend: {}
},
plugins: [require("daisyui")],
daisyui: {
// themes: false, // true: all themes | false: only light + dark | array: specific themes like this ["light", "dark", "cupcake"]
themes: ["light"],
darkTheme: "dark", // name of one of the included themes for dark mode
base: false, // applies background color and foreground color for root element by default
styled: true, // include daisyUI colors and design decisions for all components
utils: true, // adds responsive and modifier utility classes
rtl: false, // rotate style direction from left-to-right to right-to-left. You also need to add dir="rtl" to your html tag and install `tailwindcss-flip` plugin for Tailwind CSS.
prefix: "du-", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
logs: false // Shows info about daisyUI version and used config in the console when building your CSS
}
};

View File

@ -8,6 +8,7 @@
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"noImplicitAny": true
"noImplicitAny": true,
"lib": ["ES2021"]
}
}