Registry / web-framework / sling-framework

sling-framework

library1.12.5jsnpmunverified

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.

web-framework

npm install sling-framework

package ↗

INSTALL

IMPORT

SIG · SLING-FRAMEWORK

sling-framework

web-frameworkjavascriptv1.12.5

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

SlingElement

✓ import { SlingElement } from 'sling-framework'

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

ESM only; package does not provide CommonJS exports.

html

✓ import { html } from 'sling-framework'

✗ import html from 'sling-framework';

html is a named export, not default.

withRequest

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

✗ import { withRequest } from 'sling-framework';

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

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));

Debug

Known issues

gotchaDecorators 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';

affects: >=1.0.0

deprecatedSling 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.

affects: >=1.0.0 <2.0.0

gotchaPackage does not include TypeScript type definitions. Users must manually install or use @types.

fix

Install type definitions or use TypeScript with 'any'.

affects: >=1.0.0

gotchahtml 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.

affects: >=1.0.0

Errors

Common errors & fixes

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

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.

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

Trying to import html as default export.

fix

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

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

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

fix

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

Upgrade

Version history

1.12.5latest on npm

Audit

Dependencies

lit-elementrequiredSlingElement extends LitElement

lit-htmlrequiredhtml is a re-export from lit-html

Agent activity

2 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/sling-framework ↗