buder

Buder is a UI framework that provides a concise syntax for defining components, enabling efficient state management, and offering styling options for enhanced visual customization.

Getting Started

npm i buder
pnpm i buder
bun i buder
yarn add buder

State Binding Example

import { Button, Column, Input, State, Text, px } from "./index.ts";

let a = State("14px");

Column(
  Input(a),
  Text(a),
  Button("Reset")
    .style({ backgroundColor: "red", color: "white", fontSize: a })
    .event({
      click: () => {
        a.set("14px");
      },
    })
)
  .center.style({ gap: px(10) })
  .mount("#app");

How to build

bun i
bun build

Widgets Catalog

• Widget
  • All widgets inherit from this class
  • mount method is used to mount the widget to a DOM element
  • style method is used to set styles for the widget
  • event method is used to bind events to the widget
• View
  • All widgets with multiple elements inherit from this class

  View(Widget1(), Widget2(), Widget3());

• Button
  • A clickable button

Button("Click me").event({
  click: () => {
    console.log("Button clicked");
  },
});

• Flex
  • A container that arranges its child widgets in a row or column

Flex(Widget1(), Widget2(), Widget3());

• Row
  • A container that arranges its child widgets in a row

Row(Widget1(), Widget2(), Widget3());

• Column
  • A container that arranges its child widgets in a column

Column(Widget1(), Widget2(), Widget3());

• Stack
  • A container that arranges its child widgets in a stack

Stack(Widget1(), Widget2(), Widget3());

• Input
• Span
  • A Text widget

Span("Hello, world!");

// Center Text
Span("Hello, world!").center();

• Picture
  • A widget that displays an image

Picture("https://placeholder.com/150x150");

• Link
  • A widget that displays a hyperlink

Link("https://www.google.com");

• Checkbox
  • A widget that displays a checkbox

View(Checkbox(b).id("checkbox"), Label(" Bold").for("checkbox"));

• Radio
  • A widget that displays a radio button

Radio("Radio");

• Select
  • A widget that displays a select box

Select("Select", ["Option 1", "Option 2"]);

• Slider
  • A widget that displays a slider

Slider("Slider");

• Canvas
  • A widget that displays a canvas

const width = 200,
  height = 200;
Canvas(width, height, (ctx) => {
  ctx.fillStyle = "red";
  ctx.fillRect(0, 0, 100, 100);
});

• Input
  • A widget that displays an input field

let content = State("");
Input(content);

• Label
  • A widget that displays a label

Label("Label").for("input-id");

• PlaceHolder
  • A widget that displays a placeholder

// Height and width can be set using H and W functions

H(px(16));

W(px(16));

• TextArea
  • A widget that displays a textarea

let content = State("");
TextArea(content);

Stateful

• A state variable that can be bound to a widget's property

  let a = State("14px");
  
  Column(Input(a), Text(a));

• set method is used to update the state variable

  a.set("16px");

• transform method is used to transform the state variable's value before and after updating it

  a.transform(
    (v) => +v.replace("px", ""),
    (v) => `${v}px`
  );

• get method is used to get the object property state variable. When fontSize changed, styles can be updated

  // BuderState<Record<string, string>>
  let styles = State({ fontSize: "14px" });
  // BuderState<string>
  let fontSize = a.get("fontSize");

Styling

• style method
  • Sets styles for the widget

Button("Reset").style({ backgroundColor: "red", color: "white", fontSize: a });

• Theme
  • A global theme object that can be used to set default styles or classes for all widgets

const theme = {
  button: "button_class",
  input: "input_class",
  ..extra
};
Theme(
  theme,
  widget
);

Events

• event method
  • Binds events to the widget

Button("Reset").event({
  click: () => {
    a.set("14px");
  },
});

Git 标准

• ci: ci 配置文件和脚本的变动;
• chore: 构建系统或辅助工具的变动;
• fix: 代码 BUG 修复;
• feat: 新功能;
• perf: 性能优化和提升;
• refactor: 仅仅是代码变动，既不是修复 BUG 也不是引入新功能;
• style: 代码格式调整，可能是空格、分号、缩进等等;
• docs: 文档变动;
• test: 补充缺失的测试用例或者修正现有的测试用例;
• revert: 回滚操作;