V štandarde ECMAScript 2025 (ES2025) bola zavedená možnosť importovať artefakty rôznych typov , nielen JavaScriptové moduly. Na import sa používa syntax s kľúčovým slovom with, kde sa špecifikuje typ importovaného artefaktu, napríklad:
import configData from './config.json' with { type: 'json' };
Tento mechanizmus rozširuje možnosti modulárneho systému JavaScriptu tak, že umožňuje natívnu prácu s rôznymi formátmi dát priamo cez import bez potreby externých knižníc alebo transformácií.
Je to ďalší významý krok smerom k tvorbe univerzálnych webových komponentov.
Nasledujúci príklad ilustruje tvorbu moderného webového komponentu:
<!DOCTYPE html>
<html>
<head>
<title>Table with Import Attributes</title>
<script type="module" src="data-table.mjs"></script>
</head>
<body>
<h1>User Directory</h1>
<data-table></data-table>
</body>
</html>
Tu máme jednoduchý HTML súbor, ktorý načítava webovú komponentu <data-table>.
// data-table.mjs
import tableData from './data.json' with { type: 'json' };
import { tableTemplate } from './table-template.mjs';
import cssSheet from './table.css' with { type: 'css' };
class DataTable extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
// this.data = [...tableData];
this.data = tableData;
console.log(tableData);
console.log(this.data);
}
connectedCallback() {
this.shadowRoot.adoptedStyleSheets = [cssSheet];
const html = tableTemplate(this.data);
this.shadowRoot.innerHTML += html;
}
}
customElements.define('data-table', DataTable);
Komponenta DataTable je definovaná v module data-table.mjs. Tento modul importuje JSON dáta, CSS štýly a HTML šablónu pomocou nových import atribútov. V triede DataTable sa dáta načítajú a zobrazia v tabuľke so štýlmi aplikovanými cez shadow DOM.
// table-template.mjs
export const tableTemplate = (rows) => `
<table>
<thead>
<tr><th>Name</th><th>Email</th><th>Role</th></tr>
</thead>
<tbody>
${rows.map(row => `
<tr>
<td>${row.name}</td>
<td>${row.email}</td>
<td>${row.role}</td>
</tr>
`).join('')}
</tbody>
</table>
`;
Táto šablóna generuje HTML tabuľku na základe poskytnutých dát.
// table.css
table {
width: 100%;
border-collapse: collapse;
font-family: sans-serif;
font-size: 12px;
}
th, td {
padding: 0.5em;
border: 1px solid #2d3e50; /* Match header background color */
text-align: left;
}
th {
background-color: #2d3e50; /* Professional dark blue-gray */
color: #fff; /* White text for contrast */
}
/* Zebra striping for table rows */
tr:nth-child(even) {
background-color: #f2f2f2;
}
Tento CSS súbor definuje CSS štýly pre tabuľku.
[
{ "name": "Alice", "email": "alice@example.com", "role": "Admin" },
{ "name": "Bob", "email": "bob@example.com", "role": "Editor" },
{ "name": "Charlie", "email": "charlie@example.com", "role": "Viewer" }
]
Nakoniec dátový súbor data.json.
