{"_id":"@arcmantle/lit-context","_rev":"4-93e2f0c1a0e99aa7a04e4dc9464dc2bb","name":"@arcmantle/lit-context","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@arcmantle/lit-context","version":"1.0.0","author":{"name":"Kristoffer Roen-Lie"},"license":"Apache-2.0","_id":"@arcmantle/lit-context@1.0.0","maintainers":[{"name":"roenlie","email":"kristofferroenlie@gmail.com"}],"dist":{"shasum":"6d7d3f544019bd9fa038a22ae6cf9e7a48d8f108","tarball":"https://registry.npmjs.org/@arcmantle/lit-context/-/lit-context-1.0.0.tgz","fileCount":23,"integrity":"sha512-nXJ75c6xOjuj5K47LNx+kjeZY+o6oODTE68Wp4Mkkp+qK37R0Y1tLVyBMLVaqg4C3U4bhoxzEvjq+jQRFSgegA==","signatures":[{"sig":"MEUCIE6Ori4VsYaXpe2+DOVypItXsGNhPSdBQzPIaRhNIN6LAiEA7kPRvby/4nXZLK8okt1fWWEi+zw0YCOkwtUZD/aeMLY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":38630},"main":"./dist/index.js","type":"module","_from":"file:arcmantle-lit-context-1.0.0.tgz","types":"./dist/index.d.ts","exports":{".":"./dist/index.js"},"scripts":{"dev":"pnpm vite --config ./demo/vite.config.ts","build":"pnpm run --sequential \"/^build::.*/\"","build::source":"tsc --project ./src/tsconfig.json","build::prepare":"rimraf dist"},"_npmUser":{"name":"roenlie","actor":{"name":"roenlie","type":"user","email":"kristofferroenlie@gmail.com"},"email":"kristofferroenlie@gmail.com"},"_resolved":"/tmp/324a7b2f62c92640e29e28ac67a85d92/arcmantle-lit-context-1.0.0.tgz","_integrity":"sha512-nXJ75c6xOjuj5K47LNx+kjeZY+o6oODTE68Wp4Mkkp+qK37R0Y1tLVyBMLVaqg4C3U4bhoxzEvjq+jQRFSgegA==","_npmVersion":"11.4.2","description":"Context provider and consumer for Lit Elements","directories":{},"sideEffects":false,"_nodeVersion":"24.3.0","dependencies":{"lit":"^3.3.0","tslib":"^2.8.1"},"_hasShrinkwrap":false,"devDependencies":{"rimraf":"^6.0.1","typescript":"^5.8.3","@types/node":"^24.0.10","@arcmantle/tsconfig":"^1.0.5"},"_npmOperationalInternal":{"tmp":"tmp/lit-context_1.0.0_1751755358227_0.5189032878961399","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@arcmantle/lit-context","version":"1.0.1","author":{"name":"Kristoffer Roen-Lie"},"license":"Apache-2.0","_id":"@arcmantle/lit-context@1.0.1","maintainers":[{"name":"roenlie","email":"kristofferroenlie@gmail.com"}],"dist":{"shasum":"748d64b79752ddcbdb77c912fcb6a4147efaf2ed","tarball":"https://registry.npmjs.org/@arcmantle/lit-context/-/lit-context-1.0.1.tgz","fileCount":23,"integrity":"sha512-JV6ifNmmQ6l9kOnK3B2r5wVz7c84qbXddDVNS41zqck99lnScXXYsnsX2SE7DNZIJgCOIhJqtN533K+Va6peNQ==","signatures":[{"sig":"MEUCIQCF/1fgiberKmmdSpOJrAkf4CYUhFKd9L/uvkKav2m9xwIgB3OD2+ysYXa8w5wBTqswooohV3TCY3Z8t5TVy8c/i28=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":38612},"main":"./dist/index.js","type":"module","_from":"file:arcmantle-lit-context-1.0.1.tgz","types":"./dist/index.d.ts","exports":{".":"./dist/index.js"},"scripts":{"dev":"pnpm vite --config ./demo/vite.config.ts","build":"pnpm run --sequential \"/^build::.*/\"","build::source":"tsc --project ./src/tsconfig.json","build::prepare":"rimraf dist"},"_npmUser":{"name":"roenlie","email":"kristofferroenlie@gmail.com"},"_resolved":"/tmp/c1f7fb66ab6bbcea67085186399d4e25/arcmantle-lit-context-1.0.1.tgz","_integrity":"sha512-JV6ifNmmQ6l9kOnK3B2r5wVz7c84qbXddDVNS41zqck99lnScXXYsnsX2SE7DNZIJgCOIhJqtN533K+Va6peNQ==","_npmVersion":"11.4.2","description":"Context provider and consumer for Lit Elements","directories":{},"sideEffects":false,"_nodeVersion":"24.4.1","dependencies":{"lit":"^3.3.0","tslib":"^2.8.1"},"_hasShrinkwrap":false,"devDependencies":{"rimraf":"^6.0.1","typescript":"^5.8.3","@types/node":"^24.0.14","@arcmantle/tsconfig":"^1.0.5"},"_npmOperationalInternal":{"tmp":"tmp/lit-context_1.0.1_1752757865107_0.37937041932189386","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@arcmantle/lit-context","version":"1.0.2","author":{"name":"Kristoffer Roen-Lie"},"license":"Apache-2.0","_id":"@arcmantle/lit-context@1.0.2","maintainers":[{"name":"roenlie","email":"kristofferroenlie@gmail.com"}],"homepage":"https://github.com/arcmantle/lit-context#readme","bugs":{"url":"https://github.com/arcmantle/lit-context/issues"},"dist":{"shasum":"ce8533d91ca116720e3ced497832997746d953d4","tarball":"https://registry.npmjs.org/@arcmantle/lit-context/-/lit-context-1.0.2.tgz","fileCount":23,"integrity":"sha512-/fGA1RVZGcLw7OXNjRMqPsc6HO6vXzla3RyK97FZCJ4oNeocjLdzc+B02hhPoqaNxqdMqS9vDauxGmBoQjwMZg==","signatures":[{"sig":"MEUCIGOE15I6NqZbsBPyTSgm6hQoCpNR9A50NgwI55zo0PvkAiEA1FHZGlYbbXN/BO2dnME0lTKlh29p5PFdTzJElnDWzkk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":38712},"main":"./dist/index.js","type":"module","_from":"file:arcmantle-lit-context-1.0.2.tgz","types":"./dist/index.d.ts","exports":{".":"./dist/index.js"},"scripts":{"dev":"pnpm vite --config ./demo/vite.config.ts","build":"pnpm run --sequential \"/^build::.*/\"","build::source":"tsc --project ./src/tsconfig.json","build::prepare":"rimraf dist"},"_npmUser":{"name":"roenlie","email":"kristofferroenlie@gmail.com"},"_resolved":"/tmp/955adb8fff8031f6d2640ece8c1834bf/arcmantle-lit-context-1.0.2.tgz","_integrity":"sha512-/fGA1RVZGcLw7OXNjRMqPsc6HO6vXzla3RyK97FZCJ4oNeocjLdzc+B02hhPoqaNxqdMqS9vDauxGmBoQjwMZg==","repository":{"url":"git+https://github.com/arcmantle/lit-context.git","type":"git"},"_npmVersion":"11.4.2","description":"Context provider and consumer for Lit Elements","directories":{},"sideEffects":false,"_nodeVersion":"24.4.1","dependencies":{"lit":"^3.3.0","tslib":"^2.8.1"},"_hasShrinkwrap":false,"devDependencies":{"rimraf":"^6.0.1","typescript":"^5.8.3","@types/node":"^24.0.14","@arcmantle/tsconfig":"^1.0.6"},"_npmOperationalInternal":{"tmp":"tmp/lit-context_1.0.2_1752781608468_0.449711914772714","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@arcmantle/lit-context","version":"1.0.3","description":"Context provider and consumer for Lit Elements","repository":{"type":"git","url":"git+https://github.com/arcmantle/lit-context.git"},"license":"Apache-2.0","author":{"name":"Kristoffer Roen-Lie"},"sideEffects":false,"type":"module","exports":{".":"./dist/index.js"},"main":"./dist/index.js","types":"./dist/index.d.ts","dependencies":{"lit":"^3.3.0","tslib":"^2.8.1"},"devDependencies":{"@arcmantle/tsconfig":"^1.0.8","@types/node":"^24.0.14","rimraf":"^6.0.1","typescript":"^5.8.3"},"scripts":{"build":"pnpm run --sequential \"/^build::.*/\"","build::prepare":"rimraf dist","build::source":"tsc --project ./src/tsconfig.json","dev":"pnpm vite --config ./demo/vite.config.ts"},"_id":"@arcmantle/lit-context@1.0.3","bugs":{"url":"https://github.com/arcmantle/lit-context/issues"},"homepage":"https://github.com/arcmantle/lit-context#readme","_integrity":"sha512-NKpFkhzkrjQU+1kKNDxDS4D5L95latyDYEo5b8GrL3LUedR+gMfi2xkQxa8oabaIxrt4z4ME4AkSvFlNeRp9ag==","_resolved":"/tmp/131a0581cc4d32b3e0a522d200b4e23a/arcmantle-lit-context-1.0.3.tgz","_from":"file:arcmantle-lit-context-1.0.3.tgz","_nodeVersion":"24.4.1","_npmVersion":"11.4.2","dist":{"integrity":"sha512-NKpFkhzkrjQU+1kKNDxDS4D5L95latyDYEo5b8GrL3LUedR+gMfi2xkQxa8oabaIxrt4z4ME4AkSvFlNeRp9ag==","shasum":"dd2f8305e7cd5a665542e85b4159ea4dc103fe27","tarball":"https://registry.npmjs.org/@arcmantle/lit-context/-/lit-context-1.0.3.tgz","fileCount":24,"unpackedSize":39061,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCRPUqAm4wW+AqDmbVNH41g5mcnDfA8/0vcnVGVV47ZPgIhAPp/Q5BfkwVg/vWf22eqkctPEskMlawxUZiAwymsmHSJ"}]},"_npmUser":{"name":"roenlie","email":"kristofferroenlie@gmail.com"},"directories":{},"maintainers":[{"name":"roenlie","email":"kristofferroenlie@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/lit-context_1.0.3_1752791553511_0.6025971955036886"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-05T22:42:38.151Z","modified":"2025-07-17T22:32:33.895Z","1.0.0":"2025-07-05T22:42:38.393Z","1.0.1":"2025-07-17T13:11:05.280Z","1.0.2":"2025-07-17T19:46:48.665Z","1.0.3":"2025-07-17T22:32:33.712Z"},"bugs":{"url":"https://github.com/arcmantle/lit-context/issues"},"author":{"name":"Kristoffer Roen-Lie"},"license":"Apache-2.0","homepage":"https://github.com/arcmantle/lit-context#readme","repository":{"type":"git","url":"git+https://github.com/arcmantle/lit-context.git"},"description":"Context provider and consumer for Lit Elements","maintainers":[{"name":"roenlie","email":"kristofferroenlie@gmail.com"}],"readme":"# @arcmantle/lit-context\n\nA powerful and lightweight context provider and consumer system for Lit Elements, enabling efficient state sharing across component hierarchies without prop drilling.\n\n## Features\n\n- 🚀 **Easy to use**: Simple decorators for providing and consuming context\n- 🎯 **Type-safe**: Full TypeScript support with proper type inference\n- ⚡ **Performant**: Efficient event-based communication system\n- 🔄 **Reactive**: Automatic updates when context values change\n- 🌳 **Flexible**: Works with both decorator-based and component-based approaches\n- 📦 **Lightweight**: Minimal bundle size with zero external dependencies (except Lit)\n\n## Installation\n\n```bash\nnpm install @arcmantle/lit-context\n# or\npnpm add @arcmantle/lit-context\n# or\nyarn add @arcmantle/lit-context\n```\n\n## Quick Start\n\n### Using Decorators (Recommended)\n\n**Provider Component:**\n\n```typescript\nimport { LitElement, html } from 'lit';\nimport { provide } from '@arcmantle/lit-context';\n\nclass MyProvider extends LitElement {\n  @provide() theme = 'dark';\n  @provide() user = { name: 'John', id: 1 };\n\n  render() {\n    return html`\n      <div>\n        <h1>My App</h1>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n```\n\n**Consumer Component:**\n\n```typescript\nimport { LitElement, html } from 'lit';\nimport { consume, type ContextProp } from '@arcmantle/lit-context';\n\nclass MyConsumer extends LitElement {\n  @consume() theme: ContextProp<string>;\n  @consume() user: ContextProp<{ name: string; id: number }>;\n\n  render() {\n    return html`\n      <div class=\"theme-${this.theme?.value}\">\n        <p>Hello, ${this.user?.value?.name}!</p>\n        <button @click=${() => this.theme.value = 'light'}>\n          Switch Theme\n        </button>\n      </div>\n    `;\n  }\n}\n```\n\n### Using ContextProvider Component\n\n```typescript\nimport { LitElement, html } from 'lit';\nimport { ContextProvider } from '@arcmantle/lit-context';\n\n// Register the context provider component\nContextProvider.register();\n\nclass MyApp extends LitElement {\n  private context = {\n    theme: 'dark',\n    user: { name: 'John', id: 1 }\n  };\n\n  render() {\n    return html`\n      <context-provider .context=${this.context}>\n        <my-consumer></my-consumer>\n        <my-other-consumer></my-other-consumer>\n      </context-provider>\n    `;\n  }\n}\n```\n\n## API Reference\n\n### Decorators\n\n#### `@provide(name?: string)`\n\nMarks a property as a context provider. The property will be available to all child components that consume the same context.\n\n**Parameters:**\n\n- `name` (optional): Custom name for the context. If not provided, uses the property name.\n\n**Example:**\n\n```typescript\nclass Provider extends LitElement {\n  @provide() myValue = 'hello';\n  @provide('customName') anotherValue = 42;\n}\n```\n\n#### `@consume(name?: string)`\n\nMarks a property as a context consumer. The property will receive updates from the nearest parent provider.\n\n**Parameters:**\n\n- `name` (optional): Custom name for the context to consume. If not provided, uses the property name.\n\n**Returns:** `ContextProp<T>` - An object with a `value` property for getting/setting the context value.\n\n**Example:**\n\n```typescript\nclass Consumer extends LitElement {\n  @consume() myValue: ContextProp<string>;\n  @consume('customName') anotherValue: ContextProp<number>;\n\n  someMethod() {\n    console.log(this.myValue.value); // 'hello'\n    this.myValue.value = 'updated'; // Updates the provider\n  }\n}\n```\n\n### Components\n\n#### `ContextProvider`\n\nA Lit element that provides context to its children.\n\n**Properties:**\n\n- `context`: Record<string, any> - Object containing all context values\n\n**Methods:**\n\n- `static register()`: Registers the component as a custom element\n\n**Example:**\n\n```typescript\nimport { ContextProvider } from '@arcmantle/lit-context';\n\nContextProvider.register();\n\n// Now you can use <context-provider> in your templates\n```\n\n### Types\n\n#### `ContextProp<T>`\n\nInterface for context properties in consumer components.\n\n```typescript\ninterface ContextProp<T = any> {\n  value: T;\n}\n```\n\n#### `ConsumeContextEvent<T>`\n\nCustom event type used internally for context communication.\n\n```typescript\ntype ConsumeContextEvent<T = any> = CustomEvent<{ prop: { value: T; }; }>;\n```\n\n## Advanced Usage\n\n### Named Contexts\n\nYou can use named contexts to avoid conflicts when multiple providers offer the same property name:\n\n```typescript\nclass ThemeProvider extends LitElement {\n  @provide('app-theme') theme = 'dark';\n}\n\nclass ThemeConsumer extends LitElement {\n  @consume('app-theme') theme: ContextProp<string>;\n}\n```\n\n### Nested Providers\n\nContext providers can be nested, with inner providers taking precedence:\n\n```typescript\nhtml`\n  <outer-provider>\n    <!-- theme from outer-provider -->\n    <consumer-one></consumer-one>\n\n    <inner-provider>\n      <!-- theme from inner-provider -->\n      <consumer-two></consumer-two>\n    </inner-provider>\n  </outer-provider>\n`\n```\n\n### Dynamic Context Updates\n\nContext values are reactive and will automatically trigger updates in consuming components:\n\n```typescript\nclass Provider extends LitElement {\n  @provide() counter = 0;\n\n  increment() {\n    this.counter++; // All consumers will update automatically\n  }\n}\n\nclass Consumer extends LitElement {\n  @consume() counter: ContextProp<number>;\n\n  render() {\n    return html`\n      <p>Count: ${this.counter?.value}</p>\n      <button @click=${() => this.counter.value++}>\n        Increment from consumer\n      </button>\n    `;\n  }\n}\n```\n\n## Performance Considerations\n\n- Context updates use an efficient event-based system\n- Only consumers that actually use a changed context value will re-render\n- The library automatically manages event listeners and cleanup\n- Minimal overhead with lazy controller initialization\n\n## Browser Support\n\nThis library supports all modern browsers that support:\n\n- ES2017+ (async/await, etc.)\n- Custom Elements v1\n- ES Modules\n\n## Development\n\n```bash\n# Install dependencies\npnpm install\n\n# Run development server with demo\npnpm dev\n\n# Build the library\npnpm build\n```\n\n## License\n\nApache-2.0\n\n## Contributing\n\nContributions are welcome! Please feel free to submit issues and pull requests.\n\n## Related Projects\n\n- [Lit](https://lit.dev/) - Simple. Fast. Web Components.\n- [Lit Context Protocol](https://github.com/lit/lit/tree/main/packages/context) - Official Lit context implementation\n","readmeFilename":"readme.md"}