From 336cd3a1eac89003f2569dfff2be105565cc24af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8B=92=E7=8B=92=E7=A5=9E?= <350740249@qq.com> Date: Fri, 3 Apr 2020 10:45:02 +0800 Subject: [PATCH] feat(device): support pixelRatio (#67) * feat: support pixelRatio * feat: support weex --- packages/device/.gitignore | 13 ----- packages/device/README-zh_CN.md | 13 +++-- packages/device/README.md | 13 +++-- packages/device/build.json | 11 ++++ packages/device/demo/index.js | 19 +++++++ packages/device/demo/index.tsx | 23 -------- packages/device/docs-template/README-zh_CN.md | 13 +++-- packages/device/docs-template/README.md | 13 +++-- packages/device/package.json | 54 ++++++------------- .../{miniapp/ali.ts => ali-miniapp/index.ts} | 3 ++ packages/device/src/index.ts | 6 ++- packages/device/src/types.ts | 14 ----- packages/device/src/web/index.ts | 3 ++ .../wechat.ts => wechat-miniprogram/index.ts} | 5 +- packages/device/src/weex/index.ts | 3 ++ packages/device/tsconfig.json | 27 ++++------ 16 files changed, 106 insertions(+), 127 deletions(-) delete mode 100755 packages/device/.gitignore create mode 100644 packages/device/build.json create mode 100644 packages/device/demo/index.js delete mode 100755 packages/device/demo/index.tsx mode change 100755 => 100644 packages/device/package.json rename packages/device/src/{miniapp/ali.ts => ali-miniapp/index.ts} (89%) delete mode 100755 packages/device/src/types.ts rename packages/device/src/{miniapp/wechat.ts => wechat-miniprogram/index.ts} (85%) mode change 100755 => 100644 packages/device/tsconfig.json diff --git a/packages/device/.gitignore b/packages/device/.gitignore deleted file mode 100755 index 3de44ff9..00000000 --- a/packages/device/.gitignore +++ /dev/null @@ -1,13 +0,0 @@ -*.swp -*.log - -.DS_Store -.idea/ -package-lock.json -yarn.lock -coverage/ -node_modules/ -build/ -dist/ -lib/ -_miniapp/ diff --git a/packages/device/README-zh_CN.md b/packages/device/README-zh_CN.md index f68c3aa6..87aeb7a7 100644 --- 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 index 3ca52011..92a1a61c 100644 --- 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 new file mode 100644 index 00000000..3edf1438 --- /dev/null +++ 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 new file mode 100644 index 00000000..07863e18 --- /dev/null +++ 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 ( + + {platform} + {appName} + {screenWidth} + {screenHeight} + + ); +}; + +render(, document.body, { driver: DriverUniversal }); diff --git a/packages/device/demo/index.tsx b/packages/device/demo/index.tsx deleted file mode 100755 index ecaeb979..00000000 --- a/packages/device/demo/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -// @ts-ignore -import { createElement, render } from 'rax'; -import * as DriverDOM from 'driver-dom'; -import * as WeexDriver from 'driver-weex'; -import { isWeb } from 'universal-env'; -import View from 'rax-view'; -import Text from 'rax-text'; -import { platform, appName, screenWidth, screenHeight, px2rpx } from '../src/'; - -const App = () => { - console.log(px2rpx(1440)); - return ( - - {platform} - {appName} - {screenWidth} - {screenHeight} - {px2rpx(1440)} - - ); -}; - -render(, document.body, { driver: isWeb ? DriverDOM : WeexDriver }); \ No newline at end of file diff --git a/packages/device/docs-template/README-zh_CN.md b/packages/device/docs-template/README-zh_CN.md index b4e34b4c..336be7ea 100755 --- 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 index 31e1bae0..d89d6be3 100755 --- 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 old mode 100755 new mode 100644 index 515932fb..ccf95561 --- 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 b/packages/device/src/ali-miniapp/index.ts similarity index 89% rename from packages/device/src/miniapp/ali.ts rename to packages/device/src/ali-miniapp/index.ts index 5dc3949c..9b6a848e 100644 --- a/packages/device/src/miniapp/ali.ts +++ b/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 index bd31e73f..dc041d2b 100755 --- 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,6 +53,7 @@ const appVersion = deviceInfo.appVersion; const platform = deviceInfo.platform; const screenWidth = deviceInfo.screenWidth; const screenHeight = deviceInfo.screenHeight; +const devicePixelRatio = deviceInfo.devicePixelRatio; export { appName, @@ -60,4 +61,5 @@ export { platform, screenWidth, screenHeight, + devicePixelRatio }; diff --git a/packages/device/src/types.ts b/packages/device/src/types.ts deleted file mode 100755 index 33ab5511..00000000 --- a/packages/device/src/types.ts +++ /dev/null @@ -1,14 +0,0 @@ -export interface Device { - platform: string; - appName: string; - screenWidth: number; - screenHeight: number; -} - -export interface MiniAppSystem { - app: string; - platform: string; - screenWidth: number; - screenHeight: number; - [propName: string]: any; -} diff --git a/packages/device/src/web/index.ts b/packages/device/src/web/index.ts index f494546b..ec5db32f 100644 --- 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 b/packages/device/src/wechat-miniprogram/index.ts similarity index 85% rename from packages/device/src/miniapp/wechat.ts rename to packages/device/src/wechat-miniprogram/index.ts index 3136bd06..45f3abe8 100644 --- a/packages/device/src/miniapp/wechat.ts +++ b/packages/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 index ae3a52d3..a4ded1ac 100644 --- 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 old mode 100755 new mode 100644 index 3cbc844a..b69dff42 --- 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__" + ] }