@vue/web-component-wrapper - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

dist/vue-wc-wrapper.global.js

@@ -52,6 +52,6 @@ var wrapVueWebComponent = (function () {
     }
-    if (value === '' || value === name) {
+    if (value === '' || value === name || value != null) {
       return true
     }
-    return value != null
+    return value
   } else if (isNumber(type)) {
@@ -173,9 +173,9 @@ const parsed = parseFloat(value, 10);
     constructor () {
-      super();
-      this.attachShadow({ mode: 'open' });
+      const self = super();
+      self.attachShadow({ mode: 'open' });
 
-      const wrapper = this._wrapper = new Vue({
+      const wrapper = self._wrapper = new Vue({
         name: 'shadow-root',
-        customElement: this,
-        shadowRoot: this.shadowRoot,
+        customElement: self,
+        shadowRoot: self.shadowRoot,
         data () {
@@ -200,4 +200,4 @@ return {
           const m = mutations[i];
-          if (isInitialized && m.type === 'attributes' && m.target === this) {
-            syncAttribute(this, m.attributeName);
+          if (isInitialized && m.type === 'attributes' && m.target === self) {
+            syncAttribute(self, m.attributeName);
           } else {
@@ -210,7 +210,7 @@ hasChildrenChange = true;
             wrapper.$createElement,
-            this.childNodes
+            self.childNodes
           ));
         }
       });
-      observer.observe(this, {
+      observer.observe(self, {
         childList: true,
@@ -217,0 +217,0 @@ subtree: true,

dist/vue-wc-wrapper.js

@@ -49,6 +49,6 @@ const camelizeRE = /-(\w)/g;
     }
-    if (value === '' || value === name) {
+    if (value === '' || value === name || value != null) {
       return true
     }
-    return value != null
+    return value
   } else if (isNumber(type)) {
@@ -170,9 +170,9 @@ const parsed = parseFloat(value, 10);
     constructor () {
-      super();
-      this.attachShadow({ mode: 'open' });
+      const self = super();
+      self.attachShadow({ mode: 'open' });
 
-      const wrapper = this._wrapper = new Vue({
+      const wrapper = self._wrapper = new Vue({
         name: 'shadow-root',
-        customElement: this,
-        shadowRoot: this.shadowRoot,
+        customElement: self,
+        shadowRoot: self.shadowRoot,
         data () {
@@ -197,4 +197,4 @@ return {
           const m = mutations[i];
-          if (isInitialized && m.type === 'attributes' && m.target === this) {
-            syncAttribute(this, m.attributeName);
+          if (isInitialized && m.type === 'attributes' && m.target === self) {
+            syncAttribute(self, m.attributeName);
           } else {
@@ -207,7 +207,7 @@ hasChildrenChange = true;
             wrapper.$createElement,
-            this.childNodes
+            self.childNodes
           ));
         }
       });
-      observer.observe(this, {
+      observer.observe(self, {
         childList: true,
@@ -214,0 +214,0 @@ subtree: true,

package.json

 {
   "name": "@vue/web-component-wrapper",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "wrap a vue component as a web component.",
   "main": "dist/vue-wc-wrapper.js",
   "unpkg": "dist/vue-wc-wrapper.global.js",
+  "types": "types/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "types/*.d.ts"
   ],
@@ -14,3 +16,4 @@ "scripts": {
     "build": "rollup -c",
-    "prepare": "rollup -c"
+    "prepare": "rollup -c",
+    "test:types": "tsc -p ./types/tsconfig.json"
   },
@@ -39,2 +42,3 @@ "repository": {
     "rollup": "^0.55.3",
+    "typescript": "^3.2.2",
     "vue": "^2.5.13",
@@ -44,2 +48,3 @@ "yorkie": "^1.0.3"
   "eslintConfig": {
+    "root": true,
     "env": {
@@ -46,0 +51,0 @@ "browser": true

README.md

@@ -9,7 +9,7 @@ # @vue/web-component-wrapper [![CircleCI](https://circleci.com/gh/vuejs/vue-web-component-wrapper.svg?style=shield)](https://circleci.com/gh/vuejs/vue-web-component-wrapper)
 
-- **If targeting browsers that natively supports ES2015, but not native Web Components:**
+- **If targeting browsers that natively support ES2015, but not native Web Components:**
 
-  You will also need the [Shady DOM + Custom Elements polyfill](https://github.com/webcomponents/webcomponentsjs/blob/master/webcomponents-sd-ce.js).
+  You will also need the [Shady DOM + Custom Elements polyfill](https://github.com/webcomponents/webcomponentsjs).
 
-  See caniuse for support on [Custom Elements v1](https://caniuse.com/#feat=custom-elementsv1) and [Shadow DOM v1](https://caniuse.com/#feat=shadowdomv1).
+  See caniuse.com for support on [Custom Elements v1](https://caniuse.com/#feat=custom-elementsv1) and [Shadow DOM v1](https://caniuse.com/#feat=shadowdomv1).
 
@@ -43,3 +43,3 @@ - **Note on CSS Encapsulation When Using the Shady DOM polyfill**
 
-Note it works with async components as well - the async component factory will only be called when an instance of the custom element is created on the page:
+It works with async components as well - you can pass an async component factory function that returns a Promise, and the function will only be called when an instance of the custom element is created on the page:
 
@@ -46,0 +46,0 @@ ``` js

New alerts

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

Improved metrics

Total package byte prevSize

19444

increased by2.05%

Number of package files

5

increased by25%

Lines of code

485

increased by1.25%

Worsened metrics

Dev dependency count

10

increased by11.11%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes