fixing declarations

Author: levizwannah

build/vite-plugin-openscript.js

@@ -63,6 +63,45 @@ export function openScriptComponentPlugin(options = {}) {
       }
     },
 
+    transform(code, id) {
+      // Only transform files in components directory
+      if (!id.includes(componentsDir) || !id.endsWith(".js")) return;
+
+      // Find class definition
+      const classMatch = code.match(/class\s+(\w+)\s+extends\s+Component/);
+      if (!classMatch) return;
+
+      const className = classMatch[1];
+
+      // If code already sets this.name explicitly, skip (simple check)
+      // We still use the runtime check (!this.name) to be safe, but this avoids double injection if we run multiple times
+      if (code.includes(`this.name = "${className}"`)) return;
+
+      if (code.includes("constructor")) {
+        // Inject after super()
+        // Matches super(...) or super() with optional semicolon
+        return code.replace(
+          /(super\s*\([^)]*\)\s*;?)/,
+          `$1\n    if (!this.name) this.name = "${className}";`
+        );
+      } else {
+        // No constructor, inject one
+        // Find the first opening brace after class definition
+        const classDef = classMatch[0];
+        const openBraceIndex = code.indexOf("{", code.indexOf(classDef));
+
+        if (openBraceIndex !== -1) {
+          return (
+            code.slice(0, openBraceIndex + 1) +
+            `\n  constructor() { super(); this.name = "${className}"; }` +
+            code.slice(openBraceIndex + 1)
+          );
+        }
+      }
+
+      return code;
+    },
+
     // HMR support
     handleHotUpdate({ file, server }) {
       if (file.includes(componentsDir)) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "modular-openscriptjs",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "OpenScriptJs Framework - A lightweight, reactive JavaScript framework for building modern web applications",
   "type": "module",
   "main": "./dist/modular-openscriptjs.umd.js",

templates/bootstrap/vite.config.js

@@ -1,4 +1,5 @@
 import { defineConfig } from 'vite';
+import { openScriptComponentPlugin } from '../..';
 
 export default defineConfig({
     server: {
@@ -8,5 +9,12 @@ export default defineConfig({
     build: {
         outDir: 'dist',
         sourcemap: true
-    }
+    },
+    plugins: [
+        openScriptComponentPlugin({
+            componentsDir: 'src/components',
+            autoRegister: true,
+            generateTypes: true
+        })
+    ]   
 });

test_regex.js

@@ -0,0 +1,55 @@
+const code1 = `
+export default class MyComponent extends Component {
+  constructor() {
+    super();
+    this.state = {};
+  }
+}
+`;
+
+const code2 = `
+export default class NoConstructor extends Component {
+  render() { return h.div(); }
+}
+`;
+
+const code3 = `
+export default class ExistingName extends Component {
+  constructor() {
+    super();
+    this.name = "CustomName";
+  }
+}
+`;
+
+function transform(code, className) {
+  if (code.includes(`this.name = "${className}"`)) return code;
+
+  if (code.includes("constructor")) {
+    return code.replace(
+      /(super\s*\([^)]*\)\s*;?)/,
+      `$1\n    if (!this.name) this.name = "${className}";`
+    );
+  } else {
+    const classMatch = code.match(/class\s+(\w+)\s+extends\s+Component/);
+    const classDef = classMatch[0];
+    const openBraceIndex = code.indexOf("{", code.indexOf(classDef));
+    if (openBraceIndex !== -1) {
+      return (
+        code.slice(0, openBraceIndex + 1) +
+        `\n  constructor() { super(); this.name = "${className}"; }` +
+        code.slice(openBraceIndex + 1)
+      );
+    }
+  }
+  return code;
+}
+
+console.log("--- Test 1 ---");
+console.log(transform(code1, "MyComponent"));
+
+console.log("--- Test 2 ---");
+console.log(transform(code2, "NoConstructor"));
+
+console.log("--- Test 3 ---");
+console.log(transform(code3, "ExistingName"));