bootstrap js import in main.js and stubs scaffoling (#16)

* Refactored scaffolding and fixed stubs * Added component to bootstrap scaffolding * Added folder for stubs * Updated tests for new stubs scaffolding
DonnieRich · Jan 23, 2023 · 7a23052 · 7a23052
1 parent d7912a4
commit 7a23052
Show file tree

Hide file tree

Showing 14 changed files with 94 additions and 66 deletions.
diff --git a/__tests__/e2e/checkIndexCommand.test.js b/__tests__/e2e/checkIndexCommand.test.js
@@ -16,12 +16,14 @@ describe('e2e test vue-3-options-preset', () => {
             writeFile(`.${JSON_FILE}`, JSON.stringify(baseJson)),
 
             writeFile(`${BASE_STUBS_DIR}${JSON_FILE}`, JSON.stringify(stubJson)),
-            writeFile(`${BASE_STUBS_DIR}/App.vue`, 'Stub App.vue'),
-            writeFile(`${BASE_STUBS_DIR}/App-bootstrap.vue`, 'Stub App.vue WITH BOOTSTRAP'),
-            writeFile(`${BASE_STUBS_DIR}/general.scss`, 'SCSS NO BOOTSTRAP'),
-            writeFile(`${BASE_STUBS_DIR}/general-bootstrap.scss`, 'SCSS WITH BOOTSTRAP'),
-            writeFile(`${BASE_STUBS_DIR}/HelloWorld.vue`, 'Stub HelloWorld.vue'),
-            writeFile(`${BASE_STUBS_DIR}/main.js`, 'Stub main.js'),
+            writeFile(`${BASE_STUBS_DIR}/default/App.vue`, 'Stub App.vue'),
+            writeFile(`${BASE_STUBS_DIR}/default/general.scss`, 'SCSS NO BOOTSTRAP'),
+            writeFile(`${BASE_STUBS_DIR}/default/HelloWorld.vue`, 'Stub HelloWorld.vue'),
+            writeFile(`${BASE_STUBS_DIR}/default/main.js`, 'Stub main.js'),
+            writeFile(`${BASE_STUBS_DIR}/bootstrap/App.vue`, 'Stub App.vue WITH BOOTSTRAP'),
+            writeFile(`${BASE_STUBS_DIR}/bootstrap/general.scss`, 'SCSS WITH BOOTSTRAP'),
+            writeFile(`${BASE_STUBS_DIR}/bootstrap/HelloWorld.vue`, 'Stub HelloWorld.vue'),
+            writeFile(`${BASE_STUBS_DIR}/bootstrap/main.js`, 'Stub main.js'),
 
             writeFile(`${BASE_DIR}/vite.config.js`, '...'),
             writeFile(`${BASE_DIR}/App.vue`, '...'),
@@ -121,11 +123,11 @@ describe('e2e test vue-3-options-preset', () => {
         const { removeFile, execute } = await test;
 
         // Scaffolding for this specific test
-        await removeFile(`${BASE_STUBS_DIR}/App-bootstrap.vue`);
-        await removeFile(`${BASE_STUBS_DIR}/general-bootstrap.scss`);
+        await removeFile(`${BASE_STUBS_DIR}/bootstrap/App.vue`);
+        await removeFile(`${BASE_STUBS_DIR}/bootstrap/general.scss`);
         await removeFile(`${BASE_STUBS_DIR}${JSON_FILE}`);
-        await removeFile(`${BASE_STUBS_DIR}/HelloWorld.vue`);
-        await removeFile(`${BASE_STUBS_DIR}/main.js`);
+        await removeFile(`${BASE_STUBS_DIR}/bootstrap/HelloWorld.vue`);
+        await removeFile(`${BASE_STUBS_DIR}/bootstrap/main.js`);
 
         const { code, stdout } = await execute('node', `./cmd/index.js -b`);
 
@@ -142,11 +144,11 @@ describe('e2e test vue-3-options-preset', () => {
         const { removeFile, execute } = await test;
 
         // Scaffolding for this specific test
-        await removeFile(`${BASE_STUBS_DIR}/App.vue`);
-        await removeFile(`${BASE_STUBS_DIR}/general.scss`);
+        await removeFile(`${BASE_STUBS_DIR}/default/App.vue`);
+        await removeFile(`${BASE_STUBS_DIR}/default/general.scss`);
         await removeFile(`${BASE_STUBS_DIR}${JSON_FILE}`);
-        await removeFile(`${BASE_STUBS_DIR}/HelloWorld.vue`);
-        await removeFile(`${BASE_STUBS_DIR}/main.js`);
+        await removeFile(`${BASE_STUBS_DIR}/default/HelloWorld.vue`);
+        await removeFile(`${BASE_STUBS_DIR}/default/main.js`);
 
         const { code, stdout } = await execute('node', './cmd/index.js');
 

diff --git a/__tests__/unit/__snapshots__/checkCopyStubFiles.test.js.snap b/__tests__/unit/__snapshots__/checkCopyStubFiles.test.js.snap
@@ -2,8 +2,9 @@
 
 exports[`copyStubFiles Should fail if the stub files are missing 1`] = `
 {
-  "/node_modules/vue-3-options-preset/src/stubs/App-bootstrap.vue": "New App.vue WITH BOOTSTRAP",
-  "/node_modules/vue-3-options-preset/src/stubs/general-bootstrap.scss": "General SCSS WITH BOOTSTRAP",
+  "/node_modules/vue-3-options-preset/src/stubs/bootstrap/App.vue": "New App.vue WITH BOOTSTRAP",
+  "/node_modules/vue-3-options-preset/src/stubs/bootstrap/general.scss": "General SCSS WITH BOOTSTRAP",
+  "/node_modules/vue-3-options-preset/src/stubs/bootstrap/main.js": "New main.js WITH BOOTSTRAP",
   "/src/App.vue": "Old App.vue",
   "/src/components/HelloWorld.vue": "old component",
   "/src/justAFile.js": "...",
@@ -12,24 +13,22 @@ exports[`copyStubFiles Should fail if the stub files are missing 1`] = `
 
 exports[`copyStubFiles Should fail if the stub files for Bootstrap are missing 1`] = `
 {
-  "/node_modules/vue-3-options-preset/src/stubs/App.vue": "New App.vue",
-  "/node_modules/vue-3-options-preset/src/stubs/HelloWorld.vue": "New component",
-  "/node_modules/vue-3-options-preset/src/stubs/general.scss": "General SCSS",
-  "/node_modules/vue-3-options-preset/src/stubs/main.js": "New main.js",
+  "/node_modules/vue-3-options-preset/src/stubs/default/App.vue": "New App.vue",
+  "/node_modules/vue-3-options-preset/src/stubs/default/HelloWorld.vue": "New component",
+  "/node_modules/vue-3-options-preset/src/stubs/default/general.scss": "General SCSS",
+  "/node_modules/vue-3-options-preset/src/stubs/default/main.js": "New main.js",
   "/src/App.vue": "Old App.vue",
-  "/src/components/HelloWorld.vue": "New component",
+  "/src/components/HelloWorld.vue": "old component",
   "/src/justAFile.js": "...",
-  "/src/main.js": "New main.js",
-  "/src/styles": null,
 }
 `;
 
 exports[`copyStubFiles Should pass if the stub files are copied in the new location 1`] = `
 {
-  "/node_modules/vue-3-options-preset/src/stubs/App.vue": "New App.vue",
-  "/node_modules/vue-3-options-preset/src/stubs/HelloWorld.vue": "New component",
-  "/node_modules/vue-3-options-preset/src/stubs/general.scss": "General SCSS",
-  "/node_modules/vue-3-options-preset/src/stubs/main.js": "New main.js",
+  "/node_modules/vue-3-options-preset/src/stubs/default/App.vue": "New App.vue",
+  "/node_modules/vue-3-options-preset/src/stubs/default/HelloWorld.vue": "New component",
+  "/node_modules/vue-3-options-preset/src/stubs/default/general.scss": "General SCSS",
+  "/node_modules/vue-3-options-preset/src/stubs/default/main.js": "New main.js",
   "/src/App.vue": "New App.vue",
   "/src/components/HelloWorld.vue": "New component",
   "/src/justAFile.js": "...",
@@ -40,14 +39,14 @@ exports[`copyStubFiles Should pass if the stub files are copied in the new locat
 
 exports[`copyStubFiles Should pass if the stub files are copied in the new location with SCSS file for Bootstrap 1`] = `
 {
-  "/node_modules/vue-3-options-preset/src/stubs/App-bootstrap.vue": "New App.vue WITH BOOTSTRAP",
-  "/node_modules/vue-3-options-preset/src/stubs/HelloWorld.vue": "New component",
-  "/node_modules/vue-3-options-preset/src/stubs/general-bootstrap.scss": "General SCSS WITH BOOTSTRAP",
-  "/node_modules/vue-3-options-preset/src/stubs/main.js": "New main.js",
+  "/node_modules/vue-3-options-preset/src/stubs/bootstrap/App.vue": "New App.vue WITH BOOTSTRAP",
+  "/node_modules/vue-3-options-preset/src/stubs/bootstrap/HelloWorld.vue": "New component",
+  "/node_modules/vue-3-options-preset/src/stubs/bootstrap/general.scss": "General SCSS WITH BOOTSTRAP",
+  "/node_modules/vue-3-options-preset/src/stubs/bootstrap/main.js": "New main.js WITH BOOTSTRAP",
   "/src/App.vue": "New App.vue WITH BOOTSTRAP",
   "/src/components/HelloWorld.vue": "New component",
   "/src/justAFile.js": "...",
-  "/src/main.js": "New main.js",
+  "/src/main.js": "New main.js WITH BOOTSTRAP",
   "/src/styles/general.scss": "General SCSS WITH BOOTSTRAP",
 }
 `;
diff --git a/__tests__/unit/checkCopyStubFiles.test.js b/__tests__/unit/checkCopyStubFiles.test.js
@@ -16,73 +16,74 @@ describe(copyStubFiles, () => {
 
         vol.fromJSON(
             {
-                [`${BASE_STUBS_DIR}/App.vue`]: "New App.vue",
-                [`${BASE_STUBS_DIR}/general.scss`]: "General SCSS",
-                [`${BASE_STUBS_DIR}/HelloWorld.vue`]: "New component",
-                [`${BASE_STUBS_DIR}/main.js`]: "New main.js",
+                [`${BASE_STUBS_DIR}/default/App.vue`]: "New App.vue",
+                [`${BASE_STUBS_DIR}/default/general.scss`]: "General SCSS",
+                [`${BASE_STUBS_DIR}/default/HelloWorld.vue`]: "New component",
+                [`${BASE_STUBS_DIR}/default/main.js`]: "New main.js",
                 [`${BASE_DIR}/justAFile.js`]: "...",
                 [`${BASE_DIR}/components/HelloWorld.vue`]: "Old component",
                 [`${BASE_DIR}/App.vue`]: "Old App.vue"
             },
             "/"
         );
 
-        await copyStubFiles(BASE_STUBS_DIR, BASE_DIR, false);
+        await copyStubFiles(`${BASE_STUBS_DIR}/default`, BASE_DIR);
         expect(vol.toJSON()).toMatchSnapshot();
     });
 
     it("Should pass if the stub files are copied in the new location with SCSS file for Bootstrap", async () => {
 
         vol.fromJSON(
             {
-                [`${BASE_STUBS_DIR}/App-bootstrap.vue`]: "New App.vue WITH BOOTSTRAP",
-                [`${BASE_STUBS_DIR}/general-bootstrap.scss`]: "General SCSS WITH BOOTSTRAP",
-                [`${BASE_STUBS_DIR}/HelloWorld.vue`]: "New component",
-                [`${BASE_STUBS_DIR}/main.js`]: "New main.js",
+                [`${BASE_STUBS_DIR}/bootstrap/App.vue`]: "New App.vue WITH BOOTSTRAP",
+                [`${BASE_STUBS_DIR}/bootstrap/general.scss`]: "General SCSS WITH BOOTSTRAP",
+                [`${BASE_STUBS_DIR}/bootstrap/HelloWorld.vue`]: "New component",
+                [`${BASE_STUBS_DIR}/bootstrap/main.js`]: "New main.js WITH BOOTSTRAP",
                 [`${BASE_DIR}/justAFile.js`]: "...",
                 [`${BASE_DIR}/components/HelloWorld.vue`]: "Old component",
                 [`${BASE_DIR}/App.vue`]: "Old App.vue"
             },
             "/"
         );
 
-        await copyStubFiles(BASE_STUBS_DIR, BASE_DIR, true);
+        await copyStubFiles(`${BASE_STUBS_DIR}/bootstrap`, BASE_DIR);
         expect(vol.toJSON()).toMatchSnapshot();
     });
 
     it("Should fail if the stub files for Bootstrap are missing", async () => {
 
         vol.fromJSON(
             {
-                [`${BASE_STUBS_DIR}/App.vue`]: "New App.vue",
-                [`${BASE_STUBS_DIR}/general.scss`]: "General SCSS",
-                [`${BASE_STUBS_DIR}/HelloWorld.vue`]: "New component",
-                [`${BASE_STUBS_DIR}/main.js`]: "New main.js",
+                [`${BASE_STUBS_DIR}/default/App.vue`]: "New App.vue",
+                [`${BASE_STUBS_DIR}/default/general.scss`]: "General SCSS",
+                [`${BASE_STUBS_DIR}/default/HelloWorld.vue`]: "New component",
+                [`${BASE_STUBS_DIR}/default/main.js`]: "New main.js",
                 [`${BASE_DIR}/justAFile.js`]: "...",
                 [`${BASE_DIR}/components/HelloWorld.vue`]: "old component",
                 [`${BASE_DIR}/App.vue`]: "Old App.vue"
             },
             "/"
         );
 
-        await expect(() => copyStubFiles(BASE_STUBS_DIR, BASE_DIR, true)).rejects.toThrow(Error);
+        await expect(() => copyStubFiles(`${BASE_STUBS_DIR}/bootstrap`, BASE_DIR)).rejects.toThrow(Error);
         expect(vol.toJSON()).toMatchSnapshot();
     });
 
     it("Should fail if the stub files are missing", async () => {
 
         vol.fromJSON(
             {
-                [`${BASE_STUBS_DIR}/App-bootstrap.vue`]: "New App.vue WITH BOOTSTRAP",
-                [`${BASE_STUBS_DIR}/general-bootstrap.scss`]: "General SCSS WITH BOOTSTRAP",
+                [`${BASE_STUBS_DIR}/bootstrap/App.vue`]: "New App.vue WITH BOOTSTRAP",
+                [`${BASE_STUBS_DIR}/bootstrap/general.scss`]: "General SCSS WITH BOOTSTRAP",
+                [`${BASE_STUBS_DIR}/bootstrap/main.js`]: "New main.js WITH BOOTSTRAP",
                 [`${BASE_DIR}/justAFile.js`]: "...",
                 [`${BASE_DIR}/components/HelloWorld.vue`]: "old component",
                 [`${BASE_DIR}/App.vue`]: "Old App.vue"
             },
             "/"
         );
 
-        await expect(() => copyStubFiles(BASE_STUBS_DIR, BASE_DIR, true)).rejects.toThrow(Error);
+        await expect(() => copyStubFiles(`${BASE_STUBS_DIR}/default`, BASE_DIR)).rejects.toThrow(Error);
         expect(vol.toJSON()).toMatchSnapshot();
     });
 });
diff --git a/__tests__/unit/checkStubFiles.test.js b/__tests__/unit/checkStubFiles.test.js
@@ -14,10 +14,10 @@ describe("Checking stub file presence", () => {
 
     it("Should pass if the stub files are present", async () => {
 
-        const appVue = `${BASE_PATH}App.vue`;
-        const generalScss = `${BASE_PATH}general.scss`;
-        const helloWorld = `${BASE_PATH}HelloWorld.vue`;
-        const mainJs = `${BASE_PATH}main.js`;
+        const appVue = `${BASE_PATH}default/App.vue`;
+        const generalScss = `${BASE_PATH}default/general.scss`;
+        const helloWorld = `${BASE_PATH}default/HelloWorld.vue`;
+        const mainJs = `${BASE_PATH}default/main.js`;
 
         await Promise.all([
             checkFile(appVue),
@@ -30,12 +30,14 @@ describe("Checking stub file presence", () => {
 
     it("Should pass if the stub files for Bootstrap are present", async () => {
 
-        const appVue = `${BASE_PATH}App-bootstrap.vue`;
-        const generalScss = `${BASE_PATH}general-bootstrap.scss`;
+        const appVue = `${BASE_PATH}bootstrap/App.vue`;
+        const generalScss = `${BASE_PATH}bootstrap/general.scss`;
+        const mainJs = `${BASE_PATH}bootstrap/main.js`;
 
         await Promise.all([
             checkFile(appVue),
-            checkFile(generalScss)
+            checkFile(generalScss),
+            checkFile(mainJs)
         ]);
 
     });

diff --git a/cmd/index.js b/cmd/index.js
@@ -13,15 +13,17 @@ const init = async () => {
 
     try {
         let bootstrap = false;
+        let stubsFolder = "/default";
 
         // all the commands run from the root
         await cleanupScaffolding([BASE_DIR, `${BASE_DIR}${COMPONENT_FOLDER}`, `${BASE_DIR}${COMPONENT_FOLDER}/icons`], EXTENSIONS, REMOVABLE_FOLDERS);
 
         if (argv[0] === '-b') {
             bootstrap = true;
+            stubsFolder = "/bootstrap";
         }
 
-        await copyStubFiles(BASE_STUBS_DIR, BASE_DIR, bootstrap);
+        await copyStubFiles(`${BASE_STUBS_DIR}${stubsFolder}`, BASE_DIR);
 
         await addDependenciesToPackageJson(`${BASE_STUBS_DIR}${JSON_FILE}`, `.${JSON_FILE}`, bootstrap);
 

diff --git a/src/bin/copyStubFiles.js b/src/bin/copyStubFiles.js
@@ -1,20 +1,15 @@
 const fs = require("fs/promises");
 
-const copyStubFiles = async (baseStubsDir, baseDir, bootstrap) => {
+const copyStubFiles = async (baseStubsDir, baseDir) => {
     console.log('\x1b[37m%s\x1b[0m', '📑  Copying new files...');
 
+    await fs.copyFile(`${baseStubsDir}/App.vue`, `${baseDir}/App.vue`);
     await fs.copyFile(`${baseStubsDir}/HelloWorld.vue`, `${baseDir}/components/HelloWorld.vue`);
     await fs.copyFile(`${baseStubsDir}/main.js`, `${baseDir}/main.js`);
 
     await fs.mkdir(`${baseDir}/styles`);
 
-    if (bootstrap) {
-        await fs.copyFile(`${baseStubsDir}/App-bootstrap.vue`, `${baseDir}/App.vue`);
-        await fs.copyFile(`${baseStubsDir}/general-bootstrap.scss`, `${baseDir}/styles/general.scss`);
-    } else {
-        await fs.copyFile(`${baseStubsDir}/App.vue`, `${baseDir}/App.vue`);
-        await fs.copyFile(`${baseStubsDir}/general.scss`, `${baseDir}/styles/general.scss`);
-    }
+    await fs.copyFile(`${baseStubsDir}/general.scss`, `${baseDir}/styles/general.scss`);
 
 }
 

diff --git a/src/stubs/App-bootstrap.vue → src/stubs/bootstrap/App.vue b/src/stubs/App-bootstrap.vue → src/stubs/bootstrap/App.vue
diff --git a/src/stubs/HelloWorld.vue → src/stubs/bootstrap/HelloWorld.vue b/src/stubs/HelloWorld.vue → src/stubs/bootstrap/HelloWorld.vue
diff --git a/src/stubs/general-bootstrap.scss → src/stubs/bootstrap/general.scss b/src/stubs/general-bootstrap.scss → src/stubs/bootstrap/general.scss
diff --git a/src/stubs/bootstrap/main.js b/src/stubs/bootstrap/main.js
@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+// Import all of Bootstrap's JS
+import * as bootstrap from 'bootstrap'
+
+createApp(App).mount('#app')
diff --git a/src/stubs/App.vue → src/stubs/default/App.vue b/src/stubs/App.vue → src/stubs/default/App.vue
diff --git a/src/stubs/default/HelloWorld.vue b/src/stubs/default/HelloWorld.vue
@@ -0,0 +1,20 @@
+<script>
+export default {
+    name: "HelloWorld",
+}
+</script>
+
+<template>
+    <h1 class="green">La mia prima app con <span class="yellow">Vite!</span></h1>
+</template>
+
+<style lang="scss" scoped>
+h1 {
+    font-size: 1.4em;
+
+    span.yellow {
+        color: yellow;
+        text-decoration: underline;
+    }
+}
+</style>
diff --git a/src/stubs/general.scss → src/stubs/default/general.scss b/src/stubs/general.scss → src/stubs/default/general.scss
diff --git a/src/stubs/main.js → src/stubs/default/main.js b/src/stubs/main.js → src/stubs/default/main.js