NavigationView causes Error: Detected stack-buffer-overflow

[alobaili]

Describe the bug I'm just starting exploring Tokamak and created a project using the tokamak template as described in the readme.

I added a simple NavigationView to the body of ContentView as follows:

import TokamakDOM

struct TokamakApp: App {
    var body: some Scene {
        WindowGroup("Tokamak App") {
            ContentView()
        }
    }
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Hello")
                .foregroundColor(Color.red)
        }
    }
}

// @main attribute is not supported in SwiftPM apps.
// See https://bugs.swift.org/browse/SR-12683 for more details.
TokamakApp.main()

Saving the file to trigger a reload shows a blank white screen. The Google Chrome console prints the following error:

Error: Detected stack-buffer-overflow.
    at report_stack_overflow (dev.js:85)
    at <anonymous>:wasm-function[86248]:0x180c3d1
    at (anonymous namespace)::NodePrinter::print(swift::Demangle::__runtime::Node*, bool) (<anonymous>:wasm-function[43960]:0x8e7d48)
    at (anonymous namespace)::NodePrinter::printEntity(swift::Demangle::__runtime::Node*, bool, (anonymous namespace)::NodePrinter::TypePrinting, bool, __swift::__runtime::llvm::StringRef, int, __swift::__runtime::llvm::StringRef) (<anonymous>:wasm-function[43962]:0x8edaf5)
    at (anonymous namespace)::NodePrinter::print(swift::Demangle::__runtime::Node*, bool) (<anonymous>:wasm-function[43960]:0x8e8e09)
    at (anonymous namespace)::NodePrinter::print(swift::Demangle::__runtime::Node*, bool) (<anonymous>:wasm-function[43960]:0x8e8d48)
    at (anonymous namespace)::NodePrinter::print(swift::Demangle::__runtime::Node*, bool) (<anonymous>:wasm-function[43960]:0x8eb521)
    at (anonymous namespace)::NodePrinter::print(swift::Demangle::__runtime::Node*, bool) (<anonymous>:wasm-function[43960]:0x8e8d48)
    at (anonymous namespace)::NodePrinter::print(swift::Demangle::__runtime::Node*, bool) (<anonymous>:wasm-function[43960]:0x8e920f)
    at (anonymous namespace)::NodePrinter::print(swift::Demangle::__runtime::Node*, bool) (<anonymous>:wasm-function[43960]:0x8e910c)

in carton dev there seems to be no problem:

Expected behavior The NavigationView should not produce a stack-buffer-overflow error and the content inside NavigationView should be visible in someway appropriate for a navigation view in a web app.

Screenshots

Desktop (please complete the following information):

• OS: macOS 11.5
• Browser: Google Chrome
• Version of the browser: Version 93.0.4577.63 (Official Build) (x86_64)
• Version of Tokamak: 0.8.0

Additional context From the progress.md file, I can see NavigationView is 🚧, but I couldn't know how completed it is. I am sorry for reporting the issue if it's already known.

[ezraberch]

This is a regression; it broke in 21c21cd3285080d54e42ea257309ecb851a65eab.

[MaxDesiatov]

Maybe using loops instead of recursion in the reconciler/MountedElements code would reduce our stack memory consumption? That's the first thing I'd try first, if anyone is interested in picking it up. Could also potentially help with performance even on other platforms, probably provable through our existing very basic benchmarks.

[MaxDesiatov]

One workaround in the meantime could be setting the stack size explicitly to something large enough in Package.swift, as described here https://github.com/TokamakUI/Tokamak/issues/367#issuecomment-829229300

[ezraberch]

This looks like the same wasm issue we've encountered previously. I can get this working properly by refactoring NavigationView (b5f958857c1285cb94e17688ec8e2f55d2dad07e), which shouldn't make any functional difference. I'm not sure how well this solution will work with more complex applications.

[MaxDesiatov]

Great find with the workaround! Please feel free to submit a PR. Even if it fixes only a subset of cases, it's still worth merging I think.