@jahia/create-module 0.0.2 → 0.0.4

package/template/.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.3.1.cjs

package/{jsx → template}/README.md

@@ -9,3 +9,23 @@ If you don't use default configuration for the Docker container name or for Jahi
 ## Documentation
 
 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
+
+1) Enable Corepack if needed : 
+
+`enable corepack`
+
+2) Install the dependencies :
+
+``yarn``
+
+3) Build and run the project :
+
+``yarn watch``
+
+## How to upgrade yarn version to latest stable
+
+This command will upgrade yarn  to the latest stable release and update the yarn installer in .yarn/releases
+
+``yarn set version stable``

package/{handlebars → template}/dotenv

@@ -1,4 +1,4 @@
 JAHIA_USER=root:root1234
 JAHIA_HOST=http://localhost:8080
-JAHIA_DOCKER_NAME=jahia-ee-dev
+# JAHIA_DOCKER_NAME=jahia-ee-dev
 JAHIA_DEPLOY_METHOD=curl

package/template/dotgitignore

@@ -0,0 +1,18 @@
+# Intellij
+.idea
+*.iml
+*.ipr
+
+# Node
+dist
+node_modules
+
+#Yarn
+.yarn/*
+!.yarn/cache
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+yarn-error.log

package/{jsx → template}/dotnpmignore

@@ -6,5 +6,5 @@
 .vscode
 webpack.config.js
 README.md
-settings/README.txt
+settings/README.md
 src

package/{jsx → template}/package.json

@@ -1,30 +1,30 @@
 {
   "name": "$$MODULE_NAME$$",
-  "version": "1.0.0",
+  "version": "0.1.0",
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "build": "webpack --mode=development",
-    "build:production": "webpack --mode=production",
-    "deploy": "jahia-deploy pack",
-    "watch": "yarn build --env deploy=true --watch",
+    "build": "webpack --mode=development && jahia-pack",
+    "build:production": "webpack --mode=production && jahia-pack",
+    "deploy": "jahia-deploy",
+    "watch": "webpack --mode=development --watch",
     "lint": "eslint .",
-    "test": "yarn lint",
-    "postinstall": "yarn dlx @yarnpkg/sdks vscode"
+    "test": "yarn lint"
   },
   "jahia": {
     "module-dependencies": "default",
-    "module-type": "templatesSet",
+    "module-type": "$$MODULE_TYPE$$",
+    "module-type-comment": "Use templatesSet in the module type to declare a template set",
     "server": "dist/main.js",
     "static-resources": "/css,/images,/javascript,/locales"
   },
   "dependencies": {
-    "@apollo/client": "3.5.5",
-    "@jahia/data-helper": "1.0.4",
-    "@jahia/js-server-core": "^0.0.7",
+    "@jahia/js-server-core": "^0.0.13",
     "graphql": "^16.7.1",
+    "i18next": "^23.10.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-i18next": "^14.1.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.16.0",
@@ -32,7 +32,7 @@
     "@babel/preset-env": "^7.16.4",
     "@babel/preset-react": "^7.16.0",
     "@jahia/eslint-config": "^2.1.2",
-    "@jahia/scripts": "^1.3.3",
+    "@jahia/scripts": "^1.3.5",
     "babel-loader": "^8.2.3",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^10.0.0",
@@ -49,8 +49,8 @@
     "webpack-shell-plugin-next": "^2.3.1"
   },
   "engines": {
-    "node": ">=16.0.0",
-    "yarn": ">=3.0.0"
+    "node": ">=18.0.0",
+    "yarn": ">=4.0.0"
   },
-  "packageManager": "yarn@4.1.0"
+  "packageManager": "yarn@4.3.1"
 }

package/template/settings/README.md

@@ -0,0 +1,30 @@
+# Directory Structure
+
+In this directory, you can directly put: 
+- **Rule files** (`*.drl`, `*.dsl`)
+- **URL rewrite XML files**
+- **import.xml** file
+- **definitions.cnd** file
+- **template-thumbnail.png** file to associate a preview image with the current module (in case it's a template module)
+
+## Configurations Directory
+
+In the `configurations` directory, you can put:
+- **OSGi configuration files** (`*.cfg`, `*.yml`)
+
+## Content Editor Forms Directory
+
+In the `content-editor-forms` directory, you can put content editor form and field set overrides.
+See examples here: [Jahia Content Editor Form Examples](https://academy.jahia.com/documentation/jahia/jahia-8/developer/extending-and-customizing-jahia-ui/customizing-content-editor-forms/examples-of-content-definition-json-overrides)
+
+## Content Types Icons Directory
+
+In the `content-types-icons` directory, you can put content type icons following the naming convention: `namespace_type.png`
+
+## Locales Directory
+
+In the `locales` directory, you can put locale files (e.g., `en.json`, `fr.json`) used for internationalization in JavaScript views.
+
+## Resources Directory
+
+In the `resources` directory, you can put resource bundles for content types internationalization.

package/{jsx → template/settings}/definitions.cnd

@@ -3,6 +3,12 @@
 <$$MODULE_NAMESPACE$$ = 'http://www.acme.org/$$MODULE_NAME$$/nt/1.0'>
 <$$MODULE_NAMESPACE$$mix = 'http://www.acme.org/$$MODULE_NAME$$/mix/1.0'>
 
+// Defining the content types is similar to defining a data model: once deployed, you cannot change the type of a property.
+// If you need to do changes during the development phase, it is possible to remove the definitions from the tools:
+// http://localhost:8080/cms/login?redirect=/modules/tools/definitionsBrowser.jsp however that will remove content created with this type.
+// Learn more about content types definitions here: https://academy.jahia.com/developer/content-types"
+
+
 // This mixin creates a category to regroup types in the content type selector UI. Apply it to any definition you want
 // to see in this category.
 [$$MODULE_NAMESPACE$$mix:$$MODULE_NAMESPACE$$Components] > jmix:droppableContent, jmix:accessControllableContent mixin

package/template/settings/locales/de.json

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

package/template/settings/locales/en.json

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

package/template/settings/locales/fr.json

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

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import {Area, AddResources, defineJahiaComponent, useServerContext} from '@jahia/js-server-core';
+import {useTranslation} from 'react-i18next';
+
+export const PageHome = () => {
+    const {t} = useTranslation();
+    const {currentResource} = useServerContext();
+    const lang = currentResource.getLocale().getLanguage();
+    return (<html lang={lang}>
+        <head>
+            <AddResources type='css' resources='styles.css' />
+            <title>Home</title>
+        </head>
+        <body>
+            <main>
+                {/* Using i18next defined in locales */}
+                <h1>{t('homeTitle')}</h1>
+                <Area name="pagecontent" />
+            </main>
+        </body>
+    </html>);
+}
+
+PageHome.jahiaComponent = defineJahiaComponent({
+    nodeType: 'jnt:page',
+    name: 'home',
+    displayName: 'Home page',
+    componentType: 'template'
+});

package/template/src/server/views/hello/HelloDefault.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import {useServerContext, getNodeProps, defineJahiaComponent} from '@jahia/js-server-core'
+
+export const HelloDefault = () => {
+    const { currentNode } = useServerContext();
+    const props = getNodeProps(currentNode, ['textHello']);
+    return (
+        <div>
+            <h2>{props.textHello}</h2>
+        </div>
+    )
+}
+
+HelloDefault.jahiaComponent = defineJahiaComponent({
+    name: 'default',
+    nodeType: '$$MODULE_NAMESPACE$$:hello',
+    displayName: 'Hello (default)',
+    componentType: 'view'
+});

package/{jsx → template}/webpack.config.js

@@ -18,9 +18,13 @@ fs.readdirSync(componentsDir).forEach(file => {
 });
 const moduleName = '$$MODULE_NAME$$';
 
-module.exports = env => {
+module.exports = (env, mode) => {
     let configs = [
+        // Config for jahia's client-side components (HydrateInBrowser or RenderInBrowser)
+        // This config can be removed if the module doesn't contain client-side components
+        // More info here : https://academy.jahia.com/documentation/jahia/jahia-8/developer/javascript-module-development/client-side-javascript
         {
+            name: 'client',
             entry: {
                 [moduleName]: path.resolve(__dirname, './src/client/index')
             },
@@ -52,6 +56,7 @@ module.exports = env => {
                 ]
             },
             plugins: [
+                // This plugin allows a build to provide or consume modules with other independent builds at runtime.
                 new ModuleFederationPlugin({
                     name: moduleName,
                     library: {type: 'assign', name: `window.appShell = (typeof appShell === "undefined" ? {} : appShell); window.appShell['${moduleName}']`},
@@ -70,7 +75,10 @@ module.exports = env => {
             devtool: 'inline-source-map',
             mode: 'development'
         },
+        // Config for jahia's server-side components (using SSR) and source code
+        // Those components have access to jahia's custom types and functions (https://academy.jahia.com/documentation/jahia/jahia-8/developer/javascript-module-development/javascript-modules-reference-documentation)
         {
+            name: 'server',
             entry: {
                 main: path.resolve(__dirname, 'src/server')
             },
@@ -78,8 +86,11 @@ module.exports = env => {
                 path: path.resolve(__dirname, 'dist')
             },
             externals: {
+                // Those libraries are supplied to webpack at runtime (by the npm-module-engine project), and are not packaged in the output bundle
                 '@jahia/js-server-core': 'jsServerCoreLibraryBuilder.getLibrary()',
                 react: 'jsServerCoreLibraryBuilder.getSharedLibrary(\'react\')',
+                'react-i18next': 'jsServerCoreLibraryBuilder.getSharedLibrary(\'react-i18next\')',
+                i18next: 'jsServerCoreLibraryBuilder.getSharedLibrary(\'i18next\')',
                 'styled-jsx/style': 'jsServerCoreLibraryBuilder.getSharedLibrary(\'styled-jsx\')'
             },
             resolve: {
@@ -122,13 +133,34 @@ module.exports = env => {
                     }
                 ]
             },
+            devtool: 'inline-source-map',
+            mode: 'development'
+        }
+    ];
+
+    // In case of watch we add a final config that will do automatic shell commands to trigger the pack and deploy scripts
+    // Also an additional sleep is added to avoid watch triggering too much in a short time
+    // (Feel free to adjust the sleep time according to your needs)
+    if (mode.watch) {
+        // Sleep time in seconds, can be adjusted
+        const sleepTime = 5;
+
+        configs.push({
+            name: 'watch',
+            mode: 'development',
+            dependencies: ['client', 'server'], // Wait for all webpack configs to be done
+            entry: {},
+            output: {},
             plugins: [
                 new ExtraWatchWebpackPlugin({
+                    // This is an extra list of files to watch for changes,
+                    // It should include all files that are not already part of any webpack build
+                    // Also do not watch for webpack generated files places, it can cause infinite loops of watch triggers
+                    // for example, if your css is generated by webpack compiling scss, then:
+                    // - do not add extra watch for 'css/**/*' -> it's the output of webpack scss build
+                    // - do not add extra watch for 'src/scss/**/*' either, as it's already watched by webpack related config.
                     files: [
-                        'src/server/**/*',
                         'images/**/*',
-                        'css/**/*',
-                        'javascript/**/*',
                         'locales/**/*.json',
                         'resources/**/*.properties',
                         'settings/**/*',
@@ -136,26 +168,20 @@ module.exports = env => {
                         'import.xml',
                         'package.json'
                     ]
+                }),
+                new WebpackShellPluginNext({
+                    onAfterDone: {
+                        scripts: [
+                            'yarn jahia-pack',
+                            'yarn jahia-deploy',
+                            process.platform === 'win32' ? 'timeout ' + sleepTime : 'sleep ' + sleepTime
+                        ],
+                        blocking: true,
+                        parallel: false
+                    }
                 })
-            ],
-            devtool: 'inline-source-map',
-            mode: 'development'
-        }
-    ];
-
-    const webpackShellPlugin = new WebpackShellPluginNext({
-        onAfterDone: {
-            scripts: ['yarn jahia-deploy pack']
-        }
-    });
-
-    if (env.deploy) {
-        let config = configs[configs.length - 1];
-        if (!config.plugins) {
-            config.plugins = [];
-        }
-
-        config.plugins.push(webpackShellPlugin);
+            ]
+        });
     }
 
     return configs;

package/babel.config.cjs.disabled

@@ -1,3 +0,0 @@
-module.exports = {
-    presets: ['@babel/preset-env', '@babel/preset-react']
-};

package/handlebars/README.md

@@ -1,11 +0,0 @@
-# $$MODULE_NAME$$
-
-A simple Jahia NPM module created using the NPM module starter project template
-
-## Configuration
-
-If you don't use default configuration for the Docker container name or for Jahia deployments, please modify the provided `.env` file
-
-## Documentation
-
-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.

package/handlebars/components/MODULE_NAMESPACE/hello/hello.cnd

@@ -1,6 +0,0 @@
-<jnt = 'http://www.jahia.org/jahia/nt/1.0'>
-<jmix = 'http://www.jahia.org/jahia/mix/1.0'>
-<$$MODULE_NAMESPACE$$ = 'http://www.acme.org/$$MODULE_NAME$$/nt/1.0'>
-
-[$$MODULE_NAMESPACE$$:hello] > jnt:content, jmix:droppableContent
- - textHello (string) = 'Hello world !' i18n

package/handlebars/components/MODULE_NAMESPACE/hello/hello.default.hbs

@@ -1 +0,0 @@
-<h1>{{currentContent.properties.textHello}}</h1>

package/handlebars/components/jnt/page/page.home.hbs

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" class="no-js">
-
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Home Template</title>
-</head>
-
-<body>
-    <h1>Home Template</h1>
-    <main>
-        {{jArea name="pagecontent"}}
-    </main>
-</body>
-
-</html>

package/handlebars/components/jnt/page/page.home.properties

@@ -1,2 +0,0 @@
-name=Home page
-componentType=template

package/handlebars/definitions.cnd

@@ -1,8 +0,0 @@
-<jnt = 'http://www.jahia.org/jahia/nt/1.0'>
-<jmix = 'http://www.jahia.org/jahia/mix/1.0'>
-<$$MODULE_NAMESPACE$$ = 'http://www.acme.org/$$MODULE_NAME$$/nt/1.0'>
-<$$MODULE_NAMESPACE$$mix = 'http://www.acme.org/$$MODULE_NAME$$/mix/1.0'>
-
-// This mixin creates a category to regroup types in the content type selector UI. Apply it to any definition you want
-// to see in this category.
-[$$MODULE_NAMESPACE$$mix:$$MODULE_NAMESPACE$$Components] > jmix:droppableContent, jmix:accessControllableContent mixin

package/handlebars/doteslintrc.cjs

@@ -1,29 +0,0 @@
-module.exports = {
-    root: true,
-    env: {
-        browser: true,
-        es2021: true
-    },
-    extends: '@jahia',
-    overrides: [
-        {
-            env: {
-                node: true
-            },
-            files: [
-                '.eslintrc.{js,cjs}'
-            ],
-            parserOptions: {
-                sourceType: 'script'
-            }
-        }
-    ],
-    parserOptions: {
-        requireConfigFile: false,
-        ecmaVersion: 'latest',
-        sourceType: 'module'
-    },
-    ignorePatterns: ['dist'],
-    rules: {
-    }
-};

package/handlebars/dotgitignore

@@ -1,15 +0,0 @@
-# Intellij
-.idea
-*.iml
-*.ipr
-
-# Node
-dist
-node_modules
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*

package/handlebars/dotnpmignore

@@ -1,4 +0,0 @@
-.env
-.eslintrc.cjs
-.idea
-*.tgz

package/handlebars/import.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<content xmlns:j="http://www.jahia.org/jahia/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0">
-    <modules jcr:primaryType="jnt:modules">
-        <$$MODULE_NAME$$>
-            <home j:isHomePage="true" j:templateName="home" jcr:primaryType="jnt:page" />
-        </$$MODULE_NAME$$>
-    </modules>
-</content>

package/handlebars/locales/de.json

@@ -1,3 +0,0 @@
-{
-  "greeting": "Hallo !"
-}

package/handlebars/locales/en.json

@@ -1,3 +0,0 @@
-{
-  "greeting": "Hello !"
-}

package/handlebars/locales/fr.json

@@ -1,3 +0,0 @@
-{
-  "greeting": "Salut !"
-}

package/handlebars/package.json

@@ -1,41 +0,0 @@
-{
-  "name": "$$MODULE_NAME$$",
-  "version": "1.0.0",
-  "license": "MIT",
-  "scripts": {
-    "build": "webpack --mode=development",
-    "deploy": "jahia-deploy",
-    "watch": "yarn build --env deploy=true --watch",
-    "lint": "eslint .",
-    "test": "yarn lint",
-    "postinstall": "yarn dlx @yarnpkg/sdks vscode"
-  },
-  "jahia": {
-    "module-dependencies" : "default",
-    "module-type": "templatesSet",
-    "server": "dist/main.js",
-    "static-resources" : "/css,/images,/javascript"
-  },
-  "devDependencies": {
-    "@jahia/eslint-config": "^2.1.2",
-    "@jahia/scripts": "^1.3.3",
-    "eslint": "^8.43.0",
-    "eslint-plugin-jest": "latest",
-    "eslint-plugin-react": "latest",
-    "eslint-plugin-react-hooks": "latest",
-    "extra-watch-webpack-plugin": "latest",
-    "handlebars-loader": "^1.7.3",
-    "typescript": "^5.3.3",
-    "webpack": "^5.88.1",
-    "webpack-cli": "^5.1.4",
-    "webpack-shell-plugin-next": "^2.3.1"
-  },
-  "dependencies": {
-    "handlebars": "^4.7.7",
-    "@jahia/js-server-core" : "^0.0.7"
-  },
-  "engines": {
-    "node": ">=16.0.0",
-    "yarn": ">=3.0.0"
-  }
-}

package/handlebars/resources/MODULE_NAME.properties

@@ -1,2 +0,0 @@
-$$MODULE_NAMESPACE$$_hello=Hello
-$$MODULE_NAMESPACE$$_hello.textHello=Hello world !

package/handlebars/resources/MODULE_NAME_fr.properties

@@ -1,2 +0,0 @@
-$$MODULE_NAMESPACE$$_hello=Bonjour
-$$MODULE_NAMESPACE$$_hello.textHello=Bonjour le monde !

package/handlebars/settings/README.txt

@@ -1,9 +0,0 @@
-In this directory you can put directly : 
-- Rule files (*.drl, *.dsl)
-- URL rewrite XML files
-
-In the configurations directory you can put : 
-- OSGi configuration files (*.cfg, *.yml)
-
-In the jahia-content-editor-forms you can put content editor form and field set overrides, 
-see examples here : https://academy.jahia.com/documentation/jahia/jahia-8/developer/extending-and-customizing-jahia-ui/customizing-content-editor-forms/examples-of-content-definition-json-overrides 

package/handlebars/webpack.config.js

@@ -1,49 +0,0 @@
-const path = require('path');
-const WebpackShellPluginNext = require('webpack-shell-plugin-next');
-const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');
-
-module.exports = env => {
-    const config = {
-        entry: {
-            main: path.resolve(__dirname, 'src/index')
-        },
-        output: {
-            path: path.resolve(__dirname, 'dist')
-        },
-        externals: {
-            '@jahia/js-server-core': 'jsServerCoreLibraryBuilder.getLibrary()',
-            handlebars: 'jsServerCoreLibraryBuilder.getSharedLibrary(\'handlebars\')'
-        },
-        plugins: [
-            new ExtraWatchWebpackPlugin({
-                files: [
-                    'src/**/*',
-                    'components/**/*',
-                    'views/**/*',
-                    'images/**/*',
-                    'css/**/*',
-                    'javascript/**/*',
-                    'locales/**/*.json',
-                    'resources/**/*.properties',
-                    'settings/**/*',
-                    'definitions.cnd',
-                    'import.xml',
-                    'package.json'
-                ]
-            })
-        ],
-        devtool: 'inline-source-map'
-    };
-
-    if (env.deploy) {
-        config.plugins.push(
-            new WebpackShellPluginNext({
-                onAfterDone: {
-                    scripts: ['yarn jahia-deploy pack']
-                }
-            })
-        );
-    }
-
-    return config;
-};

package/jsx/dotenv

@@ -1,4 +0,0 @@
-JAHIA_USER=root:root1234
-JAHIA_HOST=http://localhost:8080
-JAHIA_DOCKER_NAME=jahia-ee-dev
-JAHIA_DEPLOY_METHOD=curl

package/jsx/dotgitignore

@@ -1,15 +0,0 @@
-# Intellij
-.idea
-*.iml
-*.ipr
-
-# Node
-dist
-node_modules
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*

package/jsx/locales/de.json

@@ -1,4 +0,0 @@
-{
-  "greeting": "Hallo !",
-  "welcomeTitle" : "Willkommen bei Jahia!"
-}