init then bundle then gjs gives error

[cccslater]

Steps:

• nix shell github:aylur/ags
• ags init --gtk 4
• (ags run app.ts --gtk4 works as expected)
• ags bundle app.ts bundled.js (no errors)
• gjs -m bundled.js

That gives us

(gjs:70119): Gjs-CRITICAL **: 22:02:05.893: JS ERROR: Error: Requiring Astal, version 4.0: Typelib file for namespace 'Astal', version '4.0' not found
require@resource:///org/gnome/gjs/modules/esm/gi.js:16:28
@gi://Astal:3:25


(gjs:70119): Gjs-CRITICAL **: 22:02:05.893: Module file:///home/ccc/.config/ags/bundled.js threw an exception

How do I fix this?

[ShadowS0ng]

I managed to do it by using GTK4LayerShell like below:
first don't return JSX element, instead create an instance of Gtk.Window class:

  const window = new Gtk.Window();
  window.visible = true;
  window.cssClasses = ["Bar"];
  window.application = App;

  window.set_child(
    <centerbox cssName="centerbox">
      <box hexpand halign={Gtk.Align.CENTER}>
        <Workspaces />
      </box>
      <menubutton cssName="clockbutton" hexpand halign={Gtk.Align.CENTER}>
        <label cssName="clocklabel" label={time()} />
        <popover>
          <Gtk.Calendar />
        </popover>
      </menubutton>
      <box>
        <SysTray />
      </box>
    </centerbox>,
  );

Then initialize a layer shell for this window :

  Gtk4LayerShell.init_for_window(window);
  Gtk4LayerShell.set_layer(window, Gtk4LayerShell.Layer.TOP);
  Gtk4LayerShell.auto_exclusive_zone_enable(window);
  Gtk4LayerShell.set_monitor(window, gdkmonitor);
  Gtk4LayerShell.set_anchor(window, Gtk4LayerShell.Edge.LEFT, true);
  Gtk4LayerShell.set_anchor(window, Gtk4LayerShell.Edge.TOP, true);
  Gtk4LayerShell.set_anchor(window, Gtk4LayerShell.Edge.RIGHT, true);
  window.maximize();
  window.realize();

return window

• When you want to bundle use --package flag: ags bundle --package app.ts bar
• When you want to run the bundle use LD_PRELOAD="$LD_PRELOAD /usr/lib/libgtk4-layer-shell.so" gjs -m bar
• OR Instead of using LD_PRELOAD you can use tools like patchelf to modify linking order

[Aylur]

On nix, if you want to bundle, you'll have to write a derivation. The bundle command simply uses esbuild to output a single js file, it won't magically link libraries on Nix.

Don't use the --package flag if don't want a modified astal version, its mainly meant to be used for debugging purposes.
For gtk4 you will also need to preload gtk4-layer-shell which lib.ags.bundle does for you

[Aylur]

@ShadowS0ng you don't have to use Gtk4LayerShell directly, using <window> achieves the same thing. OP's issue was with Nix and not the layershell lib

[cccslater]

On nix, if you want to bundle, you'll have to write a derivation. The bundle command simply uses esbuild to output a single js file, it won't magically link libraries on Nix.

Many thanks. I was going to suggest changing the docs with this info but it seems they've been clarified since the last time I looked 🙂