Sling Framework

1.12.5 verified Fri May 01 auth: no javascript maintenance

A web component library built on top of LitElement and lit-html, providing building blocks for creating Sling-based web components. Current stable version is 1.12.5. It offers SlingElement (extended from LitElement), html tagged template literal, withRequest decorator for API handling, and withSetState for state management. Key differentiators include direct integration with Sling ecosystem and added decorators for common patterns. Release cadence is sporadic with no recent updates.

Common errors

error Module not found: Can't resolve 'sling-framework/decorators' ↓

cause Using an import path that doesn't exist. Decorators may be in a subpath.

fix

Use import { withRequest } from 'sling-framework/decorators'; or check if decorators are exported from main entry.

error TypeError: Cannot read properties of undefined (reading 'html') ↓

cause Trying to import html as default export.

fix

Use import { html } from 'sling-framework'; (named export, not default).

error Error: lit-html version mismatch: expecting 1.x ↓

cause Installed version of lit-html does not match peer dependency requirement.

fix

Install lit-html@^1.0.0 as a peer dependency.

Warnings

gotcha Decorators like withRequest are exported from a subpath 'sling-framework/decorators', not from the main package. ↓

fix Use correct import: import { withRequest } from 'sling-framework/decorators';

deprecated Sling Framework relies on deprecated lit-element v2.x. lit-element v3+ is not compatible. ↓

fix Consider using lit-element v2.x or migrating to a newer solution like Lit.

gotcha Package does not include TypeScript type definitions. Users must manually install or use @types. ↓

fix Install type definitions or use TypeScript with 'any'.

gotcha html tagged template literal is re-exported from lit-html v1.x, but lit-html v2+ uses a different API. Mismatched versions cause runtime errors. ↓

fix Ensure lit-html v1.x is installed as a peer dependency.

Install

npm install sling-framework

yarn add sling-framework

pnpm add sling-framework

Imports

SlingElement

wrong

const SlingElement = require('sling-framework');

correct

import { SlingElement } from 'sling-framework'

ESM only; package does not provide CommonJS exports.

html

wrong

import html from 'sling-framework';

correct

import { html } from 'sling-framework'

html is a named export, not default.

withRequest

wrong

import { withRequest } from 'sling-framework';

correct

import { withRequest } from 'sling-framework/decorators';

Decorators are in a subpath; check imports from correct path.

Quickstart

Creates a star rating web component using SlingElement and html template literal.

import { SlingElement, html } from 'sling-framework';

export const StarRating = (Base = class {}) => class extends Base {
  static get properties() {
    return {
      rate: {
        type: Number,
        reflectToAttribute: true,
      },
    };
  }

  render() {
    return html`
      <style>
        button { color: grey; border: none; font-size: 32px; }
        button.selected { color: gold; }
      </style>
      ${[1, 2, 3, 4, 5].map(index => html`
        <button className="${index <= this.rate ? ' selected' : ''}">★</button>
      `)}
    `;
  }
}

customElements.define('star-rating', StarRating(SlingElement));