feat(workflow): improve DX by triggering rebuild on changes (#937)

packages/cli/__tests__/buildPluginsMap.spec.ts

@@ -4,6 +4,9 @@ describe("CLI extensions - plugins - buildPluginsMap", () => {
     template: {
       generate: jest.fn(),
     },
+    runtime: {
+      run: jest.fn(),
+    },
   };
   beforeAll(() => {
     pluginsModule(toolbox);

packages/cli/__tests__/buildPluginsTrace.spec.ts

@@ -8,6 +8,9 @@ describe("CLI extensions - plugins - buildPluginsTrace", () => {
     print: {
       error: jest.fn(),
     },
+    runtime: {
+      run: jest.fn(),
+    },
   };
   beforeAll(() => {
     pluginsModule(toolbox);

packages/cli/package.json

@@ -31,6 +31,7 @@
   "license": "MIT",
   "dependencies": {
     "@shopware-pwa/shopware-6-client": "0.1.1",
+    "chokidar": "^3.4.0",
     "gluegun": "^4.3.1",
     "lodash": "^4.17.15",
     "request": "^2.88.2",

packages/cli/src/commands/build.ts

@@ -0,0 +1,25 @@
+import { GluegunCommand } from "gluegun";
+
+const command: GluegunCommand = {
+  name: "build",
+  description: "Build your project for production",
+  run: async (toolbox) => {
+    const {
+      system: { spawn },
+      print: { info },
+    } = toolbox;
+
+    info(`Starting Shopware PWA project building...`);
+
+    // initial config invoke
+    await toolbox.plugins.invokeRefreshPlugins(true);
+    await toolbox.cms.invokeRefreshCMS();
+    await toolbox.languages.invokeRefreshLanguages();
+
+    await spawn("yarn nuxt build", {
+      stdio: "inherit",
+    });
+  },
+};
+
+module.exports = command;

packages/cli/src/commands/dev.ts

@@ -9,22 +9,74 @@ const command: GluegunCommand = {
       print: { info },
     } = toolbox;
 
+    const path = require("path");
+    const chokidar = require("chokidar");
     const jetpack = require("fs-jetpack");
 
     info(`Starting Shopware PWA development project...`);
 
-    // toolbox.themeFolders.forEach((themeFolder) =>
-    //   toolbox.watchThemeFolder(themeFolder)
-    // );
+    // Watch locales
+    await jetpack.dirAsync("locales") // create folder if not exist
+    const localesWatchEvents = ["add", "change", "unlink"];
+    const locales = path.join("locales/*.json");
+    const localPLuginsLocales = path.join("sw-plugins/**/locales/*");
+    chokidar
+      .watch([locales, localPLuginsLocales], {
+        ignoreInitial: true,
+      })
+      .on("all", async (event) => {
+        if (localesWatchEvents.includes(event)) {
+          await toolbox.languages.invokeRefreshLanguages(true);
+        }
+      });
+
+    // Watch plugins
+    const pluginsWatchEvents = ["add", "change", "unlink"];
+    const localPluginsPath = path.join("sw-plugins");
+    chokidar
+      .watch([localPluginsPath], {
+        ignoreInitial: true,
+        ignored: "**/locales/*.json",
+      })
+      .on("all", async (event) => {
+        if (pluginsWatchEvents.includes(event)) {
+          await toolbox.plugins.invokeRefreshPlugins(true);
+          await toolbox.cms.invokeRefreshCMS();
+        }
+      });
 
-    // Refresh languages during local development
-    if (jetpack.exists("locales")) {
-      jetpack.watch("locales", { recursive: true }, async () => {
-        await toolbox.runtime.run(`languages`, { local: true });
+    // Watch CMS
+    const cmsWatchEvents = ["add", "change", "unlink"];
+    const cmsPath = path.join("cms");
+    chokidar
+      .watch([cmsPath], {
+        ignoreInitial: true,
+      })
+      .on("all", async (event) => {
+        if (cmsWatchEvents.includes(event)) {
+          toolbox.cms.invokeRefreshCMS();
+        }
       });
-    }
 
-    await spawn("yarn dev", {
+    // 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();
+
+    await spawn("yarn nuxt", {
       stdio: "inherit",
     });
   },

packages/cli/src/commands/languages.ts

@@ -108,6 +108,9 @@ module.exports = {
           endpoint: inputParameters.shopwareEndpoint,
           accessToken: inputParameters.shopwareAccessToken,
         });
+        apiClient.onConfigChange(() => {
+          // nothing to do for now
+        });
 
         const langs: any = await apiClient.getAvailableLanguages();
         langs.forEach((lang) => {

packages/cli/src/commands/plugins.ts

@@ -49,7 +49,7 @@ module.exports = {
     const generateFilesSpinner = spin("Generating plugins files");
 
     // remove plugin files
-    await toolbox.filesystem.removeAsync(`.shopware-pwa/sw-plugins`);
+    // await toolbox.filesystem.removeAsync(`.shopware-pwa/sw-plugins`);
 
     await generate({
       template: "/plugins/usePlugins.js",
@@ -104,7 +104,11 @@ module.exports = {
       },
     });
 
-    await toolbox.runtime.run(`languages`, inputParameters);
+    const langParams = {
+      local: true,
+      ...inputParameters
+    }
+    await toolbox?.runtime?.run(`languages`, langParams);
 
     success(`Plugins generated`);
   },

packages/cli/src/extensions/cms-extensions.ts

@@ -3,6 +3,18 @@ import { join, resolve } from "path";
 import { merge } from "lodash";
 
 module.exports = (toolbox: GluegunToolbox) => {
+  toolbox.cms = {};
+
+  let runningRefreshCms: boolean = false;
+  toolbox.cms.invokeRefreshCMS = async () => {
+    if (runningRefreshCms) {
+      return;
+    }
+    runningRefreshCms = true;
+    await toolbox?.runtime?.run(`cms`, {});
+    runningRefreshCms = false;
+  };
+
   toolbox.resolveCms = async (directoryPath, aliases, cmsComponentsMap) => {
     // Read cmsMap.json file in cms folder, every cms folder should contain one
     const readedMap = await toolbox.filesystem.readAsync(

packages/cli/src/extensions/languages-extensions.ts

@@ -20,10 +20,14 @@ module.exports = (toolbox: GluegunToolbox) => {
     );
     const resultMap = {};
     languageKeys.forEach((languageKey) => {
-      resultMap[languageKey] = toolbox.filesystem.read(
-        path.join(directoryPath, languageKey),
-        "json"
-      );
+      try {
+        resultMap[languageKey] = toolbox.filesystem.read(
+          path.join(directoryPath, languageKey),
+          "json"
+        );
+      } catch (e) {
+        console.warn("Language file " + languageKey + " is not a proper JSON");
+      }
     });
     return resultMap;
   };
@@ -58,4 +62,16 @@ module.exports = (toolbox: GluegunToolbox) => {
     }
     return localesPaths;
   };
+
+  let runningRefreshLanguages: boolean = false;
+  toolbox.languages.invokeRefreshLanguages = async (
+    isLocal: boolean = false
+  ) => {
+    if (runningRefreshLanguages) {
+      return;
+    }
+    runningRefreshLanguages = true;
+    await toolbox?.runtime?.run(`languages`, { local: isLocal });
+    runningRefreshLanguages = false;
+  };
 };

packages/cli/src/extensions/nuxt-extension.ts

@@ -71,6 +71,8 @@ module.exports = (toolbox: GluegunToolbox) => {
 
     await toolbox.patching.update("package.json", (config) => {
       config.scripts.lint = "prettier --write '*.{js,vue}'";
+      config.scripts.dev = "shopware-pwa dev";
+      config.scripts.build = "shopware-pwa build";
 
       // update versions to canary
       if (canary) {

packages/cli/src/extensions/plugins-extensions.ts

@@ -5,6 +5,16 @@ import { join } from "path";
 module.exports = (toolbox: GluegunToolbox) => {
   toolbox.plugins = {};
 
+  let runningRefreshPlugins: boolean = false;
+  toolbox.plugins.invokeRefreshPlugins = async (devMode: boolean = false) => {
+    if (runningRefreshPlugins) {
+      return;
+    }
+    runningRefreshPlugins = true;
+    await toolbox?.runtime?.run(`plugins`, { ci: true, devMode });
+    runningRefreshPlugins = false;
+  };
+
   toolbox.plugins.getPluginsConfig = async (
     options: {
       localPlugins?: boolean;

packages/default-theme/components/SwBottomNavigation.vue

@@ -118,7 +118,7 @@ import {
 import SwCurrencySwitcher from "@shopware-pwa/default-theme/components/SwCurrencySwitcher"
 import { onMounted } from "@vue/composition-api"
 import SwButton from "@shopware-pwa/default-theme/components/atoms/SwButton"
-import { PAGE_ACCOUNT } from "../helpers/pages"
+import { PAGE_ACCOUNT } from "@shopware-pwa/default-theme/helpers/pages"
 
 export default {
   name: "SwBottomNavigation",