How to use vue-inbrowser-compiler-utils - 4 common examples

To help you get started, we’ve selected a few vue-inbrowser-compiler-utils examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github vue-styleguidist / vue-styleguidist / packages / vue-styleguidist / src / loaders / examples-loader.ts View on Github external
const getScript = (code: string): string => {
		// if in JSX mode just parse code as is
		if (config.jsxInExamples) {
			return code
		}

		// script is at the beginning of a line after a return
		// In case we are loading a vue component as an example, extract script tag
		if (isCodeVueSfc(code)) {
			const parts = parseComponent(code)
			return parts && parts.script ? parts.script.content : ''
		}
		//else it could be the weird almost jsx of vue-styleguidist
		return code.split(/\n[\t ]*
github vue-styleguidist / vue-styleguidist / packages / vue-inbrowser-compiler / src / compileVueCodeForEvalFunction.ts View on Github external
function prepareVueCodeForEvalFunction(code: string, config: any): EvaluableComponent {
	let style,
		vsgMode = false,
		template

	// if the component is written as a Vue sfc,
	// transform it in to a "return"
	// even if jsx is used in an sfc we still use this use case
	if (isCodeVueSfc(code)) {
		return normalizeSfcComponent(code)
	}

	// if it's not a new Vue, it must be a simple template or a vsg format
	// lets separate the template from the script
	if (!/new Vue\(/.test(code)) {
		// this for jsx examples without the SFC shell
		// export default {render: (h) =&gt; <button>}
		if (config.jsx) {
			const { preprocessing, component, postprocessing } = parseScriptCode(code)
			return {
				script: `${preprocessing};\nreturn {${component}};\n${postprocessing}`
			}
		}

		const findStartTemplateMatch = /^\W*</button>
github vue-styleguidist / vue-styleguidist / packages / vue-styleguidist / src / client / rsg-components / Preview / Preview.js View on Github external
const rootComponent = renderRootJsx
			? renderRootJsx.default(previewComponent)
			: { render: createElement => createElement(previewComponent) }
		try {
			new Vue({
				...extendsComponent,
				...rootComponent,
				el
			})
		} catch (err) {
			this.handleError(err)
		}

		// Add the scoped style if there is any
		if (style) {
			addScopedStyle(style, moduleId)
		}
	}
github vue-styleguidist / vue-styleguidist / packages / vue-styleguidist / src / client / rsg-components / Preview / PreviewAsync.js View on Github external
const rootComponent = renderRootJsx
			? renderRootJsx.default(previewComponent)
			: { render: createElement => createElement(previewComponent) }
		try {
			new Vue({
				...extendsComponent,
				...rootComponent,
				el
			})
		} catch (err) {
			this.handleError(err)
		}

		// Add the scoped style if there is any
		if (style) {
			addScopedStyle(style, moduleId)
		}
	}

vue-inbrowser-compiler-utils

use this with vue-inbrowser-compiler to allow jsx compilation

MIT
Latest version published 11 months ago

Package Health Score

88 / 100
Full package analysis