LiveView enables rich, real-time user experiences with server-rendered HTML
npm install ts-liveview
LiveView enables rich, real-time user experiences with server-rendered HTML.
Just like Phoenix LiveView but in Typescript!
#### Examples
- [x] Single-Page Application (SPA):
Demo,
Source.
With:
- url routing
- rainbow animation
- bandwidth quota
- [x] Realtime chatroom:
Demo,
Source
: all Ionic build excluded the svg, assets, .map and PWA json files
Not only is LiveView + morphdom much lighter than the JS frameworks, the frameworks are just the baseline. You still need to ship application-specific JS and often add supporting JS libraries such as react-router, redux and friends to get feature parity. Those can easily boom the code size for runtime to be over 10MB, causing the latency of the first meaningful paint to be over 25 seconds on mobile device.
reference: https://dockyard.com/blog/2018/12/12/phoenix-liveview-interactive-real-time-apps-no-need-to-write-javascript
typescript
import { c, h, Session, startServer } from '../src'function render(state: number) {
return c(
'#clock',
h
,
)
}function createSession(session: Session): Session | void {
let state = Date.now()
function update() {
const view = render(state)
session.sendComponent(view)
}
const timer = setInterval(() => {
state = Date.now()
update()
}, 1000)
session.onClose(() => clearInterval(timer))
return session
}
startServer({
port: 3000,
heads: [
// default path for websocket lib
,
],
createSession,
initialRender: (req, res) => {
return render(Date.now())
},
})
`$3
typescript
import S from 's-js'
import { c, genPrimusScript, h, Request, Response, Session, startServer, } from '../src'function initialView(req: Request, res: Response) {
return c('#app', h
Now is: ${new Date().toLocaleString()}
Hello, Guest
)
}// this callback will be called from a S.root context
// the context will be cleanup automatically when the client connection is closed
function createSession(session: Session): Session | void {
const clock = S.data(Date.now())
const timer = setInterval(() => clock(Date.now()), 1000)
S.cleanup(() => clearInterval(timer))
setInterval(() => clock(Date.now()), 1000)
function renderClock() {
return c(
'#clock',
h
Now is: ${new Date(clock()).toLocaleString()}
,
)
} const name = S.data('')
function renderName() {
return c(
'#name',
h
Hello, ${name() || 'Guest'}
,
)
} function renderRoot() {
return S.sample(() =>
c(
'#app',
h
,
),
)
} session.sendComponent(renderRoot())
session.live(renderClock, { skipInitialSend: true })
session.live(renderName, { skipInitialSend: true })
session.onMessage(message => {
const [k, v] = message
if (k !== 'name') {
console.warn('unknown client message:', message)
return
}
name(v)
})
return session
}
startServer({
port: 3000,
heads: [genPrimusScript()],
createSession,
initialRender: (req, res) => {
return initialView(req, res)
},
})
`$3
- Single-file demo with s-js
- Single-file demo without s-js
- SSR SPA Example (server-rendered single-page webapp)Todo
- [x] Auto reconnect the websocket*
- [x] Recover session when reconnect*
- [x] make session simpler and put s-js component into core?
- [x] update spa example, tests, and readme to adopt the breaking change
- [ ] abstract primus to allow custom transport and encoding
- [ ] use history.pushState in demo instead of location hash, for easier sharing and initial rendering
- [ ] support preventing XSS issue***: Solved by Primus
**: maybe use JSX/TSX?
If so, will be costly to detect changes.
Currently requires the developer to explicitly escape it, with the help of
v0
- Support pre-rendering
- Support live-update with diff-based patching with morphdom