temporary fix

.gitignore

@@ -1,6 +1,4 @@
 .vscode/
 node_modules
 components
-src/stubs/angular/*.js
-*/**/*.*js
-**/*.mjs
+src/stubs/angular/*.js

cmd/make-js-component.mjs

@@ -0,0 +1,18 @@
+#! /usr/bin/env node
+import createComponent from "../src/utils/utils.mjs";
+import wizard from "../src/utils/wizard.mjs";
+var vueApi;
+(function (vueApi) {
+    vueApi["Composition"] = "composition";
+    vueApi["Option"] = "option";
+})(vueApi || (vueApi = {}));
+wizard()
+    .then((answers) => {
+    const { componentName, framework, template, folder, advancedOpts, advanced } = answers;
+    const api = template.indexOf("composition") !== -1 ? vueApi.Composition : vueApi.Option;
+    const t = advanced ? "advanced-component.vue" : template;
+    createComponent(componentName, framework, t, folder, api, advancedOpts);
+})
+    .catch((e) => {
+    console.error(e.message);
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "make-js-component",
-  "version": "0.2.6beta-.3",
+  "version": "0.2.6beta-.4",
   "description": "Easily create your js framework component in one command",
   "repository": "https://github.com/Giuliano1993/make-js-component",
   "bin": "./cmd/make-js-component.mjs",

src/utils/configs.cjs

@@ -0,0 +1,35 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.configs = void 0;
+const path = __importStar(require("node:path"));
+const mainFilename = path.dirname(module?.filename || "");
+const dir = path.join(mainFilename, "../..");
+exports.configs = {
+    INIT_PATH: dir,
+    BASE_DIR: "./src",
+    STUBS_DIR: "stubs",
+    COMPONENT_FOLDER: "/components",
+};

src/utils/frameworks/angular/angular.mjs

@@ -0,0 +1,9 @@
+const framework = "angular";
+export default function (componentName, folder) {
+    return {
+        componentName: componentName,
+        framework: framework.toLowerCase(),
+        template: "component.component.ts",
+        folder: folder,
+    };
+}

src/utils/frameworks/angular/make-angular-component.mjs

@@ -0,0 +1,33 @@
+import * as fs from "fs";
+import path from "path";
+import { configs } from "../../configs.cjs";
+import { writeFile } from "../../utils.mjs";
+export function makeAngularComponent(filePathDestination, component, componentName) {
+    let componentContent = component.replace(/selector: 'SelectorName'/, `selector: 'app-${convertFromCamelCase(componentName)}'`);
+    componentContent = replaceComponentName(componentContent, componentName);
+    writeFile(filePathDestination, componentContent);
+    makeAngularComponentTest(componentName);
+}
+function makeAngularComponentTest(componentName) {
+    const templateFileTestPath = path.join(configs.INIT_PATH, "src", configs.STUBS_DIR, "angular", "component.component.spec.ts");
+    fs.readFile(templateFileTestPath, "utf8", (err, component) => {
+        const componentContent = replaceComponentName(component, componentName);
+        const filePathDestination = path.join(configs.BASE_DIR, configs.COMPONENT_FOLDER, `${componentName}.component.spec.ts`);
+        writeFile(filePathDestination, componentContent);
+    });
+}
+function convertToCamelCase(string) {
+    return string
+        .replace(/-([a-z])/g, (s) => {
+        return s.toUpperCase();
+    })
+        .replace(/^[a-z]/, s => {
+        return s.toUpperCase();
+    });
+}
+function convertFromCamelCase(string) {
+    return string.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function replaceComponentName(data, componentName) {
+    return data.replace(/ComponentName/g, `${convertToCamelCase(componentName)}Component`);
+}

src/utils/frameworks/astro/astro.mjs

@@ -0,0 +1,9 @@
+const framework = "astro";
+export default function (componentName, folder) {
+    return {
+        componentName: componentName,
+        framework: framework.toLowerCase(),
+        template: "component.astro",
+        folder: folder,
+    };
+}

src/utils/frameworks/qwik/qwik.mjs

@@ -0,0 +1,27 @@
+import inquirer from "inquirer";
+const framework = "qwik";
+export default function (componentName, folder) {
+    return inquirer
+        .prompt([
+        {
+            type: "list",
+            name: "type",
+            message: "Choose wich type of component to create",
+            choices: ["Hello World", "useStore", "useStyles"],
+        },
+    ])
+        .then(answers => {
+        return {
+            componentName: componentName,
+            framework: framework.toLowerCase(),
+            template: answers.type === "Hello World"
+                ? "hello-world-component.tsx"
+                : answers.type === "useStore"
+                    ? "usestore-component.tsx"
+                    : answers.type === "useStyles"
+                        ? "usestyles-component.tsx"
+                        : "hello-world-component.tsx",
+            folder: folder,
+        };
+    });
+}

src/utils/frameworks/react/react.mjs

@@ -0,0 +1,50 @@
+import inquirer from "inquirer";
+const framework = "react";
+export default function (componentName, folder) {
+    return inquirer
+        .prompt([
+        {
+            type: "confirm",
+            name: "typescript",
+            message: "Do you want to use Typescript?",
+            default: true,
+        },
+    ])
+        .then((answers) => {
+        const { typescript } = answers;
+        return inquirer
+            .prompt([
+            {
+                type: "list",
+                name: "css",
+                message: "Do you want to use any CSS framework?",
+                choices: ["Tailwind", "Styled Components", "CSS Module", "No"],
+            },
+        ])
+            .then((answers) => {
+            const { css } = answers;
+            const extension = typescript ? "tsx" : "jsx";
+            let templateBase = "function-component";
+            switch (css) {
+                case "Tailwind":
+                    templateBase += "-tailwind";
+                    break;
+                case "Styled Components":
+                    templateBase += "-styled";
+                    break;
+                case "CSS Module":
+                    templateBase += "-css-module";
+                    break;
+                default:
+                    break;
+            }
+            const template = `${templateBase}.${extension}`;
+            return {
+                componentName: componentName,
+                framework: framework.toLowerCase(),
+                template: template,
+                folder: folder,
+            };
+        });
+    });
+}

src/utils/frameworks/svelte/svelte.mjs

@@ -0,0 +1,21 @@
+import inquirer from "inquirer";
+const framework = "svelte";
+export default function (componentName, folder) {
+    return inquirer
+        .prompt([
+        {
+            type: "confirm",
+            name: "typescript",
+            message: "Do you want to use Typescript?",
+            default: true,
+        },
+    ])
+        .then((answers) => {
+        return {
+            componentName: componentName,
+            framework: framework.toLowerCase(),
+            template: answers.typescript ? "component-ts.svelte" : "component-js.svelte",
+            folder: folder,
+        };
+    });
+}

src/utils/frameworks/vue/helper.mjs

@@ -0,0 +1,66 @@
+export var vueApi;
+(function (vueApi) {
+    vueApi["Composition"] = "composition";
+    vueApi["Option"] = "option";
+})(vueApi || (vueApi = {}));
+export default function advancedVueBuilder(data, componentType, advancedOpts) {
+    if (typeof advancedOpts === "undefined")
+        return "";
+    let output = data;
+    if (componentType === vueApi.Composition) {
+        const replacable = {
+            props: "const props = defineProps(['foo'])",
+            emits: "const emit = defineEmits(['inFocus', 'submit'])",
+            refs: "const element = ref(null)",
+            mounted: `onMounted(() => {
+				console.log("the component is now mounted.")
+			  })`,
+            data: "",
+            components: "",
+        };
+        const importsFunctions = [];
+        for (const key in replacable) {
+            const codeInject = advancedOpts.indexOf(key) !== -1 ? replacable[key] : "";
+            const replacePattern = `__${key}__`;
+            output = output.replaceAll(replacePattern, codeInject);
+            if (key === "refs" && advancedOpts.indexOf(key) !== -1) {
+                importsFunctions.push("ref");
+            }
+            else if (key === "mounted" && advancedOpts.indexOf(key) !== -1) {
+                importsFunctions.push("onMounted");
+            }
+        }
+        let imports = "";
+        if (importsFunctions.length > 0) {
+            imports = `import { ${importsFunctions.join(", ")} } from 'vue'`;
+        }
+        output = output.replace("__refimport__", imports);
+    }
+    else if (componentType === vueApi.Option) {
+        const replacable = {
+            props: "props: ['foo'],",
+            emits: "emits: ['inFocus', 'submit'],",
+            data: "data:{},",
+            mounted: "mounted(){},",
+            refs: "",
+            components: "components: {},",
+        };
+        for (const key in replacable) {
+            const codeInject = advancedOpts.indexOf(key) !== -1 ? replacable[key] : "";
+            const replacePattern = `__${key}__`;
+            output = output.replaceAll(replacePattern, codeInject);
+        }
+    }
+    output = cleanVueData(output, componentType);
+    return output;
+}
+function cleanVueData(data, api) {
+    const apiStart = api === vueApi.Composition ? "__compositionstart__" : "__optionsstart__";
+    const apiEnd = api === vueApi.Composition ? "__compositionend__" : "__optionsend__";
+    const deleteStart = api === vueApi.Composition ? "__optionsstart__" : "__compositionstart__";
+    const deleteEnd = api === vueApi.Composition ? "__optionsend__" : "__compositionend__";
+    const output = data.replace(apiStart, "").replace(apiEnd, "");
+    const start = output.indexOf(deleteStart);
+    const end = output.indexOf(deleteEnd);
+    return output.slice(0, start) + output.slice(end + deleteEnd.length);
+}

src/utils/frameworks/vue/vue.mjs

@@ -0,0 +1,26 @@
+import inquirer from "inquirer";
+import { prepareAdvanced } from "../../utils.mjs";
+const framework = "vue";
+export default function (componentName, folder) {
+    return inquirer
+        .prompt([
+        {
+            type: "list",
+            name: "api",
+            message: "Choose wich api to use",
+            choices: ["Composition", "Options"],
+        },
+        ...prepareAdvanced(["props", "refs", "data", "mounted", "emits", "components"]),
+    ])
+        .then((answers) => {
+        return {
+            componentName: componentName,
+            framework: framework,
+            template: answers.api === "Composition" ? "component-composition.vue" : "component-options.vue",
+            folder: folder,
+            advanced: answers.advanced,
+            api: answers.api.toLocaleLowerCase(),
+            advancedOpts: answers.advancedOpts || [],
+        };
+    });
+}