feat(omi): using adoptedStyleSheets
This commit is contained in:
dntzhang
parent
a2ae0a5c4c
commit
cff7830fe3
|
|
@ -1,240 +1,265 @@
|
|||
English | [简体中文](https://github.com/Tencent/omi/blob/master/README.CN.md)
|
||||
|
||||
<p align="center"><img src="https://tencent.github.io/omi/assets/logo.svg" alt="omi" width="100"/></p>
|
||||
<p align="center"><img src="https://tencent.github.io/omi/assets/omi-v6.jpg" alt="omi" width="1000"/></p>
|
||||
<h2 align="center">Omi - Front End Cross-Frameworks Framework</h2>
|
||||
<p align="center">Merge Web Components, JSX, Virtual DOM, Functional style, observe or Proxy into one framework with tiny size and high performance. Write components once, using in everywhere, such as Omi, React, Preact, Vue or Angular.</p>
|
||||
|
||||
## Quick Preview
|
||||
## With TypeScript
|
||||
|
||||
Pass data through the component tree without having to pass props down manually at every level by store, auto update the view on demand.
|
||||
```ts
|
||||
import { tag, WeElement, h, extractClass } from 'omi'
|
||||
import * as css from './index.scss'
|
||||
|
||||
```jsx
|
||||
import { define, render } from 'omi'
|
||||
|
||||
class Store {
|
||||
data = {
|
||||
count: 1
|
||||
}
|
||||
sub = () => {
|
||||
this.data.count--
|
||||
}
|
||||
add = () => {
|
||||
this.data.count++
|
||||
}
|
||||
interface Props {
|
||||
size?: 'medium' | 'small' | 'mini',
|
||||
type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
|
||||
plain?: boolean,
|
||||
round?: boolean,
|
||||
circle?: boolean,
|
||||
loading?: boolean,
|
||||
disabled?: boolean,
|
||||
icon?: string,
|
||||
autofocus?: boolean,
|
||||
nativeType?: 'button' | 'submit' | 'reset',
|
||||
block?: boolean
|
||||
text?: string
|
||||
}
|
||||
|
||||
define('my-counter', _ => (
|
||||
<div>
|
||||
<button onClick={_.store.sub}>-</button>
|
||||
<span>{_.store.data.count}</span>
|
||||
<button onClick={_.store.add}>+</button>
|
||||
</div>
|
||||
), {
|
||||
use: ['count'],
|
||||
//or using useSelf, useSelf will update self only, exclude children components
|
||||
//useSelf: ['count'],
|
||||
css: `span { color: red; }`,
|
||||
installed() {
|
||||
console.log('installed')
|
||||
}
|
||||
})
|
||||
@tag('o-button')
|
||||
export default class Button extends WeElement<Props>{
|
||||
static css = css
|
||||
|
||||
render(<my-counter />, 'body', new Store)
|
||||
```
|
||||
static defaultProps = {
|
||||
plain: false,
|
||||
round: false,
|
||||
circle: false,
|
||||
loading: false,
|
||||
disabled: false,
|
||||
autofocus: false,
|
||||
nativeType: 'button',
|
||||
block: false
|
||||
}
|
||||
|
||||
* `<my-counter></my-counter>` can be used in any framework or no framework, such as `document.createElement('my-counter')`
|
||||
static propTypes = {
|
||||
size: String,
|
||||
type: String,
|
||||
plain: Boolean,
|
||||
round: Boolean,
|
||||
circle: Boolean,
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
icon: String,
|
||||
autofocus: Boolean,
|
||||
nativeType: String,
|
||||
block: Boolean,
|
||||
text: String
|
||||
}
|
||||
|
||||
You can also use `useSelf`, `useSelf` only updates itself. When using `useSelf`, the corresponding attributes are accessed through `usingSelf` in JSX.
|
||||
|
||||
You can also implement `computed` props through `compute`, such as:
|
||||
|
||||
```jsx
|
||||
define('my-counter', _ => (
|
||||
<div>
|
||||
<button onClick={_.store.sub}>-</button>
|
||||
<span>{_.store.data.count}</span>
|
||||
<button onClick={_.store.add}>+</button>
|
||||
<div>Double: {_.computed.doubleCount}</div>
|
||||
</div>
|
||||
), {
|
||||
use: ['count'],
|
||||
compute: {
|
||||
doubleCount() {
|
||||
return this.count * 2
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Path is also supported:
|
||||
|
||||
```js
|
||||
class Store {
|
||||
data = {
|
||||
list: [
|
||||
{ name: { first: 'dnt', last: 'zhang' } }
|
||||
]
|
||||
render(props) {
|
||||
return <button disabled={props.disabled} {...extractClass(props, 'o-button', {
|
||||
['o-button-' + props.type]: props.type,
|
||||
['o-button-' + props.size]: props.size,
|
||||
'is-plain': props.plain,
|
||||
'is-round': props.round,
|
||||
'is-circle': props.circle,
|
||||
'is-disabled': props.disabled,
|
||||
'is-block': props.block
|
||||
})} type={props.nativeType} >
|
||||
{props.loading && <i class='icon-loading'></i>}
|
||||
{props.text}
|
||||
<slot></slot>
|
||||
</button>
|
||||
}
|
||||
}
|
||||
|
||||
...
|
||||
...
|
||||
|
||||
define('my-counter', _ => (
|
||||
...
|
||||
...
|
||||
), {
|
||||
use: [
|
||||
'list[0].name', //Direct string path dep, accessible through this.using[0]
|
||||
],
|
||||
compute: {
|
||||
fullName() {
|
||||
return this.list[0].name.first + this.list[0].name.last
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
## Omiu
|
||||
|
||||
### Multi-store injection
|
||||
> Cross-Frameworks and [Cross-Themes](https://tencent.github.io/omi/components/docs/#/theme?index=0&subIndex=1) UI Components powered by Omi
|
||||
|
||||
```jsx
|
||||
import { define, render } from 'omi'
|
||||
| **Name** | **Status** | **Example** | **Docs** |
|
||||
| -------------- | ----------|----------- | ----------------|
|
||||
| [@omiu/button][omiu-button-github] | [![omiu-button-status]][omiu-button-package]|[CodePen][omiu-button-codepen] | [Button Docs][omiu-button-docs]|
|
||||
| [@omiu/icon][omiu-icon-github] | [![omiu-icon-status]][omiu-icon-package]|[Icon Online][omiu-icon-codepen] | [Icon Docs][omiu-icon-docs]|
|
||||
| [@omiu/tabs][omiu-tabs-github] | [![omiu-tabs-status]][omiu-tabs-package]|[CodePen][omiu-tabs-codepen] | [Tabs Docs][omiu-tabs-docs]|
|
||||
| [@omiu/radio][omiu-radio-github] | [![omiu-radio-status]][omiu-radio-package]|[CodePen][omiu-radio-codepen] | [Radio Docs][omiu-radio-docs]|
|
||||
| [@omiu/link][omiu-link-github] | [![omiu-link-status]][omiu-link-package]|[CodePen][omiu-link-codepen] | [Link Docs][omiu-link-docs]|
|
||||
| [@omiu/checkbox][omiu-checkbox-github] | [![omiu-checkbox-status]][omiu-checkbox-package]|[CodePen][omiu-checkbox-codepen] | [Checkbox Docs][omiu-checkbox-docs]|
|
||||
| [@omiu/hamburger-menu][omiu-hamburger-menu-github] | [![omiu-hamburger-menu-status]][omiu-hamburger-menu-package]|[CodePen][omiu-hamburger-menu-codepen] | [HamburgerMenu Docs][omiu-hamburger-menu-docs]|
|
||||
| [@omiu/input][omiu-input-github] | [![omiu-input-status]][omiu-input-package]|[CodePen][omiu-input-codepen] | [Input Docs][omiu-input-docs]|
|
||||
| [@omiu/tree][omiu-tree-github] | [![omiu-tree-status]][omiu-tree-package]|[CodePen][omiu-tree-codepen] | [Tree Docs][omiu-tree-docs]|
|
||||
| [@omiu/pagination][omiu-pagination-github] | [![omiu-pagination-status]][omiu-pagination-package]|[CodePen][omiu-pagination-codepen] | [Pagination Docs][omiu-pagination-docs]|
|
||||
| [@omiu/loading][omiu-loading-github] | [![omiu-loading-status]][omiu-loading-package]|[CodePen][omiu-loading-codepen] | [Loading Docs][omiu-loading-docs]|
|
||||
| [@omiu/toast][omiu-toast-github] | [![omiu-toast-status]][omiu-toast-package]|[CodePen][omiu-toast-codepen] | [Toast Docs][omiu-toast-docs]|
|
||||
| [@omiu/action-sheet][omiu-action-sheet-github] | [![omiu-action-sheet-status]][omiu-action-sheet-package]|[CodePen][omiu-action-sheet-codepen] | [ActionSheet Docs][omiu-action-sheet-docs]|
|
||||
| [@omiu/switch][omiu-switch-github] | [![omiu-switch-status]][omiu-switch-package]|[CodePen][omiu-switch-codepen] | [Switch Docs][omiu-switch-docs]|
|
||||
| [@omiu/color-picker][omiu-color-picker-github] | [![omiu-color-picker-status]][omiu-color-picker-package]|[CodePen][omiu-color-picker-codepen] | [ColorPicker Docs][omiu-color-picker-docs]|
|
||||
| [@omiu/chart][omiu-chart-github] | [![omiu-chart-status]][omiu-chart-package]|[CodePen][omiu-chart-codepen] | [Chart Docs][omiu-chart-docs]|
|
||||
| [@omiu/toggle-icon][omiu-toggle-icon-github] | [![omiu-toggle-icon-status]][omiu-toggle-icon-package]|[CodePen][omiu-toggle-icon-codepen] | [ToggleIcon Docs][omiu-toggle-icon-docs]|
|
||||
| [@omiu/o-icon][omiu-o-icon-github] | [![omiu-o-icon-status]][omiu-o-icon-package]|[CodePen][omiu-o-icon-codepen] | [OIcon Docs][omiu-o-icon-docs]|
|
||||
| [@omiu/badge][omiu-badge-github] | [![omiu-badge-status]][omiu-badge-package]|[CodePen][omiu-badge-codepen] | [Badge Docs][omiu-badge-docs]|
|
||||
| [@omiu/avatar][omiu-avatar-github] | [![omiu-avatar-status]][omiu-avatar-package]|[CodePen][omiu-avatar-codepen] | [Avatar Docs][omiu-avatar-docs]|
|
||||
| [@omiu/breadcrumb][omiu-breadcrumb-github] | [![omiu-breadcrumb-status]][omiu-breadcrumb-package]|[CodePen][omiu-breadcrumb-codepen] | [Breadcrumb Docs][omiu-breadcrumb-docs]|
|
||||
| [@omiu/bottom-nav][omiu-bottom-nav-github] | [![omiu-bottom-nav-status]][omiu-bottom-nav-package]|[CodePen][omiu-bottom-nav-codepen] | [BottomNav Docs][omiu-bottom-nav-docs]|
|
||||
| [@omiu/transition][omiu-transition-github] | [![omiu-transition-status]][omiu-transition-package]|[CodePen][omiu-transition-codepen] | [Transition Docs][omiu-transition-docs]|
|
||||
| [@omiu/dialog][omiu-dialog-github] | [![omiu-dialog-status]][omiu-dialog-package]|[CodePen][omiu-dialog-codepen] | [Dialog Docs][omiu-dialog-docs]|
|
||||
| [@omiu/dialog-extention][omiu-dialog-extention-github] | [![omiu-dialog-extention-status]][omiu-dialog-extention-package]|[CodePen][omiu-dialog-extention-codepen] | [DialogExtention Docs][omiu-dialog-extention-docs]|
|
||||
| Coming... | | | |
|
||||
| Coming... | | | |
|
||||
|
||||
define('my-app', _ => {
|
||||
const store = _.store.storeA
|
||||
const { data, add, sub } = store
|
||||
return (
|
||||
<p>
|
||||
Clicked: {data.count} times
|
||||
<button onClick={add}>+</button>
|
||||
<button onClick={sub}>-</button>
|
||||
[omiu-button-github]: https://github.com/Tencent/omi/tree/master/components/button
|
||||
[omiu-button-status]: https://img.shields.io/npm/v/@omiu/button.svg
|
||||
[omiu-button-package]: https://www.npmjs.com/package/@omiu/button
|
||||
[omiu-button-docs]: https://tencent.github.io/omi/components/docs/index.html#/button
|
||||
[omiu-button-codepen]: https://codepen.io/omijs/pen/LYppwYG
|
||||
|
||||
<div>
|
||||
{_.store.storeB.data.msg}
|
||||
<button onClick={_.store.storeB.changeMsg}>
|
||||
change storeB's msg
|
||||
</button>
|
||||
</div>
|
||||
</p>
|
||||
)
|
||||
}, {
|
||||
useSelf: {
|
||||
storeA: ['count', 'adding'],
|
||||
storeB: ['msg']
|
||||
}
|
||||
})
|
||||
[omiu-icon-github]: https://github.com/Tencent/omi/tree/master/components/icon
|
||||
[omiu-icon-status]: https://img.shields.io/npm/v/@omiu/icon.svg
|
||||
[omiu-icon-package]: https://www.npmjs.com/package/@omiu/icon
|
||||
[omiu-icon-docs]: https://tencent.github.io/omi/components/docs/index.html#/icon
|
||||
[omiu-icon-codepen]: https://tencent.github.io/omi/components/icon/demos/icon.html
|
||||
|
||||
const storeA = new class Store {
|
||||
data = {
|
||||
count: 0,
|
||||
adding: false
|
||||
}
|
||||
sub = () => {
|
||||
this.data.count--
|
||||
}
|
||||
add = () => {
|
||||
this.data.count++
|
||||
}
|
||||
}
|
||||
[omiu-tabs-github]: https://github.com/Tencent/omi/tree/master/components/tabs
|
||||
[omiu-tabs-status]: https://img.shields.io/npm/v/@omiu/tabs.svg
|
||||
[omiu-tabs-package]: https://www.npmjs.com/package/@omiu/tabs
|
||||
[omiu-tabs-docs]: https://tencent.github.io/omi/components/docs/index.html#/tabs
|
||||
[omiu-tabs-codepen]: https://codepen.io/omijs/pen/XWmjyXK
|
||||
|
||||
const storeB = new class Store {
|
||||
data = {
|
||||
msg: 'abc'
|
||||
}
|
||||
changeMsg = () => {
|
||||
this.data.msg = 'bcd'
|
||||
}
|
||||
}
|
||||
|
||||
render( <my-app /> , 'body', {
|
||||
storeA,
|
||||
storeB
|
||||
})
|
||||
```
|
||||
[omiu-radio-github]: https://github.com/Tencent/omi/tree/master/components/radio
|
||||
[omiu-radio-status]: https://img.shields.io/npm/v/@omiu/radio.svg
|
||||
[omiu-radio-package]: https://www.npmjs.com/package/@omiu/radio
|
||||
[omiu-radio-docs]: https://tencent.github.io/omi/components/docs/index.html#/radio
|
||||
[omiu-radio-codepen]: https://codepen.io/omijs/pen/GRpjapr
|
||||
|
||||
How to Multi-store injection with `compute` and `computed`? Very simple:
|
||||
|
||||
```jsx
|
||||
define('my-app', _ => {
|
||||
const store = _.store.storeA
|
||||
const { data, add, sub } = store
|
||||
return (
|
||||
<p>
|
||||
Clicked: {data.count} times
|
||||
<button onClick={add}>+</button>
|
||||
<button onClick={sub}>-</button>
|
||||
[omiu-link-github]: https://github.com/Tencent/omi/tree/master/components/link
|
||||
[omiu-link-status]: https://img.shields.io/npm/v/@omiu/link.svg
|
||||
[omiu-link-package]: https://www.npmjs.com/package/@omiu/link
|
||||
[omiu-link-docs]: https://tencent.github.io/omi/components/docs/index.html#/link
|
||||
[omiu-link-codepen]: https://codepen.io/omijs/pen/KKdNBaO
|
||||
|
||||
<div>
|
||||
{_.store.storeB.data.msg}
|
||||
<button onClick={_.store.storeB.changeMsg}>
|
||||
change storeB's msg
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>{_.computed.dobuleCount}</div>
|
||||
<div>{_.computed.reverseMsg}</div>
|
||||
</p>
|
||||
)
|
||||
}, {
|
||||
useSelf: {
|
||||
storeA: ['count', 'adding'],
|
||||
storeB: ['msg']
|
||||
},
|
||||
compute: {
|
||||
dobuleCount() {
|
||||
return this.storeA.data.count * 2
|
||||
},
|
||||
reverseMsg() {
|
||||
return this.storeB.data.msg.split('').reverse().join('')
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
[omiu-hamburger-menu-github]: https://github.com/Tencent/omi/tree/master/components/hamburger-menu
|
||||
[omiu-hamburger-menu-status]: https://img.shields.io/npm/v/@omiu/hamburger-menu.svg
|
||||
[omiu-hamburger-menu-package]: https://www.npmjs.com/package/@omiu/hamburger-menu
|
||||
[omiu-hamburger-menu-docs]: https://tencent.github.io/omi/components/docs/index.html#/hamburger-menu
|
||||
[omiu-hamburger-menu-codepen]: https://codepen.io/omijs/pen/MWapaJd
|
||||
|
||||
### API and Hooks
|
||||
|
||||
```jsx
|
||||
define('my-component', _ => (
|
||||
...
|
||||
...
|
||||
), {
|
||||
use: ['count', 'path.a', 'path[1].b'],
|
||||
useSelf: ['path.c', 'path[1].d'],
|
||||
compute: {
|
||||
doubleCount() {
|
||||
return this.count * 2
|
||||
}
|
||||
},
|
||||
css: 'h1 { color: red; }',
|
||||
propTypes: { },
|
||||
defaultProps: { },
|
||||
sLightDom: true, //default is false
|
||||
[omiu-input-github]: https://github.com/Tencent/omi/tree/master/components/input
|
||||
[omiu-input-status]: https://img.shields.io/npm/v/@omiu/input.svg
|
||||
[omiu-input-package]: https://www.npmjs.com/package/@omiu/input
|
||||
[omiu-input-docs]: https://tencent.github.io/omi/components/docs/index.html#/input
|
||||
[omiu-input-codepen]: https://codepen.io/omijs/pen/yLYMGqa
|
||||
|
||||
//life cycle
|
||||
install() { },
|
||||
installed() { },
|
||||
uninstall() { },
|
||||
receiveProps() { },
|
||||
beforeUpdate() { },
|
||||
updated() { },
|
||||
beforeRender() { },
|
||||
rendered() { },
|
||||
[omiu-checkbox-github]: https://github.com/Tencent/omi/tree/master/components/checkbox
|
||||
[omiu-checkbox-status]: https://img.shields.io/npm/v/@omiu/checkbox.svg
|
||||
[omiu-checkbox-package]: https://www.npmjs.com/package/@omiu/checkbox
|
||||
[omiu-checkbox-docs]: https://tencent.github.io/omi/components/docs/index.html#/checkbox
|
||||
[omiu-checkbox-codepen]: https://codepen.io/omijs/pen/MWapwNZ
|
||||
|
||||
//custom methods
|
||||
myMethodA() { },
|
||||
myMethodB() { }
|
||||
[omiu-switch-github]: https://github.com/Tencent/omi/tree/master/components/switch
|
||||
[omiu-switch-status]: https://img.shields.io/npm/v/@omiu/switch.svg
|
||||
[omiu-switch-package]: https://www.npmjs.com/package/@omiu/switch
|
||||
[omiu-switch-docs]: https://tencent.github.io/omi/components/docs/index.html#/switch
|
||||
[omiu-switch-codepen]: https://codepen.io/omijs/pen/BaoRpLd
|
||||
|
||||
})
|
||||
```
|
||||
[omiu-tree-github]: https://github.com/Tencent/omi/tree/master/components/tree
|
||||
[omiu-tree-status]: https://img.shields.io/npm/v/@omiu/tree.svg
|
||||
[omiu-tree-package]: https://www.npmjs.com/package/@omiu/tree
|
||||
[omiu-tree-docs]: https://tencent.github.io/omi/components/docs/index.html#/tree
|
||||
[omiu-tree-codepen]: https://codepen.io/omijs/pen/yLYMrdg
|
||||
|
||||
### Inject use or useSelf through prop
|
||||
[omiu-pagination-github]: https://github.com/Tencent/omi/tree/master/components/pagination
|
||||
[omiu-pagination-status]: https://img.shields.io/npm/v/@omiu/pagination.svg
|
||||
[omiu-pagination-package]: https://www.npmjs.com/package/@omiu/pagination
|
||||
[omiu-pagination-docs]: https://tencent.github.io/omi/components/docs/index.html#/pagination
|
||||
[omiu-pagination-codepen]: https://codepen.io/omijs/pen/MWamyBQ
|
||||
|
||||
```jsx
|
||||
<my-counter use={['count']} ></my-counter>
|
||||
```
|
||||
[omiu-loading-github]: https://github.com/Tencent/omi/tree/master/components/loading
|
||||
[omiu-loading-status]: https://img.shields.io/npm/v/@omiu/loading.svg
|
||||
[omiu-loading-package]: https://www.npmjs.com/package/@omiu/loading
|
||||
[omiu-loading-docs]: https://tencent.github.io/omi/components/docs/index.html#/loading
|
||||
[omiu-loading-codepen]: https://codepen.io/omijs/pen/oNjZRwO
|
||||
|
||||
[omiu-toast-github]: https://github.com/Tencent/omi/tree/master/components/toast
|
||||
[omiu-toast-status]: https://img.shields.io/npm/v/@omiu/toast.svg
|
||||
[omiu-toast-package]: https://www.npmjs.com/package/@omiu/toast
|
||||
[omiu-toast-docs]: https://tencent.github.io/omi/components/docs/index.html#/toast
|
||||
[omiu-toast-codepen]: https://codepen.io/omijs/pen/YzyVwOO
|
||||
|
||||
[omiu-action-sheet-github]: https://github.com/Tencent/omi/tree/master/components/action-sheet
|
||||
[omiu-action-sheet-status]: https://img.shields.io/npm/v/@omiu/action-sheet.svg
|
||||
[omiu-action-sheet-package]: https://www.npmjs.com/package/@omiu/action-sheet
|
||||
[omiu-action-sheet-docs]: https://tencent.github.io/omi/components/docs/index.html#/action-sheet
|
||||
[omiu-action-sheet-codepen]: https://codepen.io/omijs/pen/wvKdoNJ
|
||||
|
||||
[omiu-color-picker-github]: https://github.com/Tencent/omi/tree/master/components/color-picker
|
||||
[omiu-color-picker-status]: https://img.shields.io/npm/v/@omiu/color-picker.svg
|
||||
[omiu-color-picker-package]: https://www.npmjs.com/package/@omiu/color-picker
|
||||
[omiu-color-picker-docs]: https://tencent.github.io/omi/components/docs/index.html#/color-picker
|
||||
[omiu-color-picker-codepen]: https://codepen.io/omijs/pen/gOaWmZE
|
||||
|
||||
[omiu-chart-github]: https://github.com/Tencent/omi/tree/master/components/chart
|
||||
[omiu-chart-status]: https://img.shields.io/npm/v/@omiu/chart.svg
|
||||
[omiu-chart-package]: https://www.npmjs.com/package/@omiu/chart
|
||||
[omiu-chart-docs]: https://tencent.github.io/omi/components/docs/index.html#/chart
|
||||
[omiu-chart-codepen]: https://codepen.io/omijs/pen/pojPKLr
|
||||
|
||||
[omiu-toggle-icon-github]: https://github.com/Tencent/omi/tree/master/components/toggle-icon
|
||||
[omiu-toggle-icon-status]: https://img.shields.io/npm/v/@omiu/toggle-icon.svg
|
||||
[omiu-toggle-icon-package]: https://www.npmjs.com/package/@omiu/toggle-icon
|
||||
[omiu-toggle-icon-docs]: https://tencent.github.io/omi/components/docs/index.html#/toggle-icon
|
||||
[omiu-toggle-icon-codepen]: https://codepen.io/omijs/pen/ZEbKwXX
|
||||
|
||||
[omiu-o-icon-github]: https://github.com/Tencent/omi/tree/master/components/o-icon
|
||||
[omiu-o-icon-status]: https://img.shields.io/npm/v/@omiu/o-icon.svg
|
||||
[omiu-o-icon-package]: https://www.npmjs.com/package/@omiu/o-icon
|
||||
[omiu-o-icon-docs]: https://tencent.github.io/omi/components/docs/index.html#/o-icon
|
||||
[omiu-o-icon-codepen]: https://codepen.io/omijs/pen/QWjgapY
|
||||
|
||||
[omiu-badge-github]: https://github.com/Tencent/omi/tree/master/components/badge
|
||||
[omiu-badge-status]: https://img.shields.io/npm/v/@omiu/badge.svg
|
||||
[omiu-badge-package]: https://www.npmjs.com/package/@omiu/badge
|
||||
[omiu-badge-docs]: https://tencent.github.io/omi/components/docs/index.html#/badge
|
||||
[omiu-badge-codepen]: https://codepen.io/omijs/pen/WNQOdaB
|
||||
|
||||
[omiu-avatar-github]: https://github.com/Tencent/omi/tree/master/components/avatar
|
||||
[omiu-avatar-status]: https://img.shields.io/npm/v/@omiu/avatar.svg
|
||||
[omiu-avatar-package]: https://www.npmjs.com/package/@omiu/avatar
|
||||
[omiu-avatar-docs]: https://tencent.github.io/omi/components/docs/index.html#/avatar
|
||||
[omiu-avatar-codepen]: https://codepen.io/omijs/pen/QWjgaze
|
||||
|
||||
[omiu-breadcrumb-github]: https://github.com/Tencent/omi/tree/master/components/breadcrumb
|
||||
[omiu-breadcrumb-status]: https://img.shields.io/npm/v/@omiu/breadcrumb.svg
|
||||
[omiu-breadcrumb-package]: https://www.npmjs.com/package/@omiu/breadcrumb
|
||||
[omiu-breadcrumb-docs]: https://tencent.github.io/omi/components/docs/index.html#/breadcrumb
|
||||
[omiu-breadcrumb-codepen]: https://codepen.io/omijs/pen/wvKqGxB
|
||||
|
||||
|
||||
[omiu-bottom-nav-github]: https://github.com/Tencent/omi/tree/master/components/bottom-nav
|
||||
[omiu-bottom-nav-status]: https://img.shields.io/npm/v/@omiu/bottom-nav.svg
|
||||
[omiu-bottom-nav-package]: https://www.npmjs.com/package/@omiu/bottom-nav
|
||||
[omiu-bottom-nav-docs]: https://tencent.github.io/omi/components/docs/index.html#/bottom-nav
|
||||
[omiu-bottom-nav-codepen]: https://codepen.io/omijs/pen/zYvdjEY
|
||||
|
||||
[omiu-transition-github]: https://github.com/Tencent/omi/tree/master/components/transition
|
||||
[omiu-transition-status]: https://img.shields.io/npm/v/@omiu/transition.svg
|
||||
[omiu-transition-package]: https://www.npmjs.com/package/@omiu/transition
|
||||
[omiu-transition-docs]: https://tencent.github.io/omi/components/docs/index.html#/transition
|
||||
[omiu-transition-codepen]: https://codepen.io/omijs/pen/JjYyezQ
|
||||
|
||||
[omiu-dialog-github]: https://github.com/Tencent/omi/tree/master/components/dialog
|
||||
[omiu-dialog-status]: https://img.shields.io/npm/v/@omiu/dialog.svg
|
||||
[omiu-dialog-package]: https://www.npmjs.com/package/@omiu/dialog
|
||||
[omiu-dialog-docs]: https://tencent.github.io/omi/components/docs/index.html#/dialog
|
||||
[omiu-dialog-codepen]: https://codepen.io/omijs/pen/JjYyezQ
|
||||
|
||||
[omiu-dialog-extention-github]: https://github.com/Tencent/omi/tree/master/components/dialog-extention
|
||||
[omiu-dialog-extention-status]: https://img.shields.io/npm/v/@omiu/dialog-extention.svg
|
||||
[omiu-dialog-extention-package]: https://www.npmjs.com/package/@omiu/dialog-extention
|
||||
[omiu-dialog-extention-docs]: https://tencent.github.io/omi/components/docs/index.html#/dialog-extention
|
||||
[omiu-dialog-extention-codepen]: https://codepen.io/omijs/pen/GRpOBmL
|
||||
|
||||
## Ecosystem of Omi
|
||||
|
||||
|
|
@ -247,7 +272,6 @@ define('my-component', _ => (
|
|||
| [omim](https://github.com/Tencent/omi/tree/master/packages/omim)| Cross **frameworks** and **themes** components.([DOCS & REPL](https://tencent.github.io/omi/packages/omim/docs/build/index.html) && [JOIN US!](https://github.com/Tencent/omi/tree/master/packages/omim#contribution))|
|
||||
| [omi-kbone ](https://github.com/Tencent/omi/tree/master/packages/omi-kbone)| 使用 omi + [kbone](https://github.com/wechat-miniprogram/kbone) 多端开发(小程序和Web)的贪吃蛇游戏。 |
|
||||
| [omio](https://github.com/Tencent/omi/tree/master/packages/omio)| Omi for old browsers with same api(IE8+)|
|
||||
| [omiv ](https://github.com/Tencent/omi/tree/master/packages/omiv)| 1kb store system for Vue apps. [SSR Now](https://github.com/Tencent/omi/tree/master/packages/vue-omiv-ssr-starter) |
|
||||
| [omis ](https://github.com/Tencent/omi/tree/master/packages/omis)| Omis + React|
|
||||
| [omi-ssr](https://github.com/Tencent/omi/tree/master/packages/omi-ssr)| Server-side rendering(support omio only)|
|
||||
| [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router) |Omi official router in 1KB js|
|
||||
|
|
@ -257,7 +281,7 @@ define('my-component', _ => (
|
|||
| [omil](https://github.com/Wscats/omil)|Webpack loader for Omi.js components.([DOCS](https://wscats.github.io/omi-docs/public/home/))|
|
||||
| [omi-snippets](https://github.com/Wscats/omi-snippets) |A beautify VSCode extension for .omi or .eno file, [Install now!](https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets)|
|
||||
| [obaa](https://github.com/Tencent/omi/tree/master/packages/obaa) or [JSONPatcherProxy](https://github.com/Palindrom/JSONPatcherProxy) | Observe or Proxy any object's any change |
|
||||
|
||||
<!-- | [omiv ](https://github.com/Tencent/omi/tree/master/packages/omiv)| 1kb store system for Vue apps. [SSR Now](https://github.com/Tencent/omi/tree/master/packages/vue-omiv-ssr-starter) | -->
|
||||
#### :snake:Snake MVP
|
||||
|
||||
| **Project** | **Description** |
|
||||
|
|
@ -266,9 +290,8 @@ define('my-component', _ => (
|
|||
| [omi-kbone-snake ](https://github.com/Tencent/omi/tree/master/packages/omi-kbone)| omi-kbone 写的 MVP 架构的跨端贪吃蛇游戏，支持小程序和 H5 |
|
||||
| [Preact-snake](https://github.com/Tencent/omi/tree/master/packages/preact-css/examples/snake) & [→ Touch the demo](https://tencent.github.io/omi/packages/preact-css/examples/snake/build/)| The Snake-Eating Game Based on MVP Architecture Written by Preact + [Preact-CSS](https://github.com/Tencent/omi/tree/master/packages/preact-css) + Omis |
|
||||
| [[P]react-snake](https://github.com/Tencent/omi/tree/master/packages/react-snake) & [→ Touch the demo](https://tencent.github.io/omi/packages/react-snake/build/index.html)| The Snake-Eating Game Based on MVP Architecture Written by React/Preact |
|
||||
| [vue-snake](https://github.com/Tencent/omi/tree/master/packages/vue-snake) | The Snake-Eating Game Based on MVP Architecture Written by Vue + Omiv |
|
||||
| [omix-snake](https://github.com/Tencent/omi/tree/master/packages/omix-snake) | The Snake-Eating Game Based on MVP Architecture Written by Omix |
|
||||
|
||||
<!-- | [vue-snake](https://github.com/Tencent/omi/tree/master/packages/vue-snake) | The Snake-Eating Game Based on MVP Architecture Written by Vue + Omiv | -->
|
||||
#### :+1:Mini Program(小程序)
|
||||
|
||||
| **Project** | **Description** |
|
||||
|
|
@ -327,7 +350,7 @@ define('my-component', _ => (
|
|||
- Web Components can also be a data-driven view, **`UI = fn(data)`**.
|
||||
- JSX is the best development experience (code intelligent completion and tip) UI Expression with least [grammatical noise](https://github.com/facebook/jsx#why-not-template-literals) and it's turing complete(template engine is not, es template string is but grammatical noise is too loud)
|
||||
- Look at [Facebook React vs Web Components](https://softwareengineering.stackexchange.com/questions/225400/pros-and-cons-of-facebooks-react-vs-web-components-polymer)，Omi **combines their advantages** and gives developers the **freedom to choose the way they like**
|
||||
- **Shadow DOM merges with Virtual DOM**, Omi uses both virtual DOM and real Shadow DOM to make view updates more accurate and faster
|
||||
- **Shadow DOM or Light DOM merges with Virtual DOM**, Omi uses both virtual DOM and real Shadow DOM to make view updates more accurate and faster
|
||||
- **Scoped CSS**'s best solution is [**Shadow DOM**](https://developers.google.com/web/fundamentals/web-components/shadowdom), the community churning out frameworks and libraries for Scoped CSS (using JS or JSON writing styles such as Radium, jsxstyle, react-style; binding to webpack using generated unique `className` `filename-classname-hash`, such as CSS Modules, Vue), are hack technologies; _and Shadow DOM Style is the perfect solution_.
|
||||
- The original **Path Updating** **store system**. Proxy-based automatic **accurate** update, **low power consumption**, high degree of freedom, excellent performance, easy integration of `requestIdleCallback`,It will automatically update UI partially when data is changed
|
||||
|
||||
|
|
@ -337,7 +360,7 @@ Compare TodoApp by Omi and React, Omi and React rendering DOM structure:
|
|||
| ------------------------------- | ----------------------------------- |----------------------------------- |
|
||||
|  |  |  |
|
||||
|
||||
Omi uses Shadow DOM based style isolation and semantic structure.
|
||||
Omi uses Shadow DOM or Light DOM based style isolation and semantic structure.
|
||||
|
||||
## Useful Resources
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* Omi v6.19.3 http://omijs.org
|
||||
* Omi v6.19.4 http://omijs.org
|
||||
* Front End Cross-Frameworks Framework.
|
||||
* By dntzhang https://github.com/dntzhang
|
||||
* Github: https://github.com/Tencent/omi
|
||||
|
|
@ -822,285 +822,289 @@
|
|||
var id = 0;
|
||||
|
||||
var WeElement = function (_HTMLElement) {
|
||||
_inherits(WeElement, _HTMLElement);
|
||||
_inherits(WeElement, _HTMLElement);
|
||||
|
||||
function WeElement() {
|
||||
_classCallCheck(this, WeElement);
|
||||
function WeElement() {
|
||||
_classCallCheck(this, WeElement);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, _HTMLElement.call(this));
|
||||
var _this = _possibleConstructorReturn(this, _HTMLElement.call(this));
|
||||
|
||||
_this.props = Object.assign({}, _this.constructor.defaultProps);
|
||||
_this.elementId = id++;
|
||||
_this.computed = {};
|
||||
return _this;
|
||||
}
|
||||
_this.props = Object.assign({}, _this.constructor.defaultProps);
|
||||
_this.elementId = id++;
|
||||
_this.computed = {};
|
||||
return _this;
|
||||
}
|
||||
|
||||
WeElement.prototype.connectedCallback = function connectedCallback() {
|
||||
var p = this.parentNode;
|
||||
while (p && !this.store) {
|
||||
this.store = p.store;
|
||||
p = p.parentNode || p.host;
|
||||
}
|
||||
WeElement.prototype.connectedCallback = function connectedCallback() {
|
||||
var p = this.parentNode;
|
||||
while (p && !this.store) {
|
||||
this.store = p.store;
|
||||
p = p.parentNode || p.host;
|
||||
}
|
||||
|
||||
this.attrsToProps();
|
||||
this.attrsToProps();
|
||||
|
||||
if (this.props.use) {
|
||||
this.use = this.props.use;
|
||||
}
|
||||
if (this.props.use) {
|
||||
this.use = this.props.use;
|
||||
}
|
||||
|
||||
if (this.props.useSelf) {
|
||||
this.use = this.props.useSelf;
|
||||
}
|
||||
if (this.props.useSelf) {
|
||||
this.use = this.props.useSelf;
|
||||
}
|
||||
|
||||
if (this.use) {
|
||||
var use = typeof this.use === 'function' ? this.use() : this.use;
|
||||
if (this.use) {
|
||||
var use = typeof this.use === 'function' ? this.use() : this.use;
|
||||
|
||||
if (options.isMultiStore) {
|
||||
var _updatePath = {};
|
||||
var using = {};
|
||||
for (var storeName in use) {
|
||||
_updatePath[storeName] = {};
|
||||
using[storeName] = {};
|
||||
getPath(use[storeName], _updatePath, storeName);
|
||||
getUse(this.store[storeName].data, use[storeName], using, storeName);
|
||||
this.store[storeName].instances.push(this);
|
||||
}
|
||||
this.using = using;
|
||||
this._updatePath = _updatePath;
|
||||
} else {
|
||||
this._updatePath = getPath(use);
|
||||
this.using = getUse(this.store.data, use);
|
||||
this.store.instances.push(this);
|
||||
}
|
||||
}
|
||||
if (this.useSelf) {
|
||||
var _use = typeof this.useSelf === 'function' ? this.useSelf() : this.useSelf;
|
||||
if (options.isMultiStore) {
|
||||
var _updatePath2 = {};
|
||||
var _using = {};
|
||||
for (var _storeName in _use) {
|
||||
getPath(_use[_storeName], _updatePath2, _storeName);
|
||||
getUse(this.store[_storeName].data, _use[_storeName], _using, _storeName);
|
||||
this.store[_storeName].updateSelfInstances.push(this);
|
||||
}
|
||||
this.usingSelf = _using;
|
||||
this._updateSelfPath = _updatePath2;
|
||||
} else {
|
||||
this._updateSelfPath = getPath(_use);
|
||||
this.usingSelf = getUse(this.store.data, _use);
|
||||
this.store.updateSelfInstances.push(this);
|
||||
}
|
||||
}
|
||||
if (options.isMultiStore) {
|
||||
var _updatePath = {};
|
||||
var using = {};
|
||||
for (var storeName in use) {
|
||||
_updatePath[storeName] = {};
|
||||
using[storeName] = {};
|
||||
getPath(use[storeName], _updatePath, storeName);
|
||||
getUse(this.store[storeName].data, use[storeName], using, storeName);
|
||||
this.store[storeName].instances.push(this);
|
||||
}
|
||||
this.using = using;
|
||||
this._updatePath = _updatePath;
|
||||
} else {
|
||||
this._updatePath = getPath(use);
|
||||
this.using = getUse(this.store.data, use);
|
||||
this.store.instances.push(this);
|
||||
}
|
||||
}
|
||||
if (this.useSelf) {
|
||||
var _use = typeof this.useSelf === 'function' ? this.useSelf() : this.useSelf;
|
||||
if (options.isMultiStore) {
|
||||
var _updatePath2 = {};
|
||||
var _using = {};
|
||||
for (var _storeName in _use) {
|
||||
getPath(_use[_storeName], _updatePath2, _storeName);
|
||||
getUse(this.store[_storeName].data, _use[_storeName], _using, _storeName);
|
||||
this.store[_storeName].updateSelfInstances.push(this);
|
||||
}
|
||||
this.usingSelf = _using;
|
||||
this._updateSelfPath = _updatePath2;
|
||||
} else {
|
||||
this._updateSelfPath = getPath(_use);
|
||||
this.usingSelf = getUse(this.store.data, _use);
|
||||
this.store.updateSelfInstances.push(this);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.compute) {
|
||||
for (var key in this.compute) {
|
||||
this.computed[key] = this.compute[key].call(options.isMultiStore ? this.store : this.store.data);
|
||||
}
|
||||
}
|
||||
if (this.compute) {
|
||||
for (var key in this.compute) {
|
||||
this.computed[key] = this.compute[key].call(options.isMultiStore ? this.store : this.store.data);
|
||||
}
|
||||
}
|
||||
|
||||
this.beforeInstall();
|
||||
this.install();
|
||||
this.afterInstall();
|
||||
this.beforeInstall();
|
||||
this.install();
|
||||
this.afterInstall();
|
||||
|
||||
var shadowRoot;
|
||||
if (this.constructor.isLightDom) {
|
||||
shadowRoot = this;
|
||||
} else {
|
||||
var shadowRoot;
|
||||
if (this.constructor.isLightDom) {
|
||||
shadowRoot = this;
|
||||
} else {
|
||||
|
||||
if (!this.shadowRoot) {
|
||||
shadowRoot = this.attachShadow({
|
||||
mode: 'open'
|
||||
});
|
||||
} else {
|
||||
shadowRoot = this.shadowRoot;
|
||||
var fc;
|
||||
while (fc = shadowRoot.firstChild) {
|
||||
shadowRoot.removeChild(fc);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!this.shadowRoot) {
|
||||
shadowRoot = this.attachShadow({
|
||||
mode: 'open'
|
||||
});
|
||||
} else {
|
||||
shadowRoot = this.shadowRoot;
|
||||
var fc;
|
||||
while (fc = shadowRoot.firstChild) {
|
||||
shadowRoot.removeChild(fc);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.constructor.css) {
|
||||
shadowRoot.appendChild(cssToDom(this.constructor.css));
|
||||
} else if (this.css) {
|
||||
shadowRoot.appendChild(cssToDom(typeof this.css === 'function' ? this.css() : this.css));
|
||||
}
|
||||
if (this.constructor.css) {
|
||||
this.styleSheet = new CSSStyleSheet();
|
||||
this.styleSheet.replaceSync(this.constructor.css);
|
||||
shadowRoot.adoptedStyleSheets = [this.styleSheet];
|
||||
}
|
||||
|
||||
this.beforeRender();
|
||||
options.afterInstall && options.afterInstall(this);
|
||||
if (this.css) {
|
||||
shadowRoot.appendChild(cssToDom(typeof this.css === 'function' ? this.css() : this.css));
|
||||
}
|
||||
|
||||
var rendered = this.render(this.props, this.store);
|
||||
this.beforeRender();
|
||||
options.afterInstall && options.afterInstall(this);
|
||||
|
||||
this.rootNode = diff(null, rendered, null, this);
|
||||
this.rendered();
|
||||
var rendered = this.render(this.props, this.store);
|
||||
|
||||
if (this.props.css) {
|
||||
this._customStyleElement = cssToDom(this.props.css);
|
||||
this._customStyleContent = this.props.css;
|
||||
shadowRoot.appendChild(this._customStyleElement);
|
||||
}
|
||||
this.rootNode = diff(null, rendered, null, this);
|
||||
this.rendered();
|
||||
|
||||
if (isArray(this.rootNode)) {
|
||||
this.rootNode.forEach(function (item) {
|
||||
shadowRoot.appendChild(item);
|
||||
});
|
||||
} else {
|
||||
this.rootNode && shadowRoot.appendChild(this.rootNode);
|
||||
}
|
||||
this.installed();
|
||||
this._isInstalled = true;
|
||||
};
|
||||
if (this.props.css) {
|
||||
this._customStyleElement = cssToDom(this.props.css);
|
||||
this._customStyleContent = this.props.css;
|
||||
shadowRoot.appendChild(this._customStyleElement);
|
||||
}
|
||||
|
||||
WeElement.prototype.disconnectedCallback = function disconnectedCallback() {
|
||||
this.uninstall();
|
||||
this._isInstalled = false;
|
||||
if (this.store) {
|
||||
if (options.isMultiStore) {
|
||||
for (var key in this.store) {
|
||||
var current = this.store[key];
|
||||
removeItem(this, current.instances);
|
||||
removeItem(this, current.updateSelfInstances);
|
||||
}
|
||||
} else {
|
||||
removeItem(this, this.store.instances);
|
||||
removeItem(this, this.store.updateSelfInstances);
|
||||
}
|
||||
}
|
||||
};
|
||||
if (isArray(this.rootNode)) {
|
||||
this.rootNode.forEach(function (item) {
|
||||
shadowRoot.appendChild(item);
|
||||
});
|
||||
} else {
|
||||
this.rootNode && shadowRoot.appendChild(this.rootNode);
|
||||
}
|
||||
this.installed();
|
||||
this._isInstalled = true;
|
||||
};
|
||||
|
||||
WeElement.prototype.update = function update(ignoreAttrs, updateSelf) {
|
||||
this._willUpdate = true;
|
||||
this.beforeUpdate();
|
||||
this.beforeRender();
|
||||
//fix null !== undefined
|
||||
if (this._customStyleContent != this.props.css) {
|
||||
this._customStyleContent = this.props.css;
|
||||
this._customStyleElement.textContent = this._customStyleContent;
|
||||
}
|
||||
this.attrsToProps(ignoreAttrs);
|
||||
WeElement.prototype.disconnectedCallback = function disconnectedCallback() {
|
||||
this.uninstall();
|
||||
this._isInstalled = false;
|
||||
if (this.store) {
|
||||
if (options.isMultiStore) {
|
||||
for (var key in this.store) {
|
||||
var current = this.store[key];
|
||||
removeItem(this, current.instances);
|
||||
removeItem(this, current.updateSelfInstances);
|
||||
}
|
||||
} else {
|
||||
removeItem(this, this.store.instances);
|
||||
removeItem(this, this.store.updateSelfInstances);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var rendered = this.render(this.props, this.store);
|
||||
this.rendered();
|
||||
WeElement.prototype.update = function update(ignoreAttrs, updateSelf) {
|
||||
this._willUpdate = true;
|
||||
this.beforeUpdate();
|
||||
this.beforeRender();
|
||||
//fix null !== undefined
|
||||
if (this._customStyleContent != this.props.css) {
|
||||
this._customStyleContent = this.props.css;
|
||||
this._customStyleElement.textContent = this._customStyleContent;
|
||||
}
|
||||
this.attrsToProps(ignoreAttrs);
|
||||
|
||||
this.rootNode = diff(this.rootNode, rendered, this.constructor.isLightDom ? this : this.shadowRoot, this, updateSelf);
|
||||
this._willUpdate = false;
|
||||
this.updated();
|
||||
};
|
||||
var rendered = this.render(this.props, this.store);
|
||||
this.rendered();
|
||||
|
||||
WeElement.prototype.forceUpdate = function forceUpdate() {
|
||||
this.update(true);
|
||||
};
|
||||
this.rootNode = diff(this.rootNode, rendered, this.constructor.isLightDom ? this : this.shadowRoot, this, updateSelf);
|
||||
this._willUpdate = false;
|
||||
this.updated();
|
||||
};
|
||||
|
||||
WeElement.prototype.updateProps = function updateProps(obj) {
|
||||
var _this2 = this;
|
||||
WeElement.prototype.forceUpdate = function forceUpdate() {
|
||||
this.update(true);
|
||||
};
|
||||
|
||||
Object.keys(obj).forEach(function (key) {
|
||||
_this2.props[key] = obj[key];
|
||||
if (_this2.prevProps) {
|
||||
_this2.prevProps[key] = obj[key];
|
||||
}
|
||||
});
|
||||
this.forceUpdate();
|
||||
};
|
||||
WeElement.prototype.updateProps = function updateProps(obj) {
|
||||
var _this2 = this;
|
||||
|
||||
WeElement.prototype.updateSelf = function updateSelf(ignoreAttrs) {
|
||||
this.update(ignoreAttrs, true);
|
||||
};
|
||||
Object.keys(obj).forEach(function (key) {
|
||||
_this2.props[key] = obj[key];
|
||||
if (_this2.prevProps) {
|
||||
_this2.prevProps[key] = obj[key];
|
||||
}
|
||||
});
|
||||
this.forceUpdate();
|
||||
};
|
||||
|
||||
WeElement.prototype.removeAttribute = function removeAttribute(key) {
|
||||
_HTMLElement.prototype.removeAttribute.call(this, key);
|
||||
//Avoid executing removeAttribute methods before connectedCallback
|
||||
this._isInstalled && this.update();
|
||||
};
|
||||
WeElement.prototype.updateSelf = function updateSelf(ignoreAttrs) {
|
||||
this.update(ignoreAttrs, true);
|
||||
};
|
||||
|
||||
WeElement.prototype.setAttribute = function setAttribute(key, val) {
|
||||
if (val && typeof val === 'object') {
|
||||
_HTMLElement.prototype.setAttribute.call(this, key, JSON.stringify(val));
|
||||
} else {
|
||||
_HTMLElement.prototype.setAttribute.call(this, key, val);
|
||||
}
|
||||
//Avoid executing setAttribute methods before connectedCallback
|
||||
this._isInstalled && this.update();
|
||||
};
|
||||
WeElement.prototype.removeAttribute = function removeAttribute(key) {
|
||||
_HTMLElement.prototype.removeAttribute.call(this, key);
|
||||
//Avoid executing removeAttribute methods before connectedCallback
|
||||
this._isInstalled && this.update();
|
||||
};
|
||||
|
||||
WeElement.prototype.pureRemoveAttribute = function pureRemoveAttribute(key) {
|
||||
_HTMLElement.prototype.removeAttribute.call(this, key);
|
||||
};
|
||||
WeElement.prototype.setAttribute = function setAttribute(key, val) {
|
||||
if (val && typeof val === 'object') {
|
||||
_HTMLElement.prototype.setAttribute.call(this, key, JSON.stringify(val));
|
||||
} else {
|
||||
_HTMLElement.prototype.setAttribute.call(this, key, val);
|
||||
}
|
||||
//Avoid executing setAttribute methods before connectedCallback
|
||||
this._isInstalled && this.update();
|
||||
};
|
||||
|
||||
WeElement.prototype.pureSetAttribute = function pureSetAttribute(key, val) {
|
||||
_HTMLElement.prototype.setAttribute.call(this, key, val);
|
||||
};
|
||||
WeElement.prototype.pureRemoveAttribute = function pureRemoveAttribute(key) {
|
||||
_HTMLElement.prototype.removeAttribute.call(this, key);
|
||||
};
|
||||
|
||||
WeElement.prototype.attrsToProps = function attrsToProps(ignoreAttrs) {
|
||||
if (options.ignoreAttrs || ignoreAttrs) return;
|
||||
var ele = this;
|
||||
ele.props['css'] = ele.getAttribute('css');
|
||||
var attrs = this.constructor.propTypes;
|
||||
if (!attrs) return;
|
||||
Object.keys(attrs).forEach(function (key) {
|
||||
var type = attrs[key];
|
||||
var val = ele.getAttribute(hyphenate(key));
|
||||
if (val !== null) {
|
||||
switch (type) {
|
||||
case String:
|
||||
ele.props[key] = val;
|
||||
break;
|
||||
case Number:
|
||||
ele.props[key] = Number(val);
|
||||
break;
|
||||
case Boolean:
|
||||
if (val === 'false' || val === '0') {
|
||||
ele.props[key] = false;
|
||||
} else {
|
||||
ele.props[key] = true;
|
||||
}
|
||||
break;
|
||||
case Array:
|
||||
case Object:
|
||||
if (val[0] === ':') {
|
||||
ele.props[key] = getValByPath(val.substr(1), Omi.$);
|
||||
} else {
|
||||
ele.props[key] = JSON.parse(val.replace(/(['"])?([a-zA-Z0-9_-]+)(['"])?:([^\/])/g, '"$2":$4').replace(/'([\s\S]*?)'/g, '"$1"').replace(/,(\s*})/g, '$1'));
|
||||
}
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
if (ele.constructor.defaultProps && ele.constructor.defaultProps.hasOwnProperty(key)) {
|
||||
ele.props[key] = ele.constructor.defaultProps[key];
|
||||
} else {
|
||||
ele.props[key] = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
WeElement.prototype.pureSetAttribute = function pureSetAttribute(key, val) {
|
||||
_HTMLElement.prototype.setAttribute.call(this, key, val);
|
||||
};
|
||||
|
||||
WeElement.prototype.fire = function fire(name, data) {
|
||||
this.dispatchEvent(new CustomEvent(name, {
|
||||
detail: data
|
||||
}));
|
||||
};
|
||||
WeElement.prototype.attrsToProps = function attrsToProps(ignoreAttrs) {
|
||||
if (options.ignoreAttrs || ignoreAttrs) return;
|
||||
var ele = this;
|
||||
ele.props['css'] = ele.getAttribute('css');
|
||||
var attrs = this.constructor.propTypes;
|
||||
if (!attrs) return;
|
||||
Object.keys(attrs).forEach(function (key) {
|
||||
var type = attrs[key];
|
||||
var val = ele.getAttribute(hyphenate(key));
|
||||
if (val !== null) {
|
||||
switch (type) {
|
||||
case String:
|
||||
ele.props[key] = val;
|
||||
break;
|
||||
case Number:
|
||||
ele.props[key] = Number(val);
|
||||
break;
|
||||
case Boolean:
|
||||
if (val === 'false' || val === '0') {
|
||||
ele.props[key] = false;
|
||||
} else {
|
||||
ele.props[key] = true;
|
||||
}
|
||||
break;
|
||||
case Array:
|
||||
case Object:
|
||||
if (val[0] === ':') {
|
||||
ele.props[key] = getValByPath(val.substr(1), Omi.$);
|
||||
} else {
|
||||
ele.props[key] = JSON.parse(val.replace(/(['"])?([a-zA-Z0-9_-]+)(['"])?:([^\/])/g, '"$2":$4').replace(/'([\s\S]*?)'/g, '"$1"').replace(/,(\s*})/g, '$1'));
|
||||
}
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
if (ele.constructor.defaultProps && ele.constructor.defaultProps.hasOwnProperty(key)) {
|
||||
ele.props[key] = ele.constructor.defaultProps[key];
|
||||
} else {
|
||||
ele.props[key] = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
WeElement.prototype.beforeInstall = function beforeInstall() {};
|
||||
WeElement.prototype.fire = function fire(name, data) {
|
||||
this.dispatchEvent(new CustomEvent(name, {
|
||||
detail: data
|
||||
}));
|
||||
};
|
||||
|
||||
WeElement.prototype.install = function install() {};
|
||||
WeElement.prototype.beforeInstall = function beforeInstall() {};
|
||||
|
||||
WeElement.prototype.afterInstall = function afterInstall() {};
|
||||
WeElement.prototype.install = function install() {};
|
||||
|
||||
WeElement.prototype.installed = function installed() {};
|
||||
WeElement.prototype.afterInstall = function afterInstall() {};
|
||||
|
||||
WeElement.prototype.uninstall = function uninstall() {};
|
||||
WeElement.prototype.installed = function installed() {};
|
||||
|
||||
WeElement.prototype.beforeUpdate = function beforeUpdate() {};
|
||||
WeElement.prototype.uninstall = function uninstall() {};
|
||||
|
||||
WeElement.prototype.updated = function updated() {};
|
||||
WeElement.prototype.beforeUpdate = function beforeUpdate() {};
|
||||
|
||||
WeElement.prototype.beforeRender = function beforeRender() {};
|
||||
WeElement.prototype.updated = function updated() {};
|
||||
|
||||
WeElement.prototype.rendered = function rendered() {};
|
||||
WeElement.prototype.beforeRender = function beforeRender() {};
|
||||
|
||||
WeElement.prototype.receiveProps = function receiveProps() {};
|
||||
WeElement.prototype.rendered = function rendered() {};
|
||||
|
||||
return WeElement;
|
||||
WeElement.prototype.receiveProps = function receiveProps() {};
|
||||
|
||||
return WeElement;
|
||||
}(HTMLElement);
|
||||
|
||||
WeElement.is = 'WeElement';
|
||||
|
|
@ -1802,7 +1806,239 @@
|
|||
return JSON.stringify(obj);
|
||||
}
|
||||
|
||||
var n=function(t,r,u,e){for(var p=1;p<r.length;p++){var s=r[p++],a="number"==typeof s?u[s]:s;1===r[p]?e[0]=a:2===r[p]?(e[1]=e[1]||{})[r[++p]]=a:3===r[p]?e[1]=Object.assign(e[1]||{},a):e.push(r[p]?t.apply(null,n(t,a,u,["",null])):a);}return e},t=function(n){for(var t,r,u=1,e="",p="",s=[0],a=function(n){1===u&&(n||(e=e.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?s.push(n||e,0):3===u&&(n||e)?(s.push(n||e,1), u=2):2===u&&"..."===e&&n?s.push(n,3):2===u&&e&&!n?s.push(!0,2,e):4===u&&r&&(s.push(n||e,2,r), r=""), e="";},f=0;f<n.length;f++){f&&(1===u&&a(), a(f));for(var h=0;h<n[f].length;h++)t=n[f][h], 1===u?"<"===t?(a(), s=[s], u=3):e+=t:p?t===p?p="":e+=t:'"'===t||"'"===t?p=t:">"===t?(a(), u=1):u&&("="===t?(u=4, r=e, e=""):"/"===t?(a(), 3===u&&(s=s[0]), u=s, (s=s[0]).push(u,4), u=0):" "===t||"\t"===t||"\n"===t||"\r"===t?(a(), u=2):e+=t);}return a(), s},r="function"==typeof Map,u=r?new Map:{},e=r?function(n){var r=u.get(n);return r||u.set(n,r=t(n)), r}:function(n){for(var r="",e=0;e<n.length;e++)r+=n[e].length+"-"+n[e];return u[r]||(u[r]=t(n))};function htm(t){var r=n(this,e(t),arguments,[]);return r.length>1?r:r[0]}
|
||||
var n=function(t,r,u,e){for(var p=1;p<r.length;p++){var s=r[p],h="number"==typeof s?u[s]:s,a=r[++p];1===a?e[0]=h:3===a?e[1]=Object.assign(e[1]||{},h):5===a?(e[1]=e[1]||{})[r[++p]]=h:6===a?e[1][r[++p]]+=h+"":e.push(a?t.apply(null,n(t,h,u,["",null])):h);}return e},t=function(n){for(var t,r,u=1,e="",p="",s=[0],h=function(n){1===u&&(n||(e=e.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?s.push(n||e,0):3===u&&(n||e)?(s.push(n||e,1), u=2):2===u&&"..."===e&&n?s.push(n,3):2===u&&e&&!n?s.push(!0,5,e):u>=5&&((e||!n&&5===u)&&(s.push(e,u,r), u=6), n&&(s.push(n,u,r), u=6)), e="";},a=0;a<n.length;a++){a&&(1===u&&h(), h(a));for(var f=0;f<n[a].length;f++)t=n[a][f], 1===u?"<"===t?(h(), s=[s], u=3):e+=t:4===u?"--"===e&&">"===t?(u=1, e=""):e=t+e[0]:p?t===p?p="":e+=t:'"'===t||"'"===t?p=t:">"===t?(h(), u=1):u&&("="===t?(u=5, r=e, e=""):"/"===t&&(u<5||">"===n[a][f+1])?(h(), 3===u&&(s=s[0]), u=s, (s=s[0]).push(u,2), u=0):" "===t||"\t"===t||"\n"===t||"\r"===t?(h(), u=2):e+=t), 3===u&&"!--"===e&&(u=4, s=s[0]);}return h(), s},r="function"==typeof Map,u=r?new Map:{},e=r?function(n){var r=u.get(n);return r||u.set(n,r=t(n)), r}:function(n){for(var r="",e=0;e<n.length;e++)r+=n[e].length+"-"+n[e];return u[r]||(u[r]=t(n))};function htm(t){var r=n(this,e(t),arguments,[]);return r.length>1?r:r[0]}
|
||||
|
||||
(function () {
|
||||
try {
|
||||
new window.CSSStyleSheet('a{}');
|
||||
return;
|
||||
} catch (e) {}
|
||||
|
||||
// TODO: this could really just by a dunderprop to keep the polyfill light.
|
||||
var INTERNAL = typeof Symbol !== 'undefined' ? Symbol('__s') : '__s';
|
||||
|
||||
/**
|
||||
* Problem 1:
|
||||
* CSSStyleSheet is nonconfigurable.
|
||||
* This means we're stuck with a ponyfill and not a "perfect" polyfill.
|
||||
*/
|
||||
// Object.defineProperty(window, 'CSSStyleSheet', {
|
||||
// configurable: true,
|
||||
// enumerable: true,
|
||||
// get: () => CSSStyleSheet
|
||||
// });
|
||||
|
||||
var OriginalCSSStyleSheet = window.CSSStyleSheet;
|
||||
|
||||
window.CSSStyleSheet = CSSStyleSheet;
|
||||
|
||||
var DOC;
|
||||
|
||||
var counter = 0;
|
||||
|
||||
/**
|
||||
* Problem #2:
|
||||
* CSSStyleSheet is not instantiable.
|
||||
* We can inherit from the real CSSStyleSheet in order to
|
||||
*/
|
||||
|
||||
function CSSStyleSheet(options) {
|
||||
if (!DOC) {
|
||||
var frame = document.createElement('iframe');
|
||||
frame.style.cssText = 'position:absolute;left:0;top:-9999px;width:1px;height:1px;';
|
||||
document.body.appendChild(frame);
|
||||
DOC = frame.contentWindow.document;
|
||||
}
|
||||
var style = DOC.createElement('style');
|
||||
style.$id = ++counter;
|
||||
style.childSheets = [];
|
||||
style.appendChild(DOC.createTextNode(''));
|
||||
DOC.body.appendChild(style);
|
||||
// console.log(style, sheet);
|
||||
Object.assign(style.sheet, options || {});
|
||||
this[INTERNAL] = style;
|
||||
}
|
||||
|
||||
// we can be nice and ensure that this holds:
|
||||
// document.createElement('style').stylesheet instanceof CSSStyleSeetPolyfill
|
||||
CSSStyleSheet.prototype = Object.create(OriginalCSSStyleSheet);
|
||||
|
||||
Object.defineProperty(CSSStyleSheet.prototype, 'cssRules', {
|
||||
get: function get() {
|
||||
return this[INTERNAL].sheet.cssRules;
|
||||
}
|
||||
});
|
||||
|
||||
CSSStyleSheet.prototype.replace = function (cssText) {
|
||||
var style = this[INTERNAL];
|
||||
return new Promise(function (resolve, reject) {
|
||||
var l = DOC.createElement('link');
|
||||
l.rel = 'preload';
|
||||
l.as = 'style';
|
||||
l.onload = function () {
|
||||
// sheet.ownerNode.firstChild.textContent = cssText;
|
||||
style.firstChild.data = cssText;
|
||||
for (var i = 0; i < style.childSheets.length; i++) {
|
||||
style.childSheets[i].firstChild.data = cssText;
|
||||
}
|
||||
// if (sheet.cssRules[0]) sheet.deleteRule(0);
|
||||
// sheet.insertRule(cssText);
|
||||
l.remove();
|
||||
resolve();
|
||||
};
|
||||
l.onerror = reject;
|
||||
l.href = 'data:text/css;base64,' + btoa(cssText);
|
||||
DOC.head.appendChild(l);
|
||||
});
|
||||
};
|
||||
|
||||
CSSStyleSheet.prototype.replaceSync = function (cssText) {
|
||||
var style = this[INTERNAL];
|
||||
if (cssText.replace(/\/\*[\s\S]+?\*\//g, '').match(/@import\s*\(\s*(['"])[^\1]*?\1\s*\)/)) {
|
||||
throw Error('no');
|
||||
}
|
||||
// if (sheet.cssRules[0]) sheet.deleteRule(0);
|
||||
// sheet.insertRule(cssText);
|
||||
// sheet.ownerNode.firstChild.textContent = cssText;
|
||||
style.firstChild.data = cssText;
|
||||
for (var i = 0; i < style.childSheets.length; i++) {
|
||||
style.childSheets[i].firstChild.data = cssText;
|
||||
}
|
||||
};
|
||||
|
||||
var oldInnerHTML = Object.getOwnPropertyDescriptor(ShadowRoot.prototype, 'innerHTML');
|
||||
var oldFirstChild = Object.getOwnPropertyDescriptor(Node.prototype, 'firstChild');
|
||||
var oldLastChild = Object.getOwnPropertyDescriptor(Node.prototype, 'lastChild');
|
||||
|
||||
function getState(obj) {
|
||||
return obj[INTERNAL] || (obj[INTERNAL] = {
|
||||
adoptedStyleSheets: [],
|
||||
sheets: [],
|
||||
id: ++counter
|
||||
});
|
||||
}
|
||||
|
||||
Object.defineProperties(ShadowRoot.prototype, {
|
||||
firstChild: {
|
||||
get: function get() {
|
||||
var child = oldFirstChild.get.call(this);
|
||||
while (child) {
|
||||
if (child[INTERNAL] == null) break;
|
||||
child = child.nextSibling;
|
||||
}
|
||||
return child;
|
||||
}
|
||||
},
|
||||
|
||||
lastChild: {
|
||||
get: function get() {
|
||||
var child = oldLastChild.get.call(this);
|
||||
while (child) {
|
||||
if (child[INTERNAL] == null) break;
|
||||
child = child.previousSibling;
|
||||
}
|
||||
return child;
|
||||
}
|
||||
},
|
||||
|
||||
// @TODO
|
||||
// childNodes: {},
|
||||
// children: {},
|
||||
|
||||
innerHTML: {
|
||||
get: function get() {
|
||||
var html = '';
|
||||
var child = oldFirstChild.get.call(this);
|
||||
while (child) {
|
||||
if (!child[INTERNAL]) {
|
||||
if (child.nodeType === 3) html += child.data;
|
||||
html += child.outerHTML;
|
||||
}
|
||||
child = child.nextSibling;
|
||||
}
|
||||
return html;
|
||||
// return old.get.call(this).replace(/</);
|
||||
},
|
||||
set: function set(html) {
|
||||
var child = oldFirstChild.get.call(this);
|
||||
var sheets = [];
|
||||
while (child) {
|
||||
if (child[INTERNAL]) sheets.push(child);
|
||||
child = child.nextSibling;
|
||||
}
|
||||
oldInnerHTML.set.call(this, html);
|
||||
child = oldFirstChild.get.call(this);
|
||||
for (var i = 0; i < sheets.length; i++) {
|
||||
this.insertBefore(sheets[i], child);
|
||||
}
|
||||
// this.insertAdjacentHTML(html, 'beforeend');
|
||||
}
|
||||
},
|
||||
|
||||
adoptedStyleSheets: {
|
||||
get: function get() {
|
||||
var state = getState(this);
|
||||
return state.adoptedStyleSheets;
|
||||
},
|
||||
|
||||
|
||||
// @TODO:
|
||||
// Chrome's implementation doesn't do any diffing, so the polyfill needn't either.
|
||||
// Also, we should always clone the passed Array and freeze it if available.
|
||||
set: function set(value) {
|
||||
var state = getState(this);
|
||||
var previous = state.adoptedStyleSheets.slice();
|
||||
var indices = [];
|
||||
if (!Array.isArray(value)) {
|
||||
value = [].concat(value || []);
|
||||
}
|
||||
// this[INTERNAL] = value;
|
||||
state.adoptedStyleSheets = value;
|
||||
for (var i = 0; i < value.length; i++) {
|
||||
var v = value[i];
|
||||
var index = previous.indexOf(v);
|
||||
if (index === -1) {
|
||||
var style = v[INTERNAL];
|
||||
var clone = style.cloneNode(true);
|
||||
// clone.setAttribute('data-is-constructed', state.id);
|
||||
clone[INTERNAL] = {};
|
||||
// clone.$parent = style;
|
||||
style.childSheets.push(clone);
|
||||
// clone.textContent = style.textContent;
|
||||
// clone.$id = style.$id;
|
||||
// state.sheets.push(clone);
|
||||
this.appendChild(clone);
|
||||
// console.log(this, clone, this.childNodes);
|
||||
// console.log(`found new sheet, adding.`, clone);
|
||||
} else {
|
||||
indices[index] = true;
|
||||
// const style = v[INTERNAL];
|
||||
}
|
||||
}
|
||||
for (var i = 0; i < previous.length; i++) {
|
||||
if (indices[i] !== true) {
|
||||
var prev = previous[i][INTERNAL];
|
||||
// const style = prev.$parent;
|
||||
for (var j = 0; j < prev.childSheets.length; j++) {
|
||||
var sheet = prev.childSheets[j];
|
||||
if (sheet.parentNode === this) {
|
||||
this.removeChild(sheet);
|
||||
prev.childSheets.splice(j, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
// for (let j = 0; j < state.sheets.length; j++) {
|
||||
// if (state.sheets[j].$id === prev.$id) {
|
||||
// state.sheets[j].remove();
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
h.f = Fragment;
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* Omi v6.19.3 http://omijs.org
|
||||
* Omi v6.19.4 http://omijs.org
|
||||
* Front End Cross-Frameworks Framework.
|
||||
* By dntzhang https://github.com/dntzhang
|
||||
* Github: https://github.com/Tencent/omi
|
||||
|
|
@ -819,285 +819,289 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|||
var id = 0;
|
||||
|
||||
var WeElement = function (_HTMLElement) {
|
||||
_inherits(WeElement, _HTMLElement);
|
||||
_inherits(WeElement, _HTMLElement);
|
||||
|
||||
function WeElement() {
|
||||
_classCallCheck(this, WeElement);
|
||||
function WeElement() {
|
||||
_classCallCheck(this, WeElement);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, _HTMLElement.call(this));
|
||||
var _this = _possibleConstructorReturn(this, _HTMLElement.call(this));
|
||||
|
||||
_this.props = Object.assign({}, _this.constructor.defaultProps);
|
||||
_this.elementId = id++;
|
||||
_this.computed = {};
|
||||
return _this;
|
||||
}
|
||||
_this.props = Object.assign({}, _this.constructor.defaultProps);
|
||||
_this.elementId = id++;
|
||||
_this.computed = {};
|
||||
return _this;
|
||||
}
|
||||
|
||||
WeElement.prototype.connectedCallback = function connectedCallback() {
|
||||
var p = this.parentNode;
|
||||
while (p && !this.store) {
|
||||
this.store = p.store;
|
||||
p = p.parentNode || p.host;
|
||||
}
|
||||
WeElement.prototype.connectedCallback = function connectedCallback() {
|
||||
var p = this.parentNode;
|
||||
while (p && !this.store) {
|
||||
this.store = p.store;
|
||||
p = p.parentNode || p.host;
|
||||
}
|
||||
|
||||
this.attrsToProps();
|
||||
this.attrsToProps();
|
||||
|
||||
if (this.props.use) {
|
||||
this.use = this.props.use;
|
||||
}
|
||||
if (this.props.use) {
|
||||
this.use = this.props.use;
|
||||
}
|
||||
|
||||
if (this.props.useSelf) {
|
||||
this.use = this.props.useSelf;
|
||||
}
|
||||
if (this.props.useSelf) {
|
||||
this.use = this.props.useSelf;
|
||||
}
|
||||
|
||||
if (this.use) {
|
||||
var use = typeof this.use === 'function' ? this.use() : this.use;
|
||||
if (this.use) {
|
||||
var use = typeof this.use === 'function' ? this.use() : this.use;
|
||||
|
||||
if (options.isMultiStore) {
|
||||
var _updatePath = {};
|
||||
var using = {};
|
||||
for (var storeName in use) {
|
||||
_updatePath[storeName] = {};
|
||||
using[storeName] = {};
|
||||
getPath(use[storeName], _updatePath, storeName);
|
||||
getUse(this.store[storeName].data, use[storeName], using, storeName);
|
||||
this.store[storeName].instances.push(this);
|
||||
}
|
||||
this.using = using;
|
||||
this._updatePath = _updatePath;
|
||||
} else {
|
||||
this._updatePath = getPath(use);
|
||||
this.using = getUse(this.store.data, use);
|
||||
this.store.instances.push(this);
|
||||
}
|
||||
}
|
||||
if (this.useSelf) {
|
||||
var _use = typeof this.useSelf === 'function' ? this.useSelf() : this.useSelf;
|
||||
if (options.isMultiStore) {
|
||||
var _updatePath2 = {};
|
||||
var _using = {};
|
||||
for (var _storeName in _use) {
|
||||
getPath(_use[_storeName], _updatePath2, _storeName);
|
||||
getUse(this.store[_storeName].data, _use[_storeName], _using, _storeName);
|
||||
this.store[_storeName].updateSelfInstances.push(this);
|
||||
}
|
||||
this.usingSelf = _using;
|
||||
this._updateSelfPath = _updatePath2;
|
||||
} else {
|
||||
this._updateSelfPath = getPath(_use);
|
||||
this.usingSelf = getUse(this.store.data, _use);
|
||||
this.store.updateSelfInstances.push(this);
|
||||
}
|
||||
}
|
||||
if (options.isMultiStore) {
|
||||
var _updatePath = {};
|
||||
var using = {};
|
||||
for (var storeName in use) {
|
||||
_updatePath[storeName] = {};
|
||||
using[storeName] = {};
|
||||
getPath(use[storeName], _updatePath, storeName);
|
||||
getUse(this.store[storeName].data, use[storeName], using, storeName);
|
||||
this.store[storeName].instances.push(this);
|
||||
}
|
||||
this.using = using;
|
||||
this._updatePath = _updatePath;
|
||||
} else {
|
||||
this._updatePath = getPath(use);
|
||||
this.using = getUse(this.store.data, use);
|
||||
this.store.instances.push(this);
|
||||
}
|
||||
}
|
||||
if (this.useSelf) {
|
||||
var _use = typeof this.useSelf === 'function' ? this.useSelf() : this.useSelf;
|
||||
if (options.isMultiStore) {
|
||||
var _updatePath2 = {};
|
||||
var _using = {};
|
||||
for (var _storeName in _use) {
|
||||
getPath(_use[_storeName], _updatePath2, _storeName);
|
||||
getUse(this.store[_storeName].data, _use[_storeName], _using, _storeName);
|
||||
this.store[_storeName].updateSelfInstances.push(this);
|
||||
}
|
||||
this.usingSelf = _using;
|
||||
this._updateSelfPath = _updatePath2;
|
||||
} else {
|
||||
this._updateSelfPath = getPath(_use);
|
||||
this.usingSelf = getUse(this.store.data, _use);
|
||||
this.store.updateSelfInstances.push(this);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.compute) {
|
||||
for (var key in this.compute) {
|
||||
this.computed[key] = this.compute[key].call(options.isMultiStore ? this.store : this.store.data);
|
||||
}
|
||||
}
|
||||
if (this.compute) {
|
||||
for (var key in this.compute) {
|
||||
this.computed[key] = this.compute[key].call(options.isMultiStore ? this.store : this.store.data);
|
||||
}
|
||||
}
|
||||
|
||||
this.beforeInstall();
|
||||
this.install();
|
||||
this.afterInstall();
|
||||
this.beforeInstall();
|
||||
this.install();
|
||||
this.afterInstall();
|
||||
|
||||
var shadowRoot;
|
||||
if (this.constructor.isLightDom) {
|
||||
shadowRoot = this;
|
||||
} else {
|
||||
var shadowRoot;
|
||||
if (this.constructor.isLightDom) {
|
||||
shadowRoot = this;
|
||||
} else {
|
||||
|
||||
if (!this.shadowRoot) {
|
||||
shadowRoot = this.attachShadow({
|
||||
mode: 'open'
|
||||
});
|
||||
} else {
|
||||
shadowRoot = this.shadowRoot;
|
||||
var fc;
|
||||
while (fc = shadowRoot.firstChild) {
|
||||
shadowRoot.removeChild(fc);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!this.shadowRoot) {
|
||||
shadowRoot = this.attachShadow({
|
||||
mode: 'open'
|
||||
});
|
||||
} else {
|
||||
shadowRoot = this.shadowRoot;
|
||||
var fc;
|
||||
while (fc = shadowRoot.firstChild) {
|
||||
shadowRoot.removeChild(fc);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.constructor.css) {
|
||||
shadowRoot.appendChild(cssToDom(this.constructor.css));
|
||||
} else if (this.css) {
|
||||
shadowRoot.appendChild(cssToDom(typeof this.css === 'function' ? this.css() : this.css));
|
||||
}
|
||||
if (this.constructor.css) {
|
||||
this.styleSheet = new CSSStyleSheet();
|
||||
this.styleSheet.replaceSync(this.constructor.css);
|
||||
shadowRoot.adoptedStyleSheets = [this.styleSheet];
|
||||
}
|
||||
|
||||
this.beforeRender();
|
||||
options.afterInstall && options.afterInstall(this);
|
||||
if (this.css) {
|
||||
shadowRoot.appendChild(cssToDom(typeof this.css === 'function' ? this.css() : this.css));
|
||||
}
|
||||
|
||||
var rendered = this.render(this.props, this.store);
|
||||
this.beforeRender();
|
||||
options.afterInstall && options.afterInstall(this);
|
||||
|
||||
this.rootNode = diff(null, rendered, null, this);
|
||||
this.rendered();
|
||||
var rendered = this.render(this.props, this.store);
|
||||
|
||||
if (this.props.css) {
|
||||
this._customStyleElement = cssToDom(this.props.css);
|
||||
this._customStyleContent = this.props.css;
|
||||
shadowRoot.appendChild(this._customStyleElement);
|
||||
}
|
||||
this.rootNode = diff(null, rendered, null, this);
|
||||
this.rendered();
|
||||
|
||||
if (isArray(this.rootNode)) {
|
||||
this.rootNode.forEach(function (item) {
|
||||
shadowRoot.appendChild(item);
|
||||
});
|
||||
} else {
|
||||
this.rootNode && shadowRoot.appendChild(this.rootNode);
|
||||
}
|
||||
this.installed();
|
||||
this._isInstalled = true;
|
||||
};
|
||||
if (this.props.css) {
|
||||
this._customStyleElement = cssToDom(this.props.css);
|
||||
this._customStyleContent = this.props.css;
|
||||
shadowRoot.appendChild(this._customStyleElement);
|
||||
}
|
||||
|
||||
WeElement.prototype.disconnectedCallback = function disconnectedCallback() {
|
||||
this.uninstall();
|
||||
this._isInstalled = false;
|
||||
if (this.store) {
|
||||
if (options.isMultiStore) {
|
||||
for (var key in this.store) {
|
||||
var current = this.store[key];
|
||||
removeItem(this, current.instances);
|
||||
removeItem(this, current.updateSelfInstances);
|
||||
}
|
||||
} else {
|
||||
removeItem(this, this.store.instances);
|
||||
removeItem(this, this.store.updateSelfInstances);
|
||||
}
|
||||
}
|
||||
};
|
||||
if (isArray(this.rootNode)) {
|
||||
this.rootNode.forEach(function (item) {
|
||||
shadowRoot.appendChild(item);
|
||||
});
|
||||
} else {
|
||||
this.rootNode && shadowRoot.appendChild(this.rootNode);
|
||||
}
|
||||
this.installed();
|
||||
this._isInstalled = true;
|
||||
};
|
||||
|
||||
WeElement.prototype.update = function update(ignoreAttrs, updateSelf) {
|
||||
this._willUpdate = true;
|
||||
this.beforeUpdate();
|
||||
this.beforeRender();
|
||||
//fix null !== undefined
|
||||
if (this._customStyleContent != this.props.css) {
|
||||
this._customStyleContent = this.props.css;
|
||||
this._customStyleElement.textContent = this._customStyleContent;
|
||||
}
|
||||
this.attrsToProps(ignoreAttrs);
|
||||
WeElement.prototype.disconnectedCallback = function disconnectedCallback() {
|
||||
this.uninstall();
|
||||
this._isInstalled = false;
|
||||
if (this.store) {
|
||||
if (options.isMultiStore) {
|
||||
for (var key in this.store) {
|
||||
var current = this.store[key];
|
||||
removeItem(this, current.instances);
|
||||
removeItem(this, current.updateSelfInstances);
|
||||
}
|
||||
} else {
|
||||
removeItem(this, this.store.instances);
|
||||
removeItem(this, this.store.updateSelfInstances);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var rendered = this.render(this.props, this.store);
|
||||
this.rendered();
|
||||
WeElement.prototype.update = function update(ignoreAttrs, updateSelf) {
|
||||
this._willUpdate = true;
|
||||
this.beforeUpdate();
|
||||
this.beforeRender();
|
||||
//fix null !== undefined
|
||||
if (this._customStyleContent != this.props.css) {
|
||||
this._customStyleContent = this.props.css;
|
||||
this._customStyleElement.textContent = this._customStyleContent;
|
||||
}
|
||||
this.attrsToProps(ignoreAttrs);
|
||||
|
||||
this.rootNode = diff(this.rootNode, rendered, this.constructor.isLightDom ? this : this.shadowRoot, this, updateSelf);
|
||||
this._willUpdate = false;
|
||||
this.updated();
|
||||
};
|
||||
var rendered = this.render(this.props, this.store);
|
||||
this.rendered();
|
||||
|
||||
WeElement.prototype.forceUpdate = function forceUpdate() {
|
||||
this.update(true);
|
||||
};
|
||||
this.rootNode = diff(this.rootNode, rendered, this.constructor.isLightDom ? this : this.shadowRoot, this, updateSelf);
|
||||
this._willUpdate = false;
|
||||
this.updated();
|
||||
};
|
||||
|
||||
WeElement.prototype.updateProps = function updateProps(obj) {
|
||||
var _this2 = this;
|
||||
WeElement.prototype.forceUpdate = function forceUpdate() {
|
||||
this.update(true);
|
||||
};
|
||||
|
||||
Object.keys(obj).forEach(function (key) {
|
||||
_this2.props[key] = obj[key];
|
||||
if (_this2.prevProps) {
|
||||
_this2.prevProps[key] = obj[key];
|
||||
}
|
||||
});
|
||||
this.forceUpdate();
|
||||
};
|
||||
WeElement.prototype.updateProps = function updateProps(obj) {
|
||||
var _this2 = this;
|
||||
|
||||
WeElement.prototype.updateSelf = function updateSelf(ignoreAttrs) {
|
||||
this.update(ignoreAttrs, true);
|
||||
};
|
||||
Object.keys(obj).forEach(function (key) {
|
||||
_this2.props[key] = obj[key];
|
||||
if (_this2.prevProps) {
|
||||
_this2.prevProps[key] = obj[key];
|
||||
}
|
||||
});
|
||||
this.forceUpdate();
|
||||
};
|
||||
|
||||
WeElement.prototype.removeAttribute = function removeAttribute(key) {
|
||||
_HTMLElement.prototype.removeAttribute.call(this, key);
|
||||
//Avoid executing removeAttribute methods before connectedCallback
|
||||
this._isInstalled && this.update();
|
||||
};
|
||||
WeElement.prototype.updateSelf = function updateSelf(ignoreAttrs) {
|
||||
this.update(ignoreAttrs, true);
|
||||
};
|
||||
|
||||
WeElement.prototype.setAttribute = function setAttribute(key, val) {
|
||||
if (val && typeof val === 'object') {
|
||||
_HTMLElement.prototype.setAttribute.call(this, key, JSON.stringify(val));
|
||||
} else {
|
||||
_HTMLElement.prototype.setAttribute.call(this, key, val);
|
||||
}
|
||||
//Avoid executing setAttribute methods before connectedCallback
|
||||
this._isInstalled && this.update();
|
||||
};
|
||||
WeElement.prototype.removeAttribute = function removeAttribute(key) {
|
||||
_HTMLElement.prototype.removeAttribute.call(this, key);
|
||||
//Avoid executing removeAttribute methods before connectedCallback
|
||||
this._isInstalled && this.update();
|
||||
};
|
||||
|
||||
WeElement.prototype.pureRemoveAttribute = function pureRemoveAttribute(key) {
|
||||
_HTMLElement.prototype.removeAttribute.call(this, key);
|
||||
};
|
||||
WeElement.prototype.setAttribute = function setAttribute(key, val) {
|
||||
if (val && typeof val === 'object') {
|
||||
_HTMLElement.prototype.setAttribute.call(this, key, JSON.stringify(val));
|
||||
} else {
|
||||
_HTMLElement.prototype.setAttribute.call(this, key, val);
|
||||
}
|
||||
//Avoid executing setAttribute methods before connectedCallback
|
||||
this._isInstalled && this.update();
|
||||
};
|
||||
|
||||
WeElement.prototype.pureSetAttribute = function pureSetAttribute(key, val) {
|
||||
_HTMLElement.prototype.setAttribute.call(this, key, val);
|
||||
};
|
||||
WeElement.prototype.pureRemoveAttribute = function pureRemoveAttribute(key) {
|
||||
_HTMLElement.prototype.removeAttribute.call(this, key);
|
||||
};
|
||||
|
||||
WeElement.prototype.attrsToProps = function attrsToProps(ignoreAttrs) {
|
||||
if (options.ignoreAttrs || ignoreAttrs) return;
|
||||
var ele = this;
|
||||
ele.props['css'] = ele.getAttribute('css');
|
||||
var attrs = this.constructor.propTypes;
|
||||
if (!attrs) return;
|
||||
Object.keys(attrs).forEach(function (key) {
|
||||
var type = attrs[key];
|
||||
var val = ele.getAttribute(hyphenate(key));
|
||||
if (val !== null) {
|
||||
switch (type) {
|
||||
case String:
|
||||
ele.props[key] = val;
|
||||
break;
|
||||
case Number:
|
||||
ele.props[key] = Number(val);
|
||||
break;
|
||||
case Boolean:
|
||||
if (val === 'false' || val === '0') {
|
||||
ele.props[key] = false;
|
||||
} else {
|
||||
ele.props[key] = true;
|
||||
}
|
||||
break;
|
||||
case Array:
|
||||
case Object:
|
||||
if (val[0] === ':') {
|
||||
ele.props[key] = getValByPath(val.substr(1), Omi.$);
|
||||
} else {
|
||||
ele.props[key] = JSON.parse(val.replace(/(['"])?([a-zA-Z0-9_-]+)(['"])?:([^\/])/g, '"$2":$4').replace(/'([\s\S]*?)'/g, '"$1"').replace(/,(\s*})/g, '$1'));
|
||||
}
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
if (ele.constructor.defaultProps && ele.constructor.defaultProps.hasOwnProperty(key)) {
|
||||
ele.props[key] = ele.constructor.defaultProps[key];
|
||||
} else {
|
||||
ele.props[key] = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
WeElement.prototype.pureSetAttribute = function pureSetAttribute(key, val) {
|
||||
_HTMLElement.prototype.setAttribute.call(this, key, val);
|
||||
};
|
||||
|
||||
WeElement.prototype.fire = function fire(name, data) {
|
||||
this.dispatchEvent(new CustomEvent(name, {
|
||||
detail: data
|
||||
}));
|
||||
};
|
||||
WeElement.prototype.attrsToProps = function attrsToProps(ignoreAttrs) {
|
||||
if (options.ignoreAttrs || ignoreAttrs) return;
|
||||
var ele = this;
|
||||
ele.props['css'] = ele.getAttribute('css');
|
||||
var attrs = this.constructor.propTypes;
|
||||
if (!attrs) return;
|
||||
Object.keys(attrs).forEach(function (key) {
|
||||
var type = attrs[key];
|
||||
var val = ele.getAttribute(hyphenate(key));
|
||||
if (val !== null) {
|
||||
switch (type) {
|
||||
case String:
|
||||
ele.props[key] = val;
|
||||
break;
|
||||
case Number:
|
||||
ele.props[key] = Number(val);
|
||||
break;
|
||||
case Boolean:
|
||||
if (val === 'false' || val === '0') {
|
||||
ele.props[key] = false;
|
||||
} else {
|
||||
ele.props[key] = true;
|
||||
}
|
||||
break;
|
||||
case Array:
|
||||
case Object:
|
||||
if (val[0] === ':') {
|
||||
ele.props[key] = getValByPath(val.substr(1), Omi.$);
|
||||
} else {
|
||||
ele.props[key] = JSON.parse(val.replace(/(['"])?([a-zA-Z0-9_-]+)(['"])?:([^\/])/g, '"$2":$4').replace(/'([\s\S]*?)'/g, '"$1"').replace(/,(\s*})/g, '$1'));
|
||||
}
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
if (ele.constructor.defaultProps && ele.constructor.defaultProps.hasOwnProperty(key)) {
|
||||
ele.props[key] = ele.constructor.defaultProps[key];
|
||||
} else {
|
||||
ele.props[key] = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
WeElement.prototype.beforeInstall = function beforeInstall() {};
|
||||
WeElement.prototype.fire = function fire(name, data) {
|
||||
this.dispatchEvent(new CustomEvent(name, {
|
||||
detail: data
|
||||
}));
|
||||
};
|
||||
|
||||
WeElement.prototype.install = function install() {};
|
||||
WeElement.prototype.beforeInstall = function beforeInstall() {};
|
||||
|
||||
WeElement.prototype.afterInstall = function afterInstall() {};
|
||||
WeElement.prototype.install = function install() {};
|
||||
|
||||
WeElement.prototype.installed = function installed() {};
|
||||
WeElement.prototype.afterInstall = function afterInstall() {};
|
||||
|
||||
WeElement.prototype.uninstall = function uninstall() {};
|
||||
WeElement.prototype.installed = function installed() {};
|
||||
|
||||
WeElement.prototype.beforeUpdate = function beforeUpdate() {};
|
||||
WeElement.prototype.uninstall = function uninstall() {};
|
||||
|
||||
WeElement.prototype.updated = function updated() {};
|
||||
WeElement.prototype.beforeUpdate = function beforeUpdate() {};
|
||||
|
||||
WeElement.prototype.beforeRender = function beforeRender() {};
|
||||
WeElement.prototype.updated = function updated() {};
|
||||
|
||||
WeElement.prototype.rendered = function rendered() {};
|
||||
WeElement.prototype.beforeRender = function beforeRender() {};
|
||||
|
||||
WeElement.prototype.receiveProps = function receiveProps() {};
|
||||
WeElement.prototype.rendered = function rendered() {};
|
||||
|
||||
return WeElement;
|
||||
WeElement.prototype.receiveProps = function receiveProps() {};
|
||||
|
||||
return WeElement;
|
||||
}(HTMLElement);
|
||||
|
||||
WeElement.is = 'WeElement';
|
||||
|
|
@ -1799,7 +1803,239 @@ function o(obj) {
|
|||
return JSON.stringify(obj);
|
||||
}
|
||||
|
||||
var n=function(t,r,u,e){for(var p=1;p<r.length;p++){var s=r[p++],a="number"==typeof s?u[s]:s;1===r[p]?e[0]=a:2===r[p]?(e[1]=e[1]||{})[r[++p]]=a:3===r[p]?e[1]=Object.assign(e[1]||{},a):e.push(r[p]?t.apply(null,n(t,a,u,["",null])):a);}return e},t=function(n){for(var t,r,u=1,e="",p="",s=[0],a=function(n){1===u&&(n||(e=e.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?s.push(n||e,0):3===u&&(n||e)?(s.push(n||e,1), u=2):2===u&&"..."===e&&n?s.push(n,3):2===u&&e&&!n?s.push(!0,2,e):4===u&&r&&(s.push(n||e,2,r), r=""), e="";},f=0;f<n.length;f++){f&&(1===u&&a(), a(f));for(var h=0;h<n[f].length;h++)t=n[f][h], 1===u?"<"===t?(a(), s=[s], u=3):e+=t:p?t===p?p="":e+=t:'"'===t||"'"===t?p=t:">"===t?(a(), u=1):u&&("="===t?(u=4, r=e, e=""):"/"===t?(a(), 3===u&&(s=s[0]), u=s, (s=s[0]).push(u,4), u=0):" "===t||"\t"===t||"\n"===t||"\r"===t?(a(), u=2):e+=t);}return a(), s},r="function"==typeof Map,u=r?new Map:{},e=r?function(n){var r=u.get(n);return r||u.set(n,r=t(n)), r}:function(n){for(var r="",e=0;e<n.length;e++)r+=n[e].length+"-"+n[e];return u[r]||(u[r]=t(n))};function htm(t){var r=n(this,e(t),arguments,[]);return r.length>1?r:r[0]}
|
||||
var n=function(t,r,u,e){for(var p=1;p<r.length;p++){var s=r[p],h="number"==typeof s?u[s]:s,a=r[++p];1===a?e[0]=h:3===a?e[1]=Object.assign(e[1]||{},h):5===a?(e[1]=e[1]||{})[r[++p]]=h:6===a?e[1][r[++p]]+=h+"":e.push(a?t.apply(null,n(t,h,u,["",null])):h);}return e},t=function(n){for(var t,r,u=1,e="",p="",s=[0],h=function(n){1===u&&(n||(e=e.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?s.push(n||e,0):3===u&&(n||e)?(s.push(n||e,1), u=2):2===u&&"..."===e&&n?s.push(n,3):2===u&&e&&!n?s.push(!0,5,e):u>=5&&((e||!n&&5===u)&&(s.push(e,u,r), u=6), n&&(s.push(n,u,r), u=6)), e="";},a=0;a<n.length;a++){a&&(1===u&&h(), h(a));for(var f=0;f<n[a].length;f++)t=n[a][f], 1===u?"<"===t?(h(), s=[s], u=3):e+=t:4===u?"--"===e&&">"===t?(u=1, e=""):e=t+e[0]:p?t===p?p="":e+=t:'"'===t||"'"===t?p=t:">"===t?(h(), u=1):u&&("="===t?(u=5, r=e, e=""):"/"===t&&(u<5||">"===n[a][f+1])?(h(), 3===u&&(s=s[0]), u=s, (s=s[0]).push(u,2), u=0):" "===t||"\t"===t||"\n"===t||"\r"===t?(h(), u=2):e+=t), 3===u&&"!--"===e&&(u=4, s=s[0]);}return h(), s},r="function"==typeof Map,u=r?new Map:{},e=r?function(n){var r=u.get(n);return r||u.set(n,r=t(n)), r}:function(n){for(var r="",e=0;e<n.length;e++)r+=n[e].length+"-"+n[e];return u[r]||(u[r]=t(n))};function htm(t){var r=n(this,e(t),arguments,[]);return r.length>1?r:r[0]}
|
||||
|
||||
(function () {
|
||||
try {
|
||||
new window.CSSStyleSheet('a{}');
|
||||
return;
|
||||
} catch (e) {}
|
||||
|
||||
// TODO: this could really just by a dunderprop to keep the polyfill light.
|
||||
var INTERNAL = typeof Symbol !== 'undefined' ? Symbol('__s') : '__s';
|
||||
|
||||
/**
|
||||
* Problem 1:
|
||||
* CSSStyleSheet is nonconfigurable.
|
||||
* This means we're stuck with a ponyfill and not a "perfect" polyfill.
|
||||
*/
|
||||
// Object.defineProperty(window, 'CSSStyleSheet', {
|
||||
// configurable: true,
|
||||
// enumerable: true,
|
||||
// get: () => CSSStyleSheet
|
||||
// });
|
||||
|
||||
var OriginalCSSStyleSheet = window.CSSStyleSheet;
|
||||
|
||||
window.CSSStyleSheet = CSSStyleSheet;
|
||||
|
||||
var DOC;
|
||||
|
||||
var counter = 0;
|
||||
|
||||
/**
|
||||
* Problem #2:
|
||||
* CSSStyleSheet is not instantiable.
|
||||
* We can inherit from the real CSSStyleSheet in order to
|
||||
*/
|
||||
|
||||
function CSSStyleSheet(options) {
|
||||
if (!DOC) {
|
||||
var frame = document.createElement('iframe');
|
||||
frame.style.cssText = 'position:absolute;left:0;top:-9999px;width:1px;height:1px;';
|
||||
document.body.appendChild(frame);
|
||||
DOC = frame.contentWindow.document;
|
||||
}
|
||||
var style = DOC.createElement('style');
|
||||
style.$id = ++counter;
|
||||
style.childSheets = [];
|
||||
style.appendChild(DOC.createTextNode(''));
|
||||
DOC.body.appendChild(style);
|
||||
// console.log(style, sheet);
|
||||
Object.assign(style.sheet, options || {});
|
||||
this[INTERNAL] = style;
|
||||
}
|
||||
|
||||
// we can be nice and ensure that this holds:
|
||||
// document.createElement('style').stylesheet instanceof CSSStyleSeetPolyfill
|
||||
CSSStyleSheet.prototype = Object.create(OriginalCSSStyleSheet);
|
||||
|
||||
Object.defineProperty(CSSStyleSheet.prototype, 'cssRules', {
|
||||
get: function get() {
|
||||
return this[INTERNAL].sheet.cssRules;
|
||||
}
|
||||
});
|
||||
|
||||
CSSStyleSheet.prototype.replace = function (cssText) {
|
||||
var style = this[INTERNAL];
|
||||
return new Promise(function (resolve, reject) {
|
||||
var l = DOC.createElement('link');
|
||||
l.rel = 'preload';
|
||||
l.as = 'style';
|
||||
l.onload = function () {
|
||||
// sheet.ownerNode.firstChild.textContent = cssText;
|
||||
style.firstChild.data = cssText;
|
||||
for (var i = 0; i < style.childSheets.length; i++) {
|
||||
style.childSheets[i].firstChild.data = cssText;
|
||||
}
|
||||
// if (sheet.cssRules[0]) sheet.deleteRule(0);
|
||||
// sheet.insertRule(cssText);
|
||||
l.remove();
|
||||
resolve();
|
||||
};
|
||||
l.onerror = reject;
|
||||
l.href = 'data:text/css;base64,' + btoa(cssText);
|
||||
DOC.head.appendChild(l);
|
||||
});
|
||||
};
|
||||
|
||||
CSSStyleSheet.prototype.replaceSync = function (cssText) {
|
||||
var style = this[INTERNAL];
|
||||
if (cssText.replace(/\/\*[\s\S]+?\*\//g, '').match(/@import\s*\(\s*(['"])[^\1]*?\1\s*\)/)) {
|
||||
throw Error('no');
|
||||
}
|
||||
// if (sheet.cssRules[0]) sheet.deleteRule(0);
|
||||
// sheet.insertRule(cssText);
|
||||
// sheet.ownerNode.firstChild.textContent = cssText;
|
||||
style.firstChild.data = cssText;
|
||||
for (var i = 0; i < style.childSheets.length; i++) {
|
||||
style.childSheets[i].firstChild.data = cssText;
|
||||
}
|
||||
};
|
||||
|
||||
var oldInnerHTML = Object.getOwnPropertyDescriptor(ShadowRoot.prototype, 'innerHTML');
|
||||
var oldFirstChild = Object.getOwnPropertyDescriptor(Node.prototype, 'firstChild');
|
||||
var oldLastChild = Object.getOwnPropertyDescriptor(Node.prototype, 'lastChild');
|
||||
|
||||
function getState(obj) {
|
||||
return obj[INTERNAL] || (obj[INTERNAL] = {
|
||||
adoptedStyleSheets: [],
|
||||
sheets: [],
|
||||
id: ++counter
|
||||
});
|
||||
}
|
||||
|
||||
Object.defineProperties(ShadowRoot.prototype, {
|
||||
firstChild: {
|
||||
get: function get() {
|
||||
var child = oldFirstChild.get.call(this);
|
||||
while (child) {
|
||||
if (child[INTERNAL] == null) break;
|
||||
child = child.nextSibling;
|
||||
}
|
||||
return child;
|
||||
}
|
||||
},
|
||||
|
||||
lastChild: {
|
||||
get: function get() {
|
||||
var child = oldLastChild.get.call(this);
|
||||
while (child) {
|
||||
if (child[INTERNAL] == null) break;
|
||||
child = child.previousSibling;
|
||||
}
|
||||
return child;
|
||||
}
|
||||
},
|
||||
|
||||
// @TODO
|
||||
// childNodes: {},
|
||||
// children: {},
|
||||
|
||||
innerHTML: {
|
||||
get: function get() {
|
||||
var html = '';
|
||||
var child = oldFirstChild.get.call(this);
|
||||
while (child) {
|
||||
if (!child[INTERNAL]) {
|
||||
if (child.nodeType === 3) html += child.data;
|
||||
html += child.outerHTML;
|
||||
}
|
||||
child = child.nextSibling;
|
||||
}
|
||||
return html;
|
||||
// return old.get.call(this).replace(/</);
|
||||
},
|
||||
set: function set(html) {
|
||||
var child = oldFirstChild.get.call(this);
|
||||
var sheets = [];
|
||||
while (child) {
|
||||
if (child[INTERNAL]) sheets.push(child);
|
||||
child = child.nextSibling;
|
||||
}
|
||||
oldInnerHTML.set.call(this, html);
|
||||
child = oldFirstChild.get.call(this);
|
||||
for (var i = 0; i < sheets.length; i++) {
|
||||
this.insertBefore(sheets[i], child);
|
||||
}
|
||||
// this.insertAdjacentHTML(html, 'beforeend');
|
||||
}
|
||||
},
|
||||
|
||||
adoptedStyleSheets: {
|
||||
get: function get() {
|
||||
var state = getState(this);
|
||||
return state.adoptedStyleSheets;
|
||||
},
|
||||
|
||||
|
||||
// @TODO:
|
||||
// Chrome's implementation doesn't do any diffing, so the polyfill needn't either.
|
||||
// Also, we should always clone the passed Array and freeze it if available.
|
||||
set: function set(value) {
|
||||
var state = getState(this);
|
||||
var previous = state.adoptedStyleSheets.slice();
|
||||
var indices = [];
|
||||
if (!Array.isArray(value)) {
|
||||
value = [].concat(value || []);
|
||||
}
|
||||
// this[INTERNAL] = value;
|
||||
state.adoptedStyleSheets = value;
|
||||
for (var i = 0; i < value.length; i++) {
|
||||
var v = value[i];
|
||||
var index = previous.indexOf(v);
|
||||
if (index === -1) {
|
||||
var style = v[INTERNAL];
|
||||
var clone = style.cloneNode(true);
|
||||
// clone.setAttribute('data-is-constructed', state.id);
|
||||
clone[INTERNAL] = {};
|
||||
// clone.$parent = style;
|
||||
style.childSheets.push(clone);
|
||||
// clone.textContent = style.textContent;
|
||||
// clone.$id = style.$id;
|
||||
// state.sheets.push(clone);
|
||||
this.appendChild(clone);
|
||||
// console.log(this, clone, this.childNodes);
|
||||
// console.log(`found new sheet, adding.`, clone);
|
||||
} else {
|
||||
indices[index] = true;
|
||||
// const style = v[INTERNAL];
|
||||
}
|
||||
}
|
||||
for (var i = 0; i < previous.length; i++) {
|
||||
if (indices[i] !== true) {
|
||||
var prev = previous[i][INTERNAL];
|
||||
// const style = prev.$parent;
|
||||
for (var j = 0; j < prev.childSheets.length; j++) {
|
||||
var sheet = prev.childSheets[j];
|
||||
if (sheet.parentNode === this) {
|
||||
this.removeChild(sheet);
|
||||
prev.childSheets.splice(j, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
// for (let j = 0; j < state.sheets.length; j++) {
|
||||
// if (state.sheets[j].$id === prev.$id) {
|
||||
// state.sheets[j].remove();
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
h.f = Fragment;
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -693,7 +693,12 @@
|
|||
var fc;
|
||||
while (fc = shadowRoot.firstChild) shadowRoot.removeChild(fc);
|
||||
}
|
||||
if (this.constructor.css) shadowRoot.appendChild(cssToDom(this.constructor.css)); else if (this.css) shadowRoot.appendChild(cssToDom('function' == typeof this.css ? this.css() : this.css));
|
||||
if (this.constructor.css) {
|
||||
this.styleSheet = new CSSStyleSheet();
|
||||
this.styleSheet.replaceSync(this.constructor.css);
|
||||
shadowRoot.adoptedStyleSheets = [ this.styleSheet ];
|
||||
}
|
||||
if (this.css) shadowRoot.appendChild(cssToDom('function' == typeof this.css ? this.css() : this.css));
|
||||
this.beforeRender();
|
||||
options.afterInstall && options.afterInstall(this);
|
||||
var rendered = this.render(this.props, this.store);
|
||||
|
|
@ -1011,22 +1016,24 @@
|
|||
var hasOwn = {}.hasOwnProperty;
|
||||
var n = function(t, r, u, e) {
|
||||
for (var p = 1; p < r.length; p++) {
|
||||
var s = r[p++], a = "number" == typeof s ? u[s] : s;
|
||||
1 === r[p] ? e[0] = a : 2 === r[p] ? (e[1] = e[1] || {})[r[++p]] = a : 3 === r[p] ? e[1] = Object.assign(e[1] || {}, a) : e.push(r[p] ? t.apply(null, n(t, a, u, [ "", null ])) : a);
|
||||
var s = r[p], h = "number" == typeof s ? u[s] : s, a = r[++p];
|
||||
1 === a ? e[0] = h : 3 === a ? e[1] = Object.assign(e[1] || {}, h) : 5 === a ? (e[1] = e[1] || {})[r[++p]] = h : 6 === a ? e[1][r[++p]] += h + "" : e.push(a ? t.apply(null, n(t, h, u, [ "", null ])) : h);
|
||||
}
|
||||
return e;
|
||||
}, t = function(n) {
|
||||
for (var t, r, u = 1, e = "", p = "", s = [ 0 ], a = function(n) {
|
||||
for (var t, r, u = 1, e = "", p = "", s = [ 0 ], h = function(n) {
|
||||
1 === u && (n || (e = e.replace(/^\s*\n\s*|\s*\n\s*$/g, ""))) ? s.push(n || e, 0) : 3 === u && (n || e) ? (s.push(n || e, 1),
|
||||
u = 2) : 2 === u && "..." === e && n ? s.push(n, 3) : 2 === u && e && !n ? s.push(!0, 2, e) : 4 === u && r && (s.push(n || e, 2, r),
|
||||
r = ""), e = "";
|
||||
}, f = 0; f < n.length; f++) {
|
||||
f && (1 === u && a(), a(f));
|
||||
for (var h = 0; h < n[f].length; h++) t = n[f][h], 1 === u ? "<" === t ? (a(), s = [ s ], u = 3) : e += t : p ? t === p ? p = "" : e += t : '"' === t || "'" === t ? p = t : ">" === t ? (a(),
|
||||
u = 1) : u && ("=" === t ? (u = 4, r = e, e = "") : "/" === t ? (a(), 3 === u && (s = s[0]), u = s, (s = s[0]).push(u, 4),
|
||||
u = 0) : " " === t || "\t" === t || "\n" === t || "\r" === t ? (a(), u = 2) : e += t);
|
||||
u = 2) : 2 === u && "..." === e && n ? s.push(n, 3) : 2 === u && e && !n ? s.push(!0, 5, e) : u >= 5 && ((e || !n && 5 === u) && (s.push(e, u, r),
|
||||
u = 6), n && (s.push(n, u, r), u = 6)), e = "";
|
||||
}, a = 0; a < n.length; a++) {
|
||||
a && (1 === u && h(), h(a));
|
||||
for (var f = 0; f < n[a].length; f++) t = n[a][f], 1 === u ? "<" === t ? (h(), s = [ s ], u = 3) : e += t : 4 === u ? "--" === e && ">" === t ? (u = 1,
|
||||
e = "") : e = t + e[0] : p ? t === p ? p = "" : e += t : '"' === t || "'" === t ? p = t : ">" === t ? (h(), u = 1) : u && ("=" === t ? (u = 5,
|
||||
r = e, e = "") : "/" === t && (u < 5 || ">" === n[a][f + 1]) ? (h(), 3 === u && (s = s[0]), u = s, (s = s[0]).push(u, 2),
|
||||
u = 0) : " " === t || "\t" === t || "\n" === t || "\r" === t ? (h(), u = 2) : e += t), 3 === u && "!--" === e && (u = 4,
|
||||
s = s[0]);
|
||||
}
|
||||
return a(), s;
|
||||
return h(), s;
|
||||
}, r = "function" == typeof Map, u = r ? new Map() : {}, e = r ? function(n) {
|
||||
var r = u.get(n);
|
||||
return r || u.set(n, r = t(n)), r;
|
||||
|
|
@ -1034,6 +1041,149 @@
|
|||
for (var r = "", e = 0; e < n.length; e++) r += n[e].length + "-" + n[e];
|
||||
return u[r] || (u[r] = t(n));
|
||||
};
|
||||
!function() {
|
||||
function CSSStyleSheet(options) {
|
||||
if (!DOC) {
|
||||
var frame = document.createElement('iframe');
|
||||
frame.style.cssText = 'position:absolute;left:0;top:-9999px;width:1px;height:1px;';
|
||||
document.body.appendChild(frame);
|
||||
DOC = frame.contentWindow.document;
|
||||
}
|
||||
var style = DOC.createElement('style');
|
||||
style.$id = ++counter;
|
||||
style.childSheets = [];
|
||||
style.appendChild(DOC.createTextNode(''));
|
||||
DOC.body.appendChild(style);
|
||||
Object.assign(style.sheet, options || {});
|
||||
this[INTERNAL] = style;
|
||||
}
|
||||
function getState(obj) {
|
||||
return obj[INTERNAL] || (obj[INTERNAL] = {
|
||||
adoptedStyleSheets: [],
|
||||
sheets: [],
|
||||
id: ++counter
|
||||
});
|
||||
}
|
||||
try {
|
||||
new window.CSSStyleSheet('a{}');
|
||||
return;
|
||||
} catch (e) {}
|
||||
var INTERNAL = 'undefined' != typeof Symbol ? Symbol('__s') : '__s';
|
||||
var OriginalCSSStyleSheet = window.CSSStyleSheet;
|
||||
window.CSSStyleSheet = CSSStyleSheet;
|
||||
var DOC;
|
||||
var counter = 0;
|
||||
CSSStyleSheet.prototype = Object.create(OriginalCSSStyleSheet);
|
||||
CSSStyleSheet.prototype;
|
||||
CSSStyleSheet.prototype.replace = function(cssText) {
|
||||
var style = this[INTERNAL];
|
||||
return new Promise(function(resolve, reject) {
|
||||
var l = DOC.createElement('link');
|
||||
l.rel = 'preload';
|
||||
l.as = 'style';
|
||||
l.onload = function() {
|
||||
style.firstChild.data = cssText;
|
||||
for (var i = 0; i < style.childSheets.length; i++) style.childSheets[i].firstChild.data = cssText;
|
||||
l.remove();
|
||||
resolve();
|
||||
};
|
||||
l.onerror = reject;
|
||||
l.href = 'data:text/css;base64,' + btoa(cssText);
|
||||
DOC.head.appendChild(l);
|
||||
});
|
||||
};
|
||||
CSSStyleSheet.prototype.replaceSync = function(cssText) {
|
||||
var style = this[INTERNAL];
|
||||
if (cssText.replace(/\/\*[\s\S]+?\*\//g, '').match(/@import\s*\(\s*(['"])[^\1]*?\1\s*\)/)) throw Error('no');
|
||||
style.firstChild.data = cssText;
|
||||
for (var i = 0; i < style.childSheets.length; i++) style.childSheets[i].firstChild.data = cssText;
|
||||
};
|
||||
var oldInnerHTML = Object.getOwnPropertyDescriptor(ShadowRoot.prototype, 'innerHTML');
|
||||
var oldFirstChild = Object.getOwnPropertyDescriptor(Node.prototype, 'firstChild');
|
||||
var oldLastChild = Object.getOwnPropertyDescriptor(Node.prototype, 'lastChild');
|
||||
Object.defineProperties(ShadowRoot.prototype, {
|
||||
firstChild: {
|
||||
get: function() {
|
||||
var child = oldFirstChild.get.call(this);
|
||||
while (child) {
|
||||
if (null == child[INTERNAL]) break;
|
||||
child = child.nextSibling;
|
||||
}
|
||||
return child;
|
||||
}
|
||||
},
|
||||
lastChild: {
|
||||
get: function() {
|
||||
var child = oldLastChild.get.call(this);
|
||||
while (child) {
|
||||
if (null == child[INTERNAL]) break;
|
||||
child = child.previousSibling;
|
||||
}
|
||||
return child;
|
||||
}
|
||||
},
|
||||
innerHTML: {
|
||||
get: function() {
|
||||
var html = '';
|
||||
var child = oldFirstChild.get.call(this);
|
||||
while (child) {
|
||||
if (!child[INTERNAL]) {
|
||||
if (3 === child.nodeType) html += child.data;
|
||||
html += child.outerHTML;
|
||||
}
|
||||
child = child.nextSibling;
|
||||
}
|
||||
return html;
|
||||
},
|
||||
set: function(html) {
|
||||
var child = oldFirstChild.get.call(this);
|
||||
var sheets = [];
|
||||
while (child) {
|
||||
if (child[INTERNAL]) sheets.push(child);
|
||||
child = child.nextSibling;
|
||||
}
|
||||
oldInnerHTML.set.call(this, html);
|
||||
child = oldFirstChild.get.call(this);
|
||||
for (var i = 0; i < sheets.length; i++) this.insertBefore(sheets[i], child);
|
||||
}
|
||||
},
|
||||
adoptedStyleSheets: {
|
||||
get: function() {
|
||||
var state = getState(this);
|
||||
return state.adoptedStyleSheets;
|
||||
},
|
||||
set: function(value) {
|
||||
var state = getState(this);
|
||||
var previous = state.adoptedStyleSheets.slice();
|
||||
var indices = [];
|
||||
if (!Array.isArray(value)) value = [].concat(value || []);
|
||||
state.adoptedStyleSheets = value;
|
||||
for (var i = 0; i < value.length; i++) {
|
||||
var v = value[i];
|
||||
var index = previous.indexOf(v);
|
||||
if (-1 === index) {
|
||||
var style = v[INTERNAL];
|
||||
var clone = style.cloneNode(!0);
|
||||
clone[INTERNAL] = {};
|
||||
style.childSheets.push(clone);
|
||||
this.appendChild(clone);
|
||||
} else indices[index] = !0;
|
||||
}
|
||||
for (var i = 0; i < previous.length; i++) if (!0 !== indices[i]) {
|
||||
var prev = previous[i][INTERNAL];
|
||||
for (var j = 0; j < prev.childSheets.length; j++) {
|
||||
var sheet = prev.childSheets[j];
|
||||
if (sheet.parentNode === this) {
|
||||
this.removeChild(sheet);
|
||||
prev.childSheets.splice(j, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}();
|
||||
h.f = Fragment;
|
||||
var html = htm.bind(h);
|
||||
var $ = {};
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -820,285 +820,289 @@
|
|||
var id = 0;
|
||||
|
||||
var WeElement = (_temp = _class = function (_HTMLElement) {
|
||||
_inherits(WeElement, _HTMLElement);
|
||||
_inherits(WeElement, _HTMLElement);
|
||||
|
||||
function WeElement() {
|
||||
_classCallCheck(this, WeElement);
|
||||
function WeElement() {
|
||||
_classCallCheck(this, WeElement);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, _HTMLElement.call(this));
|
||||
var _this = _possibleConstructorReturn(this, _HTMLElement.call(this));
|
||||
|
||||
_this.props = Object.assign({}, _this.constructor.defaultProps);
|
||||
_this.elementId = id++;
|
||||
_this.computed = {};
|
||||
return _this;
|
||||
}
|
||||
_this.props = Object.assign({}, _this.constructor.defaultProps);
|
||||
_this.elementId = id++;
|
||||
_this.computed = {};
|
||||
return _this;
|
||||
}
|
||||
|
||||
WeElement.prototype.connectedCallback = function connectedCallback() {
|
||||
var p = this.parentNode;
|
||||
while (p && !this.store) {
|
||||
this.store = p.store;
|
||||
p = p.parentNode || p.host;
|
||||
}
|
||||
WeElement.prototype.connectedCallback = function connectedCallback() {
|
||||
var p = this.parentNode;
|
||||
while (p && !this.store) {
|
||||
this.store = p.store;
|
||||
p = p.parentNode || p.host;
|
||||
}
|
||||
|
||||
this.attrsToProps();
|
||||
this.attrsToProps();
|
||||
|
||||
if (this.props.use) {
|
||||
this.use = this.props.use;
|
||||
}
|
||||
if (this.props.use) {
|
||||
this.use = this.props.use;
|
||||
}
|
||||
|
||||
if (this.props.useSelf) {
|
||||
this.use = this.props.useSelf;
|
||||
}
|
||||
if (this.props.useSelf) {
|
||||
this.use = this.props.useSelf;
|
||||
}
|
||||
|
||||
if (this.use) {
|
||||
var use = typeof this.use === 'function' ? this.use() : this.use;
|
||||
if (this.use) {
|
||||
var use = typeof this.use === 'function' ? this.use() : this.use;
|
||||
|
||||
if (options.isMultiStore) {
|
||||
var _updatePath = {};
|
||||
var using = {};
|
||||
for (var storeName in use) {
|
||||
_updatePath[storeName] = {};
|
||||
using[storeName] = {};
|
||||
getPath(use[storeName], _updatePath, storeName);
|
||||
getUse(this.store[storeName].data, use[storeName], using, storeName);
|
||||
this.store[storeName].instances.push(this);
|
||||
}
|
||||
this.using = using;
|
||||
this._updatePath = _updatePath;
|
||||
} else {
|
||||
this._updatePath = getPath(use);
|
||||
this.using = getUse(this.store.data, use);
|
||||
this.store.instances.push(this);
|
||||
}
|
||||
}
|
||||
if (this.useSelf) {
|
||||
var _use = typeof this.useSelf === 'function' ? this.useSelf() : this.useSelf;
|
||||
if (options.isMultiStore) {
|
||||
var _updatePath2 = {};
|
||||
var _using = {};
|
||||
for (var _storeName in _use) {
|
||||
getPath(_use[_storeName], _updatePath2, _storeName);
|
||||
getUse(this.store[_storeName].data, _use[_storeName], _using, _storeName);
|
||||
this.store[_storeName].updateSelfInstances.push(this);
|
||||
}
|
||||
this.usingSelf = _using;
|
||||
this._updateSelfPath = _updatePath2;
|
||||
} else {
|
||||
this._updateSelfPath = getPath(_use);
|
||||
this.usingSelf = getUse(this.store.data, _use);
|
||||
this.store.updateSelfInstances.push(this);
|
||||
}
|
||||
}
|
||||
if (options.isMultiStore) {
|
||||
var _updatePath = {};
|
||||
var using = {};
|
||||
for (var storeName in use) {
|
||||
_updatePath[storeName] = {};
|
||||
using[storeName] = {};
|
||||
getPath(use[storeName], _updatePath, storeName);
|
||||
getUse(this.store[storeName].data, use[storeName], using, storeName);
|
||||
this.store[storeName].instances.push(this);
|
||||
}
|
||||
this.using = using;
|
||||
this._updatePath = _updatePath;
|
||||
} else {
|
||||
this._updatePath = getPath(use);
|
||||
this.using = getUse(this.store.data, use);
|
||||
this.store.instances.push(this);
|
||||
}
|
||||
}
|
||||
if (this.useSelf) {
|
||||
var _use = typeof this.useSelf === 'function' ? this.useSelf() : this.useSelf;
|
||||
if (options.isMultiStore) {
|
||||
var _updatePath2 = {};
|
||||
var _using = {};
|
||||
for (var _storeName in _use) {
|
||||
getPath(_use[_storeName], _updatePath2, _storeName);
|
||||
getUse(this.store[_storeName].data, _use[_storeName], _using, _storeName);
|
||||
this.store[_storeName].updateSelfInstances.push(this);
|
||||
}
|
||||
this.usingSelf = _using;
|
||||
this._updateSelfPath = _updatePath2;
|
||||
} else {
|
||||
this._updateSelfPath = getPath(_use);
|
||||
this.usingSelf = getUse(this.store.data, _use);
|
||||
this.store.updateSelfInstances.push(this);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.compute) {
|
||||
for (var key in this.compute) {
|
||||
this.computed[key] = this.compute[key].call(options.isMultiStore ? this.store : this.store.data);
|
||||
}
|
||||
}
|
||||
if (this.compute) {
|
||||
for (var key in this.compute) {
|
||||
this.computed[key] = this.compute[key].call(options.isMultiStore ? this.store : this.store.data);
|
||||
}
|
||||
}
|
||||
|
||||
this.beforeInstall();
|
||||
this.install();
|
||||
this.afterInstall();
|
||||
this.beforeInstall();
|
||||
this.install();
|
||||
this.afterInstall();
|
||||
|
||||
var shadowRoot = void 0;
|
||||
if (this.constructor.isLightDom) {
|
||||
shadowRoot = this;
|
||||
} else {
|
||||
var shadowRoot = void 0;
|
||||
if (this.constructor.isLightDom) {
|
||||
shadowRoot = this;
|
||||
} else {
|
||||
|
||||
if (!this.shadowRoot) {
|
||||
shadowRoot = this.attachShadow({
|
||||
mode: 'open'
|
||||
});
|
||||
} else {
|
||||
shadowRoot = this.shadowRoot;
|
||||
var fc = void 0;
|
||||
while (fc = shadowRoot.firstChild) {
|
||||
shadowRoot.removeChild(fc);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!this.shadowRoot) {
|
||||
shadowRoot = this.attachShadow({
|
||||
mode: 'open'
|
||||
});
|
||||
} else {
|
||||
shadowRoot = this.shadowRoot;
|
||||
var fc = void 0;
|
||||
while (fc = shadowRoot.firstChild) {
|
||||
shadowRoot.removeChild(fc);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.constructor.css) {
|
||||
shadowRoot.appendChild(cssToDom(this.constructor.css));
|
||||
} else if (this.css) {
|
||||
shadowRoot.appendChild(cssToDom(typeof this.css === 'function' ? this.css() : this.css));
|
||||
}
|
||||
if (this.constructor.css) {
|
||||
this.styleSheet = new CSSStyleSheet();
|
||||
this.styleSheet.replaceSync(this.constructor.css);
|
||||
shadowRoot.adoptedStyleSheets = [this.styleSheet];
|
||||
}
|
||||
|
||||
this.beforeRender();
|
||||
options.afterInstall && options.afterInstall(this);
|
||||
if (this.css) {
|
||||
shadowRoot.appendChild(cssToDom(typeof this.css === 'function' ? this.css() : this.css));
|
||||
}
|
||||
|
||||
var rendered = this.render(this.props, this.store);
|
||||
this.beforeRender();
|
||||
options.afterInstall && options.afterInstall(this);
|
||||
|
||||
this.rootNode = diff(null, rendered, null, this);
|
||||
this.rendered();
|
||||
var rendered = this.render(this.props, this.store);
|
||||
|
||||
if (this.props.css) {
|
||||
this._customStyleElement = cssToDom(this.props.css);
|
||||
this._customStyleContent = this.props.css;
|
||||
shadowRoot.appendChild(this._customStyleElement);
|
||||
}
|
||||
this.rootNode = diff(null, rendered, null, this);
|
||||
this.rendered();
|
||||
|
||||
if (isArray(this.rootNode)) {
|
||||
this.rootNode.forEach(function (item) {
|
||||
shadowRoot.appendChild(item);
|
||||
});
|
||||
} else {
|
||||
this.rootNode && shadowRoot.appendChild(this.rootNode);
|
||||
}
|
||||
this.installed();
|
||||
this._isInstalled = true;
|
||||
};
|
||||
if (this.props.css) {
|
||||
this._customStyleElement = cssToDom(this.props.css);
|
||||
this._customStyleContent = this.props.css;
|
||||
shadowRoot.appendChild(this._customStyleElement);
|
||||
}
|
||||
|
||||
WeElement.prototype.disconnectedCallback = function disconnectedCallback() {
|
||||
this.uninstall();
|
||||
this._isInstalled = false;
|
||||
if (this.store) {
|
||||
if (options.isMultiStore) {
|
||||
for (var key in this.store) {
|
||||
var current = this.store[key];
|
||||
removeItem(this, current.instances);
|
||||
removeItem(this, current.updateSelfInstances);
|
||||
}
|
||||
} else {
|
||||
removeItem(this, this.store.instances);
|
||||
removeItem(this, this.store.updateSelfInstances);
|
||||
}
|
||||
}
|
||||
};
|
||||
if (isArray(this.rootNode)) {
|
||||
this.rootNode.forEach(function (item) {
|
||||
shadowRoot.appendChild(item);
|
||||
});
|
||||
} else {
|
||||
this.rootNode && shadowRoot.appendChild(this.rootNode);
|
||||
}
|
||||
this.installed();
|
||||
this._isInstalled = true;
|
||||
};
|
||||
|
||||
WeElement.prototype.update = function update(ignoreAttrs, updateSelf) {
|
||||
this._willUpdate = true;
|
||||
this.beforeUpdate();
|
||||
this.beforeRender();
|
||||
//fix null !== undefined
|
||||
if (this._customStyleContent != this.props.css) {
|
||||
this._customStyleContent = this.props.css;
|
||||
this._customStyleElement.textContent = this._customStyleContent;
|
||||
}
|
||||
this.attrsToProps(ignoreAttrs);
|
||||
WeElement.prototype.disconnectedCallback = function disconnectedCallback() {
|
||||
this.uninstall();
|
||||
this._isInstalled = false;
|
||||
if (this.store) {
|
||||
if (options.isMultiStore) {
|
||||
for (var key in this.store) {
|
||||
var current = this.store[key];
|
||||
removeItem(this, current.instances);
|
||||
removeItem(this, current.updateSelfInstances);
|
||||
}
|
||||
} else {
|
||||
removeItem(this, this.store.instances);
|
||||
removeItem(this, this.store.updateSelfInstances);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var rendered = this.render(this.props, this.store);
|
||||
this.rendered();
|
||||
WeElement.prototype.update = function update(ignoreAttrs, updateSelf) {
|
||||
this._willUpdate = true;
|
||||
this.beforeUpdate();
|
||||
this.beforeRender();
|
||||
//fix null !== undefined
|
||||
if (this._customStyleContent != this.props.css) {
|
||||
this._customStyleContent = this.props.css;
|
||||
this._customStyleElement.textContent = this._customStyleContent;
|
||||
}
|
||||
this.attrsToProps(ignoreAttrs);
|
||||
|
||||
this.rootNode = diff(this.rootNode, rendered, this.constructor.isLightDom ? this : this.shadowRoot, this, updateSelf);
|
||||
this._willUpdate = false;
|
||||
this.updated();
|
||||
};
|
||||
var rendered = this.render(this.props, this.store);
|
||||
this.rendered();
|
||||
|
||||
WeElement.prototype.forceUpdate = function forceUpdate() {
|
||||
this.update(true);
|
||||
};
|
||||
this.rootNode = diff(this.rootNode, rendered, this.constructor.isLightDom ? this : this.shadowRoot, this, updateSelf);
|
||||
this._willUpdate = false;
|
||||
this.updated();
|
||||
};
|
||||
|
||||
WeElement.prototype.updateProps = function updateProps(obj) {
|
||||
var _this2 = this;
|
||||
WeElement.prototype.forceUpdate = function forceUpdate() {
|
||||
this.update(true);
|
||||
};
|
||||
|
||||
Object.keys(obj).forEach(function (key) {
|
||||
_this2.props[key] = obj[key];
|
||||
if (_this2.prevProps) {
|
||||
_this2.prevProps[key] = obj[key];
|
||||
}
|
||||
});
|
||||
this.forceUpdate();
|
||||
};
|
||||
WeElement.prototype.updateProps = function updateProps(obj) {
|
||||
var _this2 = this;
|
||||
|
||||
WeElement.prototype.updateSelf = function updateSelf(ignoreAttrs) {
|
||||
this.update(ignoreAttrs, true);
|
||||
};
|
||||
Object.keys(obj).forEach(function (key) {
|
||||
_this2.props[key] = obj[key];
|
||||
if (_this2.prevProps) {
|
||||
_this2.prevProps[key] = obj[key];
|
||||
}
|
||||
});
|
||||
this.forceUpdate();
|
||||
};
|
||||
|
||||
WeElement.prototype.removeAttribute = function removeAttribute(key) {
|
||||
_HTMLElement.prototype.removeAttribute.call(this, key);
|
||||
//Avoid executing removeAttribute methods before connectedCallback
|
||||
this._isInstalled && this.update();
|
||||
};
|
||||
WeElement.prototype.updateSelf = function updateSelf(ignoreAttrs) {
|
||||
this.update(ignoreAttrs, true);
|
||||
};
|
||||
|
||||
WeElement.prototype.setAttribute = function setAttribute(key, val) {
|
||||
if (val && typeof val === 'object') {
|
||||
_HTMLElement.prototype.setAttribute.call(this, key, JSON.stringify(val));
|
||||
} else {
|
||||
_HTMLElement.prototype.setAttribute.call(this, key, val);
|
||||
}
|
||||
//Avoid executing setAttribute methods before connectedCallback
|
||||
this._isInstalled && this.update();
|
||||
};
|
||||
WeElement.prototype.removeAttribute = function removeAttribute(key) {
|
||||
_HTMLElement.prototype.removeAttribute.call(this, key);
|
||||
//Avoid executing removeAttribute methods before connectedCallback
|
||||
this._isInstalled && this.update();
|
||||
};
|
||||
|
||||
WeElement.prototype.pureRemoveAttribute = function pureRemoveAttribute(key) {
|
||||
_HTMLElement.prototype.removeAttribute.call(this, key);
|
||||
};
|
||||
WeElement.prototype.setAttribute = function setAttribute(key, val) {
|
||||
if (val && typeof val === 'object') {
|
||||
_HTMLElement.prototype.setAttribute.call(this, key, JSON.stringify(val));
|
||||
} else {
|
||||
_HTMLElement.prototype.setAttribute.call(this, key, val);
|
||||
}
|
||||
//Avoid executing setAttribute methods before connectedCallback
|
||||
this._isInstalled && this.update();
|
||||
};
|
||||
|
||||
WeElement.prototype.pureSetAttribute = function pureSetAttribute(key, val) {
|
||||
_HTMLElement.prototype.setAttribute.call(this, key, val);
|
||||
};
|
||||
WeElement.prototype.pureRemoveAttribute = function pureRemoveAttribute(key) {
|
||||
_HTMLElement.prototype.removeAttribute.call(this, key);
|
||||
};
|
||||
|
||||
WeElement.prototype.attrsToProps = function attrsToProps(ignoreAttrs) {
|
||||
if (options.ignoreAttrs || ignoreAttrs) return;
|
||||
var ele = this;
|
||||
ele.props['css'] = ele.getAttribute('css');
|
||||
var attrs = this.constructor.propTypes;
|
||||
if (!attrs) return;
|
||||
Object.keys(attrs).forEach(function (key) {
|
||||
var type = attrs[key];
|
||||
var val = ele.getAttribute(hyphenate(key));
|
||||
if (val !== null) {
|
||||
switch (type) {
|
||||
case String:
|
||||
ele.props[key] = val;
|
||||
break;
|
||||
case Number:
|
||||
ele.props[key] = Number(val);
|
||||
break;
|
||||
case Boolean:
|
||||
if (val === 'false' || val === '0') {
|
||||
ele.props[key] = false;
|
||||
} else {
|
||||
ele.props[key] = true;
|
||||
}
|
||||
break;
|
||||
case Array:
|
||||
case Object:
|
||||
if (val[0] === ':') {
|
||||
ele.props[key] = getValByPath(val.substr(1), Omi.$);
|
||||
} else {
|
||||
ele.props[key] = JSON.parse(val.replace(/(['"])?([a-zA-Z0-9_-]+)(['"])?:([^\/])/g, '"$2":$4').replace(/'([\s\S]*?)'/g, '"$1"').replace(/,(\s*})/g, '$1'));
|
||||
}
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
if (ele.constructor.defaultProps && ele.constructor.defaultProps.hasOwnProperty(key)) {
|
||||
ele.props[key] = ele.constructor.defaultProps[key];
|
||||
} else {
|
||||
ele.props[key] = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
WeElement.prototype.pureSetAttribute = function pureSetAttribute(key, val) {
|
||||
_HTMLElement.prototype.setAttribute.call(this, key, val);
|
||||
};
|
||||
|
||||
WeElement.prototype.fire = function fire(name, data) {
|
||||
this.dispatchEvent(new CustomEvent(name, {
|
||||
detail: data
|
||||
}));
|
||||
};
|
||||
WeElement.prototype.attrsToProps = function attrsToProps(ignoreAttrs) {
|
||||
if (options.ignoreAttrs || ignoreAttrs) return;
|
||||
var ele = this;
|
||||
ele.props['css'] = ele.getAttribute('css');
|
||||
var attrs = this.constructor.propTypes;
|
||||
if (!attrs) return;
|
||||
Object.keys(attrs).forEach(function (key) {
|
||||
var type = attrs[key];
|
||||
var val = ele.getAttribute(hyphenate(key));
|
||||
if (val !== null) {
|
||||
switch (type) {
|
||||
case String:
|
||||
ele.props[key] = val;
|
||||
break;
|
||||
case Number:
|
||||
ele.props[key] = Number(val);
|
||||
break;
|
||||
case Boolean:
|
||||
if (val === 'false' || val === '0') {
|
||||
ele.props[key] = false;
|
||||
} else {
|
||||
ele.props[key] = true;
|
||||
}
|
||||
break;
|
||||
case Array:
|
||||
case Object:
|
||||
if (val[0] === ':') {
|
||||
ele.props[key] = getValByPath(val.substr(1), Omi.$);
|
||||
} else {
|
||||
ele.props[key] = JSON.parse(val.replace(/(['"])?([a-zA-Z0-9_-]+)(['"])?:([^\/])/g, '"$2":$4').replace(/'([\s\S]*?)'/g, '"$1"').replace(/,(\s*})/g, '$1'));
|
||||
}
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
if (ele.constructor.defaultProps && ele.constructor.defaultProps.hasOwnProperty(key)) {
|
||||
ele.props[key] = ele.constructor.defaultProps[key];
|
||||
} else {
|
||||
ele.props[key] = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
WeElement.prototype.beforeInstall = function beforeInstall() {};
|
||||
WeElement.prototype.fire = function fire(name, data) {
|
||||
this.dispatchEvent(new CustomEvent(name, {
|
||||
detail: data
|
||||
}));
|
||||
};
|
||||
|
||||
WeElement.prototype.install = function install() {};
|
||||
WeElement.prototype.beforeInstall = function beforeInstall() {};
|
||||
|
||||
WeElement.prototype.afterInstall = function afterInstall() {};
|
||||
WeElement.prototype.install = function install() {};
|
||||
|
||||
WeElement.prototype.installed = function installed() {};
|
||||
WeElement.prototype.afterInstall = function afterInstall() {};
|
||||
|
||||
WeElement.prototype.uninstall = function uninstall() {};
|
||||
WeElement.prototype.installed = function installed() {};
|
||||
|
||||
WeElement.prototype.beforeUpdate = function beforeUpdate() {};
|
||||
WeElement.prototype.uninstall = function uninstall() {};
|
||||
|
||||
WeElement.prototype.updated = function updated() {};
|
||||
WeElement.prototype.beforeUpdate = function beforeUpdate() {};
|
||||
|
||||
WeElement.prototype.beforeRender = function beforeRender() {};
|
||||
WeElement.prototype.updated = function updated() {};
|
||||
|
||||
WeElement.prototype.rendered = function rendered() {};
|
||||
WeElement.prototype.beforeRender = function beforeRender() {};
|
||||
|
||||
WeElement.prototype.receiveProps = function receiveProps() {};
|
||||
WeElement.prototype.rendered = function rendered() {};
|
||||
|
||||
return WeElement;
|
||||
WeElement.prototype.receiveProps = function receiveProps() {};
|
||||
|
||||
return WeElement;
|
||||
}(HTMLElement), _class.is = 'WeElement', _temp);
|
||||
|
||||
/*!
|
||||
|
|
@ -1797,6 +1801,238 @@
|
|||
|
||||
var n=function(t,r,u,e){for(var p=1;p<r.length;p++){var s=r[p],h="number"==typeof s?u[s]:s,a=r[++p];1===a?e[0]=h:3===a?e[1]=Object.assign(e[1]||{},h):5===a?(e[1]=e[1]||{})[r[++p]]=h:6===a?e[1][r[++p]]+=h+"":e.push(a?t.apply(null,n(t,h,u,["",null])):h);}return e},t=function(n){for(var t,r,u=1,e="",p="",s=[0],h=function(n){1===u&&(n||(e=e.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?s.push(n||e,0):3===u&&(n||e)?(s.push(n||e,1), u=2):2===u&&"..."===e&&n?s.push(n,3):2===u&&e&&!n?s.push(!0,5,e):u>=5&&((e||!n&&5===u)&&(s.push(e,u,r), u=6), n&&(s.push(n,u,r), u=6)), e="";},a=0;a<n.length;a++){a&&(1===u&&h(), h(a));for(var f=0;f<n[a].length;f++)t=n[a][f], 1===u?"<"===t?(h(), s=[s], u=3):e+=t:4===u?"--"===e&&">"===t?(u=1, e=""):e=t+e[0]:p?t===p?p="":e+=t:'"'===t||"'"===t?p=t:">"===t?(h(), u=1):u&&("="===t?(u=5, r=e, e=""):"/"===t&&(u<5||">"===n[a][f+1])?(h(), 3===u&&(s=s[0]), u=s, (s=s[0]).push(u,2), u=0):" "===t||"\t"===t||"\n"===t||"\r"===t?(h(), u=2):e+=t), 3===u&&"!--"===e&&(u=4, s=s[0]);}return h(), s},r="function"==typeof Map,u=r?new Map:{},e=r?function(n){var r=u.get(n);return r||u.set(n,r=t(n)), r}:function(n){for(var r="",e=0;e<n.length;e++)r+=n[e].length+"-"+n[e];return u[r]||(u[r]=t(n))};function htm(t){var r=n(this,e(t),arguments,[]);return r.length>1?r:r[0]}
|
||||
|
||||
(function () {
|
||||
try {
|
||||
new window.CSSStyleSheet('a{}');
|
||||
return;
|
||||
} catch (e) {}
|
||||
|
||||
// TODO: this could really just by a dunderprop to keep the polyfill light.
|
||||
var INTERNAL = typeof Symbol !== 'undefined' ? Symbol('__s') : '__s';
|
||||
|
||||
/**
|
||||
* Problem 1:
|
||||
* CSSStyleSheet is nonconfigurable.
|
||||
* This means we're stuck with a ponyfill and not a "perfect" polyfill.
|
||||
*/
|
||||
// Object.defineProperty(window, 'CSSStyleSheet', {
|
||||
// configurable: true,
|
||||
// enumerable: true,
|
||||
// get: () => CSSStyleSheet
|
||||
// });
|
||||
|
||||
var OriginalCSSStyleSheet = window.CSSStyleSheet;
|
||||
|
||||
window.CSSStyleSheet = CSSStyleSheet;
|
||||
|
||||
var DOC = void 0;
|
||||
|
||||
var counter = 0;
|
||||
|
||||
/**
|
||||
* Problem #2:
|
||||
* CSSStyleSheet is not instantiable.
|
||||
* We can inherit from the real CSSStyleSheet in order to
|
||||
*/
|
||||
|
||||
function CSSStyleSheet(options) {
|
||||
if (!DOC) {
|
||||
var frame = document.createElement('iframe');
|
||||
frame.style.cssText = 'position:absolute;left:0;top:-9999px;width:1px;height:1px;';
|
||||
document.body.appendChild(frame);
|
||||
DOC = frame.contentWindow.document;
|
||||
}
|
||||
var style = DOC.createElement('style');
|
||||
style.$id = ++counter;
|
||||
style.childSheets = [];
|
||||
style.appendChild(DOC.createTextNode(''));
|
||||
DOC.body.appendChild(style);
|
||||
// console.log(style, sheet);
|
||||
Object.assign(style.sheet, options || {});
|
||||
this[INTERNAL] = style;
|
||||
}
|
||||
|
||||
// we can be nice and ensure that this holds:
|
||||
// document.createElement('style').stylesheet instanceof CSSStyleSeetPolyfill
|
||||
CSSStyleSheet.prototype = Object.create(OriginalCSSStyleSheet);
|
||||
|
||||
Object.defineProperty(CSSStyleSheet.prototype, 'cssRules', {
|
||||
get: function get() {
|
||||
return this[INTERNAL].sheet.cssRules;
|
||||
}
|
||||
});
|
||||
|
||||
CSSStyleSheet.prototype.replace = function (cssText) {
|
||||
var style = this[INTERNAL];
|
||||
return new Promise(function (resolve, reject) {
|
||||
var l = DOC.createElement('link');
|
||||
l.rel = 'preload';
|
||||
l.as = 'style';
|
||||
l.onload = function () {
|
||||
// sheet.ownerNode.firstChild.textContent = cssText;
|
||||
style.firstChild.data = cssText;
|
||||
for (var i = 0; i < style.childSheets.length; i++) {
|
||||
style.childSheets[i].firstChild.data = cssText;
|
||||
}
|
||||
// if (sheet.cssRules[0]) sheet.deleteRule(0);
|
||||
// sheet.insertRule(cssText);
|
||||
l.remove();
|
||||
resolve();
|
||||
};
|
||||
l.onerror = reject;
|
||||
l.href = 'data:text/css;base64,' + btoa(cssText);
|
||||
DOC.head.appendChild(l);
|
||||
});
|
||||
};
|
||||
|
||||
CSSStyleSheet.prototype.replaceSync = function (cssText) {
|
||||
var style = this[INTERNAL];
|
||||
if (cssText.replace(/\/\*[\s\S]+?\*\//g, '').match(/@import\s*\(\s*(['"])[^\1]*?\1\s*\)/)) {
|
||||
throw Error('no');
|
||||
}
|
||||
// if (sheet.cssRules[0]) sheet.deleteRule(0);
|
||||
// sheet.insertRule(cssText);
|
||||
// sheet.ownerNode.firstChild.textContent = cssText;
|
||||
style.firstChild.data = cssText;
|
||||
for (var i = 0; i < style.childSheets.length; i++) {
|
||||
style.childSheets[i].firstChild.data = cssText;
|
||||
}
|
||||
};
|
||||
|
||||
var oldInnerHTML = Object.getOwnPropertyDescriptor(ShadowRoot.prototype, 'innerHTML');
|
||||
var oldFirstChild = Object.getOwnPropertyDescriptor(Node.prototype, 'firstChild');
|
||||
var oldLastChild = Object.getOwnPropertyDescriptor(Node.prototype, 'lastChild');
|
||||
|
||||
function getState(obj) {
|
||||
return obj[INTERNAL] || (obj[INTERNAL] = {
|
||||
adoptedStyleSheets: [],
|
||||
sheets: [],
|
||||
id: ++counter
|
||||
});
|
||||
}
|
||||
|
||||
Object.defineProperties(ShadowRoot.prototype, {
|
||||
firstChild: {
|
||||
get: function get() {
|
||||
var child = oldFirstChild.get.call(this);
|
||||
while (child) {
|
||||
if (child[INTERNAL] == null) break;
|
||||
child = child.nextSibling;
|
||||
}
|
||||
return child;
|
||||
}
|
||||
},
|
||||
|
||||
lastChild: {
|
||||
get: function get() {
|
||||
var child = oldLastChild.get.call(this);
|
||||
while (child) {
|
||||
if (child[INTERNAL] == null) break;
|
||||
child = child.previousSibling;
|
||||
}
|
||||
return child;
|
||||
}
|
||||
},
|
||||
|
||||
// @TODO
|
||||
// childNodes: {},
|
||||
// children: {},
|
||||
|
||||
innerHTML: {
|
||||
get: function get() {
|
||||
var html = '';
|
||||
var child = oldFirstChild.get.call(this);
|
||||
while (child) {
|
||||
if (!child[INTERNAL]) {
|
||||
if (child.nodeType === 3) html += child.data;
|
||||
html += child.outerHTML;
|
||||
}
|
||||
child = child.nextSibling;
|
||||
}
|
||||
return html;
|
||||
// return old.get.call(this).replace(/</);
|
||||
},
|
||||
set: function set(html) {
|
||||
var child = oldFirstChild.get.call(this);
|
||||
var sheets = [];
|
||||
while (child) {
|
||||
if (child[INTERNAL]) sheets.push(child);
|
||||
child = child.nextSibling;
|
||||
}
|
||||
oldInnerHTML.set.call(this, html);
|
||||
child = oldFirstChild.get.call(this);
|
||||
for (var i = 0; i < sheets.length; i++) {
|
||||
this.insertBefore(sheets[i], child);
|
||||
}
|
||||
// this.insertAdjacentHTML(html, 'beforeend');
|
||||
}
|
||||
},
|
||||
|
||||
adoptedStyleSheets: {
|
||||
get: function get() {
|
||||
var state = getState(this);
|
||||
return state.adoptedStyleSheets;
|
||||
},
|
||||
|
||||
|
||||
// @TODO:
|
||||
// Chrome's implementation doesn't do any diffing, so the polyfill needn't either.
|
||||
// Also, we should always clone the passed Array and freeze it if available.
|
||||
set: function set(value) {
|
||||
var state = getState(this);
|
||||
var previous = state.adoptedStyleSheets.slice();
|
||||
var indices = [];
|
||||
if (!Array.isArray(value)) {
|
||||
value = [].concat(value || []);
|
||||
}
|
||||
// this[INTERNAL] = value;
|
||||
state.adoptedStyleSheets = value;
|
||||
for (var i = 0; i < value.length; i++) {
|
||||
var v = value[i];
|
||||
var index = previous.indexOf(v);
|
||||
if (index === -1) {
|
||||
var style = v[INTERNAL];
|
||||
var clone = style.cloneNode(true);
|
||||
// clone.setAttribute('data-is-constructed', state.id);
|
||||
clone[INTERNAL] = {};
|
||||
// clone.$parent = style;
|
||||
style.childSheets.push(clone);
|
||||
// clone.textContent = style.textContent;
|
||||
// clone.$id = style.$id;
|
||||
// state.sheets.push(clone);
|
||||
this.appendChild(clone);
|
||||
// console.log(this, clone, this.childNodes);
|
||||
// console.log(`found new sheet, adding.`, clone);
|
||||
} else {
|
||||
indices[index] = true;
|
||||
// const style = v[INTERNAL];
|
||||
}
|
||||
}
|
||||
for (var _i = 0; _i < previous.length; _i++) {
|
||||
if (indices[_i] !== true) {
|
||||
var prev = previous[_i][INTERNAL];
|
||||
// const style = prev.$parent;
|
||||
for (var j = 0; j < prev.childSheets.length; j++) {
|
||||
var sheet = prev.childSheets[j];
|
||||
if (sheet.parentNode === this) {
|
||||
this.removeChild(sheet);
|
||||
prev.childSheets.splice(j, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
// for (let j = 0; j < state.sheets.length; j++) {
|
||||
// if (state.sheets[j].$id === prev.$id) {
|
||||
// state.sheets[j].remove();
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
h.f = Fragment;
|
||||
|
||||
var html = htm.bind(h);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "omi",
|
||||
"version": "6.19.3",
|
||||
"version": "6.19.4",
|
||||
"description": "Front End Cross-Frameworks Framework.",
|
||||
"main": "dist/omi.js",
|
||||
"jsnext:main": "dist/omi.esm.js",
|
||||
|
|
@ -137,10 +137,12 @@
|
|||
"rollup-plugin-babel"
|
||||
]
|
||||
},
|
||||
"bundlesize": [{
|
||||
"path": "./dist/omi.min.js",
|
||||
"threshold": "4Kb"
|
||||
}],
|
||||
"bundlesize": [
|
||||
{
|
||||
"path": "./dist/omi.min.js",
|
||||
"threshold": "4Kb"
|
||||
}
|
||||
],
|
||||
"prettier": {
|
||||
"singleQuote": true,
|
||||
"semi": false,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,247 @@
|
|||
(function () {
|
||||
try {
|
||||
new window.CSSStyleSheet('a{}');
|
||||
return;
|
||||
} catch (e) { }
|
||||
|
||||
// TODO: this could really just by a dunderprop to keep the polyfill light.
|
||||
const INTERNAL = typeof Symbol !== 'undefined' ? Symbol('__s') : '__s';
|
||||
|
||||
/**
|
||||
* Problem 1:
|
||||
* CSSStyleSheet is nonconfigurable.
|
||||
* This means we're stuck with a ponyfill and not a "perfect" polyfill.
|
||||
*/
|
||||
// Object.defineProperty(window, 'CSSStyleSheet', {
|
||||
// configurable: true,
|
||||
// enumerable: true,
|
||||
// get: () => CSSStyleSheet
|
||||
// });
|
||||
|
||||
const OriginalCSSStyleSheet = window.CSSStyleSheet;
|
||||
|
||||
window.CSSStyleSheet = CSSStyleSheet;
|
||||
|
||||
let DOC;
|
||||
|
||||
let counter = 0;
|
||||
|
||||
/**
|
||||
* Problem #2:
|
||||
* CSSStyleSheet is not instantiable.
|
||||
* We can inherit from the real CSSStyleSheet in order to
|
||||
*/
|
||||
|
||||
function CSSStyleSheet(options) {
|
||||
if (!DOC) {
|
||||
const frame = document.createElement('iframe');
|
||||
frame.style.cssText =
|
||||
'position:absolute;left:0;top:-9999px;width:1px;height:1px;';
|
||||
document.body.appendChild(frame);
|
||||
DOC = frame.contentWindow.document;
|
||||
}
|
||||
const style = DOC.createElement('style');
|
||||
style.$id = ++counter;
|
||||
style.childSheets = [];
|
||||
style.appendChild(DOC.createTextNode(''));
|
||||
DOC.body.appendChild(style);
|
||||
// console.log(style, sheet);
|
||||
Object.assign(style.sheet, options || {});
|
||||
this[INTERNAL] = style;
|
||||
}
|
||||
|
||||
// we can be nice and ensure that this holds:
|
||||
// document.createElement('style').stylesheet instanceof CSSStyleSeetPolyfill
|
||||
CSSStyleSheet.prototype = Object.create(OriginalCSSStyleSheet);
|
||||
|
||||
Object.defineProperty(CSSStyleSheet.prototype, 'cssRules', {
|
||||
get() {
|
||||
return this[INTERNAL].sheet.cssRules;
|
||||
}
|
||||
});
|
||||
|
||||
CSSStyleSheet.prototype.replace = function (cssText) {
|
||||
const style = this[INTERNAL];
|
||||
return new Promise((resolve, reject) => {
|
||||
const l = DOC.createElement('link');
|
||||
l.rel = 'preload';
|
||||
l.as = 'style';
|
||||
l.onload = () => {
|
||||
// sheet.ownerNode.firstChild.textContent = cssText;
|
||||
style.firstChild.data = cssText;
|
||||
for (let i = 0; i < style.childSheets.length; i++) {
|
||||
style.childSheets[i].firstChild.data = cssText;
|
||||
}
|
||||
// if (sheet.cssRules[0]) sheet.deleteRule(0);
|
||||
// sheet.insertRule(cssText);
|
||||
l.remove();
|
||||
resolve();
|
||||
};
|
||||
l.onerror = reject;
|
||||
l.href = 'data:text/css;base64,' + btoa(cssText);
|
||||
DOC.head.appendChild(l);
|
||||
});
|
||||
};
|
||||
|
||||
CSSStyleSheet.prototype.replaceSync = function (cssText) {
|
||||
const style = this[INTERNAL];
|
||||
if (
|
||||
cssText
|
||||
.replace(/\/\*[\s\S]+?\*\//g, '')
|
||||
.match(/@import\s*\(\s*(['"])[^\1]*?\1\s*\)/)
|
||||
) {
|
||||
throw Error('no');
|
||||
}
|
||||
// if (sheet.cssRules[0]) sheet.deleteRule(0);
|
||||
// sheet.insertRule(cssText);
|
||||
// sheet.ownerNode.firstChild.textContent = cssText;
|
||||
style.firstChild.data = cssText;
|
||||
for (let i = 0; i < style.childSheets.length; i++) {
|
||||
style.childSheets[i].firstChild.data = cssText;
|
||||
}
|
||||
};
|
||||
|
||||
const oldInnerHTML = Object.getOwnPropertyDescriptor(
|
||||
ShadowRoot.prototype,
|
||||
'innerHTML'
|
||||
);
|
||||
const oldFirstChild = Object.getOwnPropertyDescriptor(
|
||||
Node.prototype,
|
||||
'firstChild'
|
||||
);
|
||||
const oldLastChild = Object.getOwnPropertyDescriptor(
|
||||
Node.prototype,
|
||||
'lastChild'
|
||||
);
|
||||
|
||||
function getState(obj) {
|
||||
return (
|
||||
obj[INTERNAL] ||
|
||||
(obj[INTERNAL] = {
|
||||
adoptedStyleSheets: [],
|
||||
sheets: [],
|
||||
id: ++counter
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
Object.defineProperties(ShadowRoot.prototype, {
|
||||
firstChild: {
|
||||
get() {
|
||||
let child = oldFirstChild.get.call(this);
|
||||
while (child) {
|
||||
if (child[INTERNAL] == null) break;
|
||||
child = child.nextSibling;
|
||||
}
|
||||
return child;
|
||||
}
|
||||
},
|
||||
|
||||
lastChild: {
|
||||
get() {
|
||||
let child = oldLastChild.get.call(this);
|
||||
while (child) {
|
||||
if (child[INTERNAL] == null) break;
|
||||
child = child.previousSibling;
|
||||
}
|
||||
return child;
|
||||
}
|
||||
},
|
||||
|
||||
// @TODO
|
||||
// childNodes: {},
|
||||
// children: {},
|
||||
|
||||
innerHTML: {
|
||||
get() {
|
||||
let html = '';
|
||||
let child = oldFirstChild.get.call(this);
|
||||
while (child) {
|
||||
if (!child[INTERNAL]) {
|
||||
if (child.nodeType === 3) html += child.data;
|
||||
html += child.outerHTML;
|
||||
}
|
||||
child = child.nextSibling;
|
||||
}
|
||||
return html;
|
||||
// return old.get.call(this).replace(/</);
|
||||
},
|
||||
set(html) {
|
||||
let child = oldFirstChild.get.call(this);
|
||||
let sheets = [];
|
||||
while (child) {
|
||||
if (child[INTERNAL]) sheets.push(child);
|
||||
child = child.nextSibling;
|
||||
}
|
||||
oldInnerHTML.set.call(this, html);
|
||||
child = oldFirstChild.get.call(this);
|
||||
for (let i = 0; i < sheets.length; i++) {
|
||||
this.insertBefore(sheets[i], child);
|
||||
}
|
||||
// this.insertAdjacentHTML(html, 'beforeend');
|
||||
}
|
||||
},
|
||||
|
||||
adoptedStyleSheets: {
|
||||
get() {
|
||||
const state = getState(this);
|
||||
return state.adoptedStyleSheets;
|
||||
},
|
||||
|
||||
// @TODO:
|
||||
// Chrome's implementation doesn't do any diffing, so the polyfill needn't either.
|
||||
// Also, we should always clone the passed Array and freeze it if available.
|
||||
set(value) {
|
||||
const state = getState(this);
|
||||
let previous = state.adoptedStyleSheets.slice();
|
||||
const indices = [];
|
||||
if (!Array.isArray(value)) {
|
||||
value = [].concat(value || []);
|
||||
}
|
||||
// this[INTERNAL] = value;
|
||||
state.adoptedStyleSheets = value;
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
const v = value[i];
|
||||
const index = previous.indexOf(v);
|
||||
if (index === -1) {
|
||||
const style = v[INTERNAL];
|
||||
const clone = style.cloneNode(true);
|
||||
// clone.setAttribute('data-is-constructed', state.id);
|
||||
clone[INTERNAL] = {};
|
||||
// clone.$parent = style;
|
||||
style.childSheets.push(clone);
|
||||
// clone.textContent = style.textContent;
|
||||
// clone.$id = style.$id;
|
||||
// state.sheets.push(clone);
|
||||
this.appendChild(clone);
|
||||
// console.log(this, clone, this.childNodes);
|
||||
// console.log(`found new sheet, adding.`, clone);
|
||||
} else {
|
||||
indices[index] = true;
|
||||
// const style = v[INTERNAL];
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < previous.length; i++) {
|
||||
if (indices[i] !== true) {
|
||||
const prev = previous[i][INTERNAL];
|
||||
// const style = prev.$parent;
|
||||
for (let j = 0; j < prev.childSheets.length; j++) {
|
||||
const sheet = prev.childSheets[j];
|
||||
if (sheet.parentNode === this) {
|
||||
this.removeChild(sheet);
|
||||
prev.childSheets.splice(j, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
// for (let j = 0; j < state.sheets.length; j++) {
|
||||
// if (state.sheets[j].$id === prev.$id) {
|
||||
// state.sheets[j].remove();
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}());
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -13,6 +13,7 @@ import htm from 'htm'
|
|||
import { extend, get, set, bind, unbind } from './extend'
|
||||
import JSONProxy from './proxy'
|
||||
import { Fragment } from './util'
|
||||
import './constructable-stylesheets-polyfill'
|
||||
|
||||
h.f = Fragment
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import {
|
||||
cssToDom,
|
||||
isArray,
|
||||
getUse,
|
||||
hyphenate,
|
||||
getValByPath,
|
||||
removeItem
|
||||
cssToDom,
|
||||
isArray,
|
||||
getUse,
|
||||
hyphenate,
|
||||
getValByPath,
|
||||
removeItem
|
||||
} from './util'
|
||||
import { diff } from './vdom/diff'
|
||||
import options from './options'
|
||||
|
|
@ -13,296 +13,300 @@ import { getPath } from './util'
|
|||
let id = 0
|
||||
|
||||
export default class WeElement extends HTMLElement {
|
||||
static is = 'WeElement'
|
||||
static is = 'WeElement'
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
this.props = Object.assign({}, this.constructor.defaultProps)
|
||||
this.elementId = id++
|
||||
this.computed = {}
|
||||
}
|
||||
constructor() {
|
||||
super()
|
||||
this.props = Object.assign({}, this.constructor.defaultProps)
|
||||
this.elementId = id++
|
||||
this.computed = {}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
let p = this.parentNode
|
||||
while (p && !this.store) {
|
||||
this.store = p.store
|
||||
p = p.parentNode || p.host
|
||||
}
|
||||
connectedCallback() {
|
||||
let p = this.parentNode
|
||||
while (p && !this.store) {
|
||||
this.store = p.store
|
||||
p = p.parentNode || p.host
|
||||
}
|
||||
|
||||
this.attrsToProps()
|
||||
this.attrsToProps()
|
||||
|
||||
if (this.props.use) {
|
||||
this.use = this.props.use
|
||||
}
|
||||
if (this.props.use) {
|
||||
this.use = this.props.use
|
||||
}
|
||||
|
||||
if (this.props.useSelf) {
|
||||
this.use = this.props.useSelf
|
||||
}
|
||||
if (this.props.useSelf) {
|
||||
this.use = this.props.useSelf
|
||||
}
|
||||
|
||||
if (this.use) {
|
||||
const use = typeof this.use === 'function' ? this.use() : this.use
|
||||
if (this.use) {
|
||||
const use = typeof this.use === 'function' ? this.use() : this.use
|
||||
|
||||
if (options.isMultiStore) {
|
||||
let _updatePath = {}
|
||||
let using = {}
|
||||
for (let storeName in use) {
|
||||
_updatePath[storeName] = {}
|
||||
using[storeName] = {}
|
||||
getPath(use[storeName], _updatePath, storeName)
|
||||
getUse(this.store[storeName].data, use[storeName], using, storeName)
|
||||
this.store[storeName].instances.push(this)
|
||||
}
|
||||
this.using = using
|
||||
this._updatePath = _updatePath
|
||||
} else {
|
||||
this._updatePath = getPath(use)
|
||||
this.using = getUse(this.store.data, use)
|
||||
this.store.instances.push(this)
|
||||
}
|
||||
}
|
||||
if (this.useSelf) {
|
||||
const use =
|
||||
typeof this.useSelf === 'function' ? this.useSelf() : this.useSelf
|
||||
if (options.isMultiStore) {
|
||||
let _updatePath = {}
|
||||
let using = {}
|
||||
for (let storeName in use) {
|
||||
getPath(use[storeName], _updatePath, storeName)
|
||||
getUse(this.store[storeName].data, use[storeName], using, storeName)
|
||||
this.store[storeName].updateSelfInstances.push(this)
|
||||
}
|
||||
this.usingSelf = using
|
||||
this._updateSelfPath = _updatePath
|
||||
} else {
|
||||
this._updateSelfPath = getPath(use)
|
||||
this.usingSelf = getUse(this.store.data, use)
|
||||
this.store.updateSelfInstances.push(this)
|
||||
}
|
||||
}
|
||||
if (options.isMultiStore) {
|
||||
let _updatePath = {}
|
||||
let using = {}
|
||||
for (let storeName in use) {
|
||||
_updatePath[storeName] = {}
|
||||
using[storeName] = {}
|
||||
getPath(use[storeName], _updatePath, storeName)
|
||||
getUse(this.store[storeName].data, use[storeName], using, storeName)
|
||||
this.store[storeName].instances.push(this)
|
||||
}
|
||||
this.using = using
|
||||
this._updatePath = _updatePath
|
||||
} else {
|
||||
this._updatePath = getPath(use)
|
||||
this.using = getUse(this.store.data, use)
|
||||
this.store.instances.push(this)
|
||||
}
|
||||
}
|
||||
if (this.useSelf) {
|
||||
const use =
|
||||
typeof this.useSelf === 'function' ? this.useSelf() : this.useSelf
|
||||
if (options.isMultiStore) {
|
||||
let _updatePath = {}
|
||||
let using = {}
|
||||
for (let storeName in use) {
|
||||
getPath(use[storeName], _updatePath, storeName)
|
||||
getUse(this.store[storeName].data, use[storeName], using, storeName)
|
||||
this.store[storeName].updateSelfInstances.push(this)
|
||||
}
|
||||
this.usingSelf = using
|
||||
this._updateSelfPath = _updatePath
|
||||
} else {
|
||||
this._updateSelfPath = getPath(use)
|
||||
this.usingSelf = getUse(this.store.data, use)
|
||||
this.store.updateSelfInstances.push(this)
|
||||
}
|
||||
}
|
||||
|
||||
if (this.compute) {
|
||||
for (let key in this.compute) {
|
||||
this.computed[key] = this.compute[key].call(
|
||||
options.isMultiStore ? this.store : this.store.data
|
||||
)
|
||||
}
|
||||
}
|
||||
if (this.compute) {
|
||||
for (let key in this.compute) {
|
||||
this.computed[key] = this.compute[key].call(
|
||||
options.isMultiStore ? this.store : this.store.data
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
this.beforeInstall()
|
||||
this.install()
|
||||
this.afterInstall()
|
||||
this.beforeInstall()
|
||||
this.install()
|
||||
this.afterInstall()
|
||||
|
||||
let shadowRoot
|
||||
if (this.constructor.isLightDom) {
|
||||
shadowRoot = this
|
||||
} else {
|
||||
let shadowRoot
|
||||
if (this.constructor.isLightDom) {
|
||||
shadowRoot = this
|
||||
} else {
|
||||
|
||||
if (!this.shadowRoot) {
|
||||
shadowRoot = this.attachShadow({
|
||||
mode: 'open'
|
||||
})
|
||||
} else {
|
||||
shadowRoot = this.shadowRoot
|
||||
let fc
|
||||
while ((fc = shadowRoot.firstChild)) {
|
||||
shadowRoot.removeChild(fc)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!this.shadowRoot) {
|
||||
shadowRoot = this.attachShadow({
|
||||
mode: 'open'
|
||||
})
|
||||
} else {
|
||||
shadowRoot = this.shadowRoot
|
||||
let fc
|
||||
while ((fc = shadowRoot.firstChild)) {
|
||||
shadowRoot.removeChild(fc)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.constructor.css) {
|
||||
shadowRoot.appendChild(cssToDom(this.constructor.css))
|
||||
} else if (this.css) {
|
||||
shadowRoot.appendChild(
|
||||
cssToDom(typeof this.css === 'function' ? this.css() : this.css)
|
||||
)
|
||||
}
|
||||
if (this.constructor.css) {
|
||||
this.styleSheet = new CSSStyleSheet()
|
||||
this.styleSheet.replaceSync(this.constructor.css)
|
||||
shadowRoot.adoptedStyleSheets = [this.styleSheet]
|
||||
}
|
||||
|
||||
this.beforeRender()
|
||||
options.afterInstall && options.afterInstall(this)
|
||||
if (this.css) {
|
||||
shadowRoot.appendChild(
|
||||
cssToDom(typeof this.css === 'function' ? this.css() : this.css)
|
||||
)
|
||||
}
|
||||
|
||||
const rendered = this.render(this.props, this.store)
|
||||
this.beforeRender()
|
||||
options.afterInstall && options.afterInstall(this)
|
||||
|
||||
this.rootNode = diff(null, rendered, null, this)
|
||||
this.rendered()
|
||||
const rendered = this.render(this.props, this.store)
|
||||
|
||||
if (this.props.css) {
|
||||
this._customStyleElement = cssToDom(this.props.css)
|
||||
this._customStyleContent = this.props.css
|
||||
shadowRoot.appendChild(this._customStyleElement)
|
||||
}
|
||||
this.rootNode = diff(null, rendered, null, this)
|
||||
this.rendered()
|
||||
|
||||
if (isArray(this.rootNode)) {
|
||||
this.rootNode.forEach(function (item) {
|
||||
shadowRoot.appendChild(item)
|
||||
})
|
||||
} else {
|
||||
this.rootNode && shadowRoot.appendChild(this.rootNode)
|
||||
}
|
||||
this.installed()
|
||||
this._isInstalled = true
|
||||
}
|
||||
if (this.props.css) {
|
||||
this._customStyleElement = cssToDom(this.props.css)
|
||||
this._customStyleContent = this.props.css
|
||||
shadowRoot.appendChild(this._customStyleElement)
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this.uninstall()
|
||||
this._isInstalled = false
|
||||
if (this.store) {
|
||||
if (options.isMultiStore) {
|
||||
for (let key in this.store) {
|
||||
const current = this.store[key]
|
||||
removeItem(this, current.instances)
|
||||
removeItem(this, current.updateSelfInstances)
|
||||
}
|
||||
} else {
|
||||
removeItem(this, this.store.instances)
|
||||
removeItem(this, this.store.updateSelfInstances)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (isArray(this.rootNode)) {
|
||||
this.rootNode.forEach(function (item) {
|
||||
shadowRoot.appendChild(item)
|
||||
})
|
||||
} else {
|
||||
this.rootNode && shadowRoot.appendChild(this.rootNode)
|
||||
}
|
||||
this.installed()
|
||||
this._isInstalled = true
|
||||
}
|
||||
|
||||
update(ignoreAttrs, updateSelf) {
|
||||
this._willUpdate = true
|
||||
this.beforeUpdate()
|
||||
this.beforeRender()
|
||||
//fix null !== undefined
|
||||
if (this._customStyleContent != this.props.css) {
|
||||
this._customStyleContent = this.props.css
|
||||
this._customStyleElement.textContent = this._customStyleContent
|
||||
}
|
||||
this.attrsToProps(ignoreAttrs)
|
||||
disconnectedCallback() {
|
||||
this.uninstall()
|
||||
this._isInstalled = false
|
||||
if (this.store) {
|
||||
if (options.isMultiStore) {
|
||||
for (let key in this.store) {
|
||||
const current = this.store[key]
|
||||
removeItem(this, current.instances)
|
||||
removeItem(this, current.updateSelfInstances)
|
||||
}
|
||||
} else {
|
||||
removeItem(this, this.store.instances)
|
||||
removeItem(this, this.store.updateSelfInstances)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const rendered = this.render(this.props, this.store)
|
||||
this.rendered()
|
||||
update(ignoreAttrs, updateSelf) {
|
||||
this._willUpdate = true
|
||||
this.beforeUpdate()
|
||||
this.beforeRender()
|
||||
//fix null !== undefined
|
||||
if (this._customStyleContent != this.props.css) {
|
||||
this._customStyleContent = this.props.css
|
||||
this._customStyleElement.textContent = this._customStyleContent
|
||||
}
|
||||
this.attrsToProps(ignoreAttrs)
|
||||
|
||||
this.rootNode = diff(
|
||||
this.rootNode,
|
||||
rendered,
|
||||
this.constructor.isLightDom ? this : this.shadowRoot,
|
||||
this,
|
||||
updateSelf
|
||||
)
|
||||
this._willUpdate = false
|
||||
this.updated()
|
||||
}
|
||||
const rendered = this.render(this.props, this.store)
|
||||
this.rendered()
|
||||
|
||||
forceUpdate() {
|
||||
this.update(true)
|
||||
}
|
||||
this.rootNode = diff(
|
||||
this.rootNode,
|
||||
rendered,
|
||||
this.constructor.isLightDom ? this : this.shadowRoot,
|
||||
this,
|
||||
updateSelf
|
||||
)
|
||||
this._willUpdate = false
|
||||
this.updated()
|
||||
}
|
||||
|
||||
updateProps(obj) {
|
||||
Object.keys(obj).forEach(key => {
|
||||
this.props[key] = obj[key]
|
||||
if (this.prevProps) {
|
||||
this.prevProps[key] = obj[key]
|
||||
}
|
||||
})
|
||||
this.forceUpdate()
|
||||
}
|
||||
forceUpdate() {
|
||||
this.update(true)
|
||||
}
|
||||
|
||||
updateSelf(ignoreAttrs) {
|
||||
this.update(ignoreAttrs, true)
|
||||
}
|
||||
updateProps(obj) {
|
||||
Object.keys(obj).forEach(key => {
|
||||
this.props[key] = obj[key]
|
||||
if (this.prevProps) {
|
||||
this.prevProps[key] = obj[key]
|
||||
}
|
||||
})
|
||||
this.forceUpdate()
|
||||
}
|
||||
|
||||
removeAttribute(key) {
|
||||
super.removeAttribute(key)
|
||||
//Avoid executing removeAttribute methods before connectedCallback
|
||||
this._isInstalled && this.update()
|
||||
}
|
||||
updateSelf(ignoreAttrs) {
|
||||
this.update(ignoreAttrs, true)
|
||||
}
|
||||
|
||||
setAttribute(key, val) {
|
||||
if (val && typeof val === 'object') {
|
||||
super.setAttribute(key, JSON.stringify(val))
|
||||
} else {
|
||||
super.setAttribute(key, val)
|
||||
}
|
||||
//Avoid executing setAttribute methods before connectedCallback
|
||||
this._isInstalled && this.update()
|
||||
}
|
||||
removeAttribute(key) {
|
||||
super.removeAttribute(key)
|
||||
//Avoid executing removeAttribute methods before connectedCallback
|
||||
this._isInstalled && this.update()
|
||||
}
|
||||
|
||||
pureRemoveAttribute(key) {
|
||||
super.removeAttribute(key)
|
||||
}
|
||||
setAttribute(key, val) {
|
||||
if (val && typeof val === 'object') {
|
||||
super.setAttribute(key, JSON.stringify(val))
|
||||
} else {
|
||||
super.setAttribute(key, val)
|
||||
}
|
||||
//Avoid executing setAttribute methods before connectedCallback
|
||||
this._isInstalled && this.update()
|
||||
}
|
||||
|
||||
pureSetAttribute(key, val) {
|
||||
super.setAttribute(key, val)
|
||||
}
|
||||
pureRemoveAttribute(key) {
|
||||
super.removeAttribute(key)
|
||||
}
|
||||
|
||||
attrsToProps(ignoreAttrs) {
|
||||
if (options.ignoreAttrs || ignoreAttrs) return
|
||||
const ele = this
|
||||
ele.props['css'] = ele.getAttribute('css')
|
||||
const attrs = this.constructor.propTypes
|
||||
if (!attrs) return
|
||||
Object.keys(attrs).forEach(key => {
|
||||
const type = attrs[key]
|
||||
const val = ele.getAttribute(hyphenate(key))
|
||||
if (val !== null) {
|
||||
switch (type) {
|
||||
case String:
|
||||
ele.props[key] = val
|
||||
break
|
||||
case Number:
|
||||
ele.props[key] = Number(val)
|
||||
break
|
||||
case Boolean:
|
||||
if (val === 'false' || val === '0') {
|
||||
ele.props[key] = false
|
||||
} else {
|
||||
ele.props[key] = true
|
||||
}
|
||||
break
|
||||
case Array:
|
||||
case Object:
|
||||
if (val[0] === ':') {
|
||||
ele.props[key] = getValByPath(val.substr(1), Omi.$)
|
||||
} else {
|
||||
ele.props[key] = JSON.parse(
|
||||
val
|
||||
.replace(/(['"])?([a-zA-Z0-9_-]+)(['"])?:([^\/])/g, '"$2":$4')
|
||||
.replace(/'([\s\S]*?)'/g, '"$1"')
|
||||
.replace(/,(\s*})/g, '$1')
|
||||
)
|
||||
}
|
||||
break
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
ele.constructor.defaultProps &&
|
||||
ele.constructor.defaultProps.hasOwnProperty(key)
|
||||
) {
|
||||
ele.props[key] = ele.constructor.defaultProps[key]
|
||||
} else {
|
||||
ele.props[key] = null
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
pureSetAttribute(key, val) {
|
||||
super.setAttribute(key, val)
|
||||
}
|
||||
|
||||
fire(name, data) {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent(name, {
|
||||
detail: data
|
||||
})
|
||||
)
|
||||
}
|
||||
attrsToProps(ignoreAttrs) {
|
||||
if (options.ignoreAttrs || ignoreAttrs) return
|
||||
const ele = this
|
||||
ele.props['css'] = ele.getAttribute('css')
|
||||
const attrs = this.constructor.propTypes
|
||||
if (!attrs) return
|
||||
Object.keys(attrs).forEach(key => {
|
||||
const type = attrs[key]
|
||||
const val = ele.getAttribute(hyphenate(key))
|
||||
if (val !== null) {
|
||||
switch (type) {
|
||||
case String:
|
||||
ele.props[key] = val
|
||||
break
|
||||
case Number:
|
||||
ele.props[key] = Number(val)
|
||||
break
|
||||
case Boolean:
|
||||
if (val === 'false' || val === '0') {
|
||||
ele.props[key] = false
|
||||
} else {
|
||||
ele.props[key] = true
|
||||
}
|
||||
break
|
||||
case Array:
|
||||
case Object:
|
||||
if (val[0] === ':') {
|
||||
ele.props[key] = getValByPath(val.substr(1), Omi.$)
|
||||
} else {
|
||||
ele.props[key] = JSON.parse(
|
||||
val
|
||||
.replace(/(['"])?([a-zA-Z0-9_-]+)(['"])?:([^\/])/g, '"$2":$4')
|
||||
.replace(/'([\s\S]*?)'/g, '"$1"')
|
||||
.replace(/,(\s*})/g, '$1')
|
||||
)
|
||||
}
|
||||
break
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
ele.constructor.defaultProps &&
|
||||
ele.constructor.defaultProps.hasOwnProperty(key)
|
||||
) {
|
||||
ele.props[key] = ele.constructor.defaultProps[key]
|
||||
} else {
|
||||
ele.props[key] = null
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
beforeInstall() { }
|
||||
fire(name, data) {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent(name, {
|
||||
detail: data
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
install() { }
|
||||
beforeInstall() { }
|
||||
|
||||
afterInstall() { }
|
||||
install() { }
|
||||
|
||||
installed() { }
|
||||
afterInstall() { }
|
||||
|
||||
uninstall() { }
|
||||
installed() { }
|
||||
|
||||
beforeUpdate() { }
|
||||
uninstall() { }
|
||||
|
||||
updated() { }
|
||||
beforeUpdate() { }
|
||||
|
||||
beforeRender() { }
|
||||
updated() { }
|
||||
|
||||
rendered() { }
|
||||
beforeRender() { }
|
||||
|
||||
receiveProps() { }
|
||||
rendered() { }
|
||||
|
||||
receiveProps() { }
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue