create-powerapps-project 1.4.6 → 1.5.1

package/lib/plopActions.js

@@ -58,7 +58,7 @@ export default (plop) => {
     plop.setActionType('runPcf', async (answers) => {
         const args = ['pcf', 'init', '-ns', answers.namespace, '-n', answers.name, '-t', answers.template, '-npm', 'false'];
         // Set framework to React if selected
-        if (answers.react) {
+        if (answers.react && answers.fluentVersion === 8) {
             args.push('-fw', 'react');
         }
         return new Promise((resolve, reject) => {

package/lib/plopfile.js

@@ -288,6 +288,16 @@ export default async (plop) => {
                 name: 'react',
                 message: 'use react?'
             },
+            {
+                type: 'list',
+                name: 'fluentVersion',
+                message: 'select Fluent UI version',
+                choices: [
+                    { name: 'v8', value: 8 },
+                    { name: 'v9', value: 9 }
+                ],
+                when: (answers) => answers.react
+            },
             packageQuestion
         ],
         actions: (data) => {
@@ -328,6 +338,23 @@ export default async (plop) => {
                         if (!answers.react) {
                             return 'react not included';
                         }
+                        if (answers.fluentVersion === 9) {
+                            return 'using fluent v9';
+                        }
+                        return;
+                    }
+                },
+                {
+                    type: 'add',
+                    templateFile: '../plop-templates/pcf/AppFluent9.tsx',
+                    path: path.resolve(process.cwd(), '{{name}}', 'App.tsx'),
+                    skip: (answers) => {
+                        if (!answers.react) {
+                            return 'react not included';
+                        }
+                        if (answers.fluentVersion === 8) {
+                            return 'using fluent v8';
+                        }
                         return;
                     }
                 },
@@ -342,6 +369,18 @@ export default async (plop) => {
                         return;
                     }
                 },
+                {
+                    type: 'add',
+                    templateFile: '../plop-templates/pcf/index.ts.hbs',
+                    path: path.resolve(process.cwd(), '{{name}}', 'index.ts'),
+                    force: true,
+                    skip: (answers) => {
+                        if (!answers.react || answers.fluentVersion === 8) {
+                            return 'not using Fluent UI v9';
+                        }
+                        return;
+                    }
+                },
                 {
                     type: 'modify',
                     path: `${process.cwd()}/{{name}}/index.ts`,
@@ -389,7 +428,7 @@ export default async (plop) => {
                     }
                 },
                 async (answers) => {
-                    if (answers.react) {
+                    if (answers.react && answers.fluentVersion === 8) {
                         await fs.promises.rm(path.resolve(process.cwd(), answers.name, 'HelloWorld.tsx'));
                         return 'removed HelloWorld component';
                     }
@@ -404,8 +443,8 @@ export default async (plop) => {
                         packages: {
                             devDependencies: [
                                 'powerapps-project-pcf',
-                                '@types/react@16',
-                                '@types/react-dom@16',
+                                '@types/react@^16',
+                                '@types/react-dom@^16',
                                 'eslint-plugin-react-hooks',
                                 '@types/xrm'
                             ],
@@ -416,6 +455,34 @@ export default async (plop) => {
                         if (!answers.react) {
                             return 'react not included';
                         }
+                        if (answers.fluentVersion === 9) {
+                            return 'using fluent v9';
+                        }
+                        return;
+                    }
+                },
+                {
+                    type: 'npmInstall',
+                    data: {
+                        packages: {
+                            devDependencies: [
+                                'powerapps-project-pcf',
+                                '@types/react@^17',
+                                '@types/react-dom@^17',
+                                'eslint-plugin-react-hooks',
+                                '@types/xrm',
+                                'eslint-plugin-react'
+                            ],
+                            dependencies: ['@fluentui/react-hooks', '@fluentui/react-components', '@fluentui/react-icons', 'react@^17', 'react-dom@^17']
+                        }
+                    },
+                    skip: (answers) => {
+                        if (!answers.react) {
+                            return 'react not included';
+                        }
+                        if (answers.fluentVersion === 8) {
+                            return 'using fluent v8';
+                        }
                         return;
                     }
                 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-powerapps-project",
   "description": "💧 plop generator for Dataverse development",
-  "version": "1.4.6",
+  "version": "1.5.1",
   "license": "MIT",
   "exports": "./lib/index.js",
   "engines": {

package/plop-templates/pcf/App.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 import { IInputs } from './generated/ManifestTypes';
 import { AppContext } from './contexts/AppContext';
-import { initializeIcons } from '@fluentui/react/lib/Icons';
-
-initializeIcons();
 
 export const App = (props: { context: ComponentFramework.Context<IInputs>; }) => {
   const {

package/plop-templates/pcf/AppFluent9.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { IInputs } from './generated/ManifestTypes';
+import { AppContext } from './contexts/AppContext';
+import { FluentProvider, IdPrefixProvider, webLightTheme } from '@fluentui/react-components';
+
+export const App = (props: { context: ComponentFramework.Context<IInputs>; }) => {
+  const {
+    context
+  } = props;
+
+  return (
+    <IdPrefixProvider value="AdasCertification">
+      <FluentProvider theme={webLightTheme}>
+        <AppContext.Provider value=\{{ context }}>
+        </AppContext.Provider>
+      </FluentProvider>
+    </IdPrefixProvider>
+  );
+};
+
+App.displayName = 'App';

package/plop-templates/pcf/index.ts.hbs

@@ -0,0 +1,58 @@
+import { IInputs, IOutputs } from './generated/ManifestTypes';
+import { App } from './App';
+import ReactDOM from 'react-dom';
+import React from 'react';
+
+export class {{name}} implements ComponentFramework.StandardControl<IInputs, IOutputs> {
+  container: HTMLDivElement;
+  context: ComponentFramework.Context<IInputs>;
+
+  /**
+   * Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
+   * Data-set values are not initialized here, use updateView.
+   * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to property names defined in the manifest, as well as utility functions.
+   * @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to be retrieved asynchronously.
+   * @param state A piece of data that persists in one session for a single user. Can be set at any point in a controls life cycle by calling 'setControlState' in the Mode interface.
+   * @param container If a control is marked control-type='standard', it will receive an empty div element within which it can render its content.
+   */
+  public init(
+    context: ComponentFramework.Context<IInputs>,
+    notifyOutputChanged: () => void,
+    state: ComponentFramework.Dictionary,
+    container: HTMLDivElement
+  ): void {
+    this.context = context;
+    this.container = container;
+    this.context.mode.trackContainerResize(true);
+  }
+
+  /**
+   * Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc.
+   * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
+   */
+  public updateView(context: ComponentFramework.Context<IInputs>): void {
+    ReactDOM.render(
+      React.createElement(App, {
+        context: context
+      }),
+      this.container
+    );
+  }
+
+  /**
+   * It is called by the framework prior to a control receiving new data.
+   * @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output”
+   */
+  public getOutputs(): IOutputs {
+    return {
+    };
+  }
+
+  /**
+   * Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.
+   * i.e. cancelling any pending remote calls, removing listeners, etc.
+   */
+  public destroy(): void {
+    // Add code to cleanup control if necessary
+  }
+}