2020-01-17 19:42:01 -05:00
|
|
|
const request = require('request-promise-native');
|
|
|
|
const {promises: fs} = require('fs');
|
|
|
|
const ts = require('typescript');
|
|
|
|
const path = require('path');
|
|
|
|
|
|
|
|
const fromCamelCase = camelCase => camelCase.split(/(?=^|[A-Z])/).map(w => w.toLowerCase());
|
|
|
|
|
|
|
|
const ATTRS_PATH = path.join(__dirname, '..', 'attrs.json');
|
|
|
|
|
|
|
|
const REACT_TYPINGS_URL = 'https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/react/index.d.ts';
|
|
|
|
const REACT_TYPINGS_FILE = path.join(__dirname, 'react.d.ts');
|
|
|
|
const fetchReactTypingsSource = async () => {
|
|
|
|
try {
|
|
|
|
return await fs.readFile(REACT_TYPINGS_FILE, 'utf8');
|
|
|
|
} catch (err) {
|
|
|
|
if (err.code !== 'ENOENT') {
|
|
|
|
throw err;
|
|
|
|
}
|
|
|
|
const source = await request(REACT_TYPINGS_URL);
|
|
|
|
await fs.writeFile(REACT_TYPINGS_FILE, source);
|
|
|
|
return source;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const tagNameNormalised = {
|
|
|
|
'anchor': 'a',
|
|
|
|
};
|
|
|
|
|
|
|
|
const attrNameNormalised = {
|
|
|
|
'classname': 'class',
|
|
|
|
};
|
|
|
|
|
|
|
|
const reactSpecificAttributes = [
|
|
|
|
'defaultChecked', 'defaultValue', 'suppressContentEditableWarning', 'suppressHydrationWarning',
|
|
|
|
];
|
|
|
|
|
|
|
|
// TODO Consider and check behaviour when value matches case insensitively, after trimming whitespace, numerically (for number values), etc.
|
|
|
|
// TODO This is currently manually sourced and written. Try to get machine-readable spec and automate.
|
|
|
|
const defaultAttributeValues = {
|
|
|
|
'align': [{
|
|
|
|
tags: ['img'],
|
|
|
|
defaultValue: 'bottom',
|
|
|
|
}],
|
|
|
|
'decoding': [{
|
|
|
|
tags: ['img'],
|
|
|
|
defaultValue: 'auto',
|
|
|
|
}],
|
|
|
|
'enctype': [{
|
|
|
|
tags: ['form'],
|
|
|
|
defaultValue: 'application/x-www-form-urlencoded',
|
|
|
|
}],
|
|
|
|
'frameborder': [{
|
|
|
|
tags: ['iframe'],
|
|
|
|
defaultValue: '1',
|
|
|
|
isPositiveInteger: true,
|
|
|
|
}],
|
|
|
|
'formenctype': [{
|
|
|
|
tags: ['button', 'input'],
|
|
|
|
defaultValue: 'application/x-www-form-urlencoded',
|
|
|
|
}],
|
|
|
|
'height': [{
|
|
|
|
tags: ['iframe'],
|
|
|
|
defaultValue: '150',
|
|
|
|
isPositiveInteger: true,
|
|
|
|
}],
|
|
|
|
'importance': [{
|
|
|
|
tags: ['iframe'],
|
|
|
|
defaultValue: 'auto',
|
|
|
|
}],
|
|
|
|
'loading': [{
|
|
|
|
tags: ['iframe', 'img'],
|
|
|
|
defaultValue: 'eager',
|
|
|
|
}],
|
2020-01-17 19:47:38 -05:00
|
|
|
'media': [{
|
|
|
|
tags: ['style'],
|
|
|
|
defaultValue: 'all',
|
|
|
|
}],
|
2020-01-17 19:42:01 -05:00
|
|
|
'method': [{
|
|
|
|
tags: ['form'],
|
|
|
|
defaultValue: 'get',
|
|
|
|
}],
|
|
|
|
'referrerpolicy': [{
|
|
|
|
tags: ['iframe', 'img'],
|
|
|
|
defaultValue: 'no-referrer-when-downgrade',
|
|
|
|
}],
|
|
|
|
'rules': [{
|
|
|
|
tags: ['table'],
|
|
|
|
defaultValue: 'none',
|
|
|
|
}],
|
|
|
|
'span': [{
|
|
|
|
tags: ['col', 'colgroup'],
|
|
|
|
defaultValue: '1',
|
|
|
|
isPositiveInteger: true,
|
|
|
|
}],
|
|
|
|
'target': [{
|
|
|
|
tags: ['a', 'form'],
|
|
|
|
defaultValue: '_self',
|
|
|
|
}],
|
|
|
|
'type': [{
|
|
|
|
tags: ['button'],
|
|
|
|
defaultValue: 'submit',
|
|
|
|
}, {
|
|
|
|
tags: ['input'],
|
|
|
|
defaultValue: 'text',
|
|
|
|
}, {
|
2020-01-17 19:47:38 -05:00
|
|
|
tags: ['link', 'style'],
|
2020-01-17 19:42:01 -05:00
|
|
|
defaultValue: 'text/css',
|
|
|
|
}],
|
|
|
|
'width': [{
|
|
|
|
tags: ['iframe'],
|
|
|
|
defaultValue: '300',
|
|
|
|
isPositiveInteger: true,
|
|
|
|
}],
|
|
|
|
};
|
|
|
|
|
|
|
|
const collapsibleAndTrimmable = {
|
|
|
|
'class': [''],
|
|
|
|
};
|
|
|
|
|
|
|
|
// TODO Is escapedText the API for getting name?
|
|
|
|
const getNameOfNode = n => n.name.escapedText;
|
|
|
|
const normaliseName = (name, norms) => [name.toLowerCase()].map(n => norms[n] || n)[0];
|
|
|
|
|
|
|
|
const processReactTypeDeclarations = async (source) => {
|
|
|
|
const nodes = [source];
|
|
|
|
// Use index-based loop to keep iterating as nodes array grows.
|
|
|
|
for (let i = 0; i < nodes.length; i++) {
|
|
|
|
// forEachChild doesn't work if return value is number (e.g. return value of Array.prototype.push).
|
|
|
|
nodes[i].forEachChild(c => void nodes.push(c));
|
|
|
|
}
|
|
|
|
const attributeNodes = nodes
|
|
|
|
.filter(n => n.kind === ts.SyntaxKind.InterfaceDeclaration)
|
|
|
|
.map(n => [/^([A-Za-z]*)HTMLAttributes/.exec(getNameOfNode(n)), n])
|
|
|
|
.filter(([matches]) => matches)
|
|
|
|
.map(([matches, node]) => [normaliseName(matches[1], tagNameNormalised), node])
|
|
|
|
.filter(([tagName]) => !['all', 'webview'].includes(tagName))
|
|
|
|
.sort((a, b) => a[0].localeCompare(b[0]));
|
|
|
|
|
|
|
|
// Process global attributes first as they also appear on some specific tags but we don't want to keep the specific ones if they're global.
|
|
|
|
if (attributeNodes[0][0] !== '') {
|
|
|
|
throw new Error(`Global attributes is not first to be processed`);
|
|
|
|
}
|
|
|
|
|
|
|
|
const attributes = new Map();
|
|
|
|
|
|
|
|
for (const [tagName, node] of attributeNodes) {
|
|
|
|
for (const n of node.members.filter(n => n.kind === ts.SyntaxKind.PropertySignature)) {
|
|
|
|
const attrName = normaliseName(getNameOfNode(n), attrNameNormalised);
|
|
|
|
if (reactSpecificAttributes.includes(attrName)) continue;
|
|
|
|
|
|
|
|
const types = n.type.kind === ts.SyntaxKind.UnionType
|
|
|
|
? n.type.types.map(t => t.kind)
|
|
|
|
: [n.type.kind];
|
|
|
|
|
|
|
|
const boolean = types.includes(ts.SyntaxKind.BooleanKeyword);
|
|
|
|
// If types includes boolean and string, make it a boolean attr to prevent it from being removed if empty value.
|
|
|
|
const redundantIfEmpty = !boolean &&
|
|
|
|
(types.includes(ts.SyntaxKind.StringKeyword) || types.includes(ts.SyntaxKind.NumberKeyword));
|
|
|
|
const defaultValue = (defaultAttributeValues[attrName] || [])
|
|
|
|
.filter(a => a.tags.includes(tagName))
|
|
|
|
.map(a => a.defaultValue);
|
|
|
|
const collapseAndTrim = (collapsibleAndTrimmable[attrName] || []).includes(tagName);
|
|
|
|
if (defaultValue.length > 1) {
|
|
|
|
throw new Error(`Tag-attribute combination has multiple default values: ${defaultValue}`);
|
|
|
|
}
|
|
|
|
const attr = {
|
|
|
|
boolean,
|
|
|
|
redundant_if_empty: redundantIfEmpty,
|
|
|
|
collapse_and_trim: collapseAndTrim,
|
|
|
|
default_value: defaultValue[0],
|
|
|
|
};
|
|
|
|
|
|
|
|
if (!attributes.has(attrName)) attributes.set(attrName, new Map());
|
|
|
|
const tagsForAttribute = attributes.get(attrName);
|
|
|
|
if (tagsForAttribute.has(tagName)) throw new Error(`Duplicate tag-attribute combination: <${tagName} ${attrName}>`);
|
|
|
|
|
|
|
|
const globalAttr = tagsForAttribute.get('');
|
|
|
|
if (globalAttr) {
|
|
|
|
if (globalAttr.boolean !== attr.boolean
|
|
|
|
|| globalAttr.redundant_if_empty !== attr.redundant_if_empty
|
|
|
|
|| globalAttr.collapse_and_trim !== attr.collapse_and_trim
|
|
|
|
|| globalAttr.default_value !== attr.default_value) {
|
|
|
|
throw new Error(`Global and tag-specific attributes conflict: ${JSON.stringify(globalAttr, null, 2)} ${JSON.stringify(attr, null, 2)}`);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
tagsForAttribute.set(tagName, attr);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Sort output JSON object by property so diffs are clearer.
|
|
|
|
await fs.writeFile(ATTRS_PATH, JSON.stringify(
|
|
|
|
Object.fromEntries(
|
|
|
|
[...attributes.entries()]
|
|
|
|
.map(([attrName, tagsMap]) => [attrName, Object.fromEntries(
|
|
|
|
[...tagsMap.entries()]
|
|
|
|
.sort((a, b) => a[0].localeCompare(b[0]))
|
|
|
|
)])
|
|
|
|
.sort((a, b) => a[0].localeCompare(b[0]))
|
|
|
|
),
|
|
|
|
null,
|
|
|
|
2,
|
|
|
|
));
|
|
|
|
};
|
|
|
|
|
|
|
|
(async () => {
|
|
|
|
const source = ts.createSourceFile(`react.d.ts`, await fetchReactTypingsSource(), ts.ScriptTarget.ES2019);
|
|
|
|
await processReactTypeDeclarations(source);
|
|
|
|
})();
|