feat: Use Vite in the template

javascript-create-module/index.js

@@ -92,10 +92,13 @@ try {
 // up by the starter template repository). We can rename
 // the dotfiles after we have copied them over to the
 // new project directory.
-fs.renameSync(path.join(projectDir, "dotgitignore"), path.join(projectDir, ".gitignore"));
-fs.renameSync(path.join(projectDir, "dotnpmignore"), path.join(projectDir, ".npmignore"));
 fs.renameSync(path.join(projectDir, "dotenv"), path.join(projectDir, ".env"));
-fs.renameSync(path.join(projectDir, "doteslintrc.cjs"), path.join(projectDir, ".eslintrc.cjs"));
+fs.renameSync(path.join(projectDir, "dotgitignore"), path.join(projectDir, ".gitignore"));
+fs.renameSync(path.join(projectDir, "dotprettierignore"), path.join(projectDir, ".prettierignore"));
+fs.renameSync(path.join(projectDir, "dotyarnrc.yml"), path.join(projectDir, ".yarnrc.yml"));
+fs.renameSync(path.join(projectDir, "dotgithub"), path.join(projectDir, ".github"));
+fs.renameSync(path.join(projectDir, "dotidea"), path.join(projectDir, ".idea"));
+fs.renameSync(path.join(projectDir, "dotvscode"), path.join(projectDir, ".vscode"));
 
 // Rename the resource file to use the project name
 fs.renameSync(

javascript-create-module/package.json

@@ -19,13 +19,10 @@
   "bin": "./index.js",
   "scripts": {
     "lint": "yarn run --top-level lint",
-    "test": "jest tests/",
+    "test": "node --test",
     "build": "mkdir -p dist && yarn pack --out dist/package.tgz && publint",
     "posttest": "yarn lint"
   },
-  "jest": {
-    "testTimeout": 60000
-  },
   "dependencies": {
     "camelcase": "^8.0.0",
     "path": "^0.12.7",
@@ -40,8 +37,6 @@
     "eslint-plugin-jest": "latest",
     "eslint-plugin-react": "latest",
     "eslint-plugin-react-hooks": "latest",
-    "jest": "^29.7.0",
-    "jest-each": "^29.7.0",
     "publint": "^0.3.6",
     "tar": "^7.4.3"
   },

javascript-create-module/template/README.md

@@ -10,22 +10,30 @@ If you don't use default configuration for the Docker container name or for Jahi
 
 You can find the documentation on how to use this module on the [Jahia Academy](https://academy.jahia.com/get-started/developers/templating) templating tutorial.
 
-## Run
+## Prerequisites
 
-1. Enable Corepack if needed :
+Yarn is required to build the project.
 
-`enable corepack`
+Please follow the instructions at [Node.js Downloads](https://nodejs.org/en/download) to install Node.js and Yarn. In the dropdown menus, make sure to select Yarn (the _with_) and your operating system (the _for_).
 
-2. Install the dependencies :
+Note: If you are using a Windows machine, you need to run your `yarn` commands in PowerShell (not cmd.exe!). It comes preinstalled on modern Windows versions. In case this is not the case on your machine, [please see Microsoft documentation](https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell-on-windows?view=powershell-7.5).
 
-`yarn`
+## Development
 
-3. Build and run the project :
+1. To compile and package the project:
 
-`yarn watch`
+```
+yarn build
+```
 
-## How to upgrade yarn version to latest stable
+2. To deploy the generated package to your Jahia instance (configured in your [`.env`](.env)):
 
-This command will upgrade yarn to the latest stable release and update the yarn installer in .yarn/releases
+```
+yarn deploy
+```
 
-`yarn set version stable`
+3. Alternatively, to deploy during development using watch mode:
+
+```
+yarn watch
+```

javascript-create-module/template/dotgithub/workflows/build.yml

@@ -0,0 +1,21 @@
+name: Build
+on: [push]
+jobs:
+  build-and-pack:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set Node.js 22.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22.x
+      - run: corepack enable
+      - name: Install dependencies
+        run: yarn install
+      - name: Bundle package
+        run: yarn build
+      - name: Upload package.tgz
+        uses: actions/upload-artifact@v4
+        with:
+          name: package.tgz
+          path: dist/package.tgz

javascript-create-module/template/dotgitignore

@@ -1,5 +1,7 @@
 # Intellij
 .idea
+!.idea/jsLinters/**
+!.idea/prettier.xml
 *.iml
 *.ipr
 
@@ -8,14 +10,6 @@ dist
 node_modules
 
 #Yarn
-.yarn/*
-!.yarn/cache
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
+.yarn
 yarn-error.log
 
-# generated .tgz file
-$$MODULE_NAME$$-*.tgz

javascript-create-module/template/dotidea/jsLinters/eslint.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="EslintConfiguration">
+    <option name="fix-on-save" value="true" />
+  </component>
+</project>

javascript-create-module/template/dotidea/prettier.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myConfigurationMode" value="AUTOMATIC" />
+    <option name="myRunOnSave" value="true" />
+  </component>
+</project>

javascript-create-module/template/dotprettierignore

@@ -0,0 +1 @@
+# This file inherits .gitignore, there is no need to copy its content here

javascript-create-module/template/dotvscode/settings.json

@@ -0,0 +1,11 @@
+{
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
+    "eslint.validate": [
+        "javascript",
+        "javascriptreact",
+        "typescript",
+        "typescriptreact"
+    ],
+    "eslint.run": "onSave"
+}

javascript-create-module/template/dotyarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

javascript-create-module/template/eslint.config.js

@@ -0,0 +1,25 @@
+// @ts-check
+import { includeIgnoreFile } from "@eslint/compat";
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+import path from "node:path";
+import globals from "globals";
+import eslintReact from "@eslint-react/eslint-plugin";
+
+export default tseslint.config(
+  {
+    languageOptions: {
+      globals: { ...globals.browser, ...globals.node },
+    },
+  },
+
+  // JS/TS recommended
+  eslint.configs.recommended,
+  { files: ["**/*.ts", "**/*.tsx"], extends: tseslint.configs.recommended },
+
+  // React
+  eslintReact.configs["recommended-typescript"],
+
+  // Ignore the same files as .gitignore
+  includeIgnoreFile(path.resolve(import.meta.dirname, ".gitignore")),
+);

javascript-create-module/template/package.json

@@ -2,47 +2,42 @@
   "name": "$$MODULE_NAME$$",
   "version": "0.1.0",
   "license": "MIT",
-  "main": "index.js",
+  "type": "module",
+  "main": "dist/server/index.js",
+  "files": [
+    "dist/client/**/*",
+    "dist/server/**/*",
+    "settings",
+    "static"
+  ],
   "scripts": {
-    "build": "run build:production",
-    "build:development": "webpack --mode=development && run pack",
-    "build:production": "webpack && run pack",
+    "build": "tsc --noEmit && vite build && run package",
     "clean": "rm -rf dist/",
     "deploy": "jahia-deploy",
-    "lint": "eslint --ext js,jsx .",
-    "pack": "mkdir -p dist/build && cd dist/build && yarn pack --out package.tgz && mv package.tgz ..",
-    "test": "yarn lint",
-    "watch": "webpack --mode=development --watch"
-  },
-  "dependencies": {
-    "@jahia/javascript-modules-library": "0.x || ^1.0.0"
+    "format": "prettier --write --list-different .",
+    "lint": "eslint .",
+    "package": "mkdir -p dist && yarn pack --out dist/package.tgz",
+    "watch": "vite build --watch",
+    "watch:callback": "run package && run deploy"
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.0",
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.4",
-    "@babel/preset-react": "^7.16.0",
-    "@jahia/eslint-config": "^2.1.2",
-    "babel-loader": "^8.2.3",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^10.0.0",
-    "dotenv-cli": "^4.0.0",
-    "eslint": "^8.43.0",
-    "eslint-plugin-jest": "latest",
-    "eslint-plugin-react": "latest",
-    "eslint-plugin-react-hooks": "latest",
-    "extra-watch-webpack-plugin": "^1.0.3",
-    "i18next": "23.10.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-i18next": "14.1.0",
-    "styled-jsx": "5.1.2",
-    "terser-webpack-plugin": "^5.3.10",
-    "typescript": "^5.3.3",
-    "webpack": "^5.64.4",
-    "webpack-cli": "^4.9.1",
-    "webpack-shell-plugin-next": "^2.3.1"
+    "@eslint-react/eslint-plugin": "^1.26.2",
+    "@eslint/compat": "^1.2.6",
+    "@eslint/js": "^9.20.0",
+    "@jahia/javascript-modules-library": "0.x || ^1.0.0",
+    "@jahia/vite-plugin": "^0.5.1",
+    "@types/react": "^19.0.0",
+    "eslint": "^9.20.1",
+    "eslint-plugin-cypress": "^4.1.0",
+    "globals": "^15.15.0",
+    "i18next": "^23.10.1",
+    "prettier": "^3.5.1",
+    "prettier-plugin-jsdoc": "^1.3.2",
+    "prettier-plugin-packagejson": "^2.5.8",
+    "react-i18next": "^15.4.0",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.24.0",
+    "vite": "^6.1.0"
   },
   "packageManager": "yarn@4.3.1",
   "engines": {
@@ -54,7 +49,10 @@
     "module-dependencies": "default",
     "module-type": "$$MODULE_TYPE$$",
     "module-type-comment": "Use templatesSet in the module type to declare a template set",
-    "server": "main.js",
+    "server": "dist/server/index.js",
     "static-resources": "/icons,/images,/javascript,/locales"
+  },
+  "dependencies": {
+    "modern-normalize": "^3.0.1"
   }
 }

javascript-create-module/template/prettier.config.js

@@ -0,0 +1,9 @@
+/**
+ * @type {import("prettier").Config}
+ * @see https://prettier.io/docs/en/configuration.html
+ */
+export default {
+  quoteProps: "consistent",
+  printWidth: 100,
+  plugins: ["prettier-plugin-jsdoc", "prettier-plugin-packagejson"],
+};

javascript-create-module/template/src/client/index.jsx

@@ -1,5 +1 @@
-// PublicPath is used to make webpack able to download the chunks and assets from the correct location
-// Since JS can be aggregated by Jahia on live, the path of the original file is lost
-// Also the context of the server should be handled properly
-// eslint-disable-next-line camelcase, no-undef
-__webpack_public_path__ = `${window.__APPSHELL_INIT_DATA__.moduleBaseUrl}/$$MODULE_NAME$$/javascript/client/`;
+// define your client components in this folder (configured in vite.config.mjs: client.input.dir)