From 0f74240c79bed509ecbb09229d875d1380fb57d1 Mon Sep 17 00:00:00 2001 From: Patryk Tomczyk <13100280+patzick@users.noreply.github.com> Date: Sun, 23 Aug 2020 20:22:24 +0200 Subject: [PATCH] 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 --- docs/landing/getting-started/upgrade.md | 35 +- package.json | 1 + packages/cli/src/commands/dev.ts | 14 +- packages/cli/src/commands/init.ts | 3 +- packages/cli/src/commands/override.ts | 8 +- packages/cli/src/extensions/nuxt-extension.ts | 76 +++- .../src/extensions/shopware-pwa-extension.ts | 2 +- packages/cli/src/templates/main.scss | 4 +- packages/cli/src/templates/variables.scss | 8 +- .../internalHelpers/associationsParameter.ts | 2 +- .../src/internalHelpers/includesParameter.ts | 2 +- packages/default-theme/assets/scss/main.scss | 2 +- .../default-theme/assets/scss/variables.scss | 2 +- packages/default-theme/cms/settings.scss | 4 +- .../default-theme/components/SwAddress.vue | 2 - .../components/SwCheckoutMethod.vue | 2 - packages/default-theme/components/SwLogin.vue | 4 +- .../components/SwOrderDetails.vue | 2 +- .../components/SwOrderDetailsItem.vue | 2 - .../components/SwPersonalDetails.vue | 2 - .../default-theme/components/SwTotals.vue | 2 +- .../components/account/orders/Order.vue | 1 - .../steps/user/ShippingAddressUserForm.vue | 6 +- .../{SwAddress.vue => SwAddressForm.vue} | 2 +- .../pages/_lang/account/addresses/add/_id.vue | 6 +- .../_lang/account/addresses/add/index.vue | 6 +- .../pages/_lang/account/orders/index.vue | 1 - packages/default-theme/pages/_lang/search.vue | 2 +- .../__tests__/addThemeLayouts.spec.ts | 84 ---- .../__tests__/extendComponents.spec.ts | 79 ---- .../nuxt-module/__tests__/getAllFiles.spec.ts | 2 +- packages/nuxt-module/__tests__/module.spec.ts | 186 +++++--- .../__tests__/overrideRoutes.spec.ts | 2 +- .../__tests__/useThemeAndProjectFiles.spec.ts | 261 +++++++++++ packages/nuxt-module/__tests__/utils.spec.ts | 26 +- packages/nuxt-module/package.json | 3 + packages/nuxt-module/src/components.ts | 37 -- packages/nuxt-module/src/index.ts | 4 +- packages/nuxt-module/src/layouts.ts | 27 -- packages/nuxt-module/src/module.ts | 102 ++++- packages/nuxt-module/src/packages.ts | 12 +- packages/nuxt-module/src/theme.ts | 94 ++++ packages/nuxt-module/src/utils.ts | 13 +- scripts/init.js | 2 +- yarn.lock | 411 +++++++++--------- 45 files changed, 927 insertions(+), 621 deletions(-) rename packages/default-theme/components/forms/{SwAddress.vue => SwAddressForm.vue} (99%) delete mode 100644 packages/nuxt-module/__tests__/addThemeLayouts.spec.ts delete mode 100644 packages/nuxt-module/__tests__/extendComponents.spec.ts create mode 100644 packages/nuxt-module/__tests__/useThemeAndProjectFiles.spec.ts delete mode 100644 packages/nuxt-module/src/components.ts delete mode 100644 packages/nuxt-module/src/layouts.ts create mode 100644 packages/nuxt-module/src/theme.ts diff --git a/docs/landing/getting-started/upgrade.md b/docs/landing/getting-started/upgrade.md index b3e0d78b..6ed6a0a1 100644 --- 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. \ No newline at end of file +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 index 1590eebf..10e24b3e 100644 --- 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 index e999dd76..a3c6341f 100644 --- 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 index f3ab6746..22fe8646 100644 --- 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 index 41d79a36..8a1aba6b 100644 --- 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 index 23275bd2..cc7bda56 100644 --- 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,20 +244,22 @@ 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: {}, }); } @@ -221,22 +267,12 @@ module.exports = (toolbox: GluegunToolbox) => { 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 index e61bbda6..18f84e01 100644 --- 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 index c1f651c6..9ad67191 100644 --- 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; -// } \ No newline at end of file +// } diff --git a/packages/cli/src/templates/variables.scss b/packages/cli/src/templates/variables.scss index 5b870492..443e4521 100644 --- 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; -// } \ No newline at end of file +// } diff --git a/packages/composables/src/internalHelpers/associationsParameter.ts b/packages/composables/src/internalHelpers/associationsParameter.ts index 4983c908..bf49f93c 100644 --- 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 index 77668436..f1d9e231 100644 --- 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 index 0743b8d7..8f85816d 100644 --- 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 index 1f6ae6fc..1ccbded5 100644 --- 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 index eb0d463f..3d36915e 100644 --- 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 index 56767714..24b355d6 100644 --- a/packages/default-theme/components/SwAddress.vue +++ b/packages/default-theme/components/SwAddress.vue @@ -54,8 +54,6 @@ export default {