FLEXY-5436 remove scripts package from template

.github/workflows/pr_workflow.yaml

@@ -25,7 +25,11 @@ jobs:
         with:
           node-version: '20'
       - name: Install project dependencies
-        run: npm ci
+        run: |
+          echo "Starting npm ci with a 10-minute timeout"
+          for i in 1 2 3; do # Retry logic, retry 3 times
+            timeout 10m npm ci --verbose && break || echo "npm ci failed, retrying ($i/3)..."
+          done
       - name: Run linter
         run: npm run lint:fix
       - name: Run Tests

.github/workflows/~reusable_e2e_all_OS.yaml

@@ -95,9 +95,9 @@ jobs:
     with:
       OS: ${{ matrix.os }}
       BRANCH: main
-      NPM_IGNORE_PREFIX: ${{ vars.NPM_IGNORE_PREFIX }}
-      PACKAGE_VERSION: latest
-      FLEX_UI_VERSION: latest
+      NPM_IGNORE_PREFIX: ${{ inputs.NPM_IGNORE_PREFIX }}
+      PACKAGE_VERSION: ${{ inputs.PACKAGE_VERSION }}
+      FLEX_UI_VERSION: ${{ inputs.FLEX_UI_VERSION }}
       SEND_NOTIFICATION: ${{ inputs.SEND_NOTIFICATION }}
       SLACK_TITLE: ${{ inputs.SLACK_TITLE }}
       SLACK_MESSAGE: ${{ inputs.SLACK_MESSAGE }}

.github/workflows/~reusable_e2e_by_OS.yaml

@@ -143,48 +143,22 @@ jobs:
         env:
           TS: 0
         run: |
-          echo "Starting e2e tests with a 90-minute timeout"
           cd packages/flex-plugin-e2e-tests
-          for i in 1 2; do # Retry logic, retry 3 times
-            timeout 90m  npm run start && break || echo "E2E tests timed out, retrying ($i/3)..."
-          done
+          npm run start
       - name: Run e2e tests - JS (Macos)
         if: ${{ inputs.OS == 'macos-latest' }}
         env:
           TS: 0
         run: |
-          echo "Starting e2e tests with a 90-minute timeout"
           cd packages/flex-plugin-e2e-tests
-          for i in 1 2; do # Retry logic, retry 3 times
-            gtimeout 90m npm run start && break || echo "E2E tests timed out, retrying ($i/3)..."
-          done
+          npm run start
       - name: Run e2e tests - JS (Windows)
         if: ${{ inputs.OS == 'windows-latest' }}
         env:
           TS: 0
         run: |
-          echo "Starting e2e tests with a 90-minute timeout"
-            $attempts = 2
-            $timeout = 5400000 # 90 minutes in milliseconds
-            cd packages/flex-plugin-e2e-tests
-            for ($i=1; $i -le $attempts; $i++) {
-              try {
-                $process = Start-Process -FilePath 'npm' -ArgumentList 'run start' -NoNewWindow -PassThru
-                if ($process.WaitForExit($timeout)) {
-                  echo 'E2E tests completed successfully'
-                  exit 0
-                } else {
-                  echo 'E2E tests timed out. Retrying...'
-                  Stop-Process -Id $process.Id
-                }
-              } catch {
-                echo 'E2E tests failed.'
-                if ($i -eq $attempts) {
-                  throw 'E2E tests failed after 3 retries.'
-                }
-              }
-            }
-        shell: pwsh
+         cd packages/flex-plugin-e2e-tests
+         npm run start
       - name: Kill node for Windows os
         if: ${{ inputs.OS == 'windows-latest' }}
         run: |
@@ -195,55 +169,22 @@ jobs:
         env:
           TS: 1
         run: |
-          echo "Starting e2e tests with a 90-minute timeout"
           cd packages/flex-plugin-e2e-tests
-          for i in 1 2; do # Retry logic, retry 3 times
-            timeout 90m  npm run start && break || echo "E2E tests timed out, retrying ($i/3)..."
-          done
+          npm run start
       - name: Run e2e tests - TS (Macos)
         if: ${{ inputs.OS == 'macos-latest' }}
         env:
           TS: 1
         run: |
-          echo "Starting e2e tests with a 90-minute timeout"
-          cd packages/flex-plugin-e2e-tests
-          for i in 1 2; do # Retry logic, retry 3 times
-            gtimeout 90m npm run start && break || echo "E2E tests timed out, retrying ($i/3)..."
-          done
+         cd packages/flex-plugin-e2e-tests
+         npm run start
       - name: Run e2e tests - TS (Windows)
         if: ${{ inputs.OS == 'windows-latest' }}
         env:
           TS: 1
         run: |
-          echo "Starting e2e tests with a 90-minute timeout"
-            $attempts = 2
-            $timeout = 5400000 # 90 minutes in milliseconds
-            cd packages/flex-plugin-e2e-tests
-            for ($i=1; $i -le $attempts; $i++) {
-              try {
-                $process = Start-Process -FilePath 'npm' -ArgumentList 'run start' -NoNewWindow -PassThru
-                if ($process.WaitForExit($timeout)) {
-                  if ($process.ExitCode -eq 0) {
-                    echo 'E2E tests completed successfully'
-                    exit 0
-                  } else {
-                    echo "E2E tests failed with exit code $($process.ExitCode). Retrying..."
-                    Stop-Process -Id $process.Id
-                    taskkill /f /im node.exe
-                  }
-                } else {
-                  echo 'E2E tests timed out. Retrying...'
-                  Stop-Process -Id $process.Id
-                  taskkill /f /im node.exe
-                }
-              } catch {
-                echo 'E2E tests failed.'
-                if ($i -eq $attempts) {
-                  throw 'E2E tests failed after 3 retries.'
-                }
-              }
-            }
-        shell: pwsh
+          cd packages/flex-plugin-e2e-tests
+          npm run start
       - name: Upload Screenshots
         uses: actions/upload-artifact@v3
         if: always()

.github/workflows/~reusable_public_publish.yaml

@@ -46,7 +46,11 @@ jobs:
           node-version: '20'
           registry-url: 'https://registry.npmjs.org'
       - name: Install dependencies
-        run: npm ci
+        run: |
+          echo "Starting npm ci with a 10-minute timeout"
+          for i in 1 2 3; do # Retry logic, retry 3 times
+            timeout 10m npm ci --verbose && break || echo "npm ci failed, retrying ($i/3)..."
+          done
       - name: Slack Started Notification
         uses: rtCamp/action-slack-notify@v2
         env:

.github/workflows/~reusable_publish.yaml

@@ -35,7 +35,11 @@ jobs:
           node-version: "20"
           registry-url: "https://registry.npmjs.org"
       - name: Install dependencies
-        run: npm ci
+        run: |
+          echo "Starting npm ci with a 10-minute timeout"
+          for i in 1 2 3; do # Retry logic, retry 3 times
+            timeout 10m npm ci --verbose && break || echo "npm ci failed, retrying ($i/3)..."
+          done
       - name: Publish Version
         run: npm run publish:${{ inputs.TAG }} ${{ inputs.VERSION }}
         env:

changelog/v7.md

@@ -1,3 +1,8 @@
+## 7.1.0 (Sep 11th, 2024)
+
+### Upgrades
+
+- CLI can now run with only `@twilio/flex-plugin` and moving unused dependencies to `devDependencies` reducing bundle size and fixing major security issues
 ## 7.0.6 (Nov 12th, 2024)
 
 ### Fixed

packages/create-flex-plugin/src/lib/commands.ts

@@ -47,6 +47,7 @@ export const setupConfiguration = async (config: FlexPluginArguments): Promise<F
   config.targetDirectory = resolveCwd(name);
   config.flexSdkVersion = await packages.getLatestFlexUIVersion(2);
   config.pluginScriptsVersion = pkg.devDependencies['@twilio/flex-plugin-scripts'];
+  config.flexPluginVersion = pkg.devDependencies['@twilio/flex-plugin'];
   config.flexui2 = config.flexui2 || true;
   config.flexui1 = config.flexui1 || false;
 

packages/create-flex-plugin/src/lib/create-flex-plugin.ts

@@ -29,6 +29,7 @@ export interface FlexPluginArguments extends CLIArguments {
   targetDirectory: string;
   flexSdkVersion: string;
   pluginScriptsVersion: string;
+  flexPluginVersion: string;
   pluginClassName: string;
   pluginNamespace: string;
   flexui2: boolean;

packages/create-flex-plugin/src/prints/__tests__/finalMessage.test.ts

@@ -11,6 +11,7 @@ describe('finalMessage', () => {
     targetDirectory: '/target/directory',
     flexSdkVersion: '1.2.3-flex-sdk',
     pluginScriptsVersion: '1.2.3-plugin-script',
+    flexPluginVersion: '1.2.3-plugin-flex',
     pluginClassName: 'PluginFinalMessage',
     pluginNamespace: 'PluginFinalMessage',
     flexui2: true,

packages/create-flex-plugin/templates/js/package.json

@@ -6,12 +6,13 @@
     "postinstall": "flex-plugin pre-script-check"
   },
   "dependencies": {
-    "@twilio/flex-plugin-scripts": "{{pluginScriptsVersion}}",
+    "@twilio/flex-plugin": "{{flexPluginVersion}}",
     "react": "16.5.2",
     "react-dom": "16.5.2",
     "react-emotion": "9.2.12"
   },
   "devDependencies": {
+    "@twilio/flex-plugin-scripts": "{{pluginScriptsVersion}}",
     "@twilio/flex-ui": "{{flexSdkVersion}}",
     "react-test-renderer": "16.5.2"
   }

packages/create-flex-plugin/templates/js2/package.json

@@ -6,14 +6,15 @@
     "postinstall": "flex-plugin pre-script-check"
   },
   "dependencies": {
-    "@twilio/flex-plugin-scripts": "{{pluginScriptsVersion}}",
+    "@twilio/flex-plugin": "{{flexPluginVersion}}",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "prop-types": "^15.7.2",
     "@twilio-paste/core": "^15.3.1",
     "@twilio-paste/icons": "^9.2.0"
   },
   "devDependencies": {
+    "@twilio/flex-plugin-scripts": "{{pluginScriptsVersion}}",
     "@twilio/flex-ui": "{{flexSdkVersion}}",
     "react-test-renderer": "17.0.2"
   }

packages/create-flex-plugin/templates/ts/package.json

@@ -6,12 +6,13 @@
     "postinstall": "flex-plugin pre-script-check"
   },
   "dependencies": {
-    "@twilio/flex-plugin-scripts": "{{pluginScriptsVersion}}",
+    "@twilio/flex-plugin": "{{flexPluginVersion}}",
     "react": "16.5.2",
     "react-dom": "16.5.2",
     "react-emotion": "9.2.12"
   },
   "devDependencies": {
+    "@twilio/flex-plugin-scripts": "{{pluginScriptsVersion}}",
     "@twilio/flex-ui": "{{flexSdkVersion}}",
     "react-test-renderer": "16.5.2",
     "typescript": "^4"

packages/create-flex-plugin/templates/ts2/package.json

@@ -6,14 +6,15 @@
     "postinstall": "flex-plugin pre-script-check"
   },
   "dependencies": {
-    "@twilio/flex-plugin-scripts": "{{pluginScriptsVersion}}",
+    "@twilio/flex-plugin": "{{flexPluginVersion}}",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "prop-types": "^15.7.2",
     "@twilio-paste/core": "^15.3.1",
     "@twilio-paste/icons": "^9.2.0"
   },
   "devDependencies": {
+    "@twilio/flex-plugin-scripts": "{{pluginScriptsVersion}}",
     "@twilio/flex-ui": "{{flexSdkVersion}}",
     "react-test-renderer": "17.0.2",
     "typescript": "^4"

packages/flex-dev-utils/src/__tests__/fs.test.ts

@@ -25,10 +25,11 @@
     version: '1',
     name: pluginName,
     dependencies: {
-      [flexPluginScripts]: '1',
       '@twilio/flex-plugin': '2',
     },
-    devDependencies: {},
+    devDependencies: {
+      [flexPluginScripts]: '1',
+    },
   };
 
   beforeEach(() => {
@@ -874,11 +875,11 @@
         name: '',
         dependencies: {
           '@twilio/flex-plugin': '',
-          '@twilio/flex-plugin-scripts': '',
         },
         devDependencies: {
+          '@twilio/flex-plugin-scripts': '',
           'not-a-valid-package': '',
-        },
+        } as any,
       });
       expect(fs.isPluginFolder()).toBe(false);
       expect(packageJson).toHaveBeenCalledTimes(1);
@@ -891,12 +892,11 @@
         name: '',
         dependencies: {
           '@twilio/flex-plugin': '',
-          '@twilio/flex-plugin-scripts': '',
         },
         devDependencies: {
           '@twilio/flex-plugin-scripts': '',
           '@twilio/flex-ui': '^1',
-        },
+        } as any,
       });
       expect(fs.isPluginFolder()).toBe(true);
     });
@@ -961,13 +961,13 @@
         addLocalFile: addLocalFileFn,
         addLocalFolder: addLocalFolderFn,
         writeZip: writeZipFn,
       } as any);
 
       const statsSpy = jest.spyOn(fs.default, 'statSync');
 
       const pathParseSpy = jest.spyOn(path, 'parse').mockReturnValue({
         name: 'one',
       } as any);
 
       const pathJoinSpy = jest.spyOn(path, 'join').mockReturnValue('/plugin/one');
 
@@ -975,13 +975,13 @@
         isDirectory() {
           return true;
         },
       } as any);
 
       statsSpy.mockReturnValueOnce({
         isDirectory() {
           return false;
         },
       } as any);
 
       fs.zipPluginFiles(location, zipPath, ...files);
 

packages/flex-dev-utils/src/errors/lib/FlexPluginError.ts

@@ -26,13 +26,13 @@
   public details = (): void => {
     const { headline } = logger.coloredStrings;
     if (this.pkg) {
-      const deps = this.pkg.dependencies;
+      const allDeps = { ...this.pkg.dependencies, ...this.pkg.devDependencies };
       const names = ['@twilio/flex-plugin', '@twilio/flex-plugin-scripts'];
 
       logger.newline();
       logger.info(`Your plugin ${this.pkg.name} is using the following versions:`);
       logger.newline();
-      names.forEach((name) => logger.info(`\t ${headline(`"${name}": "${deps[name]}"`)}`));
+      names.forEach((name) => logger.info(`\t ${headline(`"${name}": "${allDeps[name]}"`)}`));
       logger.newline();
     }
   };

packages/flex-dev-utils/src/errors/lib/__tests__/FlexPluginError.test.ts

@@ -33,9 +33,10 @@ describe('FlexPluginError', () => {
       version: '1.2.3',
       dependencies: {
         '@twilio/flex-plugin': '2.0.0',
+      },
+      devDependencies: {
         '@twilio/flex-plugin-scripts': '3.0.0',
       },
-      devDependencies: {},
     });
 
     const err = new FlexPluginError();

packages/flex-dev-utils/src/fs.ts

@@ -12,6 +12,7 @@
 import AdmZip from 'adm-zip';
 
 import { confirm } from './questions';
+import { logger } from './logger';
 
 const flexUI = '@twilio/flex-ui';
 const react = 'react';
@@ -28,6 +29,8 @@
 export interface AppPackageJson extends PackageJson {
   dependencies: {
     '@twilio/flex-plugin': string;
+  };
+  devDependencies: {
     '@twilio/flex-plugin-scripts': string;
   };
 }

packages/flex-plugin-e2e-tests/src/core/runner.ts

@@ -72,7 +72,7 @@ const getArgs = (flag: string): string[] => {
  */
 const beforeAll = async (testParams: TestParams) => {
   if (testParams.scenario.packageVersion === 'latest') {
-    const pkg = await packageJson('@twilio/flex-plugin-scripts', { version: 'latest' });
+    const pkg = await packageJson('@twilio/flex-plugin', { version: 'latest' });
     testParams.scenario.packageVersion = pkg.version as string;
   }
 };

packages/flex-plugin-e2e-tests/src/tests/step002.ts

@@ -57,7 +57,7 @@ const testSuite: TestSuite = async ({ scenario, config }: TestParams): Promise<v
   // Assert package.json
   assertion.jsonFileContains(
     [plugin1.dir, 'package.json'],
-    "dependencies['@twilio/flex-plugin-scripts']",
+    "devDependencies['@twilio/flex-plugin-scripts']",
     scenario.packageVersion,
   );
   assertion.jsonFileContains([plugin1.dir, 'package.json'], "dependencies['react']", `17.0.2`);

packages/flex-plugin-scripts/src/utils/__tests__/run.test.ts

@@ -18,9 +18,10 @@ describe('run', () => {
     version: '0.0.0',
     dependencies: {
       '@twilio/flex-plugin': '1.2.3',
+    },
+    devDependencies: {
       '@twilio/flex-plugin-scripts': '4.5.6',
     },
-    devDependencies: {},
   });
 
   beforeEach(() => {

packages/flex-plugins-utils-exception/src/lib/__tests__/TwilioError.test.ts

@@ -29,8 +29,7 @@ describe('TwilioError', () => {
     const error = new TwilioError();
     const noConstuctorError = new TwilioError();
 
-    // @ts-expect-error
-    noConstuctorError.constructor = null;
+    noConstuctorError.constructor = jest.fn();
 
     expect(apiError.instanceOf(Foo)).toEqual(false);
     expect(error.instanceOf(TwilioApiError)).toEqual(false);