Merge pull request #9 from primno/dev

Architecture

.changeset/five-sheep-argue.md

@@ -0,0 +1,5 @@
+---
+"@primno/cli": minor
+---
+BREAKING CHANGE:
+Move the `environment` property from the deploy section to the root.

.changeset/friendly-apples-peel.md

@@ -0,0 +1,6 @@
+---
+"@primno/cli": minor
+---
+
+Use of plop as template engine.
+The creation of workspaces is now done with plop.

.changeset/lucky-parrots-drum.md

@@ -0,0 +1,5 @@
+---
+"@primno/cli": patch
+---
+
+Remove warnings from node_modules packages during build.

.changeset/sharp-trees-wave.md

@@ -0,0 +1,12 @@
+---
+"@primno/cli": minor
+---
+
+BREAKING CHANGE:
+The file structure changes. Only one entry point is now supported.
+This entry point must be a file named "app.entry.ts" in the source directory of the project.
+
+To migrate, move your entry point from your entry-point directory to "app.entry.ts" in the source directory.
+If you have multiple entry points, you must create a new project for each entry point or merge them into one.
+
+The `entryPoints` properties of the primno configuration and the `entrypoint` option of the CLI was removed.

.changeset/thirty-hotels-brush.md

@@ -0,0 +1,5 @@
+---
+"@primno/cli": minor
+---
+
+Component generator.

lib/primno-ascii-art.txt

@@ -0,0 +1,6 @@
+  ____       _                          ____ _     ___ 
+ |  _ \ _ __(_)_ __ ___  _ __   ___    / ___| |   |_ _|
+ | |_) | '__| | '_ ` _ \| '_ \ / _ \  | |   | |    | | 
+ |  __/| |  | | | | | | | | | | (_) | | |___| |___ | | 
+ |_|   |_|  |_|_| |_| |_|_| |_|\___/   \____|_____|___|
+

lib/schema/primno.json

@@ -6,15 +6,8 @@
       "additionalProperties": false,
       "description": "Build configuration.",
       "properties": {
-        "entryPoints": {
-          "description": "List of entry points to build.",
-          "items": {
-            "type": "string"
-          },
-          "type": "array"
-        },
         "moduleNameTemplate": {
-          "default": "mn_{projectName}_{entryPoint}",
+          "default": "mn_{projectName}",
           "description": "Module name template.",
           "type": "string"
         }
@@ -44,13 +37,6 @@
       "additionalProperties": false,
       "description": "Deployment configuration.",
       "properties": {
-        "entryPoints": {
-          "description": "List of entry points to deploy.",
-          "items": {
-            "type": "string"
-          },
-          "type": "array"
-        },
         "environment": {
           "description": "Environment to deploy to. See primno.env.json.",
           "type": "string"
@@ -60,7 +46,8 @@
           "type": "string"
         },
         "webResourceNameTemplate": {
-          "description": "Template for the web resource name. The template will be formatted with the following parameters:\n- {editorName}: Editor prefix (without the _).\n- {projectName}: Project name.\n- {entryPoint}: Entry point name.",
+          "default": "{{editorName}}_/js/{{projectName}}.js",
+          "description": "Template for the web resource name. The template will be formatted with the following parameters:\n- {editorName}: Editor prefix (without the _).\n- {projectName}: Project name.",
           "type": "string"
         }
       },
@@ -109,10 +96,6 @@
           "description": "Directory of the build output.",
           "type": "string"
         },
-        "entryPointDir": {
-          "description": "Directory of the entry points. An entry point is a file that will be published as a web resource and loaded by the browser.",
-          "type": "string"
-        },
         "name": {
           "description": "Name of the project.",
           "type": "string"
@@ -134,7 +117,6 @@
         "name",
         "version",
         "sourceRoot",
-        "entryPointDir",
         "distDir"
       ],
       "type": "object"

lib/template/component/new/list-component.ts.hbs

@@ -0,0 +1,16 @@
+import { MnComponent, MnOnCommandInvoke, CommandBarEventArg } from '@primno/core';
+
+@MnComponent({
+    scope: {
+        pageType: "{{ pageType }}",
+        {{#if table}}
+        table: "{{ table }}"
+        {{/if}}
+    }
+})
+export class {{ pascalCase name }}Component {
+    @MnOnCommandInvoke("<set command name here>")
+    public onCommandInvoke(eventArg: CommandBarEventArg) {
+        Xrm.Navigation.openAlertDialog({ text: "Hello from {{ name }} component" });
+    }
+}

lib/template/component/new/record-component.ts.hbs

@@ -0,0 +1,16 @@
+import { MnComponent, MnOnFormLoad, FormEventArg } from '@primno/core';
+
+@MnComponent({
+    scope: {
+        pageType: "{{ pageType }}",
+        {{#if table}}
+        table: "{{ table }}"
+        {{/if}}
+    }
+})
+export class {{ pascalCase name }}Component {
+    @MnOnFormLoad()
+    public onFormLoad(eventArg: FormEventArg) {
+        Xrm.Navigation.openAlertDialog({ text: "Hello from {{ name }} component" });
+    }
+}

lib/template/component/plopfile.js

@@ -0,0 +1,44 @@
+import path from 'path';
+
+export default function (
+    /** @type { import("node-plop").NodePlopAPI } */
+    plop
+    ) {
+    plop.setGenerator('new', {
+        description: 'Create a new component',
+        prompts: [
+            {
+                type: 'list',
+                name: 'pageType',
+                message: 'Which page are you targeting?',
+                choices: [
+                    { name: 'Record (eg. main form, quick create)', short: "record", value: 'record' },
+                    { name: 'List (eg. grid, sub-grid)', short: "list", value: 'list' }
+                ]
+            },
+            {
+                type: 'input',
+                name: 'table',
+                message: 'Which table(s) are you targeting? (eg. account, contact)'
+            },
+        ],
+        actions: (/** @type { { name: string; pageType: "list" | "record", table: string } } */ data) => {
+            const namePath = path.parse(data.name);
+            data.name = namePath.base;
+            data.subPath = namePath.dir;
+
+            if (data.subPath.includes("..")) {
+                throw new Error("Sub-path cannot reference parent directory");
+            }
+
+            return [
+                {
+                    type: 'add',
+                    path: 'src/{{pageType}}/{{subPath}}/{{dashCase name}}/{{dashCase name}}.component.ts',
+                    templateFile: 'new/{{pageType}}-component.ts.hbs',
+                    destination: 'src',
+                }
+            ]
+        }
+    });
+}

lib/template/new/README.md.template → lib/template/workspace/new/README.md.hbs

@@ -15,18 +15,19 @@ The initial file structure looks like this:
 ├── node_modules
 ├── src # Source code directory
 │   ├── list # List (home-grid, sub-grid and associated-grid) components
-│   │   ├── contact.component.ts # Component that say hello when a button is clicked on a contact grid
+│   │   ├── contact # Contact component and its sub-components
+│   │   │   └── contact.component.ts # Component that say hello when a button is clicked on a contact grid
 │   │   └── list.module.ts # Main module of the components tree of page type "list"
-│   ├── record # Record (form) components
+│   ├── record # Record (main form, quick create form) components
 │   │   ├── account # Account component and its sub-components
 │   │   │   ├── account.component.ts # Component that runs when on account form.
-│   │   │   └── notify-column-change.component.ts # Sub-component of AccountComponent
+│   │   │   └── notify-column-change # Sub-component of AccountComponent
+│   │   │       └── notify-column-change.component.ts # Notify the user when a column value is changed
 │   │   └── record.module.ts # Main module of the components tree of page type "list"
-│   └── entry-point # Entry points for Power Apps (JS web-resources)
-│       └── main.ts # Main entry point with its main module. Load list and record modules.
+│   └── app.entry.ts # Entry point for Power Apps. Contains the main module that load list and record modules.
 ├── package.json
-├── primno.config.json # Primno configuration file
-├── primno.env.json # Primno environment configuration file.
+├── primno.config.json # Configuration file of Primno CLI.
+├── primno.env.json # Connection string of your PowerApps / Dynamics 365 environment.
 ├── README.md
 ├── .gitignore
 └── tsconfig.json

lib/template/workspace/new/primno.env.json.hbs

@@ -0,0 +1 @@
+{{{ environments }}}

lib/template/workspace/new/primno.json.hbs

@@ -0,0 +1 @@
+{{{ workspaceConfig }}}

lib/template/workspace/new/src/app.entry.ts.hbs

@@ -0,0 +1,28 @@
+/** Read README.md first */
+
+import { MnModule } from "@primno/core";
+import { ListModule } from "./list/list.module";
+import { RecordModule } from "./record/record.module";
+
+/**
+ * This is the entry point of your application.
+ * A entry point corresponds to a JS web resource that will be deployed to PowerApps / Dynamics 365.
+ * The main module must be exported here to be loaded and run by Primno.
+*/
+
+/**
+ * The {@link AppModule} class is defined as a module by the {@link MnModule} decorator.
+ * A module is a container of components / sub-modules.
+ * 
+ * {@link AppModule} is the primary module and imports the {@link RecordModule} and {@link ListModule}.
+ * The `bootstrap` components defined in these sub-modules will be started when this web resource is loaded.
+ * 
+ * {@link RecordModule} is the primary module for the page type `record` while {@link ListModule} is for the page type `list`.
+ * A list page is a page that displays a list of records, like a main grid or a sub-grid,
+ * while a record page is a page that displays a single record, like a form or a quick create form.
+ * Each page type have their own component tree, this means that a list component cannot contain a record component and vice-versa.
+ */
+@MnModule({
+    imports: [RecordModule, ListModule]
+})
+export class AppModule {}

lib/template/new/src/list/list.module.ts → lib/template/workspace/new/src/list/list.module.ts.hbs

@@ -1,5 +1,5 @@
 import { MnModule } from "@primno/core";
-import { ContactComponent } from "./contact.component";
+import { ContactComponent } from "./contact/contact.component";
 
 /**
  * The AppModule class is defined as a module by the {@link MnModule} decorator.

lib/template/new/src/record/account/account.component.ts → lib/template/workspace/new/src/record/account/account.component.ts.hbs

@@ -1,5 +1,5 @@
 import { MnComponent, MnOnFormLoad, FormEventArg, MnSubComponent, SubComponent } from "@primno/core";
-import { NotifyColumnChangeComponent } from "./notify-column-change.component";
+import { NotifyColumnChangeComponent } from "./notify-column-change/notify-column-change.component";
 
 /**
  * The {@link AccountComponent} class is defined as a component by the {@link @MnComponent} decorator.

lib/template/new/src/record/account/notify-column-change.component.ts → lib/template/workspace/new/src/record/account/notify-column-change/notify-column-change.component.ts.hbs

@@ -60,5 +60,7 @@ export class NotifyColumnChangeComponent implements Config, Input {
             "INFO",
             "columnValueChanged"
         );
+
+        this.previousValue = columnValue;
     }
 }

lib/template/new/src/record/record.module.ts → lib/template/workspace/new/src/record/record.module.ts.hbs

@@ -1,12 +1,12 @@
 import { MnModule } from "@primno/core";
 import { AccountComponent } from "./account/account.component";
-import { NotifyColumnChangeComponent } from "./account/notify-column-change.component";
+import { NotifyColumnChangeComponent } from "./account/notify-column-change/notify-column-change.component";
 
 /**
  * The {@link RecordModule} class is defined as a module by the {@link MnModule} decorator.
  * A module is a container of components.
  * 
- * This module is the primary module for the page type `record`,
+ * This module is the primary module for the page type `record` (only available in forms),
  * so all components that will be used in the page type `record` must be declared in this module or in its sub-modules.
  */
 @MnModule({

lib/template/new/tsconfig.json.template → lib/template/workspace/new/tsconfig.json.hbs

@@ -11,6 +11,6 @@
       "forceConsistentCasingInFileNames": true
     },
     "include": [
-      "{{ sourceRoot }}"
+      "src"
     ]
 }

lib/template/workspace/plopfile.js

@@ -0,0 +1,19 @@
+
+export default function (
+    /** @type { import("node-plop").NodePlopAPI } */
+    plop
+    ) {
+    plop.setGenerator('new', {
+        description: 'Create a new workspace',
+        actions: [
+            {
+                type: 'addMany',
+                templateFiles: 'new/**',
+                globOptions: {
+                    dot: true,
+                },
+                destination: '.',
+            }
+        ]
+    });
+}