onelaraveljs 1.0.0 → 1.1.3

package/scripts/compiler/fetch_parser.py

@@ -0,0 +1,49 @@
+"""
+Parser cho @fetch directive
+"""
+
+from php_converter import convert_php_to_js, convert_php_array_to_json
+
+def parse_fetch_directive(fetch_content):
+    """Parse @fetch directive content and return fetch configuration"""
+    fetch_content = fetch_content.strip()
+    
+    # Default config
+    config = {
+        'url': '',
+        'method': 'GET',
+        'data': {},
+        'headers': {}
+    }
+    
+    # Check if it's a simple string (just URL)
+    if fetch_content.startswith("'") and fetch_content.endswith("'"):
+        config['url'] = f"`{fetch_content[1:-1]}`"
+        return config
+    elif fetch_content.startswith('"') and fetch_content.endswith('"'):
+        config['url'] = f"`{fetch_content[1:-1]}`"
+        return config
+    
+    # Check if it's a function call
+    if '(' in fetch_content and ')' in fetch_content and not fetch_content.startswith('['):
+        js_url = convert_php_to_js(fetch_content)
+        config['url'] = f"`${{{js_url}}}`"
+        return config
+    
+    # Check if it's an array configuration
+    if fetch_content.startswith('[') and fetch_content.endswith(']'):
+        # [Implementation chi tiết cho array parsing]
+        # ... (giữ nguyên logic từ file gốc)
+        pass
+    
+    return config
+
+def parse_array_value(array_expr):
+    """Parse array expressions and convert to JavaScript objects"""
+    if not array_expr.startswith('[') or not array_expr.endswith(']'):
+        return {}
+    
+    # [Implementation chi tiết]
+    # ... (giữ nguyên logic từ file gốc)
+    
+    return {}

package/scripts/compiler/function_generators.py

@@ -0,0 +1,310 @@
+"""
+Generators cho các functions (render, prerender, init, etc.)
+"""
+
+from config import JS_FUNCTION_PREFIX, HTML_ATTR_PREFIX
+import re
+
+class FunctionGenerators:
+    def __init__(self):
+        pass
+    
+    def generate_render_function(self, template_content, vars_declaration, extended_view, extends_expression, extends_data, sections_info=None, has_prerender=False, setup_script="", directives_line="", outer_before="", outer_after=""):
+        """Generate render function with support for outer content (junk content)"""
+        # NOTE: vars_line and directives_line are now handled in wrapper scope
+        # No need to call updateVariableData here
+        vars_line = ""  # Don't generate vars line anymore
+        update_call_line = ""  # Don't call updateVariableData
+        view_id_line = "    \n"
+        
+        # Generate junk content blocks with try-catch for before and after separately
+        junk_content_before = ""
+        junk_content_after = ""
+        junk_var_line = ""
+        
+        if outer_before and outer_before.strip():
+            junk_var_line = "    let __junkContent__ = '';\n"
+            junk_content_before = f"""    try {{
+        __junkContent__ = `{outer_before}`;
+    }} catch(e) {{
+        // Ignore junk content errors
+    }}
+"""
+        
+        if outer_after and outer_after.strip():
+            if not junk_var_line:
+                junk_var_line = "    let __junkContent__ = '';\n"
+            junk_content_after = f"""    try {{
+        __junkContent__ = `{outer_after}`;
+    }} catch(e) {{
+        // Ignore junk content errors
+    }}
+"""
+        
+        # Filter out sections that are already in prerender
+        # Only filter if hasPrerender is True (meaning some sections are in prerender)
+        filtered_template = template_content
+        if sections_info and has_prerender:
+            for section in sections_info:
+                section_name = section['name']
+                use_vars = section.get('useVars', False)
+                preloader = section.get('preloader', False)
+                section_type = section.get('type', 'long')
+                
+                # Remove sections that are already in prerender
+                # Only remove static sections (not using vars) that are in prerender
+                if not use_vars:
+                    if section_type == 'short':
+                        pattern = fr'\$\{{{JS_FUNCTION_PREFIX}\.section\([\'"]{re.escape(section_name)}[\'"],\s*[^)]+\)\}}'
+                        filtered_template = re.sub(pattern, '', filtered_template)
+                    else:  # long section
+                        pattern = fr'\$\{{{JS_FUNCTION_PREFIX}\.section\([\'"]{re.escape(section_name)}[\'"],\s*\`[^\`]*\`,\s*[\'"]html[\'"]\)\}}'
+                        filtered_template = re.sub(pattern, '', filtered_template, flags=re.DOTALL)
+                # If section uses vars, keep it in render (dynamic sections)
+        
+        # Không cần escape template content vì đã được xử lý đúng cách
+        filtered_template_escaped = filtered_template
+        
+        # Replace updateStateByKey('stateKey', value) with update$stateKey(value)
+        if directives_line and 'updateStateByKey' in directives_line:
+            # Extract all state keys from directives_line
+            state_key_matches = re.findall(r"updateStateByKey\('([^']+)'", directives_line)
+            for state_key in state_key_matches:
+                # Replace updateStateByKey('stateKey', value) with update$stateKey(value)
+                pattern = rf"updateStateByKey\('{re.escape(state_key)}',\s*([^)]+)\)"
+                replacement = rf"update${state_key}(\1)"
+                filtered_template_escaped = re.sub(pattern, replacement, filtered_template_escaped)
+        
+        # Thêm setup script nhưng loại bỏ useState declarations nếu đã có cơ chế register & update
+        setup_line = ""
+        if setup_script:
+            # Kiểm tra xem có cơ chế register & update không (có updateStateByKey)
+            has_register_update = directives_line and 'updateStateByKey' in directives_line
+            
+            if has_register_update:
+                # Nếu có cơ chế register & update, loại bỏ useState declarations từ setup script
+                # Chỉ loại bỏ những useState declarations có state key đã được register
+                filtered_setup = setup_script
+                
+                # Tìm tất cả state keys đã được register
+                state_keys = []
+                if directives_line:
+                    # Tìm tất cả updateStateByKey('stateKey', value) trong directives_line
+                    matches = re.findall(r"updateStateByKey\('([^']+)'", directives_line)
+                    state_keys = matches
+                
+                # Loại bỏ useState declarations có state key đã được register
+                for state_key in state_keys:
+                    # Tìm và loại bỏ const [stateKey, setStateKey] = useState(...);
+                    pattern = rf'const\s+\[{re.escape(state_key)},\s*[^]]+\]\s*=\s*useState\([^)]+\);'
+                    filtered_setup = re.sub(pattern, '', filtered_setup)
+                
+                # Loại bỏ dòng trống nếu có
+                filtered_setup = re.sub(r'^\s*\n', '', filtered_setup)
+                
+                setup_line = "    " + filtered_setup + "\n" if filtered_setup.strip() else ""
+            else:
+                # Nếu không có cơ chế register & update, giữ nguyên setup script
+                setup_line = "    " + setup_script + "\n"
+        
+        # Replace App.View.section with this.__section in render function (for short sections)
+        filtered_template_escaped = re.sub(r'App\.View\.section\(', 'this.__section(', filtered_template_escaped)
+        # Replace App.View.text with this.__text in render function
+        filtered_template_escaped = re.sub(r'App\.View\.text\(', 'this.__text(', filtered_template_escaped)
+        # Replace App.View.foreach with this.__foreach in render function
+        filtered_template_escaped = re.sub(r'App\.View\.foreach\(', 'this.__foreach(', filtered_template_escaped)
+        # Add __ prefix to methods that don't have it yet
+        filtered_template_escaped = re.sub(r'this\.subscribeBlock\(', 'this.__subscribeBlock(', filtered_template_escaped)
+        filtered_template_escaped = re.sub(r'this\.useBlock\(', 'this.__useBlock(', filtered_template_escaped)
+        filtered_template_escaped = re.sub(r'this\.showError\(', 'this.__showError(', filtered_template_escaped)
+        
+        if extended_view:
+            data_param = ", " + extends_data if extends_data else ""
+            return f"""function() {{
+            {update_call_line}{view_id_line}{setup_line}    let __outputRenderedContent__ = '';
+{junk_var_line}{junk_content_before}            try {{
+                __outputRenderedContent__ = `{filtered_template_escaped}`;
+            }} catch(e) {{
+                __outputRenderedContent__ = this.__showError(e.message);
+                console.warn(e);
+            }}
+{junk_content_after}            return this.__extends('{extended_view}'{data_param});
+            }}"""
+        elif extends_expression:
+            data_param = ", " + extends_data if extends_data else ""
+            return f"""function() {{
+            {update_call_line}{view_id_line}{setup_line}    let __outputRenderedContent__ = '';
+{junk_var_line}{junk_content_before}            try {{
+                __outputRenderedContent__ = `{filtered_template_escaped}`;
+            }} catch(e) {{
+                __outputRenderedContent__ = this.__showError(e.message);
+                console.warn(e);
+            }}
+{junk_content_after}            this.superViewPath = {extends_expression};
+            return this.__extends(this.superViewPath{data_param});
+            }}"""
+        else:
+            return f"""function() {{
+            {update_call_line}{view_id_line}{setup_line}    let __outputRenderedContent__ = '';
+{junk_var_line}{junk_content_before}            try {{
+                __outputRenderedContent__ = `{filtered_template_escaped}`;
+            }} catch(e) {{
+                __outputRenderedContent__ = this.__showError(e.message);
+                console.warn(e);
+            }}
+{junk_content_after}            return __outputRenderedContent__;
+            }}"""
+    
+    def generate_load_server_data_function(self, vars_declaration="", setup_script="", directives_line=""):
+        """Generate loadServerData function - empty function (logic removed)"""
+        return "function(__$spaViewData$__ = {}) {}"
+    
+    def generate_prerender_function(self, has_await, has_fetch, vars_line, view_id_line, template_content, extended_view=None, extends_expression=None, extends_data=None, sections_info=None, conditional_content=None, has_prerender=True):
+        """Generate prerender function"""
+        # If has_prerender is False, always return null
+        if not has_prerender:
+            return "function() {\n    return null;\n}"
+        
+        if not has_await and not has_fetch:
+            return "function() {\n    return null;\n}"
+        
+        # Check if any section uses variables from @vars
+        has_sections_with_vars = any(section.get('useVars', False) for section in (sections_info or []))
+        
+        # Check if there are conditional structures with vars
+        has_conditional_with_vars = conditional_content and conditional_content.get('has_conditional_with_vars', False)
+        
+        # Check if we need preloader
+        needs_preloader = (has_sections_with_vars or has_conditional_with_vars) and (has_await or has_fetch)
+        
+        # Generate prerender content based on sections
+        prerender_sections = []
+        
+        for section in (sections_info or []):
+            section_name = section['name']
+            use_vars = section.get('useVars', False)
+            preloader = section.get('preloader', False)
+            section_type = section.get('type', 'long')
+            
+            if not use_vars:
+                # Static sections (không dùng biến) - render trực tiếp trong prerender
+                # Không cần đợi fetch/await vì không dùng dynamic data
+                if section_type == 'short':
+                    # Try both patterns: App.View.section and this.__section
+                    section_match = re.search(fr'{JS_FUNCTION_PREFIX}\.section\([\'"]{re.escape(section_name)}[\'"],\s*([^)]+),\s*[\'"]string[\'"]\)', template_content)
+                    if not section_match:
+                        section_match = re.search(fr'this\.__section\([\'"]{re.escape(section_name)}[\'"],\s*([^)]+),\s*[\'"]string[\'"]\)', template_content)
+                    if section_match:
+                        section_content = section_match.group(1)
+                        # Output using instance method for consistency
+                        prerender_sections.append(f"${{this.__section('{section_name}', {section_content}, 'string')}}")
+                else:  # long section
+                    # Try both patterns: App.View.section and this.__section
+                    section_match = re.search(fr'{JS_FUNCTION_PREFIX}\.section\([\'"]{re.escape(section_name)}[\'"],\s*`([^`]+)`,\s*[\'"]html[\'"]\)', template_content, re.DOTALL)
+                    if not section_match:
+                        section_match = re.search(fr'this\.__section\([\'"]{re.escape(section_name)}[\'"],\s*`([^`]+)`,\s*[\'"]html[\'"]\)', template_content, re.DOTALL)
+                    if section_match:
+                        section_content = section_match.group(1)
+                        # Output using instance method for consistency
+                        prerender_sections.append(f"${{this.__section('{section_name}', `{section_content}`, 'html')}}")
+            elif preloader and section_type == 'long':
+                # Dynamic LONG sections (dùng biến + có fetch/await) - render preloader version
+                # Short sections với biến không cần preloader (metadata như title, description)
+                # Check if it's a block or section
+                is_block = f"this.__block('{section_name}'" in template_content
+                
+                # Use instance methods for consistency
+                if is_block:
+                    prerender_sections.append(f"${{this.__block('{section_name}', {{}}, `<div class=\"{HTML_ATTR_PREFIX}preloader\" ref=\"${{__VIEW_ID__}}\" data-view-name=\"${{__VIEW_PATH__}}\">${{this.__text('loading')}}</div>`)}}\n")
+                else:
+                    prerender_sections.append(f"${{this.__section('{section_name}', `<div class=\"{HTML_ATTR_PREFIX}preloader\" ref=\"${{__VIEW_ID__}}\" data-view-name=\"${{__VIEW_PATH__}}\">${{this.__text('loading')}}</div>`, 'html')}}")
+        
+        if prerender_sections:
+            prerender_content = f"`\n" + '\n'.join(prerender_sections) + "\n`"
+        elif has_conditional_with_vars:
+            # Has conditional structures with vars but no sections to prerender
+            # Just show general preloader - use instance methods
+            preloader_html = f'<div class="{HTML_ATTR_PREFIX}preloader" ref="${{__VIEW_ID__}}" data-view-name="${{__VIEW_PATH__}}">${{this.__text(\'loading\')}}</div>'
+            prerender_content = f"`{preloader_html}`"
+        else:
+            # No sections to prerender, use general preloader - use instance methods
+            preloader_html = f'<div class="{HTML_ATTR_PREFIX}preloader" ref="${{__VIEW_ID__}}" data-view-name="${{__VIEW_PATH__}}">${{this.__text(\'loading\')}}</div>'
+            prerender_content = f"`{preloader_html}`"
+        
+        if extended_view:
+            data_param = ", " + extends_data if extends_data else ""
+            return """function() {
+""" + vars_line + view_id_line + """    let __outputRenderedContent__ = '';
+            try {
+                __outputRenderedContent__ = """ + prerender_content + """;
+            } catch(e) {
+                __outputRenderedContent__ = this.__showError(e.message);
+                console.warn(e);
+            }
+            return this.__extends('""" + extended_view + """'""" + data_param + """);
+            }"""
+        elif extends_expression:
+            data_param = ", " + extends_data if extends_data else ""
+            return """function() {
+""" + vars_line + view_id_line + """    let __outputRenderedContent__ = '';
+            try {
+                __outputRenderedContent__ = """ + prerender_content + """;
+            } catch(e) {
+                __outputRenderedContent__ = this.__showError(e.message);
+                console.warn(e);
+            }
+            this.superViewPath = """ + extends_expression + """;
+            return this.__extends(this.superViewPath""" + data_param + """);
+            }"""
+        else:
+            return """function() {
+""" + vars_line + view_id_line + """    let __outputRenderedContent__ = '';
+            try {
+                __outputRenderedContent__ = """ + prerender_content + """;
+            } catch(e) {
+                __outputRenderedContent__ = this.__showError(e.message);
+                console.warn(e);
+            }
+            return __outputRenderedContent__;
+            }"""
+    
+    def _convert_all_to_scan(self, template_content):
+        """Convert all methods to Scan versions"""
+        processed_template = template_content
+        
+        # Replace all methods with Scan versions
+        processed_template = re.sub(r'this\.addBlock\(', 'this.__blockScan(', processed_template)
+        processed_template = re.sub(r'this\.renderFollowingBlock\(', 'this.__followScan(', processed_template)
+        processed_template = re.sub(r'this\.__include\(', 'this.__includeScan(', processed_template)
+        processed_template = re.sub(r'this\.__includeif\(', 'this.__includeifScan(', processed_template)
+        processed_template = re.sub(r'this\.__includewhen\(', 'this.__includewhenScan(', processed_template)
+        processed_template = re.sub(r'this\.__extends\(', 'this.__extendsScan(', processed_template)
+        processed_template = re.sub(r'this\.__showError\(', 'this.__showErrorScan(', processed_template)
+        # Replace App.View.section with this.__sectionScan (for short sections)
+        processed_template = re.sub(r'App\.View\.section\(', 'this.__sectionScan(', processed_template)
+        # Replace this.__section with this.__sectionScan (for long sections)
+        processed_template = re.sub(r'this\.__section\(', 'this.__sectionScan(', processed_template)
+        # Replace App.View.text with this.__textScan
+        processed_template = re.sub(r'App\.View\.text\(', 'this.__textScan(', processed_template)
+        # Replace this.__text with this.__textScan
+        processed_template = re.sub(r'this\.__text\(', 'this.__textScan(', processed_template)
+        # Replace App.View.foreach with this.__foreachScan
+        processed_template = re.sub(r'App\.View\.foreach\(', 'this.__foreachScan(', processed_template)
+        # Replace this.__foreach with this.__foreachScan
+        processed_template = re.sub(r'this\.__foreach\(', 'this.__foreachScan(', processed_template)
+        processed_template = re.sub(r'this\.subscribe\(', 'this.__subscribeScan(', processed_template)
+        processed_template = re.sub(r'this\.__subscribe\(', 'this.__subscribeScan(', processed_template)
+        processed_template = re.sub(r'this\.__follow\(', 'this.__followScan(', processed_template)
+        processed_template = re.sub(r'this\.__block\(', 'this.__blockScan(', processed_template)
+        # Replace block-related methods (both with and without __ prefix)
+        processed_template = re.sub(r'this\.subscribeBlock\(', 'this.__subscribeBlockScan(', processed_template)
+        processed_template = re.sub(r'this\.__subscribeBlock\(', 'this.__subscribeBlockScan(', processed_template)
+        processed_template = re.sub(r'this\.useBlock\(', 'this.__useBlockScan(', processed_template)
+        processed_template = re.sub(r'this\.__useBlock\(', 'this.__useBlockScan(', processed_template)
+        # Replace event-related methods
+        processed_template = re.sub(r'this\.__addEventConfig\(', 'this.__addEventConfigScan(', processed_template)
+        processed_template = re.sub(r'this\.__addEventQuickHandle\(', 'this.__addEventQuickHandleScan(', processed_template)
+        # Replace App.View.renderView with App.View.scanRenderedView
+        processed_template = re.sub(r'App\.View\.renderView\(', 'App.View.scanRenderedView(', processed_template)
+        
+        return processed_template

package/scripts/compiler/loop_handlers.py

@@ -0,0 +1,224 @@
+"""
+Handlers cho các loop directives (@foreach, @for, etc.)
+"""
+
+from config import JS_FUNCTION_PREFIX
+from php_converter import php_to_js
+from utils import extract_balanced_parentheses
+import re
+
+class LoopHandlers:
+    def __init__(self, state_variables=None, processor=None):
+        self.state_variables = state_variables or set()
+        self.processor = processor
+    
+    def _extract_variables(self, expr):
+        """Extract variable names from expression, excluding method names after dot notation"""
+        variables = set()
+        
+        # Remove method calls after dots (e.g., App.Helper.count -> remove count)
+        # Replace .methodName( with .PLACEHOLDER( to avoid extracting method names
+        expr_cleaned = re.sub(r'\.([a-zA-Z_][a-zA-Z0-9_]*)\s*\(', '.METHODCALL(', expr)
+        
+        var_pattern = r'\b([a-zA-Z_][a-zA-Z0-9_]*)\b'
+        matches = re.findall(var_pattern, expr_cleaned)
+        for var_name in matches:
+            # Exclude JS keywords, common functions, and placeholder
+            if var_name not in ['if', 'else', 'return', 'function', 'const', 'let', 'var', 'true', 'false', 'null', 'undefined', 'Array', 'Object', 'String', 'Number', 'METHODCALL', 'App', 'View', 'Helper']:
+                variables.add(var_name)
+        return variables
+    
+    def process_foreach_directive(self, line, stack, output, is_attribute_context=False):
+        """Process @foreach directive
+        
+        Args:
+            is_attribute_context: True if directive is in tag attributes
+                                 False if directive is in block/content
+        """
+        foreach_pos = line.find('(')
+        if foreach_pos != -1:
+            foreach_content, end_pos = extract_balanced_parentheses(line, foreach_pos)
+            if foreach_content is not None:
+                as_match = re.match(r'\s*(.*?)\s+as\s+\$?(\w+)(\s*=>\s*\$?(\w+))?\s*$', foreach_content)
+                if as_match:
+                    array_expr_php = as_match.group(1)
+                    array_expr = php_to_js(array_expr_php)
+                    first_var = as_match.group(2)
+                    
+                    if as_match.group(3):  # Has key => value
+                        key_var = first_var
+                        value_var = as_match.group(4)
+                        callback = f'({value_var}, {key_var}, __loopIndex, __loop) => `'
+                    else:  # Only value
+                        value_var = first_var
+                        callback = f'({value_var}, __loopKey, __loopIndex, __loop) => `'
+                    
+                    # Extract variables from array expression
+                    variables = self._extract_variables(array_expr)
+                    state_vars_used = variables & self.state_variables
+                    watch_keys = list(state_vars_used) if state_vars_used else []
+                    
+                    # Use this.__foreach for instance method
+                    foreach_call = f"this.__foreach({array_expr}, {callback}"
+                    
+                    # Only wrap with __watch for block-level directives (not attributes)
+                    if is_attribute_context:
+                        # Attribute directive - no watch wrapping
+                        result = f"${{{foreach_call}"
+                    else:
+                        # Block directive - wrap with __watch
+                        if self.processor:
+                            self.processor.watch_counter += 1
+                            watch_id = f"`${{__VIEW_ID__}}-watch-{self.processor.watch_counter}`"
+                        else:
+                            watch_id = "`${__VIEW_ID__}-watch-0`"
+                        result = f"${{this.__watch({watch_id}, {watch_keys}, () => {foreach_call}"
+                    
+                    output.append(result)
+                    stack.append(('foreach', len(output), is_attribute_context))
+                    return True
+        return False
+    
+    def process_endforeach_directive(self, stack, output):
+        """Process @endforeach directive"""
+        if stack and stack[-1][0] == 'foreach':
+            is_attribute = stack[-1][2] if len(stack[-1]) > 2 else False
+            stack.pop()
+            if is_attribute:
+                # Attribute directive - no watch wrapper
+                output.append('`)}')
+            else:
+                # Block directive - close watch wrapper
+                output.append('`))}') 
+        return True
+    
+    def process_for_directive(self, line, stack, output, is_attribute_context=False):
+        """Process @for directive
+        
+        Args:
+            is_attribute_context: True if directive is in tag attributes
+                                 False if directive is in block/content
+        """
+        for_pos = line.find('(')
+        if for_pos != -1:
+            for_content, end_pos = extract_balanced_parentheses(line, for_pos)
+            if for_content is not None:
+                # Parse @for($i = 0; $i < 10; $i++)
+                for_match = re.match(r'\s*\$?(\w+)\s*=\s*(.*?);\s*\$?\1\s*([<>=!]+)\s*(.*?);\s*\$?\1\s*\+\+\s*$', for_content)
+                if for_match:
+                    var_name = for_match.group(1)
+                    start_value_php = for_match.group(2)
+                    start_value = php_to_js(start_value_php)
+                    operator = for_match.group(3)
+                    end_value_php = for_match.group(4)
+                    end_value = php_to_js(end_value_php)
+                    
+                    # Extract variables from start and end values
+                    variables = self._extract_variables(start_value) | self._extract_variables(end_value)
+                    state_vars_used = variables & self.state_variables
+                    watch_keys = list(state_vars_used) if state_vars_used else []
+                    
+                    # Generate for loop with __for() wrapper
+                    for_logic = f"let __forOutputContent__ = ``;\nfor (let {var_name} = {start_value}; {var_name} {operator} {end_value}; {var_name}++) {{__loop.setCurrentTimes({var_name});"
+                    
+                    # Wrap in __for() with __loop parameter
+                    for_call = f"this.__for('increment', {start_value}, {end_value}, (__loop) => {{\n{for_logic}"
+                    
+                    # Only wrap with __watch for block-level directives (not attributes)
+                    has_watch = not is_attribute_context and watch_keys
+                    if is_attribute_context or not watch_keys:
+                        result = f"${{{for_call}"
+                    else:
+                        if self.processor:
+                            self.processor.watch_counter += 1
+                            watch_id = f"`${{__VIEW_ID__}}-watch-{self.processor.watch_counter}`"
+                        else:
+                            watch_id = "`${__VIEW_ID__}-watch-0`"
+                        result = f"${{this.__watch({watch_id}, {watch_keys}, () => {{ return {for_call}"
+                    
+                    output.append(result)
+                    stack.append(('for', len(output), is_attribute_context, has_watch))
+                    return True
+        return False
+    
+    def process_endfor_directive(self, stack, output):
+        """Process @endfor directive"""
+        if stack and stack[-1][0] == 'for':
+            is_attribute = stack[-1][2] if len(stack[-1]) > 2 else False
+            has_watch = stack[-1][3] if len(stack[-1]) > 3 else False
+            stack.pop()
+            
+            if is_attribute:
+                # Attribute directive - close __for
+                result = "\n}\nreturn __forOutputContent__;\n})\n}"
+            elif has_watch:
+                # Block directive with watch - close __for, watch callback, and watch wrapper
+                # Pattern:
+                # } closes for loop body
+                # return __forOutputContent__;
+                # }) closes for arrow body and params
+                # ); closes __for call and ends return statement
+                # } closes watch callback arrow body
+                # ) closes __watch call
+                # } closes ${}
+                result = "\n}\nreturn __forOutputContent__;\n})\n})}}"
+            else:
+                # Block directive without watch - close __for only
+                result = "\n}\nreturn __forOutputContent__;\n})\n}"
+            
+            output.append(result)
+        return True
+    
+    def process_while_directive(self, line, stack, output, is_attribute_context=False):
+        """Process @while directive
+        
+        Args:
+            is_attribute_context: True if directive is in tag attributes
+                                 False if directive is in block/content
+        """
+        while_pos = line.find('(')
+        if while_pos != -1:
+            while_content, end_pos = extract_balanced_parentheses(line, while_pos)
+            if while_content is not None:
+                condition_php = while_content
+                condition = php_to_js(condition_php)
+                
+                # Extract variables from condition
+                variables = self._extract_variables(condition)
+                state_vars_used = variables & self.state_variables
+                watch_keys = list(state_vars_used) if state_vars_used else []
+                
+                # Generate while loop
+                while_logic = f"let __whileOutputContent__ = ``;\nwhile({condition}) {{"
+                
+                # Only wrap with __watch for block-level directives (not attributes)
+                if is_attribute_context or not watch_keys:
+                    result = f"${{this.__execute(() => {{\n{while_logic}"
+                else:
+                    if self.processor:
+                        self.processor.watch_counter += 1
+                        watch_id = f"`${{__VIEW_ID__}}-watch-{self.processor.watch_counter}`"
+                    else:
+                        watch_id = "`${__VIEW_ID__}-watch-0`"
+                    result = f"${{this.__watch({watch_id}, {watch_keys}, () => {{\n{while_logic}"
+                
+                output.append(result)
+                stack.append(('while', len(output), is_attribute_context))
+                return True
+        return False
+    
+    def process_endwhile_directive(self, stack, output):
+        """Process @endwhile directive"""
+        if stack and stack[-1][0] == 'while':
+            is_attribute = stack[-1][2] if len(stack[-1]) > 2 else False
+            stack.pop()
+            
+            if is_attribute:
+                # Attribute directive - close IIFE only
+                result = "\n}\nreturn __whileOutputContent__;\n})}"
+            else:
+                # Block directive - close watch wrapper
+                result = "\n}\nreturn __whileOutputContent__;\n})}"
+            
+            output.append(result)
+        return True