@jahia/create-module 0.0.9 → 0.5.3

package/template/README.md

@@ -1,6 +1,6 @@
 # $$MODULE_NAME$$
 
-A simple Jahia NPM module created using the NPM module starter project template
+A simple Jahia Javascript module created using the Javascript module starter project template
 
 ## Configuration
 
@@ -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
+```

package/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

package/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

package/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>

package/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>

package/template/dotprettierignore

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

package/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"
+}

package/template/dotyarnrc.yml

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

package/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")),
+);

package/template/package.json

@@ -1,60 +1,58 @@
 {
   "name": "$$MODULE_NAME$$",
   "version": "0.1.0",
-  "main": "index.js",
   "license": "MIT",
+  "type": "module",
+  "main": "dist/server/index.js",
+  "files": [
+    "dist/client/**/*",
+    "dist/server/**/*",
+    "settings",
+    "static"
+  ],
   "scripts": {
-    "build:development": "webpack --mode=development && jahia-pack",
-    "build:production": "webpack && jahia-pack",
-    "build": "run build:production",
+    "build": "tsc --noEmit && vite build && run package",
     "clean": "rm -rf dist/",
     "deploy": "jahia-deploy",
-    "watch": "webpack --mode=development --watch",
-    "lint": "eslint --ext js,jsx .",
-    "test": "yarn lint"
+    "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": {
+    "@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": {
+    "node": ">=18.0.0",
+    "yarn": ">=4.0.0"
   },
   "jahia": {
     "snapshot": true,
     "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": {
-    "graphql": "^16.7.1",
-    "i18next": "^23.10.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-i18next": "^14.1.0"
-  },
-  "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",
-    "@jahia/scripts": "^1.3.7",
-    "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",
-    "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"
-  },
-  "engines": {
-    "node": ">=18.0.0",
-    "yarn": ">=4.0.0"
-  },
-  "packageManager": "yarn@4.3.1"
+    "modern-normalize": "^3.0.1"
+  }
 }

package/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"],
+};

package/template/settings/README.md

@@ -1,6 +1,7 @@
 # Directory Structure
 
-In this directory, you can directly put: 
+In this directory, you can directly put:
+
 - **Rule files** (`*.drl`, `*.dsl`)
 - **URL rewrite XML files**
 - **import.xml** file
@@ -10,6 +11,7 @@ In this directory, you can directly put:
 ## Configurations Directory
 
 In the `configurations` directory, you can put:
+
 - **OSGi configuration files** (`*.cfg`, `*.yml`)
 
 ## Content Editor Forms Directory

package/template/settings/import.xml

@@ -3,7 +3,11 @@
     <modules jcr:primaryType="jnt:modules">
         <$$MODULE_NAME$$>
             <home j:isHomePage="true" j:templateName="home" jcr:primaryType="jnt:page">
+                <j:translation_en jcr:language="en"
+                              jcr:mixinTypes="mix:title"
+                              jcr:primaryType="jnt:translation"
+                              jcr:title="Home"/>
             </home>
         </$$MODULE_NAME$$>
     </modules>
-</content>
+</content>

package/template/settings/locales/de.json

@@ -1,5 +1,5 @@
 {
   "greeting": "Hallo !",
-  "welcomeTitle" : "Willkommen bei Jahia!",
+  "welcomeTitle": "Willkommen bei Jahia!",
   "homeTitle": "Startvorlage"
-}
+}

package/template/settings/locales/en.json

@@ -1,5 +1,5 @@
 {
-  "greeting": "Hello !", 
-  "welcomeTitle" : "Welcome to Jahia !",
+  "greeting": "Hello !",
+  "welcomeTitle": "Welcome to Jahia !",
   "homeTitle": "Home Template"
-}
+}

package/template/settings/locales/fr.json

@@ -1,5 +1,5 @@
 {
   "greeting": "Salut !",
-  "welcomeTitle" : "Bienvenue chez Jahia !",
+  "welcomeTitle": "Bienvenue chez Jahia !",
   "homeTitle": "Template Accueil"
-}
+}

package/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)

package/template/src/server/templates/page/PageHome.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import {
+  AddResources,
+  Area,
+  jahiaComponent,
+  useUrlBuilder,
+} from "@jahia/javascript-modules-library";
+import { useTranslation } from "react-i18next";
+import "modern-normalize/modern-normalize.css";
+
+jahiaComponent(
+  {
+    nodeType: "jnt:page",
+    name: "home",
+    displayName: "Home page",
+    componentType: "template",
+  },
+
+  (_, { currentResource }) => {
+    const { t } = useTranslation();
+    const { buildStaticUrl } = useUrlBuilder();
+    const lang = currentResource.getLocale().getLanguage();
+    return (
+      <html lang={lang}>
+        <head>
+          <AddResources
+            type="css"
+            resources={buildStaticUrl({ assetPath: "../dist/server/index.css" })}
+          />
+          <AddResources type="css" resources={buildStaticUrl({ assetPath: "css/styles.css" })} />
+          <title>Home</title>
+        </head>
+        <body>
+          <main>
+            {/* Using i18next defined in locales */}
+            <h1>{t("homeTitle")}</h1>
+            <Area name="pagecontent" />
+          </main>
+        </body>
+      </html>
+    );
+  },
+);

package/template/src/server/views/simpleContent/SimpleContentDefault.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { jahiaComponent } from "@jahia/javascript-modules-library";
+
+jahiaComponent(
+  {
+    name: "default",
+    nodeType: "$$MODULE_NAMESPACE$$:simpleContent",
+    displayName: "Simple Content (default)",
+    componentType: "view",
+  },
+  ({ title }) => (
+    <div>
+      <h2>{title}</h2>
+    </div>
+  ),
+);

package/template/static/css/styles.css

@@ -1,8 +1,8 @@
 body {
-    font-family: 'Helvetica Neue', Arial, sans-serif;
-    margin: 0;
-    padding: 40px;
-    background-color: #f5f5f5;
-    color: #333;
-    line-height: 1.6;
-}
+  font-family: "Helvetica Neue", Arial, sans-serif;
+  margin: 0;
+  padding: 40px;
+  background-color: #f5f5f5;
+  color: #333;
+  line-height: 1.6;
+}

package/template/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "allowJs": true,
+    "checkJs": true,
+    "moduleResolution": "bundler",
+    "jsx": "preserve",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitAny": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "lib": ["esnext", "dom"],
+    "declaration": true,
+    "declarationDir": "dist",
+    "baseUrl": ".",
+    "paths": {
+      "*": ["target/types/*"]
+    }
+  },
+  "include": ["src/**/*.js", "src/**/*.mjs", "src/**/*.ts", "src/**/*.tsx", "src/**/*.jsx"],
+  "exclude": ["node_modules"]
+}

package/template/vite.config.mjs

@@ -0,0 +1,33 @@
+import { defineConfig } from "vite";
+import jahia from "@jahia/vite-plugin";
+import path from "node:path";
+import { spawnSync } from "node:child_process";
+
+export default defineConfig({
+  resolve: {
+    alias: { $client: path.resolve("./src/client") },
+  },
+  plugins: [
+    jahia({
+      client: {
+        input: {
+          dir: "./src/client/",
+          glob: "**/*.{jsx,tsx}",
+        },
+        output: "./dist/client/",
+      },
+      server: {
+        // You can use a glob pattern to match multiple files
+        input: "./src/server/**/*.{jsx,tsx}",
+        output: {
+          dir: "./dist/server",
+          fileName: "index", // Will produce index.js and index.css
+        },
+      },
+      // This function is called every time a build succeeds in watch mode
+      watchCallback() {
+        spawnSync("yarn", ["watch:callback"], { stdio: "inherit" });
+      },
+    }),
+  ],
+});