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

Comparing version 4.64.1 to 4.71.1

CHANGELOG.md

 # Change Log
 
+## 4.71.1
+
+### Patch Changes
+
+- [#1552](https://github.com/vue-styleguidist/vue-styleguidist/pull/1552) [`963853dd`](https://github.com/vue-styleguidist/vue-styleguidist/commit/963853dd45a9008d61968518626bc74b3080ef96) Thanks [@elevatebart](https://github.com/elevatebart)! - allow double styled static heads in sfc examples
+
+- Updated dependencies [[`963853dd`](https://github.com/vue-styleguidist/vue-styleguidist/commit/963853dd45a9008d61968518626bc74b3080ef96)]:
+  - vue-inbrowser-compiler-independent-utils@4.71.1
+  - vue-inbrowser-compiler-demi@4.71.1
+
 ## 4.64.1
@@ -4,0 +14,0 @@

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

@@ -183,6 +183,8 @@ 'use strict';
             id: '-',
+            scoped: !!compiledComponent.scopeId,
             compilerOptions: {
                 bindingMetadata: bindings,
                 prefixIdentifiers: true,
-                mode: 'function'
+                mode: 'function',
+                scopeId: compiledComponent.scopeId
             }
@@ -204,3 +206,4 @@ });
                 prefixIdentifiers: true,
-                mode: 'function'
+                mode: 'function',
+                scopeId: compiledComponent.scopeId
             }
@@ -214,12 +217,15 @@ });
     sfc.script = `
-${vueInbrowserCompilerDemi.isVue3 ? 'const Vue = require("vue")' : ''}
-const comp = (function() {${sfc.script}})()${((_a = renderObject.staticRenderFns) === null || _a === void 0 ? void 0 : _a.length)
+${vueInbrowserCompilerDemi.isVue3 ? 'const Vue = require("vue");const {pushScopeId: _pushScopeId, popScopeId: _popScopeId} = Vue' : ''}
+const __sfc__ = (function() {${sfc.script}})()${((_a = renderObject.staticRenderFns) === null || _a === void 0 ? void 0 : _a.length)
         ? `
-comp.staticRenderFns = [${(_b = renderObject.staticRenderFns) === null || _b === void 0 ? void 0 : _b.map((fn) => {
+      __sfc__.staticRenderFns = [${(_b = renderObject.staticRenderFns) === null || _b === void 0 ? void 0 : _b.map((fn) => {
             return `function(){${fn}}`;
         }).join(',')}]`
         : ''}
-comp.render = function() {${renderObject.code}}
-${vueInbrowserCompilerDemi.isVue3 ? `comp.render = comp.render()` : ''}
-return comp`;
+  __sfc__.render = function() {${renderObject.code}}
+${vueInbrowserCompilerDemi.isVue3 ? `
+${sfc.scopeId ? `_pushScopeId("${sfc.scopeId}")` : ''}
+__sfc__.render = __sfc__.render()
+${sfc.scopeId ? `_popScopeId()` : ''}` : ''}
+return __sfc__`;
     delete sfc.template;
@@ -226,0 +232,0 @@ }

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

@@ -176,6 +176,8 @@ import { isVue3, parseComponent, compileScript, compileTemplate } from 'vue-inbrowser-compiler-demi';
             id: '-',
+            scoped: !!compiledComponent.scopeId,
             compilerOptions: {
                 bindingMetadata: bindings,
                 prefixIdentifiers: true,
-                mode: 'function'
+                mode: 'function',
+                scopeId: compiledComponent.scopeId
             }
@@ -197,3 +199,4 @@ });
                 prefixIdentifiers: true,
-                mode: 'function'
+                mode: 'function',
+                scopeId: compiledComponent.scopeId
             }
@@ -207,12 +210,15 @@ });
     sfc.script = `
-${isVue3 ? 'const Vue = require("vue")' : ''}
-const comp = (function() {${sfc.script}})()${((_a = renderObject.staticRenderFns) === null || _a === void 0 ? void 0 : _a.length)
+${isVue3 ? 'const Vue = require("vue");const {pushScopeId: _pushScopeId, popScopeId: _popScopeId} = Vue' : ''}
+const __sfc__ = (function() {${sfc.script}})()${((_a = renderObject.staticRenderFns) === null || _a === void 0 ? void 0 : _a.length)
         ? `
-comp.staticRenderFns = [${(_b = renderObject.staticRenderFns) === null || _b === void 0 ? void 0 : _b.map((fn) => {
+      __sfc__.staticRenderFns = [${(_b = renderObject.staticRenderFns) === null || _b === void 0 ? void 0 : _b.map((fn) => {
             return `function(){${fn}}`;
         }).join(',')}]`
         : ''}
-comp.render = function() {${renderObject.code}}
-${isVue3 ? `comp.render = comp.render()` : ''}
-return comp`;
+  __sfc__.render = function() {${renderObject.code}}
+${isVue3 ? `
+${sfc.scopeId ? `_pushScopeId("${sfc.scopeId}")` : ''}
+__sfc__.render = __sfc__.render()
+${sfc.scopeId ? `_popScopeId()` : ''}` : ''}
+return __sfc__`;
     delete sfc.template;
@@ -219,0 +225,0 @@ }

package.json

 {
   "name": "vue-inbrowser-compiler-utils",
-  "version": "4.64.1",
+  "version": "4.71.1",
   "description": "use this with vue-inbrowser-compiler to allow jsx compilation",
@@ -17,4 +17,4 @@ "module": "lib/vue-inbrowser-compiler-utils.esm.js",
     "camelcase": "^5.3.1",
-    "vue-inbrowser-compiler-demi": "^4.56.5",
-    "vue-inbrowser-compiler-independent-utils": "^4.64.1"
+    "vue-inbrowser-compiler-demi": "^4.71.1",
+    "vue-inbrowser-compiler-independent-utils": "^4.71.1"
   },
@@ -21,0 +21,0 @@ "devDependencies": {

src/compileTemplateForEval.test.vue3.ts

@@ -15,5 +15,5 @@ import { describe, test, expect } from 'vitest'
 			"
-			const Vue = require(\\"vue\\")
-			const comp = (function() {return { data: 1 }})()
-			comp.render = function() {const { resolveComponent: _resolveComponent, openBlock: _openBlock, createBlock: _createBlock } = Vue
+			const Vue = require(\\"vue\\");const {pushScopeId: _pushScopeId, popScopeId: _popScopeId} = Vue
+			const __sfc__ = (function() {return { data: 1 }})()
+			  __sfc__.render = function() {const { resolveComponent: _resolveComponent, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
@@ -25,6 +25,41 @@ return function render(_ctx, _cache, $props, $setup, $data, $options) {
 			}}
-			comp.render = comp.render()
-			return comp"
+
+
+			__sfc__.render = __sfc__.render()
+
+			return __sfc__"
 		`)
 	})
+
+	test('double header style should scope each block', () => {
+		const compiledComponent = {
+			template: '<div class="test">T</div><div class="test2">T2</div>',
+			script: 'return { data: 1 }',
+			style: '.test { color: red; } .test2 { color: blue; }',
+			setup: false,
+      scopeId: 'data-v-123456'
+		}
+		compileTemplateForEval(compiledComponent)
+		expect(compiledComponent.script).toMatchInlineSnapshot(`
+			"
+			const Vue = require(\\"vue\\");const {pushScopeId: _pushScopeId, popScopeId: _popScopeId} = Vue
+			const __sfc__ = (function() {return { data: 1 }})()
+			  __sfc__.render = function() {const { createElementVNode: _createElementVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+			const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", { class: \\"test\\" }, \\"T\\", -1 /* HOISTED */)
+			const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"div\\", { class: \\"test2\\" }, \\"T2\\", -1 /* HOISTED */)
+
+			return function render(_ctx, _cache, $props, $setup, $data, $options) {
+			  return (_openBlock(), _createElementBlock(_Fragment, null, [
+			    _hoisted_1,
+			    _hoisted_2
+			  ], 64 /* STABLE_FRAGMENT */))
+			}}
+
+			_pushScopeId(\\"data-v-123456\\")
+			__sfc__.render = __sfc__.render()
+			_popScopeId()
+			return __sfc__"
+		`)
+	})
 })
@@ -47,5 +82,5 @@
 			"
-			const Vue = require(\\"vue\\")
-			const comp = (function() {return { data: 1 }})()
-			comp.render = function() {const { openBlock: _openBlock, createBlock: _createBlock } = Vue
+			const Vue = require(\\"vue\\");const {pushScopeId: _pushScopeId, popScopeId: _popScopeId} = Vue
+			const __sfc__ = (function() {return { data: 1 }})()
+			  __sfc__.render = function() {const { openBlock: _openBlock, createBlock: _createBlock } = Vue
 
@@ -55,6 +90,50 @@ return function render(_ctx, _cache, $props, $setup, $data, $options) {
 			}}
-			comp.render = comp.render()
-			return comp"
+
+
+			__sfc__.render = __sfc__.render()
+
+			return __sfc__"
 		`)
 	})
+
+  test('double header style should scope each block', () => {
+		const compiledComponent = {
+			template: '<div class="test">T</div><div class="test2">T2</div>',
+			script: 'return { data: 1 }',
+			style: '.test { color: red; } .test2 { color: blue; }',
+			setup: true,
+      scopeId: 'data-v-123456'
+		}
+		compileTemplateForEvalSetup(compiledComponent, `<script setup>
+		import MyButton from './MyButton.vue'
+		</script>
+		<template>
+			<MyButton/>
+		</template>
+    <style scoped>
+    .test { color: red; } 
+    .test2 { color: blue; }
+    </style>`)
+		expect(compiledComponent.script).toMatchInlineSnapshot(`
+			"
+			const Vue = require(\\"vue\\");const {pushScopeId: _pushScopeId, popScopeId: _popScopeId} = Vue
+			const __sfc__ = (function() {return { data: 1 }})()
+			  __sfc__.render = function() {const { createElementVNode: _createElementVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+			const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", { class: \\"test\\" }, \\"T\\", -1 /* HOISTED */)
+			const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"div\\", { class: \\"test2\\" }, \\"T2\\", -1 /* HOISTED */)
+
+			return function render(_ctx, _cache, $props, $setup, $data, $options) {
+			  return (_openBlock(), _createElementBlock(_Fragment, null, [
+			    _hoisted_1,
+			    _hoisted_2
+			  ], 64 /* STABLE_FRAGMENT */))
+			}}
+
+			_pushScopeId(\\"data-v-123456\\")
+			__sfc__.render = __sfc__.render()
+			_popScopeId()
+			return __sfc__"
+		`)
+	})
 })

src/compileTemplateForEval.ts

@@ -25,6 +25,8 @@ import { compileScript, compileTemplate, isVue3, parseComponent } from 'vue-inbrowser-compiler-demi'
 			id: '-',
+      scoped: !!compiledComponent.scopeId,
 			compilerOptions: {
 				bindingMetadata: bindings,
 				prefixIdentifiers: true,
-				mode: 'function'
+				mode: 'function',
+        scopeId: compiledComponent.scopeId
 			}
@@ -50,3 +52,4 @@ })
 				prefixIdentifiers: true,
-				mode: 'function'
+				mode: 'function',
+        scopeId: compiledComponent.scopeId
 			}
@@ -60,7 +63,7 @@ })
 	sfc.script = `
-${isVue3 ? 'const Vue = require("vue")' : ''}
-const comp = (function() {${sfc.script}})()${
+${isVue3 ? 'const Vue = require("vue");const {pushScopeId: _pushScopeId, popScopeId: _popScopeId} = Vue' : ''}
+const __sfc__ = (function() {${sfc.script}})()${
 		renderObject.staticRenderFns?.length
 			? `
-comp.staticRenderFns = [${renderObject.staticRenderFns
+      __sfc__.staticRenderFns = [${renderObject.staticRenderFns
 					?.map((fn: string) => {
@@ -72,6 +75,9 @@ return `function(){${fn}}`
 	}
-comp.render = function() {${renderObject.code}}
-${isVue3 ? `comp.render = comp.render()` : ''}
-return comp`
+  __sfc__.render = function() {${renderObject.code}}
+${isVue3 ? `
+${sfc.scopeId ? `_pushScopeId("${sfc.scopeId}")` : ''}
+__sfc__.render = __sfc__.render()
+${sfc.scopeId ? `_popScopeId()`: ''}` : ''}
+return __sfc__`
 	delete sfc.template
 }

tsconfig.build.json

@@ -10,3 +10,3 @@ {
 	"include": ["src/**/*.ts", "../../@types/**/*"],
-	"exclude": ["node_modules", "src/**/*.spec.ts", "src/**/test.vue3.ts"]
+	"exclude": ["node_modules", "src/**/*.spec.ts", "src/**/*.test.vue3.ts"]
 }

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

57264

increased by8.61%

Lines of code

995

increased by8.86%

Worsened metrics

Number of package files

20

decreased by-9.09%

Dependency changes

• Updatedvue-inbrowser-compiler-demi@^4.71.1

• Updatedvue-inbrowser-compiler-independent-utils@^4.71.1