Merge branch 'master' into alpha

Author: sebastiandg7

.github/workflows/run-e2e.yml renamed to .github/workflows/e2e.yml

@@ -1,4 +1,4 @@
-name: Run e2e tests
+name: e2e
 
 on:
   push:

LICENSE

@@ -1,6 +1,6 @@
 (The MIT License)
 
-Copyright (c) 2020 Trafilea.
+Copyright (c) 2021 Trafilea.
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

README.md

@@ -15,7 +15,7 @@
 
 <div align="center">
 
-[![documentation](https://github.com/trafilea/nx-shopify/workflows/documentation/badge.svg)](https://trafilea.github.io/nx-shopify/)
+[![e2e](https://github.com/trafilea/nx-shopify/actions/workflows/e2e.yml/badge.svg)](https://github.com/trafilea/nx-shopify/actions/workflows/e2e.yml)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 [![License](https://img.shields.io/github/license/trafilea/nx-shopify)](https://github.com/trafilea/nx-shopify/blob/master/LICENSE)
 ![npm (scoped)](https://img.shields.io/npm/v/@trafilea/nx-shopify)

package.json

@@ -34,8 +34,8 @@
   "dependencies": {
     "@angular-devkit/architect": "~0.1100.1",
     "@angular-devkit/build-webpack": "~0.1100.1",
-    "@nrwl/devkit": "11.2.12",
-    "@nrwl/workspace": "11.2.12",
+    "@nrwl/devkit": "11.4.0",
+    "@nrwl/workspace": "11.4.0",
     "@shopify/themekit": "^1.1.7",
     "browser-sync": "^2.26.14",
     "camelcase-keys": "^6.2.2",
@@ -75,11 +75,11 @@
     "webpack-merge": "5"
   },
   "devDependencies": {
-    "@nrwl/cli": "11.2.12",
-    "@nrwl/eslint-plugin-nx": "11.2.12",
-    "@nrwl/jest": "11.2.12",
-    "@nrwl/nx-plugin": "11.2.12",
-    "@nrwl/tao": "11.2.12",
+    "@nrwl/cli": "11.4.0",
+    "@nrwl/eslint-plugin-nx": "11.4.0",
+    "@nrwl/jest": "11.4.0",
+    "@nrwl/nx-plugin": "11.4.0",
+    "@nrwl/tao": "11.4.0",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/git": "^9.0.0",
     "@types/browser-sync": "^2.26.1",

packages/nx-shopify/src/executors/serve/local-assets-server/local-assets-server.ts

@@ -4,51 +4,66 @@ import * as figures from 'figures';
 import { createServer } from 'https';
 import * as ora from 'ora';
 import * as webpack from 'webpack';
-import { Compiler as WebpackCompiler, Stats as WebpackStats } from 'webpack';
-import { ThemekitEnvironmentConfig } from '../../../utils/themekit';
+import {
+  Compiler as WebpackCompiler,
+  Configuration as WebpackConfiguration,
+  Stats as WebpackStats,
+} from 'webpack';
+import {
+  ThemekitEnvironmentConfig,
+  ThemeKitFlags,
+} from '../../../utils/themekit';
 import { isHotUpdateFile } from '../../../webpack/utils';
 import { LocalDevelopmentServer } from '../local-development-server';
-import { ShopifySyncClient } from './shopify-sync/shopify-sync-client';
 import {
   getSslKeyCert,
   SslKeyCert,
 } from '../local-development-server/ssl/server-ssl';
 import { ServeExecutorSchema } from '../schema';
 import { AssetsServerApp } from './assets-server-app';
+import { ShopifySyncClient } from './shopify-sync/shopify-sync-client';
 
 const spinner = ora(chalk.magenta(' Compiling...'));
-export class LocalAssetServer {
-  assetHashes;
+
+export interface LocalAssetServerConfig {
   address: string;
-  options;
+  allowLive: boolean;
+  devServer: LocalDevelopmentServer;
   port: number;
+  themekitEnvConfig: ThemekitEnvironmentConfig;
+  skipFirstDeploy: boolean;
+  webpackConfig: WebpackConfiguration;
+}
+export class LocalAssetServer {
+  assetHashes;
+  config: LocalAssetServerConfig;
   webpackCompiler: WebpackCompiler;
   assetsServerApp: AssetsServerApp;
   shopifySyncClient: ShopifySyncClient;
   ssl: SslKeyCert;
   httpsServer;
-  firstSync: boolean;
+  isFirstSync: boolean;
   devServer: LocalDevelopmentServer;
-  themekitEnvConfig: ThemekitEnvironmentConfig;
+  themekitFlags: ThemeKitFlags;
 
-  constructor(options) {
-    const { devServer, address, port, themekitEnvConfig } = options;
+  constructor(config: LocalAssetServerConfig) {
+    const { devServer, address, port, webpackConfig, allowLive } = config;
 
-    options.webpackConfig.output.publicPath = `https://${address}:${port}/`;
+    config.webpackConfig.output.publicPath = `https://${address}:${port}/`;
+    this.config = config;
     this.assetHashes = {};
-    this.address = address;
-    this.options = options;
-    this.port = options.port;
-    this.themekitEnvConfig = themekitEnvConfig;
-    this.webpackCompiler = webpack(options.webpackConfig);
+    this.webpackCompiler = webpack(webpackConfig);
     this.assetsServerApp = new AssetsServerApp(this.webpackCompiler);
     this.shopifySyncClient = new ShopifySyncClient();
     this.shopifySyncClient.hooks.afterSync.tap(
       'HotMiddleWare',
       this.onAfterSync.bind(this)
     );
-    this.firstSync = true;
+    this.isFirstSync = true;
     this.devServer = devServer;
+    this.themekitFlags = {
+      allowLive,
+    };
   }
 
   start(options: ServeExecutorSchema) {
@@ -59,7 +74,7 @@ export class LocalAssetServer {
     this.webpackCompiler.hooks.done.tap('CLI', this.onCompilerDone.bind(this));
     this.shopifySyncClient.hooks.beforeSync.tapPromise(
       'CLI',
-      this.onClientBeforeSync(options).bind(this)
+      this.onClientBeforeSync().bind(this)
     );
     this.shopifySyncClient.hooks.syncSkipped.tap(
       'CLI',
@@ -85,7 +100,7 @@ export class LocalAssetServer {
       this.assetsServerApp.buildServer()
     );
 
-    this.httpsServer.listen(this.port);
+    this.httpsServer.listen(this.config.port);
   }
 
   set skipDeploy(value: boolean) {
@@ -94,7 +109,11 @@ export class LocalAssetServer {
 
   private onCompileDone(stats: WebpackStats) {
     const files = this._getAssetsToUpload(stats);
-    return this.shopifySyncClient.syncChangedFiles(files, stats);
+    return this.shopifySyncClient.syncChangedFiles(
+      files,
+      stats,
+      this.themekitFlags
+    );
   }
 
   private onAfterSync(files: string[]) {
@@ -187,11 +206,11 @@ export class LocalAssetServer {
     }
   }
 
-  onClientBeforeSync(options: ServeExecutorSchema) {
+  onClientBeforeSync() {
     return async (files: string[]) => {
       const themeID = 'getThemeIdValue()';
 
-      if (this.firstSync && options.skipFirstDeploy) {
+      if (this.isFirstSync && this.config.skipFirstDeploy) {
         this.skipDeploy = true;
 
         return;
@@ -225,7 +244,7 @@ export class LocalAssetServer {
 
   onClientSyncSkipped(options: ServeExecutorSchema) {
     return () => {
-      if (!(this.firstSync && options.skipFirstDeploy)) return;
+      if (!(this.isFirstSync && options.skipFirstDeploy)) return;
       console.log(
         `\n${chalk.blue(
           figures.info
@@ -246,8 +265,8 @@ export class LocalAssetServer {
   }
 
   async onClientAfterSync() {
-    if (this.firstSync) {
-      this.firstSync = false;
+    if (this.isFirstSync) {
+      this.isFirstSync = false;
       await this.devServer.start();
     }
 
@@ -257,10 +276,11 @@ export class LocalAssetServer {
       `${chalk.yellow(
         figures.star
       )}  You are editing files in theme ${chalk.green(
-        this.themekitEnvConfig.themeId
+        this.config.themekitEnvConfig.themeId
       )} on the following store:\n`
     );
 
+    const { address, port } = this.config;
     const { target, themeId } = this.devServer;
 
     const previewUrl = `${target}?preview_theme_id=${themeId}`;
@@ -282,16 +302,16 @@ export class LocalAssetServer {
     console.log(`   Assets are being served from:\n`);
 
     console.log(
-      `      ${chalk.cyan(`https://localhost:${this.port}`)} ${chalk.grey(
+      `      ${chalk.cyan(`https://localhost:${port}`)} ${chalk.grey(
         '(Local)'
       )}`
     );
 
-    if (this.address !== 'localhost') {
+    if (address !== 'localhost') {
       console.log(
-        `      ${chalk.cyan(
-          `https://${this.address}:${this.port}`
-        )} ${chalk.grey('(External)')}`
+        `      ${chalk.cyan(`https://${address}:${port}`)} ${chalk.grey(
+          '(External)'
+        )}`
       );
     }
 

packages/nx-shopify/src/executors/serve/local-assets-server/shopify-sync/shopify-sync-client.ts

@@ -27,7 +27,11 @@ export class ShopifySyncClient {
     this.filesPendingDeploy = [];
   }
 
-  async syncChangedFiles(changedFiles: string[], stats: WebpackStats) {
+  async syncChangedFiles(
+    changedFiles: string[],
+    stats: WebpackStats,
+    themekitFlags: ThemeKitFlags
+  ) {
     if (this.isDeploymentInProgress) {
       this.filesPendingDeploy = [
         ...new Set([...this.filesPendingDeploy, ...changedFiles]),
@@ -50,7 +54,7 @@ export class ShopifySyncClient {
         outputOptions: { path: outputPath },
       } = stats.compilation;
 
-      await this.deployPendingFiles(outputPath);
+      await this.deployPendingFiles(outputPath, themekitFlags);
       this.skipNextSync = false;
       this.hooks.syncDone.call(changedFiles, stats);
     }
@@ -60,8 +64,12 @@ export class ShopifySyncClient {
     this.skipNextSync = false;
   }
 
-  async deployPendingFiles(compiledOutputPath: string) {
+  async deployPendingFiles(
+    compiledOutputPath: string,
+    themekitFlags: ThemeKitFlags
+  ) {
     const flags: ThemeKitFlags = {
+      ...themekitFlags,
       files: this.filesPendingDeploy,
     };
 

packages/nx-shopify/src/executors/serve/local-development-server/local-development-server.ts

@@ -12,6 +12,7 @@ export interface LocalDevelopmentServerOptions {
   address: string;
   port: number;
   uiPort: number;
+  openBrowser: boolean;
 }
 
 export class LocalDevelopmentServer {
@@ -23,17 +24,21 @@ export class LocalDevelopmentServer {
   proxyTarget: string;
   browserSyncInstance: BrowserSyncInstance;
   browserSyncServer: BrowserSyncInstance;
+  openBrowser: boolean;
 
   constructor(options: LocalDevelopmentServerOptions) {
+    const { target, themeId, port, address, uiPort, openBrowser } = options;
+
     this.browserSyncInstance = browserSync.create();
-    this.target = `https://${options.target}`;
-    this.themeId = options.themeId;
-    this.port = options.port;
-    this.address = options.address;
-    this.uiPort = options.uiPort;
+    this.target = `https://${target}`;
+    this.themeId = themeId;
+    this.port = port;
+    this.address = address;
+    this.uiPort = uiPort;
     this.proxyTarget =
       this.target +
       (this.themeId === 'live' ? '' : `?preview_theme_id=${this.themeId}`);
+    this.openBrowser = openBrowser;
   }
 
   start() {
@@ -68,7 +73,7 @@ export class LocalDevelopmentServer {
       ui: {
         port: this.uiPort,
       },
-      open: false,
+      open: this.openBrowser,
     };
 
     return new Promise((resolve) => {

packages/nx-shopify/src/executors/serve/schema.json

@@ -16,7 +16,7 @@
     },
     "themekitEnv": {
       "type": "string",
-      "description": "Name of the themekit config.yml environment to be used in the deployment ('development' by default)",
+      "description": "Name of the themekit config.yml environment to be used in the deployment",
       "default": "development"
     },
     "allowLive": {