fix: create postinstall to adapt vue3

packages/vue-inbrowser-compiler-demi/README.md

@@ -0,0 +1,11 @@
+# vue-inbrowser-compiler-demi
+
+Library compiled differently for vue2 and vue3
+
+Check postinstall scripts for more info
+
+## install
+
+```bash
+yarn add vue-inbrowser-compiler-demi
+```

packages/vue-inbrowser-compiler-demi/index.cjs.js

@@ -0,0 +1,3 @@
+module.exports.h = () => {}
+module.exports.resolveComponent = name => name
+module.exports.isVue3 = false

packages/vue-inbrowser-compiler-demi/index.d.ts

@@ -0,0 +1,3 @@
+export declare const h: () => void
+export declare const resolveComponent: (name: object | string) => string | object
+export declare const isVue3: boolean

packages/vue-inbrowser-compiler-demi/index.esm.js

@@ -0,0 +1,3 @@
+export const h = () => {}
+export const resolveComponent = name => name
+export const isVue3 = false

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

@@ -0,0 +1,34 @@
+{
+  "name": "vue-inbrowser-compiler-demi",
+  "version": "4.44.17",
+  "description": "use this with vue-inbrowser-compiler to compile for vue2 or vue3",
+  "module": "index.esm.js",
+  "main": "index.cjs.js",
+  "types": "index.d.ts",
+  "keywords": [
+    "vue",
+    "compile"
+  ],
+  "scripts": {
+    "postinstall": "node ./postinstall.js"
+  },
+  "devDependencies": {
+    "vue": "2.6.14"
+  },
+  "peerDependencies": {
+    "vue": ">=2"
+  },
+  "files": [
+    "index.cjs.js",
+    "index.esm.js",
+    "index.d.ts"
+  ],
+  "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-demi/postinstall.js

@@ -0,0 +1,26 @@
+const pkg = require('vue/package.json')
+const path = require('path')
+const fs = require('fs')
+
+function updateIndexForVue3() {
+	// commonjs
+	const indexPath = path.join(__dirname, './index.cjs.js')
+	const indexContent = `
+  const Vue = require('vue')
+  module.exports.h = Vue.h
+  module.exports.resolveComponent = Vue.resolveComponent
+  module.exports.isVue3 = true
+  `
+	fs.writeFile(indexPath, indexContent)
+
+	// esm
+	const indexPathESM = path.join(__dirname, './index.esm.js')
+	const indexContentESM = `
+  export { h, resolveComponent } from 'vue'
+  export const isVue3 = true`
+	fs.writeFile(indexPathESM, indexContentESM)
+}
+
+if (pkg.version.startsWith('3.')) {
+	updateIndexForVue3()
+}

packages/vue-inbrowser-compiler-demi/tsconfig.build.json

@@ -0,0 +1,11 @@
+{
+	"extends": "../../tsconfig",
+	"compilerOptions": {
+		"outDir": "lib",
+		"declaration": true,
+		"sourceMap": false,
+		"module": "es2015"
+	},
+	"include": ["src/**/*.ts", "../../@types/**/*"],
+	"exclude": ["node_modules", "src/**/__tests__/**/*.ts"]
+}

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

@@ -18,7 +18,8 @@
     "acorn"
   ],
   "dependencies": {
-    "camelcase": "^5.3.1"
+    "camelcase": "^5.3.1",
+    "vue-inbrowser-compiler-demi": "^4.44.17"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "15.1.0",
@@ -39,4 +40,4 @@
     "url": "https://github.com/vue-styleguidist/vue-styleguidist.git",
     "directory": "packages/vue-inbrowser-compiler-utils"
   }
-}
+}

packages/vue-inbrowser-compiler-utils/src/__tests__/adaptCreateElementVue3.ts

@@ -1,8 +1,9 @@
 import adaptCreateElement, { CreateElementFunction } from '../adaptCreateElement'
 
-jest.mock('vue', () => {
+jest.mock('vue-inbrowser-compiler-demi', () => {
 	return {
-		resolveComponent: (comp: string) => comp
+		resolveComponent: (comp: string) => comp,
+		isVue3: true
 	}
 })
 

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

@@ -1,23 +1,12 @@
 import camelCase from 'camelcase'
-import * as Vue from 'vue'
+import { isVue3, resolveComponent } from 'vue-inbrowser-compiler-demi'
 
 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 attributes passed to a React pragma to the VueJS fashion
  * @param h the VueJS createElement function passed in render functions

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

@@ -1,3 +1,4 @@
+export { h, resolveComponent, isVue3 } from 'vue-inbrowser-compiler-demi'
 export { default as addScopedStyle } from './addScopedStyle'
 export { default as adaptCreateElement, concatenate } from './adaptCreateElement'
 export { default as parseComponent, VsgSFCDescriptor } from './parseComponent'

packages/vue-inbrowser-compiler/package.json

@@ -47,4 +47,4 @@
     "url": "https://github.com/vue-styleguidist/vue-styleguidist.git",
     "directory": "packages/vue-inbrowser-compiler"
   }
-}
+}

packages/vue-inbrowser-compiler/src/compileVueCodeForEvalFunction.ts

@@ -1,7 +1,6 @@
 import { transform, TransformOptions } from 'buble'
-import * as Vue from 'vue'
 import walkes from 'walkes'
-import { isCodeVueSfc } from 'vue-inbrowser-compiler-utils'
+import { isCodeVueSfc, isVue3 } from 'vue-inbrowser-compiler-utils'
 import transformOneImport from './transformOneImport'
 import normalizeSfcComponent, {
 	parseScriptCode,
@@ -12,8 +11,6 @@ import normalizeSfcComponent, {
 import getAst from './getAst'
 import getTargetFromBrowser from './getTargetFromBrowser'
 
-const isVue3 = !!(Vue as any).h
-
 interface EvaluableComponent {
 	script: string
 	template?: string

packages/vue-inbrowser-compiler/src/normalizeSfcComponent.ts

@@ -1,11 +1,8 @@
 import walkes from 'walkes'
-import * as Vue from 'vue'
-import { parseComponent, VsgSFCDescriptor } from 'vue-inbrowser-compiler-utils'
+import { parseComponent, VsgSFCDescriptor, isVue3 } from 'vue-inbrowser-compiler-utils'
 import getAst from './getAst'
 import transformOneImport from './transformOneImport'
 
-const isVue3 = !!(Vue as any).h
-
 const buildStyles = function (styles: string[] | undefined): string | undefined {
 	let _styles = ''
 	if (styles) {

packages/vue-styleguidist/package.json

@@ -68,7 +68,7 @@
     "qss": "^2.0.3",
     "react": "^17.0.2",
     "react-codemirror2": "^7.2.1",
-    "react-dev-utils": "^11.0.4",
+    "react-dev-utils": "^12.0.0-next.47",
     "react-dom": "^17.0.2",
     "react-group": "^3.0.2",
     "react-icons": "^3.11.0",
@@ -140,4 +140,4 @@
   "resolutions": {
     "**/http-proxy": "1.18.1"
   }
-}
+}