@jahia/create-module 0.0.2 → 0.0.3

package/jsx/.yarnrc.yml

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

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

@@ -7,9 +7,12 @@
 dist
 node_modules
 
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
+#Yarn
+.yarn/*
+!.yarn/cache
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+yarn-error.log

package/jsx/locales/de.json

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

package/jsx/locales/en.json

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

package/jsx/locales/fr.json

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

package/jsx/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-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",
@@ -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/jsx/src/server/templates/page/PageHome.jsx

@@ -1,14 +1,17 @@
 import React from 'react';
-import {Area, AddResources} from '@jahia/js-server-core';
+import {Area, AddResources, defineJahiaComponent} from '@jahia/js-server-core';
+import {useTranslation} from 'react-i18next';
 
 export const PageHome = () => {
+    const {t} = useTranslation();
     return (<>
         <head>
             <AddResources type='css' resources='styles.css' />
             <title>Home</title>
         </head>
         <body>
-            <h1>Home Template</h1>
+            {/* Using i18next defined in locales */}
+            <h1>{t('homeTitle')}</h1>
             <main>
                 <Area name="pagecontent" />
             </main>
@@ -16,9 +19,9 @@ export const PageHome = () => {
     </>);
 }
 
-PageHome.jahiaComponent = { // This object is used to register the template in Jahia
-    nodeType: 'jnt:page', // The content node type the template applies to
-    name: 'home', // The name of the template
-    displayName: 'Home page', // The display name of the page template
-    componentType: 'template' // the component type is set to template (as opposed to view component types)
-}
+PageHome.jahiaComponent = defineJahiaComponent({
+    nodeType: 'jnt:page', 
+    name: 'home', 
+    displayName: 'Home page', 
+    componentType: 'template'
+});

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useServerContext, getNodeProps } from '@jahia/js-server-core'
+import {useServerContext, getNodeProps, defineJahiaComponent} from '@jahia/js-server-core'
 
 export const HelloDefault = () => {
     const { currentNode } = useServerContext();
@@ -11,8 +11,9 @@ export const HelloDefault = () => {
     )
 }
 
-HelloDefault.jahiaComponent = { // this object is used to register the view in Jahia
-    nodeType: '$$MODULE_NAMESPACE$$:hello', // The content node type the template applies to
-    displayName: 'Hello (default)', // The display name of the view
-    componentType: 'view' // the component type is set to view (as opposed to template component types)
-}
+HelloDefault.jahiaComponent = defineJahiaComponent({
+    name: 'default',
+    nodeType: '$$MODULE_NAMESPACE$$:hello',
+    displayName: 'Hello (default)',
+    componentType: 'view'
+});

package/jsx/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,31 @@ 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) {
+        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 +165,20 @@ module.exports = env => {
                         'import.xml',
                         'package.json'
                     ]
+                }),
+                new WebpackShellPluginNext({
+                    onAfterDone: {
+                        scripts: [
+                            'yarn jahia-pack',
+                            'yarn jahia-deploy',
+                            'sleep 5' // Sleep for 5 seconds, can be adjusted
+                        ],
+                        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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jahia/create-module",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "license": "MIT",
   "type": "module",
   "bin": "./index.js",
@@ -40,8 +40,8 @@
     "version": "git add README.md"
   },
   "engines": {
-    "node": ">=16.0.0",
-    "yarn": ">=3.0.0"
+    "node": ">=18.0.0",
+    "yarn": ">=4.0.0"
   },
-  "packageManager": "yarn@4.1.1"
+  "packageManager": "yarn@4.4.0"
 }