Real World Template

[cayter]

Is there a real world template that provides the below?

• demo how SSR works
• demo how interactivity is achieved with SSR, i.e. does this support hydration?
• demo how components can be structured in individual files and imported to pages/routes

Thanks!

[Tao-VanJS]

Thanks for reaching out! For your questions:

demo how SSR works

Server-side rendering is supported with Mini-Van. You can visit https://vanjs.org/minivan to find some sample apps.

demo how interactivity is achieved with SSR, i.e. does this support hydration?

The interactivity between server-side and client-side rendering should be able to be supported with some workaround, and the official support is on the long-term roadmap of VanJS project. I am planning to design the API after I have a better understanding of real-world use cases.

I am wondering whether you can share a little bit about your use case? Based on your use case I can illustrate a skeleton code as a workaround solution. Also, your use case can serve as an important input when I design the official API.

demo how components can be structured in individual files and imported to pages/routes

In VanJS reusable UI component is simply plain JavaScript functions. As an unopinionated framework, you can export a reusable component in individual files. Here is a sample implementation in Deno runtime:

In file hello.ts:

import van from "https://deno.land/x/[email protected]/src/van-plate.js"

const {a, div, li, p, ul} = van.tags

export const Hello = () => div(
  p("👋Hello"),
  ul(
    li("🗺️World"),
    li(a({href: "https://vanjs.org/"}, "🍦VanJS")),
  ),
)

In file server.ts:

import { serve } from "https://deno.land/[email protected]/http/server.ts"
import van from "https://deno.land/x/[email protected]/src/van-plate.js"
import { Hello } from "./hello.ts"

const {body, p} = van.tags

const port = 8080

console.log(`HTTP webserver running. Access it at: http://localhost:${port}/`)
await serve(req => new Response(
  van.html(
    body(
      p("Your user-agent is: ", req.headers.get("user-agent") ?? "Unknown"),
      Hello(),
    ),
  ),
  {
    status: 200,
    headers: {"content-type": "text/html; charset=utf-8"},
  },
), {port})