Show HN: 用 TypeScript 重构 PHP (演示)

**morph ** Public

• Notifications You must be signed in to change notification settings
• Fork 0
• Star 4

Embeddable fullstack library designed for creating Hypermedia-Driven Applications without a build step, based on HTMX and Hono

License

MIT license 4 stars 0 forks Branches Tags Activity Star Notifications You must be signed in to change notification settings

• Code
• Issues 0
• Pull requests 0
• Actions
• Projects 0
• Security
• Insights

Additional navigation options

• Code
• Issues
• Pull requests
• Actions
• Projects
• Security
• Insights

vseplet/morph

main BranchesTags Go to file Code

Folders and files

Name| Name| Last commit message| Last commit date
---|---|---|---

Latest commit

History

32 Commits
.github/workflows| .github/workflows
example| example
source| source
tests| tests
.editorconfig| .editorconfig
.gitignore| .gitignore
LICENSE| LICENSE
README.md| README.md
deno.json| deno.json
versions.ts| versions.ts
View all files

Repository files navigation

• README
• MIT license

Morph

👋 👋 ATTENTION!

This package is under development and will be frequently updated. The author would appreciate any help, advice, and pull requests! Thank you for your understanding 😊 Morph 是一个可嵌入的全栈库，用于构建基于 HTMX 的 Hypermedia-Driven Applications，无需构建步骤。

Morph 结合了 SSR、SPA 和 islands architecture 的优点，同时坚持使用纯 HTML、CSS 和 JS。

我创建 Morph 的目的是在使用 Deno 和 Deno Deploy 开发 Telegram Web Apps 时进行优化。对于小型项目来说，使用复杂的 API 将前端和后端分离，并使用 React 或 Vue 的传统堆栈感觉过于笨重、复杂且成本高昂。

目前，Morph 运行在 Hono 上，但将来可能会添加对其他后端框架的支持。

核心原则:

• 每个组件都可以调用自己的 API，该 API 返回超文本（其他组件）
• 所有组件都在服务器上呈现，并且可以访问服务器端上下文
• 组件可以独立呈现和重新呈现
• 组件形成一个层次结构，可以相互嵌套，并从 API 返回
• 最小或没有客户端 JavaScript
• 无需构建步骤
• 无需预先设计 API 数据结构
• 该库可以嵌入到任何 Deno/Node/Bun 项目中

当不需要将前端和后端拆分为单独的服务时，Morph 是理想的选择。它特别适用于小型 Telegram 机器人、桌面应用程序或不需要完整前端堆栈但仍需要干净且动态 UI 的内部工具。

快速开始

添加依赖包

Deno deno add jsr:@vseplet/morph jsr:@hono/hono Bun bunx jsr add @vseplet/morph bun add hono Node npx jsr add @vseplet/morph npm i --save hono @hono/node-server

创建 main.ts 文件并添加引用

Deno

import { Hono } from "@hono/hono";
import { component, fn, html, meta, morph, styled } from "@vseplet/morph";

Bun

import { Hono } from "hono";
import { component, fn, html, meta, morph, styled } from "@vseplet/morph";

Node

import { serve } from '@hono/node-server'
import { Hono } from "hono";
import { component, fn, html, meta, morph, styled } from "@vseplet/morph";

创建一个简单的页面 (适用于所有运行时)

const app = new Hono()
 .all("/*", async (c) =>
  await morph
   .page("/", component(async () => html`
     ${meta({ title: "Hello, World!" })}
     <h1>Hello, World!</h1>
     <pre class="${styled`color:red;`}">${
      (await (await fetch("https://icanhazdadjoke.com/", {
       headers: {
        Accept: "application/json",
        "User-Agent": "My Fun App (https://example.com)",
       },
      })).json()).joke
     }</pre>
     ${fn(() => alert("Hello!"))}
    `),
   )
  .fetch(c.req.raw));

配置服务器

Deno

Deno.serve(app.fetch)

Bun

export default app;

Node

serve(app)

运行

Deno deno -A main.ts Bun bun main.ts Node node --experimental-strip-types main.ts

License

MIT

About

Embeddable fullstack library designed for creating Hypermedia-Driven Applications without a build step, based on HTMX and Hono

Resources

Readme

License

MIT license Activity

Stars

4 stars

Watchers

1 watching

Forks

0 forks Report repository

Contributors 2

• vseplet Vsevolod Pletnev
• github-actions[bot]

Languages

• TypeScript 100.0%

Footer

© 2025 GitHub, Inc.

Footer navigation

• Terms
• Privacy
• Security
• Status
• Docs
• Contact
• Manage cookies
• Do not share my personal information

You can’t perform that action at this time.