Minimal example template?

[janwirth]

I want ts-liveview as UI for a scraper. I don't need a database because I bring my own. Is there minimal example template that I can use - using an interval timer in JS?

[beenotung]

This is a great suggestion, I'll reduce a minimal template setup without database.

[beenotung]

In the meantime, you may use the "minimal template" and remove the database related parts.

When removing part of the functionality, you can get hints from tsc to clean up the rest by running "npm run type-check".

[beenotung]

Pull request is welcomed, and I'll work out that in parallel.

[beenotung]

A minimal template without database is released 🚀

If you cannot see it due to outdated npx cache, you can delete ~/.npm/_npx, or run npm init ts-liveview@latest

[beenotung]

@janwirth does the new minimal template without database setup suit your need?

[beenotung]

I've mentioned this minimal template without database in the readme.
Feel free to re-open the issue if it hasn't addressed your original suggestion.

[janwirth]

Hey sorry i didn't get back to you! Thank you for responding to this so promptly. I will give it a try soon!

[janwirth]

To be honest, I was just considering to look at this library for another use case, something that I will ship to production. Then I got worried about all of the scripts that I will need to understand and maintain. It's still not really 'minimal' to me. Minimal to me would be

import {liveview, useState} from 'ts-liveview'

import { Hono } from 'hono'
app.get('/', (c) => liveview.render(c, App))

const App = (ctx) => {
     const [counter, setCounter] = useState(0)
     return <div onPress={() => setCounter(counter + 1)}> {counter} {ctx.sessionId} </div>
}

Please don't get me wrong, I appreciate the work and I'm really impressed and want to use it, but I'm time-constrained so I can not understand what looks like internals of a framework to me :)

[beenotung]

@janwirth I see what you're looking for.

This project is structured as a starter template, instead of a framework or library to be imported.

The rational behind is to enable free form of extension, modification, and shrinking unused parts without forking the library.

This design however does take more initial mental workload to understand than using a framework / library that expose a API to start with (like express and react).

Without changing the "internal" or backbone of ts-liveview, the first file to edit is usually the home.tsx file.

When you want to add more pages, you can run ./scripts/new-route.sh, which will create a new file inside server/app/pages, and auto open it in the IDE. It also auto updates the server/app/routes.tsx for the routing setup.

---

Is it not mutually exclusive to have ts-liveview as a starter template at the same time to be available on npm. I will include this option so it can be easier to start with.

Thanks for the suggestion.

[janwirth]

What I also noticed is that you are streaming individual HTML updates a là jQuery to the client:

https://github.com/beenotung/ts-liveview/blob/master/server/app/pages/calculator.tsx#L5

I was in fact looking for something that allows me to define JSX and have the server state update the client automatically. I see that there are imperative modifications streamed.