rax-embed - npm Package Compare versions

Comparing version 1.1.0-0 to 1.1.0

build.json

 {
-  "devWatchLib": true,
-  "devOutputDir": "demo/miniapp/lib/",
   "plugins": [
-    ["rax-plugin-component", { "targets": ["web", "weex"]}]
+    [
+      "build-plugin-rax-component",
+      {
+        "type": "rax",
+        "targets": [
+          "web",
+          "weex"
+        ]
+      }
+    ]
   ]
 }

demo/index.js

 /* eslint-disable import/no-extraneous-dependencies */
 import { createElement, render } from 'rax';
-import * as DriverDOM from 'driver-dom';
-import * as DriverWeex from 'driver-weex';
-import { isWeex } from 'universal-env';
+import DriverUniversal from 'driver-universal';
 import Embed from '../src/index';
@@ -13,4 +11,4 @@
 render(<Embed urlParam={urlParam} src={'http://taobao.com'} useIframeInWeb={true} style={{
-  height: 750,
-  width: 300
-}} />, document.body, { driver: isWeex ? DriverWeex : DriverDOM });
+  height: '750rpx',
+  width: '750rpx'
+}} />, document.body, { driver: DriverUniversal });

lib/index.d.ts

@@ -1,5 +0,4 @@
-import { FunctionComponent } from 'rax';
+/// <reference types="rax" />
 import { Props } from './types';
-import './index.css';
-declare const Embed: FunctionComponent<Props>;
+declare const Embed: (props: Props) => JSX.Element;
 export default Embed;

lib/index.js

@@ -10,63 +10,4 @@ "use strict";
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _index = _interopRequireDefault(require("./index.css"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-var _styleSheet = _index.default;
-
-function _getClassName() {
-  var className = [];
-  var args = arguments[0];
-  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();
-
-  if (type === 'string') {
-    args = args.trim();
-    args && className.push(args);
-  } else if (type === 'array') {
-    args.forEach(function (cls) {
-      cls = _getClassName(cls).trim();
-      cls && className.push(cls);
-    });
-  } else if (type === 'object') {
-    for (var k in args) {
-      k = k.trim();
-
-      if (k && args.hasOwnProperty(k) && args[k]) {
-        className.push(k);
-      }
-    }
-  }
-
-  return className.join(' ').trim();
-}
-
-function _getStyle(classNameExpression) {
-  var cache = _styleSheet.__cache || (_styleSheet.__cache = {});
-
-  var className = _getClassName(classNameExpression);
-
-  var classNameArr = className.split(/\s+/);
-  var style = cache[className];
-
-  if (!style) {
-    style = {};
-
-    if (classNameArr.length === 1) {
-      style = _styleSheet[classNameArr[0].trim()];
-    } else {
-      classNameArr.forEach(function (cls) {
-        style = Object.assign(style, _styleSheet[cls.trim()]);
-      });
-    }
-
-    cache[className] = style;
-  }
-
-  return style;
-}
-
 function isWeexUrl(url) {
@@ -109,21 +50,25 @@ return /(_wx_tpl=[^\s&]|wh_weex=true)/.test(url);
 
-var Embed = function Embed(props) {
-  if (props === void 0) {
-    props = defaultProps;
-  }
-
+var Embed = function (props) {
+  props = Object.assign(Object.assign({}, defaultProps), props);
   var _props = props,
-      useIframeInWeb = _props.useIframeInWeb,
-      className = _props.className,
-      style = _props.style;
+      useIframeInWeb = _props.useIframeInWeb;
   var url = genFixedUrl(props);
-  var cls = (0, _classnames.default)('rax-embed', className);
 
+  if (_universalEnv.isMiniApp || _universalEnv.isWeChatMiniProgram) {
+    return (0, _rax.createElement)("web-view", {
+      src: url,
+      onMessage: props.onMessage
+    });
+  }
+
   if (useIframeInWeb && _universalEnv.isWeb) {
     return (0, _rax.createElement)("iframe", _extends({}, props, {
-      className: cls,
       type: _universalEnv.isWeex ? 'weex' : '',
       itemId: 1,
       src: url,
-      style: Object.assign({}, _getStyle(cls), style)
+      style: Object.assign(Object.assign({
+        borderWidth: 0
+      }, props.style), {
+        visibility: 'visible'
+      })
     }));
@@ -134,13 +79,13 @@ }
     return (0, _rax.createElement)("embed", _extends({}, props, {
-      className: cls,
-      style: Object.assign({}, _getStyle(cls), style),
       type: _universalEnv.isWeex ? 'weex' : '',
       itemId: 1,
-      src: url
+      src: url,
+      style: Object.assign(Object.assign({}, props.style), {
+        visibility: 'visible'
+      })
     }));
   } else {
     return (0, _rax.createElement)("web", _extends({}, props, {
-      className: cls,
-      style: Object.assign({}, _getStyle(cls), style),
-      src: url
+      src: url,
+      style: props.style
     }));
@@ -147,0 +92,0 @@ }

lib/miniapp/index.js

 "use strict";
 
 Component({
-  data: {},
+  data: {
+    url: ''
+  },
   props: {
     src: '',
-    onMessage: function onMessage() {}
+    urlParam: ''
   },
-  didMount: function didMount() {},
   methods: {
@@ -11,0 +12,0 @@ onMessage: function onMessage(e) {

lib/types.d.ts

@@ -12,5 +12,5 @@ import * as Rax from 'rax';
     src?: string;
+    onMessage?: Function;
     useIframeInWeb?: boolean;
-    className?: string;
     style?: Rax.CSSProperties;
 }

package.json

 {
   "name": "rax-embed",
-  "version": "1.1.0-0",
+  "version": "1.1.0",
   "description": "Embed container for Rax.",
-  "license": "BSD-3-Clause",
-  "author": "amdgigabyte",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
-    "clean": "rm -rf ./lib ./package-lock.json ./yarn.lock ./demo/miniapp/lib",
-    "build": "npm run clean && rax-scripts build",
-    "start": "rax-scripts start",
-    "prepublishOnly": "npm run build",
-    "test": "rax-scripts test",
-    "lint": "eslint --ext .js --ext .jsx --ext .ts --ext .tsx ./src --fix"
+    "clean": "rm -rf ./lib && rm -rf ./package-lock.json && rm -f ./yarn.lock && rm -rf demo/miniapp/lib",
+    "build": "npm run clean && ../../node_modules/.bin/build-scripts build --config ../../build.json",
+    "start": "../../node_modules/.bin/build-scripts start --config ../../build.json"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/raxjs/rax-components.git"
+  },
   "keywords": [
@@ -21,5 +20,2 @@ "Rax",
   ],
-  "miniappConfig": {
-    "main": "lib/miniapp/index"
-  },
   "engines": {
@@ -29,4 +25,3 @@ "npm": ">=3.0.0"
   "dependencies": {
-    "classnames": "^2.2.6",
-    "universal-env": "^1.0.0"
+    "universal-env": "^3.0.0"
   },
@@ -37,32 +32,20 @@ "peerDependencies": {
   "devDependencies": {
-    "@rax-types/rax": "^1.0.5",
     "@types/ali-app": "^1.0.0",
-    "@types/classnames": "^2.2.9",
     "@types/jest": "^24.0.12",
+    "@types/rax": "^1.0.0",
     "@typescript-eslint/eslint-plugin": "^1.7.0",
     "@typescript-eslint/parser": "^1.7.0",
     "csstype": "^2.6.4",
-    "driver-dom": "^1.0.0",
-    "driver-weex": "^1.0.0",
+    "driver-universal": "^3.0.0",
     "eslint": "^5.16.0",
     "eslint-config-rax": "^0.0.0",
-    "husky": "^3.0.5",
-    "lint-staged": "^9.2.5",
     "rax": "^1.0.0",
-    "rax-plugin-component": "^0.1.9",
-    "rax-scripts": "^2.0.0",
     "rax-test-renderer": "^1.0.0",
-    "typescript": "^3.5.3"
+    "typescript": "^3.6.2"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "eslint --fix",
-      "git add"
-    ]
+  "miniappConfig": {
+    "main": "lib/miniapp/index",
+    "main:wechat": "lib/wechat-miniprogram/index",
+    "main:bytedance": "lib/bytedance-microapp/index"
   }
 }

README.md

@@ -20,32 +20,31 @@ [![npm](https://img.shields.io/npm/v/rax-embed.svg)](https://www.npmjs.com/package/rax-embed)
 注：
-1、**支持**列表中的 <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" />代表h5 <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" />代表weex  <img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" />代表小程序
-2、小程序中使用webview实现，默认会全屏覆盖当前页面，不能设置样式和透明度
+1、<img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" />代表 h5 <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" />代表 weex <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"> 代表微信小程序
 
-| **属性**    | **类型**   | **默认值** | ** 必填 ** | **描述**           | ** 支持 ** |
+2、小程序中使用 webview 实现，默认会全屏覆盖当前页面，不能设置样式和透明度
+
+| **属性**    | **类型**   | **默认值** | **必填** | **描述**           | **支持** |
 | ----------- | ---------- | ---------- | ------------ | ------------------ | ------------ |
-| style     | `Object` | {}         |   false           | 样式描述 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /><img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" />  |
-| src     | `String` | ''         |   false           | 嵌入的页面地址 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /><img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /><img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" />  |
-| urlParam     | `String or Object` | ''         |   false           | 传递给子页面的参数 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /><img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" />  |
-| _page_inside_embed_     | `boolean` | true         |   false           | 页面是否在embed中 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /><img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /> |
-| _page_home_isweex_     | `boolean` |          |   false           | 子页面的宿主页面是否是 weex 渲染 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /><img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /> |
+| style     | `Object` | {}         |   false           | 样式描述 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /> |
+| src     | `String` | ''         |   false           | 嵌入的页面地址 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /><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">  |
+| urlParam     | `String or Object` | ''         |   false           | 传递给子页面的参数 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /><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">   |
+| _page_inside_embed_     | `boolean` | true         |   false           | 页面是否在embed中 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /> |
+| _page_home_isweex_     | `boolean` |          |   false           | 子页面的宿主页面是否是 weex 渲染 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" />  |
 
 ## 示例
-[在线 Demo](https://jsplayground.taobao.org/raxplayground/c5f33524-1a5c-43ed-866d-411d820cce46)
+
 ```js
-import {createElement, render, Component} from 'rax';
-import * as DriverDOM from 'driver-dom';
-import * as DriverWeex from 'driver-weex';
-import { isWeex } from 'universal-env';
+import { createElement, render } from 'rax';
+import DriverUniversal from 'driver-universal';
 import Embed from '../src/index';
 
 const urlParam = {
-  paramOne:123,
-  paramTwo:456
+  paramOne: 123,
+  paramTwo: 456
 };
 render(<Embed urlParam={urlParam} src={'http://taobao.com'} useIframeInWeb={true} style={{
-  height: 750,
-  width: 750
-}} />, document.body, { driver:isWeex ? DriverWeex : DriverDOM });
+  height: '750rpx',
+  width: '750rpx'
+}} />, document.body, { driver: DriverUniversal });
 ```
 
 

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No License Found

License

(Experimental) License information could not be found.

Found 1 instance in 1 package

Fixed alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26125

increased by71.67%

Dependency count

2

decreased by-33.33%

Dev dependency count

12

decreased by-33.33%

Number of package files

51

increased by50%

Lines of code

398

increased by10.56%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low license alerts

1

increased byInfinity%

Number of low maintenance alerts

2

increased by100%

Number of low quality alerts

4

increased by100%

Number of lines in readme file

50

decreased by-1.96%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Added@uni/env@1.1.1(transitive)

• + Addeduniversal-env@3.3.3(transitive)

• - Removedclassnames@^2.2.6

• - Removedclassnames@2.5.1(transitive)

• - Removeduniversal-env@1.0.7(transitive)

• Updateduniversal-env@^3.0.0