Component Prop
Instead of using the src attribute with file path strings, <page-route> allows you to pass component constructor/class references directly using the component property.
This approach is highly recommended when bundling applications, as it provides compile-time type-checking and robust source mapping.
typescript
1import { html } from '@beforesemicolon/web-component'2import { HomePage } from './pages/HomePage'3import { AboutPage } from './pages/AboutPage'4 5// Render route tags using Component imports directly6html`7 <page-route path="/" component="${HomePage}"></page-route>8 <page-route path="/about" component="${AboutPage}"></page-route>9`Benefits of the component Prop
- Type Safety: TypeScript validates class references at compile-time.
- IDE Assistance: Autocomplete and symbol renaming work natively.
- Tree-Shaking: Static imports allow bundlers to shake out unused code.
- HMR Support: Faster hot-module replacements during development.
Component Formats
The value passed to the component property can be:
1. Plain HTML String
typescript
1export default '<h2>Welcome Home</h2>'2. Markup Template Literal
typescript
1import { html } from '@beforesemicolon/web-component'2export default html`<h2>Welcome Home</h2>`3. Native DOM Node
typescript
1const container = document.createElement('div')2container.textContent = 'Welcome Home'3export default container4. Contextual Loader Function
A function that receives navigation data, path params, and search queries, and returns any of the above formats:
typescript
1export default (data, params, query) => {2 return html`3 <h2>Welcome ${data.username}</h2>4 <p>Viewing item ID: ${params.itemId}</p>5 <p>Active filter: ${query.filter}</p>6 `7}