@canvasengine/compiler 2.0.0-beta.3 → 2.0.0-beta.30

package/index.ts

@@ -10,6 +10,84 @@ const { generate } = pkg;
 
 const DEV_SRC = "../../src"
 
+/**
+ * Formats a syntax error message with visual pointer to the error location
+ * 
+ * @param {string} template - The template content that failed to parse
+ * @param {object} error - The error object with location information
+ * @returns {string} - Formatted error message with a visual pointer
+ * 
+ * @example
+ * ```
+ * const errorMessage = showErrorMessage("<Canvas>test(d)</Canvas>", syntaxError);
+ * // Returns a formatted error message with an arrow pointing to 'd'
+ * ```
+ */
+function showErrorMessage(template: string, error: any): string {
+  if (!error.location) {
+    return `Syntax error: ${error.message}`;
+  }
+
+  const lines = template.split('\n');
+  const { line, column } = error.location.start;
+  const errorLine = lines[line - 1] || '';
+  
+  // Create a visual pointer with an arrow
+  const pointer = ' '.repeat(column - 1) + '^';
+  
+  return `Syntax error at line ${line}, column ${column}: ${error.message}\n\n` +
+         `${errorLine}\n${pointer}\n`;
+}
+
+/**
+ * Vite plugin to load shader files (.frag, .vert, .wgsl) as text strings
+ * 
+ * This plugin allows importing shader files directly as string literals in your code.
+ * It supports fragment shaders (.frag), vertex shaders (.vert), and WebGPU shaders (.wgsl).
+ * The content is loaded as a raw string and can be used directly with graphics APIs.
+ * 
+ * @returns {object} - Vite plugin configuration object
+ * 
+ * @example
+ * ```typescript
+ * // In your vite.config.ts
+ * import { shaderLoader } from './path/to/compiler'
+ * 
+ * export default defineConfig({
+ *   plugins: [shaderLoader()]
+ * })
+ * 
+ * // In your code
+ * import fragmentShader from './shader.frag'
+ * import vertexShader from './shader.vert'
+ * import computeShader from './shader.wgsl'
+ * 
+ * console.log(fragmentShader) // Raw shader code as string
+ * ```
+ */
+export function shaderLoader() {
+  const filter = createFilter(/\.(frag|vert|wgsl)$/);
+
+  return {
+    name: "vite-plugin-shader-loader",
+    transform(code: string, id: string) {
+      if (!filter(id)) return;
+
+      // Escape the shader code to be safely embedded in a JavaScript string
+      const escapedCode = code
+        .replace(/\\/g, '\\\\')  // Escape backslashes
+        .replace(/`/g, '\\`')    // Escape backticks
+        .replace(/\$/g, '\\$');  // Escape dollar signs
+
+      // Return the shader content as a default export string
+      return {
+        code: `export default \`${escapedCode}\`;`,
+        map: null,
+      };
+    },
+  };
+}
+
 export default function canvasengine() {
   const filter = createFilter("**/*.ce");
 
@@ -35,14 +113,22 @@ export default function canvasengine() {
     "NineSliceSprite",
     "Rect",
     "Circle",
+    "Ellipse",
+    "Triangle",
     "TilingSprite",
-    "svg"
+    "svg",
+    "Video",
+    "Mesh",
+    "Svg",
+    "DOMContainer",
+    "DOMElement",
+    "Button"
   ];
 
   return {
     name: "vite-plugin-ce",
     transform(code: string, id: string) {
-      if (!filter(id)) return;
+      if (!filter(id)) return null;
 
       // Extract the script content
       const scriptMatch = code.match(/<script>([\s\S]*?)<\/script>/);
@@ -51,13 +137,14 @@ export default function canvasengine() {
       // Transform SVG tags to Svg components
       let template = code.replace(/<script>[\s\S]*?<\/script>/, "")
         .replace(/^\s+|\s+$/g, '');
-      
-      // Add SVG transformation
-      template = template.replace(/<svg>([\s\S]*?)<\/svg>/g, (match, content) => {
-        return `<Svg content="${content.trim()}" />`;
-      });
-      
-      const parsedTemplate = parser.parse(template);
+
+      let parsedTemplate;
+      try {
+        parsedTemplate = parser.parse(template);
+      } catch (error) {
+        const errorMsg = showErrorMessage(template, error);
+        throw new Error(`Error parsing template in file ${id}:\n${errorMsg}`);
+      }
 
       // trick to avoid typescript remove imports in scriptContent
       scriptContent += FLAG_COMMENT + parsedTemplate

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@canvasengine/compiler",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.30",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && cp grammar.pegjs ../../docs/public/grammar.pegjs",
     "dev": "tsup --watch"
   },
   "type": "module",