Skip to content

Latest commit

 

History

History
241 lines (176 loc) · 5.3 KB

README.md

File metadata and controls

241 lines (176 loc) · 5.3 KB

Examples

Go to the examples directory and run yarn start, this will build the example and then run it. You can also use the examples as a template for your own project. The examples intentionally use different bundlers like Webpack, Rollup, Esbuild, Vite, Parcel or the pure TypeScript compiler to transpile the TypeScript files to JavaScript. Simply choose the example that best suits your needs. If there is no suitable one, feel free to create an issue for it or contribute a new example via a PR.

Now open some code with an editor that understands TypeScript and see what happens, for example Visual Studio Code.

Adwaita Hello World

adw-1-hello

A simple Libadwaita example

Source: adw-1-hello
Bundler: Vite

Build and run:

cd /examples/adw-1-hello
yarn start

Gio-2.0 Cat

A simple GJS example that shows how to use Gio-2.0 to read a file from the local file system

Source: gio-2-cat
Bundler: Esbuild

Build and run:

cd /examples/gio-2-cat
yarn start

Gio-2.0 DBus

A simple GJS example that shows how to build a DBus server/client

Source: gio-2-dbus
Bundler: Esbuild

Build the server and client:

cd /examples/gio-2-dbus
yarn build

Run the server:

yarn start:server

Run the client:

yarn start:client

Gtk3 Browser

gtk-3-browser

A simple browser using Gtk3 and WebKit-2.0

Source: gtk-3-browser
Bundler: Webpack

Build and run:

cd /examples/gtk-3-browser
yarn start

Gtk3 Builder

gtk-3-builder

Source: gtk-3-builder
Bundler: Webpack

Build and run:

cd /examples/gtk-3-builder
yarn start

Gtk3 Calc

gtk-3-calc

Source: gtk-3-calc
Bundler: Esbuild

Build and run:

cd /examples/gtk-3-calc
yarn start

Gtk3 Clutter (TSC)

gtk-3-clutter

Source: gtk-3-clutter
Bundler: TSC

Build and run:

cd /examples/gtk-3-clutter-tsc
yarn start

Gtk3 Editor

gtk-3-editor

Source: gtk-3-editor
Bundler: Parcel

Build and run:

cd /examples/gtk-3-editor
yarn start

Gtk3 Hello Gtk

gtk-3-hello

Source: gtk-3-hello
Bundler: Rollup

Build and run:

cd /examples/gtk-3-hello
yarn start

Gtk4 ListStore

gtk-4-list-store

GJS example showing how to build Gtk4 applications using Gtk.TreeView and Gtk.ListStore

Source: gtk-4-list-store
Bundler: ESBuild

Build and run:

cd /examples/gtk-4-list-store
yarn start

HTTP Server + Client

> gjs -m dist/http-server.js
Visit http://localhost:1080

> gjs -m dist/http-client.js
Gjs-Message: 21:13:22.007: JS LOG: status: 200 - OK
Gjs-Message: 21:13:22.007: JS LOG: Date: Wed, 06 Apr 2022 19:13:22 GMT
Gjs-Message: 21:13:22.007: JS LOG: Content-Type: text/html; charset=utf-8
Gjs-Message: 21:13:22.007: JS LOG: Content-Length: 135
Gjs-Message: 21:13:22.008: JS LOG: body:

        <html>
        <body>
            Hello, gjs! ☺<br>
            <a href="/">Go back</a>
        </body>
        </html>

GJS example showing how to build a http server/client using Soap 3.
This example contains a client and a server example, for the client example the server must be running.

Source: soup-3-http
Bundler: ESBuild

Build and run:

cd /examples/soup-3-http
yarn build
yarn start:server
yarn start:client

Gtk4 Custom Widget

gtk-4-custom-widget

This example shows the usage of custom widgets and virtual functions in GJS.

Source: gtk-4-custom-widget
Bundler: ESBuild

Build and run:

cd /examples/gtk-4-custom-widget
yarn start

Gtk4 Template (esbuild)

gtk-4-template-esbuild

This example shows how to use the Gtk4 template engine to create a custom widget. It's also showing how to load the template .ui and style .css files from the file system using ESBuild.

Source: gtk-4-template-esbuild
Bundler: ESBuild

Build and run:

cd /examples/gtk-4-template-esbuild
yarn start

Gtk4 Template (Vite)

gtk-4-template-vite

This example is largely identical to the example above, but uses Vite to inject the template .ui and style .css files into the source code.

Source: gtk-4-template-vite
Bundler: Vite

Build and run:

cd /examples/gtk-4-template-vite
yarn start

Gtk4 Template (TSC)

gtk-4-template-tsc

This example is largely identical to the examples above, but uses the TypeScript compiler to compile the source code. No assets can be resolved with the TypeScript compiler, so this example shows how this can be done on runtime.

Source: gtk-4-template-tsc
Bundler: TSC

Build and run:

cd /examples/gtk-4-template-tsc
yarn start