@jahia/create-module 0.0.5 → 0.0.7

package/.yarnrc.yml

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

package/babel.config.cjs

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

package/index.js

@@ -122,9 +122,9 @@ fs.renameSync(
 );
 
 // Create empty directories for static resources and configurations
-fs.mkdirSync(path.join(projectDir, 'css'), {recursive: true});
-fs.mkdirSync(path.join(projectDir, 'images'), {recursive: true});
-fs.mkdirSync(path.join(projectDir, 'javascript'), {recursive: true});
+fs.mkdirSync(path.join(projectDir, 'static', 'css'), {recursive: true});
+fs.mkdirSync(path.join(projectDir, 'static', 'images'), {recursive: true});
+fs.mkdirSync(path.join(projectDir, 'static', 'javascript'), {recursive: true});
 fs.mkdirSync(path.join(projectDir, 'settings', 'configurations'), {recursive: true});
 fs.mkdirSync(path.join(projectDir, 'settings', 'content-editor-forms'), {recursive: true});
 fs.mkdirSync(path.join(projectDir, 'settings', 'content-editor-forms', 'forms'), {recursive: true});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jahia/create-module",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "license": "MIT",
   "type": "module",
   "bin": "./index.js",
@@ -25,20 +25,26 @@
   },
   "devDependencies": {
     "@jahia/eslint-config": "^2.1.2",
-    "@jahia/scripts": "^1.3.5",
+    "@jahia/scripts": "^1.3.7",
     "eslint": "^8.43.0",
     "eslint-plugin-jest": "latest",
     "eslint-plugin-react": "latest",
-    "eslint-plugin-react-hooks": "latest"
+    "eslint-plugin-react-hooks": "latest",
+    "jest": "^29.7.0",
+    "jest-each": "^29.7.0",
+    "tar": "^7.4.3"
   },
   "scripts": {
     "lint": "eslint .",
     "posttest": "yarn lint",
-    "test": "rm -rf test-project && node index.js test-project && cd test-project && yarn && yarn build && yarn lint && yarn test && cd .."
+    "test": "jest tests/"
   },
   "engines": {
     "node": ">=18.0.0",
     "yarn": ">=4.0.0"
   },
-  "packageManager": "yarn@4.5.0"
+  "jest": {
+    "testTimeout": 60000
+  },
+  "packageManager": "yarn@4.6.0"
 }

package/template/package.json

@@ -4,22 +4,25 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "build": "webpack --mode=development && jahia-pack",
-    "build:production": "webpack --mode=production && jahia-pack",
+    "build:development": "webpack --mode=development && jahia-pack",
+    "build:production": "webpack && jahia-pack",
+    "build": "run build:production",
+    "clean": "rm -rf dist/",
     "deploy": "jahia-deploy",
     "watch": "webpack --mode=development --watch",
     "lint": "eslint --ext js,jsx .",
     "test": "yarn lint"
   },
   "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": "dist/main.js",
-    "static-resources": "/css,/icons,/images,/javascript,/locales"
+    "static-resources": "/icons,/images,/javascript,/locales"
   },
   "dependencies": {
-    "@jahia/js-server-core": "^0.0.13",
+    "@jahia/javascript-modules-library": "^0.0.4",
     "graphql": "^16.7.1",
     "i18next": "^23.10.1",
     "react": "^18.2.0",
@@ -32,8 +35,9 @@
     "@babel/preset-env": "^7.16.4",
     "@babel/preset-react": "^7.16.0",
     "@jahia/eslint-config": "^2.1.2",
-    "@jahia/scripts": "^1.3.5",
+    "@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",
@@ -43,6 +47,7 @@
     "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",

package/template/src/server/index.js

@@ -1,6 +1,6 @@
 import * as jahiaTemplates from './templates';
 import * as jahiaViews from './views';
-import {registerJahiaComponents} from '@jahia/js-server-core';
+import {registerJahiaComponents} from '@jahia/javascript-modules-library';
 
 registerJahiaComponents(jahiaTemplates);
 registerJahiaComponents(jahiaViews);

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

@@ -1,15 +1,16 @@
 import React from 'react';
-import {Area, AddResources, defineJahiaComponent, useServerContext} from '@jahia/js-server-core';
+import {AddResources, Area, defineJahiaComponent, useServerContext, useUrlBuilder} from '@jahia/javascript-modules-library';
 import {useTranslation} from 'react-i18next';
 
 export const PageHome = () => {
     const {t} = useTranslation();
     const {currentResource} = useServerContext();
+    const {buildStaticUrl} = useUrlBuilder();
     const lang = currentResource.getLocale().getLanguage();
     return (
         <html lang={lang}>
             <head>
-                <AddResources type="css" resources="styles.css"/>
+                <AddResources type="css" resources={buildStaticUrl({assetPath: 'css/styles.css'})}/>
                 <title>Home</title>
             </head>
             <body>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {useServerContext, getNodeProps, defineJahiaComponent} from '@jahia/js-server-core';
+import {useServerContext, getNodeProps, defineJahiaComponent} from '@jahia/javascript-modules-library';
 
 export const SimpleContentDefault = () => {
     const {currentNode} = useServerContext();

package/template/webpack.config.js

@@ -1,8 +1,10 @@
 const fs = require('fs');
 const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
 const WebpackShellPluginNext = require('webpack-shell-plugin-next');
 const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 
 const deps = require('./package.json').dependencies;
 
@@ -18,7 +20,31 @@ fs.readdirSync(componentsDir).forEach(file => {
 });
 const moduleName = '$$MODULE_NAME$$';
 
-module.exports = (env, mode) => {
+const buildOutput = path.resolve(__dirname, 'dist/build');
+const filesToCopyAsIs = ['static/', 'settings/', 'package.json', 'yarn.lock'];
+const copyAsIsPatterns = filesToCopyAsIs.map(dir => ({
+    from: dir,
+    to: path.join(buildOutput, dir)
+}));
+
+module.exports = (env, argv) => {
+    const isDevelopment = argv.mode === 'development';
+    const mode = isDevelopment ? 'development' : 'production';
+    console.log('Building in', mode, 'mode...');
+    let optimization = isDevelopment ? {} : {
+        minimizer: [
+            // This is required to make hydration working, as its implementation relies on the class name of the React component.
+            // See InBrowser.jsx in javascript-modules-library for details
+            new TerserPlugin({
+                terserOptions: {
+                    // eslint-disable-next-line camelcase
+                    keep_classnames: true,
+                    // eslint-disable-next-line camelcase
+                    keep_fnames: true
+                }
+            })
+        ]
+    };
     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
@@ -29,7 +55,7 @@ module.exports = (env, mode) => {
                 [moduleName]: path.resolve(__dirname, './src/client/index')
             },
             output: {
-                path: path.resolve(__dirname, 'javascript/client')
+                path: path.join(buildOutput, 'javascript/client')
             },
             resolve: {
                 mainFields: ['module', 'main'],
@@ -48,13 +74,15 @@ module.exports = (env, mode) => {
                                     '@babel/preset-react'
                                 ],
                                 plugins: [
-                                    'styled-jsx/babel'
-                                ]
+                                    'styled-jsx/babel',
+                                    !isDevelopment && 'transform-react-remove-prop-types'
+                                ].filter(Boolean)
                             }
                         }
                     }
                 ]
             },
+            devtool: isDevelopment ? 'inline-source-map' : 'source-map',
             plugins: [
                 // This plugin allows a build to provide or consume modules with other independent builds at runtime.
                 new ModuleFederationPlugin({
@@ -71,9 +99,15 @@ module.exports = (env, mode) => {
                         i18next: {}
                     }
                 })
-            ],
-            devtool: 'inline-source-map',
-            mode: 'development'
+            ]
+        },
+        {
+            name: 'copy-as-is',
+            plugins: [
+                new CopyWebpackPlugin({
+                    patterns: copyAsIsPatterns
+                })
+            ]
         },
         // 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)
@@ -83,15 +117,15 @@ module.exports = (env, mode) => {
                 main: path.resolve(__dirname, 'src/server')
             },
             output: {
-                path: path.resolve(__dirname, 'dist')
+                path: buildOutput
             },
             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\')'
+                '@jahia/javascript-modules-library': 'javascriptModulesLibraryBuilder.getLibrary()',
+                react: 'javascriptModulesLibraryBuilder.getSharedLibrary(\'react\')',
+                'react-i18next': 'javascriptModulesLibraryBuilder.getSharedLibrary(\'react-i18next\')',
+                i18next: 'javascriptModulesLibraryBuilder.getSharedLibrary(\'i18next\')',
+                'styled-jsx/style': 'javascriptModulesLibraryBuilder.getSharedLibrary(\'styled-jsx\')'
             },
             resolve: {
                 mainFields: ['module', 'main'],
@@ -113,8 +147,9 @@ module.exports = (env, mode) => {
                                     '@babel/preset-react'
                                 ],
                                 plugins: [
-                                    'styled-jsx/babel'
-                                ]
+                                    'styled-jsx/babel',
+                                    !isDevelopment && 'transform-react-remove-prop-types'
+                                ].filter(Boolean)
                             }
                         }
                     },
@@ -133,22 +168,21 @@ module.exports = (env, mode) => {
                     }
                 ]
             },
-            devtool: 'inline-source-map',
-            mode: 'development'
+            devtool: isDevelopment ? 'inline-source-map' : 'source-map',
+            optimization: optimization
         }
     ];
 
     // 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) {
+    if (argv.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
+            dependencies: ['client', 'server', 'copy-as-is'], // Wait for all webpack configs to be done
             entry: {},
             output: {},
             plugins: [
@@ -157,16 +191,9 @@ module.exports = (env, mode) => {
                     // 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 'dist/build/static/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: [
-                        'images/**/*',
-                        'locales/**/*.json',
-                        'resources/**/*.properties',
-                        'settings/**/*',
-                        'definitions.cnd',
-                        'import.xml',
-                        'package.json'
                     ]
                 }),
                 new WebpackShellPluginNext({
@@ -184,5 +211,15 @@ module.exports = (env, mode) => {
         });
     }
 
+    configs.forEach(config => {
+        // Ensure no default entry points are used
+        if (!config.entry) {
+            config.entry = {};
+        }
+
+        // Set the mode development/production
+        config.mode = mode;
+    });
+
     return configs;
 };

package/tests/create-templatesSet-project.test.js

@@ -0,0 +1,119 @@
+import {execSync} from 'child_process';
+import fs from 'fs';
+import os from 'os';
+import path from 'path';
+import * as tar from 'tar';
+import each from 'jest-each';
+
+let tempFolder;
+
+beforeAll(() => {
+    // Create a temporary directory
+    tempFolder = fs.mkdtempSync(os.tmpdir());
+    console.log('Using temp folder ', tempFolder);
+});
+
+afterAll(() => {
+    // Remove the temporary directory
+    fs.rmSync(tempFolder, {recursive: true, force: true});
+    console.log(`Temp folder ${tempFolder} removed.`);
+});
+
+describe('npx @jahia/create-module', () => {
+    each([
+        ['test-project', 'testProject', 'templatesSet'],
+        ['otherSampleProject', 'otherSampleProject', 'module'],
+        ['foo', 'foo', '']
+    ]).it('Project creation using archetype (\'%s\'/\'%s\' with moduleType \'%s\')', async (projectName, projectNameSanitized, moduleType) => {
+        // Create a temporary directory
+        const tempDir = fs.mkdtempSync(path.join(tempFolder, projectNameSanitized));
+        console.log('tempDir', tempDir);
+
+        const parentFolder = path.dirname(__dirname);
+        const indexFile = path.join(parentFolder, 'index.js');
+        const isTemplatesSet = moduleType === 'templatesSet';
+
+        // Create a new test-project from within the temp directory
+        process.chdir(tempDir);
+        console.log(execSync(`node ${indexFile} ${projectName} ${moduleType}`).toString());
+        const projectPath = path.join(tempDir, projectName);
+        expect(fs.existsSync(projectPath)).toBe(true);
+
+        // TODO check the replacement of the markers in the files
+
+        // Validate the generated project structure
+        const expectedFiles = [
+            // Make sure the dot files have been renamed
+            '.gitignore',
+            '.npmignore',
+            '.env',
+            '.eslintrc.cjs',
+            // Make sure the renaming with MODULE_NAME is correct
+            `settings/resources/${projectName}.properties`,
+            `settings/resources/${projectName}_fr.properties`,
+            `settings/content-types-icons/${projectNameSanitized}_simpleContent.png`,
+            // Make sure the static and config folders exist
+            'static/css',
+            'static/images',
+            'static/javascript',
+            'settings/configurations',
+            'settings/content-editor-forms/forms',
+            'settings/content-editor-forms/fieldsets'
+        ];
+        if (moduleType === 'templatesSet') {
+            // This file should only exist for templates set
+            expectedFiles.push('settings/template-thumbnail.png');
+        }
+
+        expectedFiles.forEach(file => {
+            console.log(`Testing that ${file} exists...`);
+            expect(fs.existsSync(path.join(projectPath, file))).toBe(true);
+        });
+
+        // Install & build the project
+        process.chdir(projectPath);
+        // YARN_ENABLE_IMMUTABLE_INSTALLS=false is used as the yarn.lock file gets updated
+        // Without this flag, the following error is encountered: "The lockfile would have been created by this install, which is explicitly forbidden."
+        console.log(execSync('YARN_ENABLE_IMMUTABLE_INSTALLS=false yarn install').toString());
+        console.log(execSync('yarn build').toString());
+
+        // Make sure the tgz file is created in the dist/ folder
+        const tgzFilePath = path.join(projectPath, 'dist', `${projectName}-v0.1.0-SNAPSHOT.tgz`);
+        expect(fs.existsSync(tgzFilePath)).toBe(true);
+
+        // Check the contents of the tgz file
+        const expectedFilesInArchive = [
+            'javascript/client/remote.js',
+            'javascript/client/remote.js.map',
+            `settings/content-types-icons/${projectNameSanitized}_simpleContent.png`,
+            'settings/locales/de.json',
+            'settings/locales/en.json',
+            'settings/locales/fr.json',
+            `settings/resources/${projectName}.properties`,
+            `settings/resources/${projectName}_fr.properties`,
+            'settings/definitions.cnd',
+            'settings/import.xml',
+            'settings/README.md',
+            isTemplatesSet && 'settings/template-thumbnail.png',
+            'static/css/styles.css',
+            'main.js',
+            'main.js.map',
+            'package.json'
+        ].filter(Boolean);
+
+        const entries = [];
+        await tar.list({
+            file: tgzFilePath,
+            onReadEntry: entry => {
+                entries.push(entry.path);
+            }
+        }).then(() => {
+            expectedFilesInArchive.forEach(file => {
+                console.log(`Testing that ${file} exists in the archive...`);
+                expect(entries.includes(`package/${file}`)).toBe(true);
+            });
+            expect(entries.length).toBe(expectedFilesInArchive.length);
+        });
+    }
+    );
+});