@ts-for-gir/generator-typescript 3.2.3 → 3.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ts-for-gir/generator-typescript",
-  "version": "3.2.3",
+  "version": "3.2.5",
   "description": "TypeScript type definition generator for ts-for-gir",
   "module": "lib/index.js",
   "main": "lib/index.js",
@@ -35,18 +35,18 @@
     "generator"
   ],
   "devDependencies": {
-    "@types/node": "^20.8.10",
-    "@typescript-eslint/eslint-plugin": "^6.9.1",
-    "@typescript-eslint/parser": "^6.9.1",
-    "eslint": "^8.52.0",
+    "@types/node": "^20.9.0",
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
+    "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
-    "prettier": "^3.0.3",
+    "prettier": "^3.1.0",
     "rimraf": "^5.0.5",
     "typescript": "^5.2.2"
   },
   "dependencies": {
-    "@ts-for-gir/generator-base": "^3.2.3",
-    "@ts-for-gir/lib": "^3.2.3"
+    "@ts-for-gir/generator-base": "^3.2.5",
+    "@ts-for-gir/lib": "^3.2.5"
   }
 }

package/templates/README.md

@@ -97,6 +97,19 @@ const <%= pkg.namespace %> = imports.gi.<%= pkg.namespace %>;
 ```
 <%_ } _%>
 
+
+### ESM vs. CommonJS
+
+GJS supports two different import syntaxes. The new modern ESM syntax and the old global imports syntax.
+
+In TypeScript projects for GJS and GNOME Shell extensions, you have the flexibility to use `ESM` syntax and then decide the import syntax for your bundled file. If your bundler is configured to use `CommonJS`, it will convert to the GJS-specific global imports syntax, like `const moduleName = imports.gi[moduleName]`. This is different from the traditional `require` syntax seen in Node.js. The global imports syntax is chosen because it aligns with the CommonJS format supported by NPM, which is used for the generated type definitions and this package.
+
+On the other hand, if you configure your bundler to use ESM, it will retain the ESM import syntax. It's crucial to ensure that your bundler is set up to correctly translate and bundle these imports into either CommonJS or ESM format, depending on your project's requirements.
+
+This approach is particularly important due to the `@girs` types, which include both `*.cjs `files, using the GJS global imports syntax, and `*.js` files, which utilize the ESM syntax. By appropriately setting up your bundler, you can control which syntax—CommonJS or ESM—is used in your project. The choice of CommonJS in this context is also due to the similarity between the GJS-specific global imports and CommonJS syntax, allowing for easier management and bundling in these specific types of projects.
+
+Since GNOME Shell 45, you should only use ESM, even for GNOME Shell extensions. Before that, extensions had to use the global import syntax, unlike normal GJS applications, where ESM has been available for some time.
+
 ### Bundle
 
 Depending on your project configuration, it is recommended to use a bundler like [esbuild](https://esbuild.github.io/). You can find examples using different bundlers [here](https://github.com/gjsify/ts-for-gir/tree/main/examples).

package/templates/gjs/module-ambient.d.ts

@@ -1,7 +1,7 @@
 <%#
-    This EJS template is used for the generated .d.ts files for ambient typescript module support.
-    See https://www.typescriptlang.org/docs/handbook/modules.html#ambient-modules
-%>
+    // This EJS template is used for the generated .d.ts files for ambient typescript module support.
+    // See https://www.typescriptlang.org/docs/handbook/modules.html#ambient-modules
+_%>
 <%_ const pkg = dep.get(girModule.namespace, girModule.version) _%>
 <%_ let moduleImportStr = ""; _%>
 <%_ if(package){ _%>
@@ -23,7 +23,8 @@ declare module 'gi://<%= name %>?version=<%= version %>' {
     export default <%- girModule.importNamespace -%>;
 }
 
-<%_ if(!dep.hasConflict(name, version)){ _%>
+<%# // Generate ambient module declarations Without version number if there are no conflicts or the target is an NPM package _%>
+<%_ if(package || !dep.hasConflict(name, version)){ _%>
 declare module 'gi://<%= name %>' {
     <%- moduleImportStr %>;
     export default <%- girModule.importNamespace -%>;

package/templates/gjs/module-import.d.ts

@@ -1,6 +1,6 @@
 <%#
-    This EJS template is used to extend the global GjsGiImports interface with the GIR module, for `imports.gi[namespace] GJS GIR types`
-%>
+    // This EJS template is used to extend the global GjsGiImports interface with the GIR module, for `imports.gi[namespace] GJS GIR types`
+_%>
 <%_ if(!package && !dep.isLatestVersion(girModule.namespace, girModule.version)){ _%>
 <%_ return `// Module import type definition not generated, otherwise this would cause a type conflict, this is because several GIR modules were generated with the same namespace: "${ girModule.namespace }"` _%>
 <%_ } _%>