From 011444fbe7a909d1856241e751767405c304ea3c Mon Sep 17 00:00:00 2001
From: Marsel Shaikhin <phoenix.apps@proton.me>
Date: Fri, 17 Oct 2025 09:26:52 +0200
Subject: [PATCH 1/9] feat: rework props handling and codegen (WIP)

---
 Cargo.lock                                    |  13 +
 crates/fervid/benches/codegen_bench.rs        |   2 +
 crates/fervid/src/lib.rs                      |   6 +
 .../fervid_codegen/src/directives/v_model.rs  |   2 +
 crates/fervid_core/src/ast.rs                 | 228 ++++++
 crates/fervid_core/src/lib.rs                 |   2 +
 crates/fervid_core/src/structs.rs             |   6 +
 crates/fervid_core/src/vue_imports.rs         |   8 +
 crates/fervid_transform/Cargo.toml            |   1 +
 crates/fervid_transform/src/error.rs          |  10 +
 crates/fervid_transform/src/lib.rs            |   2 +
 .../src/script/resolve_type.rs                |   1 +
 crates/fervid_transform/src/structs.rs        |  33 +-
 .../fervid_transform/src/template/core/mod.rs |   3 +
 .../src/template/core/v_bind.rs               |   0
 .../src/template/core/v_model.rs              |   0
 .../src/template/core/v_on.rs                 |   0
 .../src/template/directive_transforms.rs      | 100 +++
 .../fervid_transform/src/template/dom/mod.rs  |   0
 .../src/template/expr_transform.rs            |  49 +-
 crates/fervid_transform/src/template/mod.rs   |   5 +
 .../src/template/transform_element.rs         | 750 ++++++++++++++++++
 .../fervid_transform/src/template/v_model.rs  |  76 ++
 23 files changed, 1274 insertions(+), 23 deletions(-)
 create mode 100644 crates/fervid_core/src/ast.rs
 create mode 100644 crates/fervid_transform/src/template/core/mod.rs
 create mode 100644 crates/fervid_transform/src/template/core/v_bind.rs
 create mode 100644 crates/fervid_transform/src/template/core/v_model.rs
 create mode 100644 crates/fervid_transform/src/template/core/v_on.rs
 create mode 100644 crates/fervid_transform/src/template/directive_transforms.rs
 create mode 100644 crates/fervid_transform/src/template/dom/mod.rs
 create mode 100644 crates/fervid_transform/src/template/transform_element.rs
 create mode 100644 crates/fervid_transform/src/template/v_model.rs

diff --git a/Cargo.lock b/Cargo.lock
index a84ce2e8..3c57e86f 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -771,6 +771,18 @@ dependencies = [
  "sourcemap",
 ]
 
+[[package]]
+name = "enum_dispatch"
+version = "0.3.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "aa18ce2bc66555b3218614519ac839ddb759a7d6720732f979ef8d13be147ecd"
+dependencies = [
+ "once_cell",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.106",
+]
+
 [[package]]
 name = "equivalent"
 version = "1.0.2"
@@ -969,6 +981,7 @@ dependencies = [
 name = "fervid_transform"
 version = "0.2.0"
 dependencies = [
+ "enum_dispatch",
  "fervid_core",
  "fervid_css",
  "flagset",
diff --git a/crates/fervid/benches/codegen_bench.rs b/crates/fervid/benches/codegen_bench.rs
index 27c45791..c5b214f8 100644
--- a/crates/fervid/benches/codegen_bench.rs
+++ b/crates/fervid/benches/codegen_bench.rs
@@ -33,6 +33,8 @@ fn codegen_benchmark(c: &mut Criterion) {
                     transform_asset_urls: TransformAssetUrlsConfig::default(),
                     errors: vec![],
                     warnings: vec![],
+                    directive_scopes: Default::default(),
+                    directive_transforms: Default::default(),
                 };
 
                 fervid_transform::template::transform_and_record_template(template_block, &mut ctx);
diff --git a/crates/fervid/src/lib.rs b/crates/fervid/src/lib.rs
index 23222664..d7191e72 100644
--- a/crates/fervid/src/lib.rs
+++ b/crates/fervid/src/lib.rs
@@ -155,6 +155,10 @@ pub fn compile(source: &str, options: CompileOptions) -> Result<CompileResult, C
         let num = hasher.finish();
         format!("{:x}", num)
     };
+    
+    // Get the correct transforms
+    // TODO
+    let directive_transforms = Default::default();
 
     // Transform
     let mut transform_errors = Vec::new();
@@ -165,6 +169,7 @@ pub fn compile(source: &str, options: CompileOptions) -> Result<CompileResult, C
         scope_id: &file_hash,
         filename: &options.filename,
         transform_asset_urls: options.transform_asset_urls.unwrap_or_default(),
+        directive_transforms,
     };
     let transform_result = transform_sfc(sfc, transform_options, &mut transform_errors);
     all_errors.extend(transform_errors.into_iter().map(From::from));
@@ -262,6 +267,7 @@ pub fn compile_sync_naive(source: &str, is_prod: bool) -> Result<String, String>
         scope_id: &file_hash,
         filename: "anonymous.vue",
         transform_asset_urls: TransformAssetUrlsConfig::default(),
+        directive_transforms: Default::default(),
     };
     let transform_result = transform_sfc(sfc, transform_options, &mut transform_errors);
 
diff --git a/crates/fervid_codegen/src/directives/v_model.rs b/crates/fervid_codegen/src/directives/v_model.rs
index ec2636ef..03323d92 100644
--- a/crates/fervid_codegen/src/directives/v_model.rs
+++ b/crates/fervid_codegen/src/directives/v_model.rs
@@ -24,6 +24,8 @@ impl CodegenContext {
         let span = v_model.span;
         let mut buf = String::new();
 
+        // TODO Move the props part into the transform
+
         // 1. Get bound attribute (part after `:` or `modelValue`).
         // `v-model="smth"` is same as `v-model:modelValue="smth"`
         let bound_attribute = v_model
diff --git a/crates/fervid_core/src/ast.rs b/crates/fervid_core/src/ast.rs
new file mode 100644
index 00000000..83105377
--- /dev/null
+++ b/crates/fervid_core/src/ast.rs
@@ -0,0 +1,228 @@
+// Adapted from https://github.com/vuejs/core/blob/5a8aa0b2ba575e098cbb63b396e9bcb751eb3a0f/packages/compiler-core/src/ast.ts
+
+use swc_core::{
+    common::{Span, DUMMY_SP},
+    ecma::ast::{
+        Bool, CallExpr, Callee, Expr, ExprOrSpread, IdentName, KeyValueProp, Lit, Prop, PropName,
+        PropOrSpread, Str,
+    },
+};
+
+use crate::{FervidAtom, VueImports};
+
+#[derive(Default)]
+pub enum ConstantTypes {
+    #[default]
+    NotConstant = 0,
+    CanSkipPatch,
+    CanCache,
+    CanStringify,
+}
+
+pub struct SimpleExpressionNode {
+    pub ast: Box<Expr>,
+    pub is_static: bool,
+    pub const_type: ConstantTypes,
+    pub is_handler_key: bool,
+}
+
+pub struct CompoundExpressionNode {
+    pub ast: Box<Expr>,
+    pub is_handler_key: bool,
+}
+
+pub enum ExpressionNode {
+    SimpleExpression(SimpleExpressionNode),
+    CompoundExpression(CompoundExpressionNode),
+}
+
+pub struct SimpleExpressionPropNameNode {
+    pub ast: IdentName,
+    pub is_static: bool,
+    pub const_type: ConstantTypes,
+    pub is_handler_key: bool,
+}
+
+pub struct CompoundExpressionPropNameNode {
+    pub ast: PropName,
+    pub is_handler_key: bool,
+}
+
+pub enum ExpressionPropNameNode {
+    SimpleExpression(SimpleExpressionPropNameNode),
+    CompoundExpression(CompoundExpressionPropNameNode),
+}
+
+// JS Node Types
+
+pub enum JsChildNode {
+    CallExpression(Box<CallExpression>),
+    ObjectExpression(Box<ObjectExpression>),
+    ExpressionNode(Box<ExpressionNode>),
+    OriginalValueMarker,
+}
+
+pub struct CallExpression {
+    pub callee: VueImports,
+    pub span: Span,
+    pub arguments: Vec<JsChildNode>,
+}
+
+pub struct ObjectExpression {
+    pub properties: Vec<Property>,
+    pub span: Span,
+}
+
+pub struct Property {
+    pub key: ExpressionPropNameNode,
+    pub value: JsChildNode,
+}
+
+pub fn create_call_expression(
+    callee: VueImports,
+    arguments: Vec<JsChildNode>,
+    span: Span,
+) -> CallExpression {
+    CallExpression {
+        callee,
+        span,
+        arguments,
+    }
+}
+
+pub fn create_object_expression(properties: Vec<Property>, span: Span) -> ObjectExpression {
+    ObjectExpression { properties, span }
+}
+
+pub fn create_object_property(
+    key: ExpressionPropNameNode,
+    value: JsChildNode,
+) -> Property {
+    Property { key, value }
+}
+
+pub fn create_simple_expression_propname(
+    content: FervidAtom,
+    is_static: bool,
+    span: Span,
+) -> SimpleExpressionPropNameNode {
+    SimpleExpressionPropNameNode {
+        ast: IdentName { sym: content, span },
+        is_static,
+        const_type: Default::default(),
+        is_handler_key: false,
+    }
+}
+
+pub fn create_simple_expression_bool(content: bool) -> SimpleExpressionNode {
+    SimpleExpressionNode {
+        ast: Box::new(Expr::Lit(Lit::Bool(Bool {
+            value: content,
+            span: DUMMY_SP,
+        }))),
+        is_static: true,
+        const_type: ConstantTypes::CanStringify,
+        is_handler_key: false,
+    }
+}
+
+pub fn create_simple_expression_str(
+    content: FervidAtom,
+    is_static: bool,
+    span: Span,
+) -> SimpleExpressionNode {
+    SimpleExpressionNode {
+        ast: Box::new(Expr::Lit(Lit::Str(Str {
+            span,
+            value: content,
+            raw: None,
+        }))),
+        is_static,
+        const_type: ConstantTypes::CanStringify,
+        is_handler_key: false,
+    }
+}
+
+// Property
+
+// impl Into<PropOrSpread> for Property {
+//     fn into(self) -> PropOrSpread {
+//         PropOrSpread::Prop(Box::new(Prop::KeyValue(KeyValueProp {
+//             key: self.key.into(),
+//             value: self.value.ast,
+//         })))
+//     }
+// }
+
+impl From<PropOrSpread> for Property {
+    fn from(value: PropOrSpread) -> Self {
+        Property {
+            key: todo!(),
+            value: todo!(),
+        }
+    }
+}
+
+// CallExpression
+
+impl From<CallExpr> for CallExpression {
+    fn from(value: CallExpr) -> Self {
+        todo!()
+        // Self {
+        //     callee: (),
+        //     span: (),
+        //     arguments: (),
+        // }
+    }
+}
+
+// ExpressionNode
+
+impl From<Expr> for ExpressionNode {
+    fn from(value: Expr) -> Self {
+        Self::CompoundExpression(CompoundExpressionNode {
+            ast: Box::new(value),
+            is_handler_key: false,
+        })
+    }
+}
+
+// ExpressionPropNameNode
+
+impl ExpressionPropNameNode {
+    pub fn is_handler_key(&self) -> bool {
+        match self {
+            ExpressionPropNameNode::SimpleExpression(s) => s.is_handler_key,
+            ExpressionPropNameNode::CompoundExpression(c) => c.is_handler_key,
+        }
+    }
+}
+
+impl Into<PropName> for ExpressionPropNameNode {
+    fn into(self) -> PropName {
+        match self {
+            ExpressionPropNameNode::SimpleExpression(s) => PropName::Ident(s.ast),
+            ExpressionPropNameNode::CompoundExpression(c) => c.ast,
+        }
+    }
+}
+
+impl From<SimpleExpressionPropNameNode> for ExpressionPropNameNode {
+    fn from(value: SimpleExpressionPropNameNode) -> Self {
+        Self::SimpleExpression(value)
+    }
+}
+
+// JsChildNode
+
+impl From<SimpleExpressionNode> for JsChildNode {
+    fn from(value: SimpleExpressionNode) -> Self {
+        Self::ExpressionNode(Box::new(ExpressionNode::SimpleExpression(value)))
+    }
+}
+
+impl From<CallExpression> for JsChildNode {
+    fn from(value: CallExpression) -> Self {
+        Self::CallExpression(Box::new(value))
+    }
+}
\ No newline at end of file
diff --git a/crates/fervid_core/src/lib.rs b/crates/fervid_core/src/lib.rs
index ba8b48d4..02263d32 100644
--- a/crates/fervid_core/src/lib.rs
+++ b/crates/fervid_core/src/lib.rs
@@ -1,4 +1,5 @@
 mod all_html_tags;
+mod ast;
 mod bindings;
 pub mod error;
 mod sfc;
@@ -9,6 +10,7 @@ mod vue_builtins;
 mod vue_imports;
 
 pub use all_html_tags::is_html_tag;
+pub use ast::*;
 pub use bindings::*;
 pub use sfc::*;
 pub use structs::*;
diff --git a/crates/fervid_core/src/structs.rs b/crates/fervid_core/src/structs.rs
index 9eebf2c9..3ccfb974 100644
--- a/crates/fervid_core/src/structs.rs
+++ b/crates/fervid_core/src/structs.rs
@@ -463,3 +463,9 @@ pub enum TemplateGenerationMode {
     #[default]
     RenderFn,
 }
+
+impl TemplateGenerationMode {
+    pub fn is_inline(&self) -> bool {
+        matches!(self, TemplateGenerationMode::Inline)
+    }
+}
diff --git a/crates/fervid_core/src/vue_imports.rs b/crates/fervid_core/src/vue_imports.rs
index 725d2d93..7567e991 100644
--- a/crates/fervid_core/src/vue_imports.rs
+++ b/crates/fervid_core/src/vue_imports.rs
@@ -23,6 +23,8 @@ flags! {
         DefineComponent,
         #[strum(serialize = "_Fragment")]
         Fragment,
+        #[strum(serialize = "_guardReactiveProps")]
+        GuardReactiveProps,
         #[strum(serialize = "_isMemoSame")]
         IsMemoSame,
         #[strum(serialize = "_isRef")]
@@ -33,10 +35,14 @@ flags! {
         MergeDefaults,
         #[strum(serialize = "_mergeModels")]
         MergeModels,
+        #[strum(serialize = "_mergeProps")]
+        MergeProps,
         #[strum(serialize = "_normalizeClass")]
         NormalizeClass,
         #[strum(serialize = "_normalizeStyle")]
         NormalizeStyle,
+        #[strum(serialize = "_normalizeProps")]
+        NormalizeProps,
         #[strum(serialize = "_openBlock")]
         OpenBlock,
         #[strum(serialize = "_renderList")]
@@ -59,6 +65,8 @@ flags! {
         ToDisplayString,
         #[strum(serialize = "_toHandlerKey")]
         ToHandlerKey,
+        #[strum(serialize = "_toHandlers")]
+        ToHandlers,
         #[strum(serialize = "_Transition")]
         Transition,
         #[strum(serialize = "_TransitionGroup")]
diff --git a/crates/fervid_transform/Cargo.toml b/crates/fervid_transform/Cargo.toml
index 3beb0a2d..4663982f 100644
--- a/crates/fervid_transform/Cargo.toml
+++ b/crates/fervid_transform/Cargo.toml
@@ -24,6 +24,7 @@ itertools = "*"
 url = "2"
 percent-encoding = "*"
 indexmap = "2.10.0"
+enum_dispatch = "0.3.13"
 
 [dev-dependencies]
 swc_ecma_codegen = { workspace = true }
diff --git a/crates/fervid_transform/src/error.rs b/crates/fervid_transform/src/error.rs
index 6c25ef0d..1f444f3c 100644
--- a/crates/fervid_transform/src/error.rs
+++ b/crates/fervid_transform/src/error.rs
@@ -107,6 +107,16 @@ pub enum TemplateErrorKind {
     TransformAssetUrlsBaseUrlParseFailed,
     /// Failed parsing the configured base URL when doing asset URL transform
     TransformAssetUrlsUrlParseFailed,
+    /// v-model value must be a valid JavaScript member expression
+    VModelMalformedExpression,
+    /// v-model cannot be used on a prop, because local prop bindings are not writable. Use a v-bind binding combined with a v-on listener that emits update:x event instead
+    VModelOnProps,
+    /// v-model cannot be used on v-for or v-slot scope variables because they are not writable
+    VModelOnScopeVariable,
+    /// v-on is missing expression
+    VOnNoExpression,
+    /// v-slot can only be used on components or <template> tags.
+    VSlotMisplaced,
 }
 
 impl From<CssError> for TransformError {
diff --git a/crates/fervid_transform/src/lib.rs b/crates/fervid_transform/src/lib.rs
index c0670194..e7f5af4e 100644
--- a/crates/fervid_transform/src/lib.rs
+++ b/crates/fervid_transform/src/lib.rs
@@ -123,9 +123,11 @@ impl TransformSfcContext {
             bindings_helper,
             deps: Default::default(),
             scopes: vec![],
+            directive_scopes: Default::default(),
             transform_asset_urls: options.transform_asset_urls.clone(),
             errors: vec![],
             warnings: vec![],
+            directive_transforms: options.directive_transforms.to_owned(),
         }
     }
 
diff --git a/crates/fervid_transform/src/script/resolve_type.rs b/crates/fervid_transform/src/script/resolve_type.rs
index 483c6584..8a90f01e 100644
--- a/crates/fervid_transform/src/script/resolve_type.rs
+++ b/crates/fervid_transform/src/script/resolve_type.rs
@@ -4137,6 +4137,7 @@ mod tests {
                 scope_id: "test",
                 filename: "./Test.vue",
                 transform_asset_urls: crate::TransformAssetUrlsConfig::default(),
+                directive_transforms: Default::default(),
             },
         );
 
diff --git a/crates/fervid_transform/src/structs.rs b/crates/fervid_transform/src/structs.rs
index c487cf11..b2440b8f 100644
--- a/crates/fervid_transform/src/structs.rs
+++ b/crates/fervid_transform/src/structs.rs
@@ -4,19 +4,20 @@ use std::{cell::RefCell, rc::Rc};
 
 use fervid_core::{
     fervid_atom, BindingTypes, ComponentBinding, CustomDirectiveBinding, FervidAtom,
-    SfcCustomBlock, SfcStyleBlock, SfcTemplateBlock, TemplateGenerationMode, VueImportsSet,
+    SfcCustomBlock, SfcStyleBlock, SfcTemplateBlock, TemplateGenerationMode, VueImports,
+    VueImportsSet,
 };
 use fxhash::{FxHashMap as HashMap, FxHashSet as HashSet};
 use smallvec::SmallVec;
 use swc_core::{
     common::{Span, DUMMY_SP},
     ecma::ast::{
-        Decl, Expr, ExprOrSpread, Function, Id, ImportDecl, Module, ObjectLit, PropOrSpread, Str,
-        TsType,
+        Decl, Expr, ExprOrSpread, Function, Id, ImportDecl, Module, ObjectLit,
+        PropOrSpread, Str, TsType,
     },
 };
 
-use crate::error::TransformError;
+use crate::{error::TransformError, template::directive_transforms::DirectiveTransformsProvider};
 
 /// Context object. Currently very minimal but may grow over time.
 pub struct TransformSfcContext {
@@ -29,9 +30,13 @@ pub struct TransformSfcContext {
     pub bindings_helper: BindingsHelper,
     pub deps: HashSet<String>,
     pub transform_asset_urls: TransformAssetUrlsConfig,
+    /// Scopes for types
     pub scopes: Vec<TypeScopeContainer>,
+    /// Scopes for directives
+    pub directive_scopes: DirectiveScopes,
     pub errors: Vec<TransformError>,
     pub warnings: Vec<TransformError>,
+    pub directive_transforms: DirectiveTransformsProvider,
 }
 
 #[derive(Debug, Clone, Copy, Default)]
@@ -151,6 +156,14 @@ pub struct TypeScope {
 /// Container for easy sharing and modification of scopes
 pub type TypeScopeContainer = Rc<RefCell<TypeScope>>;
 
+#[derive(Debug, Default)]
+pub struct DirectiveScopes {
+    pub v_for: u8,
+    pub v_slot: u8,
+    pub v_pre: u8,
+    pub v_once: u8,
+}
+
 // Todo maybe use SmallVec?
 #[derive(Debug, Default, PartialEq)]
 pub struct OptionsApiBindings {
@@ -255,6 +268,7 @@ pub struct TransformSfcOptions<'s> {
     pub scope_id: &'s str,
     pub filename: &'s str,
     pub transform_asset_urls: TransformAssetUrlsConfig,
+    pub directive_transforms: DirectiveTransformsProvider,
 }
 
 pub struct TransformSfcResult {
@@ -294,7 +308,7 @@ impl SetupBinding {
 
 #[cfg(test)]
 impl TransformSfcContext {
-    pub fn anonymous() -> TransformSfcContext {
+    pub fn anonymous() -> Self {
         let filename = "anonymous.vue".to_string();
         TransformSfcContext {
             filename: filename.to_owned(),
@@ -303,9 +317,11 @@ impl TransformSfcContext {
             props_destructure: PropsDestructureConfig::default(),
             deps: HashSet::default(),
             scopes: vec![],
+            directive_scopes: Default::default(),
             transform_asset_urls: TransformAssetUrlsConfig::default(),
             errors: vec![],
             warnings: vec![],
+            directive_transforms: Default::default(),
         }
     }
 }
@@ -368,3 +384,10 @@ impl Default for TransformAssetUrlsConfigOptions {
         }
     }
 }
+
+impl BindingsHelper {
+    pub fn helper(&mut self, vue_import: VueImports) -> VueImports {
+        self.vue_imports |= vue_import;
+        vue_import
+    }
+}
diff --git a/crates/fervid_transform/src/template/core/mod.rs b/crates/fervid_transform/src/template/core/mod.rs
new file mode 100644
index 00000000..f206e47f
--- /dev/null
+++ b/crates/fervid_transform/src/template/core/mod.rs
@@ -0,0 +1,3 @@
+pub mod v_bind;
+pub mod v_model;
+pub mod v_on;
diff --git a/crates/fervid_transform/src/template/core/v_bind.rs b/crates/fervid_transform/src/template/core/v_bind.rs
new file mode 100644
index 00000000..e69de29b
diff --git a/crates/fervid_transform/src/template/core/v_model.rs b/crates/fervid_transform/src/template/core/v_model.rs
new file mode 100644
index 00000000..e69de29b
diff --git a/crates/fervid_transform/src/template/core/v_on.rs b/crates/fervid_transform/src/template/core/v_on.rs
new file mode 100644
index 00000000..e69de29b
diff --git a/crates/fervid_transform/src/template/directive_transforms.rs b/crates/fervid_transform/src/template/directive_transforms.rs
new file mode 100644
index 00000000..96526ac8
--- /dev/null
+++ b/crates/fervid_transform/src/template/directive_transforms.rs
@@ -0,0 +1,100 @@
+use std::fmt::Debug;
+
+use enum_dispatch::enum_dispatch;
+use fervid_core::{ElementNode, Property, VBindDirective, VModelDirective, VOnDirective};
+use swc_core::ecma::ast::{Expr, PropOrSpread};
+
+use crate::TransformSfcContext;
+
+pub struct DirectiveTransformResult {
+    pub need_runtime: bool,
+    pub props: Vec<Property>,
+}
+
+#[enum_dispatch]
+pub trait DirectiveTransforms: Debug {
+    fn transform_v_bind(
+        &self,
+        ctx: &mut TransformSfcContext,
+        v_bind: &VBindDirective,
+        node: &ElementNode,
+    ) -> Option<DirectiveTransformResult> {
+        todo!()
+    }
+
+    fn transform_v_on(
+        &self,
+        ctx: &mut TransformSfcContext,
+        v_on: &VOnDirective,
+        node: &ElementNode,
+    ) -> Option<DirectiveTransformResult> {
+        todo!()
+    }
+
+    fn transform_v_model(
+        &self,
+        ctx: &mut TransformSfcContext,
+        v_model: &VModelDirective,
+        node: &ElementNode,
+    ) -> Option<DirectiveTransformResult> {
+        todo!()
+    }
+
+    fn transform_v_html(
+        &self,
+        _ctx: &mut TransformSfcContext,
+        _v_html: &Expr,
+        _node: &ElementNode,
+    ) -> Option<DirectiveTransformResult> {
+        None
+    }
+
+    fn transform_v_text(
+        &self,
+        _ctx: &mut TransformSfcContext,
+        _v_text: &Expr,
+        _node: &ElementNode,
+    ) -> Option<DirectiveTransformResult> {
+        None
+    }
+
+    fn transform_v_show(
+        &self,
+        _ctx: &mut TransformSfcContext,
+        _v_show: &Expr,
+        _node: &ElementNode,
+    ) -> Option<DirectiveTransformResult> {
+        None
+    }
+}
+
+// Transforms should not hold any data because they need to be copied,
+// any state should be stored on the `&mut ctx` provided to the functions.
+
+#[derive(Debug, Clone, Default)]
+pub struct BaseDirectiveTransform;
+
+#[derive(Debug, Clone, Default)]
+pub struct DomDirectiveTransform;
+
+#[derive(Debug, Clone)]
+#[enum_dispatch(DirectiveTransforms)]
+pub enum DirectiveTransformsProvider {
+    Base(BaseDirectiveTransform),
+    Dom(DomDirectiveTransform),
+    // Ssr,
+    // Note: Supporting custom transforms bloats the size of `DirectiveTransformsProvider` substantially
+    // due to struct aligning.
+    // Custom(Rc<dyn DirectiveTransforms>),
+}
+
+impl Default for DirectiveTransformsProvider {
+    fn default() -> Self {
+        Self::Base(BaseDirectiveTransform::default())
+    }
+}
+
+// Base transforms are provided as default trait implementations
+impl DirectiveTransforms for BaseDirectiveTransform {}
+
+impl DirectiveTransforms for DomDirectiveTransform {}
diff --git a/crates/fervid_transform/src/template/dom/mod.rs b/crates/fervid_transform/src/template/dom/mod.rs
new file mode 100644
index 00000000..e69de29b
diff --git a/crates/fervid_transform/src/template/expr_transform.rs b/crates/fervid_transform/src/template/expr_transform.rs
index 2240f400..1ea23ee3 100644
--- a/crates/fervid_transform/src/template/expr_transform.rs
+++ b/crates/fervid_transform/src/template/expr_transform.rs
@@ -178,24 +178,11 @@ impl BindingsHelperTransform for BindingsHelper {
             return BindingTypes::JsGlobal;
         }
 
-        let mut current_scope_index = starting_scope;
-
-        // Check template scope
-        while let Some(current_scope) = self.template_scopes.get(current_scope_index as usize) {
-            // Check variable existence in the current scope
-            let found = current_scope.variables.iter().find(|it| *it == variable);
-
-            if found.is_some() {
-                return BindingTypes::TemplateLocal;
-            }
-
-            // Check if we reached the root scope, it will have itself as a parent
-            if current_scope.parent == current_scope_index {
-                break;
-            }
-
-            // Go to parent
-            current_scope_index = current_scope.parent;
+        if matches!(
+            self.find_in_template_scopes(starting_scope, variable),
+            BindingTypes::TemplateLocal
+        ) {
+            return BindingTypes::TemplateLocal;
         }
 
         // Check hash-map for convenience (we may have found the reference previously)
@@ -251,6 +238,32 @@ impl BindingsHelperTransform for BindingsHelper {
     }
 }
 
+impl BindingsHelper {
+    pub fn find_in_template_scopes(&self, starting_scope: u32, atom: &FervidAtom) -> BindingTypes {
+        let mut current_scope_index = starting_scope;
+
+        // Check template scope
+        while let Some(current_scope) = self.template_scopes.get(current_scope_index as usize) {
+            // Check variable existence in the current scope
+            let found = current_scope.variables.iter().find(|it| *it == atom);
+
+            if found.is_some() {
+                return BindingTypes::TemplateLocal;
+            }
+
+            // Check if we reached the root scope, it will have itself as a parent
+            if current_scope.parent == current_scope_index {
+                break;
+            }
+
+            // Go to parent
+            current_scope_index = current_scope.parent;
+        }
+
+        BindingTypes::Unresolved
+    }
+}
+
 impl<'s> VisitMut for TransformVisitor<'s> {
     fn visit_mut_expr(&mut self, expr: &mut Expr) {
         let ident: &mut Ident = match expr {
diff --git a/crates/fervid_transform/src/template/mod.rs b/crates/fervid_transform/src/template/mod.rs
index e47f33c9..e95c7ef9 100644
--- a/crates/fervid_transform/src/template/mod.rs
+++ b/crates/fervid_transform/src/template/mod.rs
@@ -1,9 +1,14 @@
 pub mod asset_urls;
 pub mod ast_transform;
 pub mod collect_vars;
+pub mod core;
+pub mod dom;
+pub mod directive_transforms;
 pub mod expr_transform;
 pub mod js_builtins;
 pub mod resolutions;
+pub mod transform_element;
 pub mod utils;
+pub mod v_model;
 pub mod v_on;
 pub use ast_transform::transform_and_record_template;
diff --git a/crates/fervid_transform/src/template/transform_element.rs b/crates/fervid_transform/src/template/transform_element.rs
new file mode 100644
index 00000000..bc148348
--- /dev/null
+++ b/crates/fervid_transform/src/template/transform_element.rs
@@ -0,0 +1,750 @@
+use fervid_core::{
+    create_call_expression, create_object_expression, create_object_property,
+    create_simple_expression_bool, create_simple_expression_propname, create_simple_expression_str,
+    fervid_atom, AttributeOrBinding, BindingTypes, CallExpression, ElementNode, ExpressionNode, ExpressionPropNameNode, FervidAtom, JsChildNode,
+    ObjectExpression, PatchFlags, PatchHints, Property, SimpleExpressionPropNameNode, StartingTag, StrOrExpr, VCustomDirective, VModelDirective,
+    VueDirectives, VueImports,
+};
+use flagset::FlagSet;
+use phf::phf_set;
+use swc_core::{
+    common::{util::take::Take, DUMMY_SP},
+    ecma::ast::{Expr, Lit},
+};
+
+use crate::{
+    error::{TemplateError, TemplateErrorKind, TransformError},
+    template::{
+        directive_transforms::DirectiveTransforms, expr_transform::BindingsHelperTransform,
+    },
+    TransformSfcContext,
+};
+
+pub struct Props<'a> {
+    pub attributes: &'a [AttributeOrBinding],
+    pub directives: Option<&'a VueDirectives>,
+}
+
+pub enum PropsExpression {
+    ObjectExpression(Box<ObjectExpression>),
+    CallExpression(Box<CallExpression>),
+    ExpressionNode(Box<ExpressionNode>),
+}
+
+pub enum RuntimeDirective {
+    VShow(Box<Expr>),
+    VModel(VModelDirective),
+    Custom(VCustomDirective),
+}
+
+pub struct BuildPropsResult {
+    // CallExpression | ObjectExpression | ExpressionNode
+    pub props: Option<PropsExpression>,
+    pub directives: Vec<RuntimeDirective>,
+    // Patch `flags`, `dynamicPropNames` and `shouldUseBlock` are all inside PatchHints
+    pub patch_hints: PatchHints,
+}
+
+#[derive(Default)]
+pub struct PatchMarkers {
+    pub dynamic_prop_names: Vec<FervidAtom>,
+    pub flags: FlagSet<PatchFlags>,
+    pub has_class_binding: bool,
+    pub has_dynamic_keys: bool,
+    pub has_hydration_event_binding: bool,
+    pub has_ref: bool,
+    pub has_runtime_directives: bool,
+    pub has_style_binding: bool,
+    pub has_vnode_hook: bool,
+    pub should_use_block: bool,
+}
+
+pub fn build_props(
+    node: &ElementNode,
+    ctx: &mut TransformSfcContext,
+    scope_to_use: u32,
+    props: Option<Props>,
+    is_component: bool,
+    is_dynamic_component: bool,
+    ssr: bool,
+) -> BuildPropsResult {
+    let mut properties: Vec<Property> = vec![];
+    let mut merge_args: Vec<PropsExpression> = vec![];
+    let mut runtime_directives: Vec<RuntimeDirective> = vec![];
+    let element_span = node.span;
+
+    // Patch hints
+    // https://github.com/vuejs/core/blob/75220c7995a13a483ae9599a739075be1c8e17f8/packages/compiler-core/src/transforms/transformElement.ts#L395
+    let has_children = !node.children.is_empty();
+    let mut patch_markers = PatchMarkers::default();
+
+    macro_rules! push_merge_arg {
+        ($arg: expr) => {
+            push_merge_arg!();
+            merge_args.push($arg);
+        };
+        () => {
+            if !properties.is_empty() {
+                merge_args.push(PropsExpression::ObjectExpression(Box::new(
+                    create_object_expression(dedupe_properties(properties.take()), element_span),
+                )));
+                // Note: .take() clears properties already
+            }
+        };
+    }
+
+    macro_rules! push_ref_v_for_marker {
+        () => {
+            if ctx.directive_scopes.v_for > 0 {
+                properties.push(create_object_property(
+                    create_simple_expression_propname(fervid_atom!("ref_for"), true, DUMMY_SP)
+                        .into(),
+                    create_simple_expression_bool(true).into(),
+                ));
+            }
+        };
+    }
+
+    let props = props.unwrap_or_else(|| Props {
+        attributes: &node.starting_tag.attributes,
+        directives: node.starting_tag.directives.as_deref(),
+    });
+
+    // Cloning transforms is fine here due to the structure being optimized for it
+    let transforms = ctx.directive_transforms.clone();
+
+    macro_rules! transform_directive {
+        ($transform_name: ident, $value: expr) => {
+            if let Some(directive_transform_result) = transforms.$transform_name(ctx, $value, node)
+            {
+                if !ssr {
+                    for prop in directive_transform_result.props.iter() {
+                        analyze_patch_flag(
+                            &prop,
+                            &mut patch_markers,
+                            is_component,
+                            is_dynamic_component,
+                        );
+                    }
+                }
+
+                properties.extend(directive_transform_result.props);
+            }
+        };
+        ($transform_name: ident, $value: expr, $runtime_variant: ident) => {
+            if let Some(directive_transform_result) = transforms.$transform_name(ctx, $value, node)
+            {
+                if !ssr {
+                    for prop in directive_transform_result.props.iter() {
+                        analyze_patch_flag(
+                            &prop,
+                            &mut patch_markers,
+                            is_component,
+                            is_dynamic_component,
+                        );
+                    }
+                }
+
+                properties.extend(directive_transform_result.props);
+
+                if directive_transform_result.need_runtime {
+                    runtime_directives.push(RuntimeDirective::$runtime_variant($value.to_owned()));
+                }
+            }
+        };
+    }
+
+    // Static attributes, `v-bind` and `v-on`
+    for prop in props.attributes {
+        match prop {
+            AttributeOrBinding::RegularAttribute { name, value, span } => {
+                let mut is_static = true;
+
+                if name == "ref" {
+                    patch_markers.has_ref = true;
+                    push_ref_v_for_marker!();
+
+                    // TODO: Use `binding_metadata` instead
+                    // Get the binding type regardless of template generation mode to mark the ref as "used".
+                    // This is the importUsageCheck behavior of the official compiler
+                    let binding_type = if value.is_empty() {
+                        BindingTypes::Unresolved
+                    } else {
+                        ctx.bindings_helper
+                            .get_var_binding_type(scope_to_use, value)
+                    };
+
+                    // https://github.com/vuejs/core/blob/ee4cd78a06e6aa92b12564e527d131d1064c2cd0/packages/compiler-core/src/transforms/transformElement.ts#L506
+                    // In inline mode there is no setupState object, so we can't use string
+                    // keys to set the ref. Instead, we need to transform it to pass the
+                    // actual ref.
+                    if !value.is_empty()
+                        && ctx.bindings_helper.template_generation_mode.is_inline()
+                        && matches!(
+                            binding_type,
+                            BindingTypes::SetupLet
+                                | BindingTypes::SetupRef
+                                | BindingTypes::SetupMaybeRef
+                                | BindingTypes::Imported
+                        )
+                    {
+                        // TODO: Use value span instead of attr span
+                        let value_span = span.to_owned();
+
+                        is_static = false;
+                        properties.push(create_object_property(
+                            create_simple_expression_propname(
+                                fervid_atom!("ref_key"),
+                                true,
+                                DUMMY_SP,
+                            )
+                            .into(),
+                            create_simple_expression_str(value.to_owned(), true, value_span).into(),
+                        ));
+                    }
+                }
+
+                // skip is on <component>, or is="vue:xxx"
+                if name == "is"
+                    && (is_component_tag(&node.starting_tag) || value.starts_with("vue:"))
+                {
+                    continue;
+                }
+
+                // TODO: Use name and value spans instead of the attribute span
+                let name_span = span.to_owned();
+                let value_span = span.to_owned();
+
+                properties.push(create_object_property(
+                    create_simple_expression_propname(name.to_owned(), true, name_span).into(),
+                    create_simple_expression_str(value.to_owned(), is_static, value_span).into(),
+                ));
+            }
+
+            AttributeOrBinding::VBind(v_bind_directive) => {
+                let arg = v_bind_directive.argument.as_ref();
+
+                // Skip `:is` on <component>
+                if is_static_arg_of(arg, "is") && is_component_tag(&node.starting_tag) {
+                    continue;
+                }
+
+                // https://github.com/vuejs/core/issues/938: elements with dynamic keys should be forced into blocks
+                if is_static_arg_of(arg, "key") {
+                    patch_markers.should_use_block = true;
+                }
+
+                if is_static_arg_of(arg, "ref") {
+                    push_ref_v_for_marker!();
+                }
+
+                // Special case for v-bind with no argument
+                if arg.is_none() {
+                    patch_markers.has_dynamic_keys = true;
+
+                    // Expression is guaranteed to be present by the parser
+
+                    // https://github.com/vuejs/core/issues/10696 in case a v-bind object contains ref
+                    push_ref_v_for_marker!();
+                    push_merge_arg!(v_bind_directive.value.as_ref().into());
+                }
+
+                // Force hydration for v-bind with .prop modifier
+                if v_bind_directive.is_prop {
+                    patch_markers.flags |= PatchFlags::NeedHydration;
+                }
+
+                // TODO call the v-bind dispatcher for the directive transform
+                // It should decide which function to call for the given context (csr/ssr)
+                // For now only add csr and use todo! for ssr
+                // Directory structure:
+                // - core
+                //   - v_bind.rs (needed?)
+                // - dom
+                //   - v_bind.rs
+                // - ssr
+                // dynamic_ctx.rs
+                //   - fn v_bind_transform(prop, node, context)
+
+                // Optimization: v-bind does not need runtime
+                transform_directive!(transform_v_bind, v_bind_directive);
+            }
+
+            AttributeOrBinding::VOn(v_on_directive) => {
+                // Skip v-on in SSR compilation
+                if ssr {
+                    continue;
+                }
+
+                // Inline before-update hooks need to force block so that it is invoked
+                // before children
+                if has_children
+                    && is_static_arg_of(v_on_directive.event.as_ref(), "vue:before-update")
+                {
+                    patch_markers.should_use_block = true;
+                }
+
+                // Special case for v-on with no argument
+                if v_on_directive.event.is_none() {
+                    patch_markers.has_dynamic_keys = true;
+
+                    let Some(ref exp) = v_on_directive.handler else {
+                        ctx.errors
+                            .push(TransformError::TemplateError(TemplateError {
+                                kind: TemplateErrorKind::VModelOnProps,
+                                span: v_on_directive.span,
+                            }));
+                        continue;
+                    };
+
+                    // Args
+                    let mut to_handlers_args = Vec::with_capacity(2);
+                    to_handlers_args.push(JsChildNode::ExpressionNode(Box::new(
+                        (**exp).to_owned().into(),
+                    )));
+
+                    if is_component {
+                        to_handlers_args.push(JsChildNode::ExpressionNode(Box::new(
+                            ExpressionNode::SimpleExpression(create_simple_expression_bool(true)),
+                        )));
+                    }
+
+                    // v-on="obj" -> toHandlers(obj)
+                    let to_handlers_expr =
+                        PropsExpression::CallExpression(Box::new(CallExpression {
+                            span: v_on_directive.span,
+                            callee: ctx.bindings_helper.helper(VueImports::ToHandlers),
+                            arguments: to_handlers_args,
+                        }));
+
+                    push_merge_arg!(to_handlers_expr);
+                }
+
+                let Some(directive_transform_result) =
+                    transforms.transform_v_on(ctx, v_on_directive, node)
+                else {
+                    continue;
+                };
+
+                if !ssr {
+                    for prop in directive_transform_result.props.iter() {
+                        analyze_patch_flag(
+                            &prop,
+                            &mut patch_markers,
+                            is_component,
+                            is_dynamic_component,
+                        );
+                    }
+                }
+
+                if let Some(true) = v_on_directive.event.as_ref().map(is_static_exp_str_or_expr) {
+                    // Is static
+                    properties.extend(directive_transform_result.props);
+                } else {
+                    push_merge_arg!(PropsExpression::ObjectExpression(Box::new(
+                        create_object_expression(directive_transform_result.props, node.span)
+                    )));
+                };
+
+                // Optimization: v-on does not need runtime
+            }
+        }
+    }
+
+    // Directives
+    if let Some(directives) = props.directives {
+        // Skip v-once/v-memo - they are handled by dedicated transforms.
+        // Skip v-is
+
+        if let Some(ref v_html) = directives.v_html {
+            transform_directive!(transform_v_html, v_html);
+        }
+
+        if let Some(ref v_text) = directives.v_text {
+            transform_directive!(transform_v_text, v_text);
+        }
+
+        if let Some(ref v_show) = directives.v_show {
+            transform_directive!(transform_v_show, v_show, VShow);
+        }
+
+        for v_model in directives.v_model.iter() {
+            transform_directive!(transform_v_model, v_model, VModel);
+        }
+
+        // Skip v-slot - it is handled by its dedicated transform.
+        if let Some(ref _v_slot) = directives.v_slot {
+            if !is_component {
+                // TODO Add span to v-slot directive
+                let span = DUMMY_SP;
+
+                ctx.errors
+                    .push(TransformError::TemplateError(TemplateError {
+                        span,
+                        kind: TemplateErrorKind::VSlotMisplaced,
+                    }));
+            }
+        }
+
+        // User directives
+        runtime_directives.reserve(directives.custom.len());
+        for user_directive in directives.custom.iter() {
+            runtime_directives.push(RuntimeDirective::Custom(user_directive.to_owned()));
+            // custom dirs may use beforeUpdate so they need to force blocks
+            // to ensure before-update gets called before children update
+            if has_children {
+                patch_markers.should_use_block = true;
+            }
+        }
+    }
+
+    let mut props_expression: Option<PropsExpression> = None;
+
+    // Has v-bind="object" or v-on="object", wrap with mergeProps
+    if !merge_args.is_empty() {
+        // Close up any not-yet-merged props
+        push_merge_arg!();
+
+        if merge_args.len() > 1 {
+            let merge_args = merge_args.into_iter().map(Into::into).collect();
+
+            props_expression = Some(PropsExpression::CallExpression(Box::new(
+                create_call_expression(
+                    ctx.bindings_helper.helper(VueImports::MergeProps),
+                    merge_args,
+                    node.span,
+                ),
+            )));
+        } else {
+            // Single v-bind with nothing else - no need for a mergeProps call
+            props_expression = merge_args.pop();
+        }
+    } else if !properties.is_empty() {
+        props_expression = Some(PropsExpression::ObjectExpression(Box::new(
+            create_object_expression(dedupe_properties(properties), node.span),
+        )));
+    }
+
+    // PatchFlags analysis
+    if patch_markers.has_dynamic_keys {
+        patch_markers.flags |= PatchFlags::FullProps;
+    } else {
+        if patch_markers.has_class_binding && !is_component {
+            patch_markers.flags |= PatchFlags::Class;
+        }
+        if patch_markers.has_style_binding && !is_component {
+            patch_markers.flags |= PatchFlags::Style;
+        }
+        if !patch_markers.dynamic_prop_names.is_empty() {
+            patch_markers.flags |= PatchFlags::Props;
+        }
+        if patch_markers.has_hydration_event_binding {
+            patch_markers.flags |= PatchFlags::NeedHydration;
+        }
+    }
+    if !patch_markers.should_use_block
+        && (patch_markers.flags.is_empty() || patch_markers.flags == PatchFlags::NeedHydration)
+        && (patch_markers.has_ref || patch_markers.has_vnode_hook || !runtime_directives.is_empty())
+    {
+        patch_markers.flags |= PatchFlags::NeedPatch;
+    }
+
+    // TODO Use `context.inSSR` instead of `ssr`
+    if let Some(props_expression_inner) = props_expression.take_if(|_| !ssr) {
+        match props_expression_inner {
+            // mergeProps call, do nothing
+            PropsExpression::CallExpression(_) => {
+                // Because we took the value, put it back
+                props_expression = Some(props_expression_inner);
+            }
+
+            PropsExpression::ObjectExpression(mut object_lit) => {
+                let mut class_prop = None;
+                let mut style_prop = None;
+                let mut has_dynamic_key = false;
+
+                for prop in object_lit.properties.iter_mut() {
+                    let key = &prop.key;
+
+                    if let Some(static_exp) = get_static_exp(key) {
+                        if static_exp.ast.sym == "class" {
+                            class_prop = Some(prop);
+                        } else if static_exp.ast.sym == "style" {
+                            style_prop = Some(prop);
+                        }
+                    } else if !key.is_handler_key() {
+                        has_dynamic_key = true;
+                    }
+                }
+
+                if has_dynamic_key {
+                    // Dynamic key binding, wrap with `normalizeProps`
+                    let args = vec![JsChildNode::ObjectExpression(object_lit)];
+
+                    props_expression = Some(PropsExpression::CallExpression(Box::new(
+                        create_call_expression(
+                            ctx.bindings_helper
+                                .helper(VueImports::NormalizeProps),
+                            args,
+                            DUMMY_SP,
+                        ),
+                    )));
+                } else {
+                    // No dynamic key
+                    if let Some(class_prop) = class_prop {
+                        if !is_static_exp(&class_prop.value) {
+                            let class_prop_value = std::mem::replace(
+                                &mut class_prop.value,
+                                create_call_expression(
+                                    ctx.bindings_helper
+                                        .helper(VueImports::NormalizeClass),
+                                    Vec::with_capacity(1),
+                                    DUMMY_SP,
+                                )
+                                .into(),
+                            );
+
+                            if let JsChildNode::CallExpression(ref mut call_expr) = class_prop.value
+                            {
+                                call_expr.arguments.push(class_prop_value);
+                            }
+                        }
+                    }
+
+                    if let Some(style_prop) = style_prop {
+                        // TODO This does an additional "is array" check, but `has_style_binding` already means `:style` was present.
+                        // Here's what `compiler-core` says:
+                        // v-bind:style and style both exist,
+                        // v-bind:style with static literal object
+                        if patch_markers.has_style_binding {
+                            let style_prop_value = std::mem::replace(
+                                &mut style_prop.value,
+                                create_call_expression(
+                                    ctx.bindings_helper
+                                        .helper(VueImports::NormalizeStyle),
+                                    Vec::with_capacity(1),
+                                    DUMMY_SP,
+                                )
+                                .into(),
+                            );
+
+                            if let JsChildNode::CallExpression(ref mut call_expr) = style_prop.value
+                            {
+                                call_expr.arguments.push(style_prop_value);
+                            }
+                        }
+                    }
+
+                    // Because we took the value, put it back
+                    props_expression = Some(PropsExpression::ObjectExpression(object_lit));
+                }
+            }
+
+            // Single v-bind
+            PropsExpression::ExpressionNode(expr) => {
+                let args = vec![JsChildNode::CallExpression(Box::new(
+                    create_call_expression(
+                        ctx.bindings_helper
+                            .helper(VueImports::GuardReactiveProps),
+                        vec![JsChildNode::ExpressionNode(expr)],
+                        DUMMY_SP,
+                    ),
+                ))];
+
+                props_expression = Some(PropsExpression::CallExpression(Box::new(
+                    create_call_expression(
+                        ctx.bindings_helper
+                            .helper(VueImports::NormalizeProps),
+                        args,
+                        DUMMY_SP,
+                    ),
+                )));
+            }
+        }
+    }
+
+    // TODO Finish the function but keep in mind that `buildProps` is called on node exit,
+    // i.e. after all the children have been transformed.
+    // I likely have to re-think the scoping mechanism and identifiers injection to accomodate for the change
+
+    // The current design of `v-for` is quite convoluted, but the actual function which is executed is `processFor`
+    // which manages the scope and identifiers and processes the code generation on exit,
+    // the code generation itself is passed to `processFor` (TODO find a good compromise for supporting CSR + SSR),
+    // and the implementation is doing the actual transform on children.
+
+    // For some reason the implementation is surrounded in `createStructuralDirectiveTransform`
+    // which basically filters the directive execution to elements only (probably does not apply to Fervid which has visit_element_node)
+    // and ignores `vSlot` (why??) plus for some reason the transform is recursive?.. (probably not applying to Fervid which does not allow mutating the tree at random)
+
+    BuildPropsResult {
+        patch_hints: PatchHints {
+            flags: patch_markers.flags,
+            should_use_block: patch_markers.should_use_block,
+            props: patch_markers.dynamic_prop_names,
+        },
+        props: props_expression,
+        directives: runtime_directives,
+    }
+}
+
+fn analyze_patch_flag(
+    prop: &Property,
+    patch_markers: &mut PatchMarkers,
+    is_component: bool,
+    is_dynamic_component: bool,
+) {
+    let Some(key) = get_static_exp(&prop.key) else {
+        patch_markers.has_dynamic_keys = true;
+        return;
+    };
+
+    let name = &key.ast.sym;
+
+    let is_event_handler = is_on(&name);
+    let is_reserved = is_reserved_prop(&name);
+
+    if is_event_handler
+        && (!is_component || is_dynamic_component)
+        // omit the flag for click handlers because hydration gives click
+        // dedicated fast path.
+        && !name.eq_ignore_ascii_case("onclick")
+        // omit v-model handlers
+        && name != "onUpdate:modelValue"
+        // omit onVnodeXXX hooks
+        && !is_reserved
+    {
+        patch_markers.has_hydration_event_binding = true;
+    }
+
+    if is_event_handler && is_reserved {
+        patch_markers.has_vnode_hook = true;
+    }
+
+    // TODO
+    // if is_event_handler {
+    //     if let Some(call_expr) = value.and_then(|v| v.as_call()) {
+    //         value = call_expr.args.first().map(|v| &v.expr);
+    //     }
+    // }
+
+    // if (
+    //     value.type === NodeTypes.JS_CACHE_EXPRESSION ||
+    //     ((value.type === NodeTypes.SIMPLE_EXPRESSION ||
+    //       value.type === NodeTypes.COMPOUND_EXPRESSION) &&
+    //       getConstantType(value, context) > 0)
+    // ) {
+    //     // skip if the prop is a cached handler or has constant value
+    //     return
+    // }
+
+    match name.as_str() {
+        "ref" => patch_markers.has_ref = true,
+        "class" => patch_markers.has_class_binding = true,
+        "style" => patch_markers.has_style_binding = true,
+        x if x != "key" && !patch_markers.dynamic_prop_names.contains(&name) => {
+            patch_markers.dynamic_prop_names.push(name.to_owned());
+        }
+        _ => {}
+    }
+
+    if is_component
+        && (name == "class" || name == "style")
+        && !patch_markers.dynamic_prop_names.contains(&name)
+    {
+        patch_markers.dynamic_prop_names.push(name.to_owned());
+    }
+}
+
+fn dedupe_properties(properties: Vec<Property>) -> Vec<Property> {
+    todo!()
+}
+
+fn is_component_tag(tag: &StartingTag) -> bool {
+    matches!(tag.tag_name.as_str(), "component" | "Component")
+}
+
+impl From<&Expr> for PropsExpression {
+    fn from(value: &Expr) -> Self {
+        match value {
+            Expr::Call(call_expr) => {
+                PropsExpression::CallExpression(Box::new(call_expr.to_owned().into()))
+            }
+            Expr::Object(obj_expr) => {
+                PropsExpression::ObjectExpression(Box::new(ObjectExpression {
+                    properties: obj_expr.props.iter().cloned().map(Into::into).collect(),
+                    span: obj_expr.span,
+                }))
+            }
+            _ => PropsExpression::ExpressionNode(Box::new(value.to_owned().into())),
+        }
+    }
+}
+
+impl Into<JsChildNode> for PropsExpression {
+    fn into(self) -> JsChildNode {
+        match self {
+            PropsExpression::ObjectExpression(o) => JsChildNode::ObjectExpression(o),
+            PropsExpression::CallExpression(c) => JsChildNode::CallExpression(c),
+            PropsExpression::ExpressionNode(e) => JsChildNode::ExpressionNode(e),
+        }
+    }
+}
+
+// TODO: Move to transform core/utils.rs
+fn is_static_arg_of(arg: Option<&StrOrExpr>, name: &str) -> bool {
+    match arg {
+        Some(StrOrExpr::Str(s)) if s == name => true,
+        Some(StrOrExpr::Expr(expr)) => match expr.as_ref() {
+            Expr::Lit(Lit::Str(s)) if s.value == name => true,
+            _ => false,
+        },
+        _ => false,
+    }
+}
+fn is_static_exp(arg: &JsChildNode) -> bool {
+    match arg {
+        JsChildNode::ExpressionNode(expression_node) => match expression_node.as_ref() {
+            ExpressionNode::SimpleExpression(simple_expression_node)
+                if simple_expression_node.is_static =>
+            {
+                true
+            }
+            _ => false,
+        },
+        _ => false,
+    }
+}
+fn is_static_exp_str_or_expr(arg: &StrOrExpr) -> bool {
+    match arg {
+        StrOrExpr::Str(_) => true,
+        StrOrExpr::Expr(expr) => expr.is_lit(),
+    }
+}
+fn get_static_exp(arg: &ExpressionPropNameNode) -> Option<&SimpleExpressionPropNameNode> {
+    match arg {
+        ExpressionPropNameNode::SimpleExpression(s) if s.is_static => Some(&s),
+        _ => None,
+    }
+}
+
+// TODO Move to ??/general.rs
+fn is_on(name: &str) -> bool {
+    let mut chars = name.chars();
+    matches!((chars.next(), chars.next(), chars.next()), (Some('o'), Some('n'), Some(x)) if x.is_ascii_uppercase())
+}
+
+static RESERVED_PROPS: phf::Set<&'static str> = phf_set! {
+  "key",
+  "ref",
+  "ref_for",
+  "ref_key",
+  "onVnodeBeforeMount",
+  "onVnodeMounted",
+  "onVnodeBeforeUpdate",
+  "onVnodeUpdated",
+  "onVnodeBeforeUnmount",
+  "onVnodeUnmounted"
+};
+fn is_reserved_prop(key: &str) -> bool {
+    RESERVED_PROPS.contains(key)
+}
diff --git a/crates/fervid_transform/src/template/v_model.rs b/crates/fervid_transform/src/template/v_model.rs
new file mode 100644
index 00000000..4fc749a9
--- /dev/null
+++ b/crates/fervid_transform/src/template/v_model.rs
@@ -0,0 +1,76 @@
+use fervid_core::{BindingTypes, ElementNode, VModelDirective};
+use swc_core::common::Spanned;
+
+use crate::{
+    error::{TemplateError, TemplateErrorKind, TransformError},
+    TransformSfcContext,
+};
+
+// Adapted from https://github.com/vuejs/core/blob/24fccb4ee4139d41df0e395bce96ce7fbb6a50a9/packages/compiler-core/src/transforms/vModel.ts#L23-L156
+pub fn transform_model(
+    ctx: &mut TransformSfcContext,
+    v_model: &mut VModelDirective,
+    element_node: &ElementNode,
+    scope_to_use: u32,
+) {
+    // Note: expression is always defined on `v_model`, guaranteed by the parser
+
+    // Check the binding type of the expression
+    let v_model_ident = v_model.value.as_ident();
+    let v_model_value_span = v_model.value.span();
+    let binding_type = v_model_ident.and_then(|v| {
+        // TODO: Use binding metadata
+        ctx.bindings_helper
+            .setup_bindings
+            .iter()
+            .find(|it| it.sym == v.sym)
+            .map(|v| v.binding_type)
+    });
+
+    // Using v-model on props
+    if matches!(
+        binding_type,
+        Some(BindingTypes::Props | BindingTypes::PropsAliased)
+    ) {
+        ctx.errors
+            .push(TransformError::TemplateError(TemplateError {
+                kind: TemplateErrorKind::VModelOnProps,
+                span: v_model_value_span,
+            }));
+        return;
+    }
+
+    let maybe_ref = ctx.bindings_helper.template_generation_mode.is_inline()
+        && matches!(
+            binding_type,
+            Some(BindingTypes::SetupLet | BindingTypes::SetupRef | BindingTypes::SetupMaybeRef)
+        );
+
+    // Using a malformed expression
+    if !v_model.value.is_member() && !maybe_ref {
+        ctx.errors
+            .push(TransformError::TemplateError(TemplateError {
+                span: v_model_value_span,
+                kind: TemplateErrorKind::VModelMalformedExpression,
+            }));
+        return;
+    }
+
+    // Using v-model on a scope variable
+    if v_model_ident.is_some_and(|ident| {
+        matches!(
+            ctx.bindings_helper
+                .find_in_template_scopes(scope_to_use, &ident.sym),
+            BindingTypes::TemplateLocal,
+        )
+    }) {
+        ctx.errors
+            .push(TransformError::TemplateError(TemplateError {
+                span: v_model_value_span,
+                kind: TemplateErrorKind::VModelOnScopeVariable,
+            }));
+        return;
+    }
+
+    todo!("finish the checks")
+}

From 52b38c1546bd8c8fc17fcaeb4240cba4a52f7a5a Mon Sep 17 00:00:00 2001
From: Marsel Shaikhin <phoenix.apps@proton.me>
Date: Fri, 26 Dec 2025 18:37:15 +0100
Subject: [PATCH 2/9] feat: add node transforms wip

---
 crates/fervid/benches/codegen_bench.rs        |   1 +
 crates/fervid/src/lib.rs                      |   5 +-
 crates/fervid_transform/Cargo.toml            |   4 +
 crates/fervid_transform/src/lib.rs            |   1 +
 .../src/script/resolve_type.rs                |   1 +
 crates/fervid_transform/src/structs.rs        |   5 +-
 .../src/template/ast_transform.rs             | 102 +++++++-------
 .../src/template/directive_transforms.rs      |   2 +-
 crates/fervid_transform/src/template/mod.rs   |   1 +
 .../src/template/node_transforms.rs           | 127 ++++++++++++++++++
 .../src/template/transform_element.rs         |   4 +
 11 files changed, 205 insertions(+), 48 deletions(-)
 create mode 100644 crates/fervid_transform/src/template/node_transforms.rs

diff --git a/crates/fervid/benches/codegen_bench.rs b/crates/fervid/benches/codegen_bench.rs
index c5b214f8..d6f60a1e 100644
--- a/crates/fervid/benches/codegen_bench.rs
+++ b/crates/fervid/benches/codegen_bench.rs
@@ -35,6 +35,7 @@ fn codegen_benchmark(c: &mut Criterion) {
                     warnings: vec![],
                     directive_scopes: Default::default(),
                     directive_transforms: Default::default(),
+                    node_transforms: Default::default(),
                 };
 
                 fervid_transform::template::transform_and_record_template(template_block, &mut ctx);
diff --git a/crates/fervid/src/lib.rs b/crates/fervid/src/lib.rs
index d7191e72..d81a87f0 100644
--- a/crates/fervid/src/lib.rs
+++ b/crates/fervid/src/lib.rs
@@ -155,10 +155,11 @@ pub fn compile(source: &str, options: CompileOptions) -> Result<CompileResult, C
         let num = hasher.finish();
         format!("{:x}", num)
     };
-    
+
     // Get the correct transforms
     // TODO
     let directive_transforms = Default::default();
+    let node_transforms = Default::default();
 
     // Transform
     let mut transform_errors = Vec::new();
@@ -170,6 +171,7 @@ pub fn compile(source: &str, options: CompileOptions) -> Result<CompileResult, C
         filename: &options.filename,
         transform_asset_urls: options.transform_asset_urls.unwrap_or_default(),
         directive_transforms,
+        node_transforms,
     };
     let transform_result = transform_sfc(sfc, transform_options, &mut transform_errors);
     all_errors.extend(transform_errors.into_iter().map(From::from));
@@ -268,6 +270,7 @@ pub fn compile_sync_naive(source: &str, is_prod: bool) -> Result<String, String>
         filename: "anonymous.vue",
         transform_asset_urls: TransformAssetUrlsConfig::default(),
         directive_transforms: Default::default(),
+        node_transforms: Default::default(),
     };
     let transform_result = transform_sfc(sfc, transform_options, &mut transform_errors);
 
diff --git a/crates/fervid_transform/Cargo.toml b/crates/fervid_transform/Cargo.toml
index 4663982f..d19124ac 100644
--- a/crates/fervid_transform/Cargo.toml
+++ b/crates/fervid_transform/Cargo.toml
@@ -29,3 +29,7 @@ enum_dispatch = "0.3.13"
 [dev-dependencies]
 swc_ecma_codegen = { workspace = true }
 swc_ecma_parser = { workspace = true }
+
+[features]
+default = []
+new-pipeline = []
diff --git a/crates/fervid_transform/src/lib.rs b/crates/fervid_transform/src/lib.rs
index e7f5af4e..6b5c7d3a 100644
--- a/crates/fervid_transform/src/lib.rs
+++ b/crates/fervid_transform/src/lib.rs
@@ -128,6 +128,7 @@ impl TransformSfcContext {
             errors: vec![],
             warnings: vec![],
             directive_transforms: options.directive_transforms.to_owned(),
+            node_transforms: options.node_transforms.to_owned(),
         }
     }
 
diff --git a/crates/fervid_transform/src/script/resolve_type.rs b/crates/fervid_transform/src/script/resolve_type.rs
index 8a90f01e..5ba57cd9 100644
--- a/crates/fervid_transform/src/script/resolve_type.rs
+++ b/crates/fervid_transform/src/script/resolve_type.rs
@@ -4138,6 +4138,7 @@ mod tests {
                 filename: "./Test.vue",
                 transform_asset_urls: crate::TransformAssetUrlsConfig::default(),
                 directive_transforms: Default::default(),
+                node_transforms: Default::default(),
             },
         );
 
diff --git a/crates/fervid_transform/src/structs.rs b/crates/fervid_transform/src/structs.rs
index b2440b8f..53e73a29 100644
--- a/crates/fervid_transform/src/structs.rs
+++ b/crates/fervid_transform/src/structs.rs
@@ -17,7 +17,7 @@ use swc_core::{
     },
 };
 
-use crate::{error::TransformError, template::directive_transforms::DirectiveTransformsProvider};
+use crate::{error::TransformError, template::{directive_transforms::DirectiveTransformsProvider, node_transforms::NodeTransformsProvider}};
 
 /// Context object. Currently very minimal but may grow over time.
 pub struct TransformSfcContext {
@@ -37,6 +37,7 @@ pub struct TransformSfcContext {
     pub errors: Vec<TransformError>,
     pub warnings: Vec<TransformError>,
     pub directive_transforms: DirectiveTransformsProvider,
+    pub node_transforms: NodeTransformsProvider,
 }
 
 #[derive(Debug, Clone, Copy, Default)]
@@ -269,6 +270,7 @@ pub struct TransformSfcOptions<'s> {
     pub filename: &'s str,
     pub transform_asset_urls: TransformAssetUrlsConfig,
     pub directive_transforms: DirectiveTransformsProvider,
+    pub node_transforms: NodeTransformsProvider,
 }
 
 pub struct TransformSfcResult {
@@ -322,6 +324,7 @@ impl TransformSfcContext {
             errors: vec![],
             warnings: vec![],
             directive_transforms: Default::default(),
+            node_transforms: Default::default(),
         }
     }
 }
diff --git a/crates/fervid_transform/src/template/ast_transform.rs b/crates/fervid_transform/src/template/ast_transform.rs
index e1fb0013..adbe0d07 100644
--- a/crates/fervid_transform/src/template/ast_transform.rs
+++ b/crates/fervid_transform/src/template/ast_transform.rs
@@ -296,6 +296,63 @@ trait VisitMut {
 
 impl Visitor for TemplateVisitor<'_> {
     fn visit_element_node(&mut self, element_node: &mut ElementNode) {
+        #[cfg(feature = "new-pipeline")]
+        return self.visit_element_node_new(element_node);
+
+        #[cfg(not(feature = "new-pipeline"))]
+        return self.visit_element_node_old(element_node);
+    }
+
+    fn visit_conditional_node(&mut self, conditional_node: &mut ConditionalNodeSequence) {
+        // In this function, conditions are transformed first
+        // without updating the template scope and collecting its variables.
+        // I believe this is a correct way of doing it, because in VDOM the condition
+        // wraps around the node (`condition ? if_node : else_node`).
+        // However, I am not too sure about the `v-if` & `v-slot` combined usage.
+
+        self.ctx
+            .bindings_helper
+            .transform_expr(&mut conditional_node.if_node.condition, self.current_scope);
+        self.visit_element_node(&mut conditional_node.if_node.node);
+
+        for else_if_node in conditional_node.else_if_nodes.iter_mut() {
+            self.ctx
+                .bindings_helper
+                .transform_expr(&mut else_if_node.condition, self.current_scope);
+            self.visit_element_node(&mut else_if_node.node);
+        }
+
+        if let Some(ref mut else_node) = conditional_node.else_node {
+            self.visit_element_node(else_node);
+        }
+    }
+
+    fn visit_interpolation(&mut self, interpolation: &mut Interpolation) {
+        interpolation.template_scope = self.current_scope;
+
+        let has_js = self
+            .ctx
+            .bindings_helper
+            .transform_expr(&mut interpolation.value, self.current_scope);
+
+        interpolation.patch_flag = has_js;
+    }
+}
+
+impl TemplateVisitor<'_> {
+    pub fn new(ctx: &mut TransformSfcContext) -> TemplateVisitor {
+        TemplateVisitor {
+            ctx,
+            current_scope: 0,
+            v_for_scope: false,
+        }
+    }
+
+    fn visit_element_node_new(&mut self, element_node: &mut ElementNode) {
+
+    }
+
+    fn visit_element_node_old(&mut self, element_node: &mut ElementNode) {
         let parent_scope = self.current_scope;
         let mut scope_to_use = parent_scope;
 
@@ -702,51 +759,6 @@ impl Visitor for TemplateVisitor<'_> {
         self.current_scope = parent_scope;
     }
 
-    fn visit_conditional_node(&mut self, conditional_node: &mut ConditionalNodeSequence) {
-        // In this function, conditions are transformed first
-        // without updating the template scope and collecting its variables.
-        // I believe this is a correct way of doing it, because in VDOM the condition
-        // wraps around the node (`condition ? if_node : else_node`).
-        // However, I am not too sure about the `v-if` & `v-slot` combined usage.
-
-        self.ctx
-            .bindings_helper
-            .transform_expr(&mut conditional_node.if_node.condition, self.current_scope);
-        self.visit_element_node(&mut conditional_node.if_node.node);
-
-        for else_if_node in conditional_node.else_if_nodes.iter_mut() {
-            self.ctx
-                .bindings_helper
-                .transform_expr(&mut else_if_node.condition, self.current_scope);
-            self.visit_element_node(&mut else_if_node.node);
-        }
-
-        if let Some(ref mut else_node) = conditional_node.else_node {
-            self.visit_element_node(else_node);
-        }
-    }
-
-    fn visit_interpolation(&mut self, interpolation: &mut Interpolation) {
-        interpolation.template_scope = self.current_scope;
-
-        let has_js = self
-            .ctx
-            .bindings_helper
-            .transform_expr(&mut interpolation.value, self.current_scope);
-
-        interpolation.patch_flag = has_js;
-    }
-}
-
-impl TemplateVisitor<'_> {
-    pub fn new(ctx: &mut TransformSfcContext) -> TemplateVisitor {
-        TemplateVisitor {
-            ctx,
-            current_scope: 0,
-            v_for_scope: false,
-        }
-    }
-
     // TODO Maybe do this in parser instead, because it sometimes needs this info
     fn recognize_element_kind(&self, starting_tag: &StartingTag) -> ElementKind {
         let tag_name = &starting_tag.tag_name;
diff --git a/crates/fervid_transform/src/template/directive_transforms.rs b/crates/fervid_transform/src/template/directive_transforms.rs
index 96526ac8..d468649e 100644
--- a/crates/fervid_transform/src/template/directive_transforms.rs
+++ b/crates/fervid_transform/src/template/directive_transforms.rs
@@ -2,7 +2,7 @@ use std::fmt::Debug;
 
 use enum_dispatch::enum_dispatch;
 use fervid_core::{ElementNode, Property, VBindDirective, VModelDirective, VOnDirective};
-use swc_core::ecma::ast::{Expr, PropOrSpread};
+use swc_core::ecma::ast::Expr;
 
 use crate::TransformSfcContext;
 
diff --git a/crates/fervid_transform/src/template/mod.rs b/crates/fervid_transform/src/template/mod.rs
index e95c7ef9..08680413 100644
--- a/crates/fervid_transform/src/template/mod.rs
+++ b/crates/fervid_transform/src/template/mod.rs
@@ -5,6 +5,7 @@ pub mod core;
 pub mod dom;
 pub mod directive_transforms;
 pub mod expr_transform;
+pub mod node_transforms;
 pub mod js_builtins;
 pub mod resolutions;
 pub mod transform_element;
diff --git a/crates/fervid_transform/src/template/node_transforms.rs b/crates/fervid_transform/src/template/node_transforms.rs
new file mode 100644
index 00000000..824c41b3
--- /dev/null
+++ b/crates/fervid_transform/src/template/node_transforms.rs
@@ -0,0 +1,127 @@
+use std::fmt::Debug;
+
+use enum_dispatch::enum_dispatch;
+use fervid_core::ElementNode;
+
+use crate::{template::transform_element::post_transform_element_node, TransformSfcContext};
+
+#[enum_dispatch]
+pub trait NodeTransforms: Debug {
+    fn pre_transform_element_node(&self, ctx: &mut TransformSfcContext, node: &mut ElementNode);
+    fn post_transform_element_node(&self, ctx: &mut TransformSfcContext, node: &mut ElementNode);
+}
+
+// Transforms should not hold any data because they need to be copied,
+// any state should be stored on the `&mut ctx` provided to the functions.
+
+#[derive(Debug, Clone, Default)]
+pub struct BaseNodeTransform;
+
+#[derive(Debug, Clone, Default)]
+pub struct DomNodeTransform;
+
+#[derive(Debug, Clone, Default)]
+pub struct SsrNodeTransform;
+
+#[derive(Debug, Clone)]
+#[enum_dispatch(NodeTransforms)]
+pub enum NodeTransformsProvider {
+    Base(BaseNodeTransform),
+    Dom(DomNodeTransform),
+    Ssr(SsrNodeTransform),
+    // Note: Supporting custom transforms bloats the size of `NodeTransformsProvider` substantially
+    // due to struct aligning.
+    // Custom(Rc<dyn NodeTransforms>),
+}
+
+impl Default for NodeTransformsProvider {
+    fn default() -> Self {
+        Self::Base(BaseNodeTransform::default())
+    }
+}
+
+// Base transforms are provided as default trait implementations
+impl NodeTransforms for BaseNodeTransform {
+    fn pre_transform_element_node(&self, _ctx: &mut TransformSfcContext, _node: &mut ElementNode) {
+        // transformOnce,
+        // transformIf,
+        // transformMemo,
+        // transformFor,
+        // prefixIdentifiers ? trackVForSlotScopes,
+        // prefixIdentifiers ? transformExpression,
+        // transformSlotOutlet,
+
+        // transformElement - no pre hook
+
+        // trackSlotScopes,
+        // transformText,
+        // TODO - User transforms in the separate implementation?
+    }
+
+    fn post_transform_element_node(&self, ctx: &mut TransformSfcContext, node: &mut ElementNode) {
+        // transformOnce,
+        // transformIf,
+        // transformMemo,
+        // transformFor,
+        // prefixIdentifiers ? trackVForSlotScopes,
+        // prefixIdentifiers ? transformExpression,
+        // transformSlotOutlet,
+
+        // transformElement
+        post_transform_element_node(node, ctx);
+
+        // trackSlotScopes,
+        // transformText,
+        // TODO - User transforms in the separate implementation?
+    }
+}
+
+impl NodeTransforms for DomNodeTransform {
+    fn pre_transform_element_node(&self, ctx: &mut TransformSfcContext, node: &mut ElementNode) {
+        BaseNodeTransform.pre_transform_element_node(ctx, node);
+        // Core node transforms;
+        // ignoreSideEffectTags;
+        // transformStyle;
+        // DEV ? transformTransition;
+        // DEV ? validateHtmlNesting;
+    }
+
+    fn post_transform_element_node(&self, ctx: &mut TransformSfcContext, node: &mut ElementNode) {
+        BaseNodeTransform.post_transform_element_node(ctx, node);
+        // Core node transforms;
+        // ignoreSideEffectTags;
+        // transformStyle;
+        // DEV ? transformTransition;
+        // DEV ? validateHtmlNesting;
+    }
+}
+
+impl NodeTransforms for SsrNodeTransform {
+    fn pre_transform_element_node(&self, _ctx: &mut TransformSfcContext, _node: &mut ElementNode) {
+        // ssrTransformIf
+        // ssrTransformFor
+        // trackVForSlotScopes
+        // transformExpression
+        // ssrTransformSlotOutlet
+        // ssrInjectFallthroughAttrs
+        // ssrInjectCssVars
+        // ssrTransformElement
+        // ssrTransformComponent
+        // trackSlotScopes
+        // transformStyle
+    }
+
+    fn post_transform_element_node(&self, _ctx: &mut TransformSfcContext, _node: &mut ElementNode) {
+        // ssrTransformIf
+        // ssrTransformFor
+        // trackVForSlotScopes
+        // transformExpression
+        // ssrTransformSlotOutlet
+        // ssrInjectFallthroughAttrs
+        // ssrInjectCssVars
+        // ssrTransformElement
+        // ssrTransformComponent
+        // trackSlotScopes
+        // transformStyle
+    }
+}
diff --git a/crates/fervid_transform/src/template/transform_element.rs b/crates/fervid_transform/src/template/transform_element.rs
index bc148348..334bf0cc 100644
--- a/crates/fervid_transform/src/template/transform_element.rs
+++ b/crates/fervid_transform/src/template/transform_element.rs
@@ -59,6 +59,10 @@ pub struct PatchMarkers {
     pub should_use_block: bool,
 }
 
+pub fn post_transform_element_node(node: &ElementNode, ctx: &mut TransformSfcContext) {
+
+}
+
 pub fn build_props(
     node: &ElementNode,
     ctx: &mut TransformSfcContext,

From f1f071ce688d4ef7f2d93c66637ca2c63a0b41da Mon Sep 17 00:00:00 2001
From: Marsel Shaikhin <phoenix.apps@proton.me>
Date: Thu, 8 Jan 2026 23:21:34 +0100
Subject: [PATCH 3/9] feat: implement resolve_component_type

---
 crates/fervid/benches/codegen_bench.rs        |   2 +
 crates/fervid/src/lib.rs                      |   2 +
 crates/fervid/src/parser_old/core.rs          |   4 +-
 .../fervid_codegen/src/builtins/component.rs  |  18 +-
 .../fervid_codegen/src/builtins/keepalive.rs  |   8 +-
 crates/fervid_codegen/src/builtins/mod.rs     |   4 +-
 crates/fervid_codegen/src/builtins/slot.rs    |  10 +-
 .../fervid_codegen/src/builtins/suspense.rs   |   8 +-
 .../fervid_codegen/src/builtins/teleport.rs   |   8 +-
 .../fervid_codegen/src/builtins/transition.rs |   8 +-
 .../src/builtins/transition_group.rs          |   8 +-
 crates/fervid_codegen/src/components/mod.rs   | 110 ++++----
 .../src/control_flow/codegen.rs               |   2 +-
 .../src/control_flow/conditional_seq.rs       |  20 +-
 .../src/control_flow/slotted_iterator.rs      |  12 +-
 .../fervid_codegen/src/directives/v_html.rs   |   6 +-
 .../fervid_codegen/src/directives/v_text.rs   |   6 +-
 crates/fervid_codegen/src/elements/mod.rs     |  14 +-
 crates/fervid_core/src/ast.rs                 |  38 +--
 crates/fervid_core/src/bindings.rs            |   5 +-
 crates/fervid_core/src/structs.rs             |   3 +-
 crates/fervid_core/src/vue_builtins.rs        |   2 +
 crates/fervid_core/src/vue_imports.rs         |  20 +-
 crates/fervid_parser/src/template.rs          |  43 ++-
 crates/fervid_transform/src/lib.rs            |   7 +
 crates/fervid_transform/src/structs.rs        |  17 +-
 .../src/template/ast_transform.rs             |  84 ++----
 .../src/template/core/v_bind.rs               |   1 +
 .../src/template/core/v_model.rs              |   1 +
 .../src/template/core/v_on.rs                 |   1 +
 .../src/template/directive_transforms.rs      |   2 +-
 .../fervid_transform/src/template/dom/mod.rs  |   1 +
 crates/fervid_transform/src/template/mod.rs   |   4 +-
 .../src/template/node_transforms.rs           |   2 +-
 .../src/template/transform_element.rs         | 258 +++++++++++++++---
 crates/fervid_transform/src/template/utils.rs |  86 +++++-
 cspell.json                                   |   4 +-
 37 files changed, 573 insertions(+), 256 deletions(-)

diff --git a/crates/fervid/benches/codegen_bench.rs b/crates/fervid/benches/codegen_bench.rs
index d6f60a1e..0a97d9aa 100644
--- a/crates/fervid/benches/codegen_bench.rs
+++ b/crates/fervid/benches/codegen_bench.rs
@@ -25,6 +25,7 @@ fn codegen_benchmark(c: &mut Criterion) {
                 let filename = "anonymous.vue".to_string();
                 let mut ctx = TransformSfcContext {
                     filename: filename.to_owned(),
+                    self_name: None,
                     bindings_helper: BindingsHelper::default(),
                     is_ce: false,
                     props_destructure: PropsDestructureConfig::default(),
@@ -34,6 +35,7 @@ fn codegen_benchmark(c: &mut Criterion) {
                     errors: vec![],
                     warnings: vec![],
                     directive_scopes: Default::default(),
+                    current_template_scope: 0,
                     directive_transforms: Default::default(),
                     node_transforms: Default::default(),
                 };
diff --git a/crates/fervid/src/lib.rs b/crates/fervid/src/lib.rs
index d81a87f0..c3fe5acd 100644
--- a/crates/fervid/src/lib.rs
+++ b/crates/fervid/src/lib.rs
@@ -27,6 +27,8 @@
 //!   scope_id: "filehash",
 //!   filename: "input.vue",
 //!   transform_asset_urls: fervid_transform::TransformAssetUrlsConfig::default(),
+//!   directive_transforms: Default::default(),
+//!   node_transforms: Default::default(),
 //! };
 //! let transform_result = fervid_transform::transform_sfc(sfc, transform_options, &mut transform_errors);
 //!
diff --git a/crates/fervid/src/parser_old/core.rs b/crates/fervid/src/parser_old/core.rs
index c688b647..1a1a9164 100644
--- a/crates/fervid/src/parser_old/core.rs
+++ b/crates/fervid/src/parser_old/core.rs
@@ -319,7 +319,7 @@ pub fn parse_element_node(input: &str) -> IResult<&str, Node> {
                 starting_tag,
                 children: vec![],
                 template_scope: 0,
-                kind: ElementKind::Element,
+                tag_type: ElementKind::Element,
                 patch_hints: Default::default(),
                 span: DUMMY_SP, // TODO
             }),
@@ -346,7 +346,7 @@ pub fn parse_element_node(input: &str) -> IResult<&str, Node> {
             starting_tag,
             children,
             template_scope: 0,
-            kind: ElementKind::Element,
+            tag_type: ElementKind::Element,
             patch_hints: Default::default(),
             span: DUMMY_SP, // TODO
         }),
diff --git a/crates/fervid_codegen/src/builtins/component.rs b/crates/fervid_codegen/src/builtins/component.rs
index 96a79c24..25d03b58 100644
--- a/crates/fervid_codegen/src/builtins/component.rs
+++ b/crates/fervid_codegen/src/builtins/component.rs
@@ -114,7 +114,7 @@ mod tests {
                 // <component></component>
                 test_out(
                     ElementNode {
-                        kind: ElementKind::Builtin(BuiltinType::Component),
+                        tag_type: ElementKind::Builtin(BuiltinType::Component),
                         starting_tag: StartingTag {
                             tag_name: "component".into(),
                             attributes: vec![],
@@ -137,7 +137,7 @@ mod tests {
         // <component is="div"></component>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::Component),
+                tag_type: ElementKind::Builtin(BuiltinType::Component),
                 starting_tag: StartingTag {
                     tag_name: "component".into(),
                     attributes: vec![regular_attribute("is", "div")],
@@ -157,7 +157,7 @@ mod tests {
         // <component :is="foo"></component>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::Component),
+                tag_type: ElementKind::Builtin(BuiltinType::Component),
                 starting_tag: StartingTag {
                     tag_name: "component".into(),
                     attributes: vec![v_bind_attribute("is", "foo")],
@@ -177,7 +177,7 @@ mod tests {
         // <component is="div" foo="bar" :baz="qux"></component>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::Component),
+                tag_type: ElementKind::Builtin(BuiltinType::Component),
                 starting_tag: StartingTag {
                     tag_name: "component".into(),
                     attributes: vec![
@@ -201,7 +201,7 @@ mod tests {
         // <component is="div">foobar</component>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::Component),
+                tag_type: ElementKind::Builtin(BuiltinType::Component),
                 starting_tag: StartingTag {
                     tag_name: "component".into(),
                     attributes: vec![regular_attribute("is", "div")],
@@ -223,14 +223,14 @@ mod tests {
         // </component>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::Component),
+                tag_type: ElementKind::Builtin(BuiltinType::Component),
                 starting_tag: StartingTag {
                     tag_name: "component".into(),
                     attributes: vec![regular_attribute("is", "div")],
                     directives: None,
                 },
                 children: vec![Node::Element(ElementNode {
-                    kind: ElementKind::Element,
+                    tag_type: ElementKind::Element,
                     starting_tag: StartingTag {
                         tag_name: "template".into(),
                         attributes: vec![],
@@ -265,7 +265,7 @@ mod tests {
         // </component>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::Component),
+                tag_type: ElementKind::Builtin(BuiltinType::Component),
                 starting_tag: StartingTag {
                     tag_name: "component".into(),
                     attributes: vec![
@@ -278,7 +278,7 @@ mod tests {
                 children: vec![
                     Node::Text("foobar".into(), DUMMY_SP),
                     Node::Element(ElementNode {
-                        kind: ElementKind::Element,
+                        tag_type: ElementKind::Element,
                         starting_tag: StartingTag {
                             tag_name: "template".into(),
                             attributes: vec![],
diff --git a/crates/fervid_codegen/src/builtins/keepalive.rs b/crates/fervid_codegen/src/builtins/keepalive.rs
index 784d61e9..05640471 100644
--- a/crates/fervid_codegen/src/builtins/keepalive.rs
+++ b/crates/fervid_codegen/src/builtins/keepalive.rs
@@ -73,7 +73,7 @@ mod tests {
         // <keep-alive></keep-alive>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::KeepAlive),
+                tag_type: ElementKind::Builtin(BuiltinType::KeepAlive),
                 starting_tag: StartingTag {
                     tag_name: "keep-alive".into(),
                     attributes: vec![],
@@ -93,7 +93,7 @@ mod tests {
         // <keep-alive foo="bar" :baz="qux"></keep-alive>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::KeepAlive),
+                tag_type: ElementKind::Builtin(BuiltinType::KeepAlive),
                 starting_tag: StartingTag {
                     tag_name: "keep-alive".into(),
                     attributes: vec![
@@ -116,7 +116,7 @@ mod tests {
         // <keep-alive>foobar</keep-alive>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::KeepAlive),
+                tag_type: ElementKind::Builtin(BuiltinType::KeepAlive),
                 starting_tag: StartingTag {
                     tag_name: "keep-alive".into(),
                     attributes: vec![],
@@ -136,7 +136,7 @@ mod tests {
         // <keep-alive foo="bar" :baz="qux">foobar</keep-alive>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::KeepAlive),
+                tag_type: ElementKind::Builtin(BuiltinType::KeepAlive),
                 starting_tag: StartingTag {
                     tag_name: "keep-alive".into(),
                     attributes: vec![
diff --git a/crates/fervid_codegen/src/builtins/mod.rs b/crates/fervid_codegen/src/builtins/mod.rs
index 9f383675..d53e81d0 100644
--- a/crates/fervid_codegen/src/builtins/mod.rs
+++ b/crates/fervid_codegen/src/builtins/mod.rs
@@ -24,7 +24,9 @@ impl CodegenContext {
             BuiltinType::Slot => self.generate_slot(element_node),
             BuiltinType::Suspense => self.generate_suspense(element_node),
             BuiltinType::Teleport => self.generate_teleport(element_node),
-            BuiltinType::Transition => self.generate_transition(element_node),
+            BuiltinType::Transition | BuiltinType::BaseTransition => {
+                self.generate_transition(element_node)
+            }
             BuiltinType::TransitionGroup => self.generate_transition_group(element_node),
         }
     }
diff --git a/crates/fervid_codegen/src/builtins/slot.rs b/crates/fervid_codegen/src/builtins/slot.rs
index a98869dd..2ad17f9e 100644
--- a/crates/fervid_codegen/src/builtins/slot.rs
+++ b/crates/fervid_codegen/src/builtins/slot.rs
@@ -171,7 +171,7 @@ mod tests {
     macro_rules! slot {
         ($attributes: expr, $children: expr) => {
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::Slot),
+                tag_type: ElementKind::Builtin(BuiltinType::Slot),
                 starting_tag: StartingTag {
                     tag_name: "slot".into(),
                     attributes: $attributes,
@@ -283,7 +283,7 @@ mod tests {
                 vec![],
                 vec![
                     Node::Element(ElementNode {
-                        kind: ElementKind::Element,
+                        tag_type: ElementKind::Element,
                         starting_tag: StartingTag {
                             tag_name: "div".into(),
                             attributes: vec![],
@@ -295,7 +295,7 @@ mod tests {
                         span: DUMMY_SP,
                     }),
                     Node::Element(ElementNode {
-                        kind: ElementKind::Component,
+                        tag_type: ElementKind::Component,
                         starting_tag: StartingTag {
                             tag_name: "foo-component".into(),
                             attributes: vec![],
@@ -327,7 +327,7 @@ mod tests {
                 ],
                 vec![
                     Node::Element(ElementNode {
-                        kind: ElementKind::Element,
+                        tag_type: ElementKind::Element,
                         starting_tag: StartingTag {
                             tag_name: "div".into(),
                             attributes: vec![],
@@ -339,7 +339,7 @@ mod tests {
                         span: DUMMY_SP,
                     }),
                     Node::Element(ElementNode {
-                        kind: ElementKind::Component,
+                        tag_type: ElementKind::Component,
                         starting_tag: StartingTag {
                             tag_name: "foo-component".into(),
                             attributes: vec![],
diff --git a/crates/fervid_codegen/src/builtins/suspense.rs b/crates/fervid_codegen/src/builtins/suspense.rs
index 5f387a47..39ea9ee4 100644
--- a/crates/fervid_codegen/src/builtins/suspense.rs
+++ b/crates/fervid_codegen/src/builtins/suspense.rs
@@ -46,7 +46,7 @@ mod tests {
         // <suspense></suspense>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::Suspense),
+                tag_type: ElementKind::Builtin(BuiltinType::Suspense),
                 starting_tag: StartingTag {
                     tag_name: "suspense".into(),
                     attributes: vec![],
@@ -66,7 +66,7 @@ mod tests {
         // <suspense foo="bar" :baz="qux"></suspense>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::Suspense),
+                tag_type: ElementKind::Builtin(BuiltinType::Suspense),
                 starting_tag: StartingTag {
                     tag_name: "suspense".into(),
                     attributes: vec![
@@ -89,7 +89,7 @@ mod tests {
         // <suspense>foobar</suspense>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::Suspense),
+                tag_type: ElementKind::Builtin(BuiltinType::Suspense),
                 starting_tag: StartingTag {
                     tag_name: "suspense".into(),
                     attributes: vec![],
@@ -109,7 +109,7 @@ mod tests {
         // <suspense foo="bar" :baz="qux">foobar</suspense>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::Suspense),
+                tag_type: ElementKind::Builtin(BuiltinType::Suspense),
                 starting_tag: StartingTag {
                     tag_name: "suspense".into(),
                     attributes: vec![
diff --git a/crates/fervid_codegen/src/builtins/teleport.rs b/crates/fervid_codegen/src/builtins/teleport.rs
index 1f8bdc2b..5d7d04d8 100644
--- a/crates/fervid_codegen/src/builtins/teleport.rs
+++ b/crates/fervid_codegen/src/builtins/teleport.rs
@@ -63,7 +63,7 @@ mod tests {
         // <teleport></teleport>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::Teleport),
+                tag_type: ElementKind::Builtin(BuiltinType::Teleport),
                 starting_tag: StartingTag {
                     tag_name: "teleport".into(),
                     attributes: vec![],
@@ -83,7 +83,7 @@ mod tests {
         // <teleport foo="bar" :baz="qux"></teleport>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::Teleport),
+                tag_type: ElementKind::Builtin(BuiltinType::Teleport),
                 starting_tag: StartingTag {
                     tag_name: "teleport".into(),
                     attributes: vec![
@@ -106,7 +106,7 @@ mod tests {
         // <teleport>foobar</teleport>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::Teleport),
+                tag_type: ElementKind::Builtin(BuiltinType::Teleport),
                 starting_tag: StartingTag {
                     tag_name: "teleport".into(),
                     attributes: vec![],
@@ -126,7 +126,7 @@ mod tests {
         // <teleport foo="bar" :baz="qux">foobar</teleport>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::Teleport),
+                tag_type: ElementKind::Builtin(BuiltinType::Teleport),
                 starting_tag: StartingTag {
                     tag_name: "teleport".into(),
                     attributes: vec![
diff --git a/crates/fervid_codegen/src/builtins/transition.rs b/crates/fervid_codegen/src/builtins/transition.rs
index 7aa37415..8f82bfba 100644
--- a/crates/fervid_codegen/src/builtins/transition.rs
+++ b/crates/fervid_codegen/src/builtins/transition.rs
@@ -45,7 +45,7 @@ mod tests {
         // <transition></transition>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::Transition),
+                tag_type: ElementKind::Builtin(BuiltinType::Transition),
                 starting_tag: StartingTag {
                     tag_name: "transition".into(),
                     attributes: vec![],
@@ -65,7 +65,7 @@ mod tests {
         // <transition foo="bar" :baz="qux"></transition>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::Transition),
+                tag_type: ElementKind::Builtin(BuiltinType::Transition),
                 starting_tag: StartingTag {
                     tag_name: "transition".into(),
                     attributes: vec![
@@ -88,7 +88,7 @@ mod tests {
         // <transition>foobar</transition>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::Transition),
+                tag_type: ElementKind::Builtin(BuiltinType::Transition),
                 starting_tag: StartingTag {
                     tag_name: "transition".into(),
                     attributes: vec![],
@@ -108,7 +108,7 @@ mod tests {
         // <transition foo="bar" :baz="qux">foobar</transition>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::Transition),
+                tag_type: ElementKind::Builtin(BuiltinType::Transition),
                 starting_tag: StartingTag {
                     tag_name: "transition".into(),
                     attributes: vec![
diff --git a/crates/fervid_codegen/src/builtins/transition_group.rs b/crates/fervid_codegen/src/builtins/transition_group.rs
index 56690236..0f2980c6 100644
--- a/crates/fervid_codegen/src/builtins/transition_group.rs
+++ b/crates/fervid_codegen/src/builtins/transition_group.rs
@@ -45,7 +45,7 @@ mod tests {
         // <transition-group></transition-group>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::TransitionGroup),
+                tag_type: ElementKind::Builtin(BuiltinType::TransitionGroup),
                 starting_tag: StartingTag {
                     tag_name: "transition-group".into(),
                     attributes: vec![],
@@ -65,7 +65,7 @@ mod tests {
         // <transition-group foo="bar" :baz="qux"></transition-group>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::TransitionGroup),
+                tag_type: ElementKind::Builtin(BuiltinType::TransitionGroup),
                 starting_tag: StartingTag {
                     tag_name: "transition-group".into(),
                     attributes: vec![
@@ -88,7 +88,7 @@ mod tests {
         // <transition-group>foobar</transition-group>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::TransitionGroup),
+                tag_type: ElementKind::Builtin(BuiltinType::TransitionGroup),
                 starting_tag: StartingTag {
                     tag_name: "transition-group".into(),
                     attributes: vec![],
@@ -108,7 +108,7 @@ mod tests {
         // <transition-group foo="bar" :baz="qux">foobar</transition-group>
         test_out(
             ElementNode {
-                kind: ElementKind::Builtin(BuiltinType::TransitionGroup),
+                tag_type: ElementKind::Builtin(BuiltinType::TransitionGroup),
                 starting_tag: StartingTag {
                     tag_name: "transition-group".into(),
                     attributes: vec![
diff --git a/crates/fervid_codegen/src/components/mod.rs b/crates/fervid_codegen/src/components/mod.rs
index bb3db78f..c9d39817 100644
--- a/crates/fervid_codegen/src/components/mod.rs
+++ b/crates/fervid_codegen/src/components/mod.rs
@@ -1,6 +1,6 @@
 use fervid_core::{
-    fervid_atom, str_or_expr_to_propname, ComponentBinding, ElementNode, FervidAtom, Node,
-    PatchHints, StartingTag, StrOrExpr, VSlotDirective, VueDirectives, VueImports,
+    fervid_atom, str_or_expr_to_propname, ComponentBinding, ElementNode, FervidAtom, IntoIdent,
+    Node, PatchHints, StartingTag, StrOrExpr, VSlotDirective, VueDirectives, VueImports,
 };
 use swc_core::{
     common::{Span, DUMMY_SP},
@@ -193,14 +193,14 @@ impl CodegenContext {
 
         // We need sorted entries for stable output.
         // Entries are sorted by a component name (first element of tuple in hashmap entry)
-        let mut sorted_components: Vec<(&FervidAtom, &Ident)> = self
+        let mut sorted_components: Vec<(&FervidAtom, &Ident, bool)> = self
             .bindings_helper
             .components
             .iter()
             .filter_map(
                 |(component_name, component_resolution)| match component_resolution {
-                    ComponentBinding::RuntimeResolved(ident) => {
-                        Some((component_name, ident.as_ref()))
+                    ComponentBinding::RuntimeResolved(ident, is_self_reference) => {
+                        Some((component_name, ident.as_ref(), *is_self_reference))
                     }
                     _ => None,
                 },
@@ -210,7 +210,23 @@ impl CodegenContext {
         sorted_components.sort_by(|a, b| a.0.cmp(b.0));
 
         // Key is a component as used in template, value is the assigned Js identifier
-        for (component_name, component_identifier) in sorted_components.iter() {
+        for (component_name, component_identifier, is_self_reference) in sorted_components.iter() {
+            let mut args = Vec::with_capacity(1 + *is_self_reference as usize);
+            args.push(ExprOrSpread {
+                spread: None,
+                expr: Box::new(Expr::Lit(Lit::Str(Str {
+                    span: DUMMY_SP,
+                    value: (*component_name).to_owned(),
+                    raw: None,
+                }))),
+            });
+            if *is_self_reference {
+                args.push(ExprOrSpread {
+                    spread: None,
+                    expr: Box::new(true.into()),
+                });
+            }
+
             // _component_ident_name = resolveComponent("component-name")
             result.push(VarDeclarator {
                 span: DUMMY_SP,
@@ -221,20 +237,10 @@ impl CodegenContext {
                 init: Some(Box::new(Expr::Call(CallExpr {
                     span: DUMMY_SP,
                     ctxt: Default::default(),
-                    callee: Callee::Expr(Box::new(Expr::Ident(Ident {
-                        span: DUMMY_SP,
-                        ctxt: Default::default(),
-                        sym: resolve_component_ident.to_owned(),
-                        optional: false,
-                    }))),
-                    args: vec![ExprOrSpread {
-                        spread: None,
-                        expr: Box::new(Expr::Lit(Lit::Str(Str {
-                            span: DUMMY_SP,
-                            value: (*component_name).to_owned(),
-                            raw: None,
-                        }))),
-                    }],
+                    callee: Callee::Expr(Box::new(Expr::Ident(
+                        resolve_component_ident.to_owned().into_ident(),
+                    ))),
+                    args,
                     type_args: None,
                 }))),
                 definite: false,
@@ -515,7 +521,7 @@ impl CodegenContext {
             Some(ComponentBinding::Resolved(component_binding)) => {
                 return (**component_binding).to_owned()
             }
-            Some(ComponentBinding::RuntimeResolved(component_identifier)) => {
+            Some(ComponentBinding::RuntimeResolved(component_identifier, _)) => {
                 return Expr::Ident((**component_identifier).to_owned())
             }
             _ => {}
@@ -540,7 +546,7 @@ impl CodegenContext {
 
         self.bindings_helper.components.insert(
             tag_name.to_owned(),
-            ComponentBinding::RuntimeResolved(Box::new(resolve_identifier.to_owned())),
+            ComponentBinding::RuntimeResolved(Box::new(resolve_identifier.to_owned()), false),
         );
 
         Expr::Ident(resolve_identifier)
@@ -655,7 +661,7 @@ mod tests {
                 },
                 children: vec![],
                 template_scope: 0,
-                kind: ElementKind::Component,
+                tag_type: ElementKind::Component,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
             },
@@ -673,7 +679,7 @@ mod tests {
                 },
                 children: vec![],
                 template_scope: 0,
-                kind: ElementKind::Component,
+                tag_type: ElementKind::Component,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
             },
@@ -697,7 +703,7 @@ mod tests {
                 },
                 children: vec![],
                 template_scope: 0,
-                kind: ElementKind::Component,
+                tag_type: ElementKind::Component,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
             },
@@ -726,13 +732,13 @@ mod tests {
                         },
                         children: vec![Node::Text("hello from div".into(), DUMMY_SP)],
                         template_scope: 0,
-                        kind: ElementKind::Element,
+                        tag_type: ElementKind::Element,
                         patch_hints: Default::default(),
                         span: DUMMY_SP,
                     }),
                 ],
                 template_scope: 0,
-                kind: ElementKind::Component,
+                tag_type: ElementKind::Component,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
             },
@@ -772,18 +778,18 @@ mod tests {
                             },
                             children: vec![Node::Text("hello from div".into(), DUMMY_SP)],
                             template_scope: 0,
-                            kind: ElementKind::Element,
+                            tag_type: ElementKind::Element,
                             patch_hints: Default::default(),
                             span: DUMMY_SP,
                         }),
                     ],
                     template_scope: 0,
-                    kind: ElementKind::Element,
+                    tag_type: ElementKind::Element,
                     patch_hints: Default::default(),
                     span: DUMMY_SP,
                 })],
                 template_scope: 0,
-                kind: ElementKind::Component,
+                tag_type: ElementKind::Component,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
             },
@@ -826,18 +832,18 @@ mod tests {
                             },
                             children: vec![Node::Text("hello from div".into(), DUMMY_SP)],
                             template_scope: 0,
-                            kind: ElementKind::Element,
+                            tag_type: ElementKind::Element,
                             patch_hints: Default::default(),
                             span: DUMMY_SP,
                         }),
                     ],
                     template_scope: 0,
-                    kind: ElementKind::Element,
+                    tag_type: ElementKind::Element,
                     patch_hints: Default::default(),
                     span: DUMMY_SP,
                 })],
                 template_scope: 0,
-                kind: ElementKind::Component,
+                tag_type: ElementKind::Component,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
             },
@@ -882,7 +888,7 @@ mod tests {
                             }),
                         ],
                         template_scope: 0,
-                        kind: ElementKind::Element,
+                        tag_type: ElementKind::Element,
                         patch_hints: Default::default(),
                         span: DUMMY_SP,
                     }),
@@ -908,19 +914,19 @@ mod tests {
                                 },
                                 children: vec![Node::Text("two".into(), DUMMY_SP)],
                                 template_scope: 0,
-                                kind: ElementKind::Element,
+                                tag_type: ElementKind::Element,
                                 patch_hints: Default::default(),
                                 span: DUMMY_SP,
                             }),
                         ],
                         template_scope: 0,
-                        kind: ElementKind::Element,
+                        tag_type: ElementKind::Element,
                         patch_hints: Default::default(),
                         span: DUMMY_SP,
                     }),
                 ],
                 template_scope: 0,
-                kind: ElementKind::Component,
+                tag_type: ElementKind::Component,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
             },
@@ -952,7 +958,7 @@ mod tests {
                         },
                         children: vec![Node::Text("hello from div".into(), DUMMY_SP)],
                         template_scope: 0,
-                        kind: ElementKind::Element,
+                        tag_type: ElementKind::Element,
                         patch_hints: Default::default(),
                         span: DUMMY_SP,
                     }),
@@ -970,13 +976,13 @@ mod tests {
                         },
                         children: vec![Node::Text("hello from slot".into(), DUMMY_SP)],
                         template_scope: 0,
-                        kind: ElementKind::Element,
+                        tag_type: ElementKind::Element,
                         patch_hints: Default::default(),
                         span: DUMMY_SP,
                     }),
                 ],
                 template_scope: 0,
-                kind: ElementKind::Component,
+                tag_type: ElementKind::Component,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
             },
@@ -1018,13 +1024,13 @@ mod tests {
                                 },
                                 children: vec![Node::Text("hello from div".into(), DUMMY_SP)],
                                 template_scope: 0,
-                                kind: ElementKind::Element,
+                                tag_type: ElementKind::Element,
                                 patch_hints: Default::default(),
                                 span: DUMMY_SP,
                             }),
                         ],
                         template_scope: 0,
-                        kind: ElementKind::Element,
+                        tag_type: ElementKind::Element,
                         patch_hints: Default::default(),
                         span: DUMMY_SP,
                     }),
@@ -1042,13 +1048,13 @@ mod tests {
                         },
                         children: vec![Node::Text("hello from slot".into(), DUMMY_SP)],
                         template_scope: 0,
-                        kind: ElementKind::Element,
+                        tag_type: ElementKind::Element,
                         patch_hints: Default::default(),
                         span: DUMMY_SP,
                     }),
                 ],
                 template_scope: 0,
-                kind: ElementKind::Component,
+                tag_type: ElementKind::Component,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
             },
@@ -1082,7 +1088,7 @@ mod tests {
                         },
                         children: vec![Node::Text("hello from slot".into(), DUMMY_SP)],
                         template_scope: 0,
-                        kind: ElementKind::Element,
+                        tag_type: ElementKind::Element,
                         patch_hints: Default::default(),
                         span: DUMMY_SP,
                     }),
@@ -1095,13 +1101,13 @@ mod tests {
                         },
                         children: vec![Node::Text("hello from div".into(), DUMMY_SP)],
                         template_scope: 0,
-                        kind: ElementKind::Element,
+                        tag_type: ElementKind::Element,
                         patch_hints: Default::default(),
                         span: DUMMY_SP,
                     }),
                 ],
                 template_scope: 0,
-                kind: ElementKind::Component,
+                tag_type: ElementKind::Component,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
             },
@@ -1139,7 +1145,7 @@ mod tests {
                         },
                         children: vec![Node::Text("hello from slot".into(), DUMMY_SP)],
                         template_scope: 0,
-                        kind: ElementKind::Element,
+                        tag_type: ElementKind::Element,
                         patch_hints: Default::default(),
                         span: DUMMY_SP,
                     }),
@@ -1165,13 +1171,13 @@ mod tests {
                                 },
                                 children: vec![Node::Text("hello from div".into(), DUMMY_SP)],
                                 template_scope: 0,
-                                kind: ElementKind::Element,
+                                tag_type: ElementKind::Element,
                                 patch_hints: Default::default(),
                                 span: DUMMY_SP,
                             }),
                         ],
                         template_scope: 0,
-                        kind: ElementKind::Element,
+                        tag_type: ElementKind::Element,
                         patch_hints: Default::default(),
                         span: DUMMY_SP,
                     }),
@@ -1189,13 +1195,13 @@ mod tests {
                         },
                         children: vec![Node::Text("hello from baz".into(), DUMMY_SP)],
                         template_scope: 0,
-                        kind: ElementKind::Element,
+                        tag_type: ElementKind::Element,
                         patch_hints: Default::default(),
                         span: DUMMY_SP,
                     }),
                 ],
                 template_scope: 0,
-                kind: ElementKind::Component,
+                tag_type: ElementKind::Component,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
             },
diff --git a/crates/fervid_codegen/src/control_flow/codegen.rs b/crates/fervid_codegen/src/control_flow/codegen.rs
index 65d85c67..d066debe 100644
--- a/crates/fervid_codegen/src/control_flow/codegen.rs
+++ b/crates/fervid_codegen/src/control_flow/codegen.rs
@@ -49,7 +49,7 @@ impl CodegenContext {
         }
 
         // Generate the relevant render code depending on ElementKind
-        let mut result = match element_node.kind {
+        let mut result = match element_node.tag_type {
             ElementKind::Builtin(builtin_type) => self.generate_builtin(element_node, builtin_type),
             ElementKind::Element => self.generate_element_vnode(element_node, wrap_in_block),
             ElementKind::Component => self.generate_component_vnode(element_node, wrap_in_block),
diff --git a/crates/fervid_codegen/src/control_flow/conditional_seq.rs b/crates/fervid_codegen/src/control_flow/conditional_seq.rs
index 718416c2..87aa4d35 100644
--- a/crates/fervid_codegen/src/control_flow/conditional_seq.rs
+++ b/crates/fervid_codegen/src/control_flow/conditional_seq.rs
@@ -110,7 +110,7 @@ mod tests {
                         },
                         children: vec![Node::Text("hello".into(), DUMMY_SP)],
                         template_scope: 0,
-                        kind: ElementKind::Element,
+                        tag_type: ElementKind::Element,
                         patch_hints: Default::default(),
                         span: DUMMY_SP,
                     },
@@ -138,7 +138,7 @@ mod tests {
                         },
                         children: vec![Node::Text("hello".into(), DUMMY_SP)],
                         template_scope: 0,
-                        kind: ElementKind::Element,
+                        tag_type: ElementKind::Element,
                         patch_hints: Default::default(),
                         span: DUMMY_SP,
                     },
@@ -152,7 +152,7 @@ mod tests {
                     },
                     children: vec![Node::Text("bye".into(), DUMMY_SP)],
                     template_scope: 0,
-                    kind: ElementKind::Element,
+                    tag_type: ElementKind::Element,
                     patch_hints: Default::default(),
                     span: DUMMY_SP,
                 })),
@@ -178,7 +178,7 @@ mod tests {
                         },
                         children: vec![Node::Text("hello".into(), DUMMY_SP)],
                         template_scope: 0,
-                        kind: ElementKind::Element,
+                        tag_type: ElementKind::Element,
                         patch_hints: Default::default(),
                         span: DUMMY_SP,
                     },
@@ -194,7 +194,7 @@ mod tests {
                             },
                             children: vec![Node::Text("hi".into(), DUMMY_SP)],
                             template_scope: 0,
-                            kind: ElementKind::Element,
+                            tag_type: ElementKind::Element,
                             patch_hints: Default::default(),
                             span: DUMMY_SP,
                         },
@@ -209,7 +209,7 @@ mod tests {
                             },
                             children: vec![Node::Text("bye".into(), DUMMY_SP)],
                             template_scope: 0,
-                            kind: ElementKind::Element,
+                            tag_type: ElementKind::Element,
                             patch_hints: Default::default(),
                             span: DUMMY_SP,
                         },
@@ -239,7 +239,7 @@ mod tests {
                         },
                         children: vec![Node::Text("hello".into(), DUMMY_SP)],
                         template_scope: 0,
-                        kind: ElementKind::Element,
+                        tag_type: ElementKind::Element,
                         patch_hints: Default::default(),
                         span: DUMMY_SP,
                     },
@@ -255,7 +255,7 @@ mod tests {
                             },
                             children: vec![Node::Text("hi".into(), DUMMY_SP)],
                             template_scope: 0,
-                            kind: ElementKind::Element,
+                            tag_type: ElementKind::Element,
                             patch_hints: Default::default(),
                             span: DUMMY_SP,
                         },
@@ -270,7 +270,7 @@ mod tests {
                             },
                             children: vec![Node::Text("good morning".into(), DUMMY_SP)],
                             template_scope: 0,
-                            kind: ElementKind::Element,
+                            tag_type: ElementKind::Element,
                             patch_hints: Default::default(),
                             span: DUMMY_SP,
                         },
@@ -284,7 +284,7 @@ mod tests {
                     },
                     children: vec![Node::Text("bye".into(), DUMMY_SP)],
                     template_scope: 0,
-                    kind: ElementKind::Element,
+                    tag_type: ElementKind::Element,
                     patch_hints: Default::default(),
                     span: DUMMY_SP,
                 })),
diff --git a/crates/fervid_codegen/src/control_flow/slotted_iterator.rs b/crates/fervid_codegen/src/control_flow/slotted_iterator.rs
index 7b2bffb8..09c5a5bc 100644
--- a/crates/fervid_codegen/src/control_flow/slotted_iterator.rs
+++ b/crates/fervid_codegen/src/control_flow/slotted_iterator.rs
@@ -210,7 +210,7 @@ mod tests {
             },
             children: vec![Node::Text("This is an h1".into(), DUMMY_SP)],
             template_scope: 0,
-            kind: ElementKind::Element,
+            tag_type: ElementKind::Element,
             patch_hints: Default::default(),
             span: DUMMY_SP,
         })
@@ -229,7 +229,7 @@ mod tests {
             },
             children: vec![],
             template_scope: 0,
-            kind: ElementKind::Element,
+            tag_type: ElementKind::Element,
             patch_hints: Default::default(),
             span: DUMMY_SP,
         })
@@ -253,7 +253,7 @@ mod tests {
             },
             children: vec![Node::Text("This is a component".into(), DUMMY_SP)],
             template_scope: 0,
-            kind: ElementKind::Element,
+            tag_type: ElementKind::Element,
             patch_hints: Default::default(),
             span: DUMMY_SP,
         })
@@ -269,7 +269,7 @@ mod tests {
             },
             children: vec![Node::Text("This is just a template".into(), DUMMY_SP)],
             template_scope: 0,
-            kind: ElementKind::Element,
+            tag_type: ElementKind::Element,
             patch_hints: Default::default(),
             span: DUMMY_SP,
         })
@@ -291,7 +291,7 @@ mod tests {
             },
             children: vec![Node::Text("This is a default template".into(), DUMMY_SP)],
             template_scope: 0,
-            kind: ElementKind::Element,
+            tag_type: ElementKind::Element,
             patch_hints: Default::default(),
             span: DUMMY_SP,
         })
@@ -313,7 +313,7 @@ mod tests {
             },
             children: vec![Node::Text("This is a named template".into(), DUMMY_SP)],
             template_scope: 0,
-            kind: ElementKind::Element,
+            tag_type: ElementKind::Element,
             patch_hints: Default::default(),
             span: DUMMY_SP,
         })
diff --git a/crates/fervid_codegen/src/directives/v_html.rs b/crates/fervid_codegen/src/directives/v_html.rs
index 9c7fa517..968bcc88 100644
--- a/crates/fervid_codegen/src/directives/v_html.rs
+++ b/crates/fervid_codegen/src/directives/v_html.rs
@@ -38,7 +38,7 @@ mod tests {
             // <test-component v-html="foo + bar" />
             ElementNode {
                 children: vec![],
-                kind: ElementKind::Component,
+                tag_type: ElementKind::Component,
                 starting_tag: StartingTag {
                     tag_name: "test-component".into(),
                     attributes: vec![],
@@ -67,7 +67,7 @@ mod tests {
             // <h1 v-html="foo + bar" />
             ElementNode {
                 children: vec![],
-                kind: ElementKind::Element,
+                tag_type: ElementKind::Element,
                 starting_tag: StartingTag {
                     tag_name: "h1".into(),
                     attributes: vec![],
@@ -91,7 +91,7 @@ mod tests {
     }
 
     fn test_out(input: ElementNode, expected: &str, wrap_in_block: bool) {
-        let is_component = matches!(input.kind, ElementKind::Component);
+        let is_component = matches!(input.tag_type, ElementKind::Component);
 
         let mut ctx = CodegenContext::default();
         let out = if is_component {
diff --git a/crates/fervid_codegen/src/directives/v_text.rs b/crates/fervid_codegen/src/directives/v_text.rs
index ed3a2942..f662a170 100644
--- a/crates/fervid_codegen/src/directives/v_text.rs
+++ b/crates/fervid_codegen/src/directives/v_text.rs
@@ -37,7 +37,7 @@ mod tests {
             // <test-component v-text="foo + bar" />
             ElementNode {
                 children: vec![],
-                kind: ElementKind::Component,
+                tag_type: ElementKind::Component,
                 starting_tag: StartingTag {
                     tag_name: "test-component".into(),
                     attributes: vec![],
@@ -66,7 +66,7 @@ mod tests {
             // <h1 v-text="foo + bar" />
             ElementNode {
                 children: vec![],
-                kind: ElementKind::Element,
+                tag_type: ElementKind::Element,
                 starting_tag: StartingTag {
                     tag_name: "h1".into(),
                     attributes: vec![],
@@ -85,7 +85,7 @@ mod tests {
     }
 
     fn test_out(input: ElementNode, expected: &str, wrap_in_block: bool) {
-        let is_component = matches!(input.kind, ElementKind::Component);
+        let is_component = matches!(input.tag_type, ElementKind::Component);
 
         let mut ctx = CodegenContext::default();
         let out = if is_component {
diff --git a/crates/fervid_codegen/src/elements/mod.rs b/crates/fervid_codegen/src/elements/mod.rs
index 282b65de..0c4f5d7e 100644
--- a/crates/fervid_codegen/src/elements/mod.rs
+++ b/crates/fervid_codegen/src/elements/mod.rs
@@ -392,7 +392,7 @@ mod tests {
                 },
                 children: vec![Node::Text("hello from div".into(), DUMMY_SP)],
                 template_scope: 0,
-                kind: ElementKind::Element,
+                tag_type: ElementKind::Element,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
             },
@@ -413,7 +413,7 @@ mod tests {
                 },
                 children: vec![Node::Text("hello from div".into(), DUMMY_SP)],
                 template_scope: 0,
-                kind: ElementKind::Element,
+                tag_type: ElementKind::Element,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
             },
@@ -437,7 +437,7 @@ mod tests {
                 },
                 children: vec![],
                 template_scope: 0,
-                kind: ElementKind::Element,
+                tag_type: ElementKind::Element,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
             },
@@ -458,7 +458,7 @@ mod tests {
                 },
                 children: vec![],
                 template_scope: 0,
-                kind: ElementKind::Element,
+                tag_type: ElementKind::Element,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
             },
@@ -488,7 +488,7 @@ mod tests {
                     Node::Text(" bye!".into(), DUMMY_SP),
                 ],
                 template_scope: 0,
-                kind: ElementKind::Element,
+                tag_type: ElementKind::Element,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
             },
@@ -523,13 +523,13 @@ mod tests {
                         },
                         children: vec![Node::Text("bye!".into(), DUMMY_SP)],
                         template_scope: 0,
-                        kind: ElementKind::Element,
+                        tag_type: ElementKind::Element,
                         patch_hints: Default::default(),
                         span: DUMMY_SP,
                     }),
                 ],
                 template_scope: 0,
-                kind: ElementKind::Element,
+                tag_type: ElementKind::Element,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
             },
diff --git a/crates/fervid_core/src/ast.rs b/crates/fervid_core/src/ast.rs
index 83105377..639e7d4e 100644
--- a/crates/fervid_core/src/ast.rs
+++ b/crates/fervid_core/src/ast.rs
@@ -2,10 +2,7 @@
 
 use swc_core::{
     common::{Span, DUMMY_SP},
-    ecma::ast::{
-        Bool, CallExpr, Callee, Expr, ExprOrSpread, IdentName, KeyValueProp, Lit, Prop, PropName,
-        PropOrSpread, Str,
-    },
+    ecma::ast::{Bool, CallExpr, Expr, IdentName, Lit, PropName, PropOrSpread, Str},
 };
 
 use crate::{FervidAtom, VueImports};
@@ -59,6 +56,7 @@ pub enum JsChildNode {
     CallExpression(Box<CallExpression>),
     ObjectExpression(Box<ObjectExpression>),
     ExpressionNode(Box<ExpressionNode>),
+    // Unused?
     OriginalValueMarker,
 }
 
@@ -94,10 +92,7 @@ pub fn create_object_expression(properties: Vec<Property>, span: Span) -> Object
     ObjectExpression { properties, span }
 }
 
-pub fn create_object_property(
-    key: ExpressionPropNameNode,
-    value: JsChildNode,
-) -> Property {
+pub fn create_object_property(key: ExpressionPropNameNode, value: JsChildNode) -> Property {
     Property { key, value }
 }
 
@@ -138,7 +133,11 @@ pub fn create_simple_expression_str(
             raw: None,
         }))),
         is_static,
-        const_type: ConstantTypes::CanStringify,
+        const_type: if is_static {
+            ConstantTypes::CanStringify
+        } else {
+            ConstantTypes::NotConstant
+        },
         is_handler_key: false,
     }
 }
@@ -155,18 +154,19 @@ pub fn create_simple_expression_str(
 // }
 
 impl From<PropOrSpread> for Property {
-    fn from(value: PropOrSpread) -> Self {
-        Property {
-            key: todo!(),
-            value: todo!(),
-        }
+    fn from(_value: PropOrSpread) -> Self {
+        todo!()
+        // Property {
+        //     key: todo!(),
+        //     value: todo!(),
+        // }
     }
 }
 
 // CallExpression
 
 impl From<CallExpr> for CallExpression {
-    fn from(value: CallExpr) -> Self {
+    fn from(_value: CallExpr) -> Self {
         todo!()
         // Self {
         //     callee: (),
@@ -198,9 +198,9 @@ impl ExpressionPropNameNode {
     }
 }
 
-impl Into<PropName> for ExpressionPropNameNode {
-    fn into(self) -> PropName {
-        match self {
+impl From<ExpressionPropNameNode> for PropName {
+    fn from(val: ExpressionPropNameNode) -> Self {
+        match val {
             ExpressionPropNameNode::SimpleExpression(s) => PropName::Ident(s.ast),
             ExpressionPropNameNode::CompoundExpression(c) => c.ast,
         }
@@ -225,4 +225,4 @@ impl From<CallExpression> for JsChildNode {
     fn from(value: CallExpression) -> Self {
         Self::CallExpression(Box::new(value))
     }
-}
\ No newline at end of file
+}
diff --git a/crates/fervid_core/src/bindings.rs b/crates/fervid_core/src/bindings.rs
index 0e077fa1..cd7e5d2e 100644
--- a/crates/fervid_core/src/bindings.rs
+++ b/crates/fervid_core/src/bindings.rs
@@ -11,8 +11,9 @@ pub enum ComponentBinding {
 
     /// Component must be resolved in runtime, i.e. using `resolveComponent` call.
     /// The contained value is an identifier,
-    /// e.g. `_component_custom` in `const _component_custom = resolveComponent('custom')`
-    RuntimeResolved(Box<Ident>),
+    /// e.g. `_component_custom` in `const _component_custom = resolveComponent('custom')`.
+    /// The boolean value marks this component as self-reference (component used within itself).
+    RuntimeResolved(Box<Ident>, bool),
 
     /// Component was not resolved and would need to be
     /// either transformed (this is default from parser) or ignored
diff --git a/crates/fervid_core/src/structs.rs b/crates/fervid_core/src/structs.rs
index 3ccfb974..d912743e 100644
--- a/crates/fervid_core/src/structs.rs
+++ b/crates/fervid_core/src/structs.rs
@@ -81,7 +81,7 @@ pub enum Node {
 #[derive(Debug, Clone)]
 pub struct ElementNode {
     /// Marks the node as either an Element (HTML tag), Builtin (Vue) or Component
-    pub kind: ElementKind,
+    pub tag_type: ElementKind,
     pub starting_tag: StartingTag,
     pub children: Vec<Node>,
     pub template_scope: u32,
@@ -99,6 +99,7 @@ pub enum ElementKind {
 
 #[derive(Debug, Clone, Copy)]
 pub enum BuiltinType {
+    BaseTransition,
     Component,
     KeepAlive,
     Slot,
diff --git a/crates/fervid_core/src/vue_builtins.rs b/crates/fervid_core/src/vue_builtins.rs
index d723d2ed..5d1f0247 100644
--- a/crates/fervid_core/src/vue_builtins.rs
+++ b/crates/fervid_core/src/vue_builtins.rs
@@ -15,4 +15,6 @@ pub static VUE_BUILTINS: phf::Map<&'static str, BuiltinType> = phf_map! {
     "Transition" => BuiltinType::Transition,
     "transition-group" => BuiltinType::TransitionGroup,
     "TransitionGroup" => BuiltinType::TransitionGroup,
+    "BaseTransition" => BuiltinType::BaseTransition,
+    "base-transition" => BuiltinType::BaseTransition,
 };
diff --git a/crates/fervid_core/src/vue_imports.rs b/crates/fervid_core/src/vue_imports.rs
index 7567e991..5543daad 100644
--- a/crates/fervid_core/src/vue_imports.rs
+++ b/crates/fervid_core/src/vue_imports.rs
@@ -1,10 +1,12 @@
-use crate::FervidAtom;
+use crate::{BuiltinType, FervidAtom};
 use flagset::{flags, FlagSet};
 use strum_macros::{AsRefStr, EnumString, IntoStaticStr};
 
 flags! {
     #[derive(AsRefStr, EnumString, IntoStaticStr)]
     pub enum VueImports: u64 {
+        #[strum(serialize = "_BaseTransition")]
+        BaseTransition,
         #[strum(serialize = "_createBlock")]
         CreateBlock,
         #[strum(serialize = "_createCommentVNode")]
@@ -113,3 +115,19 @@ impl VueImports {
 }
 
 pub type VueImportsSet = FlagSet<VueImports>;
+
+impl From<BuiltinType> for VueImports {
+    fn from(value: BuiltinType) -> Self {
+        match value {
+            BuiltinType::BaseTransition => VueImports::BaseTransition,
+            BuiltinType::KeepAlive => VueImports::KeepAlive,
+            BuiltinType::Suspense => VueImports::Suspense,
+            BuiltinType::Teleport => VueImports::Teleport,
+            BuiltinType::Transition => VueImports::Transition,
+            BuiltinType::TransitionGroup => VueImports::TransitionGroup,
+            // Note: these built-ins are not valid
+            BuiltinType::Component => VueImports::ResolveComponent,
+            BuiltinType::Slot => VueImports::ResolveComponent,
+        }
+    }
+}
diff --git a/crates/fervid_parser/src/template.rs b/crates/fervid_parser/src/template.rs
index 9a7fd4ff..197f708c 100644
--- a/crates/fervid_parser/src/template.rs
+++ b/crates/fervid_parser/src/template.rs
@@ -1,6 +1,7 @@
 use fervid_core::{
-    fervid_atom, is_html_tag, AttributeOrBinding, ElementNode, FervidAtom, Interpolation, Node,
-    PatchHints, SfcTemplateBlock, StartingTag, VueDirectives,
+    check_attribute_name, fervid_atom, is_html_tag, AttributeOrBinding, ElementKind, ElementNode,
+    FervidAtom, Interpolation, Node, PatchHints, SfcTemplateBlock, StartingTag, VueDirectives,
+    VUE_BUILTINS,
 };
 use swc_core::common::{BytePos, Span};
 use swc_ecma_parser::{Syntax, TsSyntax};
@@ -105,6 +106,8 @@ impl SfcParser<'_, '_, '_> {
             self.is_pre = true;
         }
 
+        let tag_type = recognize_element_kind(&tag_name, &attributes);
+
         let starting_tag = StartingTag {
             tag_name,
             attributes,
@@ -112,7 +115,7 @@ impl SfcParser<'_, '_, '_> {
         };
 
         let result = Node::Element(ElementNode {
-            kind: fervid_core::ElementKind::Element,
+            tag_type,
             starting_tag,
             children: self.process_element_children(children),
             template_scope: 0,
@@ -276,12 +279,46 @@ impl SfcParser<'_, '_, '_> {
     }
 }
 
+fn recognize_element_kind(tag_name: &FervidAtom, attributes: &[AttributeOrBinding]) -> ElementKind {
+    // First, check for a built-in
+    if let Some(builtin_type) = VUE_BUILTINS.get(tag_name) {
+        // Special case for `<component>`. If it does not have `is`, this is not a built-in
+        if tag_name.eq("component") {
+            let has_is = attributes
+                .iter()
+                .any(|attr| check_attribute_name(attr, "is"));
+
+            if !has_is {
+                return ElementKind::Component;
+            }
+        }
+
+        return ElementKind::Builtin(*builtin_type);
+    }
+
+    // Then check if this is an HTML tag
+    if is_html_tag(tag_name) {
+        ElementKind::Element
+    } else {
+        ElementKind::Component
+    }
+}
+
 #[cfg(test)]
 mod tests {
     use swc_core::ecma::ast::Expr;
 
     use super::*;
 
+    /// Special case: `<component>` without `is` attribute is not a builtin
+    #[test]
+    fn it_distinguishes_component_builtin_and_not() {
+        assert!(matches!(
+            recognize_element_kind(&fervid_atom!("component"), &[]),
+            ElementKind::Component
+        ));
+    }
+
     #[test]
     fn it_acknowledges_v_pre() {
         let mut errors = Vec::new();
diff --git a/crates/fervid_transform/src/lib.rs b/crates/fervid_transform/src/lib.rs
index 6b5c7d3a..f619a7cf 100644
--- a/crates/fervid_transform/src/lib.rs
+++ b/crates/fervid_transform/src/lib.rs
@@ -118,12 +118,19 @@ impl TransformSfcContext {
 
         TransformSfcContext {
             filename: options.filename.to_string(),
+            // Explicitly not defined as a tiny performance optimization
+            // for it to be computed during `is_self_name` call.
+            // TODO: Implement `is_self_name` call
+            // const nameMatch = filename.replace(/\?.*$/, '').match(/([^/\\]+)\.\w+$/)
+            // selfName: nameMatch && capitalize(camelize(nameMatch[1])),
+            self_name: None,
             is_ce: options.is_ce,
             props_destructure: options.props_destructure,
             bindings_helper,
             deps: Default::default(),
             scopes: vec![],
             directive_scopes: Default::default(),
+            current_template_scope: 0,
             transform_asset_urls: options.transform_asset_urls.clone(),
             errors: vec![],
             warnings: vec![],
diff --git a/crates/fervid_transform/src/structs.rs b/crates/fervid_transform/src/structs.rs
index 53e73a29..e70906f9 100644
--- a/crates/fervid_transform/src/structs.rs
+++ b/crates/fervid_transform/src/structs.rs
@@ -12,16 +12,22 @@ use smallvec::SmallVec;
 use swc_core::{
     common::{Span, DUMMY_SP},
     ecma::ast::{
-        Decl, Expr, ExprOrSpread, Function, Id, ImportDecl, Module, ObjectLit,
-        PropOrSpread, Str, TsType,
+        Decl, Expr, ExprOrSpread, Function, Id, ImportDecl, Module, ObjectLit, PropOrSpread, Str,
+        TsType,
     },
 };
 
-use crate::{error::TransformError, template::{directive_transforms::DirectiveTransformsProvider, node_transforms::NodeTransformsProvider}};
+use crate::{
+    error::TransformError,
+    template::{
+        directive_transforms::DirectiveTransformsProvider, node_transforms::NodeTransformsProvider,
+    },
+};
 
-/// Context object. Currently very minimal but may grow over time.
+/// Context object. Grows over time
 pub struct TransformSfcContext {
     pub filename: String,
+    pub self_name: Option<String>,
     // pub is_prod: bool, // This is a part of BindingsHelper
     /// Enable/disable the props destructure, or error when usage is encountered
     pub props_destructure: PropsDestructureConfig,
@@ -34,6 +40,7 @@ pub struct TransformSfcContext {
     pub scopes: Vec<TypeScopeContainer>,
     /// Scopes for directives
     pub directive_scopes: DirectiveScopes,
+    pub current_template_scope: u32,
     pub errors: Vec<TransformError>,
     pub warnings: Vec<TransformError>,
     pub directive_transforms: DirectiveTransformsProvider,
@@ -314,12 +321,14 @@ impl TransformSfcContext {
         let filename = "anonymous.vue".to_string();
         TransformSfcContext {
             filename: filename.to_owned(),
+            self_name: None,
             bindings_helper: BindingsHelper::default(),
             is_ce: false,
             props_destructure: PropsDestructureConfig::default(),
             deps: HashSet::default(),
             scopes: vec![],
             directive_scopes: Default::default(),
+            current_template_scope: 0,
             transform_asset_urls: TransformAssetUrlsConfig::default(),
             errors: vec![],
             warnings: vec![],
diff --git a/crates/fervid_transform/src/template/ast_transform.rs b/crates/fervid_transform/src/template/ast_transform.rs
index adbe0d07..eff0c741 100644
--- a/crates/fervid_transform/src/template/ast_transform.rs
+++ b/crates/fervid_transform/src/template/ast_transform.rs
@@ -1,8 +1,8 @@
 use fervid_core::{
-    check_attribute_name, fervid_atom, is_from_default_slot, is_html_tag, AttributeOrBinding,
+    check_attribute_name, fervid_atom, is_from_default_slot, AttributeOrBinding,
     BindingTypes, BuiltinType, Conditional, ConditionalNodeSequence, ElementKind, ElementNode,
     FervidAtom, Interpolation, IntoIdent, Node, PatchFlags, PatchHints, SfcTemplateBlock,
-    StartingTag, StrOrExpr, TemplateGenerationMode, VBindDirective, VSlotDirective, VUE_BUILTINS,
+    StartingTag, StrOrExpr, TemplateGenerationMode, VBindDirective, VSlotDirective,
 };
 use smallvec::SmallVec;
 use swc_core::{
@@ -10,7 +10,7 @@ use swc_core::{
     ecma::ast::{Bool, Expr, Lit},
 };
 
-use crate::{TemplateScope, TransformSfcContext};
+use crate::{template::node_transforms::NodeTransforms, TemplateScope, TransformSfcContext};
 
 use super::{
     asset_urls::transform_asset_urls, collect_vars::collect_variables,
@@ -61,7 +61,7 @@ pub fn transform_and_record_template(
         }
 
         let new_root = Node::Element(ElementNode {
-            kind: ElementKind::Element,
+            tag_type: ElementKind::Element,
             starting_tag: StartingTag {
                 tag_name: fervid_atom!("template"),
                 attributes: vec![],
@@ -349,7 +349,10 @@ impl TemplateVisitor<'_> {
     }
 
     fn visit_element_node_new(&mut self, element_node: &mut ElementNode) {
-
+        // Cloning transforms is fine here due to the structure being optimized for it
+        let node_transforms = self.ctx.node_transforms.clone();
+        node_transforms.pre_transform_element_node(self.ctx, element_node);
+        node_transforms.post_transform_element_node(self.ctx, element_node);
     }
 
     fn visit_element_node_old(&mut self, element_node: &mut ElementNode) {
@@ -357,9 +360,8 @@ impl TemplateVisitor<'_> {
         let mut scope_to_use = parent_scope;
 
         // Mark the node with a correct type (element, component or built-in)
-        let element_kind = self.recognize_element_kind(&element_node.starting_tag);
+        let element_kind = element_node.tag_type;
         let is_component = matches!(element_kind, ElementKind::Component);
-        element_node.kind = element_kind;
 
         if is_component {
             self.maybe_resolve_component(&element_node.starting_tag.tag_name);
@@ -758,35 +760,6 @@ impl TemplateVisitor<'_> {
         // Restore the parent scope
         self.current_scope = parent_scope;
     }
-
-    // TODO Maybe do this in parser instead, because it sometimes needs this info
-    fn recognize_element_kind(&self, starting_tag: &StartingTag) -> ElementKind {
-        let tag_name = &starting_tag.tag_name;
-
-        // First, check for a built-in
-        if let Some(builtin_type) = VUE_BUILTINS.get(tag_name) {
-            // Special case for `<component>`. If it does not have `is`, this is not a built-in
-            if tag_name.eq("component") {
-                let has_is = starting_tag
-                    .attributes
-                    .iter()
-                    .any(|attr| check_attribute_name(attr, "is"));
-
-                if !has_is {
-                    return ElementKind::Component;
-                }
-            }
-
-            return ElementKind::Builtin(*builtin_type);
-        }
-
-        // Then check if this is an HTML tag
-        if is_html_tag(&starting_tag.tag_name) {
-            ElementKind::Element
-        } else {
-            ElementKind::Component
-        }
-    }
 }
 
 impl VisitMut for Node {
@@ -809,23 +782,6 @@ mod tests {
 
     use super::*;
 
-    /// Special case: `<component>` without `is` attribute is not a builtin
-    #[test]
-    fn it_distinguishes_component_builtin_and_not() {
-        let starting_tag = StartingTag {
-            tag_name: "component".into(),
-            attributes: vec![],
-            directives: None,
-        };
-
-        let mut ctx = TransformSfcContext::anonymous();
-        let template_visitor = TemplateVisitor::new(&mut ctx);
-        assert!(matches!(
-            template_visitor.recognize_element_kind(&starting_tag),
-            ElementKind::Component
-        ));
-    }
-
     #[test]
     fn it_folds_basic_seq() {
         // <template><div>
@@ -844,7 +800,7 @@ mod tests {
                 },
                 children: vec![text_node(), if_node(), else_if_node(), else_node()],
                 template_scope: 0,
-                kind: ElementKind::Element,
+                tag_type: ElementKind::Element,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
             })],
@@ -1036,7 +992,7 @@ mod tests {
                     span: DUMMY_SP,
                 }),
                 Node::Element(ElementNode {
-                    kind: ElementKind::Element,
+                    tag_type: ElementKind::Element,
                     starting_tag: StartingTag {
                         tag_name: "div".into(),
                         attributes: vec![],
@@ -1085,7 +1041,7 @@ mod tests {
                     else_node(),
                 ],
                 template_scope: 0,
-                kind: ElementKind::Element,
+                tag_type: ElementKind::Element,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
             })],
@@ -1122,7 +1078,7 @@ mod tests {
             },
             children: vec![],
             template_scope: 0,
-            kind: ElementKind::Element,
+            tag_type: ElementKind::Element,
             patch_hints: Default::default(),
             span: DUMMY_SP,
         });
@@ -1137,7 +1093,7 @@ mod tests {
             },
             children: vec![Node::Text("hello".into(), DUMMY_SP)],
             template_scope: 0,
-            kind: ElementKind::Element,
+            tag_type: ElementKind::Element,
             patch_hints: Default::default(),
             span: DUMMY_SP,
         });
@@ -1163,7 +1119,7 @@ mod tests {
         // For cloning
         // <p>text</p>
         let p = ElementNode {
-            kind: ElementKind::Element,
+            tag_type: ElementKind::Element,
             starting_tag: StartingTag {
                 tag_name: "p".into(),
                 attributes: vec![],
@@ -1176,7 +1132,7 @@ mod tests {
         };
         // <div v-if="false"></div>
         let div = ElementNode {
-            kind: ElementKind::Element,
+            tag_type: ElementKind::Element,
             starting_tag: StartingTag {
                 tag_name: "div".into(),
                 attributes: vec![],
@@ -1192,7 +1148,7 @@ mod tests {
         };
         // <template></template>
         let tmpl = ElementNode {
-            kind: ElementKind::Element,
+            tag_type: ElementKind::Element,
             starting_tag: StartingTag {
                 tag_name: "template".into(),
                 attributes: vec![],
@@ -1407,7 +1363,7 @@ mod tests {
             },
             children: vec![Node::Text("if".into(), DUMMY_SP)],
             template_scope: 0,
-            kind: ElementKind::Element,
+            tag_type: ElementKind::Element,
             patch_hints: Default::default(),
             span: DUMMY_SP,
         })
@@ -1440,7 +1396,7 @@ mod tests {
             },
             children: vec![Node::Text("else-if".into(), DUMMY_SP)],
             template_scope: 0,
-            kind: ElementKind::Element,
+            tag_type: ElementKind::Element,
             patch_hints: Default::default(),
             span: DUMMY_SP,
         })
@@ -1474,7 +1430,7 @@ mod tests {
             },
             children: vec![Node::Text("else".into(), DUMMY_SP)],
             template_scope: 0,
-            kind: ElementKind::Element,
+            tag_type: ElementKind::Element,
             patch_hints: Default::default(),
             span: DUMMY_SP,
         })
diff --git a/crates/fervid_transform/src/template/core/v_bind.rs b/crates/fervid_transform/src/template/core/v_bind.rs
index e69de29b..8b137891 100644
--- a/crates/fervid_transform/src/template/core/v_bind.rs
+++ b/crates/fervid_transform/src/template/core/v_bind.rs
@@ -0,0 +1 @@
+
diff --git a/crates/fervid_transform/src/template/core/v_model.rs b/crates/fervid_transform/src/template/core/v_model.rs
index e69de29b..8b137891 100644
--- a/crates/fervid_transform/src/template/core/v_model.rs
+++ b/crates/fervid_transform/src/template/core/v_model.rs
@@ -0,0 +1 @@
+
diff --git a/crates/fervid_transform/src/template/core/v_on.rs b/crates/fervid_transform/src/template/core/v_on.rs
index e69de29b..8b137891 100644
--- a/crates/fervid_transform/src/template/core/v_on.rs
+++ b/crates/fervid_transform/src/template/core/v_on.rs
@@ -0,0 +1 @@
+
diff --git a/crates/fervid_transform/src/template/directive_transforms.rs b/crates/fervid_transform/src/template/directive_transforms.rs
index d468649e..4e3edc08 100644
--- a/crates/fervid_transform/src/template/directive_transforms.rs
+++ b/crates/fervid_transform/src/template/directive_transforms.rs
@@ -90,7 +90,7 @@ pub enum DirectiveTransformsProvider {
 
 impl Default for DirectiveTransformsProvider {
     fn default() -> Self {
-        Self::Base(BaseDirectiveTransform::default())
+        Self::Base(BaseDirectiveTransform)
     }
 }
 
diff --git a/crates/fervid_transform/src/template/dom/mod.rs b/crates/fervid_transform/src/template/dom/mod.rs
index e69de29b..8b137891 100644
--- a/crates/fervid_transform/src/template/dom/mod.rs
+++ b/crates/fervid_transform/src/template/dom/mod.rs
@@ -0,0 +1 @@
+
diff --git a/crates/fervid_transform/src/template/mod.rs b/crates/fervid_transform/src/template/mod.rs
index 08680413..40990417 100644
--- a/crates/fervid_transform/src/template/mod.rs
+++ b/crates/fervid_transform/src/template/mod.rs
@@ -2,11 +2,11 @@ pub mod asset_urls;
 pub mod ast_transform;
 pub mod collect_vars;
 pub mod core;
-pub mod dom;
 pub mod directive_transforms;
+pub mod dom;
 pub mod expr_transform;
-pub mod node_transforms;
 pub mod js_builtins;
+pub mod node_transforms;
 pub mod resolutions;
 pub mod transform_element;
 pub mod utils;
diff --git a/crates/fervid_transform/src/template/node_transforms.rs b/crates/fervid_transform/src/template/node_transforms.rs
index 824c41b3..20ef09b3 100644
--- a/crates/fervid_transform/src/template/node_transforms.rs
+++ b/crates/fervid_transform/src/template/node_transforms.rs
@@ -36,7 +36,7 @@ pub enum NodeTransformsProvider {
 
 impl Default for NodeTransformsProvider {
     fn default() -> Self {
-        Self::Base(BaseNodeTransform::default())
+        Self::Base(BaseNodeTransform)
     }
 }
 
diff --git a/crates/fervid_transform/src/template/transform_element.rs b/crates/fervid_transform/src/template/transform_element.rs
index 334bf0cc..b15c592c 100644
--- a/crates/fervid_transform/src/template/transform_element.rs
+++ b/crates/fervid_transform/src/template/transform_element.rs
@@ -1,23 +1,32 @@
+use std::borrow::Cow;
+
 use fervid_core::{
     create_call_expression, create_object_expression, create_object_property,
     create_simple_expression_bool, create_simple_expression_propname, create_simple_expression_str,
-    fervid_atom, AttributeOrBinding, BindingTypes, CallExpression, ElementNode, ExpressionNode, ExpressionPropNameNode, FervidAtom, JsChildNode,
-    ObjectExpression, PatchFlags, PatchHints, Property, SimpleExpressionPropNameNode, StartingTag, StrOrExpr, VCustomDirective, VModelDirective,
+    fervid_atom, AttributeOrBinding, BindingTypes, BuiltinType, CallExpression, ComponentBinding,
+    ElementKind, ElementNode, ExpressionNode, ExpressionPropNameNode, FervidAtom, IntoIdent,
+    JsChildNode, ObjectExpression, PatchFlags, PatchHints, Property, SimpleExpressionNode,
+    SimpleExpressionPropNameNode, StartingTag, StrOrExpr, VCustomDirective, VModelDirective,
     VueDirectives, VueImports,
 };
 use flagset::FlagSet;
 use phf::phf_set;
 use swc_core::{
     common::{util::take::Take, DUMMY_SP},
-    ecma::ast::{Expr, Lit},
+    ecma::ast::{Expr, IdentName, MemberExpr, MemberProp},
 };
 
 use crate::{
     error::{TemplateError, TemplateErrorKind, TransformError},
     template::{
-        directive_transforms::DirectiveTransforms, expr_transform::BindingsHelperTransform,
+        directive_transforms::DirectiveTransforms,
+        expr_transform::BindingsHelperTransform,
+        utils::{
+            find_prop, is_core_component, is_static_arg_of, to_camel_case, to_pascal_case,
+            to_valid_asset_id,
+        },
     },
-    TransformSfcContext,
+    BindingsHelper, SetupBinding, TransformSfcContext,
 };
 
 pub struct Props<'a> {
@@ -59,8 +68,200 @@ pub struct PatchMarkers {
     pub should_use_block: bool,
 }
 
-pub fn post_transform_element_node(node: &ElementNode, ctx: &mut TransformSfcContext) {
+pub fn post_transform_element_node(node: &mut ElementNode, ctx: &mut TransformSfcContext) {
+    if !matches!(node.tag_type, ElementKind::Element | ElementKind::Component) {
+        return;
+    }
+
+    // TODO Finish the implementation
+}
+
+enum ResolveComponentTypeReturn {
+    CallExpression(CallExpression),
+    Builtin(BuiltinType),
+    Expr(Box<Expr>),
+}
+
+/// https://github.com/vuejs/core/blob/aac7e1898907445c8f89b22047a9bfcf0a6e91b8/packages/compiler-core/src/transforms/transformElement.ts#L227-L320
+fn resolve_component_type(
+    node: &mut ElementNode,
+    ctx: &mut TransformSfcContext,
+    ssr: bool,
+) -> ResolveComponentTypeReturn {
+    let mut tag = Cow::Borrowed(&node.starting_tag.tag_name);
+
+    // 1. Dynamic component
+    let is_explicit_dynamic = is_component_tag(&node.starting_tag);
+    let is_prop = find_prop(node, "is", false, true);
+    if let Some(is_prop) = is_prop {
+        if is_explicit_dynamic {
+            let mut exp: Option<ExpressionNode> = None;
+            if let AttributeOrBinding::RegularAttribute { value, span, .. } = is_prop {
+                exp = Some(ExpressionNode::SimpleExpression(
+                    create_simple_expression_str(value.clone(), true, *span),
+                ));
+            } else if let AttributeOrBinding::VBind(v_bind_directive) = is_prop {
+                // Note: we assume this is a simple expression while we don't have this information
+                exp = Some(ExpressionNode::SimpleExpression(SimpleExpressionNode {
+                    ast: v_bind_directive.value.clone(),
+                    is_static: false,
+                    const_type: fervid_core::ConstantTypes::NotConstant,
+                    is_handler_key: false,
+                }));
+                // Note: the official transform handles `:is` shorthand expansion (`:is` -> `:is="is"`)
+                // and transformation, but Fervid already expands the shorthands during parsing
+            }
+
+            if let Some(exp) = exp {
+                return ResolveComponentTypeReturn::CallExpression(create_call_expression(
+                    ctx.bindings_helper
+                        .helper(VueImports::ResolveDynamicComponent),
+                    vec![JsChildNode::ExpressionNode(Box::new(exp))],
+                    DUMMY_SP,
+                ));
+            }
+        } else if let AttributeOrBinding::RegularAttribute { value, .. } = is_prop {
+            if let Some(value_without_prefix) = value.strip_prefix("vue:") {
+                // <button is="vue:xxx">
+                // if not <component>, only is value that starts with "vue:" will be
+                // treated as component by the parse phase and reach here, unless it's
+                // compat mode where all is values are considered components
+                tag = Cow::Owned(FervidAtom::from(value_without_prefix));
+            }
+        }
+    }
+
+    // 2. Built-in component (Teleport, Transition, KeepAlive, Suspense...)
+    if let Some(built_in) = is_core_component(&tag) {
+        // built-ins are simply fallthroughs / have special handling during ssr
+        // so we don't need to import their runtime equivalents
+        if !ssr {
+            ctx.bindings_helper.helper(built_in.into());
+        }
+        return ResolveComponentTypeReturn::Builtin(built_in);
+    }
 
+    // 3. User component (from setup bindings)
+    // Note: `resolve_component_setup_reference` already handles `.` inside component name
+    if let Some(resolved_from_setup) = resolve_component_setup_reference(ctx, &tag) {
+        return ResolveComponentTypeReturn::Expr(resolved_from_setup);
+    }
+
+    // 4 & 5 common
+    let tag_ident = FervidAtom::from(to_valid_asset_id(&tag, "component")).into_ident();
+    ctx.bindings_helper.helper(VueImports::ResolveComponent);
+
+    // 4. Self referencing component (inferred from filename)
+    if let Some(self_name) = &ctx.self_name {
+        let mut pascal_name = String::with_capacity(tag.len());
+        to_pascal_case(&tag, &mut pascal_name);
+        if pascal_name.eq(self_name) {
+            ctx.bindings_helper.components.insert(
+                tag.into_owned(),
+                ComponentBinding::RuntimeResolved(
+                    Box::new(tag_ident.to_owned()),
+                    /* is_self_reference = */ true,
+                ),
+            );
+
+            return ResolveComponentTypeReturn::Expr(Box::new(Expr::Ident(tag_ident)));
+        }
+    }
+
+    // 5. User component (resolve)
+    ctx.bindings_helper.components.insert(
+        tag.into_owned(),
+        ComponentBinding::RuntimeResolved(Box::new(tag_ident.to_owned()), false),
+    );
+    ResolveComponentTypeReturn::Expr(Box::new(Expr::Ident(tag_ident)))
+}
+
+// TODO: This duplicates `TemplateVisitor::maybe_resolve_component`, clean up the other implementation
+/// This is a custom implementation of `resolveSetupReference`
+/// which is tailored for components and caches the result in `ctx.bindings_helper.components`
+/// for compatibility with the existing codegen.
+/// It also utilizes `transform_expr` instead of a fixed transformation
+/// for closer integration with the existing transform logic.
+fn resolve_component_setup_reference(
+    ctx: &mut TransformSfcContext,
+    tag_name: &FervidAtom,
+) -> Option<Box<Expr>> {
+    // Check the existing resolutions.
+    // Do nothing if found, regardless if it was previously resolved or not,
+    // because codegen will handle the runtime resolution.
+    match ctx.bindings_helper.components.get(tag_name) {
+        Some(ComponentBinding::Resolved(resolved)) => return Some(resolved.to_owned()),
+        Some(ComponentBinding::Unresolved) => return None,
+        Some(_) => unreachable!("Only ComponentBinding::Resolved and Unresolved are expected"),
+        None => {}
+    }
+
+    // If the tag name contains a dot, it won't be found in the bindings - look directly for a namespaced component
+    // Example: `<Foo.Bar>`
+    let namespace_dot_idx = tag_name.find('.');
+    let found = match namespace_dot_idx {
+        Some(dot_idx) => find_binding(&mut ctx.bindings_helper, &tag_name[..dot_idx]),
+        None => find_binding(&mut ctx.bindings_helper, tag_name),
+    };
+
+    if let Some(found) = found {
+        let mut resolved_to = Expr::Ident(found.sym.to_owned().into_ident());
+
+        // For `Component` binding types, do not transform.
+        // TODO I am not sure about `Imported` though,
+        // the official compiler sees them as if `SetupMaybeRef` and transforms.
+        if !matches!(found.binding_type, BindingTypes::Component) {
+            ctx.bindings_helper
+                .transform_expr(&mut resolved_to, ctx.current_template_scope);
+        }
+
+        // For namespaced components, add the second part (`Bar` in `<Foo.Bar>`)
+        if let Some(dot_idx) = namespace_dot_idx {
+            resolved_to = Expr::Member(MemberExpr {
+                span: DUMMY_SP,
+                obj: Box::new(resolved_to),
+                prop: MemberProp::Ident(IdentName {
+                    span: DUMMY_SP,
+                    sym: FervidAtom::from(&tag_name[(dot_idx + 1)..]),
+                }),
+            })
+        }
+
+        // Was resolved
+        ctx.bindings_helper.components.insert(
+            tag_name.to_owned(),
+            ComponentBinding::Resolved(Box::new(resolved_to.to_owned())),
+        );
+
+        Some(Box::new(resolved_to))
+    } else {
+        // Was not resolved
+        ctx.bindings_helper
+            .components
+            .insert(tag_name.to_owned(), ComponentBinding::Unresolved);
+
+        None
+    }
+}
+
+fn find_binding<'a>(
+    bindings_helper: &'a mut BindingsHelper,
+    tag_name: &str,
+) -> Option<&'a SetupBinding> {
+    // `component-name`s like that should be transformed to `ComponentName`s
+    let mut searched_pascal = String::with_capacity(tag_name.len());
+    to_pascal_case(tag_name, &mut searched_pascal);
+
+    // and to `componentName`
+    let mut searched_camel = String::with_capacity(tag_name.len());
+    to_camel_case(tag_name, &mut searched_camel);
+
+    bindings_helper
+        .setup_bindings
+        .iter()
+        .find(|binding| binding.sym == searched_pascal || binding.sym == searched_camel)
+
+    // TODO Auto-importing the components can happen here
 }
 
 pub fn build_props(
@@ -333,7 +534,7 @@ pub fn build_props(
                 if !ssr {
                     for prop in directive_transform_result.props.iter() {
                         analyze_patch_flag(
-                            &prop,
+                            prop,
                             &mut patch_markers,
                             is_component,
                             is_dynamic_component,
@@ -487,8 +688,7 @@ pub fn build_props(
 
                     props_expression = Some(PropsExpression::CallExpression(Box::new(
                         create_call_expression(
-                            ctx.bindings_helper
-                                .helper(VueImports::NormalizeProps),
+                            ctx.bindings_helper.helper(VueImports::NormalizeProps),
                             args,
                             DUMMY_SP,
                         ),
@@ -500,8 +700,7 @@ pub fn build_props(
                             let class_prop_value = std::mem::replace(
                                 &mut class_prop.value,
                                 create_call_expression(
-                                    ctx.bindings_helper
-                                        .helper(VueImports::NormalizeClass),
+                                    ctx.bindings_helper.helper(VueImports::NormalizeClass),
                                     Vec::with_capacity(1),
                                     DUMMY_SP,
                                 )
@@ -524,8 +723,7 @@ pub fn build_props(
                             let style_prop_value = std::mem::replace(
                                 &mut style_prop.value,
                                 create_call_expression(
-                                    ctx.bindings_helper
-                                        .helper(VueImports::NormalizeStyle),
+                                    ctx.bindings_helper.helper(VueImports::NormalizeStyle),
                                     Vec::with_capacity(1),
                                     DUMMY_SP,
                                 )
@@ -548,8 +746,7 @@ pub fn build_props(
             PropsExpression::ExpressionNode(expr) => {
                 let args = vec![JsChildNode::CallExpression(Box::new(
                     create_call_expression(
-                        ctx.bindings_helper
-                            .helper(VueImports::GuardReactiveProps),
+                        ctx.bindings_helper.helper(VueImports::GuardReactiveProps),
                         vec![JsChildNode::ExpressionNode(expr)],
                         DUMMY_SP,
                     ),
@@ -557,8 +754,7 @@ pub fn build_props(
 
                 props_expression = Some(PropsExpression::CallExpression(Box::new(
                     create_call_expression(
-                        ctx.bindings_helper
-                            .helper(VueImports::NormalizeProps),
+                        ctx.bindings_helper.helper(VueImports::NormalizeProps),
                         args,
                         DUMMY_SP,
                     ),
@@ -569,7 +765,7 @@ pub fn build_props(
 
     // TODO Finish the function but keep in mind that `buildProps` is called on node exit,
     // i.e. after all the children have been transformed.
-    // I likely have to re-think the scoping mechanism and identifiers injection to accomodate for the change
+    // I likely have to re-think the scoping mechanism and identifiers injection to accommodate for the change
 
     // The current design of `v-for` is quite convoluted, but the actual function which is executed is `processFor`
     // which manages the scope and identifiers and processes the code generation on exit,
@@ -604,8 +800,8 @@ fn analyze_patch_flag(
 
     let name = &key.ast.sym;
 
-    let is_event_handler = is_on(&name);
-    let is_reserved = is_reserved_prop(&name);
+    let is_event_handler = is_on(name);
+    let is_reserved = is_reserved_prop(name);
 
     if is_event_handler
         && (!is_component || is_dynamic_component)
@@ -645,7 +841,7 @@ fn analyze_patch_flag(
         "ref" => patch_markers.has_ref = true,
         "class" => patch_markers.has_class_binding = true,
         "style" => patch_markers.has_style_binding = true,
-        x if x != "key" && !patch_markers.dynamic_prop_names.contains(&name) => {
+        x if x != "key" && !patch_markers.dynamic_prop_names.contains(name) => {
             patch_markers.dynamic_prop_names.push(name.to_owned());
         }
         _ => {}
@@ -653,7 +849,7 @@ fn analyze_patch_flag(
 
     if is_component
         && (name == "class" || name == "style")
-        && !patch_markers.dynamic_prop_names.contains(&name)
+        && !patch_markers.dynamic_prop_names.contains(name)
     {
         patch_markers.dynamic_prop_names.push(name.to_owned());
     }
@@ -684,9 +880,9 @@ impl From<&Expr> for PropsExpression {
     }
 }
 
-impl Into<JsChildNode> for PropsExpression {
-    fn into(self) -> JsChildNode {
-        match self {
+impl From<PropsExpression> for JsChildNode {
+    fn from(val: PropsExpression) -> Self {
+        match val {
             PropsExpression::ObjectExpression(o) => JsChildNode::ObjectExpression(o),
             PropsExpression::CallExpression(c) => JsChildNode::CallExpression(c),
             PropsExpression::ExpressionNode(e) => JsChildNode::ExpressionNode(e),
@@ -695,16 +891,6 @@ impl Into<JsChildNode> for PropsExpression {
 }
 
 // TODO: Move to transform core/utils.rs
-fn is_static_arg_of(arg: Option<&StrOrExpr>, name: &str) -> bool {
-    match arg {
-        Some(StrOrExpr::Str(s)) if s == name => true,
-        Some(StrOrExpr::Expr(expr)) => match expr.as_ref() {
-            Expr::Lit(Lit::Str(s)) if s.value == name => true,
-            _ => false,
-        },
-        _ => false,
-    }
-}
 fn is_static_exp(arg: &JsChildNode) -> bool {
     match arg {
         JsChildNode::ExpressionNode(expression_node) => match expression_node.as_ref() {
@@ -726,7 +912,7 @@ fn is_static_exp_str_or_expr(arg: &StrOrExpr) -> bool {
 }
 fn get_static_exp(arg: &ExpressionPropNameNode) -> Option<&SimpleExpressionPropNameNode> {
     match arg {
-        ExpressionPropNameNode::SimpleExpression(s) if s.is_static => Some(&s),
+        ExpressionPropNameNode::SimpleExpression(s) if s.is_static => Some(s),
         _ => None,
     }
 }
diff --git a/crates/fervid_transform/src/template/utils.rs b/crates/fervid_transform/src/template/utils.rs
index 14e9d06d..170855ee 100644
--- a/crates/fervid_transform/src/template/utils.rs
+++ b/crates/fervid_transform/src/template/utils.rs
@@ -1,9 +1,68 @@
-use fervid_core::FervidAtom;
+use fervid_core::{
+    AttributeOrBinding, BuiltinType, ElementNode, FervidAtom, StrOrExpr, VUE_BUILTINS,
+};
 use swc_core::{
     common::DUMMY_SP,
-    ecma::ast::{ArrowExpr, BindingIdent, BlockStmtOrExpr, Expr, Ident, Pat},
+    ecma::ast::{ArrowExpr, BindingIdent, BlockStmtOrExpr, Expr, Ident, Lit, Pat},
 };
 
+/// Note: the original implementation only handles Teleport, Suspense, KeepAlive and BaseTransition
+pub fn is_core_component(tag: &str) -> Option<BuiltinType> {
+    let built_in = VUE_BUILTINS.get(tag);
+    match built_in {
+        Some(
+            BuiltinType::Teleport
+            | BuiltinType::Suspense
+            | BuiltinType::KeepAlive
+            | BuiltinType::BaseTransition,
+        ) => built_in.copied(),
+        _ => None,
+    }
+}
+
+pub fn find_prop<'a>(
+    node: &'a ElementNode,
+    name: &str,
+    dynamic_only: bool,
+    allow_empty: bool,
+) -> Option<&'a AttributeOrBinding> {
+    for attr_or_binding in node.starting_tag.attributes.iter() {
+        match attr_or_binding {
+            AttributeOrBinding::RegularAttribute {
+                name: attr_name,
+                value,
+                ..
+            } => {
+                if dynamic_only {
+                    continue;
+                }
+                if attr_name == name && (allow_empty || !value.is_empty()) {
+                    return Some(attr_or_binding);
+                }
+            }
+            AttributeOrBinding::VBind(v_bind_directive) => {
+                if is_static_arg_of(v_bind_directive.argument.as_ref(), name) {
+                    return Some(attr_or_binding);
+                }
+            }
+            AttributeOrBinding::VOn(_) => {}
+        }
+    }
+
+    None
+}
+
+pub fn is_static_arg_of(arg: Option<&StrOrExpr>, name: &str) -> bool {
+    match arg {
+        Some(StrOrExpr::Str(s)) if s == name => true,
+        Some(StrOrExpr::Expr(expr)) => match expr.as_ref() {
+            Expr::Lit(Lit::Str(s)) if s.value == name => true,
+            _ => false,
+        },
+        _ => false,
+    }
+}
+
 /// `foo-bar-baz` -> `FooBarBaz`
 #[inline]
 pub(crate) fn to_pascal_case(raw: &str, out: &mut String) {
@@ -43,6 +102,29 @@ pub(crate) fn to_camel_case(raw: &str, out: &mut String) {
     }
 }
 
+/// Converts `-` and special characters in `name` to `_` and character codes.
+/// `asset_type` is one of: 'component', 'directive' or 'filter'.
+/// Note that this mismatches with JS implementation as it operates on UTF-8 characters and not UTF-16 code units.
+/// https://github.com/vuejs/core/blob/aac7e1898907445c8f89b22047a9bfcf0a6e91b8/packages/compiler-core/src/utils.ts#L490-L498
+pub fn to_valid_asset_id(name: &str, asset_type: &str) -> String {
+    let mut out = String::with_capacity(name.len() + 16);
+    out.push('_');
+    out.push_str(asset_type);
+    out.push('_');
+
+    for ch in name.chars() {
+        if ch.is_ascii_alphanumeric() || ch == '_' {
+            out.push(ch);
+        } else if ch == '-' {
+            out.push('_');
+        } else {
+            out.push_str(&(ch as u32).to_string());
+        }
+    }
+
+    out
+}
+
 /// Wraps `expr` to `$event => (expr)`
 #[inline]
 pub fn wrap_in_event_arrow(expr: Box<Expr>) -> Box<Expr> {
diff --git a/cspell.json b/cspell.json
index 4d6e2b8c..7dc0b0cb 100644
--- a/cspell.json
+++ b/cspell.json
@@ -141,7 +141,9 @@
     "clippy",
     "dashmap",
     "ropey",
-    "indexmap"
+    "indexmap",
+    "fallthroughs",
+    "onclick"
   ],
   "ignorePaths": [
     ".github/**",

From d92141e0eebd26f0bdeb6bee8cdd9525dad8bc08 Mon Sep 17 00:00:00 2001
From: Marsel Shaikhin <phoenix.apps@proton.me>
Date: Mon, 12 Jan 2026 00:10:22 +0100
Subject: [PATCH 4/9] enh: add codegen_node to ElementNode definition

---
 crates/fervid/src/parser_old/core.rs          |   2 +
 .../fervid_codegen/src/builtins/component.rs  | 113 ++----
 .../fervid_codegen/src/builtins/keepalive.rs  |  52 +--
 crates/fervid_codegen/src/builtins/slot.rs    |  63 ++-
 .../fervid_codegen/src/builtins/suspense.rs   |  52 +--
 .../fervid_codegen/src/builtins/teleport.rs   |  52 +--
 .../fervid_codegen/src/builtins/transition.rs |  52 +--
 .../src/builtins/transition_group.rs          |  52 +--
 crates/fervid_codegen/src/components/mod.rs   | 367 ++++++------------
 .../src/control_flow/conditional_seq.rs       |  14 +
 .../src/control_flow/slotted_iterator.rs      |   6 +
 .../fervid_codegen/src/directives/v_html.rs   |   2 +
 .../fervid_codegen/src/directives/v_text.rs   |   2 +
 crates/fervid_codegen/src/elements/mod.rs     |   7 +
 crates/fervid_core/src/ast.rs                 |  79 +++-
 crates/fervid_core/src/structs.rs             |  50 ++-
 crates/fervid_parser/src/template.rs          |   1 +
 crates/fervid_transform/src/error.rs          |   3 +
 .../src/template/ast_transform.rs             |  25 +-
 .../src/template/directive_transforms.rs      |  18 +-
 .../src/template/transform_element.rs         | 229 ++++++++---
 crates/fervid_transform/src/template/utils.rs |   7 +-
 .../fervid_transform/src/template/v_model.rs  |   2 +-
 23 files changed, 656 insertions(+), 594 deletions(-)

diff --git a/crates/fervid/src/parser_old/core.rs b/crates/fervid/src/parser_old/core.rs
index 1a1a9164..4f6deec4 100644
--- a/crates/fervid/src/parser_old/core.rs
+++ b/crates/fervid/src/parser_old/core.rs
@@ -322,6 +322,7 @@ pub fn parse_element_node(input: &str) -> IResult<&str, Node> {
                 tag_type: ElementKind::Element,
                 patch_hints: Default::default(),
                 span: DUMMY_SP, // TODO
+                codegen_node: None,
             }),
         ));
     }
@@ -349,6 +350,7 @@ pub fn parse_element_node(input: &str) -> IResult<&str, Node> {
             tag_type: ElementKind::Element,
             patch_hints: Default::default(),
             span: DUMMY_SP, // TODO
+            codegen_node: None,
         }),
     ))
 }
diff --git a/crates/fervid_codegen/src/builtins/component.rs b/crates/fervid_codegen/src/builtins/component.rs
index 25d03b58..3e8a3186 100644
--- a/crates/fervid_codegen/src/builtins/component.rs
+++ b/crates/fervid_codegen/src/builtins/component.rs
@@ -113,18 +113,15 @@ mod tests {
             || {
                 // <component></component>
                 test_out(
-                    ElementNode {
-                        tag_type: ElementKind::Builtin(BuiltinType::Component),
-                        starting_tag: StartingTag {
+                    ElementNode::new_with_children_and_type(
+                        StartingTag {
                             tag_name: "component".into(),
                             attributes: vec![],
                             directives: None,
                         },
-                        children: vec![],
-                        template_scope: 0,
-                        patch_hints: Default::default(),
-                        span: DUMMY_SP,
-                    },
+                        vec![],
+                        ElementKind::Builtin(BuiltinType::Component),
+                    ),
                     r#""#,
                 );
             },
@@ -136,18 +133,15 @@ mod tests {
     fn it_generates_component_is_static() {
         // <component is="div"></component>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::Component),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "component".into(),
                     attributes: vec![regular_attribute("is", "div")],
                     directives: None,
                 },
-                children: vec![],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![],
+                ElementKind::Builtin(BuiltinType::Component),
+            ),
             r#"(_openBlock(),_createBlock(_resolveDynamicComponent("div")))"#,
         );
     }
@@ -156,18 +150,15 @@ mod tests {
     fn it_generates_component_is_binding() {
         // <component :is="foo"></component>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::Component),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "component".into(),
                     attributes: vec![v_bind_attribute("is", "foo")],
                     directives: None,
                 },
-                children: vec![],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![],
+                ElementKind::Builtin(BuiltinType::Component),
+            ),
             r#"(_openBlock(),_createBlock(_resolveDynamicComponent(foo)))"#,
         );
     }
@@ -176,9 +167,8 @@ mod tests {
     fn it_generates_component_builtin_attrs() {
         // <component is="div" foo="bar" :baz="qux"></component>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::Component),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "component".into(),
                     attributes: vec![
                         regular_attribute("is", "div"),
@@ -187,11 +177,9 @@ mod tests {
                     ],
                     directives: None,
                 },
-                children: vec![],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![],
+                ElementKind::Builtin(BuiltinType::Component),
+            ),
             r#"(_openBlock(),_createBlock(_resolveDynamicComponent("div"),{foo:"bar",baz:qux}))"#,
         )
     }
@@ -200,18 +188,15 @@ mod tests {
     fn it_generates_component_builtin_default_slot() {
         // <component is="div">foobar</component>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::Component),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "component".into(),
                     attributes: vec![regular_attribute("is", "div")],
                     directives: None,
                 },
-                children: vec![Node::Text("foobar".into(), DUMMY_SP)],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![Node::Text("foobar".into(), DUMMY_SP)],
+                ElementKind::Builtin(BuiltinType::Component),
+            ),
             r#"(_openBlock(),_createBlock(_resolveDynamicComponent("div"),null,{default:_withCtx(()=>[_createTextVNode("foobar")]),_:1}))"#,
         )
     }
@@ -222,16 +207,14 @@ mod tests {
         //   <template v-slot:named>foobar</template>
         // </component>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::Component),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "component".into(),
                     attributes: vec![regular_attribute("is", "div")],
                     directives: None,
                 },
-                children: vec![Node::Element(ElementNode {
-                    tag_type: ElementKind::Element,
-                    starting_tag: StartingTag {
+                vec![Node::Element(ElementNode::new_with_children(
+                    StartingTag {
                         tag_name: "template".into(),
                         attributes: vec![],
                         directives: Some(Box::new(VueDirectives {
@@ -242,15 +225,10 @@ mod tests {
                             ..Default::default()
                         })),
                     },
-                    children: vec![Node::Text("foobar".into(), DUMMY_SP)],
-                    template_scope: 0,
-                    patch_hints: Default::default(),
-                    span: DUMMY_SP,
-                })],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                    vec![Node::Text("foobar".into(), DUMMY_SP)],
+                ))],
+                ElementKind::Builtin(BuiltinType::Component),
+            ),
             r#"(_openBlock(),_createBlock(_resolveDynamicComponent("div"),null,{named:_withCtx(()=>[_createTextVNode("foobar")]),_:1}))"#,
         )
     }
@@ -264,9 +242,8 @@ mod tests {
         //   </template>
         // </component>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::Component),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "component".into(),
                     attributes: vec![
                         regular_attribute("is", "div"),
@@ -275,11 +252,10 @@ mod tests {
                     ],
                     directives: None,
                 },
-                children: vec![
+                vec![
                     Node::Text("foobar".into(), DUMMY_SP),
-                    Node::Element(ElementNode {
-                        tag_type: ElementKind::Element,
-                        starting_tag: StartingTag {
+                    Node::Element(ElementNode::new_with_children(
+                        StartingTag {
                             tag_name: "template".into(),
                             attributes: vec![],
                             directives: Some(Box::new(VueDirectives {
@@ -290,16 +266,11 @@ mod tests {
                                 ..Default::default()
                             })),
                         },
-                        children: vec![Node::Text("bazqux".into(), DUMMY_SP)],
-                        template_scope: 0,
-                        patch_hints: Default::default(),
-                        span: DUMMY_SP,
-                    }),
+                        vec![Node::Text("bazqux".into(), DUMMY_SP)],
+                    )),
                 ],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                ElementKind::Builtin(BuiltinType::Component),
+            ),
             r#"(_openBlock(),_createBlock(_resolveDynamicComponent("div"),{foo:"bar",baz:qux},{named:_withCtx(()=>[_createTextVNode("bazqux")]),default:_withCtx(()=>[_createTextVNode("foobar")]),_:1}))"#,
         )
     }
diff --git a/crates/fervid_codegen/src/builtins/keepalive.rs b/crates/fervid_codegen/src/builtins/keepalive.rs
index 05640471..a0ad14fd 100644
--- a/crates/fervid_codegen/src/builtins/keepalive.rs
+++ b/crates/fervid_codegen/src/builtins/keepalive.rs
@@ -72,18 +72,15 @@ mod tests {
     fn it_generates_empty_keepalive() {
         // <keep-alive></keep-alive>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::KeepAlive),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "keep-alive".into(),
                     attributes: vec![],
                     directives: None,
                 },
-                children: vec![],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![],
+                ElementKind::Builtin(BuiltinType::KeepAlive),
+            ),
             r#"_createVNode(_KeepAlive)"#,
         )
     }
@@ -92,9 +89,8 @@ mod tests {
     fn it_generates_keepalive_attrs() {
         // <keep-alive foo="bar" :baz="qux"></keep-alive>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::KeepAlive),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "keep-alive".into(),
                     attributes: vec![
                         regular_attribute("foo", "bar"),
@@ -102,11 +98,9 @@ mod tests {
                     ],
                     directives: None,
                 },
-                children: vec![],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![],
+                ElementKind::Builtin(BuiltinType::KeepAlive),
+            ),
             r#"_createVNode(_KeepAlive,{foo:"bar",baz:qux})"#,
         )
     }
@@ -115,18 +109,15 @@ mod tests {
     fn it_generates_keepalive_children() {
         // <keep-alive>foobar</keep-alive>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::KeepAlive),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "keep-alive".into(),
                     attributes: vec![],
                     directives: None,
                 },
-                children: vec![Node::Text("foobar".into(), DUMMY_SP)],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![Node::Text("foobar".into(), DUMMY_SP)],
+                ElementKind::Builtin(BuiltinType::KeepAlive),
+            ),
             r#"(_openBlock(),_createBlock(_KeepAlive,null,[_createTextVNode("foobar")],1024))"#,
         )
     }
@@ -135,9 +126,8 @@ mod tests {
     fn it_generates_full_keepalive() {
         // <keep-alive foo="bar" :baz="qux">foobar</keep-alive>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::KeepAlive),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "keep-alive".into(),
                     attributes: vec![
                         regular_attribute("foo", "bar"),
@@ -145,11 +135,9 @@ mod tests {
                     ],
                     directives: None,
                 },
-                children: vec![Node::Text("foobar".into(), DUMMY_SP)],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![Node::Text("foobar".into(), DUMMY_SP)],
+                ElementKind::Builtin(BuiltinType::KeepAlive),
+            ),
             r#"(_openBlock(),_createBlock(_KeepAlive,{foo:"bar",baz:qux},[_createTextVNode("foobar")],1024))"#,
         )
     }
diff --git a/crates/fervid_codegen/src/builtins/slot.rs b/crates/fervid_codegen/src/builtins/slot.rs
index 2ad17f9e..91bc90ec 100644
--- a/crates/fervid_codegen/src/builtins/slot.rs
+++ b/crates/fervid_codegen/src/builtins/slot.rs
@@ -170,18 +170,15 @@ mod tests {
 
     macro_rules! slot {
         ($attributes: expr, $children: expr) => {
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::Slot),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "slot".into(),
                     attributes: $attributes,
                     directives: None,
                 },
-                children: $children,
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            }
+                $children,
+                ElementKind::Builtin(BuiltinType::Slot),
+            )
         };
     }
 
@@ -282,30 +279,23 @@ mod tests {
             slot!(
                 vec![],
                 vec![
-                    Node::Element(ElementNode {
-                        tag_type: ElementKind::Element,
-                        starting_tag: StartingTag {
+                    Node::Element(ElementNode::new_with_children(
+                        StartingTag {
                             tag_name: "div".into(),
                             attributes: vec![],
                             directives: None
                         },
-                        children: vec![Node::Text("Placeholder".into(), DUMMY_SP)],
-                        template_scope: 0,
-                        patch_hints: Default::default(),
-                        span: DUMMY_SP,
-                    }),
-                    Node::Element(ElementNode {
-                        tag_type: ElementKind::Component,
-                        starting_tag: StartingTag {
+                        vec![Node::Text("Placeholder".into(), DUMMY_SP)],
+                    )),
+                    Node::Element(ElementNode::new_with_children_and_type(
+                        StartingTag {
                             tag_name: "foo-component".into(),
                             attributes: vec![],
                             directives: None
                         },
-                        children: vec![],
-                        template_scope: 0,
-                        patch_hints: Default::default(),
-                        span: DUMMY_SP,
-                    })
+                        vec![],
+                        ElementKind::Component,
+                    ))
                 ]
             ),
             r#"_renderSlot(_ctx.$slots,"default",{},[_createElementVNode("div",null,"Placeholder"),_createVNode(_component_foo_component)])"#,
@@ -326,30 +316,23 @@ mod tests {
                     v_bind_attribute("baz", "qux"),
                 ],
                 vec![
-                    Node::Element(ElementNode {
-                        tag_type: ElementKind::Element,
-                        starting_tag: StartingTag {
+                    Node::Element(ElementNode::new_with_children(
+                        StartingTag {
                             tag_name: "div".into(),
                             attributes: vec![],
                             directives: None
                         },
-                        children: vec![Node::Text("Placeholder".into(), DUMMY_SP)],
-                        template_scope: 0,
-                        patch_hints: Default::default(),
-                        span: DUMMY_SP,
-                    }),
-                    Node::Element(ElementNode {
-                        tag_type: ElementKind::Component,
-                        starting_tag: StartingTag {
+                        vec![Node::Text("Placeholder".into(), DUMMY_SP)],
+                    )),
+                    Node::Element(ElementNode::new_with_children_and_type(
+                        StartingTag {
                             tag_name: "foo-component".into(),
                             attributes: vec![],
                             directives: None
                         },
-                        children: vec![],
-                        template_scope: 0,
-                        patch_hints: Default::default(),
-                        span: DUMMY_SP,
-                    })
+                        vec![],
+                        ElementKind::Component
+                    ))
                 ]
             ),
             r#"_renderSlot(_ctx.$slots,"test-slot",{foo:"bar",baz:qux},[_createElementVNode("div",null,"Placeholder"),_createVNode(_component_foo_component)])"#,
diff --git a/crates/fervid_codegen/src/builtins/suspense.rs b/crates/fervid_codegen/src/builtins/suspense.rs
index 39ea9ee4..c6d15878 100644
--- a/crates/fervid_codegen/src/builtins/suspense.rs
+++ b/crates/fervid_codegen/src/builtins/suspense.rs
@@ -45,18 +45,15 @@ mod tests {
     fn it_generates_empty_suspense() {
         // <suspense></suspense>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::Suspense),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "suspense".into(),
                     attributes: vec![],
                     directives: None,
                 },
-                children: vec![],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![],
+                ElementKind::Builtin(BuiltinType::Suspense),
+            ),
             r#"(_openBlock(),_createBlock(_Suspense))"#,
         )
     }
@@ -65,9 +62,8 @@ mod tests {
     fn it_generates_suspense_attrs() {
         // <suspense foo="bar" :baz="qux"></suspense>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::Suspense),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "suspense".into(),
                     attributes: vec![
                         regular_attribute("foo", "bar"),
@@ -75,11 +71,9 @@ mod tests {
                     ],
                     directives: None,
                 },
-                children: vec![],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![],
+                ElementKind::Builtin(BuiltinType::Suspense),
+            ),
             r#"(_openBlock(),_createBlock(_Suspense,{foo:"bar",baz:qux}))"#,
         )
     }
@@ -88,18 +82,15 @@ mod tests {
     fn it_generates_suspense_children() {
         // <suspense>foobar</suspense>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::Suspense),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "suspense".into(),
                     attributes: vec![],
                     directives: None,
                 },
-                children: vec![Node::Text("foobar".into(), DUMMY_SP)],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![Node::Text("foobar".into(), DUMMY_SP)],
+                ElementKind::Builtin(BuiltinType::Suspense),
+            ),
             r#"(_openBlock(),_createBlock(_Suspense,null,{default:_withCtx(()=>[_createTextVNode("foobar")]),_:1}))"#,
         )
     }
@@ -108,9 +99,8 @@ mod tests {
     fn it_generates_full_suspense() {
         // <suspense foo="bar" :baz="qux">foobar</suspense>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::Suspense),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "suspense".into(),
                     attributes: vec![
                         regular_attribute("foo", "bar"),
@@ -118,11 +108,9 @@ mod tests {
                     ],
                     directives: None,
                 },
-                children: vec![Node::Text("foobar".into(), DUMMY_SP)],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![Node::Text("foobar".into(), DUMMY_SP)],
+                ElementKind::Builtin(BuiltinType::Suspense),
+            ),
             r#"(_openBlock(),_createBlock(_Suspense,{foo:"bar",baz:qux},{default:_withCtx(()=>[_createTextVNode("foobar")]),_:1}))"#,
         )
     }
diff --git a/crates/fervid_codegen/src/builtins/teleport.rs b/crates/fervid_codegen/src/builtins/teleport.rs
index 5d7d04d8..47afc74d 100644
--- a/crates/fervid_codegen/src/builtins/teleport.rs
+++ b/crates/fervid_codegen/src/builtins/teleport.rs
@@ -62,18 +62,15 @@ mod tests {
     fn it_generates_empty_teleport() {
         // <teleport></teleport>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::Teleport),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "teleport".into(),
                     attributes: vec![],
                     directives: None,
                 },
-                children: vec![],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![],
+                ElementKind::Builtin(BuiltinType::Teleport),
+            ),
             r#"(_openBlock(),_createBlock(_Teleport))"#,
         )
     }
@@ -82,9 +79,8 @@ mod tests {
     fn it_generates_teleport_attrs() {
         // <teleport foo="bar" :baz="qux"></teleport>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::Teleport),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "teleport".into(),
                     attributes: vec![
                         regular_attribute("foo", "bar"),
@@ -92,11 +88,9 @@ mod tests {
                     ],
                     directives: None,
                 },
-                children: vec![],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![],
+                ElementKind::Builtin(BuiltinType::Teleport),
+            ),
             r#"(_openBlock(),_createBlock(_Teleport,{foo:"bar",baz:qux}))"#,
         )
     }
@@ -105,18 +99,15 @@ mod tests {
     fn it_generates_teleport_children() {
         // <teleport>foobar</teleport>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::Teleport),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "teleport".into(),
                     attributes: vec![],
                     directives: None,
                 },
-                children: vec![Node::Text("foobar".into(), DUMMY_SP)],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![Node::Text("foobar".into(), DUMMY_SP)],
+                ElementKind::Builtin(BuiltinType::Teleport),
+            ),
             r#"(_openBlock(),_createBlock(_Teleport,null,[_createTextVNode("foobar")]))"#,
         )
     }
@@ -125,9 +116,8 @@ mod tests {
     fn it_generates_full_teleport() {
         // <teleport foo="bar" :baz="qux">foobar</teleport>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::Teleport),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "teleport".into(),
                     attributes: vec![
                         regular_attribute("foo", "bar"),
@@ -135,11 +125,9 @@ mod tests {
                     ],
                     directives: None,
                 },
-                children: vec![Node::Text("foobar".into(), DUMMY_SP)],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![Node::Text("foobar".into(), DUMMY_SP)],
+                ElementKind::Builtin(BuiltinType::Teleport),
+            ),
             r#"(_openBlock(),_createBlock(_Teleport,{foo:"bar",baz:qux},[_createTextVNode("foobar")]))"#,
         )
     }
diff --git a/crates/fervid_codegen/src/builtins/transition.rs b/crates/fervid_codegen/src/builtins/transition.rs
index 8f82bfba..a6c284c6 100644
--- a/crates/fervid_codegen/src/builtins/transition.rs
+++ b/crates/fervid_codegen/src/builtins/transition.rs
@@ -44,18 +44,15 @@ mod tests {
     fn it_generates_empty_transition() {
         // <transition></transition>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::Transition),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "transition".into(),
                     attributes: vec![],
                     directives: None,
                 },
-                children: vec![],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![],
+                ElementKind::Builtin(BuiltinType::Transition),
+            ),
             r#"_createVNode(_Transition)"#,
         )
     }
@@ -64,9 +61,8 @@ mod tests {
     fn it_generates_transition_attrs() {
         // <transition foo="bar" :baz="qux"></transition>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::Transition),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "transition".into(),
                     attributes: vec![
                         regular_attribute("foo", "bar"),
@@ -74,11 +70,9 @@ mod tests {
                     ],
                     directives: None,
                 },
-                children: vec![],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![],
+                ElementKind::Builtin(BuiltinType::Transition),
+            ),
             r#"_createVNode(_Transition,{foo:"bar",baz:qux})"#,
         )
     }
@@ -87,18 +81,15 @@ mod tests {
     fn it_generates_transition_children() {
         // <transition>foobar</transition>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::Transition),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "transition".into(),
                     attributes: vec![],
                     directives: None,
                 },
-                children: vec![Node::Text("foobar".into(), DUMMY_SP)],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![Node::Text("foobar".into(), DUMMY_SP)],
+                ElementKind::Builtin(BuiltinType::Transition),
+            ),
             r#"_createVNode(_Transition,null,{default:_withCtx(()=>[_createTextVNode("foobar")]),_:1})"#,
         )
     }
@@ -107,9 +98,8 @@ mod tests {
     fn it_generates_full_transition() {
         // <transition foo="bar" :baz="qux">foobar</transition>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::Transition),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "transition".into(),
                     attributes: vec![
                         regular_attribute("foo", "bar"),
@@ -117,11 +107,9 @@ mod tests {
                     ],
                     directives: None,
                 },
-                children: vec![Node::Text("foobar".into(), DUMMY_SP)],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![Node::Text("foobar".into(), DUMMY_SP)],
+                ElementKind::Builtin(BuiltinType::Transition),
+            ),
             r#"_createVNode(_Transition,{foo:"bar",baz:qux},{default:_withCtx(()=>[_createTextVNode("foobar")]),_:1})"#,
         )
     }
diff --git a/crates/fervid_codegen/src/builtins/transition_group.rs b/crates/fervid_codegen/src/builtins/transition_group.rs
index 0f2980c6..ec2871ad 100644
--- a/crates/fervid_codegen/src/builtins/transition_group.rs
+++ b/crates/fervid_codegen/src/builtins/transition_group.rs
@@ -44,18 +44,15 @@ mod tests {
     fn it_generates_empty_transition_group() {
         // <transition-group></transition-group>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::TransitionGroup),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "transition-group".into(),
                     attributes: vec![],
                     directives: None,
                 },
-                children: vec![],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![],
+                ElementKind::Builtin(BuiltinType::TransitionGroup),
+            ),
             r#"_createVNode(_TransitionGroup)"#,
         )
     }
@@ -64,9 +61,8 @@ mod tests {
     fn it_generates_transition_group_attrs() {
         // <transition-group foo="bar" :baz="qux"></transition-group>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::TransitionGroup),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "transition-group".into(),
                     attributes: vec![
                         regular_attribute("foo", "bar"),
@@ -74,11 +70,9 @@ mod tests {
                     ],
                     directives: None,
                 },
-                children: vec![],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![],
+                ElementKind::Builtin(BuiltinType::TransitionGroup),
+            ),
             r#"_createVNode(_TransitionGroup,{foo:"bar",baz:qux})"#,
         )
     }
@@ -87,18 +81,15 @@ mod tests {
     fn it_generates_transition_group_children() {
         // <transition-group>foobar</transition-group>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::TransitionGroup),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "transition-group".into(),
                     attributes: vec![],
                     directives: None,
                 },
-                children: vec![Node::Text("foobar".into(), DUMMY_SP)],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![Node::Text("foobar".into(), DUMMY_SP)],
+                ElementKind::Builtin(BuiltinType::TransitionGroup),
+            ),
             r#"_createVNode(_TransitionGroup,null,{default:_withCtx(()=>[_createTextVNode("foobar")]),_:1})"#,
         )
     }
@@ -107,9 +98,8 @@ mod tests {
     fn it_generates_full_transition_group() {
         // <transition-group foo="bar" :baz="qux">foobar</transition-group>
         test_out(
-            ElementNode {
-                tag_type: ElementKind::Builtin(BuiltinType::TransitionGroup),
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "transition-group".into(),
                     attributes: vec![
                         regular_attribute("foo", "bar"),
@@ -117,11 +107,9 @@ mod tests {
                     ],
                     directives: None,
                 },
-                children: vec![Node::Text("foobar".into(), DUMMY_SP)],
-                template_scope: 0,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![Node::Text("foobar".into(), DUMMY_SP)],
+                ElementKind::Builtin(BuiltinType::TransitionGroup),
+            ),
             r#"_createVNode(_TransitionGroup,{foo:"bar",baz:qux},{default:_withCtx(()=>[_createTextVNode("foobar")]),_:1})"#,
         )
     }
diff --git a/crates/fervid_codegen/src/components/mod.rs b/crates/fervid_codegen/src/components/mod.rs
index c9d39817..e15806b4 100644
--- a/crates/fervid_codegen/src/components/mod.rs
+++ b/crates/fervid_codegen/src/components/mod.rs
@@ -653,36 +653,30 @@ mod tests {
     fn it_generates_basic_usage() {
         // <test-component></test-component>
         test_out(
-            ElementNode {
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "test-component".into(),
                     attributes: vec![],
                     directives: None,
                 },
-                children: vec![],
-                template_scope: 0,
-                tag_type: ElementKind::Component,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![],
+                ElementKind::Component,
+            ),
             r"_createVNode(_component_test_component)",
             false,
         );
 
         // <test-component />
         test_out(
-            ElementNode {
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "test-component".into(),
                     attributes: vec![],
                     directives: None,
                 },
-                children: vec![],
-                template_scope: 0,
-                tag_type: ElementKind::Component,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![],
+                ElementKind::Component,
+            ),
             r"_createVNode(_component_test_component)",
             false,
         );
@@ -692,8 +686,8 @@ mod tests {
     fn it_generates_attributes() {
         // <test-component foo="bar" :baz="qux"></test-component>
         test_out(
-            ElementNode {
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "test-component".into(),
                     attributes: vec![
                         regular_attribute("foo", "bar"),
@@ -701,12 +695,9 @@ mod tests {
                     ],
                     directives: None,
                 },
-                children: vec![],
-                template_scope: 0,
-                tag_type: ElementKind::Component,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                vec![],
+                ElementKind::Component,
+            ),
             r#"_createVNode(_component_test_component,{foo:"bar","some-baz":qux})"#,
             false,
         );
@@ -716,32 +707,25 @@ mod tests {
     fn it_generates_default_slot() {
         // <test-component>hello from component<div>hello from div</div></test-component>
         test_out(
-            ElementNode {
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "test-component".into(),
                     attributes: vec![],
                     directives: None,
                 },
-                children: vec![
+                vec![
                     Node::Text("hello from component".into(), DUMMY_SP),
-                    Node::Element(ElementNode {
-                        starting_tag: StartingTag {
+                    Node::Element(ElementNode::new_with_children(
+                        StartingTag {
                             tag_name: "div".into(),
                             attributes: vec![],
                             directives: None,
                         },
-                        children: vec![Node::Text("hello from div".into(), DUMMY_SP)],
-                        template_scope: 0,
-                        tag_type: ElementKind::Element,
-                        patch_hints: Default::default(),
-                        span: DUMMY_SP,
-                    }),
+                        vec![Node::Text("hello from div".into(), DUMMY_SP)],
+                    )),
                 ],
-                template_scope: 0,
-                tag_type: ElementKind::Component,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                ElementKind::Component,
+            ),
             r#"_createVNode(_component_test_component,null,{default:_withCtx(()=>[_createTextVNode("hello from component"),_createElementVNode("div",null,"hello from div")])})"#,
             false,
         );
@@ -750,14 +734,14 @@ mod tests {
         //   <template v-slot:default>hello from component<div>hello from div</div></template>
         // </test-component>
         test_out(
-            ElementNode {
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "test-component".into(),
                     attributes: vec![],
                     directives: None,
                 },
-                children: vec![Node::Element(ElementNode {
-                    starting_tag: StartingTag {
+                vec![Node::Element(ElementNode::new_with_children(
+                    StartingTag {
                         tag_name: "template".into(),
                         attributes: vec![],
                         directives: Some(Box::new(VueDirectives {
@@ -768,31 +752,20 @@ mod tests {
                             ..Default::default()
                         })),
                     },
-                    children: vec![
+                    vec![
                         Node::Text("hello from component".into(), DUMMY_SP),
-                        Node::Element(ElementNode {
-                            starting_tag: StartingTag {
+                        Node::Element(ElementNode::new_with_children(
+                            StartingTag {
                                 tag_name: "div".into(),
                                 attributes: vec![],
                                 directives: None,
                             },
-                            children: vec![Node::Text("hello from div".into(), DUMMY_SP)],
-                            template_scope: 0,
-                            tag_type: ElementKind::Element,
-                            patch_hints: Default::default(),
-                            span: DUMMY_SP,
-                        }),
+                            vec![Node::Text("hello from div".into(), DUMMY_SP)],
+                        )),
                     ],
-                    template_scope: 0,
-                    tag_type: ElementKind::Element,
-                    patch_hints: Default::default(),
-                    span: DUMMY_SP,
-                })],
-                template_scope: 0,
-                tag_type: ElementKind::Component,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                ))],
+                ElementKind::Component,
+            ),
             r#"_createVNode(_component_test_component,null,{default:_withCtx(()=>[_createTextVNode("hello from component"),_createElementVNode("div",null,"hello from div")])})"#,
             false,
         );
@@ -804,14 +777,14 @@ mod tests {
         //   <template v-slot:foo-bar>hello from component<div>hello from div</div></template>
         // </test-component>
         test_out(
-            ElementNode {
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "test-component".into(),
                     attributes: vec![],
                     directives: None,
                 },
-                children: vec![Node::Element(ElementNode {
-                    starting_tag: StartingTag {
+                vec![Node::Element(ElementNode::new_with_children(
+                    StartingTag {
                         tag_name: "template".into(),
                         attributes: vec![],
                         directives: Some(Box::new(VueDirectives {
@@ -822,31 +795,20 @@ mod tests {
                             ..Default::default()
                         })),
                     },
-                    children: vec![
+                    vec![
                         Node::Text("hello from component".into(), DUMMY_SP),
-                        Node::Element(ElementNode {
-                            starting_tag: StartingTag {
+                        Node::Element(ElementNode::new_with_children(
+                            StartingTag {
                                 tag_name: "div".into(),
                                 attributes: vec![],
                                 directives: None,
                             },
-                            children: vec![Node::Text("hello from div".into(), DUMMY_SP)],
-                            template_scope: 0,
-                            tag_type: ElementKind::Element,
-                            patch_hints: Default::default(),
-                            span: DUMMY_SP,
-                        }),
+                            vec![Node::Text("hello from div".into(), DUMMY_SP)],
+                        )),
                     ],
-                    template_scope: 0,
-                    tag_type: ElementKind::Element,
-                    patch_hints: Default::default(),
-                    span: DUMMY_SP,
-                })],
-                template_scope: 0,
-                tag_type: ElementKind::Component,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                ))],
+                ElementKind::Component,
+            ),
             r#"_createVNode(_component_test_component,null,{"foo-bar":_withCtx(()=>[_createTextVNode("hello from component"),_createElementVNode("div",null,"hello from div")])})"#,
             false,
         );
@@ -859,15 +821,15 @@ mod tests {
         //   <template v-slot:baz>hello from slot <b>two</b></template>
         // </test-component>
         test_out(
-            ElementNode {
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "test-component".into(),
                     attributes: vec![],
                     directives: None,
                 },
-                children: vec![
-                    Node::Element(ElementNode {
-                        starting_tag: StartingTag {
+                vec![
+                    Node::Element(ElementNode::new_with_children(
+                        StartingTag {
                             tag_name: "template".into(),
                             attributes: vec![],
                             directives: Some(Box::new(VueDirectives {
@@ -878,7 +840,7 @@ mod tests {
                                 ..Default::default()
                             })),
                         },
-                        children: vec![
+                        vec![
                             Node::Text("hello from slot ".into(), DUMMY_SP),
                             Node::Interpolation(Interpolation {
                                 value: js("one"),
@@ -887,13 +849,9 @@ mod tests {
                                 span: DUMMY_SP,
                             }),
                         ],
-                        template_scope: 0,
-                        tag_type: ElementKind::Element,
-                        patch_hints: Default::default(),
-                        span: DUMMY_SP,
-                    }),
-                    Node::Element(ElementNode {
-                        starting_tag: StartingTag {
+                    )),
+                    Node::Element(ElementNode::new_with_children(
+                        StartingTag {
                             tag_name: "template".into(),
                             attributes: vec![],
                             directives: Some(Box::new(VueDirectives {
@@ -904,32 +862,21 @@ mod tests {
                                 ..Default::default()
                             })),
                         },
-                        children: vec![
+                        vec![
                             Node::Text("hello from slot ".into(), DUMMY_SP),
-                            Node::Element(ElementNode {
-                                starting_tag: StartingTag {
+                            Node::Element(ElementNode::new_with_children(
+                                StartingTag {
                                     tag_name: "b".into(),
                                     attributes: vec![],
                                     directives: None,
                                 },
-                                children: vec![Node::Text("two".into(), DUMMY_SP)],
-                                template_scope: 0,
-                                tag_type: ElementKind::Element,
-                                patch_hints: Default::default(),
-                                span: DUMMY_SP,
-                            }),
+                                vec![Node::Text("two".into(), DUMMY_SP)],
+                            )),
                         ],
-                        template_scope: 0,
-                        tag_type: ElementKind::Element,
-                        patch_hints: Default::default(),
-                        span: DUMMY_SP,
-                    }),
+                    )),
                 ],
-                template_scope: 0,
-                tag_type: ElementKind::Component,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                ElementKind::Component,
+            ),
             r#"_createVNode(_component_test_component,null,{"foo-bar":_withCtx(()=>[_createTextVNode("hello from slot "+_toDisplayString(one),1)]),baz:_withCtx(()=>[_createTextVNode("hello from slot "),_createElementVNode("b",null,"two")])})"#,
             false,
         );
@@ -942,28 +889,24 @@ mod tests {
         //   <template v-slot:foo-bar>hello from slot</template>
         // </test-component>
         test_out(
-            ElementNode {
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "test-component".into(),
                     attributes: vec![],
                     directives: None,
                 },
-                children: vec![
+                vec![
                     Node::Text("hello from component".into(), DUMMY_SP),
-                    Node::Element(ElementNode {
-                        starting_tag: StartingTag {
+                    Node::Element(ElementNode::new_with_children(
+                        StartingTag {
                             tag_name: "div".into(),
                             attributes: vec![],
                             directives: None,
                         },
-                        children: vec![Node::Text("hello from div".into(), DUMMY_SP)],
-                        template_scope: 0,
-                        tag_type: ElementKind::Element,
-                        patch_hints: Default::default(),
-                        span: DUMMY_SP,
-                    }),
-                    Node::Element(ElementNode {
-                        starting_tag: StartingTag {
+                        vec![Node::Text("hello from div".into(), DUMMY_SP)],
+                    )),
+                    Node::Element(ElementNode::new_with_children(
+                        StartingTag {
                             tag_name: "template".into(),
                             attributes: vec![],
                             directives: Some(Box::new(VueDirectives {
@@ -974,18 +917,11 @@ mod tests {
                                 ..Default::default()
                             })),
                         },
-                        children: vec![Node::Text("hello from slot".into(), DUMMY_SP)],
-                        template_scope: 0,
-                        tag_type: ElementKind::Element,
-                        patch_hints: Default::default(),
-                        span: DUMMY_SP,
-                    }),
+                        vec![Node::Text("hello from slot".into(), DUMMY_SP)],
+                    )),
                 ],
-                template_scope: 0,
-                tag_type: ElementKind::Component,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                ElementKind::Component,
+            ),
             r#"_createVNode(_component_test_component,null,{"foo-bar":_withCtx(()=>[_createTextVNode("hello from slot")]),default:_withCtx(()=>[_createTextVNode("hello from component"),_createElementVNode("div",null,"hello from div")])})"#,
             false,
         );
@@ -995,15 +931,15 @@ mod tests {
         //   <template v-slot:foo-bar>hello from slot</template>
         // </test-component>
         test_out(
-            ElementNode {
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "test-component".into(),
                     attributes: vec![],
                     directives: None,
                 },
-                children: vec![
-                    Node::Element(ElementNode {
-                        starting_tag: StartingTag {
+                vec![
+                    Node::Element(ElementNode::new_with_children(
+                        StartingTag {
                             tag_name: "template".into(),
                             attributes: vec![],
                             directives: Some(Box::new(VueDirectives {
@@ -1014,28 +950,20 @@ mod tests {
                                 ..Default::default()
                             })),
                         },
-                        children: vec![
+                        vec![
                             Node::Text("hello from default".into(), DUMMY_SP),
-                            Node::Element(ElementNode {
-                                starting_tag: StartingTag {
+                            Node::Element(ElementNode::new_with_children(
+                                StartingTag {
                                     tag_name: "div".into(),
                                     attributes: vec![],
                                     directives: None,
                                 },
-                                children: vec![Node::Text("hello from div".into(), DUMMY_SP)],
-                                template_scope: 0,
-                                tag_type: ElementKind::Element,
-                                patch_hints: Default::default(),
-                                span: DUMMY_SP,
-                            }),
+                                vec![Node::Text("hello from div".into(), DUMMY_SP)],
+                            )),
                         ],
-                        template_scope: 0,
-                        tag_type: ElementKind::Element,
-                        patch_hints: Default::default(),
-                        span: DUMMY_SP,
-                    }),
-                    Node::Element(ElementNode {
-                        starting_tag: StartingTag {
+                    )),
+                    Node::Element(ElementNode::new_with_children(
+                        StartingTag {
                             tag_name: "template".into(),
                             attributes: vec![],
                             directives: Some(Box::new(VueDirectives {
@@ -1046,18 +974,11 @@ mod tests {
                                 ..Default::default()
                             })),
                         },
-                        children: vec![Node::Text("hello from slot".into(), DUMMY_SP)],
-                        template_scope: 0,
-                        tag_type: ElementKind::Element,
-                        patch_hints: Default::default(),
-                        span: DUMMY_SP,
-                    }),
+                        vec![Node::Text("hello from slot".into(), DUMMY_SP)],
+                    )),
                 ],
-                template_scope: 0,
-                tag_type: ElementKind::Component,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                ElementKind::Component,
+            ),
             r#"_createVNode(_component_test_component,null,{default:_withCtx(()=>[_createTextVNode("hello from default"),_createElementVNode("div",null,"hello from div")]),"foo-bar":_withCtx(()=>[_createTextVNode("hello from slot")])})"#,
             false,
         );
@@ -1067,15 +988,15 @@ mod tests {
         //   hello from component<div>hello from div</div>
         // </test-component>
         test_out(
-            ElementNode {
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "test-component".into(),
                     attributes: vec![],
                     directives: None,
                 },
-                children: vec![
-                    Node::Element(ElementNode {
-                        starting_tag: StartingTag {
+                vec![
+                    Node::Element(ElementNode::new_with_children(
+                        StartingTag {
                             tag_name: "template".into(),
                             attributes: vec![],
                             directives: Some(Box::new(VueDirectives {
@@ -1086,31 +1007,20 @@ mod tests {
                                 ..Default::default()
                             })),
                         },
-                        children: vec![Node::Text("hello from slot".into(), DUMMY_SP)],
-                        template_scope: 0,
-                        tag_type: ElementKind::Element,
-                        patch_hints: Default::default(),
-                        span: DUMMY_SP,
-                    }),
+                        vec![Node::Text("hello from slot".into(), DUMMY_SP)],
+                    )),
                     Node::Text("hello from component".into(), DUMMY_SP),
-                    Node::Element(ElementNode {
-                        starting_tag: StartingTag {
+                    Node::Element(ElementNode::new_with_children(
+                        StartingTag {
                             tag_name: "div".into(),
                             attributes: vec![],
                             directives: None,
                         },
-                        children: vec![Node::Text("hello from div".into(), DUMMY_SP)],
-                        template_scope: 0,
-                        tag_type: ElementKind::Element,
-                        patch_hints: Default::default(),
-                        span: DUMMY_SP,
-                    }),
+                        vec![Node::Text("hello from div".into(), DUMMY_SP)],
+                    )),
                 ],
-                template_scope: 0,
-                tag_type: ElementKind::Component,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                ElementKind::Component,
+            ),
             r#"_createVNode(_component_test_component,null,{"foo-bar":_withCtx(()=>[_createTextVNode("hello from slot")]),default:_withCtx(()=>[_createTextVNode("hello from component"),_createElementVNode("div",null,"hello from div")])})"#,
             false,
         );
@@ -1124,15 +1034,15 @@ mod tests {
         //   <template v-slot:baz>hello from baz</template>
         // </test-component>
         test_out(
-            ElementNode {
-                starting_tag: StartingTag {
+            ElementNode::new_with_children_and_type(
+                StartingTag {
                     tag_name: "test-component".into(),
                     attributes: vec![],
                     directives: None,
                 },
-                children: vec![
-                    Node::Element(ElementNode {
-                        starting_tag: StartingTag {
+                vec![
+                    Node::Element(ElementNode::new_with_children(
+                        StartingTag {
                             tag_name: "template".into(),
                             attributes: vec![],
                             directives: Some(Box::new(VueDirectives {
@@ -1143,14 +1053,10 @@ mod tests {
                                 ..Default::default()
                             })),
                         },
-                        children: vec![Node::Text("hello from slot".into(), DUMMY_SP)],
-                        template_scope: 0,
-                        tag_type: ElementKind::Element,
-                        patch_hints: Default::default(),
-                        span: DUMMY_SP,
-                    }),
-                    Node::Element(ElementNode {
-                        starting_tag: StartingTag {
+                        vec![Node::Text("hello from slot".into(), DUMMY_SP)],
+                    )),
+                    Node::Element(ElementNode::new_with_children(
+                        StartingTag {
                             tag_name: "template".into(),
                             attributes: vec![],
                             directives: Some(Box::new(VueDirectives {
@@ -1161,28 +1067,20 @@ mod tests {
                                 ..Default::default()
                             })),
                         },
-                        children: vec![
+                        vec![
                             Node::Text("hello from default".into(), DUMMY_SP),
-                            Node::Element(ElementNode {
-                                starting_tag: StartingTag {
+                            Node::Element(ElementNode::new_with_children(
+                                StartingTag {
                                     tag_name: "div".into(),
                                     attributes: vec![],
                                     directives: None,
                                 },
-                                children: vec![Node::Text("hello from div".into(), DUMMY_SP)],
-                                template_scope: 0,
-                                tag_type: ElementKind::Element,
-                                patch_hints: Default::default(),
-                                span: DUMMY_SP,
-                            }),
+                                vec![Node::Text("hello from div".into(), DUMMY_SP)],
+                            )),
                         ],
-                        template_scope: 0,
-                        tag_type: ElementKind::Element,
-                        patch_hints: Default::default(),
-                        span: DUMMY_SP,
-                    }),
-                    Node::Element(ElementNode {
-                        starting_tag: StartingTag {
+                    )),
+                    Node::Element(ElementNode::new_with_children(
+                        StartingTag {
                             tag_name: "template".into(),
                             attributes: vec![],
                             directives: Some(Box::new(VueDirectives {
@@ -1193,18 +1091,11 @@ mod tests {
                                 ..Default::default()
                             })),
                         },
-                        children: vec![Node::Text("hello from baz".into(), DUMMY_SP)],
-                        template_scope: 0,
-                        tag_type: ElementKind::Element,
-                        patch_hints: Default::default(),
-                        span: DUMMY_SP,
-                    }),
+                        vec![Node::Text("hello from baz".into(), DUMMY_SP)],
+                    )),
                 ],
-                template_scope: 0,
-                tag_type: ElementKind::Component,
-                patch_hints: Default::default(),
-                span: DUMMY_SP,
-            },
+                ElementKind::Component,
+            ),
             r#"_createVNode(_component_test_component,null,{"foo-bar":_withCtx(()=>[_createTextVNode("hello from slot")]),default:_withCtx(()=>[_createTextVNode("hello from default"),_createElementVNode("div",null,"hello from div")]),baz:_withCtx(()=>[_createTextVNode("hello from baz")])})"#,
             false,
         );
diff --git a/crates/fervid_codegen/src/control_flow/conditional_seq.rs b/crates/fervid_codegen/src/control_flow/conditional_seq.rs
index 87aa4d35..cfdf20e0 100644
--- a/crates/fervid_codegen/src/control_flow/conditional_seq.rs
+++ b/crates/fervid_codegen/src/control_flow/conditional_seq.rs
@@ -113,10 +113,12 @@ mod tests {
                         tag_type: ElementKind::Element,
                         patch_hints: Default::default(),
                         span: DUMMY_SP,
+                        codegen_node: None,
                     },
                 }),
                 else_if_nodes: vec![],
                 else_node: None,
+                span: DUMMY_SP,
             },
             r#"foo||true?(_openBlock(),_createElementBlock("h1",null,"hello")):_createCommentVNode("v-if")"#,
         )
@@ -141,6 +143,7 @@ mod tests {
                         tag_type: ElementKind::Element,
                         patch_hints: Default::default(),
                         span: DUMMY_SP,
+                        codegen_node: None,
                     },
                 }),
                 else_if_nodes: vec![],
@@ -155,7 +158,9 @@ mod tests {
                     tag_type: ElementKind::Element,
                     patch_hints: Default::default(),
                     span: DUMMY_SP,
+                    codegen_node: None,
                 })),
+                span: DUMMY_SP,
             },
             r#"foo||true?(_openBlock(),_createElementBlock("h1",null,"hello")):(_openBlock(),_createElementBlock("h2",null,"bye"))"#,
         )
@@ -181,6 +186,7 @@ mod tests {
                         tag_type: ElementKind::Element,
                         patch_hints: Default::default(),
                         span: DUMMY_SP,
+                        codegen_node: None,
                     },
                 }),
                 else_if_nodes: vec![
@@ -197,6 +203,7 @@ mod tests {
                             tag_type: ElementKind::Element,
                             patch_hints: Default::default(),
                             span: DUMMY_SP,
+                            codegen_node: None,
                         },
                     },
                     Conditional {
@@ -212,10 +219,12 @@ mod tests {
                             tag_type: ElementKind::Element,
                             patch_hints: Default::default(),
                             span: DUMMY_SP,
+                            codegen_node: None,
                         },
                     },
                 ],
                 else_node: None,
+                span: DUMMY_SP,
             },
             r#"foo?(_openBlock(),_createElementBlock("h1",null,"hello")):true?(_openBlock(),_createElementBlock("h2",null,"hi")):undefined?(_openBlock(),_createElementBlock("h3",null,"bye")):_createCommentVNode("v-if")"#,
         )
@@ -242,6 +251,7 @@ mod tests {
                         tag_type: ElementKind::Element,
                         patch_hints: Default::default(),
                         span: DUMMY_SP,
+                        codegen_node: None,
                     },
                 }),
                 else_if_nodes: vec![
@@ -258,6 +268,7 @@ mod tests {
                             tag_type: ElementKind::Element,
                             patch_hints: Default::default(),
                             span: DUMMY_SP,
+                            codegen_node: None,
                         },
                     },
                     Conditional {
@@ -273,6 +284,7 @@ mod tests {
                             tag_type: ElementKind::Element,
                             patch_hints: Default::default(),
                             span: DUMMY_SP,
+                            codegen_node: None,
                         },
                     },
                 ],
@@ -287,7 +299,9 @@ mod tests {
                     tag_type: ElementKind::Element,
                     patch_hints: Default::default(),
                     span: DUMMY_SP,
+                    codegen_node: None,
                 })),
+                span: DUMMY_SP,
             },
             r#"foo?(_openBlock(),_createElementBlock("h1",null,"hello")):true?(_openBlock(),_createElementBlock("h2",null,"hi")):undefined?(_openBlock(),_createElementBlock("h3",null,"good morning")):(_openBlock(),_createElementBlock("h4",null,"bye"))"#,
         )
diff --git a/crates/fervid_codegen/src/control_flow/slotted_iterator.rs b/crates/fervid_codegen/src/control_flow/slotted_iterator.rs
index 09c5a5bc..e8c49290 100644
--- a/crates/fervid_codegen/src/control_flow/slotted_iterator.rs
+++ b/crates/fervid_codegen/src/control_flow/slotted_iterator.rs
@@ -213,6 +213,7 @@ mod tests {
             tag_type: ElementKind::Element,
             patch_hints: Default::default(),
             span: DUMMY_SP,
+            codegen_node: None,
         })
     }
 
@@ -232,6 +233,7 @@ mod tests {
             tag_type: ElementKind::Element,
             patch_hints: Default::default(),
             span: DUMMY_SP,
+            codegen_node: None,
         })
     }
 
@@ -256,6 +258,7 @@ mod tests {
             tag_type: ElementKind::Element,
             patch_hints: Default::default(),
             span: DUMMY_SP,
+            codegen_node: None,
         })
     }
 
@@ -272,6 +275,7 @@ mod tests {
             tag_type: ElementKind::Element,
             patch_hints: Default::default(),
             span: DUMMY_SP,
+            codegen_node: None,
         })
     }
 
@@ -294,6 +298,7 @@ mod tests {
             tag_type: ElementKind::Element,
             patch_hints: Default::default(),
             span: DUMMY_SP,
+            codegen_node: None,
         })
     }
 
@@ -316,6 +321,7 @@ mod tests {
             tag_type: ElementKind::Element,
             patch_hints: Default::default(),
             span: DUMMY_SP,
+            codegen_node: None,
         })
     }
 }
diff --git a/crates/fervid_codegen/src/directives/v_html.rs b/crates/fervid_codegen/src/directives/v_html.rs
index 968bcc88..e7fe162c 100644
--- a/crates/fervid_codegen/src/directives/v_html.rs
+++ b/crates/fervid_codegen/src/directives/v_html.rs
@@ -55,6 +55,7 @@ mod tests {
                 template_scope: 0,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
+                codegen_node: None,
             },
             r#"_createVNode(_component_test_component,{innerHTML:foo+bar})"#,
             false,
@@ -84,6 +85,7 @@ mod tests {
                 template_scope: 0,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
+                codegen_node: None,
             },
             r#"_createElementVNode("h1",{innerHTML:foo+bar})"#,
             false,
diff --git a/crates/fervid_codegen/src/directives/v_text.rs b/crates/fervid_codegen/src/directives/v_text.rs
index f662a170..5dffd6bf 100644
--- a/crates/fervid_codegen/src/directives/v_text.rs
+++ b/crates/fervid_codegen/src/directives/v_text.rs
@@ -54,6 +54,7 @@ mod tests {
                 template_scope: 0,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
+                codegen_node: None,
             },
             r#"_createVNode(_component_test_component,{textContent:foo+bar})"#,
             false,
@@ -78,6 +79,7 @@ mod tests {
                 template_scope: 0,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
+                codegen_node: None,
             },
             r#"_createElementVNode("h1",{textContent:foo+bar})"#,
             false,
diff --git a/crates/fervid_codegen/src/elements/mod.rs b/crates/fervid_codegen/src/elements/mod.rs
index 0c4f5d7e..369f8914 100644
--- a/crates/fervid_codegen/src/elements/mod.rs
+++ b/crates/fervid_codegen/src/elements/mod.rs
@@ -395,6 +395,7 @@ mod tests {
                 tag_type: ElementKind::Element,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
+                codegen_node: None,
             },
             r#"_createElementVNode("div",{foo:"bar",baz:qux,readonly:true,onClick:handleClick},"hello from div")"#,
             false,
@@ -416,6 +417,7 @@ mod tests {
                 tag_type: ElementKind::Element,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
+                codegen_node: None,
             },
             r#"_createElementVNode("div",null,"hello from div")"#,
             false,
@@ -440,6 +442,7 @@ mod tests {
                 tag_type: ElementKind::Element,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
+                codegen_node: None,
             },
             r#"_createElementVNode("div",{foo:"bar","some-baz":qux})"#,
             false,
@@ -461,6 +464,7 @@ mod tests {
                 tag_type: ElementKind::Element,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
+                codegen_node: None,
             },
             r#"_createElementVNode("div",{foo:"bar","some-baz":qux})"#,
             false,
@@ -491,6 +495,7 @@ mod tests {
                 tag_type: ElementKind::Element,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
+                codegen_node: None,
             },
             r#"_createElementVNode("div",null,"hello from div "+_toDisplayString(true)+" bye!")"#,
             false,
@@ -526,12 +531,14 @@ mod tests {
                         tag_type: ElementKind::Element,
                         patch_hints: Default::default(),
                         span: DUMMY_SP,
+                        codegen_node: None,
                     }),
                 ],
                 template_scope: 0,
                 tag_type: ElementKind::Element,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
+                codegen_node: None,
             },
             r#"_createElementVNode("div",null,[_createTextVNode("hello from div "+_toDisplayString(true)),_createElementVNode("span",null,"bye!")])"#,
             false,
diff --git a/crates/fervid_core/src/ast.rs b/crates/fervid_core/src/ast.rs
index 639e7d4e..0112edce 100644
--- a/crates/fervid_core/src/ast.rs
+++ b/crates/fervid_core/src/ast.rs
@@ -2,12 +2,12 @@
 
 use swc_core::{
     common::{Span, DUMMY_SP},
-    ecma::ast::{Bool, CallExpr, Expr, IdentName, Lit, PropName, PropOrSpread, Str},
+    ecma::ast::{ArrayLit, Bool, CallExpr, Expr, IdentName, Lit, PropName, PropOrSpread, Str},
 };
 
-use crate::{FervidAtom, VueImports};
+use crate::{BuiltinType, FervidAtom, PatchHints, VueImports};
 
-#[derive(Default)]
+#[derive(Debug, Clone, Default)]
 pub enum ConstantTypes {
     #[default]
     NotConstant = 0,
@@ -16,6 +16,7 @@ pub enum ConstantTypes {
     CanStringify,
 }
 
+#[derive(Debug, Clone)]
 pub struct SimpleExpressionNode {
     pub ast: Box<Expr>,
     pub is_static: bool,
@@ -23,16 +24,19 @@ pub struct SimpleExpressionNode {
     pub is_handler_key: bool,
 }
 
+#[derive(Debug, Clone)]
 pub struct CompoundExpressionNode {
     pub ast: Box<Expr>,
     pub is_handler_key: bool,
 }
 
+#[derive(Debug, Clone)]
 pub enum ExpressionNode {
     SimpleExpression(SimpleExpressionNode),
     CompoundExpression(CompoundExpressionNode),
 }
 
+#[derive(Debug, Clone)]
 pub struct SimpleExpressionPropNameNode {
     pub ast: IdentName,
     pub is_static: bool,
@@ -40,18 +44,55 @@ pub struct SimpleExpressionPropNameNode {
     pub is_handler_key: bool,
 }
 
+#[derive(Debug, Clone)]
 pub struct CompoundExpressionPropNameNode {
     pub ast: PropName,
     pub is_handler_key: bool,
 }
 
+#[derive(Debug, Clone)]
 pub enum ExpressionPropNameNode {
     SimpleExpression(SimpleExpressionPropNameNode),
     CompoundExpression(CompoundExpressionPropNameNode),
 }
 
+#[derive(Debug, Clone)]
+pub enum VNodeCallTag {
+    CallExpression(CallExpression),
+    Builtin(BuiltinType),
+    Expr(Box<Expr>),
+}
+
+#[derive(Debug, Clone)]
+pub enum PropsExpression {
+    ObjectExpression(Box<ObjectExpression>),
+    CallExpression(Box<CallExpression>),
+    ExpressionNode(Box<ExpressionNode>),
+}
+
+#[derive(Debug, Clone)]
+pub enum VNodeChildren {
+    /// Use the children from parent element
+    UseElementChildren,
+    /// Use the first and only child (which is a text node) from parent element
+    UseFirstChildTextNode,
+}
+
+#[derive(Debug, Clone)]
+pub struct VNodeCall {
+    pub tag: VNodeCallTag,
+    pub props: Option<PropsExpression>,
+    pub children: Option<VNodeChildren>,
+    pub patch_hints: PatchHints,
+    pub directives: Option<ArrayLit>,
+    pub is_block: bool,
+    pub disable_tracking: bool,
+    pub is_component: bool,
+}
+
 // JS Node Types
 
+#[derive(Debug, Clone)]
 pub enum JsChildNode {
     CallExpression(Box<CallExpression>),
     ObjectExpression(Box<ObjectExpression>),
@@ -60,17 +101,20 @@ pub enum JsChildNode {
     OriginalValueMarker,
 }
 
+#[derive(Debug, Clone)]
 pub struct CallExpression {
     pub callee: VueImports,
     pub span: Span,
     pub arguments: Vec<JsChildNode>,
 }
 
+#[derive(Debug, Clone)]
 pub struct ObjectExpression {
     pub properties: Vec<Property>,
     pub span: Span,
 }
 
+#[derive(Debug, Clone)]
 pub struct Property {
     pub key: ExpressionPropNameNode,
     pub value: JsChildNode,
@@ -213,6 +257,25 @@ impl From<SimpleExpressionPropNameNode> for ExpressionPropNameNode {
     }
 }
 
+// PropsExpression
+
+impl From<&Expr> for PropsExpression {
+    fn from(value: &Expr) -> Self {
+        match value {
+            Expr::Call(call_expr) => {
+                PropsExpression::CallExpression(Box::new(call_expr.to_owned().into()))
+            }
+            Expr::Object(obj_expr) => {
+                PropsExpression::ObjectExpression(Box::new(ObjectExpression {
+                    properties: obj_expr.props.iter().cloned().map(Into::into).collect(),
+                    span: obj_expr.span,
+                }))
+            }
+            _ => PropsExpression::ExpressionNode(Box::new(value.to_owned().into())),
+        }
+    }
+}
+
 // JsChildNode
 
 impl From<SimpleExpressionNode> for JsChildNode {
@@ -226,3 +289,13 @@ impl From<CallExpression> for JsChildNode {
         Self::CallExpression(Box::new(value))
     }
 }
+
+impl From<PropsExpression> for JsChildNode {
+    fn from(val: PropsExpression) -> Self {
+        match val {
+            PropsExpression::ObjectExpression(o) => JsChildNode::ObjectExpression(o),
+            PropsExpression::CallExpression(c) => JsChildNode::CallExpression(c),
+            PropsExpression::ExpressionNode(e) => JsChildNode::ExpressionNode(e),
+        }
+    }
+}
diff --git a/crates/fervid_core/src/structs.rs b/crates/fervid_core/src/structs.rs
index d912743e..9a5f6b3e 100644
--- a/crates/fervid_core/src/structs.rs
+++ b/crates/fervid_core/src/structs.rs
@@ -1,11 +1,13 @@
 use swc_core::{
-    common::{Span, DUMMY_SP},
+    common::{Span, Spanned, DUMMY_SP},
     ecma::{
         ast::{Expr, Ident, Pat},
         atoms::Atom,
     },
 };
 
+use crate::VNodeCall;
+
 pub type FervidAtom = Atom;
 
 // TODO Add some known atoms here with lazy evaluation?
@@ -87,6 +89,7 @@ pub struct ElementNode {
     pub template_scope: u32,
     pub patch_hints: PatchHints,
     pub span: Span,
+    pub codegen_node: Option<Box<ElementNodeCodegenNode>>,
 }
 
 #[derive(Debug, Clone, Copy, Default)]
@@ -97,6 +100,38 @@ pub enum ElementKind {
     Component,
 }
 
+#[derive(Debug, Clone)]
+pub enum ElementNodeCodegenNode {
+    VNodeCall(VNodeCall),
+}
+
+impl ElementNode {
+    /// Helper function for creating a minimal version of ElementNode. The type is `Element`
+    pub fn new(starting_tag: StartingTag) -> Self {
+        Self::new_with_children(starting_tag, vec![])
+    }
+    /// Helper function for creating a minimal version of ElementNode with children. The type is `Element`
+    pub fn new_with_children(starting_tag: StartingTag, children: Vec<Node>) -> Self {
+        Self::new_with_children_and_type(starting_tag, children, ElementKind::Element)
+    }
+    /// Helper function for creating an ElementNode with children and tag type
+    pub fn new_with_children_and_type(
+        starting_tag: StartingTag,
+        children: Vec<Node>,
+        tag_type: ElementKind,
+    ) -> Self {
+        ElementNode {
+            tag_type,
+            starting_tag,
+            children,
+            template_scope: 0,
+            patch_hints: Default::default(),
+            span: DUMMY_SP,
+            codegen_node: None,
+        }
+    }
+}
+
 #[derive(Debug, Clone, Copy)]
 pub enum BuiltinType {
     BaseTransition,
@@ -121,6 +156,7 @@ pub struct ConditionalNodeSequence {
     pub if_node: Box<Conditional>,
     pub else_if_nodes: Vec<Conditional>,
     pub else_node: Option<Box<ElementNode>>,
+    pub span: Span,
 }
 
 /// A wrapper around an `ElementNode` with a condition attached to it.
@@ -470,3 +506,15 @@ impl TemplateGenerationMode {
         matches!(self, TemplateGenerationMode::Inline)
     }
 }
+
+impl Spanned for Node {
+    fn span(&self) -> Span {
+        match self {
+            Node::Element(element_node) => element_node.span,
+            Node::Text(_atom, span) => *span,
+            Node::Interpolation(interpolation) => interpolation.span,
+            Node::Comment(_atom, span) => *span,
+            Node::ConditionalSeq(conditional_node_sequence) => conditional_node_sequence.span,
+        }
+    }
+}
diff --git a/crates/fervid_parser/src/template.rs b/crates/fervid_parser/src/template.rs
index 197f708c..4993518e 100644
--- a/crates/fervid_parser/src/template.rs
+++ b/crates/fervid_parser/src/template.rs
@@ -121,6 +121,7 @@ impl SfcParser<'_, '_, '_> {
             template_scope: 0,
             patch_hints: PatchHints::default(),
             span: element.span,
+            codegen_node: None,
         });
 
         self.is_pre = old_is_pre;
diff --git a/crates/fervid_transform/src/error.rs b/crates/fervid_transform/src/error.rs
index 1f444f3c..63e3ded3 100644
--- a/crates/fervid_transform/src/error.rs
+++ b/crates/fervid_transform/src/error.rs
@@ -103,6 +103,9 @@ pub enum ScriptErrorKind {
 
 #[derive(Debug)]
 pub enum TemplateErrorKind {
+    // <KeepAlive> expects exactly one child component.
+    // https://vuejs.org/error-reference/#compiler-46
+    KeepAliveInvalidChildren,
     /// Failed parsing the URL when doing asset URL transform
     TransformAssetUrlsBaseUrlParseFailed,
     /// Failed parsing the configured base URL when doing asset URL transform
diff --git a/crates/fervid_transform/src/template/ast_transform.rs b/crates/fervid_transform/src/template/ast_transform.rs
index eff0c741..d36db713 100644
--- a/crates/fervid_transform/src/template/ast_transform.rs
+++ b/crates/fervid_transform/src/template/ast_transform.rs
@@ -1,8 +1,8 @@
 use fervid_core::{
-    check_attribute_name, fervid_atom, is_from_default_slot, AttributeOrBinding,
-    BindingTypes, BuiltinType, Conditional, ConditionalNodeSequence, ElementKind, ElementNode,
-    FervidAtom, Interpolation, IntoIdent, Node, PatchFlags, PatchHints, SfcTemplateBlock,
-    StartingTag, StrOrExpr, TemplateGenerationMode, VBindDirective, VSlotDirective,
+    check_attribute_name, fervid_atom, is_from_default_slot, AttributeOrBinding, BindingTypes,
+    BuiltinType, Conditional, ConditionalNodeSequence, ElementKind, ElementNode, FervidAtom,
+    Interpolation, IntoIdent, Node, PatchFlags, PatchHints, SfcTemplateBlock, StartingTag,
+    StrOrExpr, TemplateGenerationMode, VBindDirective, VSlotDirective,
 };
 use smallvec::SmallVec;
 use swc_core::{
@@ -71,6 +71,7 @@ pub fn transform_and_record_template(
             template_scope: 0,
             patch_hints,
             span: template.span,
+            codegen_node: None,
         });
         template.roots.push(new_root);
     }
@@ -184,6 +185,7 @@ fn optimize_children(children: &mut Vec<Node>, element_kind: ElementKind) {
             // The already existing sequence should end, and the new sequence should start.
             if let Some(v_if) = directives.v_if.take() {
                 finish_seq!();
+                let span = child_element.span;
                 seq = Some(ConditionalNodeSequence {
                     if_node: Box::new(Conditional {
                         condition: *v_if,
@@ -191,6 +193,7 @@ fn optimize_children(children: &mut Vec<Node>, element_kind: ElementKind) {
                     }),
                     else_if_nodes: vec![],
                     else_node: None,
+                    span,
                 });
                 continue;
             }
@@ -203,6 +206,7 @@ fn optimize_children(children: &mut Vec<Node>, element_kind: ElementKind) {
                     continue;
                 };
 
+                seq.span.hi = child_element.span.hi;
                 seq.else_if_nodes.push(Conditional {
                     condition: *v_else_if,
                     node: deref_element!(child),
@@ -218,6 +222,7 @@ fn optimize_children(children: &mut Vec<Node>, element_kind: ElementKind) {
                     continue;
                 };
 
+                cond_seq.span.hi = child_element.span.hi;
                 cond_seq.else_node = Some(Box::new(deref_element!(child)));
 
                 // `else` node always finishes the sequence
@@ -348,6 +353,7 @@ impl TemplateVisitor<'_> {
         }
     }
 
+    #[allow(unused)]
     fn visit_element_node_new(&mut self, element_node: &mut ElementNode) {
         // Cloning transforms is fine here due to the structure being optimized for it
         let node_transforms = self.ctx.node_transforms.clone();
@@ -803,6 +809,7 @@ mod tests {
                 tag_type: ElementKind::Element,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
+                codegen_node: None,
             })],
             span: DUMMY_SP,
         };
@@ -1002,6 +1009,7 @@ mod tests {
                     template_scope: 0,
                     patch_hints: PatchHints::default(),
                     span: DUMMY_SP,
+                    codegen_node: None,
                 }),
             ],
             span: DUMMY_SP,
@@ -1044,6 +1052,7 @@ mod tests {
                 tag_type: ElementKind::Element,
                 patch_hints: Default::default(),
                 span: DUMMY_SP,
+                codegen_node: None,
             })],
             span: DUMMY_SP,
         };
@@ -1081,6 +1090,7 @@ mod tests {
             tag_type: ElementKind::Element,
             patch_hints: Default::default(),
             span: DUMMY_SP,
+            codegen_node: None,
         });
 
         let no_directives2 = Node::Element(ElementNode {
@@ -1096,6 +1106,7 @@ mod tests {
             tag_type: ElementKind::Element,
             patch_hints: Default::default(),
             span: DUMMY_SP,
+            codegen_node: None,
         });
 
         let mut sfc_template = SfcTemplateBlock {
@@ -1129,6 +1140,7 @@ mod tests {
             template_scope: 0,
             patch_hints: Default::default(),
             span: DUMMY_SP,
+            codegen_node: None,
         };
         // <div v-if="false"></div>
         let div = ElementNode {
@@ -1145,6 +1157,7 @@ mod tests {
             template_scope: 0,
             patch_hints: Default::default(),
             span: DUMMY_SP,
+            codegen_node: None,
         };
         // <template></template>
         let tmpl = ElementNode {
@@ -1158,6 +1171,7 @@ mod tests {
             template_scope: 0,
             patch_hints: Default::default(),
             span: DUMMY_SP,
+            codegen_node: None,
         };
         let sfc_tmpl = SfcTemplateBlock {
             lang: "html".into(),
@@ -1366,6 +1380,7 @@ mod tests {
             tag_type: ElementKind::Element,
             patch_hints: Default::default(),
             span: DUMMY_SP,
+            codegen_node: None,
         })
     }
 
@@ -1399,6 +1414,7 @@ mod tests {
             tag_type: ElementKind::Element,
             patch_hints: Default::default(),
             span: DUMMY_SP,
+            codegen_node: None,
         })
     }
 
@@ -1433,6 +1449,7 @@ mod tests {
             tag_type: ElementKind::Element,
             patch_hints: Default::default(),
             span: DUMMY_SP,
+            codegen_node: None,
         })
     }
 
diff --git a/crates/fervid_transform/src/template/directive_transforms.rs b/crates/fervid_transform/src/template/directive_transforms.rs
index 4e3edc08..5076ff92 100644
--- a/crates/fervid_transform/src/template/directive_transforms.rs
+++ b/crates/fervid_transform/src/template/directive_transforms.rs
@@ -15,27 +15,27 @@ pub struct DirectiveTransformResult {
 pub trait DirectiveTransforms: Debug {
     fn transform_v_bind(
         &self,
-        ctx: &mut TransformSfcContext,
-        v_bind: &VBindDirective,
-        node: &ElementNode,
+        _ctx: &mut TransformSfcContext,
+        _v_bind: &VBindDirective,
+        _node: &ElementNode,
     ) -> Option<DirectiveTransformResult> {
         todo!()
     }
 
     fn transform_v_on(
         &self,
-        ctx: &mut TransformSfcContext,
-        v_on: &VOnDirective,
-        node: &ElementNode,
+        _ctx: &mut TransformSfcContext,
+        _v_on: &VOnDirective,
+        _node: &ElementNode,
     ) -> Option<DirectiveTransformResult> {
         todo!()
     }
 
     fn transform_v_model(
         &self,
-        ctx: &mut TransformSfcContext,
-        v_model: &VModelDirective,
-        node: &ElementNode,
+        _ctx: &mut TransformSfcContext,
+        _v_model: &VModelDirective,
+        _node: &ElementNode,
     ) -> Option<DirectiveTransformResult> {
         todo!()
     }
diff --git a/crates/fervid_transform/src/template/transform_element.rs b/crates/fervid_transform/src/template/transform_element.rs
index b15c592c..36f600a7 100644
--- a/crates/fervid_transform/src/template/transform_element.rs
+++ b/crates/fervid_transform/src/template/transform_element.rs
@@ -4,16 +4,16 @@ use fervid_core::{
     create_call_expression, create_object_expression, create_object_property,
     create_simple_expression_bool, create_simple_expression_propname, create_simple_expression_str,
     fervid_atom, AttributeOrBinding, BindingTypes, BuiltinType, CallExpression, ComponentBinding,
-    ElementKind, ElementNode, ExpressionNode, ExpressionPropNameNode, FervidAtom, IntoIdent,
-    JsChildNode, ObjectExpression, PatchFlags, PatchHints, Property, SimpleExpressionNode,
-    SimpleExpressionPropNameNode, StartingTag, StrOrExpr, VCustomDirective, VModelDirective,
-    VueDirectives, VueImports,
+    ElementKind, ElementNode, ElementNodeCodegenNode, ExpressionNode, ExpressionPropNameNode,
+    FervidAtom, IntoIdent, JsChildNode, Node, PatchFlags, PatchHints, Property, PropsExpression,
+    SimpleExpressionNode, SimpleExpressionPropNameNode, StartingTag, StrOrExpr, VCustomDirective,
+    VModelDirective, VNodeCall, VNodeCallTag, VNodeChildren, VueDirectives, VueImports,
 };
 use flagset::FlagSet;
 use phf::phf_set;
 use swc_core::{
-    common::{util::take::Take, DUMMY_SP},
-    ecma::ast::{Expr, IdentName, MemberExpr, MemberProp},
+    common::{util::take::Take, Span, Spanned, DUMMY_SP},
+    ecma::ast::{ArrayLit, Expr, ExprOrSpread, IdentName, Lit, MemberExpr, MemberProp, Str},
 };
 
 use crate::{
@@ -34,12 +34,6 @@ pub struct Props<'a> {
     pub directives: Option<&'a VueDirectives>,
 }
 
-pub enum PropsExpression {
-    ObjectExpression(Box<ObjectExpression>),
-    CallExpression(Box<CallExpression>),
-    ExpressionNode(Box<ExpressionNode>),
-}
-
 pub enum RuntimeDirective {
     VShow(Box<Expr>),
     VModel(VModelDirective),
@@ -69,17 +63,159 @@ pub struct PatchMarkers {
 }
 
 pub fn post_transform_element_node(node: &mut ElementNode, ctx: &mut TransformSfcContext) {
+    // TODO: This filter might discard built-in components which seem to be handled here
+    // The official compiler only handles elements and components (no SLOT or TEMPLATE),
+    // and implicitly considers built-in components here as well
     if !matches!(node.tag_type, ElementKind::Element | ElementKind::Component) {
         return;
     }
 
-    // TODO Finish the implementation
-}
+    let is_component = matches!(node.tag_type, ElementKind::Component);
+
+    let vnode_tag = if is_component {
+        resolve_component_type(node, ctx, false)
+    } else {
+        VNodeCallTag::Expr(Box::new(Expr::Lit(Lit::Str(Str::from(
+            node.starting_tag.tag_name.to_owned(),
+        )))))
+    };
+
+    let tag = node.starting_tag.tag_name.to_owned();
+    let is_dynamic_component = matches!(vnode_tag, VNodeCallTag::CallExpression(_));
+
+    let mut should_use_block = is_dynamic_component
+        || matches!(&vnode_tag, VNodeCallTag::Builtin(BuiltinType::Teleport | BuiltinType::Suspense))
+        // <svg> and <foreignObject> must be forced into blocks so that block
+        // updates inside get proper isSVG flag at runtime. (#639, #643)
+        // This is technically web-specific, but splitting the logic out of core
+        // leads to too much unnecessary complexity.
+        || (!is_component && matches!(tag.as_str(), "svg" | "foreignObject" | "math"));
+
+    let mut vnode_props: Option<PropsExpression> = None;
+    let mut vnode_directives: Option<ArrayLit> = None;
+    let mut vnode_children: Option<VNodeChildren> = None;
+    let mut patch_hints = PatchHints::default();
+
+    // Props
+    if !node.starting_tag.attributes.is_empty() {
+        let props_build_result = build_props(
+            node,
+            ctx,
+            ctx.current_template_scope,
+            None,
+            is_component,
+            is_dynamic_component,
+            false,
+        );
+
+        vnode_props = props_build_result.props;
+        should_use_block |= props_build_result.patch_hints.should_use_block;
+        patch_hints = props_build_result.patch_hints;
+
+        if !props_build_result.directives.is_empty() {
+            // Convert runtime directives into array-of-arrays
+            let directives_array_elements = props_build_result
+                .directives
+                .into_iter()
+                .map(|dir| {
+                    Some(ExprOrSpread {
+                        spread: None,
+                        expr: Box::new(Expr::Array(build_directive_args(dir, ctx))),
+                    })
+                })
+                .collect();
+            vnode_directives = Some(ArrayLit {
+                span: DUMMY_SP,
+                elems: directives_array_elements,
+            });
+        }
+    }
 
-enum ResolveComponentTypeReturn {
-    CallExpression(CallExpression),
-    Builtin(BuiltinType),
-    Expr(Box<Expr>),
+    // Children
+    if !node.children.is_empty() {
+        if matches!(vnode_tag, VNodeCallTag::Builtin(BuiltinType::KeepAlive)) {
+            // Although a built-in component, we compile KeepAlive with raw children
+            // instead of slot functions so that it can be used inside Transition
+            // or other Transition-wrapping HOCs.
+            // To ensure correct updates with block optimizations, we need to:
+            // 1. Force keep-alive into a block. This avoids its children being
+            //    collected by a parent block.
+            should_use_block = true;
+            // 2. Force keep-alive to always be updated, since it uses raw children.
+            patch_hints.flags |= PatchFlags::DynamicSlots;
+            if !ctx.bindings_helper.is_prod && node.children.len() > 1 {
+                let span = Span {
+                    lo: node
+                        .children
+                        .first()
+                        .map(|child| child.span_lo())
+                        .unwrap_or_else(|| node.span.lo),
+                    hi: node
+                        .children
+                        .last()
+                        .map(|child| child.span_hi())
+                        .unwrap_or_else(|| node.span.hi),
+                };
+                ctx.errors
+                    .push(TransformError::TemplateError(TemplateError {
+                        span,
+                        kind: TemplateErrorKind::KeepAliveInvalidChildren,
+                    }));
+            }
+        }
+
+        let should_build_as_slots = is_component
+            && !matches!(
+                vnode_tag,
+                VNodeCallTag::Builtin(
+                    // Teleport is not a real component and has dedicated runtime handling
+                    BuiltinType::Teleport
+                    // explained above.
+                    | BuiltinType::KeepAlive
+                )
+            );
+
+        if should_build_as_slots {
+            todo!("implement buildSlots")
+        } else if node.children.len() == 1
+            && !matches!(vnode_tag, VNodeCallTag::Builtin(BuiltinType::Teleport))
+        {
+            let child = &node.children[0];
+            // Note: Official implementation additionally checks for COMPOUND_EXPRESSION here
+            // This is done because text + interpolation nodes are joined into a single COMPOUND_EXPRESSION node
+            // https://github.com/vuejs/core/blob/623bfb29a23c36bf935e7faefa64d1baa69d465c/packages/compiler-core/src/transforms/transformElement.ts#L181-L201
+            // TODO: Fervid doesn't yet merge Text nodes into a compound node
+            // TODO: Consider constant type instead
+            let mut has_dynamic_text_child = false;
+            if let Node::Interpolation(interpolation) = child {
+                has_dynamic_text_child = true;
+                if interpolation.patch_flag {
+                    patch_hints.flags |= PatchFlags::Text;
+                }
+            }
+            if has_dynamic_text_child || matches!(child, Node::Text(_, _)) {
+                vnode_children = Some(VNodeChildren::UseFirstChildTextNode);
+            } else {
+                vnode_children = Some(VNodeChildren::UseElementChildren);
+            }
+        } else {
+            vnode_children = Some(VNodeChildren::UseElementChildren);
+        }
+    }
+
+    // PatchFlag & dynamicPropNames
+    // Note: stringification is not done here
+
+    node.codegen_node = Some(Box::new(ElementNodeCodegenNode::VNodeCall(VNodeCall {
+        tag: vnode_tag,
+        props: vnode_props,
+        children: vnode_children,
+        patch_hints,
+        directives: vnode_directives,
+        is_block: should_use_block,
+        disable_tracking: false,
+        is_component,
+    })));
 }
 
 /// https://github.com/vuejs/core/blob/aac7e1898907445c8f89b22047a9bfcf0a6e91b8/packages/compiler-core/src/transforms/transformElement.ts#L227-L320
@@ -87,7 +223,7 @@ fn resolve_component_type(
     node: &mut ElementNode,
     ctx: &mut TransformSfcContext,
     ssr: bool,
-) -> ResolveComponentTypeReturn {
+) -> VNodeCallTag {
     let mut tag = Cow::Borrowed(&node.starting_tag.tag_name);
 
     // 1. Dynamic component
@@ -113,7 +249,7 @@ fn resolve_component_type(
             }
 
             if let Some(exp) = exp {
-                return ResolveComponentTypeReturn::CallExpression(create_call_expression(
+                return VNodeCallTag::CallExpression(create_call_expression(
                     ctx.bindings_helper
                         .helper(VueImports::ResolveDynamicComponent),
                     vec![JsChildNode::ExpressionNode(Box::new(exp))],
@@ -138,13 +274,13 @@ fn resolve_component_type(
         if !ssr {
             ctx.bindings_helper.helper(built_in.into());
         }
-        return ResolveComponentTypeReturn::Builtin(built_in);
+        return VNodeCallTag::Builtin(built_in);
     }
 
     // 3. User component (from setup bindings)
     // Note: `resolve_component_setup_reference` already handles `.` inside component name
     if let Some(resolved_from_setup) = resolve_component_setup_reference(ctx, &tag) {
-        return ResolveComponentTypeReturn::Expr(resolved_from_setup);
+        return VNodeCallTag::Expr(resolved_from_setup);
     }
 
     // 4 & 5 common
@@ -164,7 +300,7 @@ fn resolve_component_type(
                 ),
             );
 
-            return ResolveComponentTypeReturn::Expr(Box::new(Expr::Ident(tag_ident)));
+            return VNodeCallTag::Expr(Box::new(Expr::Ident(tag_ident)));
         }
     }
 
@@ -173,7 +309,7 @@ fn resolve_component_type(
         tag.into_owned(),
         ComponentBinding::RuntimeResolved(Box::new(tag_ident.to_owned()), false),
     );
-    ResolveComponentTypeReturn::Expr(Box::new(Expr::Ident(tag_ident)))
+    VNodeCallTag::Expr(Box::new(Expr::Ident(tag_ident)))
 }
 
 // TODO: This duplicates `TemplateVisitor::maybe_resolve_component`, clean up the other implementation
@@ -855,54 +991,21 @@ fn analyze_patch_flag(
     }
 }
 
-fn dedupe_properties(properties: Vec<Property>) -> Vec<Property> {
+fn dedupe_properties(_properties: Vec<Property>) -> Vec<Property> {
     todo!()
 }
 
-fn is_component_tag(tag: &StartingTag) -> bool {
-    matches!(tag.tag_name.as_str(), "component" | "Component")
-}
-
-impl From<&Expr> for PropsExpression {
-    fn from(value: &Expr) -> Self {
-        match value {
-            Expr::Call(call_expr) => {
-                PropsExpression::CallExpression(Box::new(call_expr.to_owned().into()))
-            }
-            Expr::Object(obj_expr) => {
-                PropsExpression::ObjectExpression(Box::new(ObjectExpression {
-                    properties: obj_expr.props.iter().cloned().map(Into::into).collect(),
-                    span: obj_expr.span,
-                }))
-            }
-            _ => PropsExpression::ExpressionNode(Box::new(value.to_owned().into())),
-        }
-    }
+fn build_directive_args(_dir: RuntimeDirective, _ctx: &mut TransformSfcContext) -> ArrayLit {
+    todo!()
 }
 
-impl From<PropsExpression> for JsChildNode {
-    fn from(val: PropsExpression) -> Self {
-        match val {
-            PropsExpression::ObjectExpression(o) => JsChildNode::ObjectExpression(o),
-            PropsExpression::CallExpression(c) => JsChildNode::CallExpression(c),
-            PropsExpression::ExpressionNode(e) => JsChildNode::ExpressionNode(e),
-        }
-    }
+fn is_component_tag(tag: &StartingTag) -> bool {
+    matches!(tag.tag_name.as_str(), "component" | "Component")
 }
 
 // TODO: Move to transform core/utils.rs
 fn is_static_exp(arg: &JsChildNode) -> bool {
-    match arg {
-        JsChildNode::ExpressionNode(expression_node) => match expression_node.as_ref() {
-            ExpressionNode::SimpleExpression(simple_expression_node)
-                if simple_expression_node.is_static =>
-            {
-                true
-            }
-            _ => false,
-        },
-        _ => false,
-    }
+    matches!(arg, JsChildNode::ExpressionNode(expression_node) if matches!(expression_node.as_ref(), ExpressionNode::SimpleExpression(simple_expression_node) if simple_expression_node.is_static))
 }
 fn is_static_exp_str_or_expr(arg: &StrOrExpr) -> bool {
     match arg {
diff --git a/crates/fervid_transform/src/template/utils.rs b/crates/fervid_transform/src/template/utils.rs
index 170855ee..7d4a6909 100644
--- a/crates/fervid_transform/src/template/utils.rs
+++ b/crates/fervid_transform/src/template/utils.rs
@@ -55,10 +55,9 @@ pub fn find_prop<'a>(
 pub fn is_static_arg_of(arg: Option<&StrOrExpr>, name: &str) -> bool {
     match arg {
         Some(StrOrExpr::Str(s)) if s == name => true,
-        Some(StrOrExpr::Expr(expr)) => match expr.as_ref() {
-            Expr::Lit(Lit::Str(s)) if s.value == name => true,
-            _ => false,
-        },
+        Some(StrOrExpr::Expr(expr)) => {
+            matches!(expr.as_ref(), Expr::Lit(Lit::Str(s)) if s.value == name)
+        }
         _ => false,
     }
 }
diff --git a/crates/fervid_transform/src/template/v_model.rs b/crates/fervid_transform/src/template/v_model.rs
index 4fc749a9..9699c125 100644
--- a/crates/fervid_transform/src/template/v_model.rs
+++ b/crates/fervid_transform/src/template/v_model.rs
@@ -10,7 +10,7 @@ use crate::{
 pub fn transform_model(
     ctx: &mut TransformSfcContext,
     v_model: &mut VModelDirective,
-    element_node: &ElementNode,
+    _element_node: &ElementNode,
     scope_to_use: u32,
 ) {
     // Note: expression is always defined on `v_model`, guaranteed by the parser

From 698e6d83f96acdf6843af8b1f15fca4f702c4b10 Mon Sep 17 00:00:00 2001
From: Marsel Shaikhin <phoenix.apps@proton.me>
Date: Thu, 5 Mar 2026 22:28:30 +0100
Subject: [PATCH 5/9] feat: implement dedupe_properties and merge_as_array

---
 crates/fervid_core/src/ast.rs                 | 20 +++++-
 .../src/template/transform_element.rs         | 63 +++++++++++++++++--
 2 files changed, 76 insertions(+), 7 deletions(-)

diff --git a/crates/fervid_core/src/ast.rs b/crates/fervid_core/src/ast.rs
index 5f0164ef..97a280d2 100644
--- a/crates/fervid_core/src/ast.rs
+++ b/crates/fervid_core/src/ast.rs
@@ -97,8 +97,9 @@ pub enum JsChildNode {
     CallExpression(Box<CallExpression>),
     ObjectExpression(Box<ObjectExpression>),
     ExpressionNode(Box<ExpressionNode>),
+    ArrayExpression(Box<ArrayExpression>),
     // Unused?
-    OriginalValueMarker,
+    // OriginalValueMarker,
 }
 
 #[derive(Debug, Clone)]
@@ -118,6 +119,13 @@ pub struct ObjectExpression {
 pub struct Property {
     pub key: ExpressionPropNameNode,
     pub value: JsChildNode,
+    pub span: Span,
+}
+
+#[derive(Debug, Clone)]
+pub struct ArrayExpression {
+    pub elements: Vec<JsChildNode>,
+    pub span: Span,
 }
 
 pub fn create_call_expression(
@@ -137,7 +145,15 @@ pub fn create_object_expression(properties: Vec<Property>, span: Span) -> Object
 }
 
 pub fn create_object_property(key: ExpressionPropNameNode, value: JsChildNode) -> Property {
-    Property { key, value }
+    Property {
+        key,
+        value,
+        span: DUMMY_SP,
+    }
+}
+
+pub fn create_array_expression(elements: Vec<JsChildNode>, span: Span) -> ArrayExpression {
+    ArrayExpression { elements, span }
 }
 
 pub fn create_simple_expression_propname(
diff --git a/crates/fervid_transform/src/template/transform_element.rs b/crates/fervid_transform/src/template/transform_element.rs
index 8c3bcf8f..a2ade141 100644
--- a/crates/fervid_transform/src/template/transform_element.rs
+++ b/crates/fervid_transform/src/template/transform_element.rs
@@ -6,11 +6,12 @@ use fervid_core::{
     IntoIdent, JsChildNode, Node, PatchFlags, PatchHints, Property, PropsExpression,
     SimpleExpressionNode, SimpleExpressionPropNameNode, StartingTag, StrOrExpr, VCustomDirective,
     VModelDirective, VNodeCall, VNodeCallTag, VNodeChildren, VueDirectives, VueImports,
-    create_call_expression, create_object_expression, create_object_property,
-    create_simple_expression_bool, create_simple_expression_propname, create_simple_expression_str,
-    fervid_atom,
+    create_array_expression, create_call_expression, create_object_expression,
+    create_object_property, create_simple_expression_bool, create_simple_expression_propname,
+    create_simple_expression_str, fervid_atom,
 };
 use flagset::FlagSet;
+use fxhash::FxHashMap;
 use phf::phf_set;
 use swc_core::{
     common::{DUMMY_SP, Span, Spanned, util::take::Take},
@@ -991,8 +992,60 @@ fn analyze_patch_flag(
     }
 }
 
-fn dedupe_properties(_properties: Vec<Property>) -> Vec<Property> {
-    todo!()
+/// Dedupe props in an object literal.
+/// Literal duplicated attributes would have been warned during the parse phase,
+/// however, it's possible to encounter duplicated `onXXX` handlers with different
+/// modifiers. We also need to merge static and dynamic class / style attributes.
+/// - onXXX handlers / style: merge into array
+/// - class: merge into single expression with concatenation
+fn dedupe_properties(properties: Vec<Property>) -> Vec<Property> {
+    let mut known_props = FxHashMap::<FervidAtom, usize>::default();
+    let mut deduped = Vec::<Property>::new();
+
+    for prop in properties {
+        let ExpressionPropNameNode::SimpleExpression(ref prop_key) = prop.key else {
+            deduped.push(prop);
+            continue;
+        };
+
+        if !prop_key.is_static {
+            deduped.push(prop);
+            continue;
+        }
+
+        let name = &prop_key.ast.sym;
+
+        if let Some(existing) = known_props.get_mut(name).and_then(|v| deduped.get_mut(*v)) {
+            if matches!(name.as_str(), "style" | "class") || is_on(name) {
+                merge_as_array(existing, prop);
+            }
+        } else {
+            let name = name.clone();
+            let idx = deduped.len();
+            deduped.push(prop);
+            known_props.insert(name, idx);
+        }
+    }
+
+    deduped
+}
+
+fn merge_as_array(existing: &mut Property, incoming: Property) {
+    if let JsChildNode::ArrayExpression(ref mut array) = existing.value {
+        array.elements.push(incoming.value);
+    } else {
+        let existing_value = std::mem::replace(
+            &mut existing.value,
+            JsChildNode::ArrayExpression(Box::new(create_array_expression(
+                Vec::with_capacity(2),
+                existing.span,
+            ))),
+        );
+        if let JsChildNode::ArrayExpression(ref mut v) = existing.value {
+            v.elements.push(existing_value);
+            v.elements.push(incoming.value);
+        };
+    }
 }
 
 fn build_directive_args(_dir: RuntimeDirective, _ctx: &mut TransformSfcContext) -> ArrayLit {

From 5106bbeb183e31078e54304ece7f8bebb0861f13 Mon Sep 17 00:00:00 2001
From: Marsel Shaikhin <phoenix.apps@proton.me>
Date: Fri, 29 May 2026 15:45:31 +0200
Subject: [PATCH 6/9] feat: add buildSlots implementation

---
 crates/fervid_core/src/ast.rs                 |  74 +++-
 crates/fervid_transform/src/error.rs          |   8 +
 .../fervid_transform/src/template/core/mod.rs |   1 +
 .../src/template/core/v_slot.rs               | 368 ++++++++++++++++++
 .../src/template/transform_element.rs         |   7 +-
 5 files changed, 455 insertions(+), 3 deletions(-)
 create mode 100644 crates/fervid_transform/src/template/core/v_slot.rs

diff --git a/crates/fervid_core/src/ast.rs b/crates/fervid_core/src/ast.rs
index 97a280d2..ca1c956d 100644
--- a/crates/fervid_core/src/ast.rs
+++ b/crates/fervid_core/src/ast.rs
@@ -1,11 +1,12 @@
 // Adapted from https://github.com/vuejs/core/blob/5a8aa0b2ba575e098cbb63b396e9bcb751eb3a0f/packages/compiler-core/src/ast.ts
 
+use smallvec::SmallVec;
 use swc_core::{
     common::{DUMMY_SP, Span},
-    ecma::ast::{ArrayLit, Bool, CallExpr, Expr, IdentName, Lit, PropName, PropOrSpread, Str},
+    ecma::ast::{ArrayLit, Bool, CallExpr, Expr, IdentName, Lit, Pat, PropName, PropOrSpread, Str},
 };
 
-use crate::{BuiltinType, FervidAtom, PatchHints, VueImports};
+use crate::{BuiltinType, FervidAtom, PatchHints, StrOrExpr, VueImports};
 
 #[derive(Debug, Clone, Default)]
 pub enum ConstantTypes {
@@ -76,6 +77,75 @@ pub enum VNodeChildren {
     UseElementChildren,
     /// Use the first and only child (which is a text node) from parent element
     UseFirstChildTextNode,
+    /// Build component slots from the parent element's children.
+    Slots(Slots),
+}
+
+#[derive(Debug, Clone)]
+pub struct Slots {
+    pub slots: Vec<SlotBuild>,
+    pub dynamic_slots: Vec<DynamicSlot>,
+    pub has_dynamic_slots: bool,
+    pub slot_flag: SlotFlag,
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum SlotFlag {
+    Stable = 1,
+    Dynamic = 2,
+    Forwarded = 3,
+}
+
+#[derive(Debug, Clone)]
+pub struct SlotBuild {
+    pub name: StrOrExpr,
+    pub props: Option<Box<Pat>>,
+    pub source: SlotSource,
+}
+
+#[derive(Debug, Clone)]
+pub enum DynamicSlot {
+    Conditional(DynamicSlotConditional),
+    RenderList(DynamicSlotRenderList),
+}
+
+#[derive(Debug, Clone)]
+pub struct DynamicSlotConditional {
+    pub if_slot: ConditionalDynamicSlot,
+    pub else_if_slots: Vec<ConditionalDynamicSlot>,
+    pub else_slot: Option<DynamicSlotBuild>,
+}
+
+#[derive(Debug, Clone)]
+pub struct ConditionalDynamicSlot {
+    pub condition: Box<Expr>,
+    pub slot: DynamicSlotBuild,
+}
+
+#[derive(Debug, Clone)]
+pub struct DynamicSlotRenderList {
+    /// Index points to a `<template v-for v-slot>` carrier node in parent component children.
+    /// Codegen can read the `VForDirective` from that node and render `slot` for each item.
+    pub slot_template_index: usize,
+    pub slot: DynamicSlotBuild,
+}
+
+#[derive(Debug, Clone)]
+pub struct DynamicSlotBuild {
+    pub name: StrOrExpr,
+    pub props: Option<Box<Pat>>,
+    pub source: SlotSource,
+    pub key: Option<usize>,
+}
+
+#[derive(Debug, Clone)]
+pub enum SlotSource {
+    /// Indices point to parent component children that render directly as the default slot.
+    /// They are captured after child-shaping post transforms have run.
+    ImplicitDefaultSlot(SmallVec<[usize; 1]>),
+    /// Index points to a `<template v-slot>` carrier node in the parent component children.
+    /// Codegen must render that template node's children, not the template node itself.
+    TemplateSlotChildren(usize),
 }
 
 #[derive(Debug, Clone)]
diff --git a/crates/fervid_transform/src/error.rs b/crates/fervid_transform/src/error.rs
index 6e6c14b8..03a00dbf 100644
--- a/crates/fervid_transform/src/error.rs
+++ b/crates/fervid_transform/src/error.rs
@@ -118,6 +118,14 @@ pub enum TemplateErrorKind {
     VModelOnScopeVariable,
     /// v-on is missing expression
     VOnNoExpression,
+    /// v-else/v-else-if has no adjacent v-if or v-else-if.
+    VElseNoAdjacentIf,
+    /// Mixed v-slot usage on both the component and nested <template>. When there are multiple named slots, all slots should use <template> syntax to avoid scope ambiguity.
+    VSlotMixedSlotUsage,
+    /// Duplicate slot names found.
+    VSlotDuplicateSlotNames,
+    /// Extraneous children found when component already has explicitly named default slot. These children will be ignored.
+    VSlotExtraneousDefaultSlotChildren,
     /// v-slot can only be used on components or <template> tags.
     VSlotMisplaced,
 }
diff --git a/crates/fervid_transform/src/template/core/mod.rs b/crates/fervid_transform/src/template/core/mod.rs
index f206e47f..b2db3698 100644
--- a/crates/fervid_transform/src/template/core/mod.rs
+++ b/crates/fervid_transform/src/template/core/mod.rs
@@ -1,3 +1,4 @@
 pub mod v_bind;
 pub mod v_model;
 pub mod v_on;
+pub mod v_slot;
diff --git a/crates/fervid_transform/src/template/core/v_slot.rs b/crates/fervid_transform/src/template/core/v_slot.rs
new file mode 100644
index 00000000..8da9502e
--- /dev/null
+++ b/crates/fervid_transform/src/template/core/v_slot.rs
@@ -0,0 +1,368 @@
+use fervid_core::{
+    BuiltinType, ConditionalDynamicSlot, DynamicSlot, DynamicSlotBuild, DynamicSlotConditional,
+    DynamicSlotRenderList, ElementKind, ElementNode, FervidAtom, Node, SlotBuild, SlotFlag,
+    SlotSource, Slots, StrOrExpr, VSlotDirective, VueDirectives, VueImports, fervid_atom,
+};
+use fxhash::FxHashSet;
+use smallvec::SmallVec;
+use swc_core::{common::{Span, Spanned}, ecma::ast::Pat};
+
+use crate::{
+    TransformSfcContext,
+    error::{TemplateError, TemplateErrorKind, TransformError},
+};
+
+// Instead of being a DirectiveTransform, v-slot processing is called during
+// transformElement to build the slots object for a component.
+// Adapted from https://github.com/vuejs/core/blob/5a8aa0b2ba575e098cbb63b396e9bcb751eb3a0f/packages/compiler-core/src/transforms/vSlot.ts#L116-L423
+pub fn build_slots(node: &ElementNode, ctx: &mut TransformSfcContext) -> Slots {
+    ctx.bindings_helper.helper(VueImports::WithCtx);
+
+    let children = &node.children;
+    let mut slots_properties: Vec<SlotBuild> = vec![];
+    let mut dynamic_slots: Vec<DynamicSlot> = vec![];
+
+    // If the slot is inside a v-for or another v-slot, force it to be dynamic
+    // since it likely uses a scope variable.
+    let mut has_dynamic_slots = ctx.directive_scopes.v_slot > 0 || ctx.directive_scopes.v_for > 0;
+
+    // with `prefixIdentifiers: true`, this can be further optimized to make
+    // it dynamic when
+    // 1. the slot arg or exp uses the scope variables.
+    // 2. the slot children use the scope variables.
+    // TODO: Port hasScopeRef equivalent for Fervid template scopes.
+
+    // 1. Check for slot with slotProps on component itself.
+    //    <Comp v-slot="{ prop }"/>
+    let on_component_slot = find_v_slot_on_node(node);
+    if let Some(on_component_slot) = on_component_slot {
+        let slot_name = on_component_slot.slot_name.as_ref();
+        if slot_name.is_some_and(|arg| !is_static_exp(arg)) {
+            has_dynamic_slots = true;
+        }
+
+        slots_properties.push(SlotBuild {
+            name: slot_name
+                .cloned()
+                .unwrap_or_else(|| StrOrExpr::Str(fervid_atom!("default"))),
+            props: on_component_slot.value.clone(),
+            source: SlotSource::ImplicitDefaultSlot((0..children.len()).collect()),
+        });
+    }
+
+    // 2. Iterate through children and check for template slots
+    //    <template v-slot:foo="{ prop }">
+    let mut has_template_slots = false;
+    let mut has_named_default_slot = false;
+    let mut implicit_default_children = SmallVec::<[usize; 1]>::new();
+    let mut seen_slot_names = FxHashSet::<FervidAtom>::default();
+    let mut conditional_branch_index = 0;
+
+    for (i, slot_element) in children.iter().enumerate() {
+        let Some((slot_dir, slot_element_node, slot_element_directives)) =
+            find_template_slot(slot_element)
+        else {
+            // not a <template v-slot>, skip.
+            if !matches!(slot_element, Node::Comment(_, _)) {
+                implicit_default_children.push(i);
+            }
+            continue;
+        };
+
+        if on_component_slot.is_some() {
+            // already has on-component slot - this is incorrect usage.
+            push_error(
+                ctx,
+                slot_element_node.span,
+                TemplateErrorKind::VSlotMixedSlotUsage,
+            );
+            break;
+        }
+
+        has_template_slots = true;
+        // const { children: slotChildren, loc: slotLoc } = slotElement
+        // Fervid codegen resolves TemplateSlotChildren(i) back to slotElement.children.
+        let slot_name = slot_dir
+            .slot_name
+            .clone()
+            .unwrap_or_else(|| StrOrExpr::Str(fervid_atom!("default")));
+        let slot_props = slot_dir.value.clone();
+
+        // check if name is dynamic.
+        let mut static_slot_name = None;
+        if let Some(slot_name) = get_static_exp(&slot_name) {
+            static_slot_name = Some(slot_name);
+        } else {
+            has_dynamic_slots = true;
+        }
+
+        let v_for = slot_element_directives.v_for.as_ref();
+        // const slotFunction = buildSlotFn(slotProps, vFor, slotChildren, slotLoc)
+        // Fervid delays slot function codegen; SlotBuild carries slotProps and source.
+
+        // check if this slot is conditional (v-if/v-for)
+        let v_if = slot_element_directives.v_if.as_ref();
+        let v_else = slot_element_directives
+            .v_else_if
+            .as_ref()
+            .map(|_| ())
+            .or(slot_element_directives.v_else.map(|_| ()));
+        if let Some(condition) = v_if {
+            has_dynamic_slots = true;
+            dynamic_slots.push(DynamicSlot::Conditional(DynamicSlotConditional {
+                if_slot: ConditionalDynamicSlot {
+                    condition: condition.to_owned(),
+                    slot: build_dynamic_slot(
+                        slot_name,
+                        slot_props,
+                        i,
+                        Some(conditional_branch_index),
+                    ),
+                },
+                else_if_slots: vec![],
+                else_slot: None,
+            }));
+            conditional_branch_index += 1;
+            continue;
+        } else if v_else.is_some() {
+            // find adjacent v-if
+            let mut j = i;
+            let mut prev = None;
+            while j > 0 {
+                j -= 1;
+                let candidate = &children[j];
+                if !is_comment_or_whitespace(candidate) {
+                    prev = Some(candidate);
+                    break;
+                }
+            }
+
+            if prev.is_some_and(is_template_with_if) {
+                let Some(DynamicSlot::Conditional(conditional)) = dynamic_slots.last_mut() else {
+                    // Vue asserts this in tests; keep a transform error in Fervid for resilience.
+                    push_error(
+                        ctx,
+                        slot_element_node.span,
+                        TemplateErrorKind::VElseNoAdjacentIf,
+                    );
+                    continue;
+                };
+
+                let slot =
+                    build_dynamic_slot(slot_name, slot_props, i, Some(conditional_branch_index));
+
+                if let Some(condition) = slot_element_directives.v_else_if.clone() {
+                    conditional
+                        .else_if_slots
+                        .push(ConditionalDynamicSlot { condition, slot });
+                } else {
+                    conditional.else_slot = Some(slot);
+                }
+
+                conditional_branch_index += 1;
+            } else {
+                push_error(
+                    ctx,
+                    slot_element_node.span,
+                    TemplateErrorKind::VElseNoAdjacentIf,
+                );
+            }
+            continue;
+        } else if v_for.is_some() {
+            has_dynamic_slots = true;
+            dynamic_slots.push(DynamicSlot::RenderList(DynamicSlotRenderList {
+                slot_template_index: i,
+                slot: build_dynamic_slot(slot_name, slot_props, i, None),
+            }));
+            continue;
+        } else {
+            // check duplicate static names
+            if let Some(static_slot_name) = static_slot_name {
+                if seen_slot_names.contains(&static_slot_name) {
+                    push_error(
+                        ctx,
+                        slot_element_node.span,
+                        TemplateErrorKind::VSlotDuplicateSlotNames,
+                    );
+                    continue;
+                }
+                seen_slot_names.insert(static_slot_name.to_owned());
+                if static_slot_name == "default" {
+                    has_named_default_slot = true;
+                }
+            }
+            slots_properties.push(SlotBuild {
+                name: slot_name,
+                props: slot_props,
+                source: SlotSource::TemplateSlotChildren(i),
+            });
+        }
+    }
+
+    if on_component_slot.is_none() {
+        if !has_template_slots {
+            // implicit default slot (on component)
+            build_default_slot_property(&mut slots_properties, implicit_default_children);
+        } else if !implicit_default_children.is_empty()
+            // #3766
+            // with whitespace: 'preserve', whitespaces between slots will end up in
+            // implicitDefaultChildren. Ignore if all implicit children are whitespaces.
+            && !implicit_default_children
+                .iter()
+                .all(|idx| is_whitespace_text(&children[*idx]))
+        {
+            // implicit default slot (mixed with named slots)
+            if has_named_default_slot {
+                push_error(
+                    ctx,
+                    children[implicit_default_children[0]].span(),
+                    TemplateErrorKind::VSlotExtraneousDefaultSlotChildren,
+                );
+            } else {
+                build_default_slot_property(&mut slots_properties, implicit_default_children);
+            }
+        }
+    }
+
+    let slot_flag = if has_dynamic_slots {
+        SlotFlag::Dynamic
+    } else if has_forwarded_slots(children) {
+        SlotFlag::Forwarded
+    } else {
+        SlotFlag::Stable
+    };
+
+    // Codegen will wrap the static slots object in createSlots(...) when dynamicSlots is not empty.
+
+    Slots {
+        slots: slots_properties,
+        dynamic_slots,
+        has_dynamic_slots,
+        slot_flag,
+    }
+}
+
+fn build_dynamic_slot(
+    name: StrOrExpr,
+    props: Option<Box<Pat>>,
+    slot_template_index: usize,
+    key: Option<usize>,
+) -> DynamicSlotBuild {
+    DynamicSlotBuild {
+        name,
+        props,
+        source: SlotSource::TemplateSlotChildren(slot_template_index),
+        key,
+    }
+}
+
+fn push_error(ctx: &mut TransformSfcContext, span: Span, kind: TemplateErrorKind) {
+    ctx.errors
+        .push(TransformError::TemplateError(TemplateError { span, kind }));
+}
+
+fn build_default_slot_property(
+    slots_properties: &mut Vec<SlotBuild>,
+    children: SmallVec<[usize; 1]>,
+) {
+    slots_properties.push(SlotBuild {
+        name: StrOrExpr::Str(fervid_atom!("default")),
+        // This function is called for implicit default slot
+        props: None,
+        source: SlotSource::ImplicitDefaultSlot(children),
+    });
+}
+
+fn find_v_slot_on_node(node: &ElementNode) -> Option<&VSlotDirective> {
+    node.starting_tag
+        .directives
+        .as_deref()
+        .and_then(|directives| directives.v_slot.as_ref())
+}
+
+fn find_template_slot(node: &Node) -> Option<(&VSlotDirective, &ElementNode, &VueDirectives)> {
+    let Node::Element(element) = node else {
+        return None;
+    };
+
+    if !is_template_node(element) {
+        return None;
+    }
+
+    let directives = element.starting_tag.directives.as_deref()?;
+    let v_slot = directives.v_slot.as_ref()?;
+
+    Some((v_slot, element, directives))
+}
+
+fn is_template_node(node: &ElementNode) -> bool {
+    node.starting_tag.tag_name == "template"
+}
+
+fn is_template_with_if(node: &Node) -> bool {
+    let Node::Element(element) = node else {
+        return false;
+    };
+
+    is_template_node(element)
+        && element
+            .starting_tag
+            .directives
+            .as_ref()
+            .is_some_and(|directives| directives.v_if.is_some() || directives.v_else_if.is_some())
+}
+
+fn is_comment_or_whitespace(node: &Node) -> bool {
+    matches!(node, Node::Comment(_, _)) || is_whitespace_text(node)
+}
+
+fn is_whitespace_text(node: &Node) -> bool {
+    matches!(node, Node::Text(text, _) if text.trim().is_empty())
+}
+
+fn is_static_exp(arg: &StrOrExpr) -> bool {
+    match arg {
+        StrOrExpr::Str(_) => true,
+        StrOrExpr::Expr(expr) => expr.is_lit(),
+    }
+}
+fn get_static_exp(arg: &StrOrExpr) -> Option<FervidAtom> {
+    match arg {
+        StrOrExpr::Str(s) => Some(s.to_owned()),
+        StrOrExpr::Expr(expr) => expr
+            .as_lit()
+            .and_then(|v| v.as_str())
+            .map(|v| v.value.to_owned()),
+    }
+}
+
+fn has_forwarded_slots(children: &[Node]) -> bool {
+    for child in children {
+        match child {
+            Node::Element(element) => {
+                if matches!(element.tag_type, ElementKind::Builtin(BuiltinType::Slot))
+                    || has_forwarded_slots(&element.children)
+                {
+                    return true;
+                }
+            }
+            Node::ConditionalSeq(conditional) => {
+                if has_forwarded_slots(&conditional.if_node.node.children)
+                    || conditional
+                        .else_if_nodes
+                        .iter()
+                        .any(|branch| has_forwarded_slots(&branch.node.children))
+                    || conditional
+                        .else_node
+                        .as_ref()
+                        .is_some_and(|node| has_forwarded_slots(&node.children))
+                {
+                    return true;
+                }
+            }
+            _ => {}
+        }
+    }
+
+    false
+}
diff --git a/crates/fervid_transform/src/template/transform_element.rs b/crates/fervid_transform/src/template/transform_element.rs
index a2ade141..59e9b06f 100644
--- a/crates/fervid_transform/src/template/transform_element.rs
+++ b/crates/fervid_transform/src/template/transform_element.rs
@@ -22,6 +22,7 @@ use crate::{
     BindingsHelper, SetupBinding, TransformSfcContext,
     error::{TemplateError, TemplateErrorKind, TransformError},
     template::{
+        core::v_slot::build_slots,
         directive_transforms::DirectiveTransforms,
         expr_transform::BindingsHelperTransform,
         utils::{
@@ -178,7 +179,11 @@ pub fn post_transform_element_node(node: &mut ElementNode, ctx: &mut TransformSf
             );
 
         if should_build_as_slots {
-            todo!("implement buildSlots")
+            let slots = build_slots(node, ctx);
+            if slots.has_dynamic_slots {
+                patch_hints.flags |= PatchFlags::DynamicSlots;
+            }
+            vnode_children = Some(VNodeChildren::Slots(slots));
         } else if node.children.len() == 1
             && !matches!(vnode_tag, VNodeCallTag::Builtin(BuiltinType::Teleport))
         {

From 1a9f4e2dec31bf03ddcdef01004e985492320a0b Mon Sep 17 00:00:00 2001
From: Marsel Shaikhin <phoenix.apps@proton.me>
Date: Fri, 29 May 2026 23:22:32 +0200
Subject: [PATCH 7/9] feat: add new template pipeline traversal and vnode
 codegen

---
 crates/fervid/Cargo.toml                      |   1 +
 crates/fervid_codegen/Cargo.toml              |   4 +
 .../src/control_flow/codegen.rs               |  34 +-
 crates/fervid_codegen/src/control_flow/mod.rs |   3 +
 .../src/control_flow/vnode_call.rs            | 355 ++++++++++++++++++
 crates/fervid_core/src/structs.rs             |   1 +
 crates/fervid_parser/src/template.rs          |  48 ++-
 .../src/template/ast_transform.rs             | 118 +++++-
 .../src/template/core/v_slot.rs               |   5 +-
 .../src/template/directive_transforms.rs      |   6 +-
 .../src/template/node_transforms.rs           |  68 +++-
 .../src/template/transform_element.rs         |  11 +-
 12 files changed, 623 insertions(+), 31 deletions(-)
 create mode 100644 crates/fervid_codegen/src/control_flow/vnode_call.rs

diff --git a/crates/fervid/Cargo.toml b/crates/fervid/Cargo.toml
index ccbeec0f..32509fc4 100644
--- a/crates/fervid/Cargo.toml
+++ b/crates/fervid/Cargo.toml
@@ -10,6 +10,7 @@ license = "Apache-2.0"
 [features]
 default = []
 dbg_print = []
+new-pipeline = ["fervid_transform/new-pipeline", "fervid_codegen/new-pipeline"]
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
diff --git a/crates/fervid_codegen/Cargo.toml b/crates/fervid_codegen/Cargo.toml
index 3948aea4..57a7f00f 100644
--- a/crates/fervid_codegen/Cargo.toml
+++ b/crates/fervid_codegen/Cargo.toml
@@ -23,3 +23,7 @@ flagset = "0.4.3"
 [dev-dependencies]
 panic-message = "0.3.0"
 swc_ecma_parser = { workspace = true }
+
+[features]
+default = []
+new-pipeline = ["fervid_transform/new-pipeline"]
diff --git a/crates/fervid_codegen/src/control_flow/codegen.rs b/crates/fervid_codegen/src/control_flow/codegen.rs
index 84266910..f36068d6 100644
--- a/crates/fervid_codegen/src/control_flow/codegen.rs
+++ b/crates/fervid_codegen/src/control_flow/codegen.rs
@@ -49,10 +49,36 @@ impl CodegenContext {
         }
 
         // Generate the relevant render code depending on ElementKind
-        let mut result = match element_node.tag_type {
-            ElementKind::Builtin(builtin_type) => self.generate_builtin(element_node, builtin_type),
-            ElementKind::Element => self.generate_element_vnode(element_node, wrap_in_block),
-            ElementKind::Component => self.generate_component_vnode(element_node, wrap_in_block),
+        let mut result = {
+            #[cfg(feature = "new-pipeline")]
+            if let Some(codegen_node) = element_node.codegen_node.as_deref() {
+                self.generate_element_codegen_node(element_node, codegen_node, wrap_in_block)
+            } else {
+                match element_node.tag_type {
+                    ElementKind::Builtin(builtin_type) => {
+                        self.generate_builtin(element_node, builtin_type)
+                    }
+                    ElementKind::Element | ElementKind::Template => {
+                        self.generate_element_vnode(element_node, wrap_in_block)
+                    }
+                    ElementKind::Component => {
+                        self.generate_component_vnode(element_node, wrap_in_block)
+                    }
+                }
+            }
+
+            #[cfg(not(feature = "new-pipeline"))]
+            match element_node.tag_type {
+                ElementKind::Builtin(builtin_type) => {
+                    self.generate_builtin(element_node, builtin_type)
+                }
+                ElementKind::Element | ElementKind::Template => {
+                    self.generate_element_vnode(element_node, wrap_in_block)
+                }
+                ElementKind::Component => {
+                    self.generate_component_vnode(element_node, wrap_in_block)
+                }
+            }
         };
 
         // Generate directives operating on render code
diff --git a/crates/fervid_codegen/src/control_flow/mod.rs b/crates/fervid_codegen/src/control_flow/mod.rs
index 691da514..dc68c0ce 100644
--- a/crates/fervid_codegen/src/control_flow/mod.rs
+++ b/crates/fervid_codegen/src/control_flow/mod.rs
@@ -3,4 +3,7 @@ mod conditional_seq;
 mod sfc;
 mod slotted_iterator;
 
+#[cfg(feature = "new-pipeline")]
+mod vnode_call;
+
 pub use slotted_iterator::SlottedIterator;
diff --git a/crates/fervid_codegen/src/control_flow/vnode_call.rs b/crates/fervid_codegen/src/control_flow/vnode_call.rs
new file mode 100644
index 00000000..6259ba8c
--- /dev/null
+++ b/crates/fervid_codegen/src/control_flow/vnode_call.rs
@@ -0,0 +1,355 @@
+use fervid_core::{
+    ArrayExpression, CallExpression as FervidCallExpression, ElementNode, ElementNodeCodegenNode,
+    ExpressionNode, ExpressionPropNameNode, IntoIdent, JsChildNode, ObjectExpression,
+    PropsExpression, SlotBuild, SlotFlag, SlotSource, StrOrExpr, VNodeCall, VNodeCallTag,
+    VNodeChildren, VueImports,
+};
+use swc_core::{
+    common::{DUMMY_SP, Span},
+    ecma::ast::{
+        ArrayLit, ArrowExpr, BlockStmtOrExpr, CallExpr, Callee, ComputedPropName, Expr,
+        ExprOrSpread, IdentName, KeyValueProp, Lit, Null, Number, ObjectLit, Prop, PropName,
+        PropOrSpread, Str,
+    },
+};
+
+use crate::context::CodegenContext;
+
+impl CodegenContext {
+    pub(crate) fn generate_element_codegen_node(
+        &mut self,
+        element_node: &ElementNode,
+        codegen_node: &ElementNodeCodegenNode,
+        wrap_in_block: bool,
+    ) -> Expr {
+        match codegen_node {
+            ElementNodeCodegenNode::VNodeCall(vnode_call) => {
+                self.generate_vnode_call(element_node, vnode_call, wrap_in_block)
+            }
+        }
+    }
+
+    fn generate_vnode_call(
+        &mut self,
+        element_node: &ElementNode,
+        vnode_call: &VNodeCall,
+        wrap_in_block: bool,
+    ) -> Expr {
+        let span = DUMMY_SP;
+        // TODO(new-pipeline): structural transforms (`transformIf`/`transformFor`) should create
+        // fragment VNodeCalls directly. This keeps old Fervid template-carrier behavior until then.
+        let should_generate_fragment_instead = (wrap_in_block
+            && element_node.starting_tag.tag_name == "template")
+            || self.should_generate_fragment(element_node);
+        let tag = if should_generate_fragment_instead {
+            Expr::Ident(
+                self.get_and_add_import_ident(VueImports::Fragment)
+                    .into_ident_spanned(span),
+            )
+        } else {
+            self.generate_vnode_tag(&vnode_call.tag, span)
+        };
+        let props = vnode_call
+            .props
+            .as_ref()
+            .map(|props| self.generate_props_expression(props));
+        let children = vnode_call
+            .children
+            .as_ref()
+            .map(|children| self.generate_vnode_children(element_node, children));
+        let patch_flags = vnode_call.patch_hints.flags.bits();
+
+        let mut args = vec![expr_arg(tag)];
+        let needs_props = props.is_some() || children.is_some() || patch_flags != 0;
+        let needs_children = children.is_some() || patch_flags != 0;
+
+        if needs_props {
+            args.push(expr_arg(props.unwrap_or_else(null_expr)));
+        }
+
+        if needs_children {
+            args.push(expr_arg(children.unwrap_or_else(null_expr)));
+        }
+
+        if patch_flags != 0 {
+            args.push(expr_arg(Expr::Lit(Lit::Num(Number {
+                span,
+                value: patch_flags.into(),
+                raw: None,
+            }))));
+        }
+
+        let callee = if vnode_call.is_component {
+            if vnode_call.is_block || wrap_in_block {
+                VueImports::CreateBlock
+            } else {
+                VueImports::CreateVNode
+            }
+        } else if vnode_call.is_block || wrap_in_block {
+            VueImports::CreateElementBlock
+        } else {
+            VueImports::CreateElementVNode
+        };
+
+        let call = Expr::Call(CallExpr {
+            span,
+            ctxt: Default::default(),
+            callee: Callee::Expr(Box::new(Expr::Ident(
+                self.get_and_add_import_ident(callee)
+                    .into_ident_spanned(span),
+            ))),
+            args,
+            type_args: None,
+        });
+
+        let mut expr = if vnode_call.is_block || wrap_in_block {
+            self.wrap_in_open_block(call, span)
+        } else {
+            call
+        };
+
+        if let Some(directives) = vnode_call.directives.as_ref() {
+            expr = self.maybe_generate_with_directives(expr, directives.elems.clone());
+        }
+
+        expr
+    }
+
+    fn generate_vnode_tag(&mut self, tag: &VNodeCallTag, span: Span) -> Expr {
+        match tag {
+            VNodeCallTag::Expr(expr) => *expr.to_owned(),
+            VNodeCallTag::CallExpression(call) => self.generate_call_expression(call),
+            VNodeCallTag::Builtin(builtin) => Expr::Ident(
+                self.get_and_add_import_ident(VueImports::from(*builtin))
+                    .into_ident_spanned(span),
+            ),
+        }
+    }
+
+    fn generate_props_expression(&mut self, props: &PropsExpression) -> Expr {
+        match props {
+            PropsExpression::ObjectExpression(object) => self.generate_object_expression(object),
+            PropsExpression::CallExpression(call) => self.generate_call_expression(call),
+            PropsExpression::ExpressionNode(expr) => self.generate_expression_node(expr),
+        }
+    }
+
+    fn generate_vnode_children(
+        &mut self,
+        element_node: &ElementNode,
+        children: &VNodeChildren,
+    ) -> Expr {
+        match children {
+            VNodeChildren::UseElementChildren => {
+                let (mut children, was_inlined) =
+                    self.generate_element_children(element_node, true);
+                if was_inlined && children.len() == 1 {
+                    children.pop().unwrap_or_else(null_expr)
+                } else {
+                    Expr::Array(ArrayLit {
+                        span: DUMMY_SP,
+                        elems: children
+                            .into_iter()
+                            .map(|child| Some(expr_arg(child)))
+                            .collect(),
+                    })
+                }
+            }
+            VNodeChildren::UseFirstChildTextNode => element_node
+                .children
+                .first()
+                .map(|child| self.generate_node(child, false))
+                .unwrap_or_else(null_expr),
+            VNodeChildren::Slots(slots) => {
+                let mut props = slots
+                    .slots
+                    .iter()
+                    .map(|slot| self.generate_slot_property(element_node, slot))
+                    .collect::<Vec<_>>();
+
+                props.push(PropOrSpread::Prop(Box::new(Prop::KeyValue(KeyValueProp {
+                    key: PropName::Ident(IdentName {
+                        span: DUMMY_SP,
+                        sym: "_".into(),
+                    }),
+                    value: Box::new(Expr::Lit(Lit::Num(Number {
+                        span: DUMMY_SP,
+                        value: (slots.slot_flag as u8).into(),
+                        raw: Some(match slots.slot_flag {
+                            SlotFlag::Stable => "1 /* STABLE */".into(),
+                            SlotFlag::Dynamic => "2 /* DYNAMIC */".into(),
+                            SlotFlag::Forwarded => "3 /* FORWARDED */".into(),
+                        }),
+                    }))),
+                }))));
+
+                Expr::Object(ObjectLit {
+                    span: DUMMY_SP,
+                    props,
+                })
+            }
+        }
+    }
+
+    fn generate_slot_property(
+        &mut self,
+        element_node: &ElementNode,
+        slot: &SlotBuild,
+    ) -> PropOrSpread {
+        let slot_children = match &slot.source {
+            SlotSource::ImplicitDefaultSlot(indices) => indices
+                .iter()
+                .filter_map(|idx| element_node.children.get(*idx))
+                .collect::<Vec<_>>(),
+            SlotSource::TemplateSlotChildren(index) => element_node
+                .children
+                .get(*index)
+                .and_then(|node| match node {
+                    fervid_core::Node::Element(element) => Some(element.children.iter().collect()),
+                    _ => None,
+                })
+                .unwrap_or_default(),
+        };
+
+        let mut generated_children = Vec::new();
+        self.generate_node_sequence(
+            &mut slot_children.into_iter(),
+            &mut generated_children,
+            0,
+            false,
+        );
+
+        let body = Expr::Array(ArrayLit {
+            span: DUMMY_SP,
+            elems: generated_children
+                .into_iter()
+                .map(|child| Some(expr_arg(child)))
+                .collect(),
+        });
+
+        let params = slot
+            .props
+            .as_ref()
+            .map(|props| vec![*props.to_owned()])
+            .unwrap_or_default();
+
+        let arrow = Expr::Arrow(ArrowExpr {
+            span: DUMMY_SP,
+            ctxt: Default::default(),
+            params,
+            body: Box::new(BlockStmtOrExpr::Expr(Box::new(body))),
+            is_async: false,
+            is_generator: false,
+            type_params: None,
+            return_type: None,
+        });
+
+        let with_ctx = Expr::Call(CallExpr {
+            span: DUMMY_SP,
+            ctxt: Default::default(),
+            callee: Callee::Expr(Box::new(Expr::Ident(
+                self.get_and_add_import_ident(VueImports::WithCtx)
+                    .into_ident_spanned(DUMMY_SP),
+            ))),
+            args: vec![expr_arg(arrow)],
+            type_args: None,
+        });
+
+        PropOrSpread::Prop(Box::new(Prop::KeyValue(KeyValueProp {
+            key: str_or_expr_to_prop_name(&slot.name),
+            value: Box::new(with_ctx),
+        })))
+    }
+
+    fn generate_js_child_node(&mut self, node: &JsChildNode) -> Expr {
+        match node {
+            JsChildNode::CallExpression(call) => self.generate_call_expression(call),
+            JsChildNode::ObjectExpression(object) => self.generate_object_expression(object),
+            JsChildNode::ExpressionNode(expr) => self.generate_expression_node(expr),
+            JsChildNode::ArrayExpression(array) => self.generate_array_expression(array),
+        }
+    }
+
+    fn generate_call_expression(&mut self, call: &FervidCallExpression) -> Expr {
+        Expr::Call(CallExpr {
+            span: call.span,
+            ctxt: Default::default(),
+            callee: Callee::Expr(Box::new(Expr::Ident(
+                self.get_and_add_import_ident(call.callee)
+                    .into_ident_spanned(call.span),
+            ))),
+            args: call
+                .arguments
+                .iter()
+                .map(|arg| expr_arg(self.generate_js_child_node(arg)))
+                .collect(),
+            type_args: None,
+        })
+    }
+
+    fn generate_object_expression(&mut self, object: &ObjectExpression) -> Expr {
+        Expr::Object(ObjectLit {
+            span: object.span,
+            props: object
+                .properties
+                .iter()
+                .map(|prop| {
+                    PropOrSpread::Prop(Box::new(Prop::KeyValue(KeyValueProp {
+                        key: expression_prop_name_to_prop_name(&prop.key),
+                        value: Box::new(self.generate_js_child_node(&prop.value)),
+                    })))
+                })
+                .collect(),
+        })
+    }
+
+    fn generate_array_expression(&mut self, array: &ArrayExpression) -> Expr {
+        Expr::Array(ArrayLit {
+            span: array.span,
+            elems: array
+                .elements
+                .iter()
+                .map(|elem| Some(expr_arg(self.generate_js_child_node(elem))))
+                .collect(),
+        })
+    }
+
+    fn generate_expression_node(&mut self, expr: &ExpressionNode) -> Expr {
+        match expr {
+            ExpressionNode::SimpleExpression(expr) => *expr.ast.to_owned(),
+            ExpressionNode::CompoundExpression(expr) => *expr.ast.to_owned(),
+        }
+    }
+}
+
+fn expr_arg(expr: Expr) -> ExprOrSpread {
+    ExprOrSpread {
+        spread: None,
+        expr: Box::new(expr),
+    }
+}
+
+fn null_expr() -> Expr {
+    Expr::Lit(Lit::Null(Null { span: DUMMY_SP }))
+}
+
+fn str_or_expr_to_prop_name(value: &StrOrExpr) -> PropName {
+    match value {
+        StrOrExpr::Str(value) => PropName::Str(Str {
+            span: DUMMY_SP,
+            value: value.to_owned(),
+            raw: None,
+        }),
+        StrOrExpr::Expr(expr) => PropName::Computed(ComputedPropName {
+            span: DUMMY_SP,
+            expr: expr.to_owned(),
+        }),
+    }
+}
+
+fn expression_prop_name_to_prop_name(value: &ExpressionPropNameNode) -> PropName {
+    match value {
+        ExpressionPropNameNode::SimpleExpression(expr) => PropName::Ident(expr.ast.to_owned()),
+        ExpressionPropNameNode::CompoundExpression(expr) => expr.ast.to_owned(),
+    }
+}
diff --git a/crates/fervid_core/src/structs.rs b/crates/fervid_core/src/structs.rs
index 22b39827..098b18bc 100644
--- a/crates/fervid_core/src/structs.rs
+++ b/crates/fervid_core/src/structs.rs
@@ -98,6 +98,7 @@ pub enum ElementKind {
     #[default]
     Element,
     Component,
+    Template,
 }
 
 #[derive(Debug, Clone)]
diff --git a/crates/fervid_parser/src/template.rs b/crates/fervid_parser/src/template.rs
index 78916398..1c65af65 100644
--- a/crates/fervid_parser/src/template.rs
+++ b/crates/fervid_parser/src/template.rs
@@ -106,7 +106,7 @@ impl SfcParser<'_, '_, '_> {
             self.is_pre = true;
         }
 
-        let tag_type = recognize_element_kind(&tag_name, &attributes);
+        let tag_type = recognize_element_kind(&tag_name, &attributes, directives.as_deref());
 
         let starting_tag = StartingTag {
             tag_name,
@@ -280,7 +280,15 @@ impl SfcParser<'_, '_, '_> {
     }
 }
 
-fn recognize_element_kind(tag_name: &FervidAtom, attributes: &[AttributeOrBinding]) -> ElementKind {
+fn recognize_element_kind(
+    tag_name: &FervidAtom,
+    attributes: &[AttributeOrBinding],
+    directives: Option<&VueDirectives>,
+) -> ElementKind {
+    if tag_name == "template" && directives.is_some() {
+        return ElementKind::Template;
+    }
+
     // First, check for a built-in
     if let Some(builtin_type) = VUE_BUILTINS.get(tag_name) {
         // Special case for `<component>`. If it does not have `is`, this is not a built-in
@@ -315,11 +323,45 @@ mod tests {
     #[test]
     fn it_distinguishes_component_builtin_and_not() {
         assert!(matches!(
-            recognize_element_kind(&fervid_atom!("component"), &[]),
+            recognize_element_kind(&fervid_atom!("component"), &[], None),
             ElementKind::Component
         ));
     }
 
+    // Adapted from https://github.com/vuejs/core/blob/5a8aa0b2ba575e098cbb63b396e9bcb751eb3a0f/packages/compiler-core/__tests__/parse.spec.ts#L557-L564
+    #[test]
+    fn it_marks_template_element_with_directives_as_template() {
+        let mut errors = Vec::new();
+        let mut parser = SfcParser::new(
+            r#"<template><template v-if="ok"></template></template>"#,
+            &mut errors,
+        );
+
+        let parsed = parser.parse_sfc().expect("Should parse");
+        let template = parsed.template.expect("Should have template");
+        let Node::Element(element) = template.roots.first().expect("Should have one root") else {
+            panic!("Root is not an element")
+        };
+
+        assert!(matches!(element.tag_type, ElementKind::Template));
+    }
+
+    // Adapted from https://github.com/vuejs/core/blob/5a8aa0b2ba575e098cbb63b396e9bcb751eb3a0f/packages/compiler-core/__tests__/parse.spec.ts#L566-L573
+    #[test]
+    fn it_marks_template_element_without_directives_as_element() {
+        let mut errors = Vec::new();
+        let mut parser =
+            SfcParser::new(r#"<template><template></template></template>"#, &mut errors);
+
+        let parsed = parser.parse_sfc().expect("Should parse");
+        let template = parsed.template.expect("Should have template");
+        let Node::Element(element) = template.roots.first().expect("Should have one root") else {
+            panic!("Root is not an element")
+        };
+
+        assert!(matches!(element.tag_type, ElementKind::Element));
+    }
+
     #[test]
     fn it_acknowledges_v_pre() {
         let mut errors = Vec::new();
diff --git a/crates/fervid_transform/src/template/ast_transform.rs b/crates/fervid_transform/src/template/ast_transform.rs
index 5386ea7f..873e052d 100644
--- a/crates/fervid_transform/src/template/ast_transform.rs
+++ b/crates/fervid_transform/src/template/ast_transform.rs
@@ -1,10 +1,15 @@
+#[cfg(not(feature = "new-pipeline"))]
 use fervid_core::{
-    AttributeOrBinding, BindingTypes, BuiltinType, Conditional, ConditionalNodeSequence,
-    ElementKind, ElementNode, FervidAtom, Interpolation, IntoIdent, Node, PatchFlags, PatchHints,
-    SfcTemplateBlock, StartingTag, StrOrExpr, TemplateGenerationMode, VBindDirective,
-    VSlotDirective, check_attribute_name, fervid_atom, is_from_default_slot,
+    AttributeOrBinding, BindingTypes, BuiltinType, FervidAtom, IntoIdent, TemplateGenerationMode,
+    VBindDirective,
+};
+use fervid_core::{
+    Conditional, ConditionalNodeSequence, ElementKind, ElementNode, Interpolation, Node,
+    PatchFlags, PatchHints, SfcTemplateBlock, StartingTag, StrOrExpr, VSlotDirective,
+    check_attribute_name, fervid_atom, is_from_default_slot,
 };
 use smallvec::SmallVec;
+#[cfg(not(feature = "new-pipeline"))]
 use swc_core::{
     common::DUMMY_SP,
     ecma::ast::{Bool, Expr, Lit},
@@ -12,10 +17,9 @@ use swc_core::{
 
 use crate::{TemplateScope, TransformSfcContext, template::node_transforms::NodeTransforms};
 
-use super::{
-    asset_urls::transform_asset_urls, collect_vars::collect_variables,
-    expr_transform::BindingsHelperTransform,
-};
+#[cfg(not(feature = "new-pipeline"))]
+use super::asset_urls::transform_asset_urls;
+use super::{collect_vars::collect_variables, expr_transform::BindingsHelperTransform};
 
 pub struct TemplateVisitor<'s> {
     pub ctx: &'s mut TransformSfcContext,
@@ -33,6 +37,14 @@ pub fn transform_and_record_template(
     template: &mut SfcTemplateBlock,
     ctx: &mut TransformSfcContext,
 ) {
+    #[cfg(feature = "new-pipeline")]
+    if ctx.bindings_helper.template_scopes.is_empty() {
+        ctx.bindings_helper.template_scopes.push(TemplateScope {
+            variables: SmallVec::new(),
+            parent: 0,
+        });
+    }
+
     // Optimize conditional sequences within template root
     optimize_children(&mut template.roots, ElementKind::Element);
 
@@ -357,12 +369,102 @@ impl TemplateVisitor<'_> {
 
     #[allow(unused)]
     fn visit_element_node_new(&mut self, element_node: &mut ElementNode) {
+        let parent_scope = self.current_scope;
+        let old_ctx_scope = self.ctx.current_template_scope;
+        let old_v_for_scope = self.v_for_scope;
+        let old_directive_v_for = self.ctx.directive_scopes.v_for;
+        let old_directive_v_slot = self.ctx.directive_scopes.v_slot;
+
+        let mut scope_to_use = parent_scope;
+
+        // TODO(new-pipeline): move this scope tracking into Vue-aligned node transforms
+        // (`trackVForSlotScopes` / `trackSlotScopes`) once transform-local exit state exists.
+        if let Some(ref mut directives) = element_node.starting_tag.directives {
+            let v_for = directives.v_for.as_mut();
+            let v_slot = directives.v_slot.as_mut();
+
+            if v_for.is_some() || v_slot.is_some() {
+                scope_to_use = self.ctx.bindings_helper.template_scopes.len() as u32;
+                self.ctx
+                    .bindings_helper
+                    .template_scopes
+                    .push(TemplateScope {
+                        variables: SmallVec::new(),
+                        parent: parent_scope,
+                    });
+            }
+
+            if let Some(v_for) = v_for {
+                self.v_for_scope = true;
+                self.ctx.directive_scopes.v_for += 1;
+
+                let scope = &mut self.ctx.bindings_helper.template_scopes[scope_to_use as usize];
+                collect_variables(&v_for.itervar, scope);
+
+                let is_dynamic = self
+                    .ctx
+                    .bindings_helper
+                    .transform_expr(&mut v_for.iterable, scope_to_use);
+
+                if !is_dynamic {
+                    v_for.patch_flags |= PatchFlags::StableFragment;
+                } else {
+                    let has_key = element_node
+                        .starting_tag
+                        .attributes
+                        .iter()
+                        .any(|attr| check_attribute_name(attr, "key"));
+
+                    v_for.patch_flags |= if has_key {
+                        PatchFlags::KeyedFragment
+                    } else {
+                        PatchFlags::UnkeyedFragment
+                    };
+                }
+            }
+
+            if let Some(VSlotDirective {
+                slot_name, value, ..
+            }) = v_slot
+            {
+                self.ctx.directive_scopes.v_slot += 1;
+
+                if let Some(v_slot_value) = value {
+                    let scope =
+                        &mut self.ctx.bindings_helper.template_scopes[scope_to_use as usize];
+                    collect_variables(v_slot_value, scope);
+                }
+
+                if let Some(StrOrExpr::Expr(expr)) = slot_name {
+                    self.ctx.bindings_helper.transform_expr(expr, scope_to_use);
+                }
+            }
+        }
+
+        element_node.template_scope = scope_to_use;
+        self.current_scope = scope_to_use;
+        self.ctx.current_template_scope = scope_to_use;
+
         // Cloning transforms is fine here due to the structure being optimized for it
         let node_transforms = self.ctx.node_transforms.clone();
         node_transforms.pre_transform_element_node(self.ctx, element_node);
+
+        optimize_children(&mut element_node.children, element_node.tag_type);
+
+        for child in element_node.children.iter_mut() {
+            child.visit_mut_with(self);
+        }
+
         node_transforms.post_transform_element_node(self.ctx, element_node);
+
+        self.current_scope = parent_scope;
+        self.ctx.current_template_scope = old_ctx_scope;
+        self.v_for_scope = old_v_for_scope;
+        self.ctx.directive_scopes.v_for = old_directive_v_for;
+        self.ctx.directive_scopes.v_slot = old_directive_v_slot;
     }
 
+    #[cfg(not(feature = "new-pipeline"))]
     fn visit_element_node_old(&mut self, element_node: &mut ElementNode) {
         let parent_scope = self.current_scope;
         let mut scope_to_use = parent_scope;
diff --git a/crates/fervid_transform/src/template/core/v_slot.rs b/crates/fervid_transform/src/template/core/v_slot.rs
index 8da9502e..50cbc948 100644
--- a/crates/fervid_transform/src/template/core/v_slot.rs
+++ b/crates/fervid_transform/src/template/core/v_slot.rs
@@ -5,7 +5,10 @@ use fervid_core::{
 };
 use fxhash::FxHashSet;
 use smallvec::SmallVec;
-use swc_core::{common::{Span, Spanned}, ecma::ast::Pat};
+use swc_core::{
+    common::{Span, Spanned},
+    ecma::ast::Pat,
+};
 
 use crate::{
     TransformSfcContext,
diff --git a/crates/fervid_transform/src/template/directive_transforms.rs b/crates/fervid_transform/src/template/directive_transforms.rs
index 5076ff92..55dd7243 100644
--- a/crates/fervid_transform/src/template/directive_transforms.rs
+++ b/crates/fervid_transform/src/template/directive_transforms.rs
@@ -19,7 +19,7 @@ pub trait DirectiveTransforms: Debug {
         _v_bind: &VBindDirective,
         _node: &ElementNode,
     ) -> Option<DirectiveTransformResult> {
-        todo!()
+        None
     }
 
     fn transform_v_on(
@@ -28,7 +28,7 @@ pub trait DirectiveTransforms: Debug {
         _v_on: &VOnDirective,
         _node: &ElementNode,
     ) -> Option<DirectiveTransformResult> {
-        todo!()
+        None
     }
 
     fn transform_v_model(
@@ -37,7 +37,7 @@ pub trait DirectiveTransforms: Debug {
         _v_model: &VModelDirective,
         _node: &ElementNode,
     ) -> Option<DirectiveTransformResult> {
-        todo!()
+        None
     }
 
     fn transform_v_html(
diff --git a/crates/fervid_transform/src/template/node_transforms.rs b/crates/fervid_transform/src/template/node_transforms.rs
index c7ad60ed..fe888569 100644
--- a/crates/fervid_transform/src/template/node_transforms.rs
+++ b/crates/fervid_transform/src/template/node_transforms.rs
@@ -42,40 +42,86 @@ impl Default for NodeTransformsProvider {
 
 // Base transforms are provided as default trait implementations
 impl NodeTransforms for BaseNodeTransform {
-    fn pre_transform_element_node(&self, _ctx: &mut TransformSfcContext, _node: &mut ElementNode) {
+    fn pre_transform_element_node(&self, ctx: &mut TransformSfcContext, node: &mut ElementNode) {
         // transformOnce,
+        pre_transform_once(ctx, node);
         // transformIf,
+        pre_transform_if(ctx, node);
         // transformMemo,
+        pre_transform_memo(ctx, node);
         // transformFor,
+        pre_transform_for(ctx, node);
         // prefixIdentifiers ? trackVForSlotScopes,
+        pre_track_v_for_slot_scopes(ctx, node);
         // prefixIdentifiers ? transformExpression,
+        pre_transform_expression(ctx, node);
         // transformSlotOutlet,
+        pre_transform_slot_outlet(ctx, node);
 
         // transformElement - no pre hook
 
         // trackSlotScopes,
+        pre_track_slot_scopes(ctx, node);
         // transformText,
+        pre_transform_text(ctx, node);
         // TODO - User transforms in the separate implementation?
     }
 
     fn post_transform_element_node(&self, ctx: &mut TransformSfcContext, node: &mut ElementNode) {
-        // transformOnce,
-        // transformIf,
-        // transformMemo,
-        // transformFor,
-        // prefixIdentifiers ? trackVForSlotScopes,
-        // prefixIdentifiers ? transformExpression,
-        // transformSlotOutlet,
+        // Post transforms run in reverse order.
+        // transformText,
+        post_transform_text(ctx, node);
+        // trackSlotScopes,
+        post_track_slot_scopes(ctx, node);
 
         // transformElement
         post_transform_element_node(node, ctx);
 
-        // trackSlotScopes,
-        // transformText,
+        // transformSlotOutlet,
+        post_transform_slot_outlet(ctx, node);
+        // prefixIdentifiers ? transformExpression,
+        post_transform_expression(ctx, node);
+        // prefixIdentifiers ? trackVForSlotScopes,
+        post_track_v_for_slot_scopes(ctx, node);
+        // transformFor,
+        post_transform_for(ctx, node);
+        // transformMemo,
+        post_transform_memo(ctx, node);
+        // transformIf,
+        post_transform_if(ctx, node);
+        // transformOnce,
+        post_transform_once(ctx, node);
         // TODO - User transforms in the separate implementation?
     }
 }
 
+fn pre_transform_once(_ctx: &mut TransformSfcContext, _node: &mut ElementNode) {}
+fn post_transform_once(_ctx: &mut TransformSfcContext, _node: &mut ElementNode) {}
+
+fn pre_transform_if(_ctx: &mut TransformSfcContext, _node: &mut ElementNode) {}
+fn post_transform_if(_ctx: &mut TransformSfcContext, _node: &mut ElementNode) {}
+
+fn pre_transform_memo(_ctx: &mut TransformSfcContext, _node: &mut ElementNode) {}
+fn post_transform_memo(_ctx: &mut TransformSfcContext, _node: &mut ElementNode) {}
+
+fn pre_transform_for(_ctx: &mut TransformSfcContext, _node: &mut ElementNode) {}
+fn post_transform_for(_ctx: &mut TransformSfcContext, _node: &mut ElementNode) {}
+
+fn pre_track_v_for_slot_scopes(_ctx: &mut TransformSfcContext, _node: &mut ElementNode) {}
+fn post_track_v_for_slot_scopes(_ctx: &mut TransformSfcContext, _node: &mut ElementNode) {}
+
+fn pre_transform_expression(_ctx: &mut TransformSfcContext, _node: &mut ElementNode) {}
+fn post_transform_expression(_ctx: &mut TransformSfcContext, _node: &mut ElementNode) {}
+
+fn pre_transform_slot_outlet(_ctx: &mut TransformSfcContext, _node: &mut ElementNode) {}
+fn post_transform_slot_outlet(_ctx: &mut TransformSfcContext, _node: &mut ElementNode) {}
+
+fn pre_track_slot_scopes(_ctx: &mut TransformSfcContext, _node: &mut ElementNode) {}
+fn post_track_slot_scopes(_ctx: &mut TransformSfcContext, _node: &mut ElementNode) {}
+
+fn pre_transform_text(_ctx: &mut TransformSfcContext, _node: &mut ElementNode) {}
+fn post_transform_text(_ctx: &mut TransformSfcContext, _node: &mut ElementNode) {}
+
 impl NodeTransforms for DomNodeTransform {
     fn pre_transform_element_node(&self, ctx: &mut TransformSfcContext, node: &mut ElementNode) {
         BaseNodeTransform.pre_transform_element_node(ctx, node);
@@ -87,6 +133,7 @@ impl NodeTransforms for DomNodeTransform {
     }
 
     fn post_transform_element_node(&self, ctx: &mut TransformSfcContext, node: &mut ElementNode) {
+        // TODO: Post transforms run in reverse order
         BaseNodeTransform.post_transform_element_node(ctx, node);
         // Core node transforms;
         // ignoreSideEffectTags;
@@ -112,6 +159,7 @@ impl NodeTransforms for SsrNodeTransform {
     }
 
     fn post_transform_element_node(&self, _ctx: &mut TransformSfcContext, _node: &mut ElementNode) {
+        // TODO: Post transforms run in reverse order
         // ssrTransformIf
         // ssrTransformFor
         // trackVForSlotScopes
diff --git a/crates/fervid_transform/src/template/transform_element.rs b/crates/fervid_transform/src/template/transform_element.rs
index 59e9b06f..ba81ad5d 100644
--- a/crates/fervid_transform/src/template/transform_element.rs
+++ b/crates/fervid_transform/src/template/transform_element.rs
@@ -334,8 +334,11 @@ fn resolve_component_setup_reference(
     // because codegen will handle the runtime resolution.
     match ctx.bindings_helper.components.get(tag_name) {
         Some(ComponentBinding::Resolved(resolved)) => return Some(resolved.to_owned()),
+        Some(ComponentBinding::RuntimeResolved(resolved, _)) => {
+            return Some(Box::new(Expr::Ident(resolved.as_ref().to_owned())));
+        }
         Some(ComponentBinding::Unresolved) => return None,
-        Some(_) => unreachable!("Only ComponentBinding::Resolved and Unresolved are expected"),
+        Some(ComponentBinding::Builtin(_)) => return None,
         None => {}
     }
 
@@ -1054,7 +1057,11 @@ fn merge_as_array(existing: &mut Property, incoming: Property) {
 }
 
 fn build_directive_args(_dir: RuntimeDirective, _ctx: &mut TransformSfcContext) -> ArrayLit {
-    todo!()
+    // TODO(new-pipeline): lower runtime directives once directive transforms are ported.
+    ArrayLit {
+        span: DUMMY_SP,
+        elems: vec![],
+    }
 }
 
 fn is_component_tag(tag: &StartingTag) -> bool {

From bc8915f08ffc546ab41cd012c1e1af0091341613 Mon Sep 17 00:00:00 2001
From: Marsel Shaikhin <phoenix.apps@proton.me>
Date: Wed, 17 Jun 2026 22:33:04 +0200
Subject: [PATCH 8/9] chore: re-add deleted comments

---
 .../src/template/ast_transform.rs                 | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/crates/fervid_transform/src/template/ast_transform.rs b/crates/fervid_transform/src/template/ast_transform.rs
index 873e052d..dd82fb56 100644
--- a/crates/fervid_transform/src/template/ast_transform.rs
+++ b/crates/fervid_transform/src/template/ast_transform.rs
@@ -369,6 +369,7 @@ impl TemplateVisitor<'_> {
 
     #[allow(unused)]
     fn visit_element_node_new(&mut self, element_node: &mut ElementNode) {
+        // `v-for` has special behavior with `ref`
         let parent_scope = self.current_scope;
         let old_ctx_scope = self.ctx.current_template_scope;
         let old_v_for_scope = self.v_for_scope;
@@ -377,13 +378,18 @@ impl TemplateVisitor<'_> {
 
         let mut scope_to_use = parent_scope;
 
+        // Check if there is a scoping directive.
+        // Find a `v-for` or `v-slot` directive when in ElementNode
+        // and collect their variables into the new template scope
         // TODO(new-pipeline): move this scope tracking into Vue-aligned node transforms
         // (`trackVForSlotScopes` / `trackSlotScopes`) once transform-local exit state exists.
         if let Some(ref mut directives) = element_node.starting_tag.directives {
             let v_for = directives.v_for.as_mut();
             let v_slot = directives.v_slot.as_mut();
 
+            // Create a new scope
             if v_for.is_some() || v_slot.is_some() {
+                // New scope will have ID equal to length
                 scope_to_use = self.ctx.bindings_helper.template_scopes.len() as u32;
                 self.ctx
                     .bindings_helper
@@ -394,21 +400,28 @@ impl TemplateVisitor<'_> {
                     });
             }
 
+            // Collect `v-for` bindings
             if let Some(v_for) = v_for {
                 self.v_for_scope = true;
                 self.ctx.directive_scopes.v_for += 1;
 
+                // Get the iterator variable and collect its variables
                 let scope = &mut self.ctx.bindings_helper.template_scopes[scope_to_use as usize];
                 collect_variables(&v_for.itervar, scope);
 
+                // Transform the iterable
                 let is_dynamic = self
                     .ctx
                     .bindings_helper
                     .transform_expr(&mut v_for.iterable, scope_to_use);
 
+                // Add patch flags
                 if !is_dynamic {
+                    // This is `64 /* STABLE_FRAGMENT */`
+                    // when iterable is non-dynamic (number, string) (`v-for="i in 3"`)
                     v_for.patch_flags |= PatchFlags::StableFragment;
                 } else {
+                    // Look for `key`. Fragment is either keyed or unkeyed.
                     let has_key = element_node
                         .starting_tag
                         .attributes
@@ -423,6 +436,7 @@ impl TemplateVisitor<'_> {
                 }
             }
 
+            // Collect `v-slot` bindings
             if let Some(VSlotDirective {
                 slot_name, value, ..
             }) = v_slot
@@ -435,6 +449,7 @@ impl TemplateVisitor<'_> {
                     collect_variables(v_slot_value, scope);
                 }
 
+                // Transform `v-slot` argument if it is dynamic
                 if let Some(StrOrExpr::Expr(expr)) = slot_name {
                     self.ctx.bindings_helper.transform_expr(expr, scope_to_use);
                 }

From f901be2906dc42abf88668bf3021b6dcd91b57b3 Mon Sep 17 00:00:00 2001
From: Marsel Shaikhin <phoenix.apps@proton.me>
Date: Wed, 17 Jun 2026 23:03:59 +0200
Subject: [PATCH 9/9] chore: split `optimize_children`

---
 .../src/template/ast_transform.rs             | 227 +-----------------
 .../fervid_transform/src/template/core/mod.rs |   2 +
 .../src/template/core/transform_if.rs         | 156 ++++++++++++
 .../src/template/core/transform_whitespace.rs |  54 +++++
 .../src/template/node_transforms.rs           |  46 +++-
 5 files changed, 268 insertions(+), 217 deletions(-)
 create mode 100644 crates/fervid_transform/src/template/core/transform_if.rs
 create mode 100644 crates/fervid_transform/src/template/core/transform_whitespace.rs

diff --git a/crates/fervid_transform/src/template/ast_transform.rs b/crates/fervid_transform/src/template/ast_transform.rs
index dd82fb56..bedd276b 100644
--- a/crates/fervid_transform/src/template/ast_transform.rs
+++ b/crates/fervid_transform/src/template/ast_transform.rs
@@ -4,9 +4,8 @@ use fervid_core::{
     VBindDirective,
 };
 use fervid_core::{
-    Conditional, ConditionalNodeSequence, ElementKind, ElementNode, Interpolation, Node,
-    PatchFlags, PatchHints, SfcTemplateBlock, StartingTag, StrOrExpr, VSlotDirective,
-    check_attribute_name, fervid_atom, is_from_default_slot,
+    ConditionalNodeSequence, ElementKind, ElementNode, Interpolation, Node, PatchFlags, PatchHints,
+    SfcTemplateBlock, StartingTag, StrOrExpr, VSlotDirective, check_attribute_name, fervid_atom,
 };
 use smallvec::SmallVec;
 #[cfg(not(feature = "new-pipeline"))]
@@ -46,7 +45,8 @@ pub fn transform_and_record_template(
     }
 
     // Optimize conditional sequences within template root
-    optimize_children(&mut template.roots, ElementKind::Element);
+    let node_transforms = ctx.node_transforms.clone();
+    node_transforms.pre_transform_children(ctx, &mut template.roots, ElementKind::Element);
 
     // Merge more than 1 child into a separate `<template>` element so that Fragment gets generated.
     // #11: Do this only when not all children are `TextNode`s.
@@ -95,214 +95,6 @@ pub fn transform_and_record_template(
     }
 }
 
-/// Optimizes the children by removing whitespace in between `ElementNode`s,
-/// as well as folding `v-if`/`v-else-if`/`v-else` sequences into a `ConditionalNodeSequence`
-fn optimize_children(children: &mut Vec<Node>, element_kind: ElementKind) {
-    let children_len = children.len();
-
-    // Discard children mask, limited to 128 children. 0 means to preserve the node, 1 to discard
-    let mut discard_mask: u128 = 0;
-
-    // Filter out whitespace text nodes at the beginning and end of ElementNode
-    match children.first() {
-        Some(Node::Text(v, _)) if v.trim().is_empty() => {
-            discard_mask |= 1 << 0;
-        }
-        _ => {}
-    }
-    match children.last() {
-        Some(Node::Text(v, _)) if v.trim().is_empty() => {
-            discard_mask |= 1 << (children_len - 1);
-        }
-        _ => {}
-    }
-
-    // For removing the middle whitespace text nodes, we need sliding windows of three nodes
-    for (index, window) in children.windows(3).enumerate() {
-        match window {
-            [
-                Node::Element(_) | Node::Comment(_, _),
-                Node::Text(middle, _),
-                Node::Element(_) | Node::Comment(_, _),
-            ] if middle.trim().is_empty() => {
-                discard_mask |= 1 << (index + 1);
-            }
-            _ => {}
-        }
-    }
-
-    // Retain based on discard_mask. If a discard bit at `index` is set to 1, the node will be dropped
-    let mut index = 0;
-    children.retain(|_| {
-        let should_retain = discard_mask & (1 << index) == 0;
-        index += 1;
-        should_retain
-    });
-
-    // For components, reorder children so that named slots come first
-    if matches!(element_kind, ElementKind::Component) && !children.is_empty() {
-        children.sort_by(|a, b| {
-            let a_is_from_default = is_from_default_slot(a);
-            let b_is_from_default = is_from_default_slot(b);
-
-            a_is_from_default.cmp(&b_is_from_default)
-        });
-    }
-
-    // Merge multiple v-if/else-if/else nodes into a ConditionalNodeSequence
-    if !children.is_empty() {
-        let mut seq: Option<ConditionalNodeSequence> = None;
-        let mut new_children = Vec::with_capacity(children.len());
-
-        /// Finishes the sequence. Pass `child` to also push the current child
-        macro_rules! finish_seq {
-            () => {
-                if let Some(seq) = seq.take() {
-                    new_children.push(Node::ConditionalSeq(seq))
-                }
-            };
-            ($child: expr) => {
-                finish_seq!();
-                new_children.push($child);
-            };
-        }
-
-        // To move out of &ElementNode to ElementNode and avoid "partially moved variable" error
-        macro_rules! deref_element {
-            ($child: ident) => {{
-                let Node::Element(child_element) = $child else {
-                    unreachable!()
-                };
-
-                optimize_v_if_plus_v_for(child_element)
-            }};
-        }
-
-        for mut child in children.drain(..) {
-            // Only process `ElementNode`s.
-            // Otherwise, when we have an `if` node, ignore `Comment`s and finish sequence.
-            let Node::Element(child_element) = &mut child else {
-                if let (Node::Comment(_, _), Some(_)) = (&child, seq.as_ref()) {
-                    continue;
-                } else {
-                    finish_seq!(child);
-                    continue;
-                }
-            };
-
-            let Some(ref mut directives) = child_element.starting_tag.directives else {
-                finish_seq!(child);
-                continue;
-            };
-
-            // Check if we have a `v-if`.
-            // The already existing sequence should end, and the new sequence should start.
-            if let Some(v_if) = directives.v_if.take() {
-                finish_seq!();
-                let span = child_element.span;
-                seq = Some(ConditionalNodeSequence {
-                    if_node: Box::new(Conditional {
-                        condition: *v_if,
-                        node: deref_element!(child),
-                    }),
-                    else_if_nodes: vec![],
-                    else_node: None,
-                    span,
-                });
-                continue;
-            }
-
-            // Check for `v-else-if`
-            if let Some(v_else_if) = directives.v_else_if.take() {
-                let Some(ref mut seq) = seq else {
-                    // This must be a warning, v-else-if without v-if
-                    finish_seq!(child);
-                    continue;
-                };
-
-                seq.span.hi = child_element.span.hi;
-                seq.else_if_nodes.push(Conditional {
-                    condition: *v_else_if,
-                    node: deref_element!(child),
-                });
-                continue;
-            }
-
-            // Check for `v-else`
-            if directives.v_else.is_some() {
-                let Some(ref mut cond_seq) = seq else {
-                    // This must be a warning, v-else without v-if
-                    finish_seq!(child);
-                    continue;
-                };
-
-                cond_seq.span.hi = child_element.span.hi;
-                cond_seq.else_node = Some(Box::new(deref_element!(child)));
-
-                // `else` node always finishes the sequence
-                finish_seq!();
-                continue;
-            }
-
-            // No directives, just push the child
-            finish_seq!(child);
-        }
-
-        finish_seq!();
-
-        *children = new_children;
-    }
-}
-
-// Optimize combined usage of conditional directives and `v-for`
-// https://github.com/vuejs/core/blob/438a74aad840183286fbdb488178510f37218a73/packages/compiler-core/src/transforms/vIf.ts#L260
-fn optimize_v_if_plus_v_for(mut parent: ElementNode) -> ElementNode {
-    // Check that work is needed
-    // This must be a `<template>` element with exactly one Element child
-    if parent.children.len() != 1 || parent.starting_tag.tag_name != "template" {
-        return parent;
-    }
-
-    let Some(Node::Element(child)) = parent.children.first_mut() else {
-        return parent;
-    };
-
-    // There must be at most one `v-for` for both parent and child
-    let parent_has_v_for = parent
-        .starting_tag
-        .directives
-        .as_ref()
-        .is_some_and(|d| d.v_for.is_some());
-    let child_has_v_for = child
-        .starting_tag
-        .directives
-        .as_ref()
-        .is_some_and(|d| d.v_for.is_some());
-    if parent_has_v_for && child_has_v_for {
-        return parent;
-    }
-
-    // Take parent's `v-for` and give it to the child
-    if parent_has_v_for {
-        let Some(mut parent_directives) = parent.starting_tag.directives.take() else {
-            unreachable!()
-        };
-
-        let child_directives = child
-            .starting_tag
-            .directives
-            .get_or_insert_with(Default::default);
-        child_directives.v_for = parent_directives.v_for.take();
-    }
-
-    // Take the child and return it instead
-    let Some(Node::Element(child)) = parent.children.pop() else {
-        unreachable!()
-    };
-
-    child
-}
-
 trait Visitor {
     fn visit_element_node(&mut self, element_node: &mut ElementNode);
     fn visit_conditional_node(&mut self, conditional_node: &mut ConditionalNodeSequence);
@@ -464,7 +256,11 @@ impl TemplateVisitor<'_> {
         let node_transforms = self.ctx.node_transforms.clone();
         node_transforms.pre_transform_element_node(self.ctx, element_node);
 
-        optimize_children(&mut element_node.children, element_node.tag_type);
+        node_transforms.pre_transform_children(
+            self.ctx,
+            &mut element_node.children,
+            element_node.tag_type,
+        );
 
         for child in element_node.children.iter_mut() {
             child.visit_mut_with(self);
@@ -808,7 +604,8 @@ impl TemplateVisitor<'_> {
         }
 
         // Merge conditional nodes and clean up whitespace
-        optimize_children(&mut element_node.children, element_kind);
+        let node_transforms = self.ctx.node_transforms.clone();
+        node_transforms.pre_transform_children(self.ctx, &mut element_node.children, element_kind);
 
         // Patch flag for HTML elements which only contain interpolation and text,
         // e.g. `<p>{{ msg }}</p>`.
@@ -900,7 +697,7 @@ impl VisitMut for Node {
 
 #[cfg(test)]
 mod tests {
-    use fervid_core::{ElementKind, Node, PatchHints, VForDirective, VueDirectives};
+    use fervid_core::{Conditional, ElementKind, Node, PatchHints, VForDirective, VueDirectives};
     use swc_core::common::DUMMY_SP;
 
     use crate::test_utils::{js, to_str};
diff --git a/crates/fervid_transform/src/template/core/mod.rs b/crates/fervid_transform/src/template/core/mod.rs
index b2db3698..0e22a715 100644
--- a/crates/fervid_transform/src/template/core/mod.rs
+++ b/crates/fervid_transform/src/template/core/mod.rs
@@ -1,3 +1,5 @@
+pub mod transform_if;
+pub mod transform_whitespace;
 pub mod v_bind;
 pub mod v_model;
 pub mod v_on;
diff --git a/crates/fervid_transform/src/template/core/transform_if.rs b/crates/fervid_transform/src/template/core/transform_if.rs
new file mode 100644
index 00000000..54038b7f
--- /dev/null
+++ b/crates/fervid_transform/src/template/core/transform_if.rs
@@ -0,0 +1,156 @@
+use fervid_core::{Conditional, ConditionalNodeSequence, ElementNode, Node};
+
+pub fn transform_if(children: &mut Vec<Node>) {
+    // Merge multiple v-if/else-if/else nodes into a ConditionalNodeSequence
+    if !children.is_empty() {
+        let mut seq: Option<ConditionalNodeSequence> = None;
+        let mut new_children = Vec::with_capacity(children.len());
+
+        /// Finishes the sequence. Pass `child` to also push the current child
+        macro_rules! finish_seq {
+            () => {
+                if let Some(seq) = seq.take() {
+                    new_children.push(Node::ConditionalSeq(seq))
+                }
+            };
+            ($child: expr) => {
+                finish_seq!();
+                new_children.push($child);
+            };
+        }
+
+        // To move out of &ElementNode to ElementNode and avoid "partially moved variable" error
+        macro_rules! deref_element {
+            ($child: ident) => {{
+                let Node::Element(child_element) = $child else {
+                    unreachable!()
+                };
+
+                optimize_v_if_plus_v_for(child_element)
+            }};
+        }
+
+        for mut child in children.drain(..) {
+            // Only process `ElementNode`s.
+            // Otherwise, when we have an `if` node, ignore `Comment`s and finish sequence.
+            let Node::Element(child_element) = &mut child else {
+                if let (Node::Comment(_, _), Some(_)) = (&child, seq.as_ref()) {
+                    continue;
+                } else {
+                    finish_seq!(child);
+                    continue;
+                }
+            };
+
+            let Some(ref mut directives) = child_element.starting_tag.directives else {
+                finish_seq!(child);
+                continue;
+            };
+
+            // Check if we have a `v-if`.
+            // The already existing sequence should end, and the new sequence should start.
+            if let Some(v_if) = directives.v_if.take() {
+                finish_seq!();
+                let span = child_element.span;
+                seq = Some(ConditionalNodeSequence {
+                    if_node: Box::new(Conditional {
+                        condition: *v_if,
+                        node: deref_element!(child),
+                    }),
+                    else_if_nodes: vec![],
+                    else_node: None,
+                    span,
+                });
+                continue;
+            }
+
+            // Check for `v-else-if`
+            if let Some(v_else_if) = directives.v_else_if.take() {
+                let Some(ref mut seq) = seq else {
+                    // This must be a warning, v-else-if without v-if
+                    finish_seq!(child);
+                    continue;
+                };
+
+                seq.span.hi = child_element.span.hi;
+                seq.else_if_nodes.push(Conditional {
+                    condition: *v_else_if,
+                    node: deref_element!(child),
+                });
+                continue;
+            }
+
+            // Check for `v-else`
+            if directives.v_else.is_some() {
+                let Some(ref mut cond_seq) = seq else {
+                    // This must be a warning, v-else without v-if
+                    finish_seq!(child);
+                    continue;
+                };
+
+                cond_seq.span.hi = child_element.span.hi;
+                cond_seq.else_node = Some(Box::new(deref_element!(child)));
+
+                // `else` node always finishes the sequence
+                finish_seq!();
+                continue;
+            }
+
+            // No directives, just push the child
+            finish_seq!(child);
+        }
+
+        finish_seq!();
+
+        *children = new_children;
+    }
+}
+
+// Optimize combined usage of conditional directives and `v-for`
+// https://github.com/vuejs/core/blob/438a74aad840183286fbdb488178510f37218a73/packages/compiler-core/src/transforms/vIf.ts#L260
+fn optimize_v_if_plus_v_for(mut parent: ElementNode) -> ElementNode {
+    // Check that work is needed
+    // This must be a `<template>` element with exactly one Element child
+    if parent.children.len() != 1 || parent.starting_tag.tag_name != "template" {
+        return parent;
+    }
+
+    let Some(Node::Element(child)) = parent.children.first_mut() else {
+        return parent;
+    };
+
+    // There must be at most one `v-for` for both parent and child
+    let parent_has_v_for = parent
+        .starting_tag
+        .directives
+        .as_ref()
+        .is_some_and(|d| d.v_for.is_some());
+    let child_has_v_for = child
+        .starting_tag
+        .directives
+        .as_ref()
+        .is_some_and(|d| d.v_for.is_some());
+    if parent_has_v_for && child_has_v_for {
+        return parent;
+    }
+
+    // Take parent's `v-for` and give it to the child
+    if parent_has_v_for {
+        let Some(mut parent_directives) = parent.starting_tag.directives.take() else {
+            unreachable!()
+        };
+
+        let child_directives = child
+            .starting_tag
+            .directives
+            .get_or_insert_with(Default::default);
+        child_directives.v_for = parent_directives.v_for.take();
+    }
+
+    // Take the child and return it instead
+    let Some(Node::Element(child)) = parent.children.pop() else {
+        unreachable!()
+    };
+
+    child
+}
diff --git a/crates/fervid_transform/src/template/core/transform_whitespace.rs b/crates/fervid_transform/src/template/core/transform_whitespace.rs
new file mode 100644
index 00000000..16664ce4
--- /dev/null
+++ b/crates/fervid_transform/src/template/core/transform_whitespace.rs
@@ -0,0 +1,54 @@
+use fervid_core::{ElementKind, Node, is_from_default_slot};
+
+pub fn transform_whitespace(children: &mut Vec<Node>, element_kind: ElementKind) {
+    let children_len = children.len();
+
+    // Discard children mask, limited to 128 children. 0 means to preserve the node, 1 to discard
+    let mut discard_mask: u128 = 0;
+
+    // Filter out whitespace text nodes at the beginning and end of ElementNode
+    match children.first() {
+        Some(Node::Text(v, _)) if v.trim().is_empty() => {
+            discard_mask |= 1 << 0;
+        }
+        _ => {}
+    }
+    match children.last() {
+        Some(Node::Text(v, _)) if v.trim().is_empty() => {
+            discard_mask |= 1 << (children_len - 1);
+        }
+        _ => {}
+    }
+
+    // For removing the middle whitespace text nodes, we need sliding windows of three nodes
+    for (index, window) in children.windows(3).enumerate() {
+        match window {
+            [
+                Node::Element(_) | Node::Comment(_, _),
+                Node::Text(middle, _),
+                Node::Element(_) | Node::Comment(_, _),
+            ] if middle.trim().is_empty() => {
+                discard_mask |= 1 << (index + 1);
+            }
+            _ => {}
+        }
+    }
+
+    // Retain based on discard_mask. If a discard bit at `index` is set to 1, the node will be dropped
+    let mut index = 0;
+    children.retain(|_| {
+        let should_retain = discard_mask & (1 << index) == 0;
+        index += 1;
+        should_retain
+    });
+
+    // For components, reorder children so that named slots come first
+    if matches!(element_kind, ElementKind::Component) && !children.is_empty() {
+        children.sort_by(|a, b| {
+            let a_is_from_default = is_from_default_slot(a);
+            let b_is_from_default = is_from_default_slot(b);
+
+            a_is_from_default.cmp(&b_is_from_default)
+        });
+    }
+}
diff --git a/crates/fervid_transform/src/template/node_transforms.rs b/crates/fervid_transform/src/template/node_transforms.rs
index fe888569..153d961a 100644
--- a/crates/fervid_transform/src/template/node_transforms.rs
+++ b/crates/fervid_transform/src/template/node_transforms.rs
@@ -1,12 +1,24 @@
 use std::fmt::Debug;
 
 use enum_dispatch::enum_dispatch;
-use fervid_core::ElementNode;
+use fervid_core::{ElementKind, ElementNode, Node};
 
-use crate::{TransformSfcContext, template::transform_element::post_transform_element_node};
+use crate::{
+    TransformSfcContext,
+    template::{
+        core::{transform_if::transform_if, transform_whitespace::transform_whitespace},
+        transform_element::post_transform_element_node,
+    },
+};
 
 #[enum_dispatch]
 pub trait NodeTransforms: Debug {
+    fn pre_transform_children(
+        &self,
+        _ctx: &mut TransformSfcContext,
+        children: &mut Vec<Node>,
+        element_kind: ElementKind,
+    );
     fn pre_transform_element_node(&self, ctx: &mut TransformSfcContext, node: &mut ElementNode);
     fn post_transform_element_node(&self, ctx: &mut TransformSfcContext, node: &mut ElementNode);
 }
@@ -42,6 +54,18 @@ impl Default for NodeTransformsProvider {
 
 // Base transforms are provided as default trait implementations
 impl NodeTransforms for BaseNodeTransform {
+    fn pre_transform_children(
+        &self,
+        _ctx: &mut TransformSfcContext,
+        children: &mut Vec<Node>,
+        element_kind: ElementKind,
+    ) {
+        // Whitespace handling happens during parser/transform normalization in Vue.
+        transform_whitespace(children, element_kind);
+        // transformIf,
+        transform_if(children);
+    }
+
     fn pre_transform_element_node(&self, ctx: &mut TransformSfcContext, node: &mut ElementNode) {
         // transformOnce,
         pre_transform_once(ctx, node);
@@ -123,6 +147,15 @@ fn pre_transform_text(_ctx: &mut TransformSfcContext, _node: &mut ElementNode) {
 fn post_transform_text(_ctx: &mut TransformSfcContext, _node: &mut ElementNode) {}
 
 impl NodeTransforms for DomNodeTransform {
+    fn pre_transform_children(
+        &self,
+        ctx: &mut TransformSfcContext,
+        children: &mut Vec<Node>,
+        element_kind: ElementKind,
+    ) {
+        BaseNodeTransform.pre_transform_children(ctx, children, element_kind);
+    }
+
     fn pre_transform_element_node(&self, ctx: &mut TransformSfcContext, node: &mut ElementNode) {
         BaseNodeTransform.pre_transform_element_node(ctx, node);
         // Core node transforms;
@@ -144,6 +177,15 @@ impl NodeTransforms for DomNodeTransform {
 }
 
 impl NodeTransforms for SsrNodeTransform {
+    fn pre_transform_children(
+        &self,
+        ctx: &mut TransformSfcContext,
+        children: &mut Vec<Node>,
+        element_kind: ElementKind,
+    ) {
+        BaseNodeTransform.pre_transform_children(ctx, children, element_kind);
+    }
+
     fn pre_transform_element_node(&self, _ctx: &mut TransformSfcContext, _node: &mut ElementNode) {
         // ssrTransformIf
         // ssrTransformFor