[masonry] [wasm] Atomics.wait cannot be called in this context

[MrFoxPro]

Minimal masonry example for web:

const TEXT_INPUT_TAG: WidgetTag<TextInput> = WidgetTag::new("text-input");
const LIST_TAG: WidgetTag<Flex> = WidgetTag::new("list");
const WIDGET_SPACING: Length = Length::const_px(5.0);

struct Driver {}

impl AppDriver for Driver {
	fn on_action(&mut self, window_id: WindowId, ctx: &mut DriverCtx<'_, '_>, widget_id: WidgetId, action: ErasedAction) {
	}
}

pub fn make_widget_tree() -> NewWidget<impl Widget> {
	let text_input = NewWidget::new_with_tag(
		TextInput::new("").with_placeholder("ex: 'Do the dishes', 'File my taxes', ..."),
		TEXT_INPUT_TAG,
	);
	let button = NewWidget::new(Button::with_text("Add task"));

	let list = Flex::column()
		.with_child(NewWidget::new_with_props(
			Flex::row().with_flex_child(text_input, 1.0).with_child(button),
			Properties::new().with(Padding::all(WIDGET_SPACING.get())),
		))
		.with_spacer(WIDGET_SPACING);

	NewWidget::new(Portal::new(NewWidget::new_with_tag(list, LIST_TAG)))
}

pub fn main() {
	std::panic::set_hook(Box::new(console_error_panic_hook::hook));
	console_log::init().expect("could not initialize logger");

	let canvas = web_sys::window()
		.unwrap()
		.document()
		.unwrap()
		.get_element_by_id("canvas")
		.unwrap()
		.dyn_into::<web_sys::HtmlCanvasElement>()
		.unwrap();

	let window_attributes = Window::default_attributes().with_focusable(false).with_canvas(canvas.into());
	let driver = Driver {};
	let event_loop = masonry_winit::app::EventLoop::with_user_event().build().unwrap();
	let window = NewWindow::new(window_attributes, make_widget_tree().erased());
	masonry_winit::app::run_with(event_loop, vec![window], driver, default_property_set()).unwrap();
}

Compiled with latest nightly, .cargo/config.toml:

[unstable]
build-std = ["panic_abort", "std"]

[target.wasm32-unknown-unknown]
rustflags = [
    "-Ctarget-feature=+atomics,+bulk-memory,+mutable-globals",
    "-Clink-arg=--shared-memory",
    "-Clink-arg=--max-memory=1073741824",
    "-Clink-arg=--import-memory",
    "-Clink-arg=--export=__wasm_init_tls",
    "-Clink-arg=--export=__tls_size",
    "-Clink-arg=--export=__tls_align",
    "-Clink-arg=--export=__tls_base",
    '--cfg=getrandom_backend="wasm_js"',
]

causes an error:

module.wasm:0x8cdd61 Uncaught RuntimeError: Atomics.wait cannot be called in this context
    at module-9c2b1f25934dd577.wasm.core::core_arch::wasm32::atomic::memory_atomic_wait32::hfc0446ad0d5eaeac (module.wasm:0x8cdd61)
    at module-9c2b1f25934dd577.wasm.std::sys::pal::wasm::futex::futex_wait::h5dd2eee222fe3842 (module.wasm:0x70a5c5)
    at module-9c2b1f25934dd577.wasm.std::sys::sync::condvar::futex::Condvar::wait_optional_timeout::h5a792220dbdbf4bc (module.wasm:0x704962)
    at module-9c2b1f25934dd577.wasm.std::sys::sync::condvar::futex::Condvar::wait::h95d4f2f0328b969c (module.wasm:0x8701f1)
    at module-9c2b1f25934dd577.wasm.std::sync::poison::condvar::Condvar::wait::hf08d9010cc253d41 (module.wasm:0x6b420b)
    at module-9c2b1f25934dd577.wasm.pollster::Signal::wait::h936f3543deaff58e (module.wasm:0x46593d)
    at module-9c2b1f25934dd577.wasm.pollster::block_on::h9e2ed20e55bd4be5 (module.wasm:0x4b4fb1)
    at module-9c2b1f25934dd577.wasm.masonry_winit::event_loop_runner::create_surface::h830b5f8a83015078 (module.wasm:0x4e0d99)
    at module-9c2b1f25934dd577.wasm.masonry_winit::event_loop_runner::MasonryState::redraw::h8fffb65ccd7cacbc (module.wasm:0x1e7456)
    at module-9c2b1f25934dd577.wasm.masonry_winit::event_loop_runner::MasonryState::handle_window_event::hf69bd32aa8f129f5 (module.wasm:0x1068ff)

[MrFoxPro]

I was able to run Masonry in browser WASM by using a lot of hacks to bypass pollster::block_on.

masonry_web.mp4

Though it doesn't look very inspiring.

[PoignardAzur]

The web is a fairly low-priority target for Masonry, for all the usual reasons (running a native framework on the web is a very bad UX), so we probably won't fix this in the short term.

In the long term, the simplest solution will be to switch to Vello CPU once it's mature enough.