feat(workflow): use esbuild to speed up development process (#1025)

api-extractor.json

@@ -2,6 +2,8 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
 
+  "projectFolder": ".",
+
   "apiReport": {
     "enabled": true,
     "reportFolder": "<projectFolder>/api/"

package.json

@@ -13,10 +13,10 @@
   "scripts": {
     "start": "yarn && yarn build --ci && node scripts/init.js",
     "dev": "node scripts/dev.js",
-    "dev:client": "yarn dev shopware-6-client -format=esm-bundler",
-    "dev:composables": "yarn dev composables -format=esm-bundler",
-    "dev:helpers": "yarn dev helpers -format=esm-bundler",
-    "dev:nuxt-module": "yarn dev nuxt-module -format=cjs",
+    "dev:client": "yarn dev shopware-6-client",
+    "dev:composables": "yarn dev composables",
+    "dev:helpers": "yarn dev helpers",
+    "dev:nuxt-module": "yarn dev nuxt-module",
     "dev:debug": "node --inspect scripts/dev.js",
     "build": "node scripts/build.js",
     "postinstall": "node scripts/linkDependencies.js && lerna link",
@@ -60,10 +60,12 @@
     "axios": "^0.19.2",
     "brotli": "^1.3.2",
     "chalk": "^4.1.0",
+    "chokidar": "^3.4.2",
     "conventional-changelog-cli": "^2.1.0",
     "coveralls": "^3.1.0",
     "cypress": "^4.12.1",
     "enquirer": "^2.3.6",
+    "esbuild": "^0.6.22",
     "execa": "^4.0.3",
     "faker": "^4.1.0",
     "fs-extra": "^9.0.1",

packages/cli/scripts/esbuild.js

@@ -0,0 +1,51 @@
+const jetpack = require("fs-jetpack");
+const path = require("path");
+const { build: esBuild } = require("esbuild");
+
+function getAllFiles(dirPath, arrayOfFiles = [], excludeHidden = true) {
+  if (!dirPath || !jetpack.exists(dirPath)) return [];
+  const files = jetpack.list(dirPath);
+  files.forEach((file) => {
+    if (jetpack.exists(path.join(dirPath, file)) === "dir") {
+      arrayOfFiles = getAllFiles(path.join(dirPath, file), arrayOfFiles);
+    } else {
+      const fileName = path.join(dirPath, file).replace(__dirname + "/", "");
+      if (!(excludeHidden && file.startsWith("."))) {
+        arrayOfFiles.push(path.normalize(fileName));
+      }
+    }
+  });
+
+  return arrayOfFiles;
+}
+
+async function runBuild(packageJson) {
+  try {
+    const files = getAllFiles(
+      path.join(__dirname, "..", "src")
+    ).filter((filePath) => filePath.endsWith(".ts"));
+    const external = Object.keys(packageJson.dependencies);
+    await esBuild({
+      entryPoints: files,
+      outdir: "build",
+      minify: false,
+      bundle: true,
+      external,
+      platform: "node",
+      target: "node10",
+      format: "cjs",
+      tsconfig: path.join(__dirname, "..", "tsconfig.json"),
+    });
+    return true;
+  } catch (e) {
+    console.error("Error building CLI", e);
+    return false;
+  }
+}
+
+async function run() {
+  jetpack.remove("./build");
+  const pkg = require(path.join(__dirname, "..", "package.json"));
+  await runBuild(pkg);
+}
+run();

packages/composables/package.json

@@ -3,7 +3,7 @@
   "version": "0.3.1",
   "description": "@shopware-pwa/composables",
   "main": "dist/composables.cjs.js",
-  "module": "dist/composables.esm-bundler.js",
+  "module": "dist/composables.esm.js",
   "files": [
     "dist"
   ],
@@ -17,7 +17,7 @@
   "buildOptions": {
     "name": "composables",
     "formats": [
-      "esm-bundler",
+      "esm",
       "cjs"
     ]
   },

packages/composables/src/hooks/useProductSearch.ts

@@ -1,5 +1,5 @@
 import { ref, Ref, computed, reactive } from "@vue/composition-api";
-import queryString from "query-string";
+import { parse } from "query-string";
 import {
   getSuggestedResults,
   getSearchResults,
@@ -159,7 +159,7 @@ export const useProductSearch = (
 
   const captureQueryParams = () => {
     /* istanbul ignore next */
-    const criteriaQueryParams: ListingQueryParams | any = queryString.parse(
+    const criteriaQueryParams: ListingQueryParams | any = parse(
       window?.location?.search,
       {
         parseNumbers: true,

packages/composables/src/internalHelpers/associationsParameter.ts

@@ -1,7 +1,7 @@
 /**
  * A collection of performance set of association parameters
  */
-import apiParams from "@shopware-pwa/composables/src/api-params.json";
+import * as apiParams from "@shopware-pwa/composables/src/api-params.json";
 
 /**
  * Gets the right associations parameter for given entity type

packages/composables/src/internalHelpers/includesParameter.ts

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

packages/composables/src/internalHelpers/searchCriteria.ts

@@ -1,4 +1,4 @@
-import queryString from "query-string";
+import { stringify } from "query-string";
 import {
   ListingQueryParams,
   SearchCriteria,
@@ -26,7 +26,7 @@ export function appendSearchCriteriaToUrl(
     manufacturer: manufacturer,
     properties: properties,
   };
-  const combinedURL = queryString.stringify(query, {
+  const combinedURL = stringify(query, {
     arrayFormat: "separator",
     arrayFormatSeparator: "|",
     skipNull: true,

packages/composables/tsconfig-composables.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*"],
+  "files": ["src/index.ts"],
+  "compilerOptions": {
+    "outDir": "./dist/"
+  }
+}

packages/helpers/package.json

@@ -3,7 +3,7 @@
   "version": "0.3.1",
   "description": "@shopware-pwa/helpers",
   "main": "dist/helpers.cjs.js",
-  "module": "dist/helpers.esm-bundler.js",
+  "module": "dist/helpers.esm.js",
   "files": [
     "dist"
   ],
@@ -17,7 +17,7 @@
   "buildOptions": {
     "name": "helpers",
     "formats": [
-      "esm-bundler",
+      "esm",
       "cjs"
     ]
   },

packages/helpers/tsconfig-helpers.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*"],
+  "files": ["src/index.ts"],
+  "compilerOptions": {
+    "outDir": "./dist/"
+  }
+}

packages/nuxt-module/package.json

@@ -3,7 +3,6 @@
   "version": "0.3.1",
   "description": "@shopware-pwa/nuxt-module",
   "main": "dist/nuxt-module.cjs.js",
-  "module": "dist/nuxt-module.esm-bundler.js",
   "files": [
     "dist",
     "plugins/*"
@@ -36,6 +35,12 @@
   "publishConfig": {
     "access": "public"
   },
+  "buildOptions": {
+    "name": "nuxt-module",
+    "formats": [
+      "cjs"
+    ]
+  },
   "scripts": {
     "snyk-protect": "snyk protect"
   },

packages/nuxt-module/src/packages.ts

@@ -1,4 +1,5 @@
 import path from "path";
+import jetpack from "fs-jetpack";
 import { NuxtModuleOptions, WebpackConfig } from "./interfaces";
 
 /* istanbul ignore next */
@@ -8,7 +9,7 @@ export function useCorePackages(
 ) {
   const useRawSource = (packageName: string) => {
     const pkgPath = path.resolve(path.join("node_modules", packageName));
-    const pkg = require(path.join(pkgPath, "package.json"));
+    const pkg = jetpack.read(path.join(pkgPath, "package.json"), "json");
 
     if (pkg.module) {
       moduleObject.extendBuild((config: WebpackConfig) => {

packages/nuxt-module/tsconfig-nuxt-module.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*"],
+  "files": ["src/index.ts"],
+  "compilerOptions": {
+    "outDir": "./dist/"
+  }
+}

packages/shopware-6-client/package.json

@@ -3,7 +3,7 @@
   "version": "0.3.1",
   "description": "Rest API client for Shopware 6.",
   "main": "dist/shopware-6-client.cjs.js",
-  "module": "dist/shopware-6-client.esm-bundler.js",
+  "module": "dist/shopware-6-client.esm.js",
   "files": [
     "dist"
   ],
@@ -17,7 +17,7 @@
   "buildOptions": {
     "name": "Shopware6Client",
     "formats": [
-      "esm-bundler",
+      "esm",
       "cjs"
     ]
   },

packages/shopware-6-client/tsconfig-shopware-6-client.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*"],
+  "files": ["src/index.ts"],
+  "compilerOptions": {
+    "outDir": "./dist/"
+  }
+}

rollup.config.js

@@ -19,8 +19,8 @@ const packageOptions = pkg.buildOptions || {};
 let hasTSChecked = false;
 
 const outputConfigs = {
-  "esm-bundler": {
-    file: resolve(`dist/${name}.esm-bundler.js`),
+  esm: {
+    file: resolve(`dist/${name}.esm.js`),
     format: `es`,
   },
   cjs: {
@@ -37,7 +37,7 @@ const outputConfigs = {
   },
 };
 
-const defaultFormats = ["esm-bundler", "cjs"];
+const defaultFormats = ["esm", "cjs"];
 const inlineFormats = process.env.FORMATS && process.env.FORMATS.split(",");
 const packageFormats =
   inlineFormats || packageOptions.formats || defaultFormats;
@@ -72,7 +72,7 @@ function createConfig(format, output, plugins = []) {
   const isGlobalBuild = /global/.test(format);
   const isRawESMBuild = format === "esm";
   const isNodeBuild = format === "cjs";
-  const isBundlerESMBuild = /esm-bundler/.test(format);
+  const isBundlerESMBuild = /esm/.test(format);
 
   if (isGlobalBuild) {
     output.name = packageOptions.name;

scripts/bootstrap.js

@@ -29,7 +29,7 @@ files.forEach((shortName) => {
       version: baseVersion,
       description: name,
       main: `dist/${shortName}.cjs.js`,
-      module: `dist/${shortName}.esm-bundler.js`,
+      module: `dist/${shortName}.esm.js`,
       files: [`dist`],
       types: `dist/${shortName}.d.ts`,
       unpkg: `dist/${shortName}.global.js`,