Yamjs NPM | npm.io

YamJS - a baseComponents for html

YamJS 一个 webComponent 的渲染函数组件;兼容非 webComponent 渲染组件基类
从 0.5.0 版本开始已经支持使用yamjs-loader去编辑代码；
若是需要兼容 IE9+ 需要引入yamjs/dist/polyfill.yam.for.ie.min.js
看实例

文档

YamJS 是一个针对 html 的开发的一个组件基类，让你开发一个组件，可以运行在原生 HTML/vue/react 等环境。

脚手架已经完善

 #安装

 npm i yamjs-cli -g

 #创建 keys联系我来获取 xu.xueliang@163.com

 yamjs create app keys

在目录路径执行

yarn dev开始开发模式
yarn build打包应用；开发应用时类似vue,reactjs的应用
yarn components 打包组件未模块文件，会自动生成yamComponet.esm.min.jsesModule 类型文件,yamComponet.common.min CommoJS 类型文件,yamComponet.min.js UMD 文件，三种类型用于其他框架使用

背景

在这个各种组件化的漫天飞的阶段，需要一种综合的组件来去结合所有的框架，那就是 webComponent。

只需要写一次即可，在其他地方就可以用了。所以就写了一个组件基类。

特点

可以在任意框架（如 vue，react）和非框架环境中使用
可以配置组件环境外部是否可以和组件交互
组件标签自动驱动，无需手动启动，达到即写即用。

组件基类--Yam

一个简单的组件构成

import Yam, { Component } from 'yamjs'
import MyTimer from './myTimer'
@Component({
  tagName: 'go-top',
  style: require('./goTop.stylus'),
  shadow: true,
  customElements: true,
  props: ['msg'],
})
class App extends Yam {
  $data() {
    return {
      list: [0, 12, 2, 3],
      index: 1,
    }
  }
  $beforeCreate() {
    console.log('-----beforeCreate')
  }
  $created() {
    console.log('-----created')
  }
  $beforeMount() {
    console.log('-----beforeMount')
  }
  $mounted() {
    console.log('-----mounted')
  }
  $beforeDestroy() {
    console.log('-----beforeDestroy')
  }
  $destroyed() {
    console.log('-----destroyed')
  }
  $beforeUpdate() {
    console.log('-----beforeUpdate')
  }
  $updated() {
    console.log('-----updated')
  }
  show(v) {
    this.$router.show()
    // console.log(v)
  }
  showList() {
    return this.list.map((v) => <li>{v}</li>)
  }
  switch(i) {
    // this.emit('ad')
    // console.log(this.$refs.mytim)
    this.$refs.mytim.showP()
    // this.index = i
  }
  childEmit(i) {
    console.log(`子组件传来信息` + i)
    console.log(this)
  }
  getList() {
    // 渲染其他组件方式
    return (
      <MyTimer
        msgTime={123 + '' + this.index}
        ref="mytim"
        showFn={this.showList.bind(this)}
      />
    )
  }
  render() {
    return (
      <div className="asd">
        {this.msg}
        {/* {this.list.map((v, k) => <li key={k} ani='fade'>{v}</li>) } */}
        <div>
          <span onClick={this.switch.bind(this, 2)}>我的</span>
          <span onClick={this.switch.bind(this, 1)}>nide</span>
        </div>
        {this.getList()}
        <div />
      </div>
    )
  }
}
export default App

兼容性

支持主流浏览器 IE9+

更新

0.6.0 (2020-09)

支持与 vue 混写，嵌套
优化更新机制，一个组件一个组件的更新
优化 diff

支持 function Component,

使用方式，直接函数方式，吧 props 当作参数传入
支持标签引入当作普通匿名标签，需要依附Yamjs才可以

function GetList(props) {
  let { index } = props
  // this.props = props
  console.log(this)
  return (
    <div $props={props}>
      {props}
      <div index={index + 12}>asdads is ACopm</div>
      IS GETLIST FUNCTION COMPONENTS {index}
    </div>
  )
}
@Component({
  tagName: 'switch-tab',
  style: require('./index.stylus'),
  props: ['tabs'],
})
class App extends Yam {
  render() {
    return (
      <div>
      <!-- 方法一 -->
     GetList({ index: this.active, onClick: () => console.log(222) })}
     <!-- 方法二 -->
     <GetList />
      </div>
    )
  }
}

0.5.4 (2020-03-30)

支持使用异步组件

  const app=()=>import('./b.js')

  render(){
    return <div>
    <app></app>
    </div>
  }

0.5.0 (2020-03-12)
- 支持使用 yamjs-loader webpack 加载器，并且已加入热更新
0.4.0 (2020-02-29)
- 优化 ie 系列加载（支持 ie9+）
- 优化不支持MutationObserver方法的浏览器（例如 ie10）无法自动渲染新加标签
  - 修改了 HTMLELEMENT 对象一些方法,可以自动去渲染标签 appendChild,insertBefore,removeChild,replaceChild,setAttribute
  - 添加方法 yamjsRender(el) 函数；手动去渲染
- 优化在 vue 项目中，低版本安卓组件未渲染出来
0.3.4 (2020-02-19)
- 优化 slot 规则，减少代码量
0.3.2 (2020-01-05)
- 优化 slot 插槽规则，默认插入和命名插入都支持
- 优化外环境下多个 slot 嵌套的复杂情况
- stroe 增加 replay 和 reset 方法；方便调试 store 内部的数据；
  - replay 把会从开始到现在的一切一切 commit 从新播放一边
  - reset 把状态归位现在
- 修复 ref 在更新时的显示
- 修复父子组件渲染时样式失效的状况
0.2.5 (2019-9-18)
- 优化 ref，支持ref={(v)=>{this.dom=v}}写法；直接把 ref 赋值到this.com上
- 优化 slot；在外环镜中嵌套 slot 时，当 slot 渲染组件时，该组件状态会被保存住，不会被销毁；（暂行方法，等待后续优化）
0.2.4 (2019-9-17)
- 添加设置环境 Yam.setConfig({isdev:true})
0.2.0 (2019-8-1)
- 优化 slot 加载显示，调成为，若只有一个 slot 并且定了 name，那么要想插入内容需要定义 slot 属性与之对应，否则不予显示
- 优化router插件，当没有匹配到组件时，默认显示内置的 404 页面；也可以使用自定义 404 页面；详见路由管理
- 优化 diff 算法，当检测到元素时组件时不再进行检测更改，组件的 diff 只是针对自身的组件
0.1.9
- 优化 store 使用方式
- 添加 router路由管理
0.1.8
- 添加 $slot 属性，显示 slot 是否有内容
- 添加 store状态管理，在不用组件更改状态，所有的状态都会改变,
- 修复未加载完毕立即调用update方法无效
0.1.4
- 修复 $updated 回调里进行赋值（是被监听的值时），有时会进入死循环。在结尾加入 return false 可以避免。（原理时在一定时间（500ms）内不更新，谨慎使用）
- 优化属性变化时，值属性是 function 不再更新。
0.1.3
- 修复属性变化时，值为 false 或者 0 时不变的话的问题