Vue In-Browser Compiler

Common errors

• TypeError: h is not a function

  cause This error typically occurs when attempting to compile or render JSX without correctly configuring the JSX pragma or providing the Vue-specific `h` (createElement) function.
  fix Ensure that your `compile` call's Buble configuration includes `{ jsx: '__pragma__(h)' }` and that the `new Function()` call for the compiled script is invoked with `func(adaptCreateElement)`.

• Vue template compilation error: Property or method "myVariable" is not defined on the instance but referenced during render.

  cause When using pseudo-JSX (HTML-like syntax at the top level of the code string), variables declared outside the template are not automatically injected into the component's `data` option.
  fix Manually move variables intended for reactive use within the component's template into the `data` property of the returned component object. For more complex scenarios, consider using the `new Vue({...})` or full Single File Component syntax.

• Uncaught SyntaxError: Unexpected token '<' (at line X, column Y)

  cause This error arises when you try to execute a raw Vue template string or an uncompiled Single File Component string directly via `new Function()`. JavaScript's `new Function()` expects valid JavaScript code, not HTML-like templates.
  fix Always pass your raw Vue component code through the `compile(code, config)` function first. The `compile` function will return an object containing `script` and `style` strings, where `script` is the valid JavaScript string ready for `new Function()`.

Warnings

• gotcha The package uses Buble for JavaScript transpilation, not Babel. Buble's configuration (`BubleConfig`) is less feature-rich than Babel's and may not support the very latest ECMAScript proposals. Users familiar with Babel should note this distinction.
  Fix: Refer to the Buble documentation for supported features and configuration options when compiling JavaScript within Vue components. Avoid using advanced experimental Babel features.
• breaking Earlier versions of `vue-inbrowser-compiler` (prior to 4.72.4) had compatibility issues with Vue 3.3.2 and potentially newer Vue 3 features, especially regarding `defineEmits` syntax. This could lead to parsing errors or incorrect component behavior.
  Fix: Upgrade to `vue-inbrowser-compiler@4.72.4` or newer to ensure full compatibility with Vue 3.3.2 and its associated features. Always keep `vue` and `vue-inbrowser-compiler` versions aligned.
• gotcha When using JSX syntax within the compiler, explicit configuration is required. The `jsx` option in `BubleConfig` must be set, and the `adaptCreateElement` helper must be passed to the compiled function.
  Fix: Configure Buble with `{ jsx: '__pragma__(h)' }` and then call the compiled function with `func(adaptCreateElement)` to correctly handle JSX rendering, as shown in the package's documentation.
• gotcha Styles within a compiled Single File Component (SFC) that use the `scoped` attribute are transformed during compilation. However, if you add raw CSS or need custom scoping, you might need to use `addScopedStyle` manually to inject them into the DOM.
  Fix: For SFCs, the `compiled.style` output should contain the correctly scoped CSS. If injecting additional styles or working with non-SFC CSS, explicitly call `addScopedStyle(cssString, uniqueSuffix)` to ensure proper encapsulation and application.

Install

• npm install vue-inbrowser-compiler npm
• yarn add vue-inbrowser-compiler yarn
• pnpm add vue-inbrowser-compiler pnpm

Imports

• compile
  wrong:

  const { compile } = require('vue-inbrowser-compiler')

  correct:

  import { compile } from 'vue-inbrowser-compiler'

  ES Modules are the standard. CommonJS `require` is generally not recommended for browser-based Vue applications or modern Node.js environments.
• isCodeVueSfc
  wrong:

  const isCodeVueSfc = require('vue-inbrowser-compiler').isCodeVueSfc

  correct:

  import { isCodeVueSfc } from 'vue-inbrowser-compiler'

  This utility function detects if a given string represents a Vue Single File Component by checking for `<template>` or `<script>` tags.
• adaptCreateElement
  wrong:

  import adaptCreateElement from 'vue-inbrowser-compiler/adaptCreateElement'

  correct:

  import { adaptCreateElement } from 'vue-inbrowser-compiler'

  Crucial for configuring JSX compilation, it provides the Vue-specific `h` function required by the JSX pragma. It's a named export.
• addScopedStyle
  wrong:

  const { addScopedStyle } = require('vue-inbrowser-compiler')

  correct:

  import { addScopedStyle } from 'vue-inbrowser-compiler'

  Used to manually inject and scope CSS styles compiled from Vue SFCs into the DOM. Often used post-compilation.

Quickstart

Demonstrates how to compile a Vue Single File Component (SFC) string dynamically in the browser, inject its styles, and mount it using Vue 3's `createApp`.

import { compile, addScopedStyle } from 'vue-inbrowser-compiler';
import { createApp } from 'vue'; // Assuming Vue 3 for a modern example

const sfcCode = `
<template>
  <div class="hello" :style="{ color: dynamicColor }">
    <h1>Compiled Vue Component</h1>
    <button @click="changeColor">{{ msg }}</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: 'Click Me!',
        dynamicColor: '#900'
      }
    },
    methods: {
      changeColor() {
        this.dynamicColor = this.dynamicColor === '#900' ? '#009' : '#900';
      }
    }
  }
</script>

<style scoped>
  .hello {
    text-align: center;
    font-family: sans-serif;
  }
  button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
    margin-top: 15px;
  }
</style>
`;

function getRunnableComponent(code) {
  const compiled = compile(code, {
    target: { ie: 11 } // Buble configuration for transpilation
  });

  // Add compiled styles to the document with a unique scope
  // The 'scoped' attribute in the SFC is handled by vue-inbrowser-compiler itself.
  // addScopedStyle is for when you manually scope or have global styles to add.
  // For SFCs, compiled.style already contains scoped styles.
  const styleTag = document.createElement('style');
  styleTag.textContent = compiled.style;
  document.head.appendChild(styleTag);

  // Execute the script and return the component definition
  const func = new Function(compiled.script);
  return func();
}

// Mount the compiled component
const appDiv = document.createElement('div');
appDiv.id = 'app';
document.body.appendChild(appDiv);

const componentDefinition = getRunnableComponent(sfcCode);
const app = createApp(componentDefinition);
app.mount('#app');

console.log('Vue component compiled and mounted to #app');