用于服务器端 html 的 HTMX + JSX 原型语法。

本文主要是介绍用于服务器端 html 的 HTMX + JSX 原型语法。，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

// a HTMX approach with JSX?
import { Fragment, JSX } from "preact";
import { nanoid } from 'nanoid'

interface Options {
  path: string
}

const routes = []

class HTMX_IN_JSX {
  id: string
  constructor(
    public Component: (props: any) => any, 
    public opt?: Options
  ) {
    this.id = nanoid()
    routes.push(this)
  }
  get path () {
    if (this.opt?.path) return this.opt.path
    throw new Error('Href for component not available')
  }
  get href () {
    return this.path
  }
  get target () {
    return {"hx-target": `#${this.id}`}
  }
  get put () {
    return {"hx-put": this.path}
  }
  get get () {
    return {"hx-get": this.path}
  }
  WrapId () {
    return (props: any) => (
      <span id={this.id}>
        <this.Component {...props}/>
      </span>
    )
  }
  Anchor (props: any): JSX.Element {
    return <a href={this.href}>{props.children}</a>
  }
  AnchorBoost (props: any): JSX.Element {
    return <a href={this.href} hx-boost="true">{props.children}</a>
  }
}

const component = (x: (props: any) => any, opt?: Options): ((props: any) => any) & HTMX_IN_JSX => {
  const instance = new HTMX_IN_JSX(x, opt)
  const ex = instance.WrapId()
  return Object.assign(ex, instance)
}

const Greeting = component(() => {
  return (
    <div>
      <h1>hello</h1>
    </div>
  )
}, {
  path: '/greeting',
})

const Placeholder = component(() => {})

const Page = component(() => {
  return (
    <div>
      <Placeholder/>
      <Greeting.Anchor>Navigates to anchor</Greeting.Anchor>
      <Greeting.AnchorBoost>Fetches anchor page and swaps dom</Greeting.AnchorBoost>
      <a href={Greeting.href}>Simple link to greeting page</a>
      <div {...{...Greeting.put, ...Placeholder.target}}>put to greeting</div>
    </div>
  )
}, {
  path: '/',
})


serve(routes)

这篇关于用于服务器端 html 的 HTMX + JSX 原型语法。的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！