refactor: add rollup + refactor to compose steps + tests

jsconfig.json

@@ -1,7 +1,6 @@
 {
   "compilerOptions": {
     "sourceMap": true,
-    "baseUrl": "./src",
     "module": "ES6"
   }
 }

package.json

@@ -8,6 +8,7 @@
   "type": "module",
   "private": false,
   "scripts": {
+    "build": "rollup --config",
     "test": "node --test",
     "test:watch": "node --test --watch",
     "test:coverage": "node --test --experimental-test-coverage --test-reporter=lcov --test-reporter-destination=lcov.info",
@@ -16,5 +17,9 @@
   "dependencies": {
     "@inquirer/prompts": "^4.3.2",
     "commander": "^12.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-json": "^6.1.0",
+    "rollup": "^4.14.1"
   }
 }

rollup.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from "rollup";
+
+import json from "@rollup/plugin-json";
+
+export default defineConfig({
+  input: "src/main.js",
+  output: {
+    file: "dist/tricorder.js",
+    format: "es",
+    sourcemapFile: true,
+  },
+  plugins: [json()],
+});

src/actions/guided.js

@@ -5,10 +5,28 @@ import {
   postfixChoices,
   resourcesPaths,
   tsTypeChoices,
+  vueVersionsChoices,
 } from "../constants/choices.js";
 import { boolAsText } from "../utils/string.js";
 
 import { guidedFlowGenerator } from "../flows/guided-flow-generator.js";
+import { FrameworkEnum } from "../enums/frameworks.js";
+
+/**
+ * @typedef {{
+ *   type: string;
+ *   name: string;
+ *   framework: string;
+ *   version: string | number
+ *   resourcePath: string;
+ *   testPath: string
+ *   storyPath: string
+ *   testPostfix: string;
+ *   typescript: boolean;
+ *   withTest: boolean;
+ *   withStory: boolean;
+ * }} Answers
+ */
 
 export async function guidedAction() {
   let withTest = false;
@@ -19,11 +37,20 @@ export async function guidedAction() {
   let storyPath = null;
   let resourcePath = null;
 
+  let version = null;
+
   const framework = await select({
     message: "Select your framework/lib",
     choices: frameworksAndLibsChoices,
   });
 
+  if (framework === FrameworkEnum.Vue) {
+    version = await select({
+      message: "What is your Vue version?",
+      choices: vueVersionsChoices,
+    });
+  }
+
   const typescript = await confirm({ message: "Do you use TypeScript?" });
 
   const type = await select({
@@ -95,8 +122,12 @@ export async function guidedAction() {
 
   const name = await input({ message: "Name" });
 
+  /**
+   * @type {Answers}
+   */
   const answers = {
     framework,
+    version,
     name,
     resourcePath,
     testPath,

src/constants/choices.js

@@ -1,3 +1,6 @@
+import { FrameworkEnum } from "../enums/frameworks.js";
+import { VueVersionEnum } from "../enums/vue-version.js";
+
 export const tsTypeChoices = [
   { name: "Page", value: "page" },
   { name: "Component", value: "component" },
@@ -23,8 +26,13 @@ export const jsTypeChoices = [
 ];
 
 export const frameworksAndLibsChoices = [
-  { name: "Vue", value: "vue" },
-  { name: "React", value: "react" },
+  { name: "Vue", value: FrameworkEnum.Vue },
+  { name: "React", value: FrameworkEnum.React },
+];
+
+export const vueVersionsChoices = [
+  { name: "Vue 2", value: VueVersionEnum[2] },
+  { name: "Vue 3", value: VueVersionEnum[3] },
 ];
 
 export const postfixChoices = [

src/constants/index.js

@@ -0,0 +1,2 @@
+export * from "./choices.js";
+export * from "./templates.js";

src/constants/templates.js

@@ -0,0 +1,31 @@
+/**
+ * Built-in templates path dictionary
+ */
+export const templates = {
+  react: {
+    ts: {
+      functional: "src/templates/react/ts/FuncionalComponent.tsx",
+    },
+    js: {
+      functional: "src/templates/react/js/FuncionalComponent.jsx",
+    },
+  },
+  vue: {
+    2: {
+      js: {
+        options: "src/templates/vue/3/js/OptionsComponent.vue",
+      },
+      ts: {
+        options: "src/templates/vue/2/ts/OptionsComponent.vue",
+      },
+    },
+    3: {
+      ts: {
+        setup: "src/templates/vue/3/ts/SetupComponent.vue",
+      },
+      js: {
+        setup: "src/templates/vue/3/js/SetupComponent.vue",
+      },
+    },
+  },
+};

src/enums/file-extensions.js → src/enums/file-extension.js

@@ -1,4 +1,4 @@
-export const FileExtensions = {
+export const FileExtensionEnum = {
   ts: "ts",
   tsx: "tsx",
   js: "js",

src/enums/file-extension.test.js

@@ -1,15 +1,15 @@
 import { describe, it } from "node:test";
 import assert from "node:assert/strict";
 
-import { FileExtensions } from "./file-extensions.js";
+import { FileExtensionEnum } from "./file-extension.js";
 
-describe("FileExtension Enum", () => {
+describe("FileExtensionEnum", () => {
   it("should return properly value", () => {
-    assert.strictEqual(FileExtensions.js, "js");
-    assert.strictEqual(FileExtensions.jsx, "jsx");
-    assert.strictEqual(FileExtensions.json, "json");
-    assert.strictEqual(FileExtensions.ts, "ts");
-    assert.strictEqual(FileExtensions.tsx, "tsx");
-    assert.strictEqual(FileExtensions.vue, "vue");
+    assert.strictEqual(FileExtensionEnum.js, "js");
+    assert.strictEqual(FileExtensionEnum.jsx, "jsx");
+    assert.strictEqual(FileExtensionEnum.json, "json");
+    assert.strictEqual(FileExtensionEnum.ts, "ts");
+    assert.strictEqual(FileExtensionEnum.tsx, "tsx");
+    assert.strictEqual(FileExtensionEnum.vue, "vue");
   });
 });

src/enums/frameworks.js

@@ -0,0 +1,4 @@
+export const FrameworkEnum = {
+  Vue: "vue",
+  React: "react",
+};

src/enums/frameworks.test.js

@@ -0,0 +1,11 @@
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+
+import { FrameworkEnum } from "./frameworks.js";
+
+describe("FrameworksEnum", () => {
+  it("should return properly values", () => {
+    assert.strictEqual(FrameworkEnum.Vue, "vue");
+    assert.strictEqual(FrameworkEnum.React, "react");
+  });
+});

src/enums/index.js

@@ -0,0 +1,3 @@
+export * from "./file-extension.js";
+export * from "./frameworks.js";
+export * from "./vue-version.js";

src/enums/vue-version.js

@@ -0,0 +1,4 @@
+export const VueVersionEnum = {
+  2: 2,
+  3: 3,
+};

src/enums/vue-version.test.js

@@ -0,0 +1,10 @@
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import { VueVersionEnum } from "./vue-version";
+
+describe("FrameworksEnum", () => {
+  it("should return properly values", () => {
+    assert.strictEqual(VueVersionEnum[2], 2);
+    assert.strictEqual(VueVersionEnum[3], 3);
+  });
+});

src/flows/guided-flow-generator.js

@@ -1,24 +1,16 @@
 import { input } from "@inquirer/prompts";
 import { checkDirectoriesTree } from "../utils/directory.js";
 import { splitPathString } from "../utils/string.js";
-import { generateComponent } from "../generators/component.js";
+import { generateComponent } from "../generators/components.js";
 
 /**
  * Generate file from guided prompt
  *
- * @param {{
- *   type: string;
- *   name: string;
- *   framework: string;
- *   resourcePath: string;
- *   testPostfix: string;
- *   typescript: boolean;
- *   withTest: boolean;
- *   withStory: boolean;
- * }} data Information the user provided in the guided prompt
- * @param {{ exportDefault: boolean } | undefined} globalConfig
+ * @typedef {import("../actions/guided.js").Answers} Answers
+ *
+ * @param {Answers} data Information the user provided in the guided prompt
  */
-export async function guidedFlowGenerator(data, globalConfig) {
+export async function guidedFlowGenerator(data) {
   await checkProvidedPathRecursive(data.resourcePath, (path) => {
     generateComponent({ ...data, path });
   });
@@ -31,7 +23,8 @@ export async function guidedFlowGenerator(data, globalConfig) {
  * @returns {Promise<string>}
  */
 async function checkProvidedPathRecursive(path, callback) {
-  const pathExists = checkDirectoriesTree(splitPathString(path));
+  const pathArray = splitPathString(path);
+  const pathExists = checkDirectoriesTree(pathArray);
 
   if (pathExists) {
     return callback(path);