@lit-labs/ssr
Advanced tools
Comparing version 2.3.0 to 3.0.0
@@ -14,2 +14,3 @@ /** | ||
import fetch from 'node-fetch'; | ||
import { HTMLElement, Element, CustomElementRegistry, } from '@lit-labs/ssr-dom-shim'; | ||
/** | ||
@@ -26,49 +27,2 @@ * Constructs a fresh instance of the "window" vm context to use for evaluating | ||
export const getWindow = ({ includeJSBuiltIns = false, props = {}, }) => { | ||
const attributes = new WeakMap(); | ||
const attributesForElement = (element) => { | ||
let attrs = attributes.get(element); | ||
if (!attrs) { | ||
attributes.set(element, (attrs = new Map())); | ||
} | ||
return attrs; | ||
}; | ||
class Element { | ||
} | ||
class HTMLElement extends Element { | ||
constructor() { | ||
super(...arguments); | ||
this._shadowRoot = null; | ||
} | ||
get attributes() { | ||
return Array.from(attributesForElement(this)).map(([name, value]) => ({ | ||
name, | ||
value, | ||
})); | ||
} | ||
get shadowRoot() { | ||
return this._shadowRoot; | ||
} | ||
setAttribute(name, value) { | ||
// Emulate browser behavior that silently casts all values to string. E.g. | ||
// `42` becomes `"42"` and `{}` becomes `"[object Object]""`. | ||
attributesForElement(this).set(name, String(value)); | ||
} | ||
removeAttribute(name) { | ||
attributesForElement(this).delete(name); | ||
} | ||
hasAttribute(name) { | ||
return attributesForElement(this).has(name); | ||
} | ||
attachShadow(init) { | ||
const shadowRoot = { host: this }; | ||
if (init && init.mode === 'open') { | ||
this._shadowRoot = shadowRoot; | ||
} | ||
return shadowRoot; | ||
} | ||
getAttribute(name) { | ||
const value = attributesForElement(this).get(name); | ||
return value === undefined ? null : value; | ||
} | ||
} | ||
class ShadowRoot { | ||
@@ -93,17 +47,2 @@ } | ||
} | ||
class CustomElementRegistry { | ||
constructor() { | ||
this.__definitions = new Map(); | ||
} | ||
define(name, ctor) { | ||
this.__definitions.set(name, { | ||
ctor, | ||
observedAttributes: ctor.observedAttributes ?? [], | ||
}); | ||
} | ||
get(name) { | ||
const definition = this.__definitions.get(name); | ||
return definition && definition.ctor; | ||
} | ||
} | ||
const window = { | ||
@@ -136,3 +75,2 @@ Element, | ||
}; | ||
window.window = window; | ||
if (includeJSBuiltIns) { | ||
@@ -179,7 +117,4 @@ Object.assign(window, { | ||
Object.assign(globalThis, window); | ||
// Set up global reference to window so all globals added to window are | ||
// added to the node global | ||
globalThis.window = globalThis; | ||
} | ||
}; | ||
//# sourceMappingURL=dom-shim.js.map |
/// <reference lib="dom" /> | ||
import { RenderInfo } from './render-lit-html.js'; | ||
import type { RenderInfo } from './render-lit-html.js'; | ||
import type { RenderResult } from './render-result.js'; | ||
export declare type Constructor<T> = { | ||
@@ -66,7 +67,7 @@ new (): T; | ||
*/ | ||
abstract renderShadow(_renderInfo: RenderInfo): IterableIterator<string> | undefined; | ||
abstract renderShadow(_renderInfo: RenderInfo): RenderResult | undefined; | ||
/** | ||
* Render an element's light DOM children. | ||
*/ | ||
abstract renderLight(renderInfo: RenderInfo): IterableIterator<string>; | ||
abstract renderLight(renderInfo: RenderInfo): RenderResult | undefined; | ||
/** | ||
@@ -77,5 +78,5 @@ * Render an element's attributes. | ||
*/ | ||
renderAttributes(): IterableIterator<string>; | ||
renderAttributes(): RenderResult; | ||
} | ||
export {}; | ||
//# sourceMappingURL=element-renderer.d.ts.map |
@@ -9,2 +9,3 @@ /** | ||
import { RenderInfo } from './render-lit-html.js'; | ||
import type { RenderResult } from './render-result.js'; | ||
export declare type Constructor<T> = { | ||
@@ -23,5 +24,5 @@ new (): T; | ||
attributeChangedCallback(name: string, _old: string | null, value: string | null): void; | ||
renderShadow(renderInfo: RenderInfo): IterableIterator<string>; | ||
renderLight(renderInfo: RenderInfo): IterableIterator<string>; | ||
renderShadow(renderInfo: RenderInfo): RenderResult; | ||
renderLight(renderInfo: RenderInfo): RenderResult; | ||
} | ||
//# sourceMappingURL=lit-element-renderer.d.ts.map |
@@ -6,4 +6,11 @@ /** | ||
*/ | ||
import { URL } from 'url'; | ||
/** | ||
* Creates a new object that provides a basic set of globals suitable for use as | ||
* the default context object for a VM module. | ||
* | ||
* Note this does not return all default Node globals, rather it returns the | ||
* subset of Node globals which are also defined in browsers. | ||
*/ | ||
export declare function makeDefaultContextObject(): Partial<typeof globalThis>; | ||
/** | ||
* A subset of the Node vm.Module API. | ||
@@ -10,0 +17,0 @@ */ |
@@ -8,3 +8,3 @@ /** | ||
import { promises as fs } from 'fs'; | ||
import { URL, fileURLToPath, pathToFileURL } from 'url'; | ||
import { fileURLToPath, pathToFileURL } from 'url'; | ||
import * as vm from 'vm'; | ||
@@ -16,2 +16,85 @@ import enhancedResolve from 'enhanced-resolve'; | ||
/** | ||
* Creates a new object that provides a basic set of globals suitable for use as | ||
* the default context object for a VM module. | ||
* | ||
* Note this does not return all default Node globals, rather it returns the | ||
* subset of Node globals which are also defined in browsers. | ||
*/ | ||
export function makeDefaultContextObject() { | ||
// Everything at or below Node 14 can be always assumed present, since that's | ||
// the lowest version we support. | ||
// | ||
// Note we create new objects for things like console and performance so that | ||
// VM contexts can't override the parent context implementations. | ||
const ctx = { | ||
// Node 0.10.0+ | ||
setTimeout, | ||
setInterval, | ||
clearTimeout, | ||
clearInterval, | ||
console: { | ||
assert: (...args) => console.assert(...args), | ||
clear: (...args) => console.clear(...args), | ||
count: (...args) => console.count(...args), | ||
countReset: (...args) => console.countReset(...args), | ||
debug: (...args) => console.debug(...args), | ||
dir: (...args) => console.dir(...args), | ||
dirxml: (...args) => console.dirxml(...args), | ||
error: (...args) => console.error(...args), | ||
group: (...args) => console.group(...args), | ||
groupCollapsed: (...args) => console.groupCollapsed(...args), | ||
groupEnd: (...args) => console.groupEnd(...args), | ||
info: (...args) => console.info(...args), | ||
log: (...args) => console.log(...args), | ||
profile: (...args) => console.profile(...args), | ||
profileEnd: (...args) => console.profileEnd(...args), | ||
table: (...args) => console.table(...args), | ||
time: (...args) => console.time(...args), | ||
timeEnd: (...args) => console.timeEnd(...args), | ||
timeLog: (...args) => console.timeLog(...args), | ||
timeStamp: (...args) => console.timeStamp(...args), | ||
trace: (...args) => console.trace(...args), | ||
warn: (...args) => console.warn(...args), | ||
}, | ||
// Node 8.5.0+ | ||
performance: { | ||
clearMarks: (...args) => performance.clearMarks(...args), | ||
clearMeasures: (...args) => performance.clearMeasures(...args), | ||
clearResourceTimings: (...args) => performance.clearResourceTimings(...args), | ||
getEntries: (...args) => performance.getEntries(...args), | ||
getEntriesByName: (...args) => performance.getEntriesByName(...args), | ||
getEntriesByType: (...args) => performance.getEntriesByType(...args), | ||
mark: (...args) => performance.mark(...args), | ||
measure: (...args) => performance.measure(...args), | ||
now: (...args) => performance.now(...args), | ||
setResourceTimingBufferSize: (...args) => performance.setResourceTimingBufferSize(...args), | ||
get timeOrigin() { | ||
return performance.timeOrigin; | ||
}, | ||
}, | ||
// Node 10+ | ||
URL, | ||
URLSearchParams, | ||
// Node 11+ | ||
queueMicrotask, | ||
}; | ||
// Everything above Node 14 should be set conditionally. | ||
// Node 16+ | ||
if (globalThis.atob !== undefined) { | ||
ctx.atob = atob; | ||
} | ||
if (globalThis.btoa !== undefined) { | ||
ctx.btoa = btoa; | ||
} | ||
// Node 17+ | ||
if (globalThis.structuredClone !== undefined) { | ||
ctx.structuredClone = structuredClone; | ||
} | ||
// Node 18+ | ||
if (globalThis.fetch !== undefined) { | ||
ctx.fetch = fetch; | ||
} | ||
return ctx; | ||
} | ||
/** | ||
* A JavaScript module loader that utilizes the Node `vm` module | ||
@@ -63,3 +146,3 @@ * (https://nodejs.org/api/vm.html). | ||
}; | ||
this._context = vm.createContext(options?.global); | ||
this._context = vm.createContext(options?.global ?? makeDefaultContextObject()); | ||
} | ||
@@ -66,0 +149,0 @@ /** |
/// <reference lib="dom" /> | ||
import { ElementRenderer, ElementRendererConstructor } from './element-renderer.js'; | ||
import type { RenderResult } from './render-result.js'; | ||
export type { RenderResult } from './render-result.js'; | ||
declare module 'parse5/dist/tree-adapters/default.js' { | ||
@@ -50,3 +52,3 @@ interface Element { | ||
*/ | ||
export declare function render(value: unknown, renderInfo?: Partial<RenderInfo>): IterableIterator<string>; | ||
export declare function render(value: unknown, renderInfo?: Partial<RenderInfo>): RenderResult; | ||
//# sourceMappingURL=render-lit-html.d.ts.map |
@@ -347,3 +347,6 @@ /// <reference lib="dom" /> | ||
if (instance !== undefined) { | ||
yield* instance.renderLight(renderInfo); | ||
const renderLightResult = instance.renderLight(renderInfo); | ||
if (renderLightResult !== undefined) { | ||
yield* renderLightResult; | ||
} | ||
} | ||
@@ -350,0 +353,0 @@ value = null; |
{ | ||
"name": "@lit-labs/ssr", | ||
"type": "module", | ||
"version": "2.3.0", | ||
"version": "3.0.0", | ||
"publishConfig": { | ||
@@ -17,4 +17,6 @@ "access": "public" | ||
"test:integration": "wireit", | ||
"test:integration:dev": "wireit", | ||
"test:integration:prod": "wireit", | ||
"test:integration:shimmed:dev": "wireit", | ||
"test:integration:unshimmed:dev": "wireit", | ||
"test:integration:shimmed:prod": "wireit", | ||
"test:integration:unshimmed:prod": "wireit", | ||
"test:unit": "wireit" | ||
@@ -35,2 +37,3 @@ }, | ||
"../ssr-client:build:ts:types", | ||
"../ssr-dom-shim:build:ts", | ||
"../../lit:build:ts:types", | ||
@@ -58,4 +61,4 @@ "../../lit-html:build:ts:types", | ||
], | ||
"files": [], | ||
"output": [] | ||
"service": true, | ||
"files": [] | ||
}, | ||
@@ -67,4 +70,4 @@ "demo:global": { | ||
], | ||
"files": [], | ||
"output": [] | ||
"service": true, | ||
"files": [] | ||
}, | ||
@@ -78,3 +81,3 @@ "test": { | ||
"test:unit": { | ||
"command": "node --experimental-vm-modules ./test/all-tests.js", | ||
"command": "NODE_OPTIONS=--experimental-vm-modules uvu test \"lib/.*_test\\.js$\"", | ||
"#comment": [ | ||
@@ -92,8 +95,17 @@ "These unit tests use the default export condition, so they require a", | ||
"dependencies": [ | ||
"test:integration:dev", | ||
"test:integration:prod" | ||
"test:integration:shimmed:dev", | ||
"test:integration:shimmed:prod", | ||
"test:integration:unshimmed:dev", | ||
"test:integration:unshimmed:prod" | ||
] | ||
}, | ||
"test:integration:dev": { | ||
"command": "MODE=dev NODE_OPTIONS=--experimental-vm-modules node ../../tests/run-web-tests.js", | ||
"test:integration:shimmed:dev": { | ||
"command": "node ../../tests/run-web-tests.js test/integration/client/**/*-shimmed_test.js", | ||
"env": { | ||
"MODE": "dev", | ||
"NODE_OPTIONS": "--experimental-vm-modules", | ||
"BROWSERS": { | ||
"external": true | ||
} | ||
}, | ||
"#comment": [ | ||
@@ -113,4 +125,8 @@ "TODO(aomarks) It seems like this should only depend on build:ts", | ||
}, | ||
"test:integration:prod": { | ||
"command": "MODE=prod NODE_OPTIONS=--experimental-vm-modules node ../../tests/run-web-tests.js", | ||
"test:integration:shimmed:prod": { | ||
"command": "node ../../tests/run-web-tests.js test/integration/client/**/*-shimmed_test.js", | ||
"env": { | ||
"MODE": "prod", | ||
"NODE_OPTIONS": "--experimental-vm-modules" | ||
}, | ||
"dependencies": [ | ||
@@ -125,2 +141,37 @@ "build", | ||
"output": [] | ||
}, | ||
"test:integration:unshimmed:dev": { | ||
"command": "node ../../tests/run-web-tests.js test/integration/client/**/*-unshimmed_test.js", | ||
"env": { | ||
"MODE": "dev", | ||
"NODE_OPTIONS": "--experimental-vm-modules" | ||
}, | ||
"dependencies": [ | ||
"build", | ||
"../../tests:build" | ||
], | ||
"files": [ | ||
"web-test-runner.config.js", | ||
"../../tests/web-test-runner.config.js" | ||
], | ||
"output": [] | ||
}, | ||
"test:integration:unshimmed:prod": { | ||
"command": "node ../../tests/run-web-tests.js test/integration/client/**/*-unshimmed_test.js", | ||
"env": { | ||
"MODE": "prod", | ||
"NODE_OPTIONS": "--experimental-vm-modules", | ||
"BROWSERS": { | ||
"external": true | ||
} | ||
}, | ||
"dependencies": [ | ||
"build", | ||
"../../tests:build" | ||
], | ||
"files": [ | ||
"web-test-runner.config.js", | ||
"../../tests/web-test-runner.config.js" | ||
], | ||
"output": [] | ||
} | ||
@@ -147,2 +198,3 @@ }, | ||
"@types/koa-cors": "*", | ||
"@types/koa-mount": "^4.0.2", | ||
"@types/koa-static": "^4.0.1", | ||
@@ -156,2 +208,3 @@ "@types/parse5": "^6.0.1", | ||
"koa-cors": "^0.0.16", | ||
"koa-mount": "^4.0.0", | ||
"koa-node-resolve": "^1.0.0-pre.5", | ||
@@ -162,9 +215,10 @@ "koa-static": "^5.0.0" | ||
"@lit-labs/ssr-client": "^1.0.0", | ||
"@lit/reactive-element": "^1.5.0", | ||
"@lit-labs/ssr-dom-shim": "^1.0.0", | ||
"@lit/reactive-element": "^1.6.0", | ||
"@parse5/tools": "^0.1.0", | ||
"@types/node": "^16.0.0", | ||
"enhanced-resolve": "^5.10.0", | ||
"lit": "^2.5.0", | ||
"lit": "^2.6.0", | ||
"lit-element": "^3.1.0", | ||
"lit-html": "^2.5.0", | ||
"lit-html": "^2.6.0", | ||
"node-fetch": "^3.2.8", | ||
@@ -171,0 +225,0 @@ "parse5": "^7.1.1" |
@@ -13,3 +13,8 @@ # @lit-labs/ssr | ||
The easiest way to get started is to import your Lit template modules (and any `LitElement` definitions they may use) into the node global scope and render them to a stream (or string) using the `render(value: unknown): Iterable<string>` function provided by the `render-with-global-dom-shim.js` module. Since Lit-authored code may rely on DOM globals, the `render-with-global-dom-shim.js` module will install a minimal DOM shim into the Node.js global scope, which should be sufficient for typical use cases. As such, `render-with-global-dom-shim.js` should be imported before any modules containing Lit code. | ||
The easiest way to get started is to import your Lit template modules (and any | ||
`LitElement` definitions they may use) into the node global scope and render | ||
them to a stream (or string) using the `render(value: unknown): Iterable<string>` function provided by the `render-lit-html.js` module. When | ||
running in Node, Lit automatically depends on Node-compatible implementations of | ||
a minimal set of DOM APIs provided by the `@lit-labs/ssr-dom-shim` package, | ||
including defining `customElements` on the global object. | ||
@@ -19,3 +24,3 @@ ```js | ||
import {render} from '@lit-labs/ssr/lib/render-with-global-dom-shim.js'; | ||
import {render} from '@lit-labs/ssr/lib/render-lit-html.js'; | ||
import {myTemplate} from './my-template.js'; | ||
@@ -98,3 +103,3 @@ | ||
```js | ||
import {render} from '@lit-labs/ssr/lib/render-with-global-dom-shim.js'; | ||
import {render} from '@lit-labs/ssr/lib/render-lit-html.js'; | ||
import './app-components.js'; | ||
@@ -101,0 +106,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
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
210936
59
1954
153
11
19
2
Updated@lit/reactive-element@^1.6.0
Updatedlit@^2.6.0
Updatedlit-html@^2.6.0