Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stradivario/litre
Server-side rendering of web applications using Deno and ReadableStreams
https://github.com/stradivario/litre
Last synced: 16 days ago
JSON representation
Server-side rendering of web applications using Deno and ReadableStreams
- Host: GitHub
- URL: https://github.com/stradivario/litre
- Owner: Stradivario
- Created: 2021-10-02T07:58:37.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2021-10-06T18:53:45.000Z (about 3 years ago)
- Last Synced: 2024-10-18T18:23:14.054Z (2 months ago)
- Language: TypeScript
- Homepage:
- Size: 104 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Deno + LitHTML: No build, no bundle, all streaming
**Litre** is a web framework intended to work with LitHTML and SSR
Embrace the future of **ES Modules**, **Import Maps**, and **Web
Streams**.
### Starting Litre server
```typescript
import { start } from 'https://raw.githubusercontent.com/Stradivario/litre/master/src/mod.ts';
start({
importmap: await Deno.readTextFile('importmap.json'),
folder: 'app',
port: 4200,
});
```
```bash
make dev
```
### HTMLElement
```typescript
class AppRoot extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
}
connectedCallback() {
const div = document.createElement("div");
div.innerHTML = `Hello from SSR Webcomponents using Deno!`;
this.shadowRoot?.append(div);
}
}
customElements.define('app-root', AppRoot)
export default Litre({
page: () => Ocean.html`
My app
`,
});
```
### LitHTML
```typescript
import {
html,
Component,
LitElement,
} from 'https://cdn.esm.sh/v53/@rxdi/[email protected]';
@Component({
selector: 'app-root',
template(this) {
return html`Hello from SSR Webcomponents using Deno!`;
},
})
export class AppRoot extends LitElement {}
export default Litre({
page: () => Ocean.html`
My app
`,
});
```
### Partially Hydrated server side rendering
We define components to be loaded after javascript is loaded
```typescript
import {
Component,
html,
LitElement,
} from 'http://localhost:8080/@rxdi/lit-html';
@Component({
selector: 'app-root',
template(this) {
return html`
Test Button
Why should i upgrade ?
Optimized for best experience...
`;
},
})
export class AppRoot extends LitElement {}
export default Litre({
page: () => Ocean.html`
My app
import 'http://localhost:8080/@rxdi/ui-kit/accordion-item';
import 'http://localhost:8080/@rxdi/ui-kit/button';
import { Bootstrap} from 'http://localhost:8080/@rxdi/core';
import { ReactiveUiModule } from 'http://localhost:8080/@rxdi/ui-kit';
Bootstrap(ReactiveUiModule.forRoot()).subscribe()
`,
});
```