refactor!: change directory structure, simplify overriding components…

… (#1040) * fix: do not copy store and assets to project dir * feat: change override to match structore change * feat(cli): change structure with migration process * feat(nuxt-module): adapting to structure changes * chore: update aliases * feat: update create-nuxt-app * feat: test theme alias * refactor: duplicated component names - moved forms/SwAddress to SwAddress form * test: update tests * chore: update docs with changes
elgohr-update · Aug 23, 2020 · 0f74240 · 0f74240
1 parent 37f7b8a
commit 0f74240
Show file tree

Hide file tree

Showing 45 changed files with 927 additions and 621 deletions.
diff --git a/docs/landing/getting-started/upgrade.md b/docs/landing/getting-started/upgrade.md
@@ -12,17 +12,42 @@ The supported API versions of Shopware 6 are v3 and v2. Generally speaking, each
 
 We want Shopware PWA to be in sync with the latest endpoints of Shopware, to be able to ship new features to you as soon as they are released within Shopware.
 
-## Version 0.2.x to 0.3.x
+## Migrate version 0.3.x to 0.4.x
+
+All changes are documented in our [Changelog](https://github.com/DivanteLtd/shopware-pwa/blob/master/CHANGELOG.md)
+
+**BREAKING CHANGE**: moved nuxt folders inside `src` directory. `npx @shopware-pwa/cli init` should do this automatically or will notify you that it can't be done by it and you should do this manually. Folders to move: `"assets", "components", "layouts", "middleware", "pages", "plugins", "static", "store"`
+
+**BREAKING CHANGE**: we've made overriding store more simple. If you don't need a store just leave `store` directory empty or remove it. If you need to use it though, then create `src/store/indexjs` file and attach theme store.
+
+**FEATURE**: you can now safely use `@/components/COMPONENT_NAME.vue`instead of `@shopware-pwa/default-themee/components/COMPONENT_NAME.vue` inside your project. It's not a break - old aliases will stay the same.
+So for example instead of:
+`import SwButton from "@shopware-pwa/default-theme/components/atoms/SwButton"`
+you can type
+`import SwButton from "@/components/atoms/SwButton"`
+and it will import SwButton from theme or overwritten by you (created in `src/components/atoms/SwButton.vue`)
+
+**FEATURE**: you can explicitly call theme by using `@theme` alias.
+So for example even if you overwritten SwButton as above you can still call theme SwButton like this:
+`import SwButton from "@theme/components/atoms/SwButton"`
+
+**MIGRATION STEP**: change import in `src/assets/main.scss` from `@import '~@shopware-pwa/default-theme/assets/scss/main';` to `@import '@theme/assets/scss/main';` - old import should still work though.
+
+**MIGRATION STEP**: change import in `src/assets/variables.scss` from `@import '~@shopware-pwa/default-theme/assets/scss/variables';` to `@import '@theme/assets/scss/variables';` - old import should still work though.
+
+**REFACTOR(default-theme)**: `SwAddress` in `components/forms/SwAddress` has been renamed to `SwAddressForm` to avoid duplications with `SwAddress` in `components/SwAddress.vue`
+
+## Migrate version 0.2.x to 0.3.x
 
 All changes are documented in our [Changelog](https://github.com/DivanteLtd/shopware-pwa/blob/master/CHANGELOG.md)
 
 The 0.3.0 release introduces a couple of changes to
 
- * API Client Endpoints
- * API Client Interfaces
+- API Client Endpoints
+- API Client Interfaces
 
 :::warning Important
-Upgrading from shopware-pwa 0.2.x to 0.3.0 also requires upgrading your Shopware version from Shopware 6.2 to 6.3. Please note, that it is a coincidence, that Shopware 6.**3** is required to operate shopware-pwa 0.**3**. The might be future minor releases (0.4, 0.5 etc.) that still work on 6.3. 
+Upgrading from shopware-pwa 0.2.x to 0.3.0 also requires upgrading your Shopware version from Shopware 6.2 to 6.3. Please note, that it is a coincidence, that Shopware 6.**3** is required to operate shopware-pwa 0.**3**. The might be future minor releases (0.4, 0.5 etc.) that still work on 6.3.
 :::
 
 You will always find an overview of version compatibilities within our [Compatibility Table](/landing/getting-started/prepare-shopware.html#compatibility-table).
@@ -35,4 +60,4 @@ Please make sure to update all your endpoints to that version as well. For futur
 
 ### API Client Interfaces
 
-As not only the API version changes, but also the the endpoints that are provided, we had to mark some endpoints as deprecated. Please make sure to remove their usages from your project and use the suggested replacements. Find more information within our Changelog linked above.
+As not only the API version changes, but also the the endpoints that are provided, we had to mark some endpoints as deprecated. Please make sure to remove their usages from your project and use the suggested replacements. Find more information within our Changelog linked above.
diff --git a/package.json b/package.json
@@ -55,6 +55,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-replace": "^2.3.3",
     "@types/faker": "^4.1.12",
+    "@types/fs-extra": "^9.0.1",
     "@types/jest": "^26.0.10",
     "@types/node": "^14.0.27",
     "axios": "^0.19.2",

diff --git a/packages/cli/src/commands/dev.ts b/packages/cli/src/commands/dev.ts
@@ -58,24 +58,12 @@ const command: GluegunCommand = {
         }
       });
 
-    // Watch Cmponents
-    const componentsWatchEvents = ["add", "unlink"];
-    const componentsPath = path.join("components");
-    chokidar
-      .watch([componentsPath], {
-        ignoreInitial: true,
-      })
-      .on("all", async (event) => {
-        if (componentsWatchEvents.includes(event)) {
-          jetpack.copy(`nuxt.config.js`, `nuxt.config.js`, { overwrite: true });
-        }
-      });
-
     // initial config invoke
     await toolbox.plugins.invokeRefreshPlugins(true);
     await toolbox.cms.invokeRefreshCMS();
     await toolbox.languages.invokeRefreshLanguages();
 
+    // for debug: node --inspect node_modules/.bin/nuxt
     await spawn("yarn nuxt", {
       stdio: "inherit",
     });

diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts
@@ -56,7 +56,8 @@ module.exports = {
       Object.assign(inputParameters, answers);
     }
 
-    await toolbox.generateNuxtProject();
+    const newProjectGenerated: boolean = await toolbox.generateNuxtProject();
+    await toolbox.moveDefaultNuxtFoldersToSrc(newProjectGenerated);
 
     let stage = inputParameters.stage || STAGES.STABLE;
     if (inputParameters.stage === "canary") stage = STAGES.CANARY;

diff --git a/packages/cli/src/commands/override.ts b/packages/cli/src/commands/override.ts
@@ -50,7 +50,7 @@ module.exports = {
     const answers = await toolbox.prompt.ask([componentToOverrideQuestion]);
 
     const copyFrom = path.join(directoryPath, answers.componentToOverride);
-    const copyTo = path.join("components", answers.componentToOverride);
+    const copyTo = path.join("src", "components", answers.componentToOverride);
 
     try {
       await toolbox.filesystem.copyAsync(copyFrom, copyTo);
@@ -60,7 +60,11 @@ module.exports = {
       const ua = require("universal-analytics");
       const visitor = ua("UA-167979975-1");
       visitor
-        .event("CLI", "override-component", answers.componentToOverride)
+        .event(
+          "CLI",
+          "override-component",
+          answers.componentToOverride.replace("\\", "/")
+        )
         .send();
     } catch (e) {
       toolbox.print.error(e.message);

diff --git a/packages/cli/src/extensions/nuxt-extension.ts b/packages/cli/src/extensions/nuxt-extension.ts
@@ -31,19 +31,22 @@ module.exports = (toolbox: GluegunToolbox) => {
       linter: ["prettier", "lintStaged"],
       test: "jest",
       mode: "universal",
+      target: "server",
       devTools: [],
     };
     if (!isNuxtGenerated) {
-      const nuxtGenerate = `npx --ignore-existing create-nuxt-app@2.15.0 --answers "${JSON.stringify(
+      const nuxtGenerate = `npx --ignore-existing create-nuxt-app@3.2.0 --answers "${JSON.stringify(
         nuxtAnswers
       ).replace(/"/g, '\\"')}"`;
       await run(nuxtGenerate);
       await toolbox.removeDefaultNuxtFiles();
       spinner.succeed();
+      return true;
     } else {
       spinner.succeed(
         "Preparing Nuxt project: project is already created. Remove `nuxt.config.js` to regenerate whole project."
       );
+      return false;
     }
   };
 
@@ -52,9 +55,50 @@ module.exports = (toolbox: GluegunToolbox) => {
    * TODO: check generated files and add here ones which are not necessary
    */
   toolbox.removeDefaultNuxtFiles = async () => {
-    toolbox.filesystem.remove(path.join("pages", "index.vue"));
-    toolbox.filesystem.remove(path.join("components", "Logo.vue"));
-    toolbox.filesystem.remove(path.join("layouts", "default.vue"));
+    return Promise.all([
+      toolbox.filesystem.removeAsync(path.join("pages", "index.vue")),
+      toolbox.filesystem.removeAsync(path.join("components", "Logo.vue")),
+      toolbox.filesystem.removeAsync(path.join("layouts", "default.vue")),
+    ]);
+  };
+
+  /**
+   * Change structure of project, by moving all Nuxt related folders to `src`
+   */
+  toolbox.moveDefaultNuxtFoldersToSrc = async (
+    newProjectGenerated: boolean
+  ) => {
+    const foldersToMove = [
+      "assets",
+      "components",
+      "layouts",
+      "middleware",
+      "pages",
+      "plugins",
+      "static",
+      "store",
+    ];
+    return Promise.all(
+      foldersToMove.map(async (folderName: string) => {
+        const destinationDirectory: string = path.join("src", folderName);
+        const existSrc = await toolbox.filesystem.existsAsync(folderName);
+        const existDestination = await toolbox.filesystem.existsAsync(
+          destinationDirectory
+        );
+        if (existSrc && !existDestination) {
+          await toolbox.filesystem.moveAsync(folderName, destinationDirectory);
+          if (!newProjectGenerated) {
+            toolbox.print.success(
+              `Directory "${folderName}" has been migrated to "${destinationDirectory}"`
+            );
+          }
+        } else if (existSrc && existDestination) {
+          toolbox.print.error(
+            `Couldn't automatically migrate directory "${folderName}" to "${destinationDirectory}". Please do manual migration and remove ${folderName} from the root directory.`
+          );
+        }
+      })
+    );
   };
 
   /**
@@ -200,43 +244,35 @@ module.exports = (toolbox: GluegunToolbox) => {
       });
     }
 
-    const isMainScssFileCreated = exists("./assets/scss/main.scss");
+    const isMainScssFileCreated = exists("./src/assets/scss/main.scss");
     if (!isMainScssFileCreated) {
       await toolbox.template.generate({
         template: "main.scss",
-        target: `./assets/scss/main.scss`,
+        target: `./src/assets/scss/main.scss`,
         props: {},
       });
     }
 
-    const isVariablesScssFileCreated = exists("./assets/scss/variables.scss");
+    const isVariablesScssFileCreated = exists(
+      "./src/assets/scss/variables.scss"
+    );
     if (!isVariablesScssFileCreated) {
       await toolbox.template.generate({
         template: "variables.scss",
-        target: `./assets/scss/variables.scss`,
+        target: `./src/assets/scss/variables.scss`,
         props: {},
       });
     }
   };
 
   toolbox.copyThemeFolder = async (folderName, destination) => {
     const dest = destination ? destination : folderName;
+    const destinationExist = toolbox.filesystem.existsAsync(dest);
+    if (destinationExist) return;
     await toolbox.filesystem.copyAsync(
       path.join(toolbox.defaultThemeLocation, folderName),
       dest,
       { overwrite: true }
     );
   };
-
-  toolbox.watchThemeFolder = (folderName) => {
-    const fs = require("fs");
-    fs.watch(
-      path.join(toolbox.defaultThemeLocation, folderName),
-      { recursive: true },
-      async () => {
-        toolbox.print.info(`Reloading [${folderName}] files...`);
-        await toolbox.copyThemeFolder(folderName);
-      }
-    );
-  };
 };
diff --git a/packages/cli/src/extensions/shopware-pwa-extension.ts b/packages/cli/src/extensions/shopware-pwa-extension.ts
@@ -11,7 +11,7 @@ module.exports = (toolbox: GluegunToolbox) => {
     toolbox.print.info("called foo extension");
   };
 
-  toolbox.themeFolders = ["store", "static", ".eslintrc.js"];
+  toolbox.themeFolders = [".eslintrc.js"];
 
   toolbox.defaultThemeLocation = `node_modules/@shopware-pwa/default-theme`;
   // enable this if you want to read configuration in from

diff --git a/packages/cli/src/templates/main.scss b/packages/cli/src/templates/main.scss
@@ -1,5 +1,5 @@
 // we're importing here main style variables from theme
-@import '~@shopware-pwa/default-theme/assets/scss/main';
+@import "@theme/assets/scss/main";
 
 // Here you can override you global styles.
 // It will be included once on webside and visible unless some more specific styles in components will extend that
@@ -12,4 +12,4 @@
 //   font-weight: var(--font-light);
 //   font-size: var(--font-size-base);
 //   line-height: 1.6;
-// }
+// }
diff --git a/packages/cli/src/templates/variables.scss b/packages/cli/src/templates/variables.scss
@@ -1,11 +1,11 @@
 // we're importing here main style variables
-@import '~@shopware-pwa/default-theme/assets/scss/variables';
+@import "@theme/assets/scss/variables";
 
 // For available variables check SFUI docs - https://docs.storefrontui.io/customization.html#global-variables
-// 
-// Please remember to ONLY override variables here, as it will be used in components. 
+//
+// Please remember to ONLY override variables here, as it will be used in components.
 // If you'd add some styles here as well it would be included in almost every component. You don't want it ;) You can add global styles in main.scss file.
 
 // #__nuxt {
 //   --c-primary: #5ece7b;
-// }
+// }
diff --git a/packages/composables/src/internalHelpers/associationsParameter.ts b/packages/composables/src/internalHelpers/associationsParameter.ts
@@ -1,7 +1,7 @@
 /**
  * A collection of performance set of association parameters
  */
-import * as apiParams from "@shopware-pwa/composables/src/api-params.json";
+import * as apiParams from "../api-params.json";
 
 /**
  * Gets the right associations parameter for given entity type

diff --git a/packages/composables/src/internalHelpers/includesParameter.ts b/packages/composables/src/internalHelpers/includesParameter.ts
@@ -1,7 +1,7 @@
 /**
  * A collection of performance set of includes parameters
  */
-import * as apiParams from "@shopware-pwa/composables/src/api-params.json";
+import * as apiParams from "../api-params.json";
 
 /**
  * Gets the right includes parameter for given entity type

diff --git a/packages/default-theme/assets/scss/main.scss b/packages/default-theme/assets/scss/main.scss
@@ -1,4 +1,4 @@
-@import "~@storefront-ui/vue/styles";
+@import "@storefront-ui/vue/styles.scss";
 @import "@/assets/scss/variables.scss";
 
 // Global styles for theme

diff --git a/packages/default-theme/assets/scss/variables.scss b/packages/default-theme/assets/scss/variables.scss
@@ -1,4 +1,4 @@
-@import "~@storefront-ui/shared/styles/variables";
+@import "~@storefront-ui/shared/styles/variables.scss";
 
 $tablet: 768px;
 

diff --git a/packages/default-theme/cms/settings.scss b/packages/default-theme/cms/settings.scss
@@ -1,2 +1,2 @@
-@import '~@storefront-ui/vue/styles.scss';
-@import '@/assets/scss/variables';
+@import "@storefront-ui/vue/styles.scss";
+@import "@/assets/scss/variables";
diff --git a/packages/default-theme/components/SwAddress.vue b/packages/default-theme/components/SwAddress.vue
@@ -54,8 +54,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "~@storefront-ui/vue/styles";
-
 .sw-address {
   display: flex;
   justify-content: space-between;

diff --git a/packages/default-theme/components/SwCheckoutMethod.vue b/packages/default-theme/components/SwCheckoutMethod.vue
@@ -25,8 +25,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "~@storefront-ui/vue/styles";
-
 .sw-generic-method {
   margin-bottom: var(--spacer-sm);
   display: flex;

diff --git a/packages/default-theme/components/SwLogin.vue b/packages/default-theme/components/SwLogin.vue
@@ -52,8 +52,8 @@ import { validationMixin } from "vuelidate"
 import { required, email } from "vuelidate/lib/validators"
 import { useUser } from "@shopware-pwa/composables"
 import SwPluginSlot from "sw-plugins/SwPluginSlot"
-import SwButton from "@shopware-pwa/default-theme/components/atoms/SwButton"
-import SwInput from "@shopware-pwa/default-theme/components/atoms/SwInput"
+import SwButton from "@/components/atoms/SwButton"
+import SwInput from "@/components/atoms/SwInput"
 
 export default {
   name: "SwLogin",

diff --git a/packages/default-theme/components/SwOrderDetails.vue b/packages/default-theme/components/SwOrderDetails.vue
@@ -212,7 +212,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "~@storefront-ui/vue/styles";
+@import "@/assets/scss/variables";
 
 .sw-order-details {
   padding: 1rem;

diff --git a/packages/default-theme/components/SwOrderDetailsItem.vue b/packages/default-theme/components/SwOrderDetailsItem.vue
@@ -58,8 +58,6 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-@import "~@storefront-ui/vue/styles";
-
 .product-price {
   white-space: nowrap;
 }

diff --git a/packages/default-theme/components/SwPersonalDetails.vue b/packages/default-theme/components/SwPersonalDetails.vue
@@ -35,8 +35,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "~@storefront-ui/vue/styles";
-
 .sw-personal-details {
   display: flex;
   justify-content: space-between;

diff --git a/packages/default-theme/components/SwTotals.vue b/packages/default-theme/components/SwTotals.vue
@@ -58,7 +58,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "~@storefront-ui/vue/styles";
+@import "@/assets/scss/variables";
 
 .sw-totals {
   padding: var(--spacer-base) var(--spacer-xl);

diff --git a/packages/default-theme/components/account/orders/Order.vue b/packages/default-theme/components/account/orders/Order.vue
@@ -73,7 +73,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "~@storefront-ui/vue/styles.scss";
 .order-view {
   &__details {
     flex: 0 0 100%;