本文整理匯總了TypeScript中dom5.constructors.element方法的典型用法代碼示例。如果您正苦於以下問題：TypeScript constructors.element方法的具體用法？TypeScript constructors.element怎麽用？TypeScript constructors.element使用的例子？那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類dom5.constructors的用法示例。
在下文中一共展示了constructors.element方法的8個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: createLinks
export function createLinks(
html: string,
baseUrl: string,
deps: Set<string>,
absolute: boolean = false): string {
const ast = parse5.parse(html, {locationInfo: true});
const baseTag = dom5.query(ast, dom5.predicates.hasTagName('base'));
const baseTagHref = baseTag ? dom5.getAttribute(baseTag, 'href') : '';
// parse5 always produces a <head> element.
const head = dom5.query(ast, dom5.predicates.hasTagName('head'))!;
for (const dep of deps) {
let href;
if (absolute && !baseTagHref) {
href = absUrl(dep);
} else {
href = relativeUrl(absUrl(baseUrl), absUrl(dep));
}
const link = dom5.constructors.element('link');
dom5.setAttribute(link, 'rel', 'prefetch');
dom5.setAttribute(link, 'href', href);
dom5.append(head, link);
}
dom5.removeFakeRootElements(ast);
return parse5.serialize(ast);
}示例2: _moveDomModuleStyleIntoTemplate
/**
* Old Polymer supported `<style>` tag in `<dom-module>` but outside of
* `<template>`. This is also where the deprecated Polymer CSS import tag
* `<link rel="import" type="css">` would generate inline `<style>`.
* Migrates these `<style>` tags into available `<template>` of the
* `<dom-module>`. Will create a `<template>` container if not present.
*
* TODO(usergenic): Why is this in bundler... shouldn't this be some kind of
* polyup or pre-bundle operation?
*/
private _moveDomModuleStyleIntoTemplate(style: ASTNode, refStyle?: ASTNode) {
const domModule =
dom5.nodeWalkAncestors(style, dom5.predicates.hasTagName('dom-module'));
if (!domModule) {
return;
}
let template = dom5.query(domModule, matchers.template);
if (!template) {
template = dom5.constructors.element('template')!;
treeAdapters.default.setTemplateContent(
template, dom5.constructors.fragment());
prepend(domModule, template);
}
removeElementAndNewline(style);
// Ignore the refStyle object if it is contained within a different
// dom-module.
if (refStyle &&
!dom5.query(
domModule, (n) => n === refStyle, dom5.childNodesIncludeTemplate)) {
refStyle = undefined;
}
// keep ordering if previding with a reference style
if (!refStyle) {
prepend(treeAdapters.default.getTemplateContent(template), style);
} else {
insertAfter(refStyle, style);
}
}示例3: _addSharedImportsToShell
_addSharedImportsToShell(bundles: Map<string, string[]>): string {
console.assert(this.shell != null);
let shellDeps = bundles.get(this.shell)
.map((d) => path.relative(path.dirname(this.shell), d));
let file = this.analyzer.files.get(this.shell);
console.assert(file != null);
let contents = file.contents.toString();
let doc = dom5.parse(contents);
let imports = dom5.queryAll(doc, dom5.predicates.AND(
dom5.predicates.hasTagName('link'),
dom5.predicates.hasAttrValue('rel', 'import')
));
// Remove all imports that are in the shared deps list so that we prefer
// the ordering or shared deps. Any imports left should be independent of
// ordering of shared deps.
let shellDepsSet = new Set(shellDeps);
for (let _import of imports) {
if (shellDepsSet.has(dom5.getAttribute(_import, 'href'))) {
dom5.remove(_import);
}
}
// Append all shared imports to the end of <head>
let head = dom5.query(doc, dom5.predicates.hasTagName('head'));
for (let dep of shellDeps) {
let newImport = dom5.constructors.element('link');
dom5.setAttribute(newImport, 'rel', 'import');
dom5.setAttribute(newImport, 'href', dep);
dom5.append(head, newImport);
}
let newContents = dom5.serialize(doc);
return newContents;
}示例4: _addSharedImportsToShell
_addSharedImportsToShell(bundles: Map<string, string[]>): string {
console.assert(this.shell != null);
let shellUrl = urlFromPath(this.root, this.shell);
let shellUrlDir = posixPath.dirname(shellUrl);
let shellDeps = bundles.get(shellUrl)
.map((d) => posixPath.relative(shellUrlDir, d));
logger.debug('found shell dependencies', {
shellUrl: shellUrl,
shellUrlDir: shellUrlDir,
shellDeps: shellDeps,
});
let file = this.analyzer.getFile(this.shell);
console.assert(file != null);
let contents = file.contents.toString();
let doc = dom5.parse(contents);
let imports = dom5.queryAll(doc, dom5.predicates.AND(
dom5.predicates.hasTagName('link'),
dom5.predicates.hasAttrValue('rel', 'import')
));
logger.debug('found html import elements', {
imports: imports.map((el) => dom5.getAttribute(el, 'href')),
});
// Remove all imports that are in the shared deps list so that we prefer
// the ordering or shared deps. Any imports left should be independent of
// ordering of shared deps.
let shellDepsSet = new Set(shellDeps);
for (let _import of imports) {
let importHref = dom5.getAttribute(_import, 'href');
if (shellDepsSet.has(importHref)) {
logger.debug(`removing duplicate import element "${importHref}"...`);
dom5.remove(_import);
}
}
// Append all shared imports to the end of <head>
let head = dom5.query(doc, dom5.predicates.hasTagName('head'));
for (let dep of shellDeps) {
let newImport = dom5.constructors.element('link');
dom5.setAttribute(newImport, 'rel', 'import');
dom5.setAttribute(newImport, 'href', dep);
dom5.append(head, newImport);
}
let newContents = dom5.serialize(doc);
return newContents;
}示例5: pullUpDeps
pullUpDeps(
file: File,
deps: string[],
type: 'import' | 'prefetch'
) {
let contents = file.contents.toString();
let ast = dom5.parse(contents);
let head = dom5.query(ast, dom5.predicates.hasTagName('head'));
for (let dep of deps) {
if (dep.startsWith(this.root)) {
dep = path.relative(file.dirname, dep);
}
// prefetched deps should be absolute, as they will be in the main file
if (type === 'prefetch') {
dep = path.join('/', dep);
}
let link = dom5.constructors.element('link');
dom5.setAttribute(link, 'rel', type);
dom5.setAttribute(link, 'href', dep);
dom5.append(head, link);
}
contents = dom5.serialize(ast);
file.contents = new Buffer(contents);
}示例6: _inlineStylesheet
/**
* Inlines the contents of the stylesheet returned by the link tag's href
* URL into a style tag and removes the link tag.
*/
private async _inlineStylesheet(cssLink: ASTNode) {
const stylesheetHref = dom5.getAttribute(cssLink, 'href')!;
const resolvedImportUrl = this.bundler.analyzer.urlResolver.resolve(
this.assignedBundle.url, stylesheetHref as FileRelativeUrl);
if (resolvedImportUrl === undefined) {
return;
}
if (this.bundler.excludes.some(
(e) => resolvedImportUrl === e ||
resolvedImportUrl.startsWith(ensureTrailingSlash(e)))) {
return;
}
const stylesheetImport = // HACK(usergenic): clang-format workaround
find(
this.document.getFeatures(
{kind: 'html-style', imported: true, externalPackages: true}),
(i) => i.document !== undefined &&
i.document.url === resolvedImportUrl) ||
find(
this.document.getFeatures(
{kind: 'css-import', imported: true, externalPackages: true}),
(i) => i.document !== undefined &&
i.document.url === resolvedImportUrl);
if (stylesheetImport === undefined ||
stylesheetImport.document === undefined) {
this.assignedBundle.bundle.missingImports.add(resolvedImportUrl);
return;
}
const stylesheetContent = stylesheetImport.document.parsedDocument.contents;
const media = dom5.getAttribute(cssLink, 'media');
let newBaseUrl = this.assignedBundle.url;
// If the css link we are about to inline is inside of a dom-module, the
// new base URL must be calculated using the assetpath of the dom-module
// if present, since Polymer will honor assetpath when resolving URLs in
// `<style>` tags, even inside of `<template>` tags.
const parentDomModule =
findAncestor(cssLink, dom5.predicates.hasTagName('dom-module'));
if (!this.bundler.rewriteUrlsInTemplates && parentDomModule &&
dom5.hasAttribute(parentDomModule, 'assetpath')) {
const assetPath = (dom5.getAttribute(parentDomModule, 'assetpath') ||
'') as FileRelativeUrl;
if (assetPath) {
newBaseUrl =
this.bundler.analyzer.urlResolver.resolve(newBaseUrl, assetPath)!;
}
}
const resolvedStylesheetContent = this._rewriteCssTextBaseUrl(
stylesheetContent, resolvedImportUrl, newBaseUrl);
const styleNode = dom5.constructors.element('style');
if (media) {
dom5.setAttribute(styleNode, 'media', media);
}
dom5.replace(cssLink, styleNode);
dom5.setTextContent(styleNode, resolvedStylesheetContent);
// Record that the inlining took place.
this.assignedBundle.bundle.inlinedStyles.add(resolvedImportUrl);
return styleNode;
}示例7: _createHtmlImport
/**
* Append a `<link rel="import" ...>` node to `node` with a value of `url`
* for the "href" attribute.
*/
private _createHtmlImport(url: FileRelativeUrl|ResolvedUrl): ASTNode {
const link = dom5.constructors.element('link');
dom5.setAttribute(link, 'rel', 'import');
dom5.setAttribute(link, 'href', url);
return link;
}示例8: _createHiddenDiv
/**
* Creates a hidden container <div> to which inlined content will be
* appended.
*/
private _createHiddenDiv(): ASTNode {
const hidden = dom5.constructors.element('div');
dom5.setAttribute(hidden, 'hidden', '');
dom5.setAttribute(hidden, 'by-polymer-bundler', '');
return hidden;
}