kopia lustrzana https://github.com/shoelace-style/shoelace
parse decorator for attribute
rodzic
0f4bb2b24b
commit
4263899bc0
|
@ -1,10 +1,6 @@
|
||||||
(() => {
|
(() => {
|
||||||
let metadataStore;
|
let metadataStore;
|
||||||
|
|
||||||
function getAttrName(propName) {
|
|
||||||
return propName.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`).replace(/^-/, '');
|
|
||||||
}
|
|
||||||
|
|
||||||
function createPropsTable(props) {
|
function createPropsTable(props) {
|
||||||
const table = document.createElement('table');
|
const table = document.createElement('table');
|
||||||
table.innerHTML = `
|
table.innerHTML = `
|
||||||
|
@ -19,18 +15,17 @@
|
||||||
<tbody>
|
<tbody>
|
||||||
${props
|
${props
|
||||||
.map(prop => {
|
.map(prop => {
|
||||||
const attr = getAttrName(prop.name);
|
|
||||||
return `
|
return `
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<code>${escapeHtml(prop.name)}</code>
|
<code>${escapeHtml(prop.name)}</code>
|
||||||
${
|
${
|
||||||
prop.name !== attr
|
prop.attribute && prop.name !== prop.attribute
|
||||||
? `
|
? `
|
||||||
<br>
|
<br>
|
||||||
<small>
|
<small>
|
||||||
<sl-tooltip content="Use this attribute in your HTML">
|
<sl-tooltip content="This is the corresponding HTML attribute">
|
||||||
<code class="attribute-tooltip">${escapeHtml(attr)}</code>
|
<code class="attribute-tooltip">${escapeHtml(prop.attribute)}</code>
|
||||||
</sl-tooltip>
|
</sl-tooltip>
|
||||||
</small>`
|
</small>`
|
||||||
: ''
|
: ''
|
||||||
|
|
|
@ -116,9 +116,29 @@ components.map(async component => {
|
||||||
|
|
||||||
props.map(prop => {
|
props.map(prop => {
|
||||||
const { type, values } = getTypeInfo(prop);
|
const { type, values } = getTypeInfo(prop);
|
||||||
|
let attribute;
|
||||||
|
|
||||||
|
// Look for an attribute in the @property decorator
|
||||||
|
if (Array.isArray(prop.decorators)) {
|
||||||
|
const decorator = prop.decorators.find(d => d.name === 'property');
|
||||||
|
if (decorator) {
|
||||||
|
try {
|
||||||
|
// We trust TypeDoc <3
|
||||||
|
const options = eval(`(${decorator.arguments.options})`);
|
||||||
|
|
||||||
|
// If an attribute is specified, it will always be a string
|
||||||
|
if (options && typeof options.attribute === 'string') {
|
||||||
|
attribute = options.attribute;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
api.props.push({
|
api.props.push({
|
||||||
name: prop.name,
|
name: prop.name,
|
||||||
|
attribute: attribute,
|
||||||
description: prop.comment.shortText,
|
description: prop.comment.shortText,
|
||||||
type,
|
type,
|
||||||
values,
|
values,
|
||||||
|
|
Ładowanie…
Reference in New Issue