❤

npm

rpose

0.9.1 • Public • Published 4 years ago

`rpose`

《RPOSE从入门到精通》在哪里？

没有的事，这是一个前端框架，简单到没法聊

有好姿势欢迎提建议

`青松的姿势`

Hello world

// hello-world.rpose
[view]
<span>hello {name}!</span>

[state]
{name: 'world'}

[mount]
body

todo-list

// todo-list.rpose
[view]
<div>
    <div class="title">TODO LIST</div>
    <ul>
        <li @for="(item, index) in $state.items" @key={index}><button style="margin-right:20px" onclick={ ()=>this.del(index) }>Del</button> {item}</li>
    </ul>
    <form>
        <input type="text" @ref="input">
        <button>Add #{ $state.items.length + 1 }</button>
    </form>
</div>

[state]
{
    items: []
}

[methods]
@action('submit', 'form')
add(e) {
    e.preventDefault();
    let el = this.getRefElement('input');
    if ( el.value.trim() ){
        let items = this.#private.state.items;
        items.push(el.value) && (el.value = '');
        this.render();
    }
}

del(index) {
    this.#private.state.items.splice(index, 1);
    this.render();
}

[css]
.title {
    font-size: 18px;
}

[mount]
body

layout (@class)

// layout-foo.rpose
[view]
<div @class="height-100vh display-flex flex-direction-column overflow-hidden color-#333">
    <div @class="height-50px color-#fff bgcolor-#555"><slot name="header"/></div> 
    <div @class="height--calc(100vh_-_80px) bgcolor-#eee"><slot name="body"/></div> 
    <div @class="height-30px bgcolor-#d5d5d5"><slot name="footer"/></div> 
</div> 

[less]
body{
    margin: 0;
}

// page-foo.rpose
[view]
<layout-foo>
    <div slot="header">
        <div @class="text-align-center padding-top-13px">Header</div>
    </div> 
    <div slot="body">
        <div @class="margin-top-150px text-align-center font-size-3rem">Content</div>
    </div>
    <div slot="footer">
        <div @class="text-align-center padding-top-3px">Footer</div>
    </div> 
</layout-foo> 

[mount]
body

bootstrap-button (csslibify)

// csslibify-bootstrap-button.rpose
[view]
<button type="button" class="btn@bootstrap btn-primary@bootstrap">
    this is a bootstrap primary button
</button>

[csslib]
bootstrap = bootstrap:**/*.min.css

[mount]
body

`安装使用`

@rpose/cli: README.md

`功能列表`

feature

buildin

语法高亮组件，写法雷同md的 ```，支持btf、rpose，支持设定最大高度
内置路由组件<router>、<router-link>
内置标签组件 <if>
内置标签组件 <for>
内置图标组件 <svgicon>
内置组件写法 <@svgicon>等同 <svgicon>
内置组件写法 <@router>等同 <router>
内置组件写法 <@router-link>等同 <router-link>

runtime

虚拟DOM及局部差异化渲染实现
提供on、at、once、off等事件接口
提供$$接口，方便dom节点选择及属性修改操作
支持相对特殊的<svg>、<script>、<link>标签
使用代理事件，event.targetNode存放当前事件节点
差异渲染时支持事件更新
添加rpose.zindex(num)方法接口，以支持动态计算z-index

compiler

other

简易实现热刷新服务器替代第三方包，方便按需刷新、按需打开窗口
可通过配置样式库实现按需引用normalize样式
监视模式下修改.browserslistrc文件，重新编译全部页面
监视模式下修改rpose.config.btf文件，重新编译整个项目
监视模式下修改<svgicon>用到的图标文件，重新编译可能相关的组件及页面
监视模式下修改用到的图片文件，重新编译相关的组件及页面
监视模式下修改本地样式库用到的css文件，重新编译相关的组件及页面

`变更列表`

Ver 0.9.*

编译期检测require方法调用，自动安装代码中依赖的第三方包

Ver 0.8.*

Ver 0.7.*

差异渲染时支持事件更新
新增指令@key，作用类似vue的:key或react的key
新增指令@html，类似innerHTML的作用，谨慎使用
新增指令@text，类似innerTEXT的作用
优化虚拟节点函数，令其更精简
优化runtime包
新增指令@merge，针对特定标准标签的特殊场景，提供简化写法
比如input标签输入变更后，有时想把输入值写入state但又不想触发渲染，通常需要写onchange实现，数量一多就变得繁琐，这时可以简化的用@merge="fieldname"达到目的
配置文件rpose.config.btf中支持设定监视模式的端口，默认3700，设为random即随机

Ver 0.6.*

[methods]中使用类方法的方式写事件函数，支持私有属性和私有方法
[methods]中支持自定义同名函数替代框架的默认实现
[methods]中支持用装饰器 @action的方式绑定事件处理，支持标签选择器语法
[methods]中的变量在编译期做检查，有使用未定义变量则定位报错
错误信息对比定位提示，同一文件时自动合并，信息提示更加精准友好
@class增加伪类原子样式支持，如focus:bg-yellow
使用代理事件，event.targetNode存放当前事件节点，同一节点支持多个事件声明，编译期按事件类型名自动合并

Ver 0.5.*

新增指令@class，支持以灵活的原子方式书写样式
内置SVG图标组件 <svgicon>
指令@show添加修饰符支持，如@show.flex
优化样式库编译缓存，提升编译性能
监视模式下修改本地样式库用到的css文件，重新编译相关的组件及页面

Ver 0.4.*

Ver 0.3.*

新添指令@taglib、@csslib，组件支持[taglib]、[csslib]块定义

Ver 0.2.*

指令统一前缀为@以方便识别，如 @if、@ref、@show

Ver 0.1.* 概念版

LIST

@rpose/cli: https://github.com/gotoeasy/rpose/blob/master/cli/README.md

Readme

Keywords

Package Sidebar

Install

npm i rpose

Repository

github.com/gotoeasy/rpose

Homepage

github.com/gotoeasy/rpose#readme

Weekly Downloads

1

Version

0.9.1

License

MIT

Unpacked Size

19.2 kB

Total Files

5

Last publish

4 years ago

Collaborators

Try on RunKit

Report malware