ayo/astro-resume
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: descriptive props on the test page

Browse source
This commit is contained in:
Ayo Ayco 2025-03-05 22:40:18 +01:00
parent 6494a3bbed
commit c1b24a1d5f
1 changed files with 30 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
src/pages/index.astro
View file

@ -2,43 +2,43 @@
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;
--- ---
<div id="render-here"></div> <div id="render-here"></div>
<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]))
// render table to render-here
const table = document.createElement('table');
const tbody = document.createElement('tbody');
table.appendChild(tbody);
Object.keys(data).forEach(key => {
const tr = document.createElement('tr');
const tdKey = document.createElement('td');
const tdValue = document.createElement('td');
tdKey.textContent = key;
tdValue.textContent = data[key];
tr.appendChild(tdKey);
tr.appendChild(tdValue);
tbody.appendChild(tr);
});
document.getElementById('render-here').appendChild(table);
Object.keys(data).forEach((key) =>
console.log(key, data[key], typeof data[key])
);
// render table to render-here
const table = document.createElement("table");
const tbody = document.createElement("tbody");
table.appendChild(tbody);
Object.keys(data).forEach((key) => {
const tr = document.createElement("tr");
const tdKey = document.createElement("td");
const tdValue = document.createElement("td");
tdKey.textContent = key;
tdValue.textContent = data[key];
tr.appendChild(tdKey);
tr.appendChild(tdValue);
tbody.appendChild(tr);
});
document.getElementById("render-here").appendChild(table);
</script> </script>