vuetty 0.1.0 → 0.1.2

package/README.md

@@ -16,76 +16,47 @@ For detailed documentation, component references, and advanced usage, visit the
 - **Advanced Input Management**: Built-in keyboard and mouse input handling with focus management and interactive form components.
 - **Optimized Performance**: Efficient rendering with smart caching for text, images, and markdown content.
 
-## Installation
+## Demo
 
-```bash
-bun add vuetty vue
-```
+![Vuetty demo](docs/public/images/demo.gif)
 
 ## Quick Start
 
-Create a simple Vue component:
+Use the repository's `simple-app-example` to get a working app with routing and layout in place.
 
-```vue
-<!-- Hello.vue -->
-<template>
-  <Box :padding="1" color="cyan">
-    <TextBox bold>Hello, World!</TextBox>
-  </Box>
-</template>
+1) Clone and copy the example
 
-<script setup>
-import { Box, TextBox } from 'vuetty';
-</script>
+```bash
+git clone https://github.com/tterrasson/vuetty
+cd vuetty
+cp -a simple-app-example my-vuetty-app
+cd my-vuetty-app
 ```
 
-Run it with Bun:
+2) Install dependencies
 
-```js
-// app.js
-import 'vuetty/loader';
-import { vuetty } from 'vuetty';
-import Hello from './Hello.vue';
+```bash
+bun install
+```
 
-const app = vuetty(Hello);
+3) Run the example
 
-process.on('SIGINT', () => {
-  app.unmount();
-  process.exit(0);
-});
+```bash
+bun run dev
 ```
 
+Press `Ctrl+C` to stop it.
+
+## Running examples
+
+From the repo root, list and run component examples:
+
 ```bash
-bun app.js
+bun run dev --list
+bun run dev box
 ```
 
-## Reactive Counter Example
-
-```vue
-<template>
-  <Col>
-    <Box :padding="1" color="cyan">
-      <TextBox bold>Counter: {{ count }}</TextBox>
-    </Box>
-    <Box :padding="1" :color="countColor">
-      <TextBox>{{ message }}</TextBox>
-    </Box>
-  </Col>
-</template>
-
-<script setup>
-import { ref, computed, onMounted } from 'vue';
-import { Box, TextBox, Col } from 'vuetty';
-
-const count = ref(0);
-const countColor = computed(() => count.value > 10 ? 'red' : 'green');
-const message = computed(() => count.value < 5 ? 'Just started...' : 'Getting high!');
-
-onMounted(() => {
-  setInterval(() => count.value++, 1000);
-});
-</script>
-```
+The available IDs are defined in `examples/examples.js`.
 
 ## Use Cases
 

package/dist/build/compiler-core.js

@@ -0,0 +1,117 @@
+// src/build/compiler-core.js
+/**
+ * Runtime-agnostic Vue SFC compilation core
+ * Extracted from vue-sfc-plugin.js to be shared across all runtime adapters
+ */
+import { parse, compileScript } from '@vue/compiler-sfc';
+
+/**
+ * Compile a Vue Single File Component to JavaScript
+ * @param {string} source - The .vue file source code
+ * @param {string} filepath - The file path (used for error reporting and ID)
+ * @param {object} options - Compilation options
+ * @returns {{ code: string, errors: Array, map?: object }} Compilation result
+ */
+export function compileSFC(source, filepath, options = {}) {
+  try {
+    // Step 1: Parse SFC into descriptor (template, script, style blocks)
+    const { descriptor, errors: parseErrors } = parse(source, {
+      filename: filepath,
+    });
+
+    if (parseErrors.length) {
+      return {
+        code: '',
+        errors: parseErrors.map(e => ({
+          message: `SFC Parse Error: ${e.message}`,
+          location: e.loc ? {
+            file: filepath,
+            line: e.loc.start.line,
+            column: e.loc.start.column,
+          } : undefined,
+        })),
+      };
+    }
+
+    // Step 2: Compile script block with inline template
+    // For <script setup>, using inlineTemplate: true automatically handles:
+    // - Template compilation
+    // - Component resolution (imported components are available)
+    // - Reactive state exposure to template
+    let scriptCode = '';
+
+    if (descriptor.script || descriptor.scriptSetup) {
+      try {
+        const compiled = compileScript(descriptor, {
+          id: filepath,
+          // IMPORTANT: Inline template compilation with script
+          // This ensures imported components and setup vars are accessible
+          inlineTemplate: true,
+          templateOptions: {
+            compilerOptions: {
+              // Removed isCustomElement - let Vue always resolve as components
+              // This ensures component setup() always runs and inputManager injection works
+              whitespace: 'preserve',
+              comments: false,
+              hoistStatic: true,
+              ...options.compilerOptions,
+            },
+          },
+        });
+
+        scriptCode = compiled.content;
+
+        // Return compiled code
+        return {
+          code: scriptCode,
+          errors: [],
+          map: compiled.map,
+        };
+
+      } catch (error) {
+        return {
+          code: '',
+          errors: [{
+            message: `Script/Template Compilation Error: ${error.message}`,
+            location: error.loc ? {
+              file: filepath,
+              line: error.loc.start.line,
+              column: error.loc.start.column,
+            } : undefined,
+          }],
+        };
+      }
+    }
+
+    // If no script block, return empty
+    return {
+      code: '',
+      errors: [{
+        message: 'SFC has no script or scriptSetup block',
+        location: { file: filepath },
+      }],
+    };
+
+  } catch (error) {
+    return {
+      code: '',
+      errors: [{
+        message: `Unexpected SFC Compilation Error: ${error.message}`,
+        location: { file: filepath },
+      }],
+    };
+  }
+}
+
+/**
+ * Format compilation errors for display
+ * @param {Array} errors - Array of error objects
+ * @param {string} filepath - The file path
+ * @returns {Array} Formatted errors
+ */
+export function formatErrors(errors, filepath) {
+  return errors.map(e => ({
+    text: e.message || 'Unknown error',
+    location: e.location || { file: filepath },
+  }));
+}