From c0c0c700ac773b49136a2bc172933ad87a3688b4 Mon Sep 17 00:00:00 2001 From: Milan Hauth Date: Tue, 26 Mar 2024 13:43:41 +0100 Subject: [PATCH 01/20] up --- src/components/Pagination.tsx | 9 +++++++-- src/components/table/QwikTable.tsx | 8 +++++++- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx index 2a58abb..aad8fac 100644 --- a/src/components/Pagination.tsx +++ b/src/components/Pagination.tsx @@ -45,9 +45,14 @@ export const Pagination = component$((props: pageProps) => { diff --git a/src/components/table/QwikTable.tsx b/src/components/table/QwikTable.tsx index 43c90ac..879e6c5 100644 --- a/src/components/table/QwikTable.tsx +++ b/src/components/table/QwikTable.tsx @@ -37,7 +37,7 @@ export const QwikTable = component$((props: tableProps) => { const sortOrder = useSignal('asc'); const sortKey = useSignal(props.header[0].key); const pageNo = useSignal(0); - const postPerPage = useSignal(10); + const postPerPage = useSignal(100); const totalPosts = useSignal(props.data.length); const searchBy = useSignal(props.header[0].key); const searchInp = useSignal(''); @@ -95,6 +95,12 @@ export const QwikTable = component$((props: tableProps) => { headerImg={props.headerImg} /> + + Date: Tue, 26 Mar 2024 13:46:28 +0100 Subject: [PATCH 02/20] add dev deps for tsx2jsx.mjs --- package.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/package.json b/package.json index 3a63fce..0c3c02a 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,8 @@ "eslint-plugin-qwik": "latest", "np": "7.6.1", "prettier": "2.8.8", + "sucrase": "^3.35.0", + "tiny-glob": "^0.2.9", "typescript": "5.0.4", "undici": "5.22.0", "vite": "4.3.5" From b8bf4c9ed4d3557d9f850095d40dbff14155df75 Mon Sep 17 00:00:00 2001 From: Milan Hauth Date: Tue, 26 Mar 2024 13:48:41 +0100 Subject: [PATCH 03/20] tsx2jsx: rename --- src/components/{Pagination.tsx => Pagination.jsx} | 0 src/components/{Search.tsx => Search.jsx} | 0 src/components/{SortButton.tsx => SortButton.jsx} | 0 src/components/header/{Header.tsx => Header.jsx} | 0 src/components/table/{QwikTable.tsx => QwikTable.jsx} | 0 src/components/tableBody/{tableBody.tsx => tableBody.jsx} | 0 src/components/tableHead/{tableHead.tsx => tableHead.jsx} | 0 src/{entry.dev.tsx => entry.dev.jsx} | 0 src/{entry.ssr.tsx => entry.ssr.jsx} | 0 src/{index.ts => index.js} | 0 src/{root.tsx => root.jsx} | 0 src/utils/{imageBool.ts => imageBool.js} | 0 src/utils/{searchedData.ts => searchedData.js} | 0 src/utils/{sortData.ts => sortData.js} | 0 vite.config.ts => vite.config.js | 0 15 files changed, 0 insertions(+), 0 deletions(-) rename src/components/{Pagination.tsx => Pagination.jsx} (100%) rename src/components/{Search.tsx => Search.jsx} (100%) rename src/components/{SortButton.tsx => SortButton.jsx} (100%) rename src/components/header/{Header.tsx => Header.jsx} (100%) rename src/components/table/{QwikTable.tsx => QwikTable.jsx} (100%) rename src/components/tableBody/{tableBody.tsx => tableBody.jsx} (100%) rename src/components/tableHead/{tableHead.tsx => tableHead.jsx} (100%) rename src/{entry.dev.tsx => entry.dev.jsx} (100%) rename src/{entry.ssr.tsx => entry.ssr.jsx} (100%) rename src/{index.ts => index.js} (100%) rename src/{root.tsx => root.jsx} (100%) rename src/utils/{imageBool.ts => imageBool.js} (100%) rename src/utils/{searchedData.ts => searchedData.js} (100%) rename src/utils/{sortData.ts => sortData.js} (100%) rename vite.config.ts => vite.config.js (100%) diff --git a/src/components/Pagination.tsx b/src/components/Pagination.jsx similarity index 100% rename from src/components/Pagination.tsx rename to src/components/Pagination.jsx diff --git a/src/components/Search.tsx b/src/components/Search.jsx similarity index 100% rename from src/components/Search.tsx rename to src/components/Search.jsx diff --git a/src/components/SortButton.tsx b/src/components/SortButton.jsx similarity index 100% rename from src/components/SortButton.tsx rename to src/components/SortButton.jsx diff --git a/src/components/header/Header.tsx b/src/components/header/Header.jsx similarity index 100% rename from src/components/header/Header.tsx rename to src/components/header/Header.jsx diff --git a/src/components/table/QwikTable.tsx b/src/components/table/QwikTable.jsx similarity index 100% rename from src/components/table/QwikTable.tsx rename to src/components/table/QwikTable.jsx diff --git a/src/components/tableBody/tableBody.tsx b/src/components/tableBody/tableBody.jsx similarity index 100% rename from src/components/tableBody/tableBody.tsx rename to src/components/tableBody/tableBody.jsx diff --git a/src/components/tableHead/tableHead.tsx b/src/components/tableHead/tableHead.jsx similarity index 100% rename from src/components/tableHead/tableHead.tsx rename to src/components/tableHead/tableHead.jsx diff --git a/src/entry.dev.tsx b/src/entry.dev.jsx similarity index 100% rename from src/entry.dev.tsx rename to src/entry.dev.jsx diff --git a/src/entry.ssr.tsx b/src/entry.ssr.jsx similarity index 100% rename from src/entry.ssr.tsx rename to src/entry.ssr.jsx diff --git a/src/index.ts b/src/index.js similarity index 100% rename from src/index.ts rename to src/index.js diff --git a/src/root.tsx b/src/root.jsx similarity index 100% rename from src/root.tsx rename to src/root.jsx diff --git a/src/utils/imageBool.ts b/src/utils/imageBool.js similarity index 100% rename from src/utils/imageBool.ts rename to src/utils/imageBool.js diff --git a/src/utils/searchedData.ts b/src/utils/searchedData.js similarity index 100% rename from src/utils/searchedData.ts rename to src/utils/searchedData.js diff --git a/src/utils/sortData.ts b/src/utils/sortData.js similarity index 100% rename from src/utils/sortData.ts rename to src/utils/sortData.js diff --git a/vite.config.ts b/vite.config.js similarity index 100% rename from vite.config.ts rename to vite.config.js From c799f379124e4c44bf432595b7fd330fc97dc5ca Mon Sep 17 00:00:00 2001 From: Milan Hauth Date: Tue, 26 Mar 2024 13:48:42 +0100 Subject: [PATCH 04/20] tsx2jsx: transform --- src/components/Pagination.jsx | 22 +++++++------- src/components/Search.jsx | 28 ++++++++--------- src/components/SortButton.jsx | 14 ++++----- src/components/header/Header.jsx | 26 ++++++++-------- src/components/table/QwikTable.jsx | 42 +++++++++++++------------- src/components/tableBody/tableBody.jsx | 28 ++++++++--------- src/components/tableHead/tableHead.jsx | 28 ++++++++--------- src/entry.dev.jsx | 4 +-- src/entry.ssr.jsx | 4 +-- src/utils/imageBool.js | 2 +- src/utils/searchedData.js | 32 ++++++++++---------- src/utils/sortData.js | 30 +++++++++--------- 12 files changed, 130 insertions(+), 130 deletions(-) diff --git a/src/components/Pagination.jsx b/src/components/Pagination.jsx index aad8fac..7446d85 100644 --- a/src/components/Pagination.jsx +++ b/src/components/Pagination.jsx @@ -1,24 +1,24 @@ -import { Signal, component$, useStylesScoped$, $, useComputed$ } from '@builder.io/qwik'; +import { component$, useStylesScoped$, $, useComputed$ } from '@builder.io/qwik'; -interface pageProps { - pageNo: Signal, - postPerPage: Signal, - totalPosts: Signal -} -export const Pagination = component$((props: pageProps) => { + + + + + +export const Pagination = component$((props) => { useStylesScoped$(AppCSS); const totalPage = useComputed$(() => { return Math.ceil((props.totalPosts.value / props.postPerPage.value)) - 1; }); - const changePosts = $((e: any) => { - props.postPerPage.value = e.target.value as number; + const changePosts = $((e) => { + props.postPerPage.value = e.target.value ; }) - const changePageNo = $((e: any) => { - props.pageNo.value = e.target.value as number; + const changePageNo = $((e) => { + props.pageNo.value = e.target.value ; }) const decPage = $(() => { diff --git a/src/components/Search.jsx b/src/components/Search.jsx index ce3a9c2..04159bc 100644 --- a/src/components/Search.jsx +++ b/src/components/Search.jsx @@ -1,23 +1,23 @@ -import { $, Signal, component$, useStylesScoped$ } from '@builder.io/qwik'; - -interface searchProps { - headers: { - key: string, - label: string - }[], - searchBy: Signal, - searchInp: Signal -} - -export const Search = component$(( props: searchProps) => { +import { $, component$, useStylesScoped$ } from '@builder.io/qwik'; + + + + + + + + + + +export const Search = component$(( props) => { useStylesScoped$(AppCSS); - const setSearchBy = $((e: any) => { + const setSearchBy = $((e) => { console.log(e.target.value) props.searchBy.value = e.target.value; }) - const setSearchInp = $((e: any) => { + const setSearchInp = $((e) => { props.searchInp.value = e.target.value; }) diff --git a/src/components/SortButton.jsx b/src/components/SortButton.jsx index 0b084fd..04c6b71 100644 --- a/src/components/SortButton.jsx +++ b/src/components/SortButton.jsx @@ -1,12 +1,12 @@ -import { component$, useOn, useStylesScoped$, $, Signal } from '@builder.io/qwik'; +import { component$, useOn, useStylesScoped$, $, } from '@builder.io/qwik'; -interface typeProps { - cellKey: string | number | null | undefined, - sortOrder: Signal, - sortKey: Signal -} -export const SortButton = component$((props: typeProps) => { + + + + + +export const SortButton = component$((props) => { useStylesScoped$(AppCSS); useOn( 'click', diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx index 08d3dce..85d56b3 100644 --- a/src/components/header/Header.jsx +++ b/src/components/header/Header.jsx @@ -1,18 +1,18 @@ -import { Signal, component$, useStylesScoped$ } from "@builder.io/qwik"; +import { component$, useStylesScoped$ } from "@builder.io/qwik"; import { Search } from '../Search'; -interface headerProps { - headers: { - key: string, - label: string - }[], - searchBy: Signal, - searchInp: Signal, - title: string, - headerImg?: string -} - -export const Header = component$((props: headerProps) => { + + + + + + + + + + + +export const Header = component$((props) => { useStylesScoped$(AppCSS); return (
diff --git a/src/components/table/QwikTable.jsx b/src/components/table/QwikTable.jsx index 879e6c5..4c357ef 100644 --- a/src/components/table/QwikTable.jsx +++ b/src/components/table/QwikTable.jsx @@ -6,19 +6,19 @@ import { sortData } from '../../utils/sortData'; import { searchData } from '../../utils/searchedData'; import { Header } from '../header/Header'; -interface tableProps { - header: { - key: string, - label: string - }[], - data: { - [key: string]: string | number | null | undefined - }[], - title: string, - headerImg?: string -} - -export const QwikTable = component$((props: tableProps) => { + + + + + + + + + + + + +export const QwikTable = component$((props) => { useStyles$(` table { border-collapse: collapse; @@ -34,14 +34,14 @@ export const QwikTable = component$((props: tableProps) => { ); useStylesScoped$(AppCSS); - const sortOrder = useSignal('asc'); - const sortKey = useSignal(props.header[0].key); - const pageNo = useSignal(0); - const postPerPage = useSignal(100); - const totalPosts = useSignal(props.data.length); - const searchBy = useSignal(props.header[0].key); - const searchInp = useSignal(''); - const prevSearch = useSignal(false); + const sortOrder = useSignal('asc'); + const sortKey = useSignal(props.header[0].key); + const pageNo = useSignal(0); + const postPerPage = useSignal(100); + const totalPosts = useSignal(props.data.length); + const searchBy = useSignal(props.header[0].key); + const searchInp = useSignal(''); + const prevSearch = useSignal(false); const finalData = useStore({ items: props.data diff --git a/src/components/tableBody/tableBody.jsx b/src/components/tableBody/tableBody.jsx index bef59c8..4db69be 100644 --- a/src/components/tableBody/tableBody.jsx +++ b/src/components/tableBody/tableBody.jsx @@ -1,19 +1,19 @@ -import { Signal, component$, useComputed$, useStylesScoped$ } from '@builder.io/qwik'; +import { component$, useComputed$, useStylesScoped$ } from '@builder.io/qwik'; import { isImage } from '../../utils/imageBool'; -interface bodyProps { - data: { - [key: string]: string | number | null | undefined - }[], - pageNo: Signal, - postPerPage: Signal -} -type cellType = { - [key: string]: string | number | null | undefined; -} -export const TableBody = component$((props: bodyProps) => { + + + + + + + + + + +export const TableBody = component$((props) => { useStylesScoped$(AppCSS); const computedPosts = useComputed$(() => { @@ -27,13 +27,13 @@ export const TableBody = component$((props: bodyProps) => { return (
- {computedPosts.value.map((cell: cellType) => { + {computedPosts.value.map((cell) => { const keys = Object.keys(cell); return ( {keys.map((item, i) => { if (isImage(cell[item])) { - const imgSrc = cell[item] as string; + const imgSrc = cell[item] ; return ( - {props.header.map((cell: cellType, i) => { + {props.header.map((cell, i) => { return (
diff --git a/src/components/tableHead/tableHead.jsx b/src/components/tableHead/tableHead.jsx index 7cf9022..2e19698 100644 --- a/src/components/tableHead/tableHead.jsx +++ b/src/components/tableHead/tableHead.jsx @@ -1,25 +1,25 @@ -import { Signal, component$, useStylesScoped$ } from '@builder.io/qwik'; +import { component$, useStylesScoped$ } from '@builder.io/qwik'; import { SortButton } from '../SortButton'; -interface HeaderProps { - header: { - key: string, - label: string - }[], - sortOrder: Signal, - sortKey: Signal -} -type cellType = { - [key: string]: string | number | null | undefined; -} -export const TableHead = component$((props: HeaderProps) => { + + + + + + + + + + + +export const TableHead = component$((props) => { useStylesScoped$(AppCSS); return (
{cell[Object.keys(cell)[1]]} diff --git a/src/entry.dev.jsx b/src/entry.dev.jsx index 4f8f58f..3ad4bdc 100644 --- a/src/entry.dev.jsx +++ b/src/entry.dev.jsx @@ -9,9 +9,9 @@ * - More code is transferred to the browser than in SSR mode. * - Optimizer/Serialization/Deserialization code is not exercised! */ -import { render, type RenderOptions } from '@builder.io/qwik'; +import { render, } from '@builder.io/qwik'; import Root from './root'; -export default function (opts: RenderOptions) { +export default function (opts) { return render(document, , opts); } diff --git a/src/entry.ssr.jsx b/src/entry.ssr.jsx index cec868f..8e18953 100644 --- a/src/entry.ssr.jsx +++ b/src/entry.ssr.jsx @@ -10,11 +10,11 @@ * - npm run build * */ -import { renderToStream, type RenderToStreamOptions } from '@builder.io/qwik/server'; +import { renderToStream, } from '@builder.io/qwik/server'; import { manifest } from '@qwik-client-manifest'; import Root from './root'; -export default function (opts: RenderToStreamOptions) { +export default function (opts) { return renderToStream(, { manifest, ...opts, diff --git a/src/utils/imageBool.js b/src/utils/imageBool.js index 342b3fb..18cfab8 100644 --- a/src/utils/imageBool.js +++ b/src/utils/imageBool.js @@ -1,4 +1,4 @@ -export const isImage = (url: string | number | null | undefined) => { +export const isImage = (url) => { if (typeof (url) === 'string') return /\.(jpg|jpeg|png|webp|avif|gif|svg)$/.test(url); return false; diff --git a/src/utils/searchedData.js b/src/utils/searchedData.js index dbfa1ac..e5019d8 100644 --- a/src/utils/searchedData.js +++ b/src/utils/searchedData.js @@ -1,4 +1,4 @@ -import { Signal } from "@builder.io/qwik"; + export function searchData({ data, @@ -9,24 +9,24 @@ export function searchData({ searchBy, searchInp, prevSearch -}: { - data: { - [key: string]: string | number | null | undefined - }[]; - pageNo: Signal; - sortKey: Signal; - sortOrder: Signal; - totalPosts: Signal; - searchBy: Signal; - searchInp: Signal; - prevSearch: Signal; -}) { +} + + + + + + + + + + +) { if (!prevSearch.value) pageNo.value = 0; prevSearch.value = true; - const searchedData: any[] = []; - data.forEach((row: any) => { + const searchedData = []; + data.forEach((row) => { if ((row[searchBy.value].toString()).toLowerCase().indexOf(searchInp.value.toLowerCase()) === -1) { // do nothing } else { @@ -34,7 +34,7 @@ export function searchData({ } }) - const finalData = searchedData.sort((a: any, b: any) => { + const finalData = searchedData.sort((a, b) => { return a[sortKey.value] > b[sortKey.value] ? 1 : -1; }); diff --git a/src/utils/sortData.js b/src/utils/sortData.js index b514378..69c2f6c 100644 --- a/src/utils/sortData.js +++ b/src/utils/sortData.js @@ -1,4 +1,4 @@ -import { Signal } from "@builder.io/qwik"; + export function sortData({ data, @@ -8,19 +8,19 @@ export function sortData({ totalPosts, prevSearch, searchBy -}: { - data: { - [key: string]: string | number | null | undefined - }[]; - tableData: { - [key: string]: string | number | null | undefined - }[]; - sortKey: Signal; - sortOrder: Signal; - totalPosts: Signal; - prevSearch: Signal; - searchBy: Signal; -}) { +} + + + + + + + + + + + +) { const initialSearchKey = searchBy.value; if (!sortKey.value) return tableData; @@ -33,7 +33,7 @@ export function sortData({ sortKey.value = initialSearchKey; sortOrder.value = 'asc'; } - const sortedData = tableData.sort((a: any, b: any) => { + const sortedData = tableData.sort((a, b) => { return a[sortKey.value] > b[sortKey.value] ? 1 : -1; }); From cdf0c86ed5c6ae4fa1acd41bc3e0ce43053bc845 Mon Sep 17 00:00:00 2001 From: Milan Hauth Date: Tue, 26 Mar 2024 13:54:34 +0100 Subject: [PATCH 05/20] add tsx2jsx.mjs --- tsx2jsx.mjs | 125 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 tsx2jsx.mjs diff --git a/tsx2jsx.mjs b/tsx2jsx.mjs new file mode 100644 index 0000000..381a156 --- /dev/null +++ b/tsx2jsx.mjs @@ -0,0 +1,125 @@ +/* +tsx2jsx.mjs +convert typescript to vanillajs (actual javascript) + +npm i -D sucrase tiny-glob +node tsx2jsx.mjs + +https://github.com/alangpierce/sucrase/issues/559 +https://github.com/milahu/random/blob/master/javascript/tsx2jsx.mjs +*/ + +import fs from 'fs'; +import {spawnSync} from 'child_process'; + +import glob from 'tiny-glob'; + +import {HelperManager} from "sucrase/dist/HelperManager.js"; +import identifyShadowedGlobalsModule from "sucrase/dist/identifyShadowedGlobals.js"; +import NameManagerModule from "sucrase/dist/NameManager.js"; +import {parse} from "sucrase/dist/parser/index.js"; +import TokenProcessorModule from "sucrase/dist/TokenProcessor.js"; +import RootTransformerModule from "sucrase/dist/transformers/RootTransformer.js"; +import getTSImportedNamesModule from "sucrase/dist/util/getTSImportedNames.js"; + +// workaround ... +// TypeError: NameManager is not a constructor +const NameManager = NameManagerModule.default; +const TokenProcessor = TokenProcessorModule.default; +const getTSImportedNames = getTSImportedNamesModule.default; +const identifyShadowedGlobals = identifyShadowedGlobalsModule.default; +const RootTransformer = RootTransformerModule.default; + +function transformTSOnly(code) { + const {tokens, scopes} = parse( + code, + true /* isJSXEnabled */, + true /* isTypeScriptEnabled */, + false /* isFlowEnabled */, + ); + const nameManager = new NameManager(code, tokens); + const helperManager = new HelperManager(nameManager); + const tokenProcessor = new TokenProcessor(code, tokens, false /* isFlowEnabled */, helperManager); + + identifyShadowedGlobals(tokenProcessor, scopes, getTSImportedNames(tokenProcessor)); + const sucraseContext = { + tokenProcessor, + scopes, + nameManager, + importProcessor: null, + helperManager, + }; + + // https://github.com/alangpierce/sucrase#transforms + const sucraseOptions = { + transforms: ["typescript"], + disableESTransforms: true, // keep modern javascript: Optional chaining, Nullish coalescing, ... + }; + + const transformer = new RootTransformer(sucraseContext, ["typescript"], false, sucraseOptions); + return transformer.transform(); +} + +const gitDirtyWithSelf = spawnSync('git', ['diff-index', 'HEAD', '--'], { encoding: 'utf8' }).stdout; +const gitDirty = gitDirtyWithSelf.replace(/(?:^|\n):[0-9]+ [0-9]+ [0-9a-f]+ \w+ M\s+tsx2jsx\.mjs(?:\n|$)/, '\n').trim(); +if (gitDirty != '') { + console.log(`error: git is dirty:\n\n${gitDirty}`); + process.exit(1); +} + +const foExtMap = { + 'ts': 'js', + 'tsx': 'jsx', +}; + +const globExt = '{' + Object.keys(foExtMap).join(',') + '}'; +// example: {ts,tsx} + +const globStr = `**/*.${globExt}`; // convert all files in workdir +//const globStr = `./src/**/*.${extList}`; // convert all files in src/ folder +console.log(`globStr = ${globStr}`) + +const todoTransform = []; + +for (const fi of await glob(globStr)) { + + //console.log(fi); continue; // debug + + const fiParts = fi.split('.'); + if (fiParts.slice(-2)[0] == 'd') { + console.log(`skip .d.ts file: ${fi}`); + continue; + } + const fiExt = fiParts.slice(-1)[0]; + const foExt = foExtMap[fiExt]; + if (!foExt) { + console.log(`FIXME handle input file extension ${JSON.stringify(fiExt)} for input file ${JSON.stringify(fi)}`); + continue; + } + const fo = fi.split('.').slice(0, -1).join('.') + '.' + foExt; + console.log(`rename: ${fi} -> ${fo}`); + spawnSync('git', ['mv', '-v', fi, fo]); // rename + todoTransform.push([fi, fo]); +} +if (todoTransform.length == 0) { + console.log(`not found any *.tsx files`); + process.exit(1); +} +spawnSync('git', ['commit', '-m', 'tsx2jsx: rename']); // commit + +for (const [fi, fo] of todoTransform) { + console.log(`transform: ${fi} -> ${fo}`); + const i = fs.readFileSync(fo, 'utf8'); + const o = transformTSOnly(i); + // always do your backups :P + fs.writeFileSync(fo, o.code, 'utf8'); // replace + spawnSync('git', ['add', fo]); // add +} +spawnSync('git', ['commit', '-m', 'tsx2jsx: transform']); // commit + +console.log(` +next steps: + +git diff HEAD^ # inspect transform +git reset --hard HEAD~2 # undo transform + rename +`); From 9b96e7889e628846c97988438756496030f9495c Mon Sep 17 00:00:00 2001 From: Milan Hauth Date: Tue, 26 Mar 2024 14:04:25 +0100 Subject: [PATCH 06/20] fix mv --- .eslintrc.cjs => .eslintrc.cjs.bak | 0 src/components/tableBody/{tableBody.jsx => TableBody.jsx} | 0 src/components/tableHead/{tableHead.jsx => TableHead.jsx} | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename .eslintrc.cjs => .eslintrc.cjs.bak (100%) rename src/components/tableBody/{tableBody.jsx => TableBody.jsx} (100%) rename src/components/tableHead/{tableHead.jsx => TableHead.jsx} (100%) diff --git a/.eslintrc.cjs b/.eslintrc.cjs.bak similarity index 100% rename from .eslintrc.cjs rename to .eslintrc.cjs.bak diff --git a/src/components/tableBody/tableBody.jsx b/src/components/tableBody/TableBody.jsx similarity index 100% rename from src/components/tableBody/tableBody.jsx rename to src/components/tableBody/TableBody.jsx diff --git a/src/components/tableHead/tableHead.jsx b/src/components/tableHead/TableHead.jsx similarity index 100% rename from src/components/tableHead/tableHead.jsx rename to src/components/tableHead/TableHead.jsx From fb3b9aada1f45729e2d10f6da823e9dd9b7b2647 Mon Sep 17 00:00:00 2001 From: Milan Hauth Date: Tue, 26 Mar 2024 14:21:25 +0100 Subject: [PATCH 07/20] fix default rows per page --- src/components/Pagination.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Pagination.jsx b/src/components/Pagination.jsx index 7446d85..077f713 100644 --- a/src/components/Pagination.jsx +++ b/src/components/Pagination.jsx @@ -46,7 +46,7 @@ export const Pagination = component$((props) => { - + From 5f30ade92ad30967073096399e771e5bf657e2d2 Mon Sep 17 00:00:00 2001 From: Milan Hauth Date: Tue, 26 Mar 2024 14:25:02 +0100 Subject: [PATCH 08/20] search by label --- src/components/Search.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Search.jsx b/src/components/Search.jsx index 04159bc..7cba410 100644 --- a/src/components/Search.jsx +++ b/src/components/Search.jsx @@ -26,7 +26,7 @@ export const Search = component$(( props) => { Search by From ddf0e3cbba7e8562d92b2df8034f9f157820767a Mon Sep 17 00:00:00 2001 From: Milan Hauth Date: Tue, 26 Mar 2024 14:36:00 +0100 Subject: [PATCH 09/20] fix sortData --- src/utils/sortData.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/utils/sortData.js b/src/utils/sortData.js index 69c2f6c..9f9d103 100644 --- a/src/utils/sortData.js +++ b/src/utils/sortData.js @@ -22,10 +22,11 @@ export function sortData({ ) { const initialSearchKey = searchBy.value; - if (!sortKey.value) return tableData; if (tableData.length === 0) tableData = data; + if (sortKey.value === undefined) return tableData; + totalPosts.value = data.length; if(prevSearch.value) { prevSearch.value = false; From 2b1e115e90603b1e878c1b9d57115d5b254d5d0a Mon Sep 17 00:00:00 2001 From: Milan Hauth Date: Tue, 26 Mar 2024 14:37:45 +0100 Subject: [PATCH 10/20] sortKey: dont sort by default --- src/components/table/QwikTable.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/table/QwikTable.jsx b/src/components/table/QwikTable.jsx index 4c357ef..0666a0a 100644 --- a/src/components/table/QwikTable.jsx +++ b/src/components/table/QwikTable.jsx @@ -35,7 +35,8 @@ export const QwikTable = component$((props) => { useStylesScoped$(AppCSS); const sortOrder = useSignal('asc'); - const sortKey = useSignal(props.header[0].key); + //const sortKey = useSignal(props.header[0].key); + const sortKey = useSignal(undefined); // perf: dont sort by default const pageNo = useSignal(0); const postPerPage = useSignal(100); const totalPosts = useSignal(props.data.length); From 754b9cd56d88be6103dde4bf3501f5c148663b68 Mon Sep 17 00:00:00 2001 From: Milan Hauth Date: Tue, 26 Mar 2024 14:43:30 +0100 Subject: [PATCH 11/20] fixup: search by label --- src/components/Search.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Search.jsx b/src/components/Search.jsx index 7cba410..5e92dc6 100644 --- a/src/components/Search.jsx +++ b/src/components/Search.jsx @@ -26,7 +26,7 @@ export const Search = component$(( props) => { Search by From b1c0256e240e067b66a388b4205a4b287b0e3241 Mon Sep 17 00:00:00 2001 From: Milan Hauth Date: Tue, 26 Mar 2024 15:07:30 +0100 Subject: [PATCH 12/20] debounce search --- src/components/Search.jsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/Search.jsx b/src/components/Search.jsx index 5e92dc6..9df2e03 100644 --- a/src/components/Search.jsx +++ b/src/components/Search.jsx @@ -1,4 +1,4 @@ -import { $, component$, useStylesScoped$ } from '@builder.io/qwik'; +import { $, component$, useStylesScoped$, useSignal } from '@builder.io/qwik'; @@ -17,6 +17,15 @@ export const Search = component$(( props) => { props.searchBy.value = e.target.value; }) + // https://qwik.dev/docs/cookbook/debouncer/ + const debounce = (fn, delay) => { + const timeoutId = useSignal(); + return $((args) => { + clearTimeout(timeoutId.value); + timeoutId.value = Number(setTimeout(() => fn(args), delay)); + }); + }; + const setSearchInp = $((e) => { props.searchInp.value = e.target.value; }) @@ -29,7 +38,7 @@ export const Search = component$(( props) => { ))} - + ); }); From 0e364730ce017fe929aee51b740614241020a93d Mon Sep 17 00:00:00 2001 From: Milan Hauth Date: Tue, 26 Mar 2024 15:18:34 +0100 Subject: [PATCH 13/20] use natural page numbers --- src/components/Pagination.jsx | 10 +++++----- src/components/table/QwikTable.jsx | 2 +- src/components/tableBody/TableBody.jsx | 5 +++-- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/Pagination.jsx b/src/components/Pagination.jsx index 077f713..0a7d476 100644 --- a/src/components/Pagination.jsx +++ b/src/components/Pagination.jsx @@ -10,7 +10,7 @@ export const Pagination = component$((props) => { useStylesScoped$(AppCSS); const totalPage = useComputed$(() => { - return Math.ceil((props.totalPosts.value / props.postPerPage.value)) - 1; + return Math.ceil((props.totalPosts.value / props.postPerPage.value)); }); const changePosts = $((e) => { @@ -22,7 +22,7 @@ export const Pagination = component$((props) => { }) const decPage = $(() => { - if (props.pageNo.value !== 0) props.pageNo.value--; + if (props.pageNo.value > 1) props.pageNo.value--; }) const incPage = $(() => { @@ -30,7 +30,7 @@ export const Pagination = component$((props) => { }) const setFirstPage = $(() => { - if(props.pageNo.value !== 0) props.pageNo.value = 0; + if(props.pageNo.value !== 1) props.pageNo.value = 1; }) const setLastPage = $(() => { @@ -57,11 +57,11 @@ export const Pagination = component$((props) => {
-
Page of {totalPage.value}
+
Page of {totalPage.value}
-