Tech/rewrite plop in typescript (#868)

* Refactor plop generator to use typescript and extract 5 generator/helper files

* Use typescript plop module declaration

* WIP: Add plop:build npm script and rename script g to plop

* Upgrade plop and fix execution

* Compile plop files with tsc and move into dist folder for execution

* Fix using wrong property to modify file by path and use templates outside the dist folder

* Fix generating state service and refactor path usage

Co-authored-by: Ben Willenbring <[email protected]>

visualization/package.json

@@ -68,7 +68,7 @@
 		"e2e": "jest --config ./jest.config.json .*\\.e2e\\.ts --coverage false",
 		"e2e:auto": "jest --config ./jest.config.json .*\\.e2e\\.ts --watch --coverage false",
 		"package": "rimraf dist/packages && build --concurrent --tasks win-x86,win-x64,linux-x86,linux-x64,mac-x64 --mirror https://dl.nwjs.io/ . && bestzip ./dist/packages/codecharta-visualization-$npm_package_version-web.zip ./dist/webpack",
-		"g": "plop",
+		"plop": "tsc --esModuleInterop true --outDir ./dist/plop ./plopfile.ts && cd dist/plop && plop",
 		"lint": "eslint \"app/**/*.ts\"",
 		"lint:fix": "eslint --fix \"app/**/*.ts\"",
 		"format": "prettier --write \"./**/*\"",
@@ -143,7 +143,7 @@
 		"makeshift": "^1.1.0",
 		"ng-annotate-loader": "^0.6.1",
 		"node-sass": "^4.13.1",
-		"plop": "^2.1.0",
+		"plop": "^2.6.0",
 		"prettier": "^1.16.4",
 		"pretty-quick": "^1.10.0",
 		"puppeteer": "^1.6.0",

visualization/plop/plopHelper.ts

@@ -0,0 +1,37 @@
+const OUTSIDE_DIST = "../../"
+const APP_BASE: string = OUTSIDE_DIST + "app/codeCharta/"
+const TEMPLATE_DIRECTORY: string = OUTSIDE_DIST + "plop/templates/"
+const FILE_NAME_SEPARATOR = "."
+const PATH_SEPARATOR = "/"
+const NAME = "{{camelCase name}}"
+const PLOP_TEMPLATE_EXTENSION = FILE_NAME_SEPARATOR + "hbs"
+
+interface FileModification {
+	path: string
+	pattern: RegExp
+	template: string
+}
+export function createFileAction(sourceDirectory: string, destinationDirectory: string, suffixTokens: string[]) {
+	return {
+		type: "add",
+		path: APP_BASE + destinationDirectory + PATH_SEPARATOR + [NAME, ...suffixTokens].join(FILE_NAME_SEPARATOR),
+		templateFile: TEMPLATE_DIRECTORY + sourceDirectory + PATH_SEPARATOR + suffixTokens.join(".") + PLOP_TEMPLATE_EXTENSION
+	}
+}
+
+export function modifyFileAction(modification: FileModification) {
+	return {
+		type: "modify",
+		path: APP_BASE + modification.path,
+		pattern: modification.pattern,
+		template: modification.template
+	}
+}
+
+export function createInputPromt(name: string, message: string) {
+	return {
+		type: "input",
+		name: name,
+		message: message
+	}
+}

visualization/plop/redux.ts

@@ -0,0 +1,79 @@
+import { createFileAction, createInputPromt, modifyFileAction } from "./plopHelper"
+
+const TEMPLATE_DIR: string = "redux"
+const DESTINATION_DIR: string = "state/store/{{camelCase subreducer}}/{{camelCase name}}"
+
+export const PLOP_REDUX_VARIABLE_PROMPTS = [
+	createInputPromt("name", "Property Name (e.x. areaMetric):"),
+	createInputPromt("type", "Type (e.x. string, boolean, Edge[]):"),
+	createInputPromt("default", "Default Value (e.x. null, true, 1234 or MY_STRING):"),
+	createInputPromt("randomvalue", "Another possible Value, we use in tests (e.x. false, 5678 or ANOTHER_STRING):"),
+	createInputPromt("subreducer", "Sub Reducer MUST EXIST BEFORE USING (e.x. fileSettings):")
+]
+
+export const PLOP_REDUX_FILE_ACTIONS = [
+	createFileAction(TEMPLATE_DIR, DESTINATION_DIR, ["actions", "ts"]),
+	createFileAction(TEMPLATE_DIR, DESTINATION_DIR, ["reducer", "spec", "ts"]),
+	createFileAction(TEMPLATE_DIR, DESTINATION_DIR, ["reducer", "ts"]),
+	createFileAction(TEMPLATE_DIR, DESTINATION_DIR, ["service", "spec", "ts"]),
+	createFileAction(TEMPLATE_DIR, DESTINATION_DIR, ["service", "ts"]),
+	createFileAction(TEMPLATE_DIR, DESTINATION_DIR, ["splitter", "ts"]),
+	modifyFileAction({
+		path: "state/state.module.ts",
+		pattern: /(\/\/ Plop: Append service name here)/gi,
+		template: "$1\r\n\t.service(_.camelCase({{properCase name}}Service.name), {{properCase name}}Service)"
+	}),
+	modifyFileAction({
+		path: "state/state.module.ts",
+		pattern: /(\/\/ Plop: Append module import here)/gi,
+		template:
+			'$1\r\nimport { {{properCase name}}Service } from "./store/{{camelCase subreducer}}/{{camelCase name}}/{{camelCase name}}.service"'
+	}),
+	modifyFileAction({
+		path: "state/injector.service.ts",
+		pattern: /(\/\/ Plop: Append service import here)/gi,
+		template:
+			'$1\r\nimport { {{properCase name}}Service } from "./store/{{camelCase subreducer}}/{{camelCase name}}/{{camelCase name}}.service"'
+	}),
+	modifyFileAction({
+		path: "state/injector.service.ts",
+		pattern: /(\/\/ Plop: Append service injection here)/gi,
+		template: "$1\r\n\t\tprivate {{camelCase name}}Service: {{properCase name}}Service,"
+	}),
+	modifyFileAction({
+		path: "state/store/{{camelCase subreducer}}/{{camelCase subreducer}}.reducer.ts",
+		pattern: /(\/\/ Plop: Append reducer import here)/gi,
+		template: '$1\r\nimport { {{camelCase name}} } from "./{{camelCase name}}/{{camelCase name}}.reducer"'
+	}),
+	modifyFileAction({
+		path: "state/store/{{camelCase subreducer}}/{{camelCase subreducer}}.reducer.ts",
+		pattern: /(\/\/ Plop: Append sub-reducer here)/gi,
+		template: "$1\r\n{{camelCase name}},"
+	}),
+	modifyFileAction({
+		path: "state/store/{{camelCase subreducer}}/{{camelCase subreducer}}.splitter.ts",
+		pattern: /(\/\/ Plop: Append action splitter import here)/gi,
+		template: '$1\r\nimport { split{{properCase name}}Action } from "./{{camelCase name}}/{{camelCase name}}.splitter"'
+	}),
+	modifyFileAction({
+		path: "state/store/{{camelCase subreducer}}/{{camelCase subreducer}}.splitter.ts",
+		pattern: /(\/\/ Plop: Append action split here)/gi,
+		template:
+			"$1\r\n\tif (payload.{{camelCase name}} !== undefined) {\n\t\tactions.push(split{{properCase name}}Action(payload.{{camelCase name}}))\n\t}\n"
+	}),
+	modifyFileAction({
+		path: "state/store/{{camelCase subreducer}}/{{camelCase subreducer}}.reducer.ts",
+		pattern: /(\/\/ Plop: Append action forwarding here)/gi,
+		template: "$1\r\n\t\t{{camelCase name}}: {{camelCase name}}(state.{{camelCase name}}, {{camelCase name}}Action),"
+	}),
+	modifyFileAction({
+		path: "state/store/{{camelCase subreducer}}/{{camelCase subreducer}}.actions.ts",
+		pattern: /(\/\/ Plop: Append default property here)/gi,
+		template: "$1\r\n\t{{camelCase name}}: default{{properCase name}},"
+	}),
+	modifyFileAction({
+		path: "state/store/{{camelCase subreducer}}/{{camelCase subreducer}}.actions.ts",
+		pattern: /(\/\/ Plop: Append default property import here)/gi,
+		template: `$1\r\nimport { default{{properCase name}} } from "./{{camelCase name}}/{{camelCase name}}.actions"`
+	})
+]

visualization/plop/reduxSubreducer.ts

@@ -0,0 +1,55 @@
+import { createFileAction, createInputPromt, modifyFileAction } from "./plopHelper"
+
+const TEMPLATE_DIR: string = "reduxSubreducer"
+const DESTINATION_DIR: string = "state/store/{{camelCase name}}"
+
+export const PLOP_REDUX_SUBREDUCER_VARIABLE_PROMPTS = [createInputPromt("name", "Name (e.x. dynamicSettings):")]
+
+export const PLOP_REDUX_SUBREDUCER_FILE_ACTIONS = [
+	createFileAction(TEMPLATE_DIR, DESTINATION_DIR, ["actions", "ts"]),
+	createFileAction(TEMPLATE_DIR, DESTINATION_DIR, ["reducer", "spec", "ts"]),
+	createFileAction(TEMPLATE_DIR, DESTINATION_DIR, ["reducer", "ts"]),
+	createFileAction(TEMPLATE_DIR, DESTINATION_DIR, ["splitter", "ts"]),
+	modifyFileAction({
+		path: "state/store/state.reducer.ts",
+		pattern: /(\/\/ Plop: Import sub-reducer here)/gi,
+		template: '$1\r\nimport {{camelCase name}} from "./{{camelCase name}}/{{camelCase name}}.reducer"'
+	}),
+	modifyFileAction({
+		path: "state/store/state.reducer.ts",
+		pattern: /(\/\/ Plop: Append sub-reducer here)/gi,
+		template: "$1\r\n\t{{camelCase name}},"
+	}),
+	modifyFileAction({
+		path: "state/store/state.actions.ts",
+		pattern: /(\/\/ Plop: Import sub-reducer here)/gi,
+		template: '$1\r\nimport { default{{properCase name}} } from "./{{camelCase name}}/{{camelCase name}}.actions"'
+	}),
+	modifyFileAction({
+		path: "state/store/state.actions.ts",
+		pattern: /(\/\/ Plop: Append sub-reducer here)/gi,
+		template: "$1\r\n\t{{camelCase name}}: default{{properCase name}},"
+	}),
+	modifyFileAction({
+		path: "state/store/state.splitter.ts",
+		pattern: /(\/\/ Plop: Import sub-reducer action here)/gi,
+		template: '$1\r\nimport { {{properCase name}}Actions } from "./{{camelCase name}}/{{camelCase name}}.actions"'
+	}),
+	modifyFileAction({
+		path: "state/store/state.splitter.ts",
+		pattern: /(\/\/ Plop: Import sub-reducer splitter here)/gi,
+		template: '$1\r\nimport { split{{properCase name}}Actions } from "./{{camelCase name}}/{{camelCase name}}.splitter"'
+	}),
+	modifyFileAction({
+		path: "state/store/state.splitter.ts",
+		pattern: /(\/\/ Plop: Propagate sub-reducer here)/gi,
+		template:
+			"$1\r\n\tif (_.values({{properCase name}}Actions).includes(action.type)) {\n\t\treturn split{{properCase name}}Actions(action.payload)\n\t}\n"
+	}),
+	modifyFileAction({
+		path: "state/store/state.splitter.ts",
+		pattern: /(\/\/ Plop: Split into sub-reducer here)/gi,
+		template:
+			"$1\r\n\t\tif (action.payload.{{camelCase name}} !== undefined) {\n\t\t\tactions = actions.concat(...split{{properCase name}}Actions(action.payload.{{camelCase name}}))\n\t\t}\n"
+	})
+]

visualization/plop/state.ts

@@ -0,0 +1,21 @@
+import { createFileAction, createInputPromt, modifyFileAction } from "./plopHelper"
+
+const TEMPLATE_DIR: string = "state"
+const DESTINATION_DIR: string = "state"
+
+export const PLOP_STATE_VARIABLE_PROMPTS = [createInputPromt("name", "Name (e.x. foo):")]
+
+export const PLOP_STATE_FILE_ACTIONS = [
+	createFileAction(TEMPLATE_DIR, DESTINATION_DIR, ["service", "ts"]),
+	createFileAction(TEMPLATE_DIR, DESTINATION_DIR, ["service", "spec", "ts"]),
+	modifyFileAction({
+		path: "state/state.module.ts",
+		pattern: /(\/\/ Plop: Append service name here)/gi,
+		template: "$1\r\n\t.service(_.camelCase({{properCase name}}Service.name), {{properCase name}}Service)"
+	}),
+	modifyFileAction({
+		path: "state/state.module.ts",
+		pattern: /(\/\/ Plop: Append module import here)/gi,
+		template: '$1\r\nimport { {{properCase name}}Service } from "./{{camelCase name}}.service"'
+	})
+]

visualization/plop/ui.ts

@@ -0,0 +1,26 @@
+import { createFileAction, createInputPromt, modifyFileAction } from "./plopHelper"
+
+const TEMPLATE_DIR: string = "ui"
+const DESTINATION_DIR: string = "ui/{{camelCase name}}"
+
+export const PLOP_UI_VARIABLE_PROMPTS = [createInputPromt("name", "Name:")]
+
+export const PLOP_UI_FILE_ACTIONS = [
+	createFileAction(TEMPLATE_DIR, DESTINATION_DIR, ["component", "ts"]),
+	createFileAction(TEMPLATE_DIR, DESTINATION_DIR, ["module", "ts"]),
+	createFileAction(TEMPLATE_DIR, DESTINATION_DIR, ["component", "html"]),
+	createFileAction(TEMPLATE_DIR, DESTINATION_DIR, ["component", "scss"]),
+	createFileAction(TEMPLATE_DIR, DESTINATION_DIR, ["e2e", "ts"]),
+	createFileAction(TEMPLATE_DIR, DESTINATION_DIR, ["po", "ts"]),
+	createFileAction(TEMPLATE_DIR, DESTINATION_DIR, ["component", "spec", "ts"]),
+	modifyFileAction({
+		path: "ui/ui.ts",
+		pattern: /(\/\/ Plop: Append component name here)/gi,
+		template: '$1\r\n\t\t"app.codeCharta.ui.{{camelCase name}}",'
+	}),
+	modifyFileAction({
+		path: "ui/ui.ts",
+		pattern: /(\/\/ Plop: Append module import here)/gi,
+		template: '$1\r\nimport "./{{camelCase name}}/{{camelCase name}}.module";'
+	})
+]

visualization/plop/util.ts

@@ -0,0 +1,11 @@
+import { createFileAction, createInputPromt } from "./plopHelper"
+
+const TEMPLATE_DIR: string = "util"
+const DESTINATION_DIR: string = "util"
+
+export const PLOP_UTIL_VARIABLE_PROMPTS = [createInputPromt("name", "Name:")]
+
+export const PLOP_UTIL_FILE_ACTIONS = [
+	createFileAction(TEMPLATE_DIR, DESTINATION_DIR, ["ts"]),
+	createFileAction(TEMPLATE_DIR, DESTINATION_DIR, ["spec", "ts"])
+]