我的產品終於上線囉！！

Cardboard.js 現已上線 Product Hunt。

大家好，

經過多年的開發， Cardboard.js終於在Product Hunt上發布了。這個專案的初衷是提供一種無需編寫 HTML、JSX 或單獨的 CSS 檔案即可建立小型互動式 Web 應用的方法——所有程式碼都使用純 JavaScript 或 TypeScript 編寫，渲染和響應式設計都由 Cardboard 負責。

如果你之前看過我關於建立這個框架的文章，感謝你的關注。如果沒有，這裡簡單介紹一下，並附上一些使用範例，讓你感受一下它的使用體驗。

Cardboard.js 是什麼

Cardboard.js 是一個輕量級的響應式 UI 庫（約 16 KB），專注於簡潔性和高效能。它提供：

無需HTML——您可以使用JS產生DOM元素。
內建狀態管理。
響應式更新（狀態改變時 UI 更新）。
可重複使用元件和CSS-in-JS樣式支援。

快速片段

基本用法

無需編寫 HTML，只需使用 JavaScript 初始化框架並定義使用者介面即可：

import { tag, init, allTags } from '@nkeff/cardboard-js';

const { div, p } = allTags;

// Initialize Cardboard (defaults to <body>)
const root = init();

// Append elements
root.append(
  div(
    p('Hello world!')
  )
);

它會在不使用模板檔案的情況下建立並附加 DOM——一切都存在於程式碼中。

一個簡單的反應計數器

Cardboard 內建了響應式狀態原語，因此您的 UI 會自動更新：

const Counter = () => {
  const count = state(0);

  return button()
    .text(`Clicked $count times`, { count })
    .addStyle('color', 'gray')
    .stylesIf(count.greaterThan(5), { color: 'red' }) 
    .clicked(() => count.value++);
};

// Mount it to the body
tag('(body)').append(Counter());

在這裡，您可以定義一個元件函數，該函數傳回具有響應式狀態的 UI。當count.value發生變化時，文字和樣式會自動更新。