Merge pull request #71 from twilio/typescript-support

support typescript

Author: ktalebian

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

@@ -20,11 +20,19 @@ export interface CLIArguments {
     y?: boolean;
     template?: string;
     t?: string;
+    typescript?: boolean;
+    s?: boolean;
 }
 
 class CLI {
     private readonly parser: Argv<CLIArguments>;
     private options: { [key: string]: Options; } = {
+        typescript: {
+            alias: 's',
+            type: 'boolean',
+            describe: 'Create a TypeScript project',
+            default: false,
+        },
         template: {
             alias: 't',
             type: 'string',

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

@@ -15,6 +15,7 @@ const moveFile = promisify(fs.rename);
 const templatesRootDir = resolve(__dirname, '../../templates');
 const templateCorePath = resolve(templatesRootDir, 'core');
 const templateJsPath = resolve(templatesRootDir, 'js');
+const templateTsPath = resolve(templatesRootDir, 'ts');
 
 export interface FlexPluginArguments extends CLIArguments {
     targetDirectory: string;
@@ -94,6 +95,9 @@ export const _scaffold = async (config: FlexPluginArguments): Promise<boolean> =
 
         // Get src directory from template URL if provided
         let srcPath = templateJsPath;
+        if (config.typescript) {
+            srcPath = templateTsPath;
+        }
         if (config.template) {
             dirObject = tmp.dirSync();
             await downloadFromGitHub(config, config.template, dirObject.name);
@@ -109,9 +113,11 @@ export const _scaffold = async (config: FlexPluginArguments): Promise<boolean> =
 
         // Rename plugins
         if (!dirObject) {
+            const ext = config.typescript ? 'tsx' : 'js';
+
             await moveFile(
-                join(config.targetDirectory, 'src/DemoPlugin.js'),
-                join(config.targetDirectory, `src/${config.pluginClassName}.js`),
+                join(config.targetDirectory, `src/DemoPlugin.${ext}`),
+                join(config.targetDirectory, `src/${config.pluginClassName}.${ext}`),
             );
         }
 

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

@@ -0,0 +1,43 @@
+{
+  "name": "{{name}}",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "bootstrap": "flex-check-start",
+    "postinstall": "npm run bootstrap",
+    "prestart": "npm run bootstrap",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test --env=jsdom",
+    "eject": "craco eject"
+  },
+  "devDependencies": {
+    "@twilio/flex-ui": "{{flexSdkVersion}}"
+  },
+  "dependencies": {
+    "@craco/craco": "^5.0.2",
+    "@types/jest": "^24.0.12",
+    "@types/node": "^12.0.0",
+    "@types/react": "^16.8.16",
+    "@types/react-dom": "^16.8.4",
+    "core-js": "^2.6.5",
+    "craco-config-flex-plugin": "{{cracoConfigVersion}}",
+    "flex-plugin": "{{flexPluginVersion}}",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-scripts": "^3.0.0",
+    "typescript": "^3.4.5"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

packages/create-flex-plugin/templates/ts/src/DemoPlugin.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import * as Flex from '@twilio/flex-ui';
+import { FlexPlugin } from 'flex-plugin';
+
+import CustomTaskListComponent from './components/CustomTaskListComponent';
+
+const PLUGIN_NAME = '{{pluginClassName}}';
+
+export default class {{pluginClassName}} extends FlexPlugin {
+  constructor() {
+    super(PLUGIN_NAME);
+  }
+
+  /**
+   * This code is run when your plugin is being started
+   * Use this to modify any UI components or attach to the actions framework
+   *
+   * @param flex { typeof import('@twilio/flex-ui') }
+   * @param manager { import('@twilio/flex-ui').Manager }
+   */
+  init(flex: typeof Flex, manager: Flex.Manager) {
+    flex.AgentDesktopView.Panel1.Content.add(
+      <CustomTaskListComponent key="demo-component" />,
+      {
+        sortOrder: -1,
+      }
+    );
+  }
+}

packages/create-flex-plugin/templates/ts/src/components/CustomTaskListComponent.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const taskListStyles = {
+  padding: '10px',
+  margin: '0px',
+  color: '#fff',
+  background: '#000',
+};
+
+const CustomTaskListComponent = () => {
+  return (
+    <div style={taskListStyles}>This is a demo component</div>
+  );
+};
+
+export default CustomTaskListComponent;

packages/create-flex-plugin/templates/ts/src/index.ts

@@ -0,0 +1,4 @@
+import * as FlexPlugin from 'flex-plugin';
+import {{pluginClassName}} from './{{pluginClassName}}';
+
+FlexPlugin.loadPlugin({{pluginClassName}});

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

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src",
+    "rootDir": ".",
+    "outDir": "build",
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false
+  },
+  "include": [
+    "./src/**/*"
+  ],
+  "exclude": [
+    "./**/*.test.ts",
+    "./**/*.test.tsx",
+    "./**/__mocks__/*.ts",
+    "./**/__mocks__/*.tsx"
+  ]
+}

packages/create-flex-plugin/tsconfig.json

@@ -5,5 +5,5 @@
     "baseUrl": ".",
     "rootDir": "src"
   },
-  "exclude": ["node_modules", "__tests__", "dist"]
+  "exclude": ["node_modules", "__tests__", "dist", "templates"]
 }

packages/create-flex-plugin/tslint.json

@@ -1,3 +1,8 @@
 {
-  "extends": ["../../tslint.json"]
+  "extends": ["../../tslint.json"],
+  "linterOptions": {
+    "exclude": [
+      "templates/**/*"
+    ]
+  }
 }