Socket
Socket
Sign inDemoInstall

vue-inbrowser-compiler-utils

Package Overview
Dependencies
Maintainers
3
Versions
51
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 4.46.0 to 4.50.0

lib/adaptCreateElement.d.ts
lib/addScopedStyle.d.ts
lib/cleanName.d.ts
lib/compileTemplateForEval.d.ts
lib/getDefaultExample.d.ts
lib/index.d.ts
lib/isCodeVueSfc.d.ts
lib/parseComponent.d.ts
lib/styleScoper.d.ts
lib/types.d.ts
src/compileTemplateForEval.ts

22

CHANGELOG.md
# Change Log
## 4.50.0
### Minor Changes
- [`6308307b`](https://github.com/vue-styleguidist/vue-styleguidist/commit/6308307bc91cc215090dd9e33a3faf0af26427dc) Thanks [@elevatebart](https://github.com/elevatebart)! - remove the need for using a template compiling alias of vue
### Patch Changes
- Updated dependencies [[`6308307b`](https://github.com/vue-styleguidist/vue-styleguidist/commit/6308307bc91cc215090dd9e33a3faf0af26427dc)]:
- vue-inbrowser-compiler-demi@4.50.0
## 4.47.0
### Minor Changes
- [#1366](https://github.com/vue-styleguidist/vue-styleguidist/pull/1366) [`bbc09354`](https://github.com/vue-styleguidist/vue-styleguidist/commit/bbc09354ee9d23a368a449260d923dc7c034650c) Thanks [@elevatebart](https://github.com/elevatebart)! - remove the need for using a template compiling alias of vue
### Patch Changes
- Updated dependencies [[`bbc09354`](https://github.com/vue-styleguidist/vue-styleguidist/commit/bbc09354ee9d23a368a449260d923dc7c034650c)]:
- vue-inbrowser-compiler-demi@4.46.0
## 4.46.0

@@ -4,0 +26,0 @@

210

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

@@ -15,3 +15,3 @@ 'use strict';

function scoper(css, suffix) {
var re = /([^\r\n,{}]+)(,(?=[^}]*{)|s*{)/g;
const re = /([^\r\n,{}]+)(,(?=[^}]*{)|s*{)/g;
// `after` is going to contain eithe a comma or an opening curly bracket

@@ -24,5 +24,5 @@ css = css.replace(re, function (full, selector, after) {

// don't scope the part of the selector after ::v-deep
var arrayDeep = /(.*)(::v-deep|>>>|\/deep\/)(.*)/g.exec(selector);
const arrayDeep = /(.*)(::v-deep|>>>|\/deep\/)(.*)/g.exec(selector);
if (arrayDeep) {
var beforeVDeep = arrayDeep[1], afterVDeep = arrayDeep[3];
const [, beforeVDeep, , afterVDeep] = arrayDeep;
selector = beforeVDeep;

@@ -40,3 +40,3 @@ after = (afterVDeep + after).trim();

}
selector = selector.split(/\s+/).filter(function (part) { return !!part; }).map(function (part) {
selector = selector.split(/\s+/).filter(part => !!part).map(part => {
// combinators

@@ -47,4 +47,4 @@ if (/^[>~+]$/.test(part)) {

// deal with other pseudo selectors
var _a = part.split(/:{1,2}/), main = _a[0], rest = _a.slice(1);
var pseudo = rest.map(function (piece) { return ":".concat(piece); }).join('');
const [main, ...rest] = part.split(/:{1,2}/);
let pseudo = rest.map(piece => `:${piece}`).join('');
return main + suffix + pseudo;

@@ -57,3 +57,3 @@ }).join(' ');

var noop = function () { };
const noop = () => { };
/**

@@ -71,7 +71,7 @@ * Adds a style block to the head to load the styles.

}
var head = document.head || document.getElementsByTagName('head')[0];
var newstyle = document.createElement('style');
const head = document.head || document.getElementsByTagName('head')[0];
const newstyle = document.createElement('style');
newstyle.dataset.cssscoper = 'true';
var csses = scoper(css, "[data-".concat(suffix, "]"));
var styleany = newstyle;
const csses = scoper(css, `[data-${suffix}]`);
const styleany = newstyle;
if (styleany.styleSheet) {

@@ -84,3 +84,3 @@ styleany.styleSheet.cssText = csses;

head.appendChild(newstyle);
return function () {
return () => {
head.removeChild(newstyle);

@@ -96,18 +96,13 @@ };

function adaptCreateElement(h) {
return function (comp, attr) {
var children = [];
for (var _i = 2; _i < arguments.length; _i++) {
children[_i - 2] = arguments[_i];
}
var resolvedComponent = vueInbrowserCompilerDemi.resolveComponent(comp);
return (comp, attr, ...children) => {
if (attr === undefined) {
return h(resolvedComponent);
return h(comp);
}
else if (!children.length) {
return h(resolvedComponent, groupAttr(attr));
return h(comp, groupAttr(attr));
}
return h(resolvedComponent, groupAttr(attr), children);
return h(comp, groupAttr(attr), children);
};
}
var rootAttributes = [
const rootAttributes = [
'staticClass',

@@ -123,4 +118,4 @@ 'class',

];
var prefixedRE = /^(on|nativeOn|props|domProps|hook|v)([A-Z][a-zA-Z]+)?$/;
var getRawName = function (name) {
const prefixedRE = /^(on|nativeOn|props|domProps|hook|v)([A-Z][a-zA-Z]+)?$/;
const getRawName = (name) => {
return name.replace(/^(on|native(On|-on)|props|dom(Props|-props)|hook|v)-?/, '');

@@ -133,3 +128,3 @@ };

*/
var makeArray = function (a) {
const makeArray = (a) => {
return Array.isArray(a) ? a : [a];

@@ -142,11 +137,5 @@ };

*/
var mergeFn = function (fn1, fn2) {
return function () {
var argzMain = [];
for (var _i = 0; _i < arguments.length; _i++) {
argzMain[_i] = arguments[_i];
}
fn1 && fn1.apply(this, argzMain);
fn2 && fn2.apply(this, argzMain);
};
const mergeFn = (fn1, fn2) => function (...argzMain) {
fn1 && fn1.apply(this, argzMain);
fn2 && fn2.apply(this, argzMain);
};

@@ -158,3 +147,3 @@ /**

*/
var merge = function (a, b) {
const merge = (a, b) => {
// initialization case

@@ -171,10 +160,6 @@ if (a === undefined) {

};
var concatenate = function (src) {
var otherObj = [];
for (var _i = 1; _i < arguments.length; _i++) {
otherObj[_i - 1] = arguments[_i];
}
const concatenate = (src, ...otherObj) => {
src = src || {};
otherObj.forEach(function (obj) {
Object.keys(obj).forEach(function (key) {
otherObj.forEach(obj => {
Object.keys(obj).forEach((key) => {
src[key] = merge(src[key], obj[key]);

@@ -185,9 +170,9 @@ });

};
var groupAttr = function (attrsIn) {
const groupAttr = (attrsIn) => {
if (vueInbrowserCompilerDemi.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:')
.filter(key => key.startsWith('vModel') || key.startsWith('v-model'))
.forEach(key => {
let valueRef = attrsIn[key];
const rootKey = key.startsWith('vModel:')
? key.slice(7)

@@ -198,3 +183,3 @@ : key.startsWith('v-model')

attrsIn[rootKey] = valueRef;
attrsIn["onUpdate:".concat(rootKey)] = function ($event) { return (valueRef = $event); };
attrsIn[`onUpdate:${rootKey}`] = ($event) => (valueRef = $event);
delete attrsIn[key];

@@ -207,6 +192,6 @@ });

}
var attrsOut = {};
Object.keys(attrsIn).forEach(function (name) {
var value = attrsIn[name];
var ccName = camelCase__default["default"](name);
const attrsOut = {};
Object.keys(attrsIn).forEach(name => {
const value = attrsIn[name];
const ccName = camelCase__default["default"](name);
if (rootAttributes.indexOf(ccName) > 0) {

@@ -219,7 +204,7 @@ attrsOut[ccName] = value;

else if (prefixedRE.test(ccName)) {
var foundName = prefixedRE.exec(ccName);
const foundName = prefixedRE.exec(ccName);
if (foundName) {
var prefix = foundName[1];
var rawName = getRawName(name);
var camelCasedName = rawName.length ? rawName[0].toLowerCase() + rawName.slice(1) : '';
const prefix = foundName[1];
const rawName = getRawName(name);
const camelCasedName = rawName.length ? rawName[0].toLowerCase() + rawName.slice(1) : '';
if (prefix === 'v') {

@@ -231,3 +216,3 @@ if (!attrsOut.directives) {

name: camelCasedName,
value: value
value
});

@@ -252,3 +237,3 @@ }

attrsOut.attrs = attrsOut.attrs || {};
var finalName = /^data-/.test(name) ? name : ccName === 'xlinkHref' ? 'xlink:href' : ccName;
const finalName = /^data-/.test(name) ? name : ccName === 'xlinkHref' ? 'xlink:href' : ccName;
attrsOut.attrs[finalName] = value;

@@ -261,22 +246,22 @@ }

// highest priority first
var PARTS = ['script', 'template'];
const PARTS = ['script', 'template'];
function parseComponent(code) {
// reinitialize regexp after each tour
var partsRE = PARTS.reduce(function (ret, part) {
ret[part] = new RegExp("<".concat(part, "[^>]*>((.|\\n|\\r)+)</").concat(part, ">"), 'g');
const partsRE = PARTS.reduce((ret, part) => {
ret[part] = new RegExp(`<${part}[^>]*>((.|\\n|\\r)+)</${part}>`, 'g');
return ret;
}, {});
var descriptor = {};
var codeCleaned = code;
const descriptor = {};
let codeCleaned = `${code}`;
// extract all parts
PARTS.forEach(function (part) {
var res = partsRE[part].exec(codeCleaned);
PARTS.forEach(part => {
const res = partsRE[part].exec(codeCleaned);
if (res) {
var partFound = res[0];
var linesBeforePart = code.split(partFound)[0];
var paddingLinesNumber = linesBeforePart.split('\n').length;
const partFound = res[0];
const linesBeforePart = code.split(partFound)[0];
const paddingLinesNumber = linesBeforePart.split('\n').length;
descriptor[part] = Array(paddingLinesNumber).join('\n') + res[1];
// once we have extracted one part,
// remove it from the analyzed blob
var linesOfPart = partFound.split('\n').length;
// remove it from the analyzed string
const linesOfPart = partFound.split('\n').length;
codeCleaned = codeCleaned.replace(partFound, Array(linesOfPart).join('\n'));

@@ -286,7 +271,7 @@ }

// we assume that
var styleRE = /<style[^>]*>((.|\n|\r)*?)<\/style>/g;
var styleAnalyzed = '';
var stylesWithWrapper = [];
var stylePart = styleRE.exec(codeCleaned);
var styles;
const styleRE = /<style[^>]*>((.|\n|\r)*?)<\/style>/g;
let styleAnalyzed = '';
const stylesWithWrapper = [];
let stylePart = styleRE.exec(codeCleaned);
let styles;
while (stylePart) {

@@ -297,6 +282,6 @@ styleAnalyzed += stylePart[1];

}
var styleWithWrapper = stylePart[0];
const styleWithWrapper = stylePart[0];
stylesWithWrapper.push(styleWithWrapper);
var linesBeforePart = code.split(styleWithWrapper)[0];
var paddingLinesNumber = linesBeforePart.split('\n').length;
const linesBeforePart = code.split(styleWithWrapper)[0];
const paddingLinesNumber = linesBeforePart.split('\n').length;
styles.push(Array(paddingLinesNumber).join('\n') + styleAnalyzed);

@@ -307,3 +292,3 @@ stylePart = styleRE.exec(codeCleaned);

descriptor.styles = styles;
var j = styles.length;
let j = styles.length;
while (j--) {

@@ -322,3 +307,3 @@ codeCleaned = codeCleaned.replace(stylesWithWrapper[j], '').trim();

function isCodeVueSfc(code) {
var parts = parseComponent(code);
const parts = parseComponent(code);
return !!parts.script || !!parts.template;

@@ -382,17 +367,47 @@ }

}
var getDefaultExample = (function (doc) {
var displayName = doc.displayName, props = doc.props, slots = doc.slots;
var cleanedName = cleanName(displayName);
var propsAttr = props
var getDefaultExample = (doc) => {
const { displayName, props, slots } = doc;
const cleanedName = cleanName(displayName);
const propsAttr = props
? props
.filter(function (p) { return p.required; })
.map(function (p) {
return " ".concat(!p || !p.type || p.type.name === 'string' ? '' : ':').concat(p.name, "=\"").concat(getDefault(p), "\"");
})
.filter(p => p.required)
.map(p => ` ${!p || !p.type || p.type.name === 'string' ? '' : ':'}${p.name}="${getDefault(p)}"`)
: [];
return "<".concat(cleanedName).concat(propsAttr.join(' ')).concat(!slots || !slots.filter(function (s) { return s.name === 'default'; })
return `<${cleanedName}${propsAttr.join(' ')}${!slots || !slots.filter(s => s.name === 'default')
? ' />'
: ">".concat(getDefaultText(), "</").concat(cleanedName, ">"));
});
: `>${getDefaultText()}</${cleanedName}>`}`;
};
const EXAMPLE_FILENAME = 'example.vue';
function compileTemplateForEval(compiledComponent) {
if (compiledComponent.template) {
const { bindings } = vueInbrowserCompilerDemi.compileScript({
cssVars: [],
script: {
type: 'script',
content: `export default (function () {${compiledComponent.script}})()`
},
scriptSetup: null
}, {
id: '-'
});
compiledComponent.script = `
${vueInbrowserCompilerDemi.isVue3 ? 'const Vue = require("vue")' : ''}
const comp = (function() {${compiledComponent.script}})()
comp.render = function() {${vueInbrowserCompilerDemi.compileTemplate({
source: compiledComponent.template,
filename: EXAMPLE_FILENAME,
id: '-',
compilerOptions: {
bindingMetadata: bindings,
prefixIdentifiers: true,
mode: 'function'
}
}).code}}
${vueInbrowserCompilerDemi.isVue3 ? `comp.render = comp.render()` : ``}
return comp`;
delete compiledComponent.template;
}
}
Object.defineProperty(exports, 'Vue2', {

@@ -402,2 +417,10 @@ enumerable: true,

});
Object.defineProperty(exports, 'compileScript', {
enumerable: true,
get: function () { return vueInbrowserCompilerDemi.compileScript; }
});
Object.defineProperty(exports, 'compileTemplate', {
enumerable: true,
get: function () { return vueInbrowserCompilerDemi.compileTemplate; }
});
Object.defineProperty(exports, 'createApp', {

@@ -415,9 +438,6 @@ enumerable: true,

});
Object.defineProperty(exports, 'resolveComponent', {
enumerable: true,
get: function () { return vueInbrowserCompilerDemi.resolveComponent; }
});
exports.adaptCreateElement = adaptCreateElement;
exports.addScopedStyle = addScopedStyle;
exports.cleanName = cleanName;
exports.compileTemplateForEval = compileTemplateForEval;
exports.concatenate = concatenate;

@@ -424,0 +444,0 @@ exports.getDefaultExample = getDefaultExample;

203

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

@@ -1,3 +0,3 @@

import { resolveComponent, isVue3 } from 'vue-inbrowser-compiler-demi';
export { Vue2, createApp, h, isVue3, resolveComponent } from 'vue-inbrowser-compiler-demi';
import { isVue3, compileScript, compileTemplate } from 'vue-inbrowser-compiler-demi';
export { Vue2, compileScript, compileTemplate, createApp, h, isVue3 } from 'vue-inbrowser-compiler-demi';
import camelCase from 'camelcase';

@@ -8,3 +8,3 @@

function scoper(css, suffix) {
var re = /([^\r\n,{}]+)(,(?=[^}]*{)|s*{)/g;
const re = /([^\r\n,{}]+)(,(?=[^}]*{)|s*{)/g;
// `after` is going to contain eithe a comma or an opening curly bracket

@@ -17,5 +17,5 @@ css = css.replace(re, function (full, selector, after) {

// don't scope the part of the selector after ::v-deep
var arrayDeep = /(.*)(::v-deep|>>>|\/deep\/)(.*)/g.exec(selector);
const arrayDeep = /(.*)(::v-deep|>>>|\/deep\/)(.*)/g.exec(selector);
if (arrayDeep) {
var beforeVDeep = arrayDeep[1], afterVDeep = arrayDeep[3];
const [, beforeVDeep, , afterVDeep] = arrayDeep;
selector = beforeVDeep;

@@ -33,3 +33,3 @@ after = (afterVDeep + after).trim();

}
selector = selector.split(/\s+/).filter(function (part) { return !!part; }).map(function (part) {
selector = selector.split(/\s+/).filter(part => !!part).map(part => {
// combinators

@@ -40,4 +40,4 @@ if (/^[>~+]$/.test(part)) {

// deal with other pseudo selectors
var _a = part.split(/:{1,2}/), main = _a[0], rest = _a.slice(1);
var pseudo = rest.map(function (piece) { return ":".concat(piece); }).join('');
const [main, ...rest] = part.split(/:{1,2}/);
let pseudo = rest.map(piece => `:${piece}`).join('');
return main + suffix + pseudo;

@@ -50,3 +50,3 @@ }).join(' ');

var noop = function () { };
const noop = () => { };
/**

@@ -64,7 +64,7 @@ * Adds a style block to the head to load the styles.

}
var head = document.head || document.getElementsByTagName('head')[0];
var newstyle = document.createElement('style');
const head = document.head || document.getElementsByTagName('head')[0];
const newstyle = document.createElement('style');
newstyle.dataset.cssscoper = 'true';
var csses = scoper(css, "[data-".concat(suffix, "]"));
var styleany = newstyle;
const csses = scoper(css, `[data-${suffix}]`);
const styleany = newstyle;
if (styleany.styleSheet) {

@@ -77,3 +77,3 @@ styleany.styleSheet.cssText = csses;

head.appendChild(newstyle);
return function () {
return () => {
head.removeChild(newstyle);

@@ -89,18 +89,13 @@ };

function adaptCreateElement(h) {
return function (comp, attr) {
var children = [];
for (var _i = 2; _i < arguments.length; _i++) {
children[_i - 2] = arguments[_i];
}
var resolvedComponent = resolveComponent(comp);
return (comp, attr, ...children) => {
if (attr === undefined) {
return h(resolvedComponent);
return h(comp);
}
else if (!children.length) {
return h(resolvedComponent, groupAttr(attr));
return h(comp, groupAttr(attr));
}
return h(resolvedComponent, groupAttr(attr), children);
return h(comp, groupAttr(attr), children);
};
}
var rootAttributes = [
const rootAttributes = [
'staticClass',

@@ -116,4 +111,4 @@ 'class',

];
var prefixedRE = /^(on|nativeOn|props|domProps|hook|v)([A-Z][a-zA-Z]+)?$/;
var getRawName = function (name) {
const prefixedRE = /^(on|nativeOn|props|domProps|hook|v)([A-Z][a-zA-Z]+)?$/;
const getRawName = (name) => {
return name.replace(/^(on|native(On|-on)|props|dom(Props|-props)|hook|v)-?/, '');

@@ -126,3 +121,3 @@ };

*/
var makeArray = function (a) {
const makeArray = (a) => {
return Array.isArray(a) ? a : [a];

@@ -135,11 +130,5 @@ };

*/
var mergeFn = function (fn1, fn2) {
return function () {
var argzMain = [];
for (var _i = 0; _i < arguments.length; _i++) {
argzMain[_i] = arguments[_i];
}
fn1 && fn1.apply(this, argzMain);
fn2 && fn2.apply(this, argzMain);
};
const mergeFn = (fn1, fn2) => function (...argzMain) {
fn1 && fn1.apply(this, argzMain);
fn2 && fn2.apply(this, argzMain);
};

@@ -151,3 +140,3 @@ /**

*/
var merge = function (a, b) {
const merge = (a, b) => {
// initialization case

@@ -164,10 +153,6 @@ if (a === undefined) {

};
var concatenate = function (src) {
var otherObj = [];
for (var _i = 1; _i < arguments.length; _i++) {
otherObj[_i - 1] = arguments[_i];
}
const concatenate = (src, ...otherObj) => {
src = src || {};
otherObj.forEach(function (obj) {
Object.keys(obj).forEach(function (key) {
otherObj.forEach(obj => {
Object.keys(obj).forEach((key) => {
src[key] = merge(src[key], obj[key]);

@@ -178,9 +163,9 @@ });

};
var groupAttr = function (attrsIn) {
const groupAttr = (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:')
.filter(key => key.startsWith('vModel') || key.startsWith('v-model'))
.forEach(key => {
let valueRef = attrsIn[key];
const rootKey = key.startsWith('vModel:')
? key.slice(7)

@@ -191,3 +176,3 @@ : key.startsWith('v-model')

attrsIn[rootKey] = valueRef;
attrsIn["onUpdate:".concat(rootKey)] = function ($event) { return (valueRef = $event); };
attrsIn[`onUpdate:${rootKey}`] = ($event) => (valueRef = $event);
delete attrsIn[key];

@@ -200,6 +185,6 @@ });

}
var attrsOut = {};
Object.keys(attrsIn).forEach(function (name) {
var value = attrsIn[name];
var ccName = camelCase(name);
const attrsOut = {};
Object.keys(attrsIn).forEach(name => {
const value = attrsIn[name];
const ccName = camelCase(name);
if (rootAttributes.indexOf(ccName) > 0) {

@@ -212,7 +197,7 @@ attrsOut[ccName] = value;

else if (prefixedRE.test(ccName)) {
var foundName = prefixedRE.exec(ccName);
const foundName = prefixedRE.exec(ccName);
if (foundName) {
var prefix = foundName[1];
var rawName = getRawName(name);
var camelCasedName = rawName.length ? rawName[0].toLowerCase() + rawName.slice(1) : '';
const prefix = foundName[1];
const rawName = getRawName(name);
const camelCasedName = rawName.length ? rawName[0].toLowerCase() + rawName.slice(1) : '';
if (prefix === 'v') {

@@ -224,3 +209,3 @@ if (!attrsOut.directives) {

name: camelCasedName,
value: value
value
});

@@ -245,3 +230,3 @@ }

attrsOut.attrs = attrsOut.attrs || {};
var finalName = /^data-/.test(name) ? name : ccName === 'xlinkHref' ? 'xlink:href' : ccName;
const finalName = /^data-/.test(name) ? name : ccName === 'xlinkHref' ? 'xlink:href' : ccName;
attrsOut.attrs[finalName] = value;

@@ -254,22 +239,22 @@ }

// highest priority first
var PARTS = ['script', 'template'];
const PARTS = ['script', 'template'];
function parseComponent(code) {
// reinitialize regexp after each tour
var partsRE = PARTS.reduce(function (ret, part) {
ret[part] = new RegExp("<".concat(part, "[^>]*>((.|\\n|\\r)+)</").concat(part, ">"), 'g');
const partsRE = PARTS.reduce((ret, part) => {
ret[part] = new RegExp(`<${part}[^>]*>((.|\\n|\\r)+)</${part}>`, 'g');
return ret;
}, {});
var descriptor = {};
var codeCleaned = code;
const descriptor = {};
let codeCleaned = `${code}`;
// extract all parts
PARTS.forEach(function (part) {
var res = partsRE[part].exec(codeCleaned);
PARTS.forEach(part => {
const res = partsRE[part].exec(codeCleaned);
if (res) {
var partFound = res[0];
var linesBeforePart = code.split(partFound)[0];
var paddingLinesNumber = linesBeforePart.split('\n').length;
const partFound = res[0];
const linesBeforePart = code.split(partFound)[0];
const paddingLinesNumber = linesBeforePart.split('\n').length;
descriptor[part] = Array(paddingLinesNumber).join('\n') + res[1];
// once we have extracted one part,
// remove it from the analyzed blob
var linesOfPart = partFound.split('\n').length;
// remove it from the analyzed string
const linesOfPart = partFound.split('\n').length;
codeCleaned = codeCleaned.replace(partFound, Array(linesOfPart).join('\n'));

@@ -279,7 +264,7 @@ }

// we assume that
var styleRE = /<style[^>]*>((.|\n|\r)*?)<\/style>/g;
var styleAnalyzed = '';
var stylesWithWrapper = [];
var stylePart = styleRE.exec(codeCleaned);
var styles;
const styleRE = /<style[^>]*>((.|\n|\r)*?)<\/style>/g;
let styleAnalyzed = '';
const stylesWithWrapper = [];
let stylePart = styleRE.exec(codeCleaned);
let styles;
while (stylePart) {

@@ -290,6 +275,6 @@ styleAnalyzed += stylePart[1];

}
var styleWithWrapper = stylePart[0];
const styleWithWrapper = stylePart[0];
stylesWithWrapper.push(styleWithWrapper);
var linesBeforePart = code.split(styleWithWrapper)[0];
var paddingLinesNumber = linesBeforePart.split('\n').length;
const linesBeforePart = code.split(styleWithWrapper)[0];
const paddingLinesNumber = linesBeforePart.split('\n').length;
styles.push(Array(paddingLinesNumber).join('\n') + styleAnalyzed);

@@ -300,3 +285,3 @@ stylePart = styleRE.exec(codeCleaned);

descriptor.styles = styles;
var j = styles.length;
let j = styles.length;
while (j--) {

@@ -315,3 +300,3 @@ codeCleaned = codeCleaned.replace(stylesWithWrapper[j], '').trim();

function isCodeVueSfc(code) {
var parts = parseComponent(code);
const parts = parseComponent(code);
return !!parts.script || !!parts.template;

@@ -375,17 +360,47 @@ }

}
var getDefaultExample = (function (doc) {
var displayName = doc.displayName, props = doc.props, slots = doc.slots;
var cleanedName = cleanName(displayName);
var propsAttr = props
var getDefaultExample = (doc) => {
const { displayName, props, slots } = doc;
const cleanedName = cleanName(displayName);
const propsAttr = props
? props
.filter(function (p) { return p.required; })
.map(function (p) {
return " ".concat(!p || !p.type || p.type.name === 'string' ? '' : ':').concat(p.name, "=\"").concat(getDefault(p), "\"");
})
.filter(p => p.required)
.map(p => ` ${!p || !p.type || p.type.name === 'string' ? '' : ':'}${p.name}="${getDefault(p)}"`)
: [];
return "<".concat(cleanedName).concat(propsAttr.join(' ')).concat(!slots || !slots.filter(function (s) { return s.name === 'default'; })
return `<${cleanedName}${propsAttr.join(' ')}${!slots || !slots.filter(s => s.name === 'default')
? ' />'
: ">".concat(getDefaultText(), "</").concat(cleanedName, ">"));
});
: `>${getDefaultText()}</${cleanedName}>`}`;
};
export { adaptCreateElement, addScopedStyle, cleanName, concatenate, getDefaultExample, isCodeVueSfc, parseComponent };
const EXAMPLE_FILENAME = 'example.vue';
function compileTemplateForEval(compiledComponent) {
if (compiledComponent.template) {
const { bindings } = compileScript({
cssVars: [],
script: {
type: 'script',
content: `export default (function () {${compiledComponent.script}})()`
},
scriptSetup: null
}, {
id: '-'
});
compiledComponent.script = `
${isVue3 ? 'const Vue = require("vue")' : ''}
const comp = (function() {${compiledComponent.script}})()
comp.render = function() {${compileTemplate({
source: compiledComponent.template,
filename: EXAMPLE_FILENAME,
id: '-',
compilerOptions: {
bindingMetadata: bindings,
prefixIdentifiers: true,
mode: 'function'
}
}).code}}
${isVue3 ? `comp.render = comp.render()` : ``}
return comp`;
delete compiledComponent.template;
}
}
export { adaptCreateElement, addScopedStyle, cleanName, compileTemplateForEval, concatenate, getDefaultExample, isCodeVueSfc, parseComponent };

16

package.json
{
"name": "vue-inbrowser-compiler-utils",
"version": "4.46.0",
"version": "4.50.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",
"types": "lib/index.d.ts",
"keywords": [

@@ -17,3 +17,3 @@ "vue",

"camelcase": "^5.3.1",
"vue-inbrowser-compiler-demi": "^4.45.0"
"vue-inbrowser-compiler-demi": "^4.50.0"
},

@@ -23,6 +23,10 @@ "devDependencies": {

"@rollup/plugin-node-resolve": "9.0.0",
"@rollup/plugin-typescript": "8.3.0",
"@rollup/plugin-typescript": "8.3.4",
"@types/dedent": "^0.7.0",
"@types/domhandler": "2.4.2",
"rollup": "2.66.1",
"vue": "2.6.14"
"dedent": "^0.7.0",
"tslib": "2.4.0",
"typescript": "4.7.4",
"rollup": "2.77.2",
"vue": "2.7.8"
},

@@ -29,0 +33,0 @@ "peerDependencies": {

9

src/adaptCreateElement.ts
import camelCase from 'camelcase'
import { isVue3, resolveComponent } from 'vue-inbrowser-compiler-demi'
import { isVue3 } from 'vue-inbrowser-compiler-demi'

@@ -17,9 +17,8 @@ export type CreateElementFunction = (

return (comp, attr, ...children: any[]) => {
const resolvedComponent = resolveComponent(comp)
if (attr === undefined) {
return h(resolvedComponent)
return h(comp)
} else if (!children.length) {
return h(resolvedComponent, groupAttr(attr))
return h(comp, groupAttr(attr))
}
return h(resolvedComponent, groupAttr(attr), children)
return h(comp, groupAttr(attr), children)
}

@@ -26,0 +25,0 @@ }

10

src/index.ts

@@ -1,2 +0,9 @@

export { h, resolveComponent, isVue3, createApp, Vue2 } from 'vue-inbrowser-compiler-demi'
export {
Vue2,
isVue3,
compileScript,
createApp,
h,
compileTemplate
} from 'vue-inbrowser-compiler-demi'
export { default as addScopedStyle } from './addScopedStyle'

@@ -9,1 +16,2 @@ export { default as adaptCreateElement, concatenate } from './adaptCreateElement'

export * from './types'
export * from './compileTemplateForEval'

26

src/parseComponent.spec.ts

@@ -0,1 +1,2 @@

import dedent from 'dedent'
import parseComponent from './parseComponent'

@@ -5,18 +6,17 @@

it('should detect templates', () => {
const comp = parseComponent(`
const comp = parseComponent(dedent`
<template>
<template>
<div>hello</div>
</template>
hello world
<template>
<div>hello</div>
</template>
hello world
</template>`)
expect(comp.template).toMatchInlineSnapshot(`
"
<template>
<div>hello</div>
</template>
hello world
"
`)
"
<template>
<div>hello</div>
</template>
hello world
"
`)
})

@@ -23,0 +23,0 @@

4

src/parseComponent.ts

@@ -25,3 +25,3 @@ interface VsgSFCDescriptorSimple {

let codeCleaned = code
let codeCleaned = `${code}`

@@ -39,3 +39,3 @@ // extract all parts

// once we have extracted one part,
// remove it from the analyzed blob
// remove it from the analyzed string
const linesOfPart = partFound.split('\n').length

@@ -42,0 +42,0 @@ codeCleaned = codeCleaned.replace(partFound, Array(linesOfPart).join('\n'))

9

src/types.ts

@@ -8,2 +8,8 @@ export type BlockTag = ParamTag | Tag

export interface EvaluableComponent {
script: string
template?: string
style?: string
}
/**

@@ -103,5 +109,6 @@ * Universal model to display origin

events?: EventDescriptor[]
tags?: { [key: string]: BlockTag[] }
expose?: ExposedDescriptor[]
tags: { [key: string]: BlockTag[] }
docsBlocks?: string[]
[key: string]: any
}
lib/types/adaptCreateElement.d.ts
lib/types/addScopedStyle.d.ts
lib/types/cleanName.d.ts
lib/types/getDefaultExample.d.ts
lib/types/index.d.ts
lib/types/isCodeVueSfc.d.ts
lib/types/parseComponent.d.ts
lib/types/styleScoper.d.ts
lib/types/types.d.ts
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc