lit-html
Advanced tools
Comparing version 1.1.0 to 1.1.1
@@ -19,5 +19,10 @@ # Change Log | ||
## [1.0.1] - 2019-05-20 | ||
## [1.1.1] - 2019-07-09 | ||
### Changed | ||
* `render` and `shady-render` now both accept any value that is renderable by `NodePart`. ([#910](https://github.com/Polymer/lit-html/issues/910)) | ||
## [1.1.0] - 2019-05-20 | ||
### Changed | ||
* Many small performance enhancements. | ||
@@ -24,0 +29,0 @@ * Private names are now named with a `__` prefix ([#859](https://github.com/Polymer/lit-html/issues/859)). |
@@ -32,3 +32,3 @@ /** | ||
*/ | ||
export declare const asyncAppend: (value: AsyncIterable<{}>, mapper?: ((v: {}, index?: number | undefined) => unknown) | undefined) => (part: Part) => Promise<void>; | ||
export declare const asyncAppend: (value: AsyncIterable<unknown>, mapper?: ((v: unknown, index?: number | undefined) => unknown) | undefined) => (part: Part) => Promise<void>; | ||
//# sourceMappingURL=async-append.d.ts.map |
@@ -33,3 +33,3 @@ /** | ||
*/ | ||
export declare const asyncReplace: (value: AsyncIterable<{}>, mapper?: ((v: {}, index?: number | undefined) => unknown) | undefined) => (part: Part) => Promise<void>; | ||
export declare const asyncReplace: (value: AsyncIterable<unknown>, mapper?: ((v: unknown, index?: number | undefined) => unknown) | undefined) => (part: Part) => Promise<void>; | ||
//# sourceMappingURL=async-replace.d.ts.map |
@@ -217,2 +217,5 @@ /** | ||
value = value == null ? '' : value; | ||
// If `value` isn't already a string, we explicitly convert it here in case | ||
// it can't be implicitly converted - i.e. it's a symbol. | ||
const valueAsString = typeof value === 'string' ? value : String(value); | ||
if (node === this.endNode.previousSibling && | ||
@@ -223,6 +226,6 @@ node.nodeType === 3 /* Node.TEXT_NODE */) { | ||
// TODO(justinfagnani): Can we just check if this.value is primitive? | ||
node.data = value; | ||
node.data = valueAsString; | ||
} | ||
else { | ||
this.__commitNode(document.createTextNode(typeof value === 'string' ? value : String(value))); | ||
this.__commitNode(document.createTextNode(valueAsString)); | ||
} | ||
@@ -229,0 +232,0 @@ this.value = value; |
@@ -16,6 +16,5 @@ /** | ||
import { RenderOptions } from './render-options.js'; | ||
import { TemplateResult } from './template-result.js'; | ||
export declare const parts: WeakMap<Node, NodePart>; | ||
/** | ||
* Renders a template to a container. | ||
* Renders a template result or other value to a container. | ||
* | ||
@@ -25,4 +24,4 @@ * To update a container with new values, reevaluate the template literal and | ||
* | ||
* @param result a TemplateResult created by evaluating a template tag like | ||
* `html` or `svg`. | ||
* @param result Any value renderable by NodePart - typically a TemplateResult | ||
* created by evaluating a template tag like `html` or `svg`. | ||
* @param container A DOM parent to render to. The entire contents are either | ||
@@ -35,3 +34,3 @@ * replaced, or efficiently updated if the same result type was previous | ||
*/ | ||
export declare const render: (result: TemplateResult, container: Element | DocumentFragment, options?: Partial<RenderOptions> | undefined) => void; | ||
export declare const render: (result: unknown, container: Element | DocumentFragment, options?: Partial<RenderOptions> | undefined) => void; | ||
//# sourceMappingURL=render.d.ts.map |
@@ -22,3 +22,3 @@ /** | ||
/** | ||
* Renders a template to a container. | ||
* Renders a template result or other value to a container. | ||
* | ||
@@ -28,4 +28,4 @@ * To update a container with new values, reevaluate the template literal and | ||
* | ||
* @param result a TemplateResult created by evaluating a template tag like | ||
* `html` or `svg`. | ||
* @param result Any value renderable by NodePart - typically a TemplateResult | ||
* created by evaluating a template tag like `html` or `svg`. | ||
* @param container A DOM parent to render to. The entire contents are either | ||
@@ -32,0 +32,0 @@ * replaced, or efficiently updated if the same result type was previous |
@@ -15,3 +15,2 @@ /** | ||
import { RenderOptions } from './render-options.js'; | ||
import { TemplateResult } from './template-result.js'; | ||
export { html, svg, TemplateResult } from '../lit-html.js'; | ||
@@ -77,3 +76,3 @@ export interface ShadyRenderOptions extends Partial<RenderOptions> { | ||
*/ | ||
export declare const render: (result: TemplateResult, container: Element | DocumentFragment | ShadowRoot, options: ShadyRenderOptions) => void; | ||
export declare const render: (result: unknown, container: Element | DocumentFragment | ShadowRoot, options: ShadyRenderOptions) => void; | ||
//# sourceMappingURL=shady-render.d.ts.map |
@@ -30,3 +30,2 @@ /** | ||
import { TemplateInstance } from './template-instance.js'; | ||
import { TemplateResult } from './template-result.js'; | ||
import { marker, Template } from './template.js'; | ||
@@ -112,4 +111,8 @@ export { html, svg, TemplateResult } from '../lit-html.js'; | ||
*/ | ||
const prepareTemplateStyles = (renderedDOM, template, scopeName) => { | ||
const prepareTemplateStyles = (scopeName, renderedDOM, template) => { | ||
shadyRenderSet.add(scopeName); | ||
// If `renderedDOM` is stamped from a Template, then we need to edit that | ||
// Template's underlying template element. Otherwise, we create one here | ||
// to give to ShadyCSS, which still requires one while scoping. | ||
const templateElement = !!template ? template.element : document.createElement('template'); | ||
// Move styles out of rendered DOM and store. | ||
@@ -123,3 +126,10 @@ const styles = renderedDOM.querySelectorAll('style'); | ||
// `prepareTemplateStyles` is called. | ||
window.ShadyCSS.prepareTemplateStyles(template.element, scopeName); | ||
// | ||
// ShadyCSS will only update styles containing @apply in the template | ||
// given to `prepareTemplateStyles`. If no lit Template was given, | ||
// ShadyCSS will not be able to update uses of @apply in any relevant | ||
// template. However, this is not a problem because we only create the | ||
// template for the purpose of supporting `prepareAdoptedCssText`, | ||
// which doesn't support @apply at all. | ||
window.ShadyCSS.prepareTemplateStyles(templateElement, scopeName); | ||
return; | ||
@@ -142,8 +152,13 @@ } | ||
// `template`. | ||
const content = template.element.content; | ||
insertNodeIntoTemplate(template, condensedStyle, content.firstChild); | ||
const content = templateElement.content; | ||
if (!!template) { | ||
insertNodeIntoTemplate(template, condensedStyle, content.firstChild); | ||
} | ||
else { | ||
content.insertBefore(condensedStyle, content.firstChild); | ||
} | ||
// Note, it's important that ShadyCSS gets the template that `lit-html` | ||
// will actually render so that it can update the style inside when | ||
// needed (e.g. @apply native Shadow DOM case). | ||
window.ShadyCSS.prepareTemplateStyles(template.element, scopeName); | ||
window.ShadyCSS.prepareTemplateStyles(templateElement, scopeName); | ||
const style = content.querySelector('style'); | ||
@@ -155,3 +170,3 @@ if (window.ShadyCSS.nativeShadow && style !== null) { | ||
} | ||
else { | ||
else if (!!template) { | ||
// When no style is left in the template, parts will be broken as a | ||
@@ -228,2 +243,5 @@ // result. To fix this, we put back the style node ShadyCSS removed | ||
export const render = (result, container, options) => { | ||
if (!options || typeof options !== 'object' || !options.scopeName) { | ||
throw new Error('The `scopeName` option is required.'); | ||
} | ||
const scopeName = options.scopeName; | ||
@@ -233,3 +251,3 @@ const hasRendered = parts.has(container); | ||
container.nodeType === 11 /* Node.DOCUMENT_FRAGMENT_NODE */ && | ||
!!container.host && result instanceof TemplateResult; | ||
!!container.host; | ||
// Handle first render to a scope specially... | ||
@@ -253,5 +271,11 @@ const firstScopeRender = needsScoping && !shadyRenderSet.has(scopeName); | ||
parts.delete(renderContainer); | ||
if (part.value instanceof TemplateInstance) { | ||
prepareTemplateStyles(renderContainer, part.value.template, scopeName); | ||
} | ||
// ShadyCSS might have style sheets (e.g. from `prepareAdoptedCssText`) | ||
// that should apply to `renderContainer` even if the rendered value is | ||
// not a TemplateInstance. However, it will only insert scoped styles | ||
// into the document if `prepareTemplateStyles` has already been called | ||
// for the given scope name. | ||
const template = part.value instanceof TemplateInstance ? | ||
part.value.template : | ||
undefined; | ||
prepareTemplateStyles(scopeName, renderContainer, template); | ||
removeNodes(container, container.firstChild); | ||
@@ -265,3 +289,3 @@ container.appendChild(renderContainer); | ||
// safest to do every render; however, this would regress performance | ||
// so we leave it up to the user to call `ShadyCSSS.styleElement` | ||
// so we leave it up to the user to call `ShadyCSS.styleElement` | ||
// for dynamic changes. | ||
@@ -268,0 +292,0 @@ if (!hasRendered && needsScoping) { |
@@ -47,3 +47,3 @@ /** | ||
// TODO(justinfagnani): inject version number at build time | ||
(window['litHtmlVersions'] || (window['litHtmlVersions'] = [])).push('1.0.0'); | ||
(window['litHtmlVersions'] || (window['litHtmlVersions'] = [])).push('1.1.1'); | ||
/** | ||
@@ -50,0 +50,0 @@ * Interprets a template literal as an HTML template that can efficiently |
{ | ||
"name": "lit-html", | ||
"version": "1.1.0", | ||
"version": "1.1.1", | ||
"description": "HTML template literals in JavaScript", | ||
@@ -31,2 +31,3 @@ "license": "BSD-3-Clause", | ||
"lint": "tslint --project ./", | ||
"prepublishOnly": "node check-version-tracker.js && npm run lint && npm test", | ||
"prepare": "npm run build", | ||
@@ -39,7 +40,7 @@ "publish-dev": "npm test && VERSION=${npm_package_version%-*}-dev.`git rev-parse --short HEAD` && npm version --no-git-tag-version $VERSION && npm publish --tag dev" | ||
"@types/mocha": "^5.2.0", | ||
"@webcomponents/shadycss": "^1.5.2", | ||
"@webcomponents/shadycss": "^1.8.0", | ||
"@webcomponents/webcomponentsjs": "^2.0.4", | ||
"chai": "^4.1.2", | ||
"clang-format": "^1.2.4", | ||
"lit-html-benchmarks": "^0.2.0", | ||
"lit-html-benchmarks": "^0.2.1", | ||
"mocha": "^5.2.0", | ||
@@ -49,3 +50,3 @@ "rollup": "^0.64.1", | ||
"rollup-plugin-terser": "^1.0.1", | ||
"tachometer": "^0.4.0", | ||
"tachometer": "^0.4.1", | ||
"tslint": "^5.11.0", | ||
@@ -52,0 +53,0 @@ "typescript": "^3.4.1", |
@@ -8,2 +8,6 @@ interface ShadyCSS { | ||
template: Element, elementName: string, typeExtension?: string): void; | ||
ScopingShim: undefined|{ | ||
prepareAdoptedCssText( | ||
cssTextArray: Array<string>, elementName: string): void; | ||
}; | ||
} | ||
@@ -10,0 +14,0 @@ |
@@ -248,2 +248,6 @@ /** | ||
value = value == null ? '' : value; | ||
// If `value` isn't already a string, we explicitly convert it here in case | ||
// it can't be implicitly converted - i.e. it's a symbol. | ||
const valueAsString: string = | ||
typeof value === 'string' ? value : String(value); | ||
if (node === this.endNode.previousSibling && | ||
@@ -254,6 +258,5 @@ node.nodeType === 3 /* Node.TEXT_NODE */) { | ||
// TODO(justinfagnani): Can we just check if this.value is primitive? | ||
(node as Text).data = value as string; | ||
(node as Text).data = valueAsString; | ||
} else { | ||
this.__commitNode(document.createTextNode( | ||
typeof value === 'string' ? value : String(value))); | ||
this.__commitNode(document.createTextNode(valueAsString)); | ||
} | ||
@@ -260,0 +263,0 @@ this.value = value; |
@@ -23,3 +23,2 @@ /** | ||
import {templateFactory} from './template-factory.js'; | ||
import {TemplateResult} from './template-result.js'; | ||
@@ -29,3 +28,3 @@ export const parts = new WeakMap<Node, NodePart>(); | ||
/** | ||
* Renders a template to a container. | ||
* Renders a template result or other value to a container. | ||
* | ||
@@ -35,4 +34,4 @@ * To update a container with new values, reevaluate the template literal and | ||
* | ||
* @param result a TemplateResult created by evaluating a template tag like | ||
* `html` or `svg`. | ||
* @param result Any value renderable by NodePart - typically a TemplateResult | ||
* created by evaluating a template tag like `html` or `svg`. | ||
* @param container A DOM parent to render to. The entire contents are either | ||
@@ -46,3 +45,3 @@ * replaced, or efficiently updated if the same result type was previous | ||
export const render = | ||
(result: TemplateResult, | ||
(result: unknown, | ||
container: Element|DocumentFragment, | ||
@@ -49,0 +48,0 @@ options?: Partial<RenderOptions>) => { |
@@ -128,4 +128,9 @@ /** | ||
const prepareTemplateStyles = | ||
(renderedDOM: DocumentFragment, template: Template, scopeName: string) => { | ||
(scopeName: string, renderedDOM: DocumentFragment, template?: Template) => { | ||
shadyRenderSet.add(scopeName); | ||
// If `renderedDOM` is stamped from a Template, then we need to edit that | ||
// Template's underlying template element. Otherwise, we create one here | ||
// to give to ShadyCSS, which still requires one while scoping. | ||
const templateElement = | ||
!!template ? template.element : document.createElement('template'); | ||
// Move styles out of rendered DOM and store. | ||
@@ -139,3 +144,10 @@ const styles = renderedDOM.querySelectorAll('style'); | ||
// `prepareTemplateStyles` is called. | ||
window.ShadyCSS!.prepareTemplateStyles(template.element, scopeName); | ||
// | ||
// ShadyCSS will only update styles containing @apply in the template | ||
// given to `prepareTemplateStyles`. If no lit Template was given, | ||
// ShadyCSS will not be able to update uses of @apply in any relevant | ||
// template. However, this is not a problem because we only create the | ||
// template for the purpose of supporting `prepareAdoptedCssText`, | ||
// which doesn't support @apply at all. | ||
window.ShadyCSS!.prepareTemplateStyles(templateElement, scopeName); | ||
return; | ||
@@ -158,8 +170,12 @@ } | ||
// `template`. | ||
const content = template.element.content; | ||
insertNodeIntoTemplate(template, condensedStyle, content.firstChild); | ||
const content = templateElement.content; | ||
if (!!template) { | ||
insertNodeIntoTemplate(template, condensedStyle, content.firstChild); | ||
} else { | ||
content.insertBefore(condensedStyle, content.firstChild); | ||
} | ||
// Note, it's important that ShadyCSS gets the template that `lit-html` | ||
// will actually render so that it can update the style inside when | ||
// needed (e.g. @apply native Shadow DOM case). | ||
window.ShadyCSS!.prepareTemplateStyles(template.element, scopeName); | ||
window.ShadyCSS!.prepareTemplateStyles(templateElement, scopeName); | ||
const style = content.querySelector('style'); | ||
@@ -170,3 +186,3 @@ if (window.ShadyCSS!.nativeShadow && style !== null) { | ||
renderedDOM.insertBefore(style.cloneNode(true), renderedDOM.firstChild); | ||
} else { | ||
} else if (!!template) { | ||
// When no style is left in the template, parts will be broken as a | ||
@@ -181,3 +197,3 @@ // result. To fix this, we put back the style node ShadyCSS removed | ||
content.insertBefore(condensedStyle, content.firstChild); | ||
const removes = new Set(); | ||
const removes = new Set<Node>(); | ||
removes.add(condensedStyle); | ||
@@ -249,5 +265,8 @@ removeNodesFromTemplate(template, removes); | ||
export const render = | ||
(result: TemplateResult, | ||
(result: unknown, | ||
container: Element|DocumentFragment|ShadowRoot, | ||
options: ShadyRenderOptions) => { | ||
if (!options || typeof options !== 'object' || !options.scopeName) { | ||
throw new Error('The `scopeName` option is required.'); | ||
} | ||
const scopeName = options.scopeName; | ||
@@ -257,3 +276,3 @@ const hasRendered = parts.has(container); | ||
container.nodeType === 11 /* Node.DOCUMENT_FRAGMENT_NODE */ && | ||
!!(container as ShadowRoot).host && result instanceof TemplateResult; | ||
!!(container as ShadowRoot).host; | ||
// Handle first render to a scope specially... | ||
@@ -282,8 +301,12 @@ const firstScopeRender = needsScoping && !shadyRenderSet.has(scopeName); | ||
parts.delete(renderContainer); | ||
if (part.value instanceof TemplateInstance) { | ||
prepareTemplateStyles( | ||
renderContainer as DocumentFragment, | ||
part.value.template, | ||
scopeName); | ||
} | ||
// ShadyCSS might have style sheets (e.g. from `prepareAdoptedCssText`) | ||
// that should apply to `renderContainer` even if the rendered value is | ||
// not a TemplateInstance. However, it will only insert scoped styles | ||
// into the document if `prepareTemplateStyles` has already been called | ||
// for the given scope name. | ||
const template = part.value instanceof TemplateInstance ? | ||
part.value.template : | ||
undefined; | ||
prepareTemplateStyles( | ||
scopeName, renderContainer as DocumentFragment, template); | ||
removeNodes(container, container.firstChild); | ||
@@ -297,3 +320,3 @@ container.appendChild(renderContainer); | ||
// safest to do every render; however, this would regress performance | ||
// so we leave it up to the user to call `ShadyCSSS.styleElement` | ||
// so we leave it up to the user to call `ShadyCSS.styleElement` | ||
// for dynamic changes. | ||
@@ -300,0 +323,0 @@ if (!hasRendered && needsScoping) { |
@@ -59,3 +59,3 @@ /** | ||
// TODO(justinfagnani): inject version number at build time | ||
(window['litHtmlVersions'] || (window['litHtmlVersions'] = [])).push('1.0.0'); | ||
(window['litHtmlVersions'] || (window['litHtmlVersions'] = [])).push('1.1.1'); | ||
@@ -62,0 +62,0 @@ /** |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
527972
7016