vue-inbrowser-compiler-utils - npm Package Compare versions

Comparing version 4.44.16 to 4.44.17

CHANGELOG.md

@@ -6,2 +6,17 @@ # Change Log
 
+## [4.44.17](https://github.com/vue-styleguidist/vue-styleguidist/compare/v4.44.16...v4.44.17) (2022-02-28)
+
+
+### Bug Fixes
+
+* adapt compiler utils to Vue3 jsx format ([9e1f315](https://github.com/vue-styleguidist/vue-styleguidist/commit/9e1f315634ebaafe9fd681640166416cb1f04210))
+
+
+
+# 4.44.0 (2022-01-17)
+
+
+
+
+
 ## [4.44.16](https://github.com/vue-styleguidist/vue-styleguidist/compare/v4.44.15...v4.44.16) (2022-02-22)
@@ -8,0 +23,0 @@

lib/types/adaptCreateElement.d.ts

@@ -5,3 +5,3 @@ export declare type CreateElementFunction = (component: string | object, attributes?: {
 /**
- * Groups atributes passed to a React pragma to the VueJS fashion
+ * Groups attributes passed to a React pragma to the VueJS fashion
  * @param h the VueJS createElement function passed in render functions
@@ -8,0 +8,0 @@ * @returns pragma usable in buble rendered JSX for VueJS

lib/vue-inbrowser-compiler-utils.cjs.js

@@ -6,6 +6,26 @@ 'use strict';
 var camelCase = require('camelcase');
+var Vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
 var camelCase__default = /*#__PURE__*/_interopDefaultLegacy(camelCase);
+var Vue__namespace = /*#__PURE__*/_interopNamespace(Vue);
 
@@ -83,4 +103,13 @@ /* eslint-disable no-control-regex */
 
+var isVue3 = !!Vue__namespace.resolveComponent;
 /**
- * Groups atributes passed to a React pragma to the VueJS fashion
+ * Reconcile Vue 2 and Vue 3 JSX attributes
+ * @param componentName
+ * @returns
+ */
+function resolveComponent(componentName) {
+    return isVue3 ? Vue__namespace.resolveComponent(componentName) : componentName;
+}
+/**
+ * Groups attributes passed to a React pragma to the VueJS fashion
  * @param h the VueJS createElement function passed in render functions
@@ -95,9 +124,10 @@ * @returns pragma usable in buble rendered JSX for VueJS
         }
+        var resolvedComponent = resolveComponent(comp);
         if (attr === undefined) {
-            return h(comp);
+            return h(resolvedComponent);
         }
         else if (!children.length) {
-            return h(comp, groupAttr(attr));
+            return h(resolvedComponent, groupAttr(attr));
         }
-        return h(comp, groupAttr(attr), children);
+        return h(resolvedComponent, groupAttr(attr), children);
     };
@@ -129,3 +159,3 @@ }
 /**
- * create a functoin out of two other
+ * Create a function out of two other
  * @param fn1
@@ -145,3 +175,3 @@ * @param fn2
 /**
- * merge two members of the spread
+ * Merge two members of the spread
  * @param a
@@ -176,2 +206,18 @@ * @param b
 var groupAttr = function (attrsIn) {
+    if (isVue3) {
+        Object.keys(attrsIn)
+            .filter(function (key) { return key.startsWith('vModel') || key.startsWith('v-model'); })
+            .forEach(function (key) {
+            var valueRef = attrsIn[key];
+            var rootKey = key.startsWith('vModel:')
+                ? key.slice(7)
+                : key.startsWith('v-model')
+                    ? key.slice(8)
+                    : 'modelValue';
+            attrsIn[rootKey] = valueRef;
+            attrsIn["onUpdate:".concat(rootKey)] = function ($event) { return (valueRef = $event); };
+            delete attrsIn[key];
+        });
+        return attrsIn;
+    }
     if (!attrsIn) {
@@ -210,3 +256,3 @@ return undefined;
                     if (camelCasedName.length) {
-                        // if it is a litteral prefixed attribute
+                        // if it is a literal prefixed attribute
                         attrsOut[prefix][camelCasedName] = merge(attrsOut[prefix][camelCasedName], value);
@@ -213,0 +259,0 @@ }

lib/vue-inbrowser-compiler-utils.esm.js

 import camelCase from 'camelcase';
+import * as Vue from 'vue';
 
@@ -74,4 +75,13 @@ /* eslint-disable no-control-regex */
 
+var isVue3 = !!Vue.resolveComponent;
 /**
- * Groups atributes passed to a React pragma to the VueJS fashion
+ * Reconcile Vue 2 and Vue 3 JSX attributes
+ * @param componentName
+ * @returns
+ */
+function resolveComponent(componentName) {
+    return isVue3 ? Vue.resolveComponent(componentName) : componentName;
+}
+/**
+ * Groups attributes passed to a React pragma to the VueJS fashion
  * @param h the VueJS createElement function passed in render functions
@@ -86,9 +96,10 @@ * @returns pragma usable in buble rendered JSX for VueJS
         }
+        var resolvedComponent = resolveComponent(comp);
         if (attr === undefined) {
-            return h(comp);
+            return h(resolvedComponent);
         }
         else if (!children.length) {
-            return h(comp, groupAttr(attr));
+            return h(resolvedComponent, groupAttr(attr));
         }
-        return h(comp, groupAttr(attr), children);
+        return h(resolvedComponent, groupAttr(attr), children);
     };
@@ -120,3 +131,3 @@ }
 /**
- * create a functoin out of two other
+ * Create a function out of two other
  * @param fn1
@@ -136,3 +147,3 @@ * @param fn2
 /**
- * merge two members of the spread
+ * Merge two members of the spread
  * @param a
@@ -167,2 +178,18 @@ * @param b
 var groupAttr = function (attrsIn) {
+    if (isVue3) {
+        Object.keys(attrsIn)
+            .filter(function (key) { return key.startsWith('vModel') || key.startsWith('v-model'); })
+            .forEach(function (key) {
+            var valueRef = attrsIn[key];
+            var rootKey = key.startsWith('vModel:')
+                ? key.slice(7)
+                : key.startsWith('v-model')
+                    ? key.slice(8)
+                    : 'modelValue';
+            attrsIn[rootKey] = valueRef;
+            attrsIn["onUpdate:".concat(rootKey)] = function ($event) { return (valueRef = $event); };
+            delete attrsIn[key];
+        });
+        return attrsIn;
+    }
     if (!attrsIn) {
@@ -201,3 +228,3 @@ return undefined;
                     if (camelCasedName.length) {
-                        // if it is a litteral prefixed attribute
+                        // if it is a literal prefixed attribute
                         attrsOut[prefix][camelCasedName] = merge(attrsOut[prefix][camelCasedName], value);
@@ -204,0 +231,0 @@ }

package.json

 {
-	"name": "vue-inbrowser-compiler-utils",
-	"version": "4.44.16",
-	"description": "use this with vue-inbrowser-compiler to allow jsx compilation",
-	"module": "lib/vue-inbrowser-compiler-utils.esm.js",
-	"main": "lib/vue-inbrowser-compiler-utils.cjs.js",
-	"types": "lib/types/index.d.ts",
-	"scripts": {
-		"compile": "rollup -c",
-		"compile:watch": "rollup -c --watch"
-	},
-	"keywords": [
-		"vue",
-		"compile",
-		"live",
-		"browser",
-		"buble",
-		"acorn"
-	],
-	"dependencies": {
-		"camelcase": "^5.3.1"
-	},
-	"devDependencies": {
-		"@rollup/plugin-commonjs": "15.1.0",
-		"@rollup/plugin-node-resolve": "9.0.0",
-		"@rollup/plugin-typescript": "8.3.0",
-		"@types/domhandler": "2.4.2",
-		"rollup": "2.66.1",
-		"vue": "2.6.14"
-	},
-	"author": "Bart Ledoux <[e-mail]>",
-	"license": "MIT",
-	"homepage": "https://vue-styleguidist.github.io",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/vue-styleguidist/vue-styleguidist.git",
-		"directory": "packages/vue-inbrowser-compiler-utils"
-	},
-	"gitHead": "9fc75aa1202d989d447f71663f50edc493cfb368"
+  "name": "vue-inbrowser-compiler-utils",
+  "version": "4.44.17",
+  "description": "use this with vue-inbrowser-compiler to allow jsx compilation",
+  "module": "lib/vue-inbrowser-compiler-utils.esm.js",
+  "main": "lib/vue-inbrowser-compiler-utils.cjs.js",
+  "types": "lib/types/index.d.ts",
+  "scripts": {
+    "compile": "rollup -c",
+    "compile:watch": "rollup -c --watch"
+  },
+  "keywords": [
+    "vue",
+    "compile",
+    "live",
+    "browser",
+    "buble",
+    "acorn"
+  ],
+  "dependencies": {
+    "camelcase": "^5.3.1"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "15.1.0",
+    "@rollup/plugin-node-resolve": "9.0.0",
+    "@rollup/plugin-typescript": "8.3.0",
+    "@types/domhandler": "2.4.2",
+    "rollup": "2.66.1",
+    "vue": "2.6.14"
+  },
+  "peerDependencies": {
+    "vue": ">=2"
+  },
+  "author": "Bart Ledoux <[e-mail]>",
+  "license": "MIT",
+  "homepage": "https://vue-styleguidist.github.io",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vue-styleguidist/vue-styleguidist.git",
+    "directory": "packages/vue-inbrowser-compiler-utils"
+  },
+  "gitHead": "713d792bc12ee6cbe0296787d80a2bf4af2721c2"
 }

rollup.config.js

@@ -33,3 +33,3 @@ import * as path from 'path'
 	],
-	external: Object.keys(pkg.dependencies)
+	external: [...Object.keys(pkg.dependencies), ...Object.keys(pkg.peerDependencies)]
 }

src/adaptCreateElement.ts

 import camelCase from 'camelcase'
+import * as Vue from 'vue'
 
@@ -9,4 +10,15 @@ export type CreateElementFunction = (
 
+const isVue3 = !!(Vue as any).resolveComponent
+
 /**
- * Groups atributes passed to a React pragma to the VueJS fashion
+ * Reconcile Vue 2 and Vue 3 JSX attributes
+ * @param componentName
+ * @returns
+ */
+function resolveComponent(componentName: any): any {
+	return isVue3 ? (Vue as any).resolveComponent(componentName) : componentName
+}
+
+/**
+ * Groups attributes passed to a React pragma to the VueJS fashion
  * @param h the VueJS createElement function passed in render functions
@@ -17,8 +29,9 @@ * @returns pragma usable in buble rendered JSX for VueJS
 	return (comp, attr, ...children: any[]) => {
+		const resolvedComponent = resolveComponent(comp)
 		if (attr === undefined) {
-			return h(comp)
+			return h(resolvedComponent)
 		} else if (!children.length) {
-			return h(comp, groupAttr(attr))
+			return h(resolvedComponent, groupAttr(attr))
 		}
-		return h(comp, groupAttr(attr), children)
+		return h(resolvedComponent, groupAttr(attr), children)
 	}
@@ -55,3 +68,3 @@ }
 /**
- * create a functoin out of two other
+ * Create a function out of two other
  * @param fn1
@@ -70,3 +83,3 @@ * @param fn2
 /**
- * merge two members of the spread
+ * Merge two members of the spread
  * @param a
@@ -102,5 +115,23 @@ * @param b
 const groupAttr = (attrsIn: { [key: string]: any }): { [key: string]: any } | undefined => {
+	if (isVue3) {
+		Object.keys(attrsIn)
+			.filter(key => key.startsWith('vModel') || key.startsWith('v-model'))
+			.forEach(key => {
+				let valueRef = attrsIn[key]
+				const rootKey = key.startsWith('vModel:')
+					? key.slice(7)
+					: key.startsWith('v-model')
+					? key.slice(8)
+					: 'modelValue'
+				attrsIn[rootKey] = valueRef
+				attrsIn[`onUpdate:${rootKey}`] = ($event: any) => (valueRef = $event)
+				delete attrsIn[key]
+			})
+		return attrsIn
+	}
+
 	if (!attrsIn) {
 		return undefined
 	}
+
 	const attrsOut: { [key: string]: any } = {}
@@ -133,3 +164,3 @@ Object.keys(attrsIn).forEach(name => {
 					if (camelCasedName.length) {
-						// if it is a litteral prefixed attribute
+						// if it is a literal prefixed attribute
 						attrsOut[prefix][camelCasedName] = merge(attrsOut[prefix][camelCasedName], value)
@@ -136,0 +167,0 @@ } else {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

68627

increased by7.39%

Number of package files

32

increased by3.23%

Lines of code

1746

increased by7.58%

Worsened metrics

Dependency count

2

increased by100%

No dependency changes