@jahia/create-module 0.5.6 → 0.6.1

package/README.md

@@ -1,16 +1,15 @@
-# Javascript Module template create-module project
+# @jahia/create-module
 
-This project provides a Javascript module starter project template to quickly get up and running to create Jahia Javascript modules
+This CLI scaffolds a new Jahia JavaScript module.
 
 ## Usage
 
-    npx @jahia/create-module@latest project-name [module-type] [namespace-definitions]
+To create a new module, run:
 
-where
+```
+npm init @jahia/module@latest <module-name>
+```
 
-- `project-name` (mandatory) can be anything you want to call your project
-- `module-type` (optional) Can be one of:
-  - `templatesSet`: A collection of templates and components. A template set is required when creating a website.
-  - `module`: Standard Jahia module. This is the default value.
-  - `system`: Critical module for the whole platform.
-- `namespace-definitions` (optional) The namespace used for content definitions. Default is the project name in camel case.
+It creates a new JavaScript Module in a directory named `module-name` in the current working directory.
+
+See the [Getting Started guide](https://github.com/Jahia/javascript-modules/tree/main/docs/1-getting-started/1-dev-environment#create-a-new-project) for more information.

package/index.js

@@ -26,7 +26,7 @@ Upgrade guide: ${styleText("underline", "https://nodejs.org/en/download")}
     console.error(
       `No module name provided.
 
-  Usage: npm init @jahia/module ${styleText("blueBright", "<module-name>")}
+  Usage: npm init @jahia/module@latest ${styleText("blueBright", "<module-name>")}
 
 It will create a new module at this location with the provided name:
 
@@ -82,7 +82,7 @@ Next steps:
     "# Commit all files",
   )}
   ${styleText("magentaBright", "code .")}  ${styleText("dim", "# Open the project in VSCode")}
-  ${styleText("magentaBright", "yarn dev")}  ${styleText("dim", "# Start the development server")}
+  ${styleText("magentaBright", "yarn build && yarn dev")}  ${styleText("dim", "# Build and start the dev mode")}
 `);
 } catch (error) {
   console.error(

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@jahia/create-module",
-  "version": "0.5.6",
+  "version": "0.6.1",
   "keywords": [
     "template"
   ],
-  "homepage": "https://github.com/Jahia/javascript-modules/javascript-create-module",
+  "homepage": "https://github.com/Jahia/javascript-modules/tree/main/javascript-create-module#readme",
   "bugs": {
     "url": "https://github.com/Jahia/javascript-modules/issues"
   },

package/template/README.md

@@ -1,39 +1,24 @@
-# Jahia Javascript Module
+# Welcome!
 
-A simple Jahia Javascript module created using the Javascript module starter project template
+Your JavaScript module was successfully created. If this is your first time creating a module, you may want to consult the [Getting Started guide](https://github.com/Jahia/javascript-modules/tree/main/docs/1-getting-started/1-dev-environment#create-a-new-project).
 
-## 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.
-
-## Prerequisites
-
-Yarn is required to build the project.
+This README assumes you have a working development environment with Node.js, Yarn and Docker installed and configured. Please refer to the [Getting Started](https://github.com/Jahia/javascript-modules/tree/main/docs/1-getting-started/1-dev-environment#pre-requisites) guide if you need help setting up your environment.
 
-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_).
+## Scripts
 
-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).
+This module comes with some scripts to help you develop your module. You can run them with `yarn <script>`:
 
-## Development
+| Category     | Script                | Description                                                             |
+| ------------ | --------------------- | ----------------------------------------------------------------------- |
+| Build        | `build`               | Produces a deployable artifact that can be uploaded to a Jahia instance |
+| Build        | `deploy`              | Pushes the build artifact to a Jahia instance                           |
+| Development  | `dev` (alias `watch`) | Watches for changes and rebuilds the module                             |
+| Code quality | `format`              | Runs Prettier (a code formatter) on your code                           |
+| Code quality | `lint`                | Runs ESLint (a linter) on your code                                     |
+| Utils        | `clean`               | Removes build artifacts                                                 |
+| Utils        | `package`             | Packs distributions files in a `.tgz` archive inside the `dist/` folder  |
+| Utils        | `watch:callback`      | Called every time a build succeeds in watch mode                        |
 
-1. To compile and package the project:
-
-```
-yarn build
-```
-
-2. To deploy the generated package to your Jahia instance (configured in your [`.env`](.env)):
-
-```
-yarn deploy
-```
-
-3. Alternatively, to deploy during development using watch mode:
+## Configuration
 
-```
-yarn watch
-```
+If you don't use default configuration for the Docker container name or for Jahia deployments, please modify the provided `.env` file

package/template/settings/definitions.cnd

@@ -1,12 +1,14 @@
 <jnt = 'http://www.jahia.org/jahia/nt/1.0'>
 <jmix = 'http://www.jahia.org/jahia/mix/1.0'>
 <$MODULE = 'https://example.com/$MODULE/1.0'>
+<$MODULEmix = 'https://example.com/$MODULEmix/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"
+// Learn more about content types definitions here:
+// https://github.com/Jahia/javascript-modules/tree/main/docs/3-reference/1-cnd-format/
 
 // 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:component] > jmix:droppableContent, jmix:accessControllableContent mixin
+[$MODULEmix:component] > jmix:droppableContent, jmix:accessControllableContent mixin

package/template/settings/import.xml

@@ -26,7 +26,7 @@
           jcr:mixinTypes="jmix:isAreaList"
           jcr:primaryType="jnt:contentList"
           >
-          <hello-world jcr:primaryType="$MODULE:HelloWorld">
+          <hello-world jcr:primaryType="$MODULE:helloWorld">
             <j:translation_en
               jcr:language="en"
               jcr:primaryType="jnt:translation"
@@ -38,7 +38,7 @@
               name="le monde"
               />
             <read-the-documentation
-              jcr:primaryType="$MODULE:HelloCard"
+              jcr:primaryType="$MODULE:helloCard"
               illustration="read"
               >
               <j:translation_en
@@ -53,7 +53,7 @@
                 />
             </read-the-documentation>
             <code-a-new-component
-              jcr:primaryType="$MODULE:HelloCard"
+              jcr:primaryType="$MODULE:helloCard"
               illustration="code"
               >
               <j:translation_en
@@ -68,7 +68,7 @@
                 />
             </code-a-new-component>
             <explore-the-interface
-              jcr:primaryType="$MODULE:HelloCard"
+              jcr:primaryType="$MODULE:helloCard"
               illustration="interface"
               >
               <j:translation_en
@@ -83,7 +83,7 @@
                 />
             </explore-the-interface>
             <create-content
-              jcr:primaryType="$MODULE:HelloCard"
+              jcr:primaryType="$MODULE:helloCard"
               illustration="write"
               >
               <j:translation_en

package/template/settings/resources/$MODULE.properties

@@ -1,15 +1,15 @@
 $MODULE_component=$MODULE - Components
 
-$MODULE_HelloWorld=Hello World
-$MODULE_HelloWorld.name=Name
+$MODULE_helloWorld=Hello World
+$MODULE_helloWorld.name=Name
 
-$MODULE_HelloCard=Hello Card
-$MODULE_HelloCard.title=Title
-$MODULE_HelloCard.illustration=Illustration
-$MODULE_HelloCard.illustration.code=A developer coding
-$MODULE_HelloCard.illustration.coffee=Buying coffee
-$MODULE_HelloCard.illustration.interface=Consulting an interface
-$MODULE_HelloCard.illustration.read=Looking at a bookshelf
-$MODULE_HelloCard.illustration.write=Writing with a typewriter
+$MODULE_helloCard=Hello Card
+$MODULE_helloCard.title=Title
+$MODULE_helloCard.illustration=Illustration
+$MODULE_helloCard.illustration.code=A developer coding
+$MODULE_helloCard.illustration.coffee=Buying coffee
+$MODULE_helloCard.illustration.interface=Consulting an interface
+$MODULE_helloCard.illustration.read=Looking at a bookshelf
+$MODULE_helloCard.illustration.write=Writing with a typewriter
 
-$MODULE_LanguageSwitcher=Language Switcher
+$MODULE_languageSwitcher=Language Switcher

package/template/settings/resources/$MODULE_fr.properties

@@ -1,15 +1,15 @@
 $MODULE_component=$MODULE - Composants
 
-$MODULE_HelloWorld=Bienvenue
-$MODULE_HelloWorld.name=Nom
+$MODULE_helloWorld=Bienvenue
+$MODULE_helloWorld.name=Nom
 
-$MODULE_HelloCard=Carte de bienvenue
-$MODULE_HelloCard.title=Titre
-$MODULE_HelloCard.illustration=Illustration
-$MODULE_HelloCard.illustration.code=Un développeur qui code
-$MODULE_HelloCard.illustration.coffee=Acheter un café
-$MODULE_HelloCard.illustration.interface=Observer une interface
-$MODULE_HelloCard.illustration.read=Consulter une bibliothèque
-$MODULE_HelloCard.illustration.write=Écrire avec une machine à écrire
+$MODULE_helloCard=Carte de bienvenue
+$MODULE_helloCard.title=Titre
+$MODULE_helloCard.illustration=Illustration
+$MODULE_helloCard.illustration.code=Un développeur qui code
+$MODULE_helloCard.illustration.coffee=Acheter un café
+$MODULE_helloCard.illustration.interface=Observer une interface
+$MODULE_helloCard.illustration.read=Consulter une bibliothèque
+$MODULE_helloCard.illustration.write=Écrire avec une machine à écrire
 
-$MODULE_LanguageSwitcher=Changeur de langue
+$MODULE_languageSwitcher=Changeur de langue

package/template/src/components/HelloCard/default.server.tsx

@@ -1,16 +1,15 @@
-import { jahiaComponent, useUrlBuilder } from "@jahia/javascript-modules-library";
+import { buildModuleFileUrl, jahiaComponent } from "@jahia/javascript-modules-library";
 import classes from "./component.module.css";
 
 jahiaComponent(
   {
-    nodeType: "$MODULE:HelloCard",
+    nodeType: "$MODULE:helloCard",
     componentType: "view",
   },
   ({ illustration, title }: { illustration: string; title: string }) => {
-    const { buildStaticUrl } = useUrlBuilder();
     return (
       <article className={classes.card}>
-        <img src={buildStaticUrl({ assetPath: `illustrations/${illustration}.svg` })} alt="" />
+        <img src={buildModuleFileUrl(`static/illustrations/${illustration}.svg`)} alt="" />
         <p>{title}</p>
       </article>
     );

package/template/src/components/HelloCard/definition.cnd

@@ -1,3 +1,3 @@
-[$MODULE:HelloCard] > $MODULE:component, jnt:content
+[$MODULE:helloCard] > jnt:content, $MODULEmix:component
  - illustration (string, choicelist[resourceBundle]) mandatory < code, coffee, interface, read, write
  - title (string) i18n mandatory primary

package/template/src/components/HelloWorld/component.module.css

@@ -66,7 +66,8 @@
   font-weight: bold;
   cursor: pointer;
 
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     transform: scale(1.1);
     box-shadow: 0 0.25rem 1rem 0 #4884;
   }

package/template/src/components/HelloWorld/default.server.tsx

@@ -1,10 +1,8 @@
 import {
-  AddContentButtons,
   HydrateInBrowser,
-  Render,
-  getChildNodes,
+  RenderChildren,
+  buildModuleFileUrl,
   jahiaComponent,
-  useUrlBuilder,
 } from "@jahia/javascript-modules-library";
 import { t } from "i18next";
 import { Trans } from "react-i18next";
@@ -13,12 +11,11 @@ import classes from "./component.module.css";
 
 jahiaComponent(
   {
-    nodeType: "$MODULE:HelloWorld",
+    nodeType: "$MODULE:helloWorld",
     displayName: "Hello World Component",
     componentType: "view",
   },
-  ({ name }: { name: string }, { renderContext, currentNode }) => {
-    const { buildStaticUrl } = useUrlBuilder();
+  ({ name }: { name: string }, { renderContext }) => {
     return (
       <>
         <section className={classes.section}>
@@ -33,7 +30,7 @@ jahiaComponent(
             {renderContext.isEditMode() && (
               <div className={classes.hint} style={{ alignItems: "center" }}>
                 <img
-                  src={buildStaticUrl({ assetPath: "arrows/left.svg" })}
+                  src={buildModuleFileUrl("static/arrows/left.svg")}
                   alt="←"
                   width="80"
                   height="16"
@@ -44,13 +41,7 @@ jahiaComponent(
           </header>
           <p>{t("7l9zetMbU4cKpL4NxSOtL")}</p>
           <div className={classes.grid}>
-            {getChildNodes(currentNode, -1, 0, (node) => node.isNodeType("jnt:content")).map(
-              (node) => (
-                // @ts-expect-error Fix the types
-                <Render key={node.getIdentifier()} node={node} />
-              ),
-            )}
-            <AddContentButtons />
+            <RenderChildren />
           </div>
 
           <p className={classes.attribution}>
@@ -71,7 +62,7 @@ jahiaComponent(
         {renderContext.isEditMode() && (
           <div className={classes.hint} style={{ marginLeft: "calc(50% - 0.5rem)" }}>
             <img
-              src={buildStaticUrl({ assetPath: "arrows/bottom.svg" })}
+              src={buildModuleFileUrl("static/arrows/down.svg")}
               alt="↓"
               width="70"
               height="100"

package/template/src/components/HelloWorld/definition.cnd

@@ -1,3 +1,3 @@
-[$MODULE:HelloWorld] > $MODULE:component, jnt:content orderable
+[$MODULE:helloWorld] > jnt:content, $MODULEmix:component orderable
  - name (string) i18n mandatory
- + * ($MODULE:HelloCard) = $MODULE:HelloCard
+ + * ($MODULE:helloCard) = $MODULE:helloCard

package/template/src/components/LanguageSwitcher/default.server.tsx

@@ -1,4 +1,4 @@
-import { buildUrl, jahiaComponent } from "@jahia/javascript-modules-library";
+import { buildNodeUrl, getSiteLocales, jahiaComponent } from "@jahia/javascript-modules-library";
 import { t } from "i18next";
 import { Fragment } from "react";
 import classes from "./component.module.css";
@@ -6,26 +6,18 @@ import classes from "./component.module.css";
 jahiaComponent(
   {
     componentType: "view",
-    nodeType: "$MODULE:LanguageSwitcher",
+    nodeType: "$MODULE:languageSwitcher",
     displayName: "Language Switcher",
     // Disable cache for this component
     properties: { "cache.timeout": "0" },
   },
-  (_, { renderContext, mainNode, currentResource }) => {
-    const locales = renderContext.isLiveMode()
-      ? renderContext.getSite().getActiveLiveLanguagesAsLocales()
-      : renderContext.getSite().getLanguagesAsLocales();
-    const currentLanguage = currentResource.getLocale().getLanguage();
+  (_, { mainNode, currentResource }) => {
+    const currentLanguage = currentResource.getLocale().toString();
     return (
       <p style={{ textAlign: "center" }}>
         {t("JI87mYV8J5pAEST4RIUcb")}{" "}
-        {locales.map((locale, i) => {
-          const language = locale.getLanguage();
-          const href = buildUrl(
-            { path: mainNode.getPath(), language },
-            renderContext,
-            currentResource,
-          );
+        {Object.entries(getSiteLocales()).map(([language, locale], i, { length }) => {
+          const href = buildNodeUrl(mainNode, { language });
           return (
             <Fragment key={language}>
               <a
@@ -35,7 +27,7 @@ jahiaComponent(
               >
                 {locale.getDisplayLanguage(locale)}
               </a>
-              {i < locales.length - 1 && " • "}
+              {i < length - 1 && " • "}
             </Fragment>
           );
         })}

package/template/src/components/LanguageSwitcher/definition.cnd

@@ -1 +1 @@
-[$MODULE:LanguageSwitcher] > $MODULE:component, jnt:content
+[$MODULE:languageSwitcher] > jnt:content, $MODULEmix:component

package/template/src/{pages → templates}/Layout.tsx

@@ -1,4 +1,8 @@
-import { AddResources, useServerContext, useUrlBuilder } from "@jahia/javascript-modules-library";
+import {
+  AddResources,
+  buildModuleFileUrl,
+  useServerContext,
+} from "@jahia/javascript-modules-library";
 import type { ReactNode } from "react";
 
 import "modern-normalize/modern-normalize.css";
@@ -6,16 +10,12 @@ import "./global.css";
 
 /** Places `children` in an html page. */
 export const Layout = ({ title, children }: { title: string; children: ReactNode }) => {
-  const { buildStaticUrl } = useUrlBuilder();
   const { currentResource } = useServerContext();
   const lang = currentResource.getLocale().getLanguage();
   return (
     <html lang={lang}>
       <head>
-        <AddResources
-          type="css"
-          resources={buildStaticUrl({ assetPath: "../dist/server/style.css" })}
-        />
+        <AddResources type="css" resources={buildModuleFileUrl("dist/server/style.css")} />
         <title>{title}</title>
       </head>
       <body>{children}</body>

package/template/src/templates/MainResource/default.server.tsx

@@ -0,0 +1,15 @@
+import { jahiaComponent, Render } from "@jahia/javascript-modules-library";
+import { Layout } from "../Layout.jsx";
+
+jahiaComponent(
+  {
+    componentType: "template",
+    nodeType: "jmix:mainResource",
+    priority: -1, // allow to overwrite this template by defining a component with a higher priority. When not specified, the default priority is 0
+  },
+  ({ "jcr:title": title }, { currentNode }) => (
+    <Layout title={title}>
+      <Render node={currentNode} view="fullPage" />
+    </Layout>
+  ),
+);

package/template/src/{pages → templates/Page}/basic.server.tsx

@@ -1,12 +1,12 @@
 import { Area, jahiaComponent } from "@jahia/javascript-modules-library";
-import { Layout } from "./Layout.jsx";
+import { Layout } from "../Layout.jsx";
 
 jahiaComponent(
   {
+    componentType: "template",
     nodeType: "jnt:page",
     name: "basic",
     displayName: "Basic page",
-    componentType: "template",
   },
   ({ "jcr:title": title }) => (
     <Layout title={title}>

package/template/src/{pages → templates}/global.css

@@ -4,6 +4,7 @@
 
 body {
   background: #fff;
+  line-height: 1.5;
 }
 
 a {

package/template/vite.config.mjs

@@ -22,7 +22,7 @@ export default defineConfig({
       },
       // This function is called every time a build succeeds in watch mode
       watchCallback() {
-        spawnSync("yarn", ["watch:callback"], { stdio: "inherit" });
+        spawnSync("yarn", ["watch:callback"], { stdio: "inherit", shell: true });
       },
     }),
   ],