Skip to content

Commit

Permalink
Cleanup examples
Browse files Browse the repository at this point in the history
  • Loading branch information
JumpLink committed Jul 9, 2024
1 parent 750111a commit 41c3fc7
Show file tree
Hide file tree
Showing 149 changed files with 677 additions and 531 deletions.
2 changes: 0 additions & 2 deletions .eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ tmp/
test/
# don't lint templates
templates/
# temporary ignore examples
examples/
# ignore generated types
@types/
*.js
Expand Down
4 changes: 2 additions & 2 deletions .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@
"requireConfigFile": false,
"files": ["*.ts", "*.tsx"],
"project": [
"./examples/gjs/*/tsconfig.json",
"./examples/*/tsconfig.json",
"./packages/*/tsconfig.json",
"./tests/*/tsconfig.json",
"./tests/*/tsconfig.json"
]
},
"globals": {
Expand Down
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ index.ts.bak
examples/**/node_modules/
examples/**/dist/
examples/**/tsconfig.alias.json

tests/**/dist/

debug.txt

# Yarn https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
Expand Down
125 changes: 83 additions & 42 deletions examples/README.md
Original file line number Diff line number Diff line change
@@ -1,81 +1,124 @@
# Examples

Go to the examples directory and run `yarn run start`, this will build the types and the example and then run it.
You can also use the configurations of the examples as a template.
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 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](https://code.visualstudio.com/).


## Adwaita Hello World
![adw-1-hello](adw-1-hello/preview.png)

A simple Libadwaita example

Source: [adw-1-hello](adw-1-hello)
Bundler: Vite

Build and run:
```bash
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](gio-2-cat)
Bundler: Esbuild

Build and run:
```bash
code examples/gjs/browser
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](gio-2-dbus)
Bundler: Esbuild

Build the server and client:
```bash
cd /examples/gio-2-dbus
yarn build
```

Run the server:
```bash
yarn start:server
```

Run the client:
```bash
yarn start:client
```

## Gtk-3.0 Browser
![gtk-3-browser](gtk-3-browser.png)
![gtk-3-browser](gtk-3-browser/preview.png)

This example uses ESM when building the types and executing GJS.
A simple browser using Gtk-3.0 and WebKit-2.0

Source: [GJS](gjs/gtk-3-browser)
Source: [gtk-3-browser](gtk-3-browser)
Bundler: Webpack
Module: ESM

Build and run:
```bash
cd /examples/gjs/gtk-3-browser
yarn run start
cd /examples/gtk-3-browser
yarn start
```

## Gtk-3.0 Builder
![gtk-3-builder](gtk-3-builder.png)
![gtk-3-builder](gtk-3-builder/preview.png)

Source: [GJS](gjs/gtk-3-builder)
Source: [gtk-3-builder](gtk-3-builder)
Bundler: Webpack
Module: CommonJS

Build and run:
```bash
cd /examples/gjs/gtk-3-builder
yarn run start
cd /examples/gtk-3-builder
yarn start
```

## Gtk-3.0 Editor
![gtk-3-editor](gtk-3-editor.png)
![gtk-3-editor](gtk-3-editor/preview.png)

Source: [GJS](gjs/gtk-3-editor)
Source: [gtk-3-editor](gtk-3-editor)
Bundler: Webpack
Module: CommonJS

Build and run:
```bash
cd /examples/gjs/gtk-3-editor
yarn run start
cd /examples/gtk-3-editor
yarn start
```

## Gtk-3.0 Hello Gtk
![gtk-3-hello](gtk-3-hello.png)
![gtk-3-hello](gtk-3-hello/preview.png)

Source: [GJS](gjs/gtk-3-hello)
Bundler: Webpack
Module: CommonJS
Source: [gtk-3-hello](gtk-3-hello)
Bundler: Rollup

Build and run:
```bash
cd /examples/gjs/gtk-3-hello
yarn run start
cd /examples/gtk-3-hello
yarn start
```

## Gtk-4.0 ListStore
![gtk-4-list-store](gtk-4-list-store.png)
![gtk-4-list-store](gtk-4-list-store/preview.png)

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

Source: [GJS](gjs/gtk-4-list-store)
Source: [gtk-4-list-store](gtk-4-list-store)
Bundler: ESBuild
Module: ESM

Build and run:
```bash
cd /examples/gjs/gtk-4-list-store
yarn run start
cd /examples/gtk-4-list-store
yarn start
```

## HTTP Server + Client
Expand Down Expand Up @@ -105,29 +148,27 @@ Gjs-Message: 21:13:22.008: JS LOG: body:
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: [GJS](gjs/soup-3-http)
Source: [soup-3-http](soup-3-http)
Bundler: ESBuild
Module: ESM

Build and run:
```bash
cd /examples/gjs/soup-3-http
yarn run build
yarn run start:server
yarn run start:client
cd /examples/soup-3-http
yarn build
yarn start:server
yarn start:client
```

## Gtk4 Custom Widget
![gtk-4-custom-widget](gtk-4-custom-widget.png)
![gtk-4-custom-widget](gtk-4-custom-widget/preview.png)

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

Source: [GJS](gjs/gtk-4-custom-widget)
Bundler: ESBuild
Module: ESM
Source: [gtk-4-custom-widget](gtk-4-custom-widget)
Bundler: ESBuild

Build and run:
```bash
cd /examples/gjs/gtk-4-custom-widget
yarn run start
cd /examples/gtk-4-custom-widget
yarn start
```
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
"name": "@ts-for-gir-example/adw-1-hello-example",
"version": "4.0.0-beta.5",
"description": "Simple GJS Typescript hello-world example using Libadwaita",
"main": "index.js",
"type": "module",
"private": true,
"scripts": {
Expand All @@ -12,9 +11,8 @@
"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",
"validate": "yarn validate:types",
"validate:types": "tsc --noEmit",
"clear": "rm -rf dist"
},
"author": "Pascal Garber <[email protected]>",
Expand Down
Binary file added examples/adw-1-hello/preview.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ await build({
// target: "firefox78", // Since GJS 1.65.90
// target: "firefox91", // Since GJS 1.71.1
// target: "firefox102", // Since GJS 1.73.2
target: "firefox115", // Since GJS 1.73.2
target: "firefox115", // Since GJS 1.77.2
format: 'esm',
// platform: 'node',
external: ['gi://*', 'resource://*', 'gettext', 'system', 'cairo'],
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@ts-for-gir-example/gio-2-cat-example",
"version": "4.0.0-beta.5",
"description": "Simple GJS Gtk 3 example app that shows how you can translate strings with gettext",
"description": "Simple GJS Gtk 3 example app that shows how to use Gio-2.0 to read a file from the local file system",
"main": "index.js",
"type": "module",
"private": true,
Expand All @@ -12,9 +12,8 @@
"start:app": "gjs -m dist/main.js main.ts",
"debug:app": "GTK_DEBUG=interactive yarn start:app",
"start": "yarn build && yarn start:app",
"validate": "yarn validate:types && yarn validate:app",
"validate:types": "tsc --project tsconfig.types.json",
"validate:app": "tsc --noEmit",
"validate": "yarn validate:types",
"validate:types": "tsc --noEmit",
"clear": "rm -rf dist @types "
},
"author": "Pascal Garber <[email protected]>",
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
16 changes: 16 additions & 0 deletions examples/gio-2-dbus/esbuild.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { build } from "esbuild";

await build({
entryPoints: ['dbus-client.ts', 'dbus-server.ts'],
outdir: 'dist',
bundle: true,
// target: "firefox60", // Since GJS 1.53.90
// target: "firefox68", // Since GJS 1.63.90
// target: "firefox78", // Since GJS 1.65.90
// target: "firefox91", // Since GJS 1.71.1
// target: "firefox102", // Since GJS 1.73.2
target: "firefox115", // Since GJS 1.77.2
format: 'esm',
// platform: 'node',
external: ['gi://*', 'resource://*', 'gettext', 'system', 'cairo'],
})
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,10 @@
"start": "yarn build && yarn start:server",
"start:server": "gjs -m dist/dbus-server.js",
"start:client": "gjs -m dist/dbus-client.js",
"start:client-async": "gjs -m dist/dbus-client-async.js",
"debug:server": "GTK_DEBUG=interactive yarn start:server",
"debug:client": "GTK_DEBUG=interactive yarn start:client",
"validate": "yarn validate:types && yarn validate:app",
"validate:types": "tsc --project tsconfig.types.json",
"validate:app": "tsc --noEmit",
"validate": "yarn validate:types",
"validate:types": "tsc --noEmit",
"clear": "rm -rf dist @types"
},
"author": "Pascal Garber <[email protected]>",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,5 @@
"files": [
"dbus-client.ts",
"dbus-server.ts",
"dbus-client-async.ts"
]
}
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ await build({
// target: "firefox78", // Since GJS 1.65.90
// target: "firefox91", // Since GJS 1.71.1
// target: "firefox102", // Since GJS 1.73.2
target: "firefox115", // Since GJS 1.73.2
target: "firefox115", // Since GJS 1.77.2
format: 'esm',
// platform: 'node',
external: ['node-gtk', 'gi://*', 'resource://*', 'gettext', 'system', 'cairo'],
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
"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": "yarn validate:types",
"validate:types": "tsc --noEmit",
"validate:app": "tsc --noEmit"
},
"author": "Pascal Garber <[email protected]>",
Expand Down
File renamed without changes.
6 changes: 0 additions & 6 deletions examples/gjs/adw-1-hello/tsconfig.types.json

This file was deleted.

6 changes: 0 additions & 6 deletions examples/gjs/gio-2-cat/tsconfig.types.json

This file was deleted.

Loading

0 comments on commit 41c3fc7

Please sign in to comment.