code cleanup

packages/compiler/package.json

@@ -14,8 +14,7 @@
     "alpinejs": "^3.10.2",
     "pug": "^3.0.2",
     "pug-error": "^2.0.0",
-    "ts-morph": "^15.1.0",
-    "tscpaths": "^0.0.9"
+    "ts-morph": "^15.1.0"
   },
   "types": "./types/",
   "devDependencies": {
@@ -24,7 +23,6 @@
     "debug": "^4.3.2",
     "js-beautify": "^1.14.0",
     "tsc": "^2.0.3",
-    "tsconfig-paths": "^4.0.0",
     "typescript": "^4.4.2",
     "webpack": "^5.51.1",
     "webpack-cli": "^4.8.0"

packages/compiler/src/core/plugin/hooks/PupperToAlpineHook.ts

@@ -43,6 +43,16 @@ export class PupperToAlpineHook extends Hook {
                 console.log(token);
             }
 
+            // Replace @ with x-on:
+            if (token.name.startsWith("@")) {
+                token.name = token.name.replace("@", "x-on:");
+            }
+
+            // Replace : with x-bind:
+            if (token.name.startsWith(":")) {
+                token.name = token.name.replace(":", "x-bind:");
+            }
+
             return token;
         });
     }

packages/compiler/src/core/plugin/hooks/component/ScriptParser.ts

@@ -90,10 +90,18 @@ export class ScriptParser {
     private processDefaultComponent() {
         const componentProps = this.findComponentPropsObj();
 
+        let fun = "";
+
+        if (this.component.template?.startsWith("function") || this.component.template?.startsWith("()")) {
+            fun = this.component.template;
+        } else {
+            fun = `() => ${JSON.stringify(this.component.template)}`;
+        }
+
         // Add the "render" function to it
         componentProps.addPropertyAssignment({
             name: "render",
-            initializer: `() => ${JSON.stringify(this.component.template)}`
+            initializer: fun
         });
 
         // Filter components that are not the current one

packages/compiler/src/index.ts

@@ -59,9 +59,11 @@ export = class PupperCompiler {
         try {
             const pugOptions = this.getPugOptions(options);
             pugOptions.contents = template;
-            const rendered = pug.compile(template, pugOptions);
 
-            return rendered();
+            const fn = pug.compile(template, pugOptions);
+            const rendered = fn();
+
+            return rendered;///*js*/`function $h(h) { return ${htmlToHs({ syntax: "h" })(rendered)}; }`;
         } catch(e) {
             throw (options.debug ? e : new Error("Failed to compile template:" + e.message));
         }

packages/renderer/package.json

@@ -12,13 +12,11 @@
   },
   "dependencies": {
     "alpinejs": "^3.10.2",
-    "morphdom": "^2.6.1",
     "pug": "^3.0.2"
   },
   "types": "./types/",
   "devDependencies": {
     "@types/alpinejs": "^3.7.0",
-    "@types/morphdom": "^2.4.2",
     "@types/node": "^16.7.6",
     "debug": "^4.3.2",
     "npm-run-all": "^4.1.5",

packages/renderer/src/core/Component.ts

@@ -30,7 +30,7 @@ interface IComponent<
     /**
      * The function that renders the template HTML.
      */
-    render?: (data: Record<string, any>) => string;
+    render?: (...args: any[]) => string;
 
     /**
      * Any data to be passed to the template.
@@ -201,10 +201,8 @@ export class PupperComponent {
      * Renders the template function into a div tag.
      */
     public render(data?: Record<string, any>) {
-        // Render the initial string
-        const renderContainer = this.renderStringToTemplate(
-            this.component.render(data)
-        );
+        const tree = this.component.render();
+        let renderContainer: HTMLTemplateElement;
 
         // Find all slots, templates and references
         const slots = Array.from(renderContainer.content.querySelectorAll("slot"));

packages/renderer/src/core/DomParser.ts

@@ -1,5 +1,4 @@
 import Alpine from "alpinejs";
-import morphdom from "morphdom";
 
 const AlpineNames = ["x-data", "x-teleport", "x-text", "x-html"];
 
@@ -96,29 +95,17 @@ export class DOMParser {
     }
 
     protected flush() {
-        morphdom(this.container, this.template.content, {
-            childrenOnly: true,
-            onNodeAdded: (node) => {
-                if (node instanceof HTMLElement) {
-                    if (
-                        (node instanceof HTMLTemplateElement) ||
-                        (node.tagName === "SLOT")
-                    ) {
-                        node.remove();
-                        return node;
-                    }
-
-                    this.filterAlpineAttributes(node);
-                }
-
-                return node;
-            }
-        });
+        this.container.appendChild(this.template.content.firstChild);
+        this.filterChildrenAlpineAttributes(this.container);
     }
 
     protected filterAlpineAttributes(el: Element) {
         Array.from(el.attributes).forEach(({ name }) => {
-            if (name.startsWith("@") || name.startsWith(":") || AlpineNames.includes(name)) {
+            if (
+                AlpineNames.includes(name) ||
+                name.startsWith("x-bind") ||
+                name.startsWith("x-on")
+            ) {
                 el.removeAttribute(name);
             }
         });

packages/renderer/types/core/Component.d.ts

@@ -22,7 +22,7 @@ interface IComponent<TData extends Record<string, any>, TMethods extends Record<
     /**
      * The function that renders the template HTML.
      */
-    render?: (data: Record<string, any>) => string;
+    render?: (...args: any[]) => string;
     /**
      * Any data to be passed to the template.
      */

test/templates/ExportedComponent.pupper

@@ -1,11 +1,12 @@
 component(export)
     template
-        |This component was exported and loaded by another component!
-
         div
-            a.text-primary(href="#", @click="alert('Hello world!')")="Testing a link with an event"
+            |This component was exported and loaded by another component!
+
+            div
+                a.text-primary(href="#", @click="alert('Hello world!')")="Testing a link with an event"
 
-        hr
+            hr
 
     script(lang="ts", type="text/javascript")
         import Pupper from "@pupperjs/renderer";

test/templates/ImportedComponent.pupper

@@ -3,12 +3,13 @@ import ExportedComponent(from="./ExportedComponent.pupper")
 component(export)
     template
         div
-            |This component has an imported component!
-            ExportedComponent()
+            div
+                |This component has an imported component!
+                ExportedComponent()
 
-        div
-            ="Also mounted into a slot:"
-            slot(name="slot")
+            div
+                ="Also mounted into a slot:"
+                slot(name="slot")
 
     script(lang="ts", type="text/javascript").
         import Pupper from "@pupperjs/renderer";