fix: adapt compiler utils to Vue3 jsx format

packages/vue-inbrowser-compiler-utils/package.json

@@ -1,39 +1,42 @@
 {
-	"name": "vue-inbrowser-compiler-utils",
-	"version": "4.44.0",
-	"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.64.0",
-		"vue": "2.6.14"
-	},
-	"author": "Bart Ledoux <ledouxb@me.com>",
-	"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"
-	}
-}
+  "name": "vue-inbrowser-compiler-utils",
+  "version": "4.44.0",
+  "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.64.0",
+    "vue": "2.6.14"
+  },
+  "peerDependencies": {
+    "vue": ">=2"
+  },
+  "author": "Bart Ledoux <ledouxb@me.com>",
+  "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"
+  }
+}

packages/vue-inbrowser-compiler-utils/rollup.config.js

@@ -30,5 +30,5 @@ export default {
 		// Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
 		commonjs()
 	],
-	external: Object.keys(pkg.dependencies)
+	external: [...Object.keys(pkg.dependencies), ...Object.keys(pkg.peerDependencies)]
 }

packages/vue-inbrowser-compiler-utils/src/adaptCreateElement.ts

@@ -1,24 +1,37 @@
 import camelCase from 'camelcase'
+import * as Vue from 'vue'
 
 export type CreateElementFunction = (
 	component: string | object,
 	attributes?: { [k: string]: any },
 	children?: any | any[]
 ) => any[] | any
 
+const isVue3 = !!(Vue as any).resolveComponent
+
+/**
+ * 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 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
  * @returns pragma usable in buble rendered JSX for VueJS
  */
 export default function adaptCreateElement(h: CreateElementFunction): CreateElementFunction {
 	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)
 	}
 }
 
@@ -50,7 +63,7 @@ const makeArray = (a: any): any[] => {
 }
 
 /**
- * create a functoin out of two other
+ * Create a function out of two other
  * @param fn1
  * @param fn2
  */
@@ -64,7 +77,7 @@ const mergeFn = (
 	}
 
 /**
- * merge two members of the spread
+ * Merge two members of the spread
  * @param a
  * @param b
  */
@@ -95,9 +108,14 @@ export const concatenate = (
 }
 
 const groupAttr = (attrsIn: { [key: string]: any }): { [key: string]: any } | undefined => {
+	if (isVue3) {
+		return attrsIn
+	}
+
 	if (!attrsIn) {
 		return undefined
 	}
+
 	const attrsOut: { [key: string]: any } = {}
 	Object.keys(attrsIn).forEach(name => {
 		const value = attrsIn[name]
@@ -125,7 +143,7 @@ const groupAttr = (attrsIn: { [key: string]: any }): { [key: string]: any } | un
 						attrsOut[prefix] = {}
 					}
 					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)
 					} else {
 						// if it is a spread