Merge pull request #1188 from lightpanda-io/script-load-order

add a test for script load order

src/browser/ScriptManager.zig

@@ -228,9 +228,9 @@ pub fn addFromElement(self: *ScriptManager, element: *parser.Element, comptime c
     if (source == .@"inline") {
         // if we're here, it means that we have pending scripts (i.e. self.scripts
         // is not empty). Because the script is inline, it's complete/ready, but
-        // we need to process them in order
+        // we need to process them in order.
         pending_script.complete = true;
-        self.scripts.append(&pending_script.node);
+        pending_script.getList().append(&pending_script.node);
         return;
     } else {
         log.debug(.http, "script queue", .{
@@ -643,6 +643,18 @@ pub const PendingScript = struct {
         // if async isn't known, it'll fallback to defer.
 
         const script = &self.script;
+
+        // Module scripts are deferred by default.
+        // https://v8.dev/features/modules#defer
+        if (script.kind == .module) {
+            return &self.manager.deferreds;
+        }
+
+        // Script is not a module but inline, we ignore async/defer properties.
+        if (script.source == .@"inline") {
+            return &self.manager.scripts;
+        }
+
         if (script.is_async) {
             return &self.manager.asyncs;
         }

src/browser/events/event.zig

@@ -39,7 +39,7 @@ const ErrorEvent = @import("../html/error_event.zig").ErrorEvent;
 const MessageEvent = @import("../dom/MessageChannel.zig").MessageEvent;
 const PopStateEvent = @import("../html/History.zig").PopStateEvent;
 const CompositionEvent = @import("composition_event.zig").CompositionEvent;
-const NavigationCurrentEntryChangeEvent = @import("../navigation/navigation.zig").NavigationCurrentEntryChangeEvent;
+const NavigationCurrentEntryChangeEvent = @import("../navigation/root.zig").NavigationCurrentEntryChangeEvent;
 
 // Event interfaces
 pub const Interfaces = .{

src/browser/html/elements.zig

@@ -1350,6 +1350,7 @@ test "Browser: HTML.HtmlScriptElement" {
     try testing.htmlRunner("html/script/import.html");
     try testing.htmlRunner("html/script/dynamic_import.html");
     try testing.htmlRunner("html/script/importmap.html");
+    try testing.htmlRunner("html/script/order.html");
 }
 
 test "Browser: HTML.HtmlSlotElement" {

src/browser/js/types.zig

@@ -16,7 +16,7 @@ const Interfaces = generate.Tuple(.{
     @import("../storage/storage.zig").Interfaces,
     @import("../url/url.zig").Interfaces,
     @import("../xhr/xhr.zig").Interfaces,
-    @import("../navigation/navigation.zig").Interfaces,
+    @import("../navigation/root.zig").Interfaces,
     @import("../xhr/form_data.zig").Interfaces,
     @import("../xhr/File.zig"),
     @import("../xmlserializer/xmlserializer.zig").Interfaces,

src/browser/navigation/Navigation.zig

@@ -32,12 +32,12 @@ const parser = @import("../netsurf.zig");
 // https://developer.mozilla.org/en-US/docs/Web/API/Navigation
 const Navigation = @This();
 
-const NavigationKind = @import("navigation.zig").NavigationKind;
+const NavigationKind = @import("root.zig").NavigationKind;
-const NavigationHistoryEntry = @import("navigation.zig").NavigationHistoryEntry;
+const NavigationHistoryEntry = @import("root.zig").NavigationHistoryEntry;
-const NavigationTransition = @import("navigation.zig").NavigationTransition;
+const NavigationTransition = @import("root.zig").NavigationTransition;
-const NavigationEventTarget = @import("NavigationEventTarget.zig");
+const NavigationCurrentEntryChangeEvent = @import("root.zig").NavigationCurrentEntryChangeEvent;
 
-const NavigationCurrentEntryChangeEvent = @import("navigation.zig").NavigationCurrentEntryChangeEvent;
+const NavigationEventTarget = @import("NavigationEventTarget.zig");
 
 pub const prototype = *NavigationEventTarget;
 proto: NavigationEventTarget = NavigationEventTarget{},

src/browser/page.zig

@@ -35,8 +35,8 @@ const ScriptManager = @import("ScriptManager.zig");
 const SlotChangeMonitor = @import("SlotChangeMonitor.zig");
 const HTMLDocument = @import("html/document.zig").HTMLDocument;
 
-const NavigationKind = @import("navigation/navigation.zig").NavigationKind;
+const NavigationKind = @import("navigation/root.zig").NavigationKind;
-const NavigationCurrentEntryChangeEvent = @import("navigation/navigation.zig").NavigationCurrentEntryChangeEvent;
+const NavigationCurrentEntryChangeEvent = @import("navigation/root.zig").NavigationCurrentEntryChangeEvent;
 
 const js = @import("js/js.zig");
 const URL = @import("../url.zig").URL;
@@ -488,16 +488,16 @@ pub const Page = struct {
         }
 
         {
-            std.debug.print("\nprimary schedule: {d}\n", .{self.scheduler.primary.count()});
+            std.debug.print("\nhigh_priority schedule: {d}\n", .{self.scheduler.high_priority.count()});
-            var it = self.scheduler.primary.iterator();
+            var it = self.scheduler.high_priority.iterator();
             while (it.next()) |task| {
                 std.debug.print(" - {s} schedule: {d}ms\n", .{ task.name, task.ms - now });
             }
         }
 
         {
-            std.debug.print("\nsecondary schedule: {d}\n", .{self.scheduler.secondary.count()});
+            std.debug.print("\nlow_priority schedule: {d}\n", .{self.scheduler.low_priority.count()});
-            var it = self.scheduler.secondary.iterator();
+            var it = self.scheduler.low_priority.iterator();
             while (it.next()) |task| {
                 std.debug.print(" - {s} schedule: {d}ms\n", .{ task.name, task.ms - now });
             }

src/browser/session.zig

@@ -22,7 +22,7 @@ const Allocator = std.mem.Allocator;
 
 const js = @import("js/js.zig");
 const Page = @import("page.zig").Page;
-const NavigationKind = @import("navigation/navigation.zig").NavigationKind;
+const NavigationKind = @import("navigation/root.zig").NavigationKind;
 const Browser = @import("browser.zig").Browser;
 const NavigateOpts = @import("page.zig").NavigateOpts;
 const History = @import("html/History.zig");

src/main.zig

@@ -373,7 +373,11 @@ const Command = struct {
             \\                Defaults to
         ++ (if (builtin.mode == .Debug) " pretty." else " logfmt.") ++
             \\
-            \\ --user_agent_suffix
+            \\--log_filter_scopes
+            \\                Filter out too verbose logs per scope:
+            \\                http, unknown_prop, script_event, ...
+            \\
+            \\--user_agent_suffix
             \\                Suffix to append to the Lightpanda/X.Y User-Agent
             \\
         ;

src/tests/html/script/order.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<script src="../../testing.js"></script>
+
+<script defer id="remote_defer" src="order_defer.js"></script>
+<script defer id="remote_async" src="order_async.js"></script>
+
+<script type=module id="inline_module">
+    // inline module is always deferred.
+    list += 'g';
+    testing.expectEqual('abcdefg', list);
+</script>
+
+<script>
+    var list = '';
+</script>
+
+<script id="remote" src="order.js"></script>
+
+<script async id="inline_async">
+    // inline script ignore async
+    list += 'b';
+    testing.expectEqual('ab', list);
+</script>
+
+<script defer id="inline_defer">
+    // inline script ignore defer
+    list += 'c';
+    testing.expectEqual('abc', list);
+</script>
+
+<script id="default">
+    // simple inline script
+    list += 'd';
+    testing.expectEqual('abcd', list);
+</script>

src/tests/html/script/order.js

@@ -0,0 +1,2 @@
+list += 'a';
+testing.expectEqual('a', list);

src/tests/html/script/order_async.js

@@ -0,0 +1,3 @@
+list += 'f';
+testing.expectEqual('abcdef', list);
+

src/tests/html/script/order_defer.js

@@ -0,0 +1,2 @@
+list += 'e';
+testing.expectEqual('abcde', list);