feat: suport universal-element

packages/dom/README-zh_CN.md

@@ -0,0 +1,61 @@
+# universal-dom [![npm](https://img.shields.io/npm/v/universal-dom.svg)](https://www.npmjs.com/package/universal-dom)
+
+获取 DOM 节点的信息.
+
+## 支持
+<img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /> <img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px"> <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" />
+
+## 安装
+
+```bash
+$ npm install universal-dom --save
+```
+
+## 使用
+
+```js
+import { createElement, useEffect, Fragment } from 'rax';
+import { getScrollOffset, getBoundingClientRect } from 'universal-dom';
+
+function App() {
+  useEffect({
+    getScrollOffset('#container').then((ret) => {
+      const { scrollTop, scrollLeft } = ret[0];
+      console.log(scrollTop, scrollLeft);
+    });
+
+    getBoundingClientRect('#container').then((ret) => {
+      const { width, height, top, left, right, bottom } = ret[0];
+      console.log(width, height, top, left, right, bottom);
+    });
+  }, []);
+
+  return (<>
+    <View id='container'>test</View>
+  </>)
+}
+```
+
+## 方法
+
+### `getScrollOffset()`
+
+在阿里小程序中, 不存在 `scrollWidth`, `scrollHeight`。
+
+```js
+getScrollOffet('#container').then((ret) => {
+  const { scrollTop, scrollLeft, scrollWidth, scrollHeight } = ret[0];
+  console.log(scrollTop, scrollLeft, scrollWidth, scrollHeight);
+});
+```
+
+### `getBoundingClientRect()`
+
+在所有小程序中， 不存在 `x`, `y`。
+
+```js
+getBoundingClientRect().then((ret) => {
+  const { width, height, top, left, right, bottom, x, y } = ret[0];
+  console.log(width, height, top, left, right, bottom, x, y);
+});
+```

packages/dom/README.md

@@ -0,0 +1,61 @@
+# universal-dom [![npm](https://img.shields.io/npm/v/universal-dom.svg)](https://www.npmjs.com/package/universal-dom)
+
+Get dom info.
+
+## Support
+<img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /> <img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px"> <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" />
+
+## Install
+
+```bash
+$ npm install universal-dom --save
+```
+
+## Usage
+
+```js
+import { createElement, useEffect, Fragment } from 'rax';
+import { getScrollOffset, getBoundingClientRect } from 'universal-dom';
+
+function App() {
+  useEffect({
+    getScrollOffset('#container').then((ret) => {
+      const { scrollTop, scrollLeft } = ret[0];
+      console.log(scrollTop, scrollLeft);
+    });
+
+    getBoundingClientRect('#container').then((ret) => {
+      const { width, height, top, left, right, bottom } = ret[0];
+      console.log(width, height, top, left, right, bottom);
+    });
+  }, []);
+
+  return (<>
+    <View id='container'>test</View>
+  </>)
+}
+```
+
+## Methods
+
+### `getScrollOffset()`
+
+In MiniApp, there isn't `scrollWidth`, `scrollHeight`.
+
+```js
+getScrollOffet('#container').then((ret) => {
+  const { scrollTop, scrollLeft, scrollWidth, scrollHeight } = ret[0];
+  console.log(scrollTop, scrollLeft, scrollWidth, scrollHeight);
+});
+```
+
+### `getBoundingClientRect()`
+
+In MiniApp or WechatMiniProgram, there isn't `x`, `y`.
+
+```js
+getBoundingClientRect().then((ret) => {
+  const { width, height, top, left, right, bottom, x, y } = ret[0];
+  console.log(width, height, top, left, right, bottom, x, y);
+});
+```

packages/dom/build.json

@@ -0,0 +1,11 @@
+{
+  "plugins": [
+    [
+      "build-plugin-rax-component",
+      {
+        "type": "rax",
+        "targets": ["web"]
+      }
+    ]
+  ]
+}

packages/dom/docs-template/README-zh_CN.md

@@ -0,0 +1,61 @@
+# universal-dom [![npm](https://img.shields.io/npm/v/universal-dom.svg)](https://www.npmjs.com/package/universal-dom)
+
+获取 DOM 节点的信息.
+
+## 支持
+__icon_miniapp_mp__ __icon_miniapp_wx__ __icon_web__
+
+## 安装
+
+```bash
+$ npm install universal-dom --save
+```
+
+## 使用
+
+```js
+import { createElement, useEffect, Fragment } from 'rax';
+import { getScrollOffset, getBoundingClientRect } from 'universal-dom';
+
+function App() {
+  useEffect({
+    getScrollOffset('#container').then((ret) => {
+      const { scrollTop, scrollLeft } = ret[0];
+      console.log(scrollTop, scrollLeft);
+    });
+
+    getBoundingClientRect('#container').then((ret) => {
+      const { width, height, top, left, right, bottom } = ret[0];
+      console.log(width, height, top, left, right, bottom);
+    });
+  }, []);
+
+  return (<>
+    <View id='container'>test</View>
+  </>)
+}
+```
+
+## 方法
+
+### `getScrollOffset()`
+
+在阿里小程序中, 不存在 `scrollWidth`, `scrollHeight`。
+
+```js
+getScrollOffet('#container').then((ret) => {
+  const { scrollTop, scrollLeft, scrollWidth, scrollHeight } = ret[0];
+  console.log(scrollTop, scrollLeft, scrollWidth, scrollHeight);
+});
+```
+
+### `getBoundingClientRect()`
+
+在所有小程序中， 不存在 `x`, `y`。
+
+```js
+getBoundingClientRect().then((ret) => {
+  const { width, height, top, left, right, bottom, x, y } = ret[0];
+  console.log(width, height, top, left, right, bottom, x, y);
+});
+```

packages/dom/docs-template/README.md

@@ -0,0 +1,61 @@
+# universal-dom [![npm](https://img.shields.io/npm/v/universal-dom.svg)](https://www.npmjs.com/package/universal-dom)
+
+Get dom info.
+
+## Support
+__icon_miniapp_mp__ __icon_miniapp_wx__ __icon_web__
+
+## Install
+
+```bash
+$ npm install universal-dom --save
+```
+
+## Usage
+
+```js
+import { createElement, useEffect, Fragment } from 'rax';
+import { getScrollOffset, getBoundingClientRect } from 'universal-dom';
+
+function App() {
+  useEffect({
+    getScrollOffset('#container').then((ret) => {
+      const { scrollTop, scrollLeft } = ret[0];
+      console.log(scrollTop, scrollLeft);
+    });
+
+    getBoundingClientRect('#container').then((ret) => {
+      const { width, height, top, left, right, bottom } = ret[0];
+      console.log(width, height, top, left, right, bottom);
+    });
+  }, []);
+
+  return (<>
+    <View id='container'>test</View>
+  </>)
+}
+```
+
+## Methods
+
+### `getScrollOffset()`
+
+In MiniApp, there isn't `scrollWidth`, `scrollHeight`.
+
+```js
+getScrollOffet('#container').then((ret) => {
+  const { scrollTop, scrollLeft, scrollWidth, scrollHeight } = ret[0];
+  console.log(scrollTop, scrollLeft, scrollWidth, scrollHeight);
+});
+```
+
+### `getBoundingClientRect()`
+
+In MiniApp or WechatMiniProgram, there isn't `x`, `y`.
+
+```js
+getBoundingClientRect().then((ret) => {
+  const { width, height, top, left, right, bottom, x, y } = ret[0];
+  console.log(width, height, top, left, right, bottom, x, y);
+});
+```

packages/dom/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "dom-info",
+  "author": "rax",
+  "version": "0.0.1",
+  "description": "",
+  "main": "lib/index.js",
+  "module": "src/index.js",
+  "files": [
+    "src",
+    "lib",
+    "dist"
+  ],
+  "scripts": {
+    "start": "build-scripts start",
+    "build": "build-scripts build"
+  },
+  "pre-commit": [
+    "lint"
+  ],
+  "keywords": [
+    "Rax"
+  ],
+  "engines": {
+    "npm": ">=3.0.0"
+  },
+  "devDependencies": {
+    "@alib/build-scripts": "^0.1.0",
+    "build-plugin-rax-component": "^0.1.0",
+    "universal-env": "^3.0.0"
+  }
+}

packages/dom/src/Cache.ts

@@ -0,0 +1,24 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { isWeb, isMiniApp, isWeChatMiniProgram } from 'universal-env';
+
+declare const my: any;
+declare const wx: any;
+export default class Cache {
+  private cache = {};
+  public getInfo(selector) {
+    if (this.cache[selector]) return this.cache[selector];
+    if (isMiniApp && !isWeb) {
+      const selectorQuery = my.createSelectorQuery().selectAll(selector);
+      this.cache[selector] = selectorQuery;
+      return selectorQuery;
+    } else if (isWeChatMiniProgram && !isWeb) {
+      const selectorQuery = wx.createSelectorQuery().selectAll(selector);
+      this.cache[selector] = selectorQuery;
+      return selectorQuery;
+    } else {
+      const nodes = document.querySelectorAll(selector);
+      this.cache[selector] = nodes;
+      return document.querySelectorAll(selector);
+    }
+  }
+}

packages/dom/src/index.ts

@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { isWeb, isMiniApp, isWeChatMiniProgram } from 'universal-env';
+import miniapp from './miniapp';
+import web from './web';
+import { Dom } from './types';
+
+let dom: Dom;
+
+if ((isMiniApp || isWeChatMiniProgram) && !isWeb) {
+  // For cased that import wechat or miniapp sdk in web
+  dom = miniapp;
+} else {
+  // Web as default
+  dom = web;
+}
+
+const getScrollOffset = dom.getScrollOffset;
+const getBoundingClientRect = dom.getBoundingClientRect;
+
+export {
+  getScrollOffset,
+  getBoundingClientRect
+};

packages/dom/src/miniapp/index.ts

@@ -0,0 +1,24 @@
+import Cache from '../Cache';
+
+const cache = new Cache();
+
+function getScrollOffset(selector: string): Promise<any[]> {
+  return new Promise(resolve => {
+    cache.getInfo(selector).scrollOffset().exec(ret => {
+      resolve(ret);
+    });
+  });
+}
+
+function getBoundingClientRect(selector: string): Promise<any[]> {
+  return new Promise(resolve => {
+    cache.getInfo(selector).boundingClientRect().exec(ret => {
+      resolve(ret);
+    });
+  });
+}
+
+export default {
+  getScrollOffset,
+  getBoundingClientRect
+};

packages/dom/src/types.ts

@@ -0,0 +1,4 @@
+export interface Dom {
+  getScrollOffset: (string) => Promise<any[]>;
+  getBoundingClientRect: (string) => Promise<any[]>;
+}

packages/dom/src/web/index.ts

@@ -0,0 +1,25 @@
+import Cache from '../Cache';
+
+const cache = new Cache();
+
+function getScrollOffset(selector: string): Promise<any[]> {
+  return new Promise(resolve => {
+    resolve(cache.getInfo(selector).map(node => ({
+      scrollTop: node.scrollTop,
+      scrollLeft: node.scrollLeft,
+      scrollWidth: node.scrollWidth,
+      scrollHeight: node.scrollHeight
+    })));
+  });
+}
+
+function getBoundingClientRect(selector: string): Promise<any[]> {
+  return new Promise(resolve => {
+    resolve(cache.getInfo(selector).map(node => node.getBoundingClientRect()));
+  });
+}
+
+export default {
+  getScrollOffset,
+  getBoundingClientRect
+};