create-powerapps-project 1.2.4 → 1.3.0

package/lib/plopActions.js

@@ -8,7 +8,11 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 const didSucceed = (code) => `${code}` === '0';
 export default (plop) => {
     plop.setDefaultInclude({ actionTypes: true });
-    plop.setActionType('addSolution', async (answers) => {
+    plop.setActionType('addDirectory', async (answers) => {
+        await fs.promises.mkdir(path.resolve(process.cwd(), answers.folder));
+        return `added directory ${answers.folder}`;
+    });
+    plop.setActionType('addSolution', (answers) => {
         // Add solution
         spawnSync('dotnet', ['new', 'sln', '-n', answers.name], { cwd: process.cwd(), stdio: 'inherit' });
         spawnSync('dotnet', ['sln', 'add', `${answers.name}.csproj`], { cwd: process.cwd(), stdio: 'inherit' });

package/lib/plopfile.js

@@ -255,6 +255,23 @@ export default async (plop) => {
                 name: 'prefix',
                 message: 'publisher prefix'
             },
+            {
+                type: 'input',
+                name: 'server',
+                message: 'enter dataverse url (https://org.crm.dynamics.com):',
+                validate: (answer) => {
+                    try {
+                        const url = new URL(answer);
+                        if (url.protocol !== 'https:') {
+                            return 'server should begin with https';
+                        }
+                        return true;
+                    }
+                    catch (ex) {
+                        return 'enter a valid URL';
+                    }
+                }
+            },
             {
                 type: 'confirm',
                 name: 'react',
@@ -263,6 +280,7 @@ export default async (plop) => {
             packageQuestion
         ],
         actions: (data) => {
+            data.org = new URL(data.server).hostname.split('.')[0];
             return [
                 {
                     type: 'runPcf'
@@ -279,6 +297,12 @@ export default async (plop) => {
                     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',
@@ -286,14 +310,20 @@ export default async (plop) => {
                     force: true
                 },
                 {
-                    type: 'addMany',
-                    templateFiles: [
-                        '../plop-templates/pcf/App.tsx.hbs',
-                        '../plop-templates/pcf/AppContext.tsx',
-                        '../plop-templates/webresource/.gitattributes'
-                    ],
-                    base: '../plop-templates/pcf',
-                    destination: `${process.cwd()}/{{name}}`,
+                    type: 'add',
+                    templateFile: '../plop-templates/pcf/App.tsx.hbs',
+                    path: path.resolve(process.cwd(), 'App.tsx'),
+                    skip: (answers) => {
+                        if (!answers.react) {
+                            return 'react not included';
+                        }
+                        return;
+                    }
+                },
+                {
+                    type: 'add',
+                    templateFile: '../plop-templates/pcf/AppContext.tsx.hbs',
+                    path: path.resolve(process.cwd(), 'contexts', 'AppContext.tsx'),
                     skip: (answers) => {
                         if (!answers.react) {
                             return 'react not included';
@@ -305,32 +335,32 @@ export default async (plop) => {
                     type: 'modify',
                     path: `${process.cwd()}/{{name}}/index.ts`,
                     pattern: 'import { HelloWorld, IHelloWorldProps } from "./HelloWorld";',
-                    template: `import { App, IAppProps } from './App';`
+                    template: `import { App } from './App';`
                 },
                 {
                     type: 'modify',
                     path: `${process.cwd()}/{{name}}/index.ts`,
                     pattern: 'HelloWorld, props',
-                    template: 'App, props'
+                    template: 'App, { context: context }'
                 },
                 {
                     type: 'modify',
                     path: `${process.cwd()}/{{name}}/index.ts`,
                     pattern: `const props: IHelloWorldProps = { name: 'Hello, World!' };`,
-                    template: `const props: IAppProps = { context: context };`
+                    template: ''
                 },
                 {
                     type: 'addScript',
                     data: {
-                        scriptKey: 'build:prod',
-                        scriptValue: 'pcf-scripts build --buildMode production'
+                        scriptKey: 'authenticate',
+                        scriptValue: `pac auth create --url ${data.server} --name ${data.org} --deviceCode`
                     }
                 },
                 {
                     type: 'addScript',
                     data: {
                         scriptKey: 'push',
-                        scriptValue: `pac pcf version --strategy manifest && pac pcf push -pp ${data.prefix}`
+                        scriptValue: `pac auth select --name ${data.org} && pac pcf version --strategy manifest && pac pcf push -pp ${data.prefix}`
                     }
                 },
                 {
@@ -354,7 +384,14 @@ export default async (plop) => {
                     type: 'npmInstall',
                     data: {
                         packages: {
-                            devDependencies: ['powerapps-project-pcf', '@types/react@16', '@types/react-dom@16', 'eslint-plugin-react-hooks']
+                            devDependencies: [
+                                'powerapps-project-pcf',
+                                '@types/react@16',
+                                '@types/react-dom@16',
+                                'eslint-plugin-react-hooks',
+                                '@types/xrm'
+                            ],
+                            dependencies: ['@fluentui/react-hooks']
                         }
                     },
                     skip: (answers) => {
@@ -363,6 +400,24 @@ export default async (plop) => {
                         }
                         return;
                     }
+                },
+                {
+                    type: 'addDirectory',
+                    data: {
+                        folder: 'components'
+                    }
+                },
+                {
+                    type: 'addDirectory',
+                    data: {
+                        folder: 'services'
+                    }
+                },
+                {
+                    type: 'addDirectory',
+                    data: {
+                        folder: 'hooks'
+                    }
                 }
             ];
         }

package/package.json

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

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

@@ -0,0 +1,34 @@
+{
+    "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/App.tsx.hbs

@@ -2,18 +2,14 @@ import React from 'react';
 import { IInputs } from './generated/ManifestTypes';
 import { AppContextProvider } from './AppContext';
 
-export interface IAppProps {
-  context: ComponentFramework.Context<IInputs>;
-}
-
-export const App = (props: IAppProps) => {
+export const App = (props: { context: ComponentFramework.Context<IInputs>; }) => {
   const {
     context
   } = props;
 
   return (
-    <AppContextProvider context={context}>
-    </AppContextProvider>
+    <AppContext.Provider value="{{ context }}">
+    </AppContext.Provider>
   );
 };
 

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IInputs } from './generated/ManifestTypes';
+
+interface IAppContext {
+  context: ComponentFramework.Context<IInputs>;
+}
+
+const AppContext = React.createContext<IAppContext>({} as IAppContext);
+
+export const useAppContext = (): IAppContext => React.useContext(AppContext);

package/plop-templates/pcf/AppContext.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { IInputs } from './generated/ManifestTypes';
-
-interface IAppContext {
-  context: ComponentFramework.Context<IInputs>;
-  theme?: Record<string, string>;
-}
-
-const AppContext = React.createContext<IAppContext>({} as IAppContext);
-
-interface IAppContextProviderProps extends IAppContext {
-  children?: React.ReactNode;
-}
-
-export const AppContextProvider = (props: IAppContextProviderProps): JSX.Element => {
-  const { context, children } = props;
-
-  return <AppContext.Provider value={{ context }}>{children}</AppContext.Provider>;
-};
-
-export const useAppContext = (): IAppContext => React.useContext(AppContext);