@yoyaflow/yoya-ui 0.2.0 → 0.2.1

package/README.md

@@ -6,6 +6,28 @@
 
 yoya-ui is a web foundation library — a new form of business UI construction. Views are built directly on the real DOM: declarative HTML authoring, router, i18n, theming, state and server-side rendering (SSR) out of the box, with pure client rendering switchable from the same code. Bundled UI components exist for out-of-the-box convenience; they are not the boundary of the library — native elements and third-party components compose the same way.
 
+## Hello World — declarative UI and reactive i18n
+
+No framework runtime, no virtual DOM, no JSX build step: views are real DOM nodes described in plain JS, and i18n is a string shortcut.
+
+```js
+// HelloWorldExample — declarative UI
+function HelloWorldExample() {
+  return div((root) => {
+    root.p('Hello，World！');
+  });
+}
+```
+
+```js
+// HelloWorldExampleI18n — reactive i18n text with params
+function HelloWorldExampleI18n() {
+  return div((root) => {
+    root.p('Hello, {name}!'.s('greeting.hello', { name: 'yoya-ui' }));
+  });
+}
+```
+
 ## Features
 
 - **Low-barrier declarative authoring**: build UI with declarative structured JS elements — view and logic live in the same language, eliminating the friction between HTML markup and complex manipulation logic; only HTML and plain JS are required, with no framework-specific concepts

package/README.zh-CN.md

@@ -7,6 +7,28 @@
 
 yoya-ui 是一套新的业务界面构建形式，也是一个 Web 基础库：直接在真实 DOM 上构建视图，声明式 HTML 写法、路由、i18n、主题与状态系统开箱即用，支持服务端渲染（SSR）与纯客户端渲染同代码切换。自带 UI 组件只是为了开箱即用，组件清单并不代表库的能力边界——原生元素与第三方组件以同样方式自由组合。
 
+## Hello World——声明式构建与响应式 i18n
+
+没有框架运行时、没有虚拟 DOM、没有 JSX 构建链：视图就是由原生 JS 描述的真实 DOM，i18n 只是字符串快捷方式。
+
+```js
+// HelloWorldExample —— 声明式构建
+function HelloWorldExample() {
+  return div((root) => {
+    root.p('Hello，World！');
+  });
+}
+```
+
+```js
+// HelloWorldExampleI18n —— 响应式 i18n 文本（带参数）
+function HelloWorldExampleI18n() {
+  return div((root) => {
+    root.p('Hello, {name}!'.s('greeting.hello', { name: 'yoya-ui' }));
+  });
+}
+```
+
 ## 特性
 
 - **低门槛声明式构建**：采用声明式结构化 JS 元素构建方案，视图与操作逻辑同源，消除 HTML 标签化语言与复杂操作逻辑不兼容的问题；只学 HTML 与原生 JS 即可使用，无框架专属概念