(() => {
let metadataStore;
function createPropsTable(props) {
const table = document.createElement('table');
table.innerHTML = `
Property |
Attribute |
Description |
Type |
Default |
${props
.map(
prop => `
${escapeHtml(prop.name)} |
${escapeHtml(prop.attr)} |
${escapeHtml(prop.docs)} |
${escapeHtml(prop.type)} |
${escapeHtml(prop.default)} |
`
)
.join('')}
`;
return table.outerHTML;
}
function createEventsTable(events) {
const table = document.createElement('table');
table.innerHTML = `
Event |
Description |
Type |
${events
.map(
event => `
${escapeHtml(event.event)} |
${escapeHtml(event.docs)} |
CustomEvent<${escapeHtml(event.detail)}> |
`
)
.join('')}
`;
return table.outerHTML;
}
function createMethodsTable(methods) {
const table = document.createElement('table');
table.innerHTML = `
Method |
Description |
Returns |
${methods
.map(
method => `
${escapeHtml(method.name)} |
${escapeHtml(method.docs)} |
${escapeHtml(method.returns.type)} |
`
)
.join('')}
`;
return table.outerHTML;
}
function createSlotsTable(slots) {
const table = document.createElement('table');
table.innerHTML = `
Slot |
Description |
${slots
.map(
slot => `
${slot.name ? escapeHtml(slot.name) : '(default)'} |
${escapeHtml(slot.docs)} |
`
)
.join('')}
`;
return table.outerHTML;
}
function createCustomPropertiesTable(styles) {
const table = document.createElement('table');
table.innerHTML = `
Name |
Description |
${styles
.map(
style => `
${escapeHtml(style.name)} |
${escapeHtml(style.docs)} |
`
)
.join('')}
`;
return table.outerHTML;
}
function createPartsTable(parts) {
const table = document.createElement('table');
table.innerHTML = `
Name |
Description |
${parts
.map(
part => `
${escapeHtml(part.name)} |
${escapeHtml(part.docs)} |
`
)
.join('')}
`;
return table.outerHTML;
}
function createDependentsList(dependents) {
const ul = document.createElement('ul');
ul.innerHTML = `
${dependents
.map(
dependent => `
${escapeHtml(dependent)}
`
)
.join('')}
`;
return ul.outerHTML;
}
function escapeHtml(html) {
return (html + '')
.replace(/&/g, '&')
.replace(//g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/`(.*?)`/g, '$1
');
}
function getMetadata() {
return new Promise((resolve, reject) => {
// Simple caching to prevent multiple XHR requests
if (metadataStore) {
return resolve(metadataStore);
}
fetch('/dist/components.json')
.then(res => res.json())
.then(data => {
metadataStore = data;
resolve(metadataStore);
})
.catch(err => console.error(err));
});
}
function getDocsTagsObject(docsTags) {
let tags = {};
for (const tag of docsTags) {
tags[tag.name] = tag.text;
}
return tags;
}
if (!window.$docsify) {
throw new Error('Docsify must be loaded before installing this plugin.');
}
window.$docsify.plugins.push((hook, vm) => {
hook.mounted(function () {
getMetadata().then(metadata => {
const target = document.querySelector('.app-name');
// Add version
const version = document.createElement('div');
version.classList.add('sidebar-version');
version.textContent = metadata.version;
target.appendChild(version);
// Add repo buttons
const buttons = document.createElement('div');
buttons.classList.add('sidebar-buttons');
buttons.innerHTML = `
Star
`;
target.appendChild(buttons);
});
});
hook.beforeEach(async function (content, next) {
const metadata = await getMetadata();
// Replace %VERSION% placeholders
content = content.replace(/%VERSION%/g, metadata.version);
// Handle [component-header] tags
content = content.replace(/\[component-header:([a-z-]+)\]/g, (match, tag) => {
const data = metadata.components.filter(data => data.tag === tag)[0];
let result = '';
if (!data) {
console.error('Component not found in metadata: ' + tag);
next(content);
}
const tags = getDocsTagsObject(data.docsTags);
if (tags && tags.status) {
let badgeType = 'info';
if (tags.status === 'stable') badgeType = 'primary';
if (tags.status === 'experimental') badgeType = 'warning';
if (tags.status === 'planned') badgeType = 'info';
if (tags.status === 'deprecated') badgeType = 'danger';
result += `
`;
}
return result.replace(/^ +| +$/gm, '');
});
// Handle [component-metadata] tags
content = content.replace(/\[component-metadata:([a-z-]+)\]/g, (match, tag) => {
const data = metadata.components.filter(data => data.tag === tag)[0];
let result = '';
if (!data) {
console.error('Component not found in metadata: ' + tag);
next(content);
}
if (data.props.length) {
result += `
## Properties
${createPropsTable(data.props)}
`;
}
if (data.events.length) {
result += `
## Events
${createEventsTable(data.events)}
`;
}
if (data.methods.length) {
result += `
## Methods
${createMethodsTable(data.methods)}
`;
}
if (data.slots.length) {
result += `
## Slots
${createSlotsTable(data.slots)}
`;
}
if (data.styles.length) {
result += `
## CSS Custom Properties
${createCustomPropertiesTable(data.styles)}
`;
}
if (data.parts.length) {
result += `
## CSS Parts
${createPartsTable(data.parts)}
`;
}
if (data.dependents.length) {
result += `
## Dependents
The following components make use of this component.
${createDependentsList(data.dependents)}
`;
}
// Strip whitespace so markdown doesn't process things as code blocks
return result.replace(/^ +| +$/gm, '');
});
next(content);
});
});
})();