diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..84f5661 Binary files /dev/null and b/.DS_Store differ diff --git a/.gitignore b/.gitignore index 3c3629e..f06235c 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ node_modules +dist diff --git a/README.md b/README.md index c7d865b..432c671 100755 --- a/README.md +++ b/README.md @@ -11,18 +11,14 @@ Methane is a **CLI** tool that helps developers easily create **React components, pages or NextJS components, pages, dynamic pages and service worker files** with boilerplate codes. It also comes with extra configration that allows you choose either **JavaScript** or **TypeScript** templates. -

- Methane Logo -

- ## What's New ❓ -The new major version **2.0.0** comes with support for **NextJS**. This is a game changer for NextJs developers, with **Methane** you can easily generate your components from the command line and bingo 🚀 +The patch version **1.4.1** aims to fix issues related to the **components and pages** generation. -1. Support for **NextJS** -2. Migrated codebase from **JS** to **TS** -3. Cleaner CLI Interface -4. Customize your project based on your local configuration. +1. React Components and Pages as well as NextJs Components, Pages name default to `index.jsx` or `index.tsx` if **generateFolder** configuration is specified. This makes **components and pages** import cleaner and easier to understand. For example, if you generate a component called `Button`, the generated component path would be `Button/index.jsx` or `Button/index.tsx` and you can import it like this `import Button from './components/Button'`. Unlike before where you would have to import it like this `import Button from './components/Button/Button'`. +2. Fixed component and pages capitalization issue. In previous versions of **Methane**, if you generate a component called `button`, the file name remains `button` but the generated component would be `button` instead of `Button`. This has been fixed in this version. +3. Gracefully handled potential error that might occur when generating pages or components. +4. Added a new argument `-d` or `--default` to `methane init` command. This allows developers to easily intialize **Methane** with the default configuration without being prompted to answer questions. This is useful when you want to quickly initialize **Methane** in a new project. **Note** You can always update the **Methane** configuration by running `methane config` command. ## Installation 💿 @@ -30,9 +26,15 @@ To install **Methane-Cli**, run the following command. Note you've to install it **Note** You've to init methane before using it in your project. ```bash -# npm npm install -g methane-cli +``` + +```bash +bun install -g methane-cli +``` +```bash +yarn add -g methane-cli ``` ## Usage 🚦 @@ -45,7 +47,7 @@ rg ``` -This would show a welcome message with information about the tool. Then you need to run the init command. This would help you to configure methane to your taste. 😛 +This would show a welcome message with information about the tool. Then you need to run the init command. This would help you to configure methane to your taste 😛. ```bash @@ -55,6 +57,12 @@ methane init This would prompt you to answer some questions and a config file will be created. Note you can't use **Methane** if you don't have the config file. +Optionally, you can also add the `-d` or `--default` argument to skip the prompt and use the default configuration. + +```bash +methane init --default +``` + ## Commands The following commands are available in **methane-cli** @@ -91,7 +99,7 @@ To change the configurations, run the following command. To change the template to **tsx** run the following command. ```bash -doyin@doyinHpLaptop:~/Desktop/react-app$ methane c --template tsx +mac@Macs-MBP~/D/react-app$ methane c --template tsx ``` @@ -102,7 +110,7 @@ _jsx or tsx are the only options available_ To change the component generation style, run the following command. ```bash -doyin@doyinHpLaptop:~/Desktop/react-app$ methane config -c arrow +mac@Macs-MBP~/D/react-app$ methane config -c arrow ``` @@ -113,7 +121,7 @@ _arrow or functional are the only options available_ To change the page generation style, run the following command ```bash -doyin@doyinHpLaptop:~/Desktop/react-app$ methane config -p arrow +mac@Macs-MBP~/D/react-app$ methane config -p arrow ``` @@ -124,7 +132,7 @@ _arrow or functional are the only options available_ To generate stylesheet file for components and pages, run the following command ```bash -doyin@doyinHpLaptop:~/Desktop/react-app$ methane config -gs true +mac@Macs-MBP~/D/react-app$ methane config -gs true ``` @@ -135,7 +143,7 @@ _true or false are the only options available_ To generate a folder for components and pages, run the following command ```bash -doyin@doyinHpLaptop:~/Desktop/react-app$ methane config -gf true +mac@Macs-MBP~/D/react-app$ methane config -gf true ``` @@ -146,7 +154,7 @@ _true or false are the only options available_ To register the generated pages in your **App.js or App.jsx or App.tsx or App.ts** file, run the following command. This is strictly or **React** and not **NextJS** ```bash -doyin@doyinHpLaptop:~/Desktop/react-app$ methane config -r true +mac@Macs-MBP~/D/react-app$ methane config -r true ``` @@ -157,7 +165,7 @@ _true or false are the only options available_ To change the stylesheet type for your components and pages, run the following command. ```bash -doyin@doyinHpLaptop:~/Desktop/react-app$ methane config -st css +mac@Macs-MBP~/D/react-app$ methane config -st css ``` @@ -170,14 +178,14 @@ With the new update, you can generate **React** or **NextJS** server or client c ### Generating A React Component ```bash -doyin@doyinHpLaptop:~/Desktop/react-app$ methane g -c componentName +mac@Macs-MBP~/D/react-app$ methane g -c componentName ``` ### Generating A NextJS Component ```bash -doyin@doyinHpLaptop:~/Desktop/react-app$ methane g -nc componentName +mac@Macs-MBP~/D/react-app$ methane g -nc componentName ``` @@ -196,7 +204,7 @@ With the new update, you can generate **React** or **NextJS** server or client p ### Generating A React Page ```bash -doyin@doyinHpLaptop:~/Desktop/react-app$ methane g -p pageName +mac@Macs-MBP~/D/react-app$ methane g -p pageName ``` @@ -205,7 +213,7 @@ This would create a new page according to the global configuration and add the p ### Generating A NextJS Page ```bash -doyin@doyinHpLaptop:~/Desktop/react-app$ methane g -np pageName +mac@Macs-MBP~/D/react-app$ methane g -np pageName ``` @@ -214,7 +222,7 @@ This would generate a new page according to the configuration in your _/methane/ **Optionally, you can specify your nextJs page to be a server or client page** To do this, Simply add the **ct** flag, then you can specify server or client omitting the **ct** would generate a client page by default. ```bash -doyin@doyinHpLaptop:~/Desktop/react-app$ methane g -np pageName -ct server +mac@Macs-MBP~/D/react-app$ methane g -np pageName -ct server ``` @@ -223,19 +231,19 @@ doyin@doyinHpLaptop:~/Desktop/react-app$ methane g -np pageName -ct server As you already know, in **NextJS** dynamic pages are pages whose content is determined by parameters included in the URL. For example _/product/1_ is a dynamic URL. Now Methane can also help you create dynamic pages. Usually, a dynamic page would be nested within a page. For example, I've a products page already _/products_, my dynamic page would most likely be productId. So using Methane, you can generate a dynamic page using the command below ```bash -doyin@doyinHpLaptop:~/Desktop/react-app$ methane g -ndp productId -sp /products +mac@Macs-MBP~/D/react-app$ methane g -nid productId -sp /products ``` ##### Command Arguments -1. **-npd** -npid (Next Dynamic Page) is the dynamic page name, which in this case is _productId_ +1. **-nid** -nid (Next Dynamic Page Id) is the dynamic page name, which in this case is _productId_ 2. **-sp** -sp is an optional parameter called (Start Page) which is indicates the folder to place the dynamic page in. You don't need to specify the default nextJS _/app_ when specifying the folder to place the dynamic page. **Optionally, you can specify your nextJs page to be a server or client page** To do this, Simply add the **ct** flag, then you can specify server or client omitting the **ct** would generate a client page by default. ```bash -doyin@doyinHpLaptop:~/Desktop/react-app$ methane g -ndp productId -sp /products -ct server +mac@Macs-MBP~/D/react-app$ methane g -ndp productId -sp /products -ct server ``` @@ -248,7 +256,7 @@ Added a new command **`list-config [ls]`** - `--list-config` or `-lc`: Lists all Methane configurations. ````bash -doyin@doyinHpLaptop:~/Desktop/react-app$ methane list-config +mac@Macs-MBP~/D/react-app$ methane list-config All configurations { @@ -263,7 +271,7 @@ All configurations ```bash -doyin@doyinHpLaptop:~/Desktop/react-app$ methane g -sw +mac@Macs-MBP~/D/react-app$ methane g -sw ```` @@ -286,7 +294,7 @@ _You don't have specify any name for the service-worker_ If you are stuck or you want to learn more about the different configurations, run the following command. ```bash -doyin@doyinHpLaptop:~/Desktop/react-app$ methane c --help +mac@Macs-MBP~/D/react-app$ methane c --help ``` @@ -296,7 +304,7 @@ doyin@doyinHpLaptop:~/Desktop/react-app$ methane c --help ## Contributing ❤️ -If you'd like to contribute to **methane**, please follow these steps: +If you'd like to contribute to **Methane**, please follow these steps: 1. Fork the repository 2. Create a new branch @@ -308,9 +316,9 @@ Please star this repo if you find it useful. Also share the good news with your ## License 🧐 -**methane-cli** is licensed under the [MIT License](https://opensource.org/licenses/MIT). +**Methane-Cli** is licensed under the [MIT License](https://opensource.org/licenses/MIT). ## Contibutors 👨‍ - -Adedoyin Emmanuel Adeniyi + + \ No newline at end of file diff --git a/bun.lockb b/bun.lockb new file mode 100755 index 0000000..e2d9a4a Binary files /dev/null and b/bun.lockb differ diff --git a/dist/helpers/generators/generateComponent.js b/dist/helpers/generators/generateComponent.js deleted file mode 100755 index 3e20086..0000000 --- a/dist/helpers/generators/generateComponent.js +++ /dev/null @@ -1,60 +0,0 @@ -import colors from "colors"; -import fs from "fs"; -import path from "path"; -import * as readUserConfig from "../utilis/readUserConfig.js"; -import * as componentResolver from "./resolvers/resolveComponentContent.js"; -const findComponentDirectory = () => { - const rootDir = process.cwd(); - const possibleDirs = [ - "src/components", - "src/Components", - "src/component", - "src/Component", - "Components", - "components", - "Component", - "component", - ]; - const componentDir = possibleDirs.find((dir) => fs.existsSync(path.join(rootDir, dir))); - return componentDir ? path.join(rootDir, componentDir) : null; -}; -const generateComponentFile = async (name, componentDir, componentResolver) => { - // const componentFilePath = path.join( - // componentDir + `/${name}.${readUserConfig.readConfig().template}` - // ); - await fs.writeFile(componentDir, componentResolver.resolveComponentContent(readUserConfig, name), (error) => { - if (error) { - console.log(colors.bold(colors.red(error.toString()))); - } - }); -}; -export const generateComponent = async (name) => { - if (!name) { - return console.log(colors.bold(colors.red("Component extension or name is required!"))); - } - const componentDir = findComponentDirectory(); - if (!componentDir) { - console.log(colors.bold(colors.red("components folder doesn't exist"))); - return; - } - const componentDirName = readUserConfig.readConfig().generateFolder === "true" - ? path.join(componentDir, name) - : componentDir; - const componentFilePath = path.join(componentDirName + `/${name}.${readUserConfig.readConfig().template}`); - try { - // Create the generated component directory - if (readUserConfig.readConfig().generateFolder === "true") { - fs.mkdirSync(componentDirName); - } - if (readUserConfig.readConfig().generateStylesheet === "true") { - const styleSheetType = readUserConfig.readConfig().stylesheetType; - const cssFilePath = path.join(componentDirName, `${name}Style.${styleSheetType}`); - await fs.promises.writeFile(cssFilePath, ""); - } - generateComponentFile(name, path.join(componentFilePath), componentResolver); - } - catch (error) { - console.log(colors.bold(colors.red(error))); - } - console.log(`${colors.bold(colors.green(`${name} Component generated successfully`))}`); -}; diff --git a/dist/helpers/generators/generateNextJsComponent.js b/dist/helpers/generators/generateNextJsComponent.js deleted file mode 100755 index 7f1abd6..0000000 --- a/dist/helpers/generators/generateNextJsComponent.js +++ /dev/null @@ -1,69 +0,0 @@ -import colors from "colors"; -import fs from "fs"; -import path from "path"; -import * as readUserConfig from "../utilis/readUserConfig.js"; -import * as componentResolver from "./resolvers/resolveNextJsComponentContent.js"; -const findComponentDirectory = () => { - const rootDir = process.cwd(); - const possibleDirs = [ - "src/app/component", - "src/app/components", - "src/app/Component", - "src/app/Components", - "src/components", - "src/Components", - "app/components", - "app/Component", - "app/Components", - "app/component", - ]; - // Function to check if a directory exists without traversing "node_modules" - const directoryExists = (dir) => { - try { - const stat = fs.statSync(dir); - return stat.isDirectory(); - } - catch (error) { - return false; - } - }; - const componentDir = possibleDirs.find((dir) => directoryExists(path.join(rootDir, dir))); - return componentDir ? path.join(rootDir, componentDir) : null; -}; -const generateComponentFile = async (name, componentDir, componentResolver, componentType) => { - await fs.writeFile(componentDir, componentResolver.resolveComponentContent(readUserConfig, "Index", componentType), (error) => { - if (error) { - console.log(colors.bold(colors.red(error.toString()))); - } - }); -}; -export const generateComponent = async (name = "index", componentType) => { - if (!name) { - return console.log(colors.bold(colors.red("Component extension or name is required!"))); - } - const componentDir = findComponentDirectory(); - if (!componentDir) { - console.log(colors.bold(colors.red("components folder doesn't exist"))); - return; - } - const componentDirName = readUserConfig.readConfig().generateFolder === "true" - ? path.join(componentDir, name) - : path.join(componentDir); - const componentFilePath = path.join(componentDirName + `/${name}.${readUserConfig.readConfig().template}`); - try { - // Create the generated component directory - if (readUserConfig.readConfig().generateFolder === "true") { - await fs.promises.mkdir(componentDirName); - } - if (readUserConfig.readConfig().generateStylesheet === "true") { - const styleSheetType = readUserConfig.readConfig().stylesheetType; - const cssFilePath = path.join(componentDirName, `${name}.style.${styleSheetType}`); - await fs.promises.writeFile(cssFilePath, ""); - } - generateComponentFile(name, path.join(componentFilePath), componentResolver, componentType); - } - catch (error) { - console.log(colors.bold(colors.red(error))); - } - console.log(`${colors.bold(colors.green(`${name} Component generated successfully`))}`); -}; diff --git a/dist/helpers/generators/generateNextJsDynamicPage.js b/dist/helpers/generators/generateNextJsDynamicPage.js deleted file mode 100755 index 0153633..0000000 --- a/dist/helpers/generators/generateNextJsDynamicPage.js +++ /dev/null @@ -1,77 +0,0 @@ -import colors from "colors"; -import fs from "fs"; -import path from "path"; -import * as readUserConfig from "../utilis/readUserConfig.js"; -import * as pageResolver from "./resolvers/resolveNextJsDynamicPageContent.js"; -const findPagesDirectory = () => { - const rootDir = process.cwd(); - const possibleDirs = [ - "src/app/page", - "src/app/pages", - "src/app/Page", - "src/app/Pages", - "src/app/", - "src/pages", - "src/Pages", - "app/page", - "app/Page", - "app/pages", - "app/", - ]; - const directoryExists = (dir) => { - try { - const stat = fs.statSync(dir); - return stat.isDirectory(); - } - catch (error) { - return false; - } - }; - const pagesDir = possibleDirs.find((dir) => directoryExists(path.join(rootDir, dir))); - return pagesDir ? path.join(rootDir, pagesDir) : null; -}; -const generateDynamicPageFile = async (dynamicId, name = "page", pagesDir, pageResolver, componentType, startPage) => { - let pageFilePath = path.join(pagesDir + `/page.${readUserConfig.readConfig().template}`); - /* - users can optionally specify a page that they already have to generate the dynamic folder to - - */ - if (startPage) { - pageFilePath = path.join(pagesDir + startPage + `/page.${readUserConfig.readConfig().template}`); - } - await fs.promises.writeFile(pageFilePath, pageResolver.resolveDynamicPageContent(dynamicId, readUserConfig, name, componentType)); -}; -export const generatePage = async (dynamicId, name = "page", componentType, startPage) => { - if (!name) { - return console.log(colors.bold(colors.red("Page name is required!"))); - } - const pagesDir = findPagesDirectory(); - if (!pagesDir) { - console.log(colors.bold(colors.red("pages directory doesn't exist"))); - return; - } - let pageDirName = readUserConfig.readConfig().generateFolder === "true" - ? path.join(pagesDir, `[${dynamicId}]`) - : path.join(pagesDir); - if (startPage) { - pageDirName = - readUserConfig.readConfig().generateFolder === "true" - ? path.join(pagesDir + startPage, `[${dynamicId}]`) - : path.join(pagesDir + startPage); - } - try { - readUserConfig.readConfig().generateFolder === "true" - ? await fs.mkdirSync(pageDirName) - : null; - if (readUserConfig.readConfig().generateStylesheet === "true") { - const styleSheetType = readUserConfig.readConfig().stylesheetType; - const cssFilePath = path.join(pageDirName, `page.style.${styleSheetType}`); - await fs.promises.writeFile(cssFilePath, ""); - } - generateDynamicPageFile(dynamicId, "page", pageDirName, pageResolver, componentType); - } - catch (error) { - console.log(colors.bold(colors.red(error))); - } - console.log(`${colors.bold(colors.green(`${dynamicId} page generated successfully`))}`); -}; diff --git a/dist/helpers/generators/generateNextJsPage.js b/dist/helpers/generators/generateNextJsPage.js deleted file mode 100755 index f94ba6b..0000000 --- a/dist/helpers/generators/generateNextJsPage.js +++ /dev/null @@ -1,79 +0,0 @@ -import colors from "colors"; -import fs from "fs"; -import path from "path"; -import * as readUserConfig from "../utilis/readUserConfig.js"; -import * as pageResolver from "./resolvers/resolveNextJsPageContent.js"; -const findPagesDirectory = () => { - const rootDir = process.cwd(); - const possibleDirs = [ - "src/app/page", - "src/app/pages", - "src/app/Page", - "src/app/Pages", - "src/pages", - "src/Pages", - "src/app/", - "app/page", - "app/Pages", - "app/pages", - "app/", - ]; - const directoryExists = (dir) => { - try { - const stat = fs.statSync(dir); - return stat.isDirectory(); - } - catch (error) { - return false; - } - }; - const pagesDir = possibleDirs.find((dir) => directoryExists(path.join(rootDir, dir))); - return pagesDir ? path.join(rootDir, pagesDir) : null; -}; -const generatePageFile = async (name, pagesDir, pageResolver, componentType, startPage) => { - let pageFilePath = path.join(pagesDir + `/page.${readUserConfig.readConfig().template}`); - if (startPage) { - pageFilePath = path.join(pagesDir + startPage + `/page.${readUserConfig.readConfig().template}`); - } - await fs.writeFile(pageFilePath, pageResolver.resolvePageContent(readUserConfig, "Index", componentType), (error) => { - if (error) { - console.log(colors.bold(colors.red(error.toString()))); - } - }); -}; -export const generatePage = async (name, componentType, startPage) => { - if (!name) { - return console.log(colors.bold(colors.red("Page name is required!"))); - } - const pagesDir = findPagesDirectory(); - if (!pagesDir) { - console.log(colors.bold(colors.red("pages directory doesn't exist"))); - return; - } - let pageDirName = readUserConfig.readConfig().generateFolder === "true" - ? path.join(pagesDir, name) - : path.join(pagesDir); - if (startPage) { - pageDirName = - readUserConfig.readConfig().generateFolder === "true" - ? path.join(pagesDir + startPage, name) - : path.join(pagesDir + startPage); - } - try { - readUserConfig.readConfig().generateFolder === "true" - ? await fs.mkdirSync(pageDirName) - : null; - if (readUserConfig.readConfig().generateStylesheet === "true") { - const styleSheetType = readUserConfig.readConfig().stylesheetType; - const cssFilePath = path.join(pageDirName, `page.style.${styleSheetType}`); - await fs.promises.writeFile(cssFilePath, ""); - } - else { - } - generatePageFile(name, pageDirName, pageResolver, componentType); - } - catch (error) { - console.log(colors.bold(colors.red(error))); - } - console.log(`${colors.bold(colors.green(`${name} page generated successfully`))}`); -}; diff --git a/dist/helpers/generators/generatePage.js b/dist/helpers/generators/generatePage.js deleted file mode 100755 index 38494d0..0000000 --- a/dist/helpers/generators/generatePage.js +++ /dev/null @@ -1,59 +0,0 @@ -import colors from "colors"; -import fs from "fs"; -import path from "path"; -import * as readUserConfig from "../utilis/readUserConfig.js"; -import * as pageRegisterer from "./register/registerPage.js"; -import * as pageResolver from "./resolvers/resolvePageContent.js"; -const rootDir = path.join(process.cwd()); -const pageDir = [ - "src/pages", - "src/Pages", - "src/page", - "src/Page", - "pages", - "Pages", - "page", - "Page", -].find((dir) => { - return fs.existsSync(path.join(rootDir, dir)); -}); -const generatePageFile = async (name, pageDir, pageResolver) => { - await fs.writeFile(pageDir, pageResolver.resolvePageContent(readUserConfig, name), (error) => { - if (error) { - console.log(colors.bold(colors.red(error.toString()))); - } - }); -}; -export const generatePage = async (name) => { - if (!name) { - return console.log(colors.bold(colors.red("page extension or name is required!"))); - } - if (!pageDir) { - console.log(colors.bold(colors.red("pages folder doesn't exist"))); - return; - } - const pageDirName = readUserConfig.readConfig().generateFolder === "true" - ? path.join(pageDir, name) - : path.join(pageDir); - const pageFilePath = path.join(pageDirName + `/${name}.${readUserConfig.readConfig().template}`); - try { - /*create the generated component directory*/ - readUserConfig.readConfig().generateFolder === "true" - ? await fs.mkdirSync(pageDirName) - : null; - if (readUserConfig.readConfig().generateStylesheet === "true") { - const styleSheetType = readUserConfig.readConfig().stylesheetType; - const cssFilePath = path.join(pageDirName, `${name}Style.${styleSheetType}`); - await fs.promises.writeFile(cssFilePath, ""); - } - generatePageFile(name, path.join(pageFilePath), pageResolver); - /*register the page in the App.jsx or App.tsx file*/ - readUserConfig.readConfig().register === "true" - ? pageRegisterer.addPageImport(rootDir, name, path.join(".", pageDir.replace("src/", ""))) - : null; - } - catch (error) { - console.log(colors.bold(colors.red(error))); - } - console.log(`${colors.bold(colors.green(`${name} Page generated successfully`))}`); -}; diff --git a/dist/helpers/generators/generateServiceWorker.js b/dist/helpers/generators/generateServiceWorker.js deleted file mode 100755 index c2bb133..0000000 --- a/dist/helpers/generators/generateServiceWorker.js +++ /dev/null @@ -1,36 +0,0 @@ -import colors from "colors"; -import fs from "fs"; -import path from "path"; -const rootDir = path.join(process.cwd()); -const SWDir = ["src"].find((dir) => { - return fs.existsSync(path.join(rootDir, dir)); -}); -import * as swRegisterer from "./register/registerServiceWorker.js"; -import * as swResolver from "./resolvers/resolveServiceWorker.js"; -const generateServiceWorkerFile = async () => { - if (SWDir) { - try { - /*create the service worker file*/ - await fs.writeFile(path.resolve(SWDir, `service-worker.js`), swResolver.resolveServiceWorkerTemplate(), (error) => { - if (error) { - console.log(colors.bold(colors.red(error.toString()))); - } - }); - await fs.writeFile(path.resolve(SWDir, "serviceWorkerRegistration.js"), swResolver.resolveServiceWorkerRegistrationTemplate(), (error) => { - if (error) { - console.log(colors.bold(colors.red(error.toString()))); - } - }); - } - catch (error) { - console.log(colors.bold(colors.red(error))); - } - } - else { - console.log(colors.bold(colors.red("Could not find {src} folder!"))); - return; - } - console.log(`${colors.bold(colors.green(`Service Worker generated successfully`))}`); - swRegisterer.checkAndImportServiceWorker(); -}; -export { generateServiceWorkerFile, }; diff --git a/dist/helpers/generators/register/registerPage.js b/dist/helpers/generators/register/registerPage.js deleted file mode 100755 index c74c4eb..0000000 --- a/dist/helpers/generators/register/registerPage.js +++ /dev/null @@ -1,51 +0,0 @@ -import colors from "colors"; -import fs from "fs"; -import path from "path"; -import * as readUserConfig from "../../utilis/readUserConfig.js"; -export const addPageImport = (rootDir, pageName, currentPageName) => { - const supportedExtensions = [".js", ".jsx", ".ts", ".tsx"]; - const generatedPageImportStatement = readUserConfig.readConfig().generateFolder === "true" - ? `import ${pageName} from "./${currentPageName}/${pageName}/${pageName}";` - : `import ${pageName} from "./${currentPageName}/${pageName}";`; - const checkFile = (filePath) => { - const fileExt = path.extname(filePath); - if (supportedExtensions.includes(fileExt)) { - const fileContents = fs.readFileSync(filePath, "utf8"); - if (!fileContents.includes(generatedPageImportStatement)) { - const importStatements = fileContents.match(/import.*?;/gs); - let newContents = fileContents; - if (importStatements && importStatements.length > 0) { - const lastImportStatement = importStatements[importStatements.length - 1]; - const lastImportStatementIndex = newContents.lastIndexOf(lastImportStatement); - newContents = - newContents.slice(0, lastImportStatementIndex + lastImportStatement.length) + - "\n" + - generatedPageImportStatement + - newContents.slice(lastImportStatementIndex + lastImportStatement.length); - } - else { - newContents = generatedPageImportStatement + "\n" + newContents; - } - fs.writeFileSync(filePath, newContents); - console.log(colors.cyan(colors.bold(`${pageName} Page Successfully Added to ${filePath}`))); - } - else { - console.log(colors.bold(colors.red(`Import Statement Already in ${filePath}`))); - } - } - }; - const searchDir = (dirPath) => { - const files = fs.readdirSync(dirPath); - files.forEach((file) => { - const filePath = path.join(dirPath, file); - const stats = fs.statSync(filePath); - if (stats.isDirectory() && file !== "node_modules") { - searchDir(filePath); - } - else if (stats.isFile() && file.match(/^App\.(jsx?|tsx?)$/i)) { - checkFile(filePath); - } - }); - }; - searchDir(rootDir); -}; diff --git a/dist/helpers/generators/register/registerServiceWorker.js b/dist/helpers/generators/register/registerServiceWorker.js deleted file mode 100755 index c7f0845..0000000 --- a/dist/helpers/generators/register/registerServiceWorker.js +++ /dev/null @@ -1,43 +0,0 @@ -import colors from "colors"; -import fs from "fs"; -import path from "path"; -export const checkAndImportServiceWorker = () => { - const supportedFiles = [ - "index.jsx", - "index.tsx", - "main.jsx", - "main.tsx", - "index.js", - "main.js", - "main.ts", - "index.ts", - "Index.jsx", - "Main.jsx", - "Index.js", - "Index.ts", - "Main.ts", - ]; - const importStatement = `import * as serviceWorkerRegistration from './serviceWorkerRegistration';`; - const searchDir = (dirPath) => { - const files = fs.readdirSync(dirPath); - files.forEach((file) => { - const filePath = path.join(dirPath, file); - const stats = fs.statSync(filePath); - if (stats.isDirectory() && file !== "node_modules") { - searchDir(filePath); - } - else if (stats.isFile() && supportedFiles.includes(file)) { - const fileContents = fs.readFileSync(filePath, "utf8"); - if (!fileContents.includes(importStatement)) { - const newContents = `${importStatement}\n${fileContents}`; - fs.writeFileSync(filePath, newContents); - console.log(colors.bold(colors.cyan(`Successfully injected import statement into ${filePath}`))); - } - else { - console.log(colors.bold(colors.red(`Import statement already exists in ${filePath}`))); - } - } - }); - }; - searchDir("./"); -}; diff --git a/dist/helpers/generators/resolvers/resolveComponentContent.js b/dist/helpers/generators/resolvers/resolveComponentContent.js deleted file mode 100755 index 4a354ff..0000000 --- a/dist/helpers/generators/resolvers/resolveComponentContent.js +++ /dev/null @@ -1,20 +0,0 @@ -import * as generateComponentTmp from "./../templates/componentTemplate.js"; -const resolveComponentContent = (userConfig, componentName) => { - if (userConfig.readConfig().template === "jsx" && - userConfig.readConfig().component === "arrow") { - return generateComponentTmp.generateJsxArrowTemplate(componentName, userConfig.readConfig().generateStylesheet, userConfig.readConfig().stylesheetType); - } - else if (userConfig.readConfig().template === "jsx" && - userConfig.readConfig().component === "functional") { - return generateComponentTmp.generateJsxFunctionTemplate(componentName, userConfig.readConfig().generateStylesheet, userConfig.readConfig().stylesheetType); - } - else if (userConfig.readConfig().template === "tsx" && - userConfig.readConfig().component === "arrow") { - return generateComponentTmp.generateTsxArrowTemplate(componentName, userConfig.readConfig().generateStylesheet, userConfig.readConfig().stylesheetType); - } - else if (userConfig.readConfig().template === "tsx" && - userConfig.readConfig().component === "functional") { - return generateComponentTmp.generateTsxFunctionTemplate(componentName, userConfig.readConfig().generateStylesheet, userConfig.readConfig().stylesheetType); - } -}; -export { resolveComponentContent, }; diff --git a/dist/helpers/generators/resolvers/resolveNextJsComponentContent.js b/dist/helpers/generators/resolvers/resolveNextJsComponentContent.js deleted file mode 100755 index 7d98c11..0000000 --- a/dist/helpers/generators/resolvers/resolveNextJsComponentContent.js +++ /dev/null @@ -1,20 +0,0 @@ -import * as generateNextJsPageTmp from "../templates/nextJsComponentTemplate.js"; -const resolveComponentContent = (userConfig, pageName, componentType = "client") => { - if (userConfig.readConfig().template === "jsx" && - userConfig.readConfig().component === "arrow") { - return generateNextJsPageTmp.generateNextJsJsxArrowTemplate(pageName, userConfig.readConfig().generateStylesheet, userConfig.readConfig().stylesheetType, componentType); - } - else if (userConfig.readConfig().template === "jsx" && - userConfig.readConfig().component === "functional") { - return generateNextJsPageTmp.generateNextJsJsxFunctionTemplate(pageName, userConfig.readConfig().generateStylesheet, userConfig.readConfig().stylesheetType, componentType); - } - else if (userConfig.readConfig().template === "tsx" && - userConfig.readConfig().component === "arrow") { - return generateNextJsPageTmp.generateNextJsTsxArrowTemplate(pageName, userConfig.readConfig().generateStylesheet, userConfig.readConfig().stylesheetType, componentType); - } - else if (userConfig.readConfig().template === "tsx" && - userConfig.readConfig().component === "functional") { - return generateNextJsPageTmp.generateNextJsTsxFunctionTemplate(pageName, userConfig.readConfig().generateStylesheet, userConfig.readConfig().stylesheetType, componentType); - } -}; -export { resolveComponentContent }; diff --git a/dist/helpers/generators/resolvers/resolveNextJsDynamicPageContent.js b/dist/helpers/generators/resolvers/resolveNextJsDynamicPageContent.js deleted file mode 100755 index 8c8b8e0..0000000 --- a/dist/helpers/generators/resolvers/resolveNextJsDynamicPageContent.js +++ /dev/null @@ -1,20 +0,0 @@ -import * as generateNextJsDynamicPageTmp from "../templates/nextJsDynamicPage.js"; -const resolveDynamicPageContent = (dynamicPageId, userConfig, pageName, componentType = "client") => { - if (userConfig.readConfig().template === "jsx" && - userConfig.readConfig().component === "arrow") { - return generateNextJsDynamicPageTmp.generateNextJsDynamicPageJsxArrowTemplate(dynamicPageId, userConfig.readConfig().generateStylesheet, pageName, userConfig.readConfig().stylesheetType, componentType); - } - else if (userConfig.readConfig().template === "jsx" && - userConfig.readConfig().component === "functional") { - return generateNextJsDynamicPageTmp.generateNextJsDynamicPageJsxFunctionTemplate(dynamicPageId, userConfig.readConfig().generateStylesheet, pageName, userConfig.readConfig().stylesheetType, componentType); - } - else if (userConfig.readConfig().template === "tsx" && - userConfig.readConfig().component === "arrow") { - return generateNextJsDynamicPageTmp.generateNextJsDynamicPageTsxArrowTemplate(dynamicPageId, userConfig.readConfig().generateStylesheet, pageName, userConfig.readConfig().stylesheetType, componentType); - } - else if (userConfig.readConfig().template === "tsx" && - userConfig.readConfig().component === "functional") { - return generateNextJsDynamicPageTmp.generateNextJsDynamicPageTsxFunctionTemplate(dynamicPageId, userConfig.readConfig().generateStylesheet, pageName, userConfig.readConfig().stylesheetType, componentType); - } -}; -export { resolveDynamicPageContent }; diff --git a/dist/helpers/generators/resolvers/resolveNextJsPageContent.js b/dist/helpers/generators/resolvers/resolveNextJsPageContent.js deleted file mode 100755 index f9f9b55..0000000 --- a/dist/helpers/generators/resolvers/resolveNextJsPageContent.js +++ /dev/null @@ -1,20 +0,0 @@ -import * as generateNextJsPageTmp from "../templates/nextJsPageTemplate.js"; -const resolvePageContent = (userConfig, pageName, componentType = "client") => { - if (userConfig.readConfig().template === "jsx" && - userConfig.readConfig().component === "arrow") { - return generateNextJsPageTmp.generateNextJsJsxArrowTemplate(pageName, userConfig.readConfig().generateStylesheet, userConfig.readConfig().stylesheetType, componentType); - } - else if (userConfig.readConfig().template === "jsx" && - userConfig.readConfig().component === "functional") { - return generateNextJsPageTmp.generateNextJsJsxFunctionTemplate(pageName, userConfig.readConfig().generateStylesheet, userConfig.readConfig().stylesheetType, componentType); - } - else if (userConfig.readConfig().template === "tsx" && - userConfig.readConfig().component === "arrow") { - return generateNextJsPageTmp.generateNextJsTsxArrowTemplate(pageName, userConfig.readConfig().generateStylesheet, userConfig.readConfig().stylesheetType, componentType); - } - else if (userConfig.readConfig().template === "tsx" && - userConfig.readConfig().component === "functional") { - return generateNextJsPageTmp.generateNextJsTsxFunctionTemplate(pageName, userConfig.readConfig().generateStylesheet, userConfig.readConfig().stylesheetType, componentType); - } -}; -export { resolvePageContent }; diff --git a/dist/helpers/generators/resolvers/resolvePageContent.js b/dist/helpers/generators/resolvers/resolvePageContent.js deleted file mode 100755 index 151d6ea..0000000 --- a/dist/helpers/generators/resolvers/resolvePageContent.js +++ /dev/null @@ -1,20 +0,0 @@ -import * as generatePageTmp from "../templates/pageTemplate.js"; -const resolvePageContent = (userConfig, pageName) => { - if (userConfig.readConfig().template === "jsx" && - userConfig.readConfig().component === "arrow") { - return generatePageTmp.generateJsxArrowTemplate(pageName, userConfig.readConfig().generateStylesheet, userConfig.readConfig().stylesheetType); - } - else if (userConfig.readConfig().template === "jsx" && - userConfig.readConfig().component === "functional") { - return generatePageTmp.generateJsxFunctionTemplate(pageName, userConfig.readConfig().generateStylesheet, userConfig.readConfig().stylesheetType); - } - else if (userConfig.readConfig().template === "tsx" && - userConfig.readConfig().component === "arrow") { - return generatePageTmp.generateTsxArrowTemplate(pageName, userConfig.readConfig().generateStylesheet, userConfig.readConfig().stylesheetType); - } - else if (userConfig.readConfig().template === "tsx" && - userConfig.readConfig().component === "functional") { - return generatePageTmp.generateTsxFunctionTemplate(pageName, userConfig.readConfig().generateStylesheet, userConfig.readConfig().stylesheetType); - } -}; -export { resolvePageContent, }; diff --git a/dist/helpers/generators/resolvers/resolveServiceWorker.js b/dist/helpers/generators/resolvers/resolveServiceWorker.js deleted file mode 100755 index 0f10a4d..0000000 --- a/dist/helpers/generators/resolvers/resolveServiceWorker.js +++ /dev/null @@ -1,8 +0,0 @@ -import { serviceWorkerRegistrationTemplate, serviceWorkerTemplate, } from "../templates/serviceWorkerTemplate.js"; -const resolveServiceWorkerTemplate = () => { - return serviceWorkerTemplate(); -}; -const resolveServiceWorkerRegistrationTemplate = () => { - return serviceWorkerRegistrationTemplate(); -}; -export { resolveServiceWorkerTemplate, resolveServiceWorkerRegistrationTemplate, }; diff --git a/dist/helpers/generators/templates/componentTemplate.js b/dist/helpers/generators/templates/componentTemplate.js deleted file mode 100755 index 4cb5b0a..0000000 --- a/dist/helpers/generators/templates/componentTemplate.js +++ /dev/null @@ -1,166 +0,0 @@ -const generateJsxArrowTemplate = (componentName, importStyleSheet, styleSheetType) => { - let template; - if (importStyleSheet === "true") { - template = ` -import React from "react"; -import "./${componentName}Style.${styleSheetType}"; - -const ${componentName} = () => { - - return ( -
-

${componentName} works!

-
- ); -} - -export default ${componentName}; - `; - } - else { - template = ` -import React from "react"; - -const ${componentName} = () => { - - return ( -
-

${componentName} works!

-
- ); -} - -export default ${componentName}; - `; - } - return template; -}; -const generateJsxFunctionTemplate = (componentName, importStyleSheet, styleSheetType) => { - let template; - if (importStyleSheet === "true") { - template = ` - import React from "react"; - import "./${componentName}Style.${styleSheetType}"; - - function ${componentName} () { - - return ( -
-

${componentName} works!

-
- ); - } - - export default ${componentName}; - `; - } - else { - template = ` - import React from "react"; - - function ${componentName} () { - - return ( -
-

${componentName} works!

-
- ); - } - - export default ${componentName}; - `; - } - return template; -}; -const generateTsxArrowTemplate = (componentName, importStyleSheet, styleSheetType) => { - let template; - if (importStyleSheet === "true") { - template = ` -import React from "react"; -import "./${componentName}Style.${styleSheetType}"; - -interface ${componentName}Props { - -} -const ${componentName} = (): JSX.Element => { - - return ( -
-

${componentName} works!

-
- ); -} - -export default ${componentName}; - `; - } - else { - template = ` -import React from "react"; - -interface ${componentName}Props { - -} - -const ${componentName} = (): JSX.Element => { - - return ( -
-

${componentName} works!

-
- ); -} - -export default ${componentName}; - `; - } - return template; -}; -const generateTsxFunctionTemplate = (componentName, importStyleSheet, styleSheetType) => { - let template; - if (importStyleSheet === "true") { - template = ` -import React from "react"; -import "./${componentName}Style.${styleSheetType}"; - - -interface ${componentName}Props { - -} - -function ${componentName}(): JSX.Element { - - return ( -
-

${componentName} works!

-
- ); -} - -export default ${componentName}; - `; - } - else { - template = ` -import React from "react"; - - -interface ${componentName}Props { - -} - -function ${componentName}(): JSX.Element { - - return ( -
-

${componentName} works!

-
- ); -} - -export default ${componentName}; - `; - } - return template; -}; -export { generateJsxArrowTemplate, generateJsxFunctionTemplate, generateTsxArrowTemplate, generateTsxFunctionTemplate, }; diff --git a/dist/helpers/generators/templates/nextJsComponentTemplate.js b/dist/helpers/generators/templates/nextJsComponentTemplate.js deleted file mode 100755 index df73d7c..0000000 --- a/dist/helpers/generators/templates/nextJsComponentTemplate.js +++ /dev/null @@ -1,178 +0,0 @@ -const generateNextJsJsxArrowTemplate = (componentName, importStyleSheet, styleSheetType, componentType) => { - let template; - let componentTypeTemplate = componentType === "client" ? '"use client"' : ""; - if (importStyleSheet === "true") { - template = ` -${componentTypeTemplate} -import React from "react"; -import "./${componentName}Style.${styleSheetType}"; - -const ${componentName} = () => { - - return ( -
-

${componentName} works!

-
- ); -} - -export default ${componentName}; - `; - } - else { - template = ` -${componentTypeTemplate} -import React from "react"; - -const ${componentName} = () => { - - return ( -
-

${componentName} works!

-
- ); -} - -export default ${componentName}; - `; - } - return template; -}; -const generateNextJsJsxFunctionTemplate = (componentName, importStyleSheet, styleSheetType, componentType) => { - let template; - let componentTypeTemplate = componentType === "client" ? '"use client"' : ""; - if (importStyleSheet === "true") { - template = ` -${componentTypeTemplate} -import React from "react"; -import "./${componentName}Style.${styleSheetType}"; - -function ${componentName} () { - - return ( -
-

${componentName} works!

-
- ); -} - -export default ${componentName}; - `; - } - else { - template = ` -${componentTypeTemplate} -import React from "react"; - - -function ${componentName} () { - - return ( -
-

${componentName} works!

-
- ); -} - -export default ${componentName}; - `; - } - return template; -}; -const generateNextJsTsxArrowTemplate = (componentName, importStyleSheet, styleSheetType, componentType) => { - let template; - let componentTypeTemplate = componentType === "client" ? '"use client"' : ""; - if (importStyleSheet === "true") { - template = ` -${componentTypeTemplate} -import React from "react"; -import "./${componentName}Style.${styleSheetType}"; - -interface ${componentName}Props { - -} - -const ${componentName} = () => { - - return ( -
-

${componentName} works!

-
- ); -} - -export default ${componentName}; - `; - } - else { - template = ` -${componentTypeTemplate} -import React from "react"; - -interface ${componentName}Props { - -} - -const ${componentName} = ()=> { - - return ( -
-

${componentName} works!

-
- ); -} - -export default ${componentName}; - `; - } - return template; -}; -const generateNextJsTsxFunctionTemplate = (componentName, importStyleSheet, styleSheetType, componentType) => { - let template; - let componentTypeTemplate = componentType === "client" ? '"use client"' : ""; - if (importStyleSheet === "true") { - template = ` -${componentTypeTemplate} -import React from "react"; -import "./${componentName}Style.${styleSheetType}"; - -interface ${componentName}Props { - -} - -function ${componentName} (){ - - return ( -
-

${componentName} works!

-
- ); -} - -export default ${componentName}; - `; - } - else { - template = ` -${componentTypeTemplate} -import React from "react"; - -interface ${componentName}Props { - -} - -function ${componentName} (){ - - return ( -
-

${componentName} works!

-
- ); -} - -export default ${componentName}; - `; - } - return template; -}; -export { generateNextJsJsxArrowTemplate, generateNextJsJsxFunctionTemplate, generateNextJsTsxArrowTemplate, generateNextJsTsxFunctionTemplate, }; diff --git a/dist/helpers/generators/templates/nextJsDynamicPage.js b/dist/helpers/generators/templates/nextJsDynamicPage.js deleted file mode 100755 index 8ea3816..0000000 --- a/dist/helpers/generators/templates/nextJsDynamicPage.js +++ /dev/null @@ -1,125 +0,0 @@ -const generateNextJsDynamicPageTsxArrowTemplate = (dynamicPageId, importStyleSheet, componentName, styleSheetType, componentType) => { - let template; - let componentTypeTemplate = componentType === "client" ? '"use client"' : ""; - let addStyleSheetImport = importStyleSheet === "true" - ? `import "./${componentName}Style.${styleSheetType}";` - : ""; - let addRouterImport = componentType === "client" - ? 'import { useRouter } from "next/navigation";' - : ""; - let dynamicPageIdDisplay = `\{params.${dynamicPageId}}`; - template = ` -${componentTypeTemplate} - -import React from "react"; -${addStyleSheetImport} -${addRouterImport} - -const ${componentName} = ({ params }: { params: { ${dynamicPageId}: string } }) => { - - return ( -
-

${componentName} works!

-

${dynamicPageIdDisplay}

-
- ); -} - -export default ${componentName}; - `; - return template; -}; -const generateNextJsDynamicPageTsxFunctionTemplate = (dynamicPageId, importStyleSheet, componentName, styleSheetType, componentType) => { - let template; - let componentTypeTemplate = componentType === "client" ? '"use client"' : ""; - let addStyleSheetImport = importStyleSheet === "true" - ? `import "./${componentName}Style.${styleSheetType}";` - : ""; - let addRouterImport = componentType === "client" - ? 'import { useRouter } from "next/navigation";' - : ""; - let dynamicPageIdDisplay = `\{params.${dynamicPageId}}`; - template = ` -${componentTypeTemplate} - -import React from "react"; -${addStyleSheetImport} -${addRouterImport} - -function ${componentName} ({ params }: { params: { ${dynamicPageId}: string } }){ - - return ( -
-

${componentName} works!

-

${dynamicPageIdDisplay}

-
- ); -} - -export default ${componentName}; - `; - return template; -}; -const generateNextJsDynamicPageJsxArrowTemplate = (dynamicPageId, importStyleSheet, componentName, styleSheetType, componentType) => { - let template; - let componentTypeTemplate = componentType === "client" ? '"use client"' : ""; - let addStyleSheetImport = importStyleSheet === "true" - ? `import "./${componentName}Style.${styleSheetType}";` - : ""; - let addRouterImport = componentType === "client" - ? 'import { useRouter } from "next/navigation";' - : ""; - let dynamicPageIdDisplay = `\{params.${dynamicPageId}}`; - template = ` -${componentTypeTemplate} - -import React from "react"; -${addStyleSheetImport} -${addRouterImport} - -const ${componentName} = ({ params }) => { - - return ( -
-

${componentName} works!

-

${dynamicPageIdDisplay}

-
- ); -} - -export default ${componentName}; - `; - return template; -}; -const generateNextJsDynamicPageJsxFunctionTemplate = (dynamicPageId, importStyleSheet, componentName, styleSheetType, componentType) => { - let template; - let componentTypeTemplate = componentType === "client" ? '"use client"' : ""; - let addStyleSheetImport = importStyleSheet === "true" - ? `import "./${componentName}Style.${styleSheetType}";` - : ""; - let addRouterImport = componentType === "client" - ? 'import { useRouter } from "next/navigation";' - : ""; - let dynamicPageIdDisplay = `\{params.${dynamicPageId}}`; - template = ` -${componentTypeTemplate} - -import React from "react"; -${addStyleSheetImport} -${addRouterImport} - -function ${componentName} ({ params }) { - - return ( -
-

${componentName} works!

-

${dynamicPageIdDisplay}

-
- ); -} - -export default ${componentName}; - `; - return template; -}; -export { generateNextJsDynamicPageJsxArrowTemplate, generateNextJsDynamicPageJsxFunctionTemplate, generateNextJsDynamicPageTsxArrowTemplate, generateNextJsDynamicPageTsxFunctionTemplate, }; diff --git a/dist/helpers/generators/templates/nextJsPageTemplate.js b/dist/helpers/generators/templates/nextJsPageTemplate.js deleted file mode 100755 index fbe7ff2..0000000 --- a/dist/helpers/generators/templates/nextJsPageTemplate.js +++ /dev/null @@ -1,214 +0,0 @@ -const generateNextJsJsxArrowTemplate = (componentName, importStyleSheet, styleSheetType, componentType) => { - let template; - let componentTypeTemplate = componentType === "client" ? '"use client"' : ""; - let addRouterImport = componentType === "client" - ? 'import { useRouter, usePathname } from "next/navigation";' - : ""; - let pathnameDeclaration = componentType === "client" ? "const pathname = usePathname();" : ""; - let pathnameDisplay = componentType === "client" ? "

Current pathname: {pathname}

" : ""; - if (importStyleSheet === "true") { - template = ` -${componentTypeTemplate} - -import React from "react"; -import "./${componentName}Style.${styleSheetType}"; -${addRouterImport} - -const ${componentName} = () => { - ${pathnameDeclaration} - - return ( -
-

${componentName} works!

- ${pathnameDisplay} -
- ); -} - -export default ${componentName}; - `; - } - else { - template = ` -${componentTypeTemplate} -import React from "react"; -${addRouterImport} - - -const ${componentName} = () => { - ${pathnameDeclaration} - - return ( -
-

${componentName} works!

- ${pathnameDisplay} -
- ); -} - -export default ${componentName}; - `; - } - return template; -}; -const generateNextJsJsxFunctionTemplate = (componentName, importStyleSheet, styleSheetType, componentType) => { - let template; - let componentTypeTemplate = componentType === "client" ? '"use client"' : ""; - let addRouterImport = componentType === "client" - ? 'import { useRouter, usePathname } from "next/navigation";' - : ""; - let pathnameDeclaration = componentType === "client" ? "const pathname = usePathname();" : ""; - let pathnameDisplay = componentType === "client" ? "

Current pathname: {pathname}

" : ""; - if (importStyleSheet === "true") { - template = ` -${componentTypeTemplate} - -import React from "react"; -import "./${componentName}Style.${styleSheetType}"; -${addRouterImport} - -function ${componentName} (){ - ${pathnameDeclaration} - - return ( -
-

${componentName} works!

- ${pathnameDisplay} -
- ); -} - -export default ${componentName}; - `; - } - else { - template = ` -${componentTypeTemplate} -import React from "react"; -${addRouterImport} - - -function ${componentName} (){ - ${pathnameDeclaration} - - return ( -
-

${componentName} works!

- ${pathnameDisplay} -
- ); -} -export default ${componentName}; - `; - } - return template; -}; -const generateNextJsTsxArrowTemplate = (componentName, importStyleSheet, styleSheetType, componentType) => { - let template; - let componentTypeTemplate = componentType === "client" ? '"use client"' : ""; - let addRouterImport = componentType === "client" - ? 'import { useRouter, usePathname } from "next/navigation";' - : ""; - let pathnameDeclaration = componentType === "client" ? "const pathname = usePathname();" : ""; - let pathnameDisplay = componentType === "client" ? "

Current pathname: {pathname}

" : ""; - if (importStyleSheet === "true") { - template = ` -${componentTypeTemplate} - -import React from "react"; -import "./${componentName}Style.${styleSheetType}"; -${addRouterImport} - - -const ${componentName} = () => { - ${pathnameDeclaration} - - return ( -
-

${componentName} works!

- ${pathnameDisplay} -
- ); -} - -export default ${componentName}; - `; - } - else { - template = ` -${componentTypeTemplate} -import React from "react"; -${addRouterImport} - - -const ${componentName} = () => { - ${pathnameDeclaration} - - return ( -
-

${componentName} works!

- ${pathnameDisplay} -
- ); -} - -export default ${componentName}; - `; - } - return template; -}; -const generateNextJsTsxFunctionTemplate = (componentName, importStyleSheet, styleSheetType, componentType) => { - let template; - let componentTypeTemplate = componentType === "client" ? '"use client"' : ""; - let addRouterImport = componentType === "client" - ? 'import { useRouter, usePathname } from "next/navigation";' - : ""; - let pathnameDeclaration = componentType === "client" ? "const pathname = usePathname();" : ""; - let pathnameDisplay = componentType === "client" ? "

Current pathname: {pathname}

" : ""; - if (importStyleSheet === "true") { - template = ` -${componentTypeTemplate} - -import React from "react"; -import "./${componentName}Style.${styleSheetType}"; -${addRouterImport} - - -function ${componentName}() { - ${pathnameDeclaration} - - return ( -
-

${componentName} works!

- ${pathnameDisplay} -
- ); -} - -export default ${componentName}; - `; - } - else { - template = ` -${componentTypeTemplate} -import React from "react"; -${addRouterImport} - - -function ${componentName}() { - ${pathnameDeclaration} - - return ( -
-

${componentName} works!

- ${pathnameDisplay} -
- ); -} - -export default ${componentName}; - `; - } - return template; -}; -export { generateNextJsJsxArrowTemplate, generateNextJsJsxFunctionTemplate, generateNextJsTsxArrowTemplate, generateNextJsTsxFunctionTemplate, }; diff --git a/dist/helpers/generators/templates/pageTemplate.js b/dist/helpers/generators/templates/pageTemplate.js deleted file mode 100755 index 251c65b..0000000 --- a/dist/helpers/generators/templates/pageTemplate.js +++ /dev/null @@ -1,157 +0,0 @@ -const generateJsxArrowTemplate = (componentName, importStyleSheet, styleSheetType) => { - let template; - if (importStyleSheet === "true") { - template = ` -import React from "react"; -import "./${componentName}Style.${styleSheetType}"; -import {Link, useNavigate} from "react-router-dom"; - -const ${componentName} = () => { - const navigateTo = useNavigate(); - return ( -
-

${componentName} works!

-
- ); -} - -export default ${componentName}; - `; - } - else { - template = ` -import React from "react"; -import {Link, useNavigate} from "react-router-dom"; - -const ${componentName} = () => { - const navigateTo = useNavigate(); - return ( -
-

${componentName} works!

-
- ); -} - -export default ${componentName}; - `; - } - return template; -}; -const generateJsxFunctionTemplate = (componentName, importStyleSheet, styleSheetType) => { - let template; - if (importStyleSheet === "true") { - template = ` - import React from "react"; - import "./${componentName}Style.${styleSheetType}"; - import {Link, useNavigate} from "react-router-dom"; - - function ${componentName} () { - const navigateTo = useNavigate(); - return ( -
-

${componentName} works!

-
- ); - } - - export default ${componentName}; - `; - } - else { - template = ` - import React from "react"; - import {Link, useNavigate} from "react-router-dom"; - - function ${componentName} () { - const navigateTo = useNavigate(); - - return ( -
-

${componentName} works!

-
- ); - } - - export default ${componentName}; - `; - } - return template; -}; -const generateTsxArrowTemplate = (componentName, importStyleSheet, styleSheetType) => { - let template; - if (importStyleSheet === "true") { - template = ` -import React from "react"; -import "./${componentName}Style.${styleSheetType}"; -import {Link, useNavigate} from "react-router-dom";const ${componentName}:React.FC = (): JSX.Element => { - const navigateTo = useNavigate(); - return ( -
-

${componentName} works!

-
- ); -} - -export default ${componentName}; - `; - } - else { - template = ` -import React from "react"; -import {Link, useNavigate} from "react-router-dom"; -const ${componentName}:React.FC = (): JSX.Element => { - const navigateTo = useNavigate(); - return ( -
-

${componentName} works!

-
- ); -} - -export default ${componentName}; - `; - } - return template; -}; -const generateTsxFunctionTemplate = (componentName, importStyleSheet, styleSheetType) => { - let template; - if (importStyleSheet === "true") { - template = ` -import React from "react"; -import "./${componentName}Style.${styleSheetType}"; -import {Link, useNavigate} from "react-router-dom"; - -function ${componentName}(): JSX.Element { - const navigateTo = useNavigate(); - - return ( -
-

${componentName} works!

-
- ); -} - -export default ${componentName}; - `; - } - else { - template = ` -import React from "react"; -import {Link, useNavigate} from "react-router-dom"; - -function ${componentName}(): JSX.Element { - const navigateTo = useNavigate(); - - return ( -
-

${componentName} works!

-
- ); -} - -export default ${componentName}; - `; - } - return template; -}; -export { generateJsxArrowTemplate, generateJsxFunctionTemplate, generateTsxArrowTemplate, generateTsxFunctionTemplate, }; diff --git a/dist/helpers/generators/templates/serviceWorkerTemplate.js b/dist/helpers/generators/templates/serviceWorkerTemplate.js deleted file mode 100755 index 08885d0..0000000 --- a/dist/helpers/generators/templates/serviceWorkerTemplate.js +++ /dev/null @@ -1,223 +0,0 @@ -const serviceWorkerTemplate = () => { - const template = ` - /* eslint-disable no-restricted-globals */ - -// This service worker can be customized! -// See https://developers.google.com/web/tools/workbox/modules -// for the list of available Workbox modules, or add any other -// code you'd like. -// You can also remove this file if you'd prefer not to use a -// service worker, and the Workbox build step will be skipped. - -import { clientsClaim } from 'workbox-core'; -import { ExpirationPlugin } from 'workbox-expiration'; -import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching'; -import { registerRoute } from 'workbox-routing'; -import { StaleWhileRevalidate } from 'workbox-strategies'; - -clientsClaim(); - -// Precache all of the assets generated by your build process. -// Their URLs are injected into the manifest variable below. -// This variable must be present somewhere in your service worker file, -// even if you decide not to use precaching. See https://cra.link/PWA -precacheAndRoute(self.__WB_MANIFEST); - -// Set up App Shell-style routing, so that all navigation requests -// are fulfilled with your index.html shell. Learn more at -// https://developers.google.com/web/fundamentals/architecture/app-shell -const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$'); -registerRoute( - // Return false to exempt requests from being fulfilled by index.html. - ({ request, url }) => { - // If this isn't a navigation, skip. - if (request.mode !== 'navigate') { - return false; - } // If this is a URL that starts with /_, skip. - - if (url.pathname.startsWith('/_')) { - return false; - } // If this looks like a URL for a resource, because it contains // a file extension, skip. - - if (url.pathname.match(fileExtensionRegexp)) { - return false; - } // Return true to signal that we want to use the handler. - - return true; - }, - createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html') -); - -// An example runtime caching route for requests that aren't handled by the -// precache, in this case same-origin .png requests like those from in public/ -registerRoute( - // Add in any other file extensions or routing criteria as needed. - ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'), // Customize this strategy as needed, e.g., by changing to CacheFirst. - new StaleWhileRevalidate({ - cacheName: 'images', - plugins: [ - // Ensure that once this runtime cache reaches a maximum size the - // least-recently used images are removed. - new ExpirationPlugin({ maxEntries: 50 }), - ], - }) -); - -// This allows the web app to trigger skipWaiting via -// registration.waiting.postMessage({type: 'SKIP_WAITING'}) -self.addEventListener('message', (event) => { - if (event.data && event.data.type === 'SKIP_WAITING') { - self.skipWaiting(); - } -}); - -// Any other custom service worker logic can go here. - `; - return template; -}; -const serviceWorkerRegistrationTemplate = () => { - const template = ` -// This optional code is used to register a service worker. -// register() is not called by default. - -// This lets the app load faster on subsequent visits in production, and gives -// it offline capabilities. However, it also means that developers (and users) -// will only see deployed updates on subsequent visits to a page, after all the -// existing tabs open on the page have been closed, since previously cached -// resources are updated in the background. - -// To learn more about the benefits of this model and instructions on how to -// opt-in, read https://cra.link/PWA - -const isLocalhost = Boolean( - window.location.hostname === 'localhost' || - // [::1] is the IPv6 localhost address. - window.location.hostname === '[::1]' || - // 127.0.0.0/8 are considered localhost for IPv4. - window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/) -); - -export function register(config) { - if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { - // The URL constructor is available in all browsers that support SW. - const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); - if (publicUrl.origin !== window.location.origin) { - // Our service worker won't work if PUBLIC_URL is on a different origin - // from what our page is served on. This might happen if a CDN is used to - // serve assets; see https://github.com/facebook/create-react-app/issues/2374 - return; - } - - window.addEventListener('load', () => { - console.log(process.env.PUBLIC_URL); - const swUrl = process.env.PUBLIC_URL + "/service-worker.js"; - - if (isLocalhost) { - // This is running on localhost. Let's check if a service worker still exists or not. - checkValidServiceWorker(swUrl, config); - - // Add some additional logging to localhost, pointing developers to the - // service worker/PWA documentation. - navigator.serviceWorker.ready.then(() => { - console.log( - 'This web app is being served cache-first by a service ' + - 'worker. To learn more, visit https://cra.link/PWA' - ); - }); - } else { - // Is not localhost. Just register service worker - registerValidSW(swUrl, config); - } - }); - } -} - -function registerValidSW(swUrl, config) { - navigator.serviceWorker - .register(swUrl) - .then((registration) => { - registration.onupdatefound = () => { - const installingWorker = registration.installing; - if (installingWorker == null) { - return; - } - installingWorker.onstatechange = () => { - if (installingWorker.state === 'installed') { - if (navigator.serviceWorker.controller) { - // At this point, the updated precached content has been fetched, - // but the previous service worker will still serve the older - // content until all client tabs are closed. - console.log( - 'New content is available and will be used when all ' + - 'tabs for this page are closed. See https://cra.link/PWA.' - ); - - // Execute callback - if (config && config.onUpdate) { - config.onUpdate(registration); - } - } else { - // At this point, everything has been precached. - // It's the perfect time to display a - // "Content is cached for offline use." message. - console.log('Content is cached for offline use.'); - - // Execute callback - if (config && config.onSuccess) { - config.onSuccess(registration); - } - } - } - }; - }; - }) - .catch((error) => { - console.error('Error during service worker registration:', error); - }); -} - -function checkValidServiceWorker(swUrl, config) { - // Check if the service worker can be found. If it can't reload the page. - fetch(swUrl, { - headers: { 'Service-Worker': 'script' }, - }) - .then((response) => { - // Ensure service worker exists, and that we really are getting a JS file. - const contentType = response.headers.get('content-type'); - if ( - response.status === 404 || - (contentType != null && contentType.indexOf('javascript') === -1) - ) { - // No service worker found. Probably a different app. Reload the page. - navigator.serviceWorker.ready.then((registration) => { - registration.unregister().then(() => { - window.location.reload(); - }); - }); - } else { - // Service worker found. Proceed as normal. - registerValidSW(swUrl, config); - } - }) - .catch(() => { - console.log('No internet connection found. App is running in offline mode.'); - }); -} - -export function unregister() { - if ('serviceWorker' in navigator) { - navigator.serviceWorker.ready - .then((registration) => { - registration.unregister(); - }) - .catch((error) => { - console.error(error.message); - }); - } -} - - - `; - return template; -}; -export { serviceWorkerTemplate, serviceWorkerRegistrationTemplate }; diff --git a/dist/helpers/utilis/getUserConfigFilePath.js b/dist/helpers/utilis/getUserConfigFilePath.js deleted file mode 100755 index 21b3dda..0000000 --- a/dist/helpers/utilis/getUserConfigFilePath.js +++ /dev/null @@ -1,14 +0,0 @@ -import fs from "fs"; -import path from "path"; -export const getUserConfigFilePath = () => { - const userConfigFolderPath = path.join(process.cwd(), "methane"); - const userConfigFilePath = path.join(userConfigFolderPath, "methane.json"); - if (fs.existsSync(userConfigFilePath)) { - return userConfigFilePath; - } - // Use import.meta.url to get the current module's URL - const currentModuleUrl = new URL(import.meta.url); - // Convert the URL to a file path - const currentModulePath = path.dirname(currentModuleUrl.pathname); - return path.join(currentModulePath, "../../", "config", "methane.json"); -}; diff --git a/dist/helpers/utilis/initHelperFunction.js b/dist/helpers/utilis/initHelperFunction.js deleted file mode 100755 index ab10220..0000000 --- a/dist/helpers/utilis/initHelperFunction.js +++ /dev/null @@ -1,82 +0,0 @@ -import colors from "colors"; -import fs from "fs"; -import inquirer from "inquirer"; -import path from "path"; -export const initMethaneCLI = () => { - const configFolderPath = path.join(process.cwd(), "methane"); - const userConfigFilePath = path.join(configFolderPath, "methane.json"); - if (!fs.existsSync(configFolderPath)) { - fs.mkdirSync(configFolderPath); - } - const defaultConfig = { - template: "tsx", - component: "arrow", - page: "arrow", - generateStylesheet: "false", - generateFolder: "true", - register: "false", - stylesheetType: "css", - }; - if (!fs.existsSync(userConfigFilePath)) { - inquirer - .prompt([ - { - type: "list", - name: "template", - message: "Select a default template:", - choices: ["jsx", "tsx"], - default: "tsx", - }, - { - type: "list", - name: "component", - message: "Select a default component type:", - choices: ["arrow", "functional"], - default: "arrow", - }, - { - type: "list", - name: "page", - message: "Select a default page type:", - choices: ["arrow", "functional"], - default: "arrow", - }, - { - type: "list", - name: "generateStylesheet", - message: "Generates a stylesheet file for the Component and Pages", - choices: ["true", "false"], - default: "false", - }, - { - type: "list", - name: "generateFolder", - message: "Generates a folder file for the Component and Pages", - choices: ["true", "false"], - default: "true", - }, - { - type: "list", - name: "register", - message: "Registers pages in app entry point. If using NextJS, select false, else, sets the default registration of pages in the App.jsx or App.tsx file", - choices: ["true", "false"], - default: "false", - }, - { - type: "list", - name: "stylesheetType", - message: "Set the default style type (css or scss)", - choices: ["css", "scss"], - default: "css", - }, - ]) - .then((answers) => { - const userConfig = { ...defaultConfig, ...answers }; - fs.writeFileSync(userConfigFilePath, JSON.stringify(userConfig, null, 2)); - console.log(colors.green(colors.bold("Methane CLI configurations has been initialized successfully!"))); - }); - } - else { - console.log(colors.bold(colors.yellow("Methane CLI configuration already exists."))); - } -}; diff --git a/dist/helpers/utilis/packageConfiguration.js b/dist/helpers/utilis/packageConfiguration.js deleted file mode 100755 index 7c7b7df..0000000 --- a/dist/helpers/utilis/packageConfiguration.js +++ /dev/null @@ -1,106 +0,0 @@ -import { program } from "commander"; -import colors from "colors"; -import * as userReadConfig from "./readUserConfig.js"; -import * as userWriteConfig from "./writeUserConfig.js"; -const configurePackage = () => { - program - .command("config") - .alias("c") - .description("Set default configurations") - .option("-t, --template " + colors.bold(colors.white("