feat: descriptive props on the test page

This commit is contained in:
Ayo Ayco 2025-03-05 22:40:18 +01:00
parent 6494a3bbed
commit c1b24a1d5f

View file

@ -2,12 +2,12 @@
import Serialize from "../Serialize.astro"; import Serialize from "../Serialize.astro";
import { stringify } from "devalue"; import { stringify } from "devalue";
const data = { const data = {
name: 'John Doe', nameStr: "John Doe",
isOkay: true, isOkayBool: true,
mood: null, moodNull: null,
now: new Date(), nowDate: new Date(),
age: BigInt('3218378192378') ageBigInt: BigInt("3218378192378"),
} };
export type Data = typeof data; export type Data = typeof data;
--- ---
@ -15,30 +15,30 @@ export type Data = typeof data;
<Serialize data={data} id="my-data" use={stringify} /> <Serialize data={data} id="my-data" use={stringify} />
<script> <script>
import { deserialize } from '../deserialize'; import { deserialize } from "../deserialize";
import { parse } from 'devalue'; import { parse } from "devalue";
import type { Data } from './index.astro'; import type { Data } from "./index.astro";
const data = deserialize<Data>('my-data', parse); const data = deserialize<Data>("my-data", parse);
console.log(data); console.log(data);
Object.keys(data).forEach(key => console.log(key, data[key], typeof data[key])) Object.keys(data).forEach((key) =>
console.log(key, data[key], typeof data[key])
);
// render table to render-here // render table to render-here
const table = document.createElement('table'); const table = document.createElement("table");
const tbody = document.createElement('tbody'); const tbody = document.createElement("tbody");
table.appendChild(tbody); table.appendChild(tbody);
Object.keys(data).forEach(key => { Object.keys(data).forEach((key) => {
const tr = document.createElement('tr'); const tr = document.createElement("tr");
const tdKey = document.createElement('td'); const tdKey = document.createElement("td");
const tdValue = document.createElement('td'); const tdValue = document.createElement("td");
tdKey.textContent = key; tdKey.textContent = key;
tdValue.textContent = data[key]; tdValue.textContent = data[key];
tr.appendChild(tdKey); tr.appendChild(tdKey);
tr.appendChild(tdValue); tr.appendChild(tdValue);
tbody.appendChild(tr); tbody.appendChild(tr);
}); });
document.getElementById('render-here').appendChild(table); document.getElementById("render-here").appendChild(table);
</script> </script>