open-index/open-npm huggingface dataset:
npm package: @lit-html-free/core
Description: helpers for lit-html
Author: vegar.ringdal@gmail.com
Latest version: 0.0.1-alpha.15

# @lit-html-free/core

Helpers to get make lit-html a little easier

### Install

-   `npm install @lit-html-free/core`

### Sample

https://stackblitz.com/edit/lit-html-free-router?file=routersConfig.ts

### Bundle size:

https://bundlephobia.com/result?p=@lit-html-free/core

### Docs

...todo
npm package: @lit-html-free/router
Description: Lit html router
Author: Vegar Ringdal
Latest version: 0.0.1-alpha.15

# lit-html-free-router

work in progress, very simple docs, se demo for more info api changing a lot- will do untill I get
time to refactor/clean up all code Im extperimenting with

### Install

-   `npm install @lit-html-free/router`

### Sample

https://stackblitz.com/edit/lit-html-free-router?file=routersConfig.ts

### Bundle size:

https://bundlephobia.com/result?p=@lit-html-free/router

### Docs

..todo

Info: not adding adding routeconfigs can bring weird results if bundler is using hmr
npm package: @lit-kit/di
Description: Dependency Injection in ~800 bytes
Author: deebloo
Latest version: 2.1.3

# Di

Dependency Injection in ~800 bytes

#### Installation:

```BASH
npm i @lit-kit/di
```

#### Example:

```TS
import { Injector, Inject } from '@lit-kit/di';

class FooService {
  sayHello() {
    return 'Hello From FooService';
  }
}

class BarService {
  constructor(@Inject(FooService) private foo: FooService) {}

  sayHello() {
    return 'Hello From BarService and ' + this.foo.sayHello();
  }
}

const app = new Injector();

app.get(BarService).sayHello(); // Hello from BarService and Hello from FooService
```

#### Override A Service:

```TS
import { Injector, Inject } from '@lit-kit/di';

class FooService {
  sayHello() {
    return 'Hello From FooService';
  }
}

class BarService {
  constructor(@Inject(FooService) private foo: FooService) {}

  sayHello() {
    return 'Hello From BarService and ' + this.foo.sayHello();
  }
}

// Override FooService with an alternate implementation
const app = new Injector({
  providers: [
    {
      provide: FooService,
      useClass: class extends FooService {
        sayHello() {
          return 'IT HAS BEEN OVERRIDEN'
        }
      }
    }
  ]
});

app.get(BarService).sayHello(); // Hello from BarService and IT HAS BEEN OVERRIDEN
```

#### Root Service

If you have nested injectors and you still want singleton instances decorator your services with `@Service()`

```TS
import { Service } from '@lit-kit/di';

@Service()
class FooService {
  sayHello() {
    return 'Hello From FooService';
  }
}
```

#### Inject services with custom decorators:

```TS
import { Injector, Inject } from '@lit-kit/di';

function FooRef(c: any, k: string, i: number) {
  Inject(FooService)(c, k, i)
}

class FooService {
  sayHello() {
    return 'Hello From FooService';
  }
}

class BarService {
  constructor(@FooRef private foo: FooService) {}

  sayHello() {
    return 'Hello From BarService and ' + this.foo.sayHello();
  }
}

// create a new instance of our injector
const app = new Injector();

app.get(BarService).sayHello(); // Hello from BarService and Hello from FooService
```
npm package: @lit-kit/router
Description: Dependency Injection in ~800 bytes
Author: deebloo
Latest version: 2.1.3

# @lit-kit/router

A simple router

#### Installation:

```BASH
npm i @lit-kit/component @lit-kit/di @lit-kit/router lit-html
```

#### Example:

```TS
import { Component, registerElement } from '@lit-kit/component';
import { Route, RouteCtxRef, RouteCtx, ActiveOptions, registerRouterElements } from '@lit-kit/router';

registerRouterElements();

const routes: Route[] = [
  // Eager component route
  { path: '/', component: () => document.createElement('page-1') },

  // Lazy component route
  { path: '/bar', component: () => import('page-2.component').then(() => document.createElement('page-2')) },

  // Child Paths
  { path: '/parent(.*)', component: () => document.createElement('parent-component')  }

  // this would be in the child component outlet
  { path: '/parent/child', component: () => document.createElement('child-component')  }
]

export interface AppState {
  title: string;
}

@Component<AppState>({
  template(state) {
    return html`
      <router-link .path=${'/'} .activeOptions=${new ActiveOptions({ pathMatch: 'full' })}>
        Go To Foo
      </router-link>

      <router-link .path=${'/bar'}>Go To Bar</router-link>

      <section>
        <router-outlet .routes=${routes}></router-outlet>
      </section>

      <footer>The Footer</footer>
    `;
  }
})
export class AppComponent {
  constructor(@RouteCtxRef private route: RouteCtx) {}

  connectedCallback() {
    console.log(this.route.value);

    this.route.onChanges(ctx => {
      console.log(ctx);
    })
  }
}

customElements.define('app-root', defineElement(AppComponent));
```
npm package: @lit-kit/schematics
Description: A blank schematics
Latest version: 2.1.3

# schematics

A collection of schematics for generating components and applications

```BASH
npm i -g @angular-devkit/schematics-cli @lit-kit/schematics
```

### Generate App

```bash
schematics @lit-kit/schematics:application
```

### Generate Component

```bash
schematics @lit-kit/schematics:component
```

### Generate Service

```bash
schematics @lit-kit/schematics:service
```