Add parcel to an example

.yarnrc.yml

@@ -3,3 +3,15 @@ compressionLevel: mixed
 enableGlobalCache: false
 
 yarnPath: .yarn/releases/yarn-4.3.1.cjs
+
+# Temporary fix for https://github.com/parcel-bundler/parcel/issues/9114
+packageExtensions:
+  "@parcel/node-resolver-core@*":
+    dependencies:
+      "@parcel/core": "*"
+  "@parcel/types@*":
+    dependencies:
+      "@parcel/core": "*"
+  "@parcel/fs@*":
+    dependencies:
+      "@parcel/core": "*"

examples/README.md

@@ -1,7 +1,7 @@
 # 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 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.
+You can also use the examples as a template for your own project. The examples intentionally use different bundlers like [Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org/), [Esbuild](https://esbuild.github.io/), [Vite](https://vitejs.dev/), [Parcel](https://parceljs.org/) 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/).
@@ -87,7 +87,7 @@ yarn start
 ![gtk-3-editor](gtk-3-editor/preview.png)
 
 Source: [gtk-3-editor](gtk-3-editor)  
-Bundler: Webpack  
+Bundler: Parcel  
 
 Build and run:
 ```bash

examples/gtk-3-editor/.parcelrc

@@ -0,0 +1,4 @@
+{
+    "extends": "@parcel/config-default",
+    "resolvers": ["@parcel/resolver-default", "./parcel-resolver-gi.js"]
+  }

examples/gtk-3-editor/package.json

@@ -2,13 +2,23 @@
   "name": "@ts-for-gir-example/gtk-3-editor-example",
   "version": "4.0.0-beta.5",
   "type": "module",
+  "targets": {
+    ".": {
+      "context": "node",
+      "outputFormat": "esmodule",
+      "includeNodeModules": [
+        "@girs/gjs",
+        "@girs/gtk-3.0",
+        "@girs/gtksource-3.0"
+      ],
+      "sourceMap": false
+    }
+  },
   "private": true,
   "scripts": {
-    "build": "yarn build:app",
-    "build:app": "yarn clear:app && webpack --env production",
-    "clear:app": "rm -rf ./dist",
-    "clear": "yarn clear:app && yarn clear:types",
-    "start": "yarn build && yarn start:app",
+    "build": "parcel build main.ts",
+    "clear": "rm -rf ./dist",
+    "start": "yarn clear && yarn build && yarn start:app",
     "start:app": "gjs -m dist/main.js",
     "watch": "yarn build --watch",
     "validate": "yarn validate:types",
@@ -18,15 +28,20 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "fork-ts-checker-webpack-plugin": "^9.0.2",
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.5.3",
-    "webpack": "^5.92.1",
-    "webpack-cli": "^5.1.4"
+    "@parcel/config-default": "^2.12.0",
+    "@parcel/plugin": "^2.12.0",
+    "@parcel/resolver-default": "^2.12.0",
+    "parcel": "^2.12.0",
+    "parcel-plugin-externals": "^0.5.2",
+    "typescript": "^5.5.3"
   },
   "dependencies": {
     "@girs/gjs": "workspace:^",
     "@girs/gtk-3.0": "workspace:^",
     "@girs/gtksource-3.0": "workspace:^"
-  }
+  },
+  "externals": [
+    "gi://Gtk?version=3.0",
+    "gi://GtkSource?version=3.0"
+  ]
 }

examples/gtk-3-editor/parcel-resolver-gi.js

@@ -0,0 +1,18 @@
+import {Resolver} from '@parcel/plugin';
+
+const externalImports = ['gettext', 'system', 'cairo'];
+const externalProtocols = ['gi://', 'resource://'];
+
+export default new Resolver({
+  async resolve({specifier}) {
+    if (externalImports.includes(specifier)) {
+      return{isExcluded: true};
+    }
+    if(externalProtocols.some(protocol => specifier.startsWith(protocol))) {
+      return {isExcluded: true};
+    }
+    // Let the next resolver in the pipeline handle
+    // this dependency.
+    return null;
+  }
+});

examples/gtk-3-hello/rollup.config.js

@@ -11,7 +11,7 @@ export default {
 	},
     external: (id) => {
         console.log(id);
-        if(externalImports.some(importName => id === importName)) {
+        if(externalImports.includes(id)) {
             return true;
         }
         if(externalProtocols.some(protocol => id.startsWith(protocol))) {