create-powerapps-project 2.2.4 → 2.3.0

package/lib/plopfile.js

@@ -1,5 +1,4 @@
 import path from 'node:path';
-import fs from 'node:fs';
 import { getNugetPackageVersions } from './nuget.js';
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export default async (plop) => {
@@ -284,16 +283,6 @@ 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) => {
@@ -302,30 +291,12 @@ export default async (plop) => {
                 {
                     type: 'runPcf'
                 },
-                {
-                    type: 'add',
-                    templateFile: '../plop-templates/pcf/tsconfig.json',
-                    path: path.resolve(process.cwd(), 'tsconfig.json'),
-                    force: true
-                },
                 {
                     type: 'add',
                     templateFile: '../plop-templates/pcf/plopfile.js',
                     path: path.resolve(process.cwd(), 'plopfile.js'),
                     force: true
                 },
-                {
-                    type: 'add',
-                    templateFile: '../plop-templates/pcf/.eslintrc.json',
-                    path: path.resolve(process.cwd(), '.eslintrc.json'),
-                    force: true
-                },
-                {
-                    type: 'add',
-                    templateFile: '../plop-templates/pcf/.gitattributes',
-                    path: path.resolve(process.cwd(), '.gitattributes'),
-                    force: true
-                },
                 {
                     type: 'add',
                     templateFile: '../plop-templates/pcf/App.tsx',
@@ -334,23 +305,6 @@ 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.hbs',
-                    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;
                     }
                 },
@@ -365,24 +319,47 @@ 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`,
                     pattern: 'import { HelloWorld, IHelloWorldProps } from "./HelloWorld";',
                     template: `import { App } from './App';`
                 },
+                {
+                    type: 'append',
+                    path: `${process.cwd()}/{{name}}.pcfproj`,
+                    pattern: "</PowerAppsTargetsPath>",
+                    template: `<PcfEnableAutoNpmInstall Condition=" '$(PcfEnableAutoNpmInstall)' == '' ">false</PcfEnableAutoNpmInstall>`,
+                    separator: '\n'
+                },
+                {
+                    type: 'append',
+                    path: `${process.cwd()}/{{name}}.pcfproj`,
+                    pattern: "</PowerAppsTargetsPath>",
+                    template: `<PcfAlwaysNpmInstall Condition=" '$(PcfAlwaysNpmInstall)' == '' ">false</PcfAlwaysNpmInstall>`,
+                    separator: '\n'
+                },
+                {
+                    type: 'append',
+                    path: `${process.cwd()}/eslint.config.mjs`,
+                    pattern: "reactPlugin.configs.flat.recommended,",
+                    template: "reactHooks.configs.flat.recommended,",
+                    separator: '\n'
+                },
+                {
+                    type: 'append',
+                    path: `${process.cwd()}/eslint.config.mjs`,
+                    pattern: `import reactPlugin from "eslint-plugin-react";`,
+                    template: `import reactHooksPlugin from 'eslint-plugin-react-hooks';`,
+                    separator: '\n'
+                },
+                {
+                    type: 'append',
+                    path: `${process.cwd()}/{{name}}.pcfproj`,
+                    pattern: "</OutputPath>",
+                    template: `<PcfBuildMode>development</PcfBuildMode>`,
+                    separator: '\n'
+                },
                 {
                     type: 'modify',
                     path: `${process.cwd()}/{{name}}/index.ts`,
@@ -392,7 +369,7 @@ export default async (plop) => {
                 {
                     type: 'modify',
                     path: `${process.cwd()}/{{name}}/index.ts`,
-                    pattern: `const props: IHelloWorldProps = { name: 'Hello, World!' };`,
+                    pattern: `const props: IHelloWorldProps = { name: 'Power Apps' };`,
                     template: ''
                 },
                 {
@@ -413,14 +390,14 @@ export default async (plop) => {
                     type: 'addScript',
                     data: {
                         scriptKey: 'push',
-                        scriptValue: `npm run select-auth && pac pcf version -s manifest && pac pcf push -pp ${data.prefix} -env ${data.server}`
+                        scriptValue: `${data.package} run select-auth && pac pcf push -pp ${data.prefix} -env ${data.server}`
                     }
                 },
                 {
                     type: 'addScript',
                     data: {
                         scriptKey: 'push-inc',
-                        scriptValue: `npm run build && npm run select-auth && pac pcf version -s manifest && pac pcf push -pp ${data.prefix} -inc -env ${data.server}`
+                        scriptValue: `${data.package} run build && ${data.package} run select-auth && pac pcf push -pp ${data.prefix} -inc -env ${data.server}`
                     }
                 },
                 {
@@ -430,13 +407,6 @@ export default async (plop) => {
                         scriptValue: `npx only-allow ${data.package}`
                     }
                 },
-                async (answers) => {
-                    if (answers.react && answers.fluentVersion === 8) {
-                        await fs.promises.rm(path.resolve(process.cwd(), answers.name, 'HelloWorld.tsx'));
-                        return 'removed HelloWorld component';
-                    }
-                    return 'react not included';
-                },
                 {
                     type: 'npmInstall'
                 },
@@ -446,46 +416,16 @@ export default async (plop) => {
                         packages: {
                             devDependencies: [
                                 'powerapps-project-pcf',
-                                '@types/react@^16',
-                                '@types/react-dom@^16',
                                 'eslint-plugin-react-hooks',
                                 '@types/xrm'
                             ],
-                            dependencies: ['@fluentui/react-hooks']
-                        }
-                    },
-                    skip: (answers) => {
-                        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']
+                            dependencies: ['@fluentui/react-icons']
                         }
                     },
                     skip: (answers) => {
                         if (!answers.react) {
                             return 'react not included';
                         }
-                        if (answers.fluentVersion === 8) {
-                            return 'using fluent v8';
-                        }
                         return;
                     }
                 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "create-powerapps-project",
   "description": "💧 plop generator for Dataverse development",
-  "version": "2.2.4",
+  "version": "2.3.0",
   "license": "MIT",
   "exports": "./lib/index.js",
   "engines": {
-    "node": ">=20.0.0"
+    "node": ">=22.0.0"
   },
   "bin": {
     "create-powerapps-project": "lib/index.js"
@@ -26,9 +26,6 @@
   },
   "type": "module",
   "dependencies": {
-    "plop": "^3.1.2"
-  },
-  "volta": {
-    "extends": "../../package.json"
+    "plop": "^4.0.4"
   }
 }

package/plop-templates/pcf/App.tsx

@@ -2,11 +2,7 @@ import React from 'react';
 import { IInputs } from './generated/ManifestTypes';
 import { AppContext } from './contexts/AppContext';
 
-export const App = (props: { context: ComponentFramework.Context<IInputs>; }) => {
-  const {
-    context
-  } = props;
-
+export const App = ({ context }: { context: ComponentFramework.Context<IInputs>; }) => {
   return (
     <AppContext.Provider value={{{ context }}}>
     </AppContext.Provider>

package/plop-templates/pcf/.eslintrc.json

@@ -1,34 +0,0 @@
-{
-    "env": {
-      "browser": true,
-      "es2021": true
-    },
-    "extends": [
-      "eslint:recommended",
-      "plugin:@typescript-eslint/recommended",
-      "plugin:react/recommended",
-      "plugin:react-hooks/recommended"
-    ],
-    "globals": {
-      "ComponentFramework": true,
-      "Xrm": true
-    },
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-      "ecmaVersion": 12,
-      "sourceType": "module"
-    },
-    "plugins": [
-      "@microsoft/power-apps",
-      "@typescript-eslint"
-    ],
-    "rules": {
-      "no-unused-vars": "off",
-      "@typescript-eslint/no-empty-interface": "off"
-    },
-    "settings": {
-      "react": {
-        "version": "detect"
-      }
-    }
-}

package/plop-templates/pcf/.gitattributes

@@ -1,3 +0,0 @@
-* text=auto eol=lf
-*.{cmd,[cC][mM][dD]} text eol=crlf
-*.{bat,[bB][aA][tT]} text eol=crlf

package/plop-templates/pcf/AppFluent9.tsx.hbs

@@ -1,21 +0,0 @@
-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="{{name}}">
-      <FluentProvider theme={webLightTheme}>
-        <AppContext.Provider value=\{{ context }}>
-        </AppContext.Provider>
-      </FluentProvider>
-    </IdPrefixProvider>
-  );
-};
-
-App.displayName = 'App';

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

@@ -1,58 +0,0 @@
-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
-  }
-}

package/plop-templates/pcf/tsconfig.json

@@ -1,10 +0,0 @@
-{
-  "extends": "./node_modules/pcf-scripts/tsconfig_base.json",
-  "compilerOptions": {
-    "typeRoots": ["node_modules/@types"],
-    "esModuleInterop": true,
-    "target": "ES6",
-    "module": "es2015",
-    "moduleResolution": "node"
-  }
-}