vue-inbrowser-compiler-independent-utils

import { compile, isCodeVueSfc } from 'vue-inbrowser-compiler-independent-utils'; // Example Vue component code as a string const vueComponentCode = ` <template> <div class="message"> <h1>{{ msg }}</h1> <button @click="increment">Count: {{ count }}</button> </div> </template> <script lang="ts"> export default { name: 'MyComponent', data() { return { msg: 'Hello from Independent Utils!', count: 0 }; }, methods: { increment() { this.count++; } } }; </script> <style scoped> .message { color: #42b983; font-family: Arial, sans-serif; border: 1px solid #ddd; padding: 20px; border-radius: 8px; text-align: center; } h1 { margin-bottom: 15px; } button { background-color: #3498db; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; } button:hover { background-color: #2980b9; } </style> `; // Check if it's an SFC const isSFC = isCodeVueSfc(vueComponentCode); console.log(`Is the code a Vue SFC? ${isSFC}`); if (isSFC) { // Compile the Vue component code (this will typically return script and style strings) // Note: The 'compile' function in this context usually prepares the code for a runtime Vue environment, // often returning a function body or object that Vue can then instantiate. try { const compiledResult = compile(vueComponentCode, {}); // Pass an empty config or specific BubleConfig if needed console.log('Compiled Script:\n', compiledResult.script.substring(0, 200) + '...'); console.log('Compiled Style:\n', compiledResult.style.substring(0, 100) + '...'); // In a real browser environment with Vue loaded, you would then execute 'compiledResult.script' // and dynamically mount the component. // const componentOptions = new Function(compiledResult.script)(); // new Vue({ el: '#app', render: h => h(componentOptions) }); console.log('Code successfully processed by independent utilities.'); } catch (error) { console.error('Error during compilation:', error); } } else { console.log('The provided code is not a valid Vue Single File Component.'); }