How to use the vue-inbrowser-compiler.compile function in vue-inbrowser-compiler

To help you get started, we’ve selected a few vue-inbrowser-compiler 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-live / src / Preview.vue View on Github external
renderComponent(code) {
      let data = {};
      let style;
      try {
        const renderedComponent = compile(
          code,
          this.jsx
            ? { jsx: "__pragma__(h)", objectAssign: "__concatenate__" }
            : {}
        );
        style = renderedComponent.style;
        if (renderedComponent.script) {
          // if the compiled code contains a script it might be "just" a script
          // if so, change scheme used by editor
          this.$emit("detect-language", isCodeVueSfc(code) ? "vue" : "js");

          // compile and execute the script
          // it can be:
          // - a script setting up variables => we set up the data property of renderedComponent
          // - a `new Vue()` script that will return a full config object
          const script = renderedComponent.script;
github vue-styleguidist / vue-styleguidist / packages / vue-styleguidist / src / client / rsg-components / Preview / Preview.js View on Github external
executeCode() {
		this.setState({
			error: null
		})

		const { code, vuex, component, renderRootJsx } = this.props
		if (!code) {
			return
		}

		let style
		let previewComponent = {}

		try {
			const example = compile(code, {
				...this.context.config.compilerConfig,
				...(this.context.config.jsxInExamples
					? { jsx: '__pragma__(h)', objectAssign: 'concatenate' }
					: {})
			})
			style = example.style
			if (example.script) {
				// compile and execute the script
				// it can be:
				// - a script setting up variables => we set up the data function of previewComponent
				// - a `new Vue()` script that will return a full config object
				previewComponent = this.props.evalInContext(example.script)() || {}
			}
			if (example.template) {
				// if this is a pure template or if we are in hybrid vsg mode,
				// we need to set the template up.
github vue-styleguidist / vue-styleguidist / packages / vue-styleguidist / src / loaders / examples-loader.ts View on Github external
[
							b.identifier('null'),
							b.callExpression(
								b.memberExpression(b.identifier('requireInRuntime'), b.identifier('bind')),
								[b.identifier('null'), importPath ? b.literal(importPath) : b.identifier('null')]
							)
						]
					)
			}
			if (config.codeSplit) {
				if (process.env.NODE_ENV !== 'production') {
					// if we are not in prod, we want to avoid running examples through
					// buble all at the same time. We then tell it to calsculate on the fly
					example.compiled = false
				} else {
					const compiledExample = compile(example.content, {
						...config.compilerConfig,
						...(config.jsxInExamples ? { jsx: '__pragma__(h)', objectAssign: 'concatenate' } : {})
					})
					example.compiled = {
						script: compiledExample.script,
						template: compiledExample.template,
						style: compiledExample.style
					}
				}
			}
		}
		return example
	})

vue-inbrowser-compiler

compile vue single file components right in your browser

MIT
Latest version published 1 year ago

Package Health Score

79 / 100
Full package analysis