# asta

**Repository Path**: 40288193/asta

## Basic Information

- **Project Name**: asta
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: asta-wc
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-23
- **Last Updated**: 2021-05-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Asta

Simple compiler for web component

### Use
asta 生成自定义元素的定义类，并自动define该类！ 最后返回该类！
declare var asta:(options)=>CustomComponentClass;
* options:
	定义一个组件时的配置声明！
	+ tag: 组件将被定义的标签名
	+ props: 组件响应的属性。 props属性变化时，自动更新视图
	+ emits: 和vue一样， 只是指示性的作用。 表示该组件可能产生的事件。 以后考虑增加配置，约定事件的冒泡及compose属性
	+ template:  相当于vue的template 。 定义组件模板。以后考虑如何缓存它
	        目前绑定属性要写 {ctx.count} {props.step} @click="ctx.add" 。以后升级模板写法，尽量去掉ctx的前缀！
			而且现在访问  {name} {queued} 可能还把内部状态值暴露出来了。 也是不友好的
			是否改名为template?
	+ style: 插入到组件内的样式（默认样式隔离，相当于scoped）. style是否需要动态，像view一样，待讨论！
	+ data: 返回组件的上下文的数据和方法的函数。  props ,$emit是保留键值！ 所有$开头的属性应该都保留起来
```js
import { asta } from 'asta'

asta(
  {
    tag: 'my-counter',
    props: ['btn-text', 'step'],
    emits: ['create', 'update', 'destory'], // 和vue一样， 只是指示性的作用。
    template: `<div part="info" >step={props.step},count={ count} </div> 
          <button part="btn" @click="add"> { props['btn-text']}</button>`,
    style: `
          div{font-size:20px;}
        `,
    data: () => ({
      count: 0,
      add: function () {
        this.count += +this.props.step
        this.$emit("countChange",this.count)
      },
    })
  }
)
```

### 如何使用自定义元素
定义一个tag元素之后， 该tag元素就和内置的div,p,a等标签一样，可以添加class,attrs,监听事件。 
甚至它可以无缝的应用到vue,react等框架中去！
原生API操作自定义元素如下：
```javascript
	let el = document.createElement('my-counter')
	el.setAttribute('btn-text', '增加计数5')
	el.setAttribute('step', 5) 
	document.body.append(el)
    // 原生事件也支持
	el.addEventListener("update",function(ev){
	console.log("组件更新",ev)
	})
```

### 未来计划等
* css的part已经默认支持
* slot已经默认支持。  是否像vue那样为slot传递scope待考虑。 因为这并不是web component标准的一部分