标签：服务器 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,原型语法
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。