Socket
Socket
Sign inDemoInstall

@lit-labs/ssr-dom-shim

Package Overview
Dependencies
0
Maintainers
10
Versions
7
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @lit-labs/ssr-dom-shim

DOM shim for Lit Server Side Rendering (SSR)


Version published
Weekly downloads
1M
decreased by-19.21%
Maintainers
10
Install size
14.9 kB
Created
Weekly downloads
 

Package description

What is @lit-labs/ssr-dom-shim?

The @lit-labs/ssr-dom-shim package is designed to provide a server-side DOM shim for use with Lit components, enabling server-side rendering (SSR) of components that normally rely on browser-specific DOM APIs. This package helps in rendering web components on the server, making it easier to build isomorphic applications.

What are @lit-labs/ssr-dom-shim's main functionalities?

DOM Shim for Server-Side Rendering

This feature allows the rendering of Lit HTML templates on the server, using a DOM shim to emulate a browser-like environment. The code sample demonstrates how to render a simple Lit HTML template to a stream, which can then be sent as a response in a server environment.

import { ssr } from '@lit-labs/ssr';
import { html } from 'lit';
import { renderToStream } from '@lit-labs/ssr/lib/render-to-stream.js';

const template = html`<div>Hello, SSR!</div>`;
const resultStream = renderToStream(template);
resultStream.pipe(process.stdout);

Other packages similar to @lit-labs/ssr-dom-shim

Changelog

Source

@lit/reactive-element - 1.0.0

Major Changes

  • @lit/reactive-element is a new package that factors out the base class that provides the reactive update lifecycle based on property/attribute changes to LitElement (what was previously called UpdatingElement) into a separate package. LitElement now extends ReactiveElement to add lit-html rendering via the render() callback. See ReactiveElement API for more details.
  • UpdatingElement has been renamed to ReactiveElement.
  • The updating-element package has been renamed to @lit/reactive-element.
  • The @internalProperty decorator has been renamed to @state.
  • For consistency, renamed _getUpdateComplete to getUpdateComplete.
  • When a property declaration is reflect: true and its toAttribute function returns undefined the attribute is now removed where previously it was left unchanged (#872).
  • Errors that occur during the update cycle were previously squelched to allow subsequent updates to proceed normally. Now errors are re-fired asynchronously so they can be detected. Errors can be observed via an unhandledrejection event handler on window.
  • ReactiveElement's renderRoot is now created when the element's connectedCallback is initially run.
  • Removed requestUpdateInternal. The requestUpdate method is now identical to this method and should be used instead.
  • The initialize method has been removed. This work is now done in the element constructor.

Minor Changes

  • Adds static addInitializer for adding a function which is called with the element instance when is created. This can be used, for example, to create decorators which hook into element lifecycle by creating a reactive controller (#1663).
  • Added ability to add a controller to an element. A controller can implement callbacks that tie into element lifecycle, including connectedCallback, disconnectedCallback, willUpdate, update, and updated. To ensure it has access to the element lifecycle, a controller should be added in the element's constructor. To add a controller to the element, call addController(controller).
  • Added removeController(controller) which can be used to remove a controller from a ReactiveElement.
  • Added willUpdate(changedProperties) lifecycle method to UpdatingElement. This is called before the update method and can be used to compute derived state needed for updating. This method is intended to be called during server side rendering and should not manipulate element DOM.

Readme

Source

@lit-labs/ssr-dom-shim

Overview

This package provides minimal implementations of Element, HTMLElement, CustomElementRegistry, and customElements, designed to be used when Server Side Rendering (SSR) web components from Node, including Lit components.

Usage

Usage from Lit

Lit itself automatically imports these shims when running in Node, so Lit users should typically not need to directly depend on or import from this package.

See the lit.dev SSR docs for general information about server-side rendering with Lit.

Usage in other contexts

Other libraries or frameworks who wish to support SSR are welcome to also depend on these shims. (This package is planned to eventually move to @webcomponents/ssr-dom-shim to better reflect this use case). There are two main patterns for providing access to these shims to users:

  1. Assigning shims to globalThis, ensuring that assignment occurs before user-code runs.

  2. Importing shims directly from the module that provides your base class, using the node export condition to ensure this only happens when running in Node, and not in the browser.

Lit takes approach #2 for all of the shims except for customElements, so that users who have imported lit are able to call customElements.define in their components from Node.

Exports

The main module exports the following values. Note that no globals are set by this module.

Contributing

Please see CONTRIBUTING.md.

FAQs

Last updated on 09 Jan 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc