Can't seem to get main example working #160

C-Loftus · 2024-04-11T04:17:36Z

C-Loftus
Apr 11, 2024

Sorry for the trivial question but I am confused on how to get the simple example setup and working. Even without typescript the syntax provided does not seem to work. I have tried both gjs and node and neither work. I am not particularly familiar with gjs so I must be doing something wrong.

I have tried running the examples by running the specified yarn commands in the example directory and I have errors since it depends on some sort of yarn workspace configuration. Is there a quickstart repo that would be a good reference somewhere? Sorry if this is missing obvious baseline things

Answered by JumpLink

Apr 11, 2024

@C-Loftus you need to run the example with the gjs -m flag to enable ESM Module support. Also, the @girs/* imports can only be used with a bundler like esbuild, GJS itself has no support for NPM modules, so you will need a bundler to resolve this for you.

Use the types in your JavaScript project

However, you can still use the types in the way you are trying to without needing a bundler or the TypeScript compiler. To do this, you need to create a jsconfig.json (note that this is not a tsconfig.json but a jsconfig.json) and add the @girs/* types there, for example like this:

{
  "compilerOptions": {
    "checkJs": true,
    "types": ["@girs/gjs", "@girs/gjs/dom", "@girs/gio-2.0", "@girs/gob…

View full answer

JumpLink · 2024-04-11T07:57:10Z

JumpLink
Apr 11, 2024
Maintainer

@C-Loftus you need to run the example with the gjs -m flag to enable ESM Module support. Also, the @girs/* imports can only be used with a bundler like esbuild, GJS itself has no support for NPM modules, so you will need a bundler to resolve this for you.

Use the types in your JavaScript project

However, you can still use the types in the way you are trying to without needing a bundler or the TypeScript compiler. To do this, you need to create a jsconfig.json (note that this is not a tsconfig.json but a jsconfig.json) and add the @girs/* types there, for example like this:

{
  "compilerOptions": {
    "checkJs": true,
    "types": ["@girs/gjs", "@girs/gjs/dom", "@girs/gio-2.0", "@girs/gobject-2.0", "@girs/gtk-4.0"],
  }
}

These types also contain ambient module definitions, which means there are also types for the GJS typical import statements like import Gtk from 'gi://Gtk?version=4.0'.

Therefore you can import the modules as described in the GJS documentation, like this:

import Gtk from 'gi://Gtk?version=4.0';

const button = new Gtk.Button();

You should now have autocompletion and type checking in your JavaScript project, provided your IDE supports this. Here is an external blog post about this topic: https://www.dandoescode.com/blog/using-typescript-without-typescript

0 replies

JumpLink · 2024-04-11T08:18:01Z

JumpLink
Apr 11, 2024
Maintainer

Play with the examples

@C-Loftus To also answer your other comment about yarn workspaces: To execute the examples - as they are available in this repo - proceed as follows:

# Install yarn, see https://yarnpkg.com/getting-started/install
npm install -g yarn

# Check out the repo including submodules and go into this project
git clone --recurse-submodules https://github.com/gjsify/ts-for-gir.git
cd ./ts-for-gir

# Install dependencies and initialise the yarn workspace
yarn install

# Now switch to the example you want to run, e.g.
cd examples/gjs/adw-1-hello
yarn start

The mistake that is probably made quickly is to check out the prepository without submodules, but you can also do this later:

git submodule update --init --recursive

0 replies

JumpLink · 2024-04-11T08:31:35Z

JumpLink
Apr 11, 2024
Maintainer

Start a new project

I am planning to add the feature to the CLI to generate project templates, but this is not yet possible. But you can start a new project by copy one of the examples (with a bundler of your choice, the examples use different bundlers like esbuild, vite or webpack) and then you have to adapt the package.json by removing the yarn workspace references and replacing yarn commands with npm run (If you want to use yarn yourself, you can of course leave it in), in the case of adw-1-hello it would look like this:

Before:

{
  "name": "@ts-for-gir-example/adw-1-hello-example",
  "version": "4.0.0-beta.2",
  "description": "Simple GJS Typescript hello-world example using Libadwaita",
  "main": "index.js",
  "type": "module",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:app": "vite build",
    "build": "yarn build:app",
    "start:app": "gjs -m dist/main.js",
    "debug:app": "GTK_DEBUG=interactive gjs -m dist/main.js",
    "start": "yarn build && yarn start:app",
    "validate": "yarn validate:types && yarn validate:app",
    "validate:types": "tsc --project tsconfig.types.json",
    "validate:app": "tsc --noEmit",
    "clear": "rm -rf dist"
  },
  "author": "Pascal Garber <[email protected]>",
  "licence": "MIT",
  "devDependencies": {
    "@babel/core": "^7.24.0",
    "@rollup/plugin-babel": "^6.0.4",
    "rollup": "^4.13.0",
    "typescript": "^5.4.2",
    "vite": "^5.1.6"
  },
  "dependencies": {
    "@girs/adw-1": "workspace:^",
    "@girs/gio-2.0": "workspace:^",
    "@girs/gjs": "workspace:^",
    "@girs/glib-2.0": "workspace:^",
    "@girs/gtk-4.0": "workspace:^"
  }
}

After:

{
  "name": "my-project",
  "version": "0.0.1",
  "description": "My new project",
  "main": "index.js",
  "type": "module",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:app": "vite build",
    "build": "npm run build:app",
    "start:app": "gjs -m dist/main.js",
    "debug:app": "GTK_DEBUG=interactive gjs -m dist/main.js",
    "start": "npm run build && npm run start:app",
    "validate": "npm run validate:types && npm run validate:app",
    "validate:types": "tsc --project tsconfig.types.json",
    "validate:app": "tsc --noEmit",
    "clear": "rm -rf dist"
  },
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.24.0",
    "@rollup/plugin-babel": "^6.0.4",
    "rollup": "^4.13.0",
    "typescript": "^5.4.2",
    "vite": "^5.1.6"
  },
  "dependencies": {
    "@girs/adw-1": "^1.5.0-4.0.0-beta.2",
    "@girs/gio-2.0": "^2.80.0-4.0.0-beta.2",
    "@girs/gjs": "^4.0.0-beta.2",
    "@girs/glib-2.0": "^2.80.0-4.0.0-beta.2",
    "@girs/gtk-4.0": "^4.14.1-4.0.0-beta.2"
  }
}

Now you are no longer dependent on yarn and you can use npm (or any other package manager of your choice) to install the dependencies and run the project:

npm install
npm run start

I haven't tested it, but it should work in theory, let me know if it works. I hope this helps :)

0 replies

C-Loftus · 2024-04-11T12:21:45Z

C-Loftus
Apr 11, 2024
Author

Hi Pascal, thank you so much these examples and explanation are super helpful! I really appreciate you taking the time to walk me through this.

…

On Thu, Apr 11, 2024 at 4:32 AM Pascal Garber ***@***.***> wrote: If you want to start a new project, you can copy one of the examples (with a bundler of your choice, the examples use different bundlers like esbuild, vite <https://vitejs.dev/> or webpack <https://webpack.js.org/>) and then you have to adapt the package.json by removing the yarn workspace references and replacing yarn commands with npm run, in the case of adw-1-hello it would look like this: Before: { "name": ***@***.***/adw-1-hello-example", "version": "4.0.0-beta.2", "description": "Simple GJS Typescript hello-world example using Libadwaita", "main": "index.js", "type": "module", "private": true, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build:app": "vite build", "build": "yarn build:app", "start:app": "gjs -m dist/main.js", "debug:app": "GTK_DEBUG=interactive gjs -m dist/main.js", "start": "yarn build && yarn start:app", "validate": "yarn validate:types && yarn validate:app", "validate:types": "tsc --project tsconfig.types.json", "validate:app": "tsc --noEmit", "clear": "rm -rf dist" }, "author": "Pascal Garber ***@***.***>", "licence": "MIT", "devDependencies": { ***@***.***/core": "^7.24.0", ***@***.***/plugin-babel": "^6.0.4", "rollup": "^4.13.0", "typescript": "^5.4.2", "vite": "^5.1.6" }, "dependencies": { ***@***.***/adw-1": "workspace:^", ***@***.***/gio-2.0": "workspace:^", ***@***.***/gjs": "workspace:^", ***@***.***/glib-2.0": "workspace:^", ***@***.***/gtk-4.0": "workspace:^" } } After: { "name": ***@***.***/adw-1-hello-example", "version": "4.0.0-beta.2", "description": "Simple GJS Typescript hello-world example using Libadwaita", "main": "index.js", "type": "module", "private": true, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build:app": "vite build", "build": "npm run build:app", "start:app": "gjs -m dist/main.js", "debug:app": "GTK_DEBUG=interactive gjs -m dist/main.js", "start": "npm run build && npm run start:app", "validate": "npm run validate:types && npm run validate:app", "validate:types": "tsc --project tsconfig.types.json", "validate:app": "tsc --noEmit", "clear": "rm -rf dist" }, "author": "Pascal Garber ***@***.***>", "license": "MIT", "devDependencies": { ***@***.***/core": "^7.24.0", ***@***.***/plugin-babel": "^6.0.4", "rollup": "^4.13.0", "typescript": "^5.4.2", "vite": "^5.1.6" }, "dependencies": { ***@***.***/adw-1": "^1.5.0-4.0.0-beta.2", ***@***.***/gio-2.0": "^2.80.0-4.0.0-beta.2", ***@***.***/gjs": "^4.0.0-beta.2", ***@***.***/glib-2.0": "^2.80.0-4.0.0-beta.2", ***@***.***/gtk-4.0": "^4.14.1-4.0.0-beta.2" } } Now you are no longer dependent on yarn: npm install npm run start I haven't tested it, but it should work in theory, let me know if it works — Reply to this email directly, view it on GitHub <#160 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQ2T6Z522DQCR7BPHADFQQLY4ZC7ZAVCNFSM6AAAAABGBSJRHKVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TAOBQG43TG> . You are receiving this because you were mentioned.Message ID: ***@***.***>

0 replies

C-Loftus · 2024-04-13T02:33:58Z

C-Loftus
Apr 13, 2024
Author

@JumpLink Quick question sorry to bother, but are the following two imports different? I am trying to port a simple atspi example to ts, but I get different behavior in the typescript vs js versions ( I am not changing any code when porting to TS, just adding type annotations and the important).

For context, the difference is a permission error in atspi if it makes a difference. I have permission to dump to accessibility tree in JS, but not in the compiled TS for some reason.

I wasn't sure if I am misunderstanding anything still.

JS:

const Atspi = imports.gi.Atspi;

TS

import Atspi from "@girs/atspi-2.0";

when compiled it outputs the following which I am not really sure if they are the same. They have the same API, but I feel something must be different.

import _ from "gi://Atspi?version=2.0";

6 replies

C-Loftus Apr 13, 2024
Author

No worries. This may be out of scope. Something is different with the atspi permissions if I am calling gjs dumptree.js as plain javscript in that example I posted vs gjs -m dist/main.js Firefox (i.e. the output after running npm run start Firefox with the vite build step you posted here). I checked the built output and there are no different functions so I am totally stumped.

The code cannot interact with any snap packages when built with vite, but ran as gjs it interacts with them fine. I don't know specifics, but I wonder if there is an issue if it is a subprocess of npm or something instead of just gjs? I really have no idea what else it could be.

All the code compiles and runs fine, it is just there is a permission issue with dbus. Once again no worries if this is out of scope. Atspi is always a bit confusing

host@host ~/g/atspi-hats (main)> npm run start Firefox

> [email protected] start
> npm run build && npm run start:app Firefox


> [email protected] build
> npm run build:app


> [email protected] build:app
> vite build

vite v5.2.8 building for production...
✓ 2 modules transformed.
dist/main.js  0.63 kB │ gzip: 0.36 kB
✓ built in 97ms

> [email protected] start:app
> gjs -m dist/main.js Firefox


(gjs:11235): dbind-WARNING **: 12:25:10.217: AT-SPI: Error in GetItems, sender=org.freedesktop.DBus, error=An AppArmor policy prevents this sender from sending this message to this recipient; type="method_call", sender=":1.33" (uid=1000 pid=11235 comm="gjs -m dist/main.js Firefox " label="snap.node.node (complain)") interface="org.a11y.atspi.Cache" member="GetItems" error name="(unset)" requested_reply="0" destination=":1.16" (uid=1000 pid=3051 comm="/snap/snap-store/1113/usr/bin/snap-store --gapplic" label="snap.snap-store.ubuntu-software (enforce)")

(gjs:11235): dbind-WARNING **: 12:25:10.217: AT-SPI: Error in GetItems, sender=org.freedesktop.DBus, error=An AppArmor policy prevents this sender from sending this message to this recipient; type="method_call", sender=":1.33" (uid=1000 pid=11235 comm="gjs -m dist/main.js Firefox " label="snap.node.node (complain)") interface="org.a11y.atspi.Cache" member="GetItems" error name="(unset)" requested_reply="0" destination=":1.21" (uid=1000 pid=3690 comm="/snap/firefox/4090/usr/lib/firefox/firefox " label="snap.firefox.firefox (enforce)")

(gjs:11235): dbind-WARNING **: 12:25:10.217: AT-SPI: Error in GetItems, sender=org.freedesktop.DBus, error=An AppArmor policy prevents this sender from sending this message to this recipient; type="method_call", sender=":1.33" (uid=1000 pid=11235 comm="gjs -m dist/main.js Firefox " label="snap.node.node (complain)") interface="org.a11y.atspi.Cache" member="GetItems" error name="(unset)" requested_reply="0" destination=":1.29" (uid=1000 pid=8641 comm="/snap/chromium/2811/usr/lib/chromium-browser/chrom" label="snap.chromium.chromium (enforce)")
host@host ~/g/atspi-hats (main)>

Those three apps are all snap packages, but when I run gjs it dumps the tree fine as expected.

JumpLink Apr 13, 2024
Maintainer

I don't know if it's because of this, but if you want to pass an argument to a script with npm you have to do it with a -- (on yarn not), like this: npm run start:app -- Firefox

C-Loftus Apr 13, 2024
Author

Unfortunately doesn't seem to be so. Just tried with -- and same weird dbus permission block

C-Loftus May 1, 2024
Author

Figured this out. Very weird but apparently app armor prevents accessibility access if I am launching the process from npm (i.e. throws an error if I run npm run start but doesn't if I just run gjs -m dist/main.js. Not clear why. Maybe becuase my npm is also a snap. (time to get off ubuntu it seems 🤣 So it was indeed not an issue with this library.

Just wanted to post here if others could be helped.
Thanks!!

JumpLink May 2, 2024
Maintainer

@C-Loftus Thanks for letting us know here, this may help others with similar problems 👍

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can't seem to get main example working #160

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 5 comments 6 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Can't seem to get main example working #160

C-Loftus Apr 11, 2024

Use the types in your JavaScript project

Replies: 5 comments · 6 replies

JumpLink Apr 11, 2024 Maintainer

Use the types in your JavaScript project

JumpLink Apr 11, 2024 Maintainer

Play with the examples

JumpLink Apr 11, 2024 Maintainer

Start a new project

C-Loftus Apr 11, 2024 Author

C-Loftus Apr 13, 2024 Author

JS:

TS

C-Loftus Apr 13, 2024 Author

JumpLink Apr 13, 2024 Maintainer

C-Loftus Apr 13, 2024 Author

C-Loftus May 1, 2024 Author

JumpLink May 2, 2024 Maintainer

C-Loftus
Apr 11, 2024

Replies: 5 comments 6 replies

JumpLink
Apr 11, 2024
Maintainer

JumpLink
Apr 11, 2024
Maintainer

JumpLink
Apr 11, 2024
Maintainer

C-Loftus
Apr 11, 2024
Author

C-Loftus
Apr 13, 2024
Author

C-Loftus Apr 13, 2024
Author

JumpLink Apr 13, 2024
Maintainer

C-Loftus Apr 13, 2024
Author

C-Loftus May 1, 2024
Author

JumpLink May 2, 2024
Maintainer