@wirestate/lit 0.6.1 → 0.7.0-experimental.1

package/CHANGELOG.md

@@ -8,6 +8,15 @@
 - `WireScope`: add new event/command/query subscribe-unsubscribe methods
 - Export more alias / methods from `@wirestate/core`
 - Export more alias / methods from `@wirestate/react-mobx`
+- Export missing methods typing for `@wirestate/core`
+- Extensive JSDoc coverage for wirestate packages
+- `createIocContainer`: Added ability to instantly provide and activate entries, targeted seeds
+- `createInjectablesProvider`: Removed.
+- `IocProvider`: Removed
+- `useRootContainer`: Added separate hook for store management in React tree
+- `ContainerProvider`: Simpler provider for containers.
+- `SubContainerProvider`: Added component solving problems of removed `createInjectablesProvider`
+- `ContainerActivator`: Added separate activation component
 
 ## 0.6.3
 
@@ -70,6 +79,6 @@
 - useService -> useInjection
 - AbstractService::getService -> AbstractService::resolve
 
-## 0.1.1
+## 0.1.0
 
 - Initial release

package/README.md

@@ -1,4 +1,4 @@
-# @wirestate/lit
+# @wirestate/lit [[monorepo](https://github.com/Neloreck/wirestate)] [[docs](https://neloreck.github.io/wirestate/)]
 
 [![npm](https://img.shields.io/npm/v/@wirestate/lit.svg?style=flat-square)](https://www.npmjs.com/package/@wirestate/lit)
 [![license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](https://github.com/Neloreck/wirestate/blob/master/LICENSE)
@@ -29,11 +29,11 @@ npm install @wirestate/core @wirestate/lit lit reflect-metadata
 Provides an IoC container to the component tree. It uses Lit Context to propagate the container to child elements.
 
 ```typescript
-import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { iocProvide, IocProviderController } from '@wirestate/lit';
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { iocProvide, IocProviderController } from "@wirestate/lit";
 
-@customElement('my-app')
+@customElement("my-app")
 class MyApp extends LitElement {
   @iocProvide()
   private ioc!: IocProviderController;
@@ -51,13 +51,13 @@ Binds a set of injectables to the nearest IoC container for the host element's l
 Using the decorator (accessor):
 
 ```typescript
-import { LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { injectablesProvide, InjectablesProviderController } from '@wirestate/lit';
+import { LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { injectablesProvide, InjectablesProviderController } from "@wirestate/lit";
 
-import { AuthService, UserService } from './services';
+import { AuthService, UserService } from "./services";
 
-@customElement('my-app')
+@customElement("my-app")
 class MyApp extends LitElement {
   @injectablesProvide({ entries: [AuthService, UserService], activate: [AuthService] })
   public services!: InjectablesProviderController<MyApp>;
@@ -67,10 +67,10 @@ class MyApp extends LitElement {
 Using the hook:
 
 ```typescript
-import { LitElement } from 'lit';
-import { useInjectablesProvider } from '@wirestate/lit';
+import { LitElement } from "lit";
+import { useInjectablesProvider } from "@wirestate/lit";
 
-import { AuthService, UserService } from './services';
+import { AuthService, UserService } from "./services";
 
 class MyApp extends LitElement {
   private services = useInjectablesProvider(this, {
@@ -83,10 +83,10 @@ class MyApp extends LitElement {
 Using the controller directly:
 
 ```typescript
-import { LitElement } from 'lit';
-import { InjectablesProviderController } from '@wirestate/lit';
+import { LitElement } from "lit";
+import { InjectablesProviderController } from "@wirestate/lit";
 
-import { AuthService, UserService } from './services';
+import { AuthService, UserService } from "./services";
 
 class MyApp extends LitElement {
   private services = new InjectablesProviderController(this, {
@@ -99,10 +99,10 @@ class MyApp extends LitElement {
 To bind into a specific container instead of the nearest provider context, pass the `into` option:
 
 ```typescript
-import { LitElement } from 'lit';
-import { useInjectablesProvider } from '@wirestate/lit';
+import { LitElement } from "lit";
+import { useInjectablesProvider } from "@wirestate/lit";
 
-import { AuthService, UserService } from './services';
+import { AuthService, UserService } from "./services";
 
 class MyApp extends LitElement {
   private services = useInjectablesProvider(this, {
@@ -118,13 +118,13 @@ class MyApp extends LitElement {
 Injects a service from the nearest IoC container. Supports both options object and direct service identifier.
 
 ```typescript
-import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { injection } from '@wirestate/lit';
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { injection } from "@wirestate/lit";
 
-import { MyService } from './services';
+import { MyService } from "./services";
 
-@customElement('my-component')
+@customElement("my-component")
 class MyComponent extends LitElement {
   // Using identifier:
   @injection(MyService)
@@ -143,10 +143,10 @@ class MyComponent extends LitElement {
 Using the controller:
 
 ```typescript
-import { LitElement, html } from 'lit';
-import { useInjection } from '@wirestate/lit';
+import { LitElement, html } from "lit";
+import { useInjection } from "@wirestate/lit";
 
-import { MyService } from './services';
+import { MyService } from "./services";
 
 class MyComponent extends LitElement {
   // Using identifier:
@@ -168,15 +168,15 @@ class MyComponent extends LitElement {
 Subscribe to events from the event bus using `@onEvent` decorator or `useOnEvents` controller.
 
 ```typescript
-import { LitElement } from 'lit';
-import { onEvent } from '@wirestate/lit';
+import { LitElement } from "lit";
+import { onEvent } from "@wirestate/lit";
 
-import { UserLoggedInEvent } from './events';
+import { UserLoggedInEvent } from "./events";
 
 class MyListener extends LitElement {
   @onEvent("USER_LOGGED_IN")
   private handleLogin(event: UserLoggedInEvent) {
-    console.log('User logged in:', event.payload);
+    console.log("User logged in:", event.payload);
   }
 }
 ```
@@ -184,12 +184,12 @@ class MyListener extends LitElement {
 Using the controller:
 
 ```typescript
-import { LitElement } from 'lit';
-import { useOnEvents } from '@wirestate/lit';
+import { LitElement } from "lit";
+import { useOnEvents } from "@wirestate/lit";
 
 class MyListener extends LitElement {
   private events = useOnEvents(this, {
-    handler: (event) => console.log('Event received:', event),
+    handler: (event) => console.log("Event received:", event),
   });
 }
 ```
@@ -199,11 +199,11 @@ class MyListener extends LitElement {
 Register a handler for a specific command type.
 
 ```typescript
-import { LitElement } from 'lit';
-import { onCommand } from '@wirestate/lit';
+import { LitElement } from "lit";
+import { onCommand } from "@wirestate/lit";
 
 class MyCommander extends LitElement {
-  @onCommand('RESET_STATE')
+  @onCommand("RESET_STATE")
   private handleReset() {
     // perform reset
   }
@@ -215,11 +215,11 @@ class MyCommander extends LitElement {
 Register a handler for a specific query type.
 
 ```typescript
-import { LitElement } from 'lit';
-import { onQuery } from '@wirestate/lit';
+import { LitElement } from "lit";
+import { onQuery } from "@wirestate/lit";
 
 class MyQuerier extends LitElement {
-  @onQuery('GET_VIEW_PORT')
+  @onQuery("GET_VIEW_PORT")
   private handleGetViewport() {
     return { width: window.innerWidth, height: window.innerHeight };
   }
@@ -233,9 +233,9 @@ class MyQuerier extends LitElement {
 Creates a test fixture with a provider element and an IoC container. Useful for unit testing components that use injections.
 
 ```typescript
-import { createLitProvision } from '@wirestate/lit/test-utils';
+import { createLitProvision } from "@wirestate/lit/test-utils";
 
-describe('MyComponent', () => {
+describe("MyComponent", () => {
   let fixture: ReturnType<typeof createLitProvision>;
 
   beforeEach(() => {
@@ -246,8 +246,8 @@ describe('MyComponent', () => {
     fixture.cleanup();
   });
 
-  it('should work', () => {
-    const el = document.createElement('my-component');
+  it("should work", () => {
+    const el = document.createElement("my-component");
     fixture.provider.appendChild(el);
     // ...
   });