revas 1.0.2 → 2.0.0

package/dist/types/revas/core/Canvas.d.ts

@@ -1,17 +0,0 @@
-export declare class RevasCanvas {
-    readonly transform: Transform;
-    constructor(context: CanvasRenderingContext2D);
-    get context(): CanvasRenderingContext2D;
-    get element(): HTMLCanvasElement;
-}
-export declare class Transform {
-    readonly context: CanvasRenderingContext2D;
-    _stack: DOMMatrix[];
-    _canGetTransform: boolean;
-    constructor(context: CanvasRenderingContext2D);
-    save(): void;
-    restore(): void;
-    translate(x: number, y: number): void;
-    rotate(rad: number): void;
-    scale(sx: number, sy: number): void;
-}

package/dist/types/revas/core/Container.d.ts

@@ -1,18 +0,0 @@
-import { Node, RevasTouchEvent } from './Node';
-import { RevasCanvas } from './Canvas';
-import { AppContextType } from '../components/Context';
-export declare class Container {
-    private _ready;
-    private _next;
-    private _reflow;
-    private _root?;
-    get canvas(): RevasCanvas | void;
-    get width(): number;
-    get height(): number;
-    get scale(): number;
-    constructor();
-    setRoot(root?: Node<AppContextType>): void;
-    handleTouch: (evt: RevasTouchEvent) => void;
-    draw: (reflow?: boolean) => void;
-    private ready;
-}

package/dist/types/revas/core/Node.d.ts

@@ -1,46 +0,0 @@
-import { ReactNode } from 'react';
-export declare class Frame {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    constructor(x?: number, y?: number, width?: number, height?: number);
-}
-export declare class Node<T = any> {
-    readonly type: string;
-    props: NodeProps & T;
-    readonly children: Node[];
-    frame: Frame;
-    parent?: Node;
-    constructor(type: string, props: NodeProps & T);
-    get $ready(): boolean;
-}
-export interface RevasTouch {
-    identifier: number;
-    x: number;
-    y: number;
-}
-export declare type RevasTouchType = 'touchstart' | 'touchmove' | 'touchend';
-export interface RevasTouchEvent {
-    type: RevasTouchType;
-    touches: {
-        [key: string]: RevasTouch;
-    };
-    timestamp: number;
-    [key: string]: any;
-}
-export declare type RevasTouchEventListener = (event: RevasTouchEvent) => any;
-export interface BaseProps {
-    children?: ReactNode;
-    style?: any | any[];
-    cache?: string | boolean;
-    forceCache?: boolean;
-}
-export interface NodeProps extends BaseProps {
-    onTouchStart?: RevasTouchEventListener;
-    onTouchMove?: RevasTouchEventListener;
-    onTouchEnd?: RevasTouchEventListener;
-    onLayout?: (frame: Frame) => any;
-    pointerEvents?: 'auto' | 'none' | 'box-none';
-    $ready?: boolean;
-}

package/dist/types/revas/core/css-layout/index.d.ts

@@ -1,9 +0,0 @@
-import { Node } from '../Node';
-import { AppContextType } from '../../components/Context';
-export interface YogaNode {
-    node: Node;
-    style: any;
-    layout: any;
-    children: YogaNode[];
-}
-export declare function updateLayout(root: Node<AppContextType>): () => void;

package/dist/types/revas/core/draw.d.ts

@@ -1,4 +0,0 @@
-import { Node } from './Node';
-import { Container } from './Container';
-import { RevasCanvas } from './Canvas';
-export declare function drawNode(canvas: RevasCanvas, node: Node, container: Container): void;

package/dist/types/revas/core/offscreen.d.ts

@@ -1,11 +0,0 @@
-import { Node } from './Node';
-import { RevasCanvas } from './Canvas';
-export interface CachedCanvas {
-    id: string;
-    canvas: RevasCanvas;
-    style: any;
-}
-export declare function getCache(id: string): CachedCanvas | undefined;
-export declare function createCache(style: any, w: number, h: number, id: string): CachedCanvas;
-export declare function autoCacheId(node: Node): string | undefined;
-export declare function clearCache(): void;

package/dist/types/revas/core/reconciler.d.ts

@@ -1,5 +0,0 @@
-import ReactReconciler from 'react-reconciler';
-import { Node } from './Node';
-import { Container } from './Container';
-declare const _default: ReactReconciler.Reconciler<Node<any>, any, Container, unknown>;
-export default _default;

package/dist/types/revas/core/touch.d.ts

@@ -1,3 +0,0 @@
-import { Node, RevasTouchEvent, RevasTouchType, RevasTouch } from "./Node";
-export declare function getNodeByTouch(root: Node, type: RevasTouchType, touch: RevasTouch): Node<any>;
-export declare function emitTouch(node: Node | void, e: RevasTouchEvent): void;

package/dist/types/revas/core/utils.d.ts

@@ -1,22 +0,0 @@
-import { Node } from './Node';
-import { RevasCanvas } from './Canvas';
-export declare function noop(): any;
-export declare const EMPTY_OBJECT: any;
-export declare const EMPTY_ARRAY: any[];
-export declare function flatten(array: any[]): any[];
-export declare const now: () => number;
-export declare function applyAnimated(style: any, callback?: Function): any;
-export declare function getMergedStyleFromNode(node: Node, callback?: Function): any;
-export declare function getFrameFromNode(node: Node): import("./Node").Frame;
-export declare function sortByZIndexAscending(a: Node, b: Node): number;
-export declare function clamp(n: number, min: number, max: number): number;
-export declare function getChars(str: string): readonly string[];
-export declare function getWords(str: string): readonly string[];
-export declare function setShadow(canvas: RevasCanvas, color: string, x?: number, y?: number, blur?: number): () => void;
-export declare function pushOpacity(canvas: RevasCanvas, opacity: number): typeof noop;
-export declare type RevasAdapter = {
-    createImage: () => HTMLImageElement;
-    createOffscreenCanvas?: (width: number, height: number) => RevasCanvas;
-    resetOffscreenCanvas?: (ctx: RevasCanvas, width: number, height: number) => RevasCanvas;
-};
-export declare const adapter: RevasAdapter;

package/dist/types/revas/core/yoga-layout/index.d.ts

@@ -1,3 +0,0 @@
-import { Node } from '../Node';
-import { AppContextType } from '../../components/Context';
-export declare function updateLayout(root: Node<AppContextType>): Function;

package/dist/types/revas/core/yoga-layout/init.d.ts

@@ -1,3 +0,0 @@
-import { YogaWasm } from 'yoga-layout-wasm/asm';
-export declare const yoga: YogaWasm;
-export declare const promise: Promise<void>;

package/dist/types/revas/core/yoga-layout/style.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="yoga-layout" />
-import type { YogaNode } from 'yoga-layout-wasm/asm';
-export default function apply(yoga: YogaNode, style: any): void;

package/dist/types/revas/index.d.ts

@@ -1,2 +0,0 @@
-export * from './common';
-export * from './web';

package/dist/types/revas/web/index.d.ts

@@ -1 +0,0 @@
-export * from './render';

package/dist/types/revas/web/render.d.ts

@@ -1,7 +0,0 @@
-import { Component } from 'react';
-import { noop } from '../core/utils';
-export declare function render(app: React.ReactNode, parent: HTMLElement, parentComponent?: Component<any>, callback?: typeof noop): {
-    readonly $: HTMLCanvasElement;
-    update(next?: import("react").ReactNode, callback?: typeof noop): void;
-    unmount(callback?: typeof noop): void;
-};

package/doc/API.md

@@ -1,241 +0,0 @@
-# Revas Document
-
-## Install
-
-``` bash
-$ yarn add revas react
-```
-
-## Usage
-
-### Render to a DOM
-```jsx
-import React from 'react'
-import {render, View, Text} from 'revas'
-
-render(
-  <View style={{ flex: 1 }}>
-    <Text style={{ fontSize: 20 }}>Revas</Text>
-  </View>,
-  document.getElementById('container')
-)
-```
-[![Edit purple-browser-h56ht](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/purple-browser-h56ht?fontsize=14&hidenavigation=1&theme=dark)
-
-### Render to a DOM rendered by React
-```jsx
-import React from 'react'
-import {render, View, Text} from 'revas'
-
-export class Widget extends React.Component {
-  componentDidMount() {
-    this.app = render(
-      <View style={{ flex: 1 }}>
-        <Text style={{ fontSize: 20 }}>Revas</Text>
-      </View>,
-      document.getElementById('container'),
-      this
-    )
-  }
-  componentDidUpdate() {
-    this.app.update()
-  }
-  componentWillUnmount() {
-    this.app.unmount()
-  }
-  render() {
-    return <div id="container" />
-  }
-}
-```
-[![Edit reverent-river-vbypp](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/reverent-river-vbypp?fontsize=14&hidenavigation=1&theme=dark)
-
-## Components
-
-### View
-
-
-#### ViewProps
-
-| Property | Type | Description |
-| -: | - | - |
-| style | `ViewStyle` | Inline css|
-| pointerEvents | `'auto' \| 'box-none' \| 'none'` |  |
-| onLayout | `(Frame): void` | x, y, width, height |
-| onTouchStart | `(RevasTouch): void` | callback |
-| onTouchMove | `(RevasTouch): void` | callback |
-| onTouchEnd | `(RevasTouch): void` | callback |
-| cache | `boolean \| string` | enable offscreen cache |
-| forceCache | `boolean` | force enable cache |
-
-```jsx
-<View {...props} />
-```
-
-### Text
-
-#### TextProps 
-
-> extends ViewProps
-
-| Property | Type | Description |
-| -: | - | - |
-| style | `TextStyle` | Inline css|
-| numberOfLines | `number` | max lines |
-
-```jsx
-<Text numberOfLines={1}>Hello World</Text>
-```
-
-### Image
-
-#### ImageProps 
-
-> extends ViewProps
-
-| Property | Type | Description |
-| -: | - | - |
-| style | `ImageStyle` | Inline css|
-| src | string | `Image` source url |
-
-```jsx
-<Image src="https://some.img/url.jpg" />
-```
-
-### Touchable
-
-#### TouchableProps 
-
-> extends ViewProps
-
-| Property | Type | Description |
-| -: | - | - |
-| onPress | `Function` | callback |
-| onPressIn | `Function` | callback |
-| onPressOut | `Function` | callback |
-| activeOpacity | `number` | opacity when pressing in |
-
-```jsx
-<Touchable onPress={() => alert('Enjoy!~🎉')}>
-  <Text>Go</Text>
-</Touchable>
-```
-
-### ScrollView
-
-#### ScrollViewProps 
-
-> extends ViewProps
-
-| Property | Type | Description |
-| -: | - | - |
-| horizontal | `boolean` | direction |
-| onScroll | `(RevasScrollEvent): void` | scrolling callback |
-| onScrollStart | `(RevasScrollEvent): void` | scroll start |
-| onScrollEnd | `(RevasScrollEvent): void` | scroll end |
-| paging | `boolean \| number` | enable paging, and the length |
-| offset | `{x: number, y: number}` | offset |
-
-```jsx
-<ScrollView>
-  {colors.map(renderColorItem)}
-</ScrollView>
-```
-
-### LinearGradient
-
-#### LinearGradientProps
-
-> extends ViewProps
-
-| Property | Type | Description |
-| -: | - | - |
-| start | `{x: number, y: number}` | start position |
-| end | `{x: number, y: number}` | end position |
-| colors | `Color[]` | colors |
-
-```jsx
-<LinearGradient style={styles.decorator}
-  start={{x: 0, y, 0}} end={{x: 1, y, 0}} 
-  colors={['#9254DE', '#B37FEB', '#91D5FF', '#40A9FF']} />
-```
-
-### ListView
-
-#### ListViewProps
-
-> extends ScrollViewProps
-
-| Property | Type | Description |
-| -: | - | - |
-| data | `T[]` | list data |
-| renderItem | `(item, index, data): JSX` | render item |
-| itemHeight | `number` | height of each item |
-
-```jsx
-<ListView
-  data={[1, 2, 3, 4, 5, 12, 123, 1, 23, 2]}
-  getItemHeight={() => 80} renderItem={(item, index) => (
-    <View style={{ height: 80, backgroundColor: (index % 2) > 0 ? 'white' : 'black' }} />
-  )} />
-```
-
-## API
-
-### render(app: JSX, target: DOM): Renderer
-
-> [WEB ONLY] render to a DOM container
-
-### new AnimatedValue(number)
-
-> animated value
-
-```jsx
-import { AnimatedValue } from 'revas'
-
-const translateX = new AnimatedValue(0)
-
-function Comp() {
-  return <View 
-    style={{
-      translateX: translateX
-    }}
-    onTouchMove={e => {
-      translateX.setValue(e.touches[0].x)
-    }}
-  />
-}
-```
-
-### timing(AnimatedValue, Config).start().stop()
-
-> start a animation
-
-### AnimatedValue.interpolate(inputRange: number[], outputRange: number[])
-
-> interpolate animated value
-
-
-### withContext(Component)
-
-> inject context to a component
-
-clientWidth, clientHeight, pixelRatio, canvas
-
-## CSS
-
-| Category | Styles |
-| -: | - |
-| Flexible Layout | **width**, minWidth, maxWidth, **height**, minHeight, maxHeight, **padding**, paddingLeft, **margin**, marginLeft, position, left, top, **flex**, flexDirection, justifyContent, alignItems [...more](https://github.com/pinqy520/revas/blob/master/src/revas/core/yoga-layout/style.ts)|
-| Box | borderRadius, borderWidth, borderColor, borderTopLeftRadius, shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur, backgroundColor, overflow, opacity |
-| Text | fontFamily, fontSize, fontWeight, color, lineHeight, textAlign, wordBreak, fontStyle, textBaseline, textShadowBlur, textShadowColor, textShadowOffsetX, textShadowOffsetY | 
-| Image | resizeMode |
-| Transform | translateX, translateY, rotate, scale, scaleX, scaleY | 
-| Other | animated, path |
-
-
-## Advantage
-
-### Render to a custom canvas
-
-> TODO

package/doc/README-zh.md

@@ -1,266 +0,0 @@
-<h1 align="center">
-  <img src="https://user-images.githubusercontent.com/5719833/74748305-3fb20680-52a3-11ea-81c3-98804dceb602.png" width=220 />
-  <br />
-  <a href="https://badge.fury.io/js/revas">
-    <img src="https://badge.fury.io/js/revas.svg" alt="npm version" height="18">
-  </a>
-</h1>
-
-<p align="center">
-  用React和CSS在Canvas上编写高性能交互界面
-</p>
-
-<p align="center"> 
-  <a target="_blank" href="https://pinqy520.github.io/demo/revas-pwa/" rel="nofollow">Live DEMO</a> | <a target="_blank" href="https://github.com/pinqy520/revas/blob/master/src/develop/App.tsx">DEMO Code</a>
-</p>
-
-
-<p align="center">
-  <img src="https://user-images.githubusercontent.com/5719833/81006150-9b8f3300-8e81-11ea-8cb1-08de6550ea03.png" />
-</p>
-
-## 安装
-
-``` bash
-$ yarn add revas react
-```
-
-## 基本用法
-
-### 直接渲染到DOM元素
-```jsx
-import React from 'react'
-import {render, View, Text} from 'revas'
-
-render(
-  <View style={{ flex: 1 }}>
-    <Text style={{ fontSize: 20 }}>Revas</Text>
-  </View>,
-  document.getElementById('container')
-)
-```
-[![Edit purple-browser-h56ht](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/purple-browser-h56ht?fontsize=14&hidenavigation=1&theme=dark)
-
-### 在ReactDOM中嵌入
-```jsx
-import React from 'react'
-import {render, View, Text} from 'revas'
-
-export class Widget extends React.Component {
-  componentDidMount() {
-    this.app = render(
-      <View style={{ flex: 1 }}>
-        <Text style={{ fontSize: 20 }}>Revas</Text>
-      </View>,
-      document.getElementById('container'),
-      this
-    )
-  }
-  componentDidUpdate() {
-    this.app.update()
-  }
-  componentWillUnmount() {
-    this.app.unmount()
-  }
-  render() {
-    return <div id="container" />
-  }
-}
-```
-[![Edit reverent-river-vbypp](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/reverent-river-vbypp?fontsize=14&hidenavigation=1&theme=dark)
-
-## 组件
-
-### View
-
-
-#### ViewProps
-
-| Property | Type | Description |
-| -: | - | - |
-| style | ViewStyle | Inline css|
-| pointerEvents | `'auto' \| 'box-none' \| 'none'` | 点击事件接受类型 |
-| onLayout | `(Frame): void` | 获取当前布局 |
-| onTouchStart | `(RevasTouch): void` | 开始触碰回调 |
-| onTouchMove | `(RevasTouch): void` | 触碰移动回调 |
-| onTouchEnd | `(RevasTouch): void` | 结束触碰回调 |
-| cache | `boolean \| string` | 开启离屏缓存 |
-| forceCache | `boolean` | 不等待子组件加载完毕就缓存 |
-
-```jsx
-<View {...props} />
-```
-
-### Text
-
-#### TextProps 
-
-> extends ViewProps
-
-| Property | Type | Description |
-| -: | - | - |
-| style | `TextStyle` | Inline css|
-| numberOfLines | `number` | 最多多少行 |
-
-```jsx
-<Text numberOfLines={1}>Hello World</Text>
-```
-
-### Image
-
-#### ImageProps 
-
-> extends ViewProps
-
-| Property | Type | Description |
-| -: | - | - |
-| style | ImageStyle | Inline css|
-| src | string | Image source url |
-
-```jsx
-<Image src="https://some.img/url.jpg" />
-```
-
-### Touchable
-
-#### TouchableProps 
-
-> extends ViewProps
-
-| Property | Type | Description |
-| -: | - | - |
-| onPress | `Function` | 点击回调 |
-| onPressIn | `Function` | 点按回调 |
-| onPressOut | `Function` | 点按弹起回调 |
-| activeOpacity | `number` | 点击的时候透明度 |
-
-```jsx
-<Touchable onPress={() => alert('Enjoy!~🎉')}>
-  <Text>Go</Text>
-</Touchable>
-```
-
-### ScrollView
-
-#### ScrollViewProps 
-
-> extends ViewProps
-
-| Property | Type | Description |
-| -: | - | - |
-| horizontal | `boolean` | 滑动方向 |
-| onScroll | `(RevasScrollEvent): void` | 滑动回调 |
-| onScrollStart | `(RevasScrollEvent): void` | 滑动开始回调 |
-| onScrollEnd | `(RevasScrollEvent): void` | 滑动停止回调 |
-| paging | `boolean \| number` | 是否开启paging，paging长度 |
-| offset | `{x: number, y: number}` | 相对位移 |
-
-```jsx
-<ScrollView>
-  {colors.map(renderColorItem)}
-</ScrollView>
-```
-
-### LinearGradient
-
-#### LinearGradientProps
-
-> extends ViewProps
-
-| Property | Type | Description |
-| -: | - | - |
-| start | `{x: number, y: number}` | 渐变色开始的点 |
-| end | `{x: number, y: number}` | 渐变色结束的点 |
-| colors | `Color[]` | 滑动回调 |
-
-```jsx
-<LinearGradient style={styles.decorator}
-  start={{x: 0, y, 0}} end={{x: 1, y, 0}} 
-  colors={['#9254DE', '#B37FEB', '#91D5FF', '#40A9FF']} />
-```
-
-### ListView
-
-#### ListViewProps
-
-> extends ScrollViewProps
-
-| Property | Type | Description |
-| -: | - | - |
-| data | `T[]` | 数据 |
-| renderItem | `(item, index, data): JSX` |渲染每一行 |
-| itemHeight | `number` | 一行的高度 |
-
-```jsx
-<ListView
-  data={[1, 2, 3, 4, 5, 12, 123, 1, 23, 2]}
-  itemHeight={80} renderItem={(item, index) => (
-    <View style={{ height: 80, backgroundColor: (index % 2) > 0 ? 'white' : 'black' }} />
-  )} />
-```
-
-## API
-
-### render(app: JSX, target: DOM): Renderer
-
-> [WEB ONLY] 渲染到指定DOM节点里
-
-### new AnimatedValue(number)
-
-> 控制动画
-
-```jsx
-import { AnimatedValue } from 'revas'
-
-const translateX = new AnimatedValue(0)
-
-function Comp() {
-  return <View 
-    style={{
-      translateX: translateX
-    }}
-    onTouchMove={e => {
-      translateX.setValue(e.touches[0].x)
-    }}
-  />
-}
-```
-
-### timing(AnimatedValue, Config).start().stop()
-
-> 配置动画
-
-### AnimatedValue.interpolate(inputRange: number[], outputRange: number[])
-
-> 配置动画
-
-
-### withContext(Component)
-
-> 获取全局参数 clientWidth, clientHeight, pixelRatio, canvas
-
-## CSS
-
-| Category | Styles |
-| -: | - |
-| Flexible Layout | **width**, minWidth, maxWidth, **height**, minHeight, maxHeight, **padding**, paddingLeft, **margin**, marginLeft, position, left, top, **flex**, flexDirection, justifyContent, alignItems [...more](https://github.com/pinqy520/revas/blob/master/src/revas/core/yoga-layout/style.ts)|
-| Box | borderRadius, borderWidth, borderColor, borderTopLeftRadius, shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur, backgroundColor, overflow, opacity |
-| Text | fontFamily, fontSize, fontWeight, color, lineHeight, textAlign, wordBreak, fontStyle, textBaseline, textShadowBlur, textShadowColor, textShadowOffsetX, textShadowOffsetY | 
-| Image | resizeMode |
-| Transform | translateX, translateY, rotate, scale, scaleX, scaleY | 
-| Other | animated, path |
-
-
-## 高级用法
-
-> 参考DOM渲染函数的编写
-
-### 渲染到自定义Canvas容器
-
-#### 准备：配置离屏渲染函数
-
-#### 第一步：生成RevasCanvas对象
-
-#### 第二步：监听Canvas上手势
-
-#### 第三部：渲染