feat(device): support pixelRatio (#67)

* feat: support pixelRatio * feat: support weex
raxjs · Apr 3, 2020 · 336cd3a · 336cd3a
1 parent 4eacc7c
commit 336cd3a
Show file tree

Hide file tree

Showing 16 changed files with 106 additions and 127 deletions.
diff --git a/packages/device/.gitignore b/packages/device/.gitignore
diff --git a/packages/device/README-zh_CN.md b/packages/device/README-zh_CN.md
@@ -18,17 +18,20 @@ import { platform, appName, screenWidth, screenHeight, appVersion } from 'univer
 
 ## APIS
 
-### `appName: String`
+### `appName: string`
 app 名称或浏览器名称。
 
-### `appVersion: String`
+### `appVersion: string`
 app 版本号或浏览器版本信息。
 
-### `platform: String`
+### `platform: string`
 平台： 'Android'、'iOS'、'MacIntel' 等。
 
-### `screenWidth: Number`
+### `screenWidth: number`
 屏幕宽度，单位为px。
 
-### `screenHeight: Number`
+### `screenHeight: number`
 屏幕高度，单位为px。
+
+### `devicePixelRatio: number`
+当前显示设备的物理像素分辨率与CSS像素分辨率的比值。
diff --git a/packages/device/README.md b/packages/device/README.md
@@ -19,17 +19,20 @@ import { platform, appName, screenWidth, screenHeight, appVersion } from 'univer
 
 ## APIS
 
-### `appName: String`
+### `appName: string`
 app name or browser name
 
-### `appVersion: String`
+### `appVersion: string`
 app version or browser version info
 
-### `platform: String`
+### `platform: string`
 platform: 'Android'、'iOS'、'MacIntel', etc.
 
-### `screenWidth: Number`
+### `screenWidth: number`
 Screen width in px
 
-### `screenHeight: Number`
+### `screenHeight: number`
 Screen height in px
+
+### `devicePixelRatio: number`
+ The ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device.
diff --git a/packages/device/build.json b/packages/device/build.json
@@ -0,0 +1,11 @@
+{
+  "plugins": [
+    [
+      "build-plugin-rax-component",
+      {
+        "type": "rax",
+        "targets": ["web"]
+      }
+    ]
+  ]
+}
diff --git a/packages/device/demo/index.js b/packages/device/demo/index.js
@@ -0,0 +1,19 @@
+// @ts-ignore
+import { createElement, render } from 'rax';
+import DriverUniversal from 'driver-universal';
+import View from 'rax-view';
+import Text from 'rax-text';
+import { platform, appName, screenWidth, screenHeight } from '../src';
+
+const App = () => {
+  return (
+    <View>
+      <Text>{platform}</Text>
+      <Text>{appName}</Text>
+      <Text>{screenWidth}</Text>
+      <Text>{screenHeight}</Text>
+    </View>
+  );
+};
+
+render(<App />, document.body, { driver: DriverUniversal });
diff --git a/packages/device/demo/index.tsx b/packages/device/demo/index.tsx
diff --git a/packages/device/docs-template/README-zh_CN.md b/packages/device/docs-template/README-zh_CN.md
@@ -18,17 +18,20 @@ import { platform, appName, screenWidth, screenHeight, appVersion } from 'univer
 
 ## APIS
 
-### `appName: String`
+### `appName: string`
 app 名称或浏览器名称。
 
-### `appVersion: String`
+### `appVersion: string`
 app 版本号或浏览器版本信息。
 
-### `platform: String`
+### `platform: string`
 平台： 'Android'、'iOS'、'MacIntel' 等。
 
-### `screenWidth: Number`
+### `screenWidth: number`
 屏幕宽度，单位为px。
 
-### `screenHeight: Number`
+### `screenHeight: number`
 屏幕高度，单位为px。
+
+### `devicePixelRatio: number`
+当前显示设备的物理像素分辨率与CSS像素分辨率的比值。
diff --git a/packages/device/docs-template/README.md b/packages/device/docs-template/README.md
@@ -19,17 +19,20 @@ import { platform, appName, screenWidth, screenHeight, appVersion } from 'univer
 
 ## APIS
 
-### `appName: String`
+### `appName: string`
 app name or browser name
 
-### `appVersion: String`
+### `appVersion: string`
 app version or browser version info
 
-### `platform: String`
+### `platform: string`
 platform: 'Android'、'iOS'、'MacIntel', etc.
 
-### `screenWidth: Number`
+### `screenWidth: number`
 Screen width in px
 
-### `screenHeight: Number`
+### `screenHeight: number`
 Screen height in px
+
+### `devicePixelRatio: number`
+ The ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device.
diff --git a/packages/device/package.json b/packages/device/package.json
@@ -1,19 +1,19 @@
 {
   "name": "universal-device",
   "author": "rax",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "license": "BSD-3-Clause",
   "main": "lib/index.js",
-  "types": "lib/index.d.ts",
+  "files": [
+    "src",
+    "lib",
+    "dist"
+  ],
   "scripts": {
-    "start": "rax-scripts start --type 'component' -p 8000",
-    "start:miniapp": "rax-scripts start --type 'component-miniapp'",
-    "build": "rax-scripts build --type 'component'",
-    "test": "rax-scripts test",
-    "lint": "eslint --ext .js --ext .jsx --ext .ts --ext .tsx ./src",
-    "prebuild": "npm run lint && npm run test",
-    "prepublish": "npm run build"
+    "start": "build-scripts start",
+    "build": "build-scripts build"
   },
+  "pre-commit": ["lint"],
   "keywords": [
     "Rax"
   ],
@@ -24,32 +24,12 @@
     "universal-env": "^3.0.0"
   },
   "devDependencies": {
-    "@types/jest": "^24.0.12",
-    "@typescript-eslint/eslint-plugin": "^1.7.0",
-    "@typescript-eslint/parser": "^1.7.0",
-    "babel-eslint": "^10.0.1",
-    "driver-dom": "^1.0.0",
-    "driver-weex": "^1.0.0",
-    "eslint": "^5.15.1",
-    "eslint-config-rax": "^0.0.0",
-    "eslint-plugin-import": "^2.17.2",
-    "eslint-plugin-react": "^7.12.4",
-    "rax": "^1.0.4",
-    "rax-scripts": "1.2.1-beta.2",
-    "rax-text": "^1.0.0",
-    "rax-view": "^1.0.0",
-    "typescript": "^3.4.5"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/raxjs/universal-api.git"
-  },
-  "bugs": {
-    "url": "https://github.com/raxjs/universal-api/issues"
-  },
-  "homepage": "https://github.com/raxjs/universal-api#readme",
-  "pre-commit": [
-    "lint",
-    "test"
-  ]
+    "typescript": "^3.7.5",
+    "driver-universal": "^3.0.0",
+    "rax": "^1.1.0",
+    "rax-text": "^1.0.1",
+    "rax-view": "^1.0.2",
+    "build-plugin-rax-component": "^0.2.0",
+    "@alib/build-scripts": "^0.1.0"
+  }
 }
diff --git a/packages/device/src/miniapp/ali.ts → packages/device/src/ali-miniapp/index.ts b/packages/device/src/miniapp/ali.ts → packages/device/src/ali-miniapp/index.ts
@@ -23,6 +23,9 @@ const module = {};
 }, {
   key: 'appVersion',
   getFn: () => getSystemInfo().version
+}, {
+  key: 'devicePixelRatio',
+  getFn: () => getSystemInfo().pixelRatio
 }].forEach(({key, getFn}) => {
   Object.defineProperty(module, key, {
     get: getFn

diff --git a/packages/device/src/index.ts b/packages/device/src/index.ts
@@ -1,8 +1,8 @@
 import { isWeb, isWeex, isMiniApp, isWeChatMiniProgram } from 'universal-env';
 import webModule from './web';
 import weexModule from './weex';
-import miniappModule from './miniapp/ali';
-import wechatModule from './miniapp/wechat';
+import miniappModule from './ali-miniapp';
+import wechatModule from './wechat-miniprogram';
 
 function dutyChain(...fns) {
   for (let i = 0; i < fns.length; i++) {
@@ -53,11 +53,13 @@ const appVersion = deviceInfo.appVersion;
 const platform = deviceInfo.platform;
 const screenWidth = deviceInfo.screenWidth;
 const screenHeight = deviceInfo.screenHeight;
+const devicePixelRatio = deviceInfo.devicePixelRatio;
 
 export {
   appName,
   appVersion,
   platform,
   screenWidth,
   screenHeight,
+  devicePixelRatio
 };
diff --git a/packages/device/src/types.ts b/packages/device/src/types.ts
diff --git a/packages/device/src/web/index.ts b/packages/device/src/web/index.ts
@@ -31,6 +31,9 @@ let platform;
 }, {
   key: 'appVersion',
   getFn: () => navigator.appVersion
+}, {
+  key: 'devicePixelRatio',
+  getFn: () => window.devicePixelRatio
 }].forEach(({key, getFn}) => {
   Object.defineProperty(module, key, {
     get: getFn

diff --git a/packages/device/src/miniapp/wechat.ts → ...es/device/src/wechat-miniprogram/index.ts b/packages/device/src/miniapp/wechat.ts → ...es/device/src/wechat-miniprogram/index.ts
@@ -9,7 +9,7 @@ const module = {};
 
 [{
   key: 'appName',
-  getFn: () => getSystemInfo().app
+  getFn: () => 'wechat'
 }, {
   key: 'platform',
   getFn: () => getSystemInfo().platform
@@ -22,6 +22,9 @@ const module = {};
 }, {
   key: 'appVersion',
   getFn: () => getSystemInfo().version
+}, {
+  key: 'devicePixelRatio',
+  getFn: () => getSystemInfo().pixelRatio
 }].forEach(({key, getFn}) => {
   Object.defineProperty(module, key, {
     get: getFn

diff --git a/packages/device/src/weex/index.ts b/packages/device/src/weex/index.ts
@@ -15,6 +15,9 @@ const module = {};
 }, {
   key: 'appVersion',
   getFn: () => navigator.appVersion
+}, {
+  key: 'devicePixelRatio',
+  getFn: () => window.devicePixelRatio
 }].forEach(({key, getFn}) => {
   Object.defineProperty(module, key, {
     get: getFn

diff --git a/packages/device/tsconfig.json b/packages/device/tsconfig.json
@@ -2,24 +2,17 @@
   "compilerOptions": {
     "module": "esNext",
     "target": "es2015",
-    "jsx": "preserve",
-    "jsxFactory": "createElement",
-
+    "outDir": "build",
     "moduleResolution": "node",
-    "baseUrl": ".",
-
-    "rootDir": "src",
-    "downlevelIteration": true,
+    "sourceMap": true,
     "alwaysStrict": true,
-    "outDir": "lib",
-    "strict": true,
-    "preserveConstEnums": true,
-    "experimentalDecorators": true,
-    "noImplicitReturns": true,
-    "noUnusedLocals": true,
-    "noImplicitAny": false,
-    "noImplicitThis": false
+    "baseUrl": "."
   },
-  "include": ["src/**/*"],
-  "exclude": ["**/__tests__"]
+  "include": [
+    "./src/**/*"
+  ],
+  "exclude": [
+    "demo",
+    "**/__tests__"
+  ]
 }