{"id":26399,"library":"sling-framework","title":"Sling Framework","description":"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.","status":"maintenance","version":"1.12.5","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install sling-framework","lang":"bash","label":"npm"},{"cmd":"yarn add sling-framework","lang":"bash","label":"yarn"},{"cmd":"pnpm add sling-framework","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"SlingElement extends LitElement","package":"lit-element","optional":false},{"reason":"html is a re-export from lit-html","package":"lit-html","optional":false}],"imports":[{"note":"ESM only; package does not provide CommonJS exports.","wrong":"const SlingElement = require('sling-framework');","symbol":"SlingElement","correct":"import { SlingElement } from 'sling-framework'"},{"note":"html is a named export, not default.","wrong":"import html from 'sling-framework';","symbol":"html","correct":"import { html } from 'sling-framework'"},{"note":"Decorators are in a subpath; check imports from correct path.","wrong":"import { withRequest } from 'sling-framework';","symbol":"withRequest","correct":"import { withRequest } from 'sling-framework/decorators';"}],"quickstart":{"code":"import { SlingElement, html } from 'sling-framework';\n\nexport const StarRating = (Base = class {}) => class extends Base {\n  static get properties() {\n    return {\n      rate: {\n        type: Number,\n        reflectToAttribute: true,\n      },\n    };\n  }\n\n  render() {\n    return html`\n      <style>\n        button { color: grey; border: none; font-size: 32px; }\n        button.selected { color: gold; }\n      </style>\n      ${[1, 2, 3, 4, 5].map(index => html`\n        <button className=\"${index <= this.rate ? ' selected' : ''}\">★</button>\n      `)}\n    `;\n  }\n}\n\ncustomElements.define('star-rating', StarRating(SlingElement));","lang":"javascript","description":"Creates a star rating web component using SlingElement and html template literal."},"warnings":[{"fix":"Use correct import: import { withRequest } from 'sling-framework/decorators';","message":"Decorators like withRequest are exported from a subpath 'sling-framework/decorators', not from the main package.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider using lit-element v2.x or migrating to a newer solution like Lit.","message":"Sling Framework relies on deprecated lit-element v2.x. lit-element v3+ is not compatible.","severity":"deprecated","affected_versions":">=1.0.0 <2.0.0"},{"fix":"Install type definitions or use TypeScript with 'any'.","message":"Package does not include TypeScript type definitions. Users must manually install or use @types.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure lit-html v1.x is installed as a peer dependency.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Use import { withRequest } from 'sling-framework/decorators'; or check if decorators are exported from main entry.","cause":"Using an import path that doesn't exist. Decorators may be in a subpath.","error":"Module not found: Can't resolve 'sling-framework/decorators'"},{"fix":"Use import { html } from 'sling-framework'; (named export, not default).","cause":"Trying to import html as default export.","error":"TypeError: Cannot read properties of undefined (reading 'html')"},{"fix":"Install lit-html@^1.0.0 as a peer dependency.","cause":"Installed version of lit-html does not match peer dependency requirement.","error":"Error: lit-html version mismatch: expecting 1.x"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}