feat(build): add basic build impl with minimum config

e2e/nx-shopify-e2e/tests/nx-shopify.test.ts

@@ -9,12 +9,10 @@ describe('nx-shopify e2e', () => {
   it('should create nx-shopify', async (done) => {
     const plugin = uniq('nx-shopify');
     ensureNxProject('@trafilea/nx-shopify', 'dist/packages/nx-shopify');
-    await runNxCommandAsync(
-      `generate @trafilea/nx-shopify:nx-shopify ${plugin}`
-    );
+    await runNxCommandAsync(`generate @trafilea/nx-shopify:theme ${plugin}`);
 
     const result = await runNxCommandAsync(`build ${plugin}`);
-    expect(result.stdout).toContain('Builder ran');
+    expect(result.stdout).toContain('Successfully built');
 
     done();
   });
@@ -24,10 +22,10 @@ describe('nx-shopify e2e', () => {
       const plugin = uniq('nx-shopify');
       ensureNxProject('@trafilea/nx-shopify', 'dist/packages/nx-shopify');
       await runNxCommandAsync(
-        `generate @trafilea/nx-shopify:nx-shopify ${plugin} --directory subdir`
+        `generate @trafilea/nx-shopify:theme ${plugin} --directory subdir`
       );
       expect(() =>
-        checkFilesExist(`libs/subdir/${plugin}/src/index.ts`)
+        checkFilesExist(`apps/subdir/${plugin}/config.yml`)
       ).not.toThrow();
       done();
     });
@@ -38,7 +36,7 @@ describe('nx-shopify e2e', () => {
       const plugin = uniq('nx-shopify');
       ensureNxProject('@trafilea/nx-shopify', 'dist/packages/nx-shopify');
       await runNxCommandAsync(
-        `generate @trafilea/nx-shopify:nx-shopify ${plugin} --tags e2etag,e2ePackage`
+        `generate @trafilea/nx-shopify:theme ${plugin} --tags e2etag,e2ePackage`
       );
       const nxJson = readJson('nx.json');
       expect(nxJson.projects[plugin].tags).toEqual(['e2etag', 'e2ePackage']);

package.json

@@ -26,7 +26,18 @@
     "help": "nx help"
   },
   "private": true,
-  "dependencies": {},
+  "dependencies": {
+    "@angular-devkit/build-webpack": "^0.1001.7",
+    "@shopify/themekit": "^1.1.6",
+    "circular-dependency-plugin": "^5.2.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^6.2.1",
+    "fork-ts-checker-webpack-plugin": "^5.2.0",
+    "tsconfig-paths-webpack-plugin": "^3.3.0",
+    "webpack": "4",
+    "webpack-dev-server": "^3.11.0",
+    "webpack-merge": "5"
+  },
   "devDependencies": {
     "@nrwl/cli": "10.3.1",
     "@nrwl/eslint-plugin-nx": "10.3.1",

packages/nx-shopify/collection.json

@@ -3,10 +3,10 @@
   "name": "nx-shopify",
   "version": "0.0.1",
   "schematics": {
-    "nx-shopify": {
-      "factory": "./src/schematics/nx-shopify/schematic",
-      "schema": "./src/schematics/nx-shopify/schema.json",
-      "description": "nx-shopify schematic"
+    "theme": {
+      "factory": "./src/schematics/theme/schematic",
+      "schema": "./src/schematics/theme/schema.json",
+      "description": "theme schematic"
     }
   }
 }

packages/nx-shopify/src/builders/build/builder.spec.ts

@@ -2,9 +2,9 @@ import { Architect } from '@angular-devkit/architect';
 import { TestingArchitectHost } from '@angular-devkit/architect/testing';
 import { schema } from '@angular-devkit/core';
 import { join } from 'path';
-import { BuildBuilderSchema } from './schema';
+import { BuildBuilderOptions } from './schema';
 
-const options: BuildBuilderSchema = {};
+const options: BuildBuilderOptions = {};
 
 describe('Command Runner Builder', () => {
   let architect: Architect;

packages/nx-shopify/src/builders/build/builder.ts

@@ -3,17 +3,54 @@ import {
   BuilderOutput,
   createBuilder,
 } from '@angular-devkit/architect';
-import { Observable, of } from 'rxjs';
-import { tap } from 'rxjs/operators';
-import { BuildBuilderSchema } from './schema';
+import { runWebpack } from '@angular-devkit/build-webpack';
+import { from, Observable } from 'rxjs';
+import { concatMap, map, tap } from 'rxjs/operators';
+import { deleteOutputDir } from '../../utils/output-dir-utils';
+import { normalizeBuildOptions } from '../../utils/normalize-utils';
+import { getSourceRoot } from '../../utils/workspace-utils';
+import { getShopifyWebpackConfig } from '../../webpack/configs/shopify.config';
+import { BuildBuilderOptions } from './schema';
 
 export function runBuilder(
-  options: BuildBuilderSchema,
+  options: BuildBuilderOptions,
   context: BuilderContext
 ): Observable<BuilderOutput> {
-  return of({ success: true }).pipe(
+  const projectName = context.target?.project;
+  if (!projectName) {
+    throw new Error('The builder requires a target.');
+  }
+
+  // Delete output path before bundling
+  deleteOutputDir(context.workspaceRoot, options.outputPath);
+
+  return from(getSourceRoot(context)).pipe(
+    map((sourceRoot) =>
+      normalizeBuildOptions(options, context.workspaceRoot, sourceRoot)
+    ),
+    map((normalizedOptions) => {
+      let webpackConfig = getShopifyWebpackConfig(normalizedOptions);
+      if (normalizedOptions.webpackConfig) {
+        webpackConfig = require(normalizedOptions.webpackConfig)(
+          webpackConfig,
+          {
+            options: normalizedOptions,
+            configuration: context.target.configuration,
+          }
+        );
+      }
+      return webpackConfig;
+    }),
+    concatMap((webpackConfig) =>
+      runWebpack(webpackConfig, context, {
+        logging: (stats) => {
+          context.logger.info(stats.toString(webpackConfig.stats));
+        },
+        webpackFactory: require('webpack'),
+      })
+    ),
     tap(() => {
-      context.logger.info('Builder ran for build');
+      context.logger.info(`🎉 Successfully built ${projectName} theme\n`);
     })
   );
 }

packages/nx-shopify/src/builders/build/schema.d.ts

@@ -1,3 +1,40 @@
 import { JsonObject } from '@angular-devkit/core';
 
-export interface BuildBuilderSchema extends JsonObject {} // eslint-disable-line
+export interface AssetObj {
+  input: string;
+  output: string;
+  glob: string;
+  ignore?: string;
+}
+
+export type Asset = string | AssetObj;
+export interface BuildBuilderOptions extends JsonObject {
+  outputPath: string;
+  tsConfig: string;
+  themekitConfig: string;
+
+  watch?: boolean;
+  sourceMap?: boolean | SourceMapOptions;
+  optimization?: boolean | OptimizationOptions;
+  showCircularDependencies?: boolean;
+  memoryLimit?: number;
+  poll?: number;
+
+  fileReplacements?: FileReplacement[];
+  assets?: Array<Asset>;
+
+  progress?: boolean;
+  statsJson?: boolean;
+  extractLicenses?: boolean;
+  verbose?: boolean;
+
+  webpackConfig?: string;
+
+  root?: string;
+  sourceRoot?: Path;
+}
+
+export interface FileReplacement {
+  replace: string;
+  with: string;
+}

packages/nx-shopify/src/schematics/theme/files/__dot__gitignore.template

@@ -0,0 +1,4 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Shopify config file
+config.yml

packages/nx-shopify/src/schematics/theme/files/config.yml.template

@@ -0,0 +1,11 @@
+# See https://shopify.github.io/themekit/configuration/ for more about this config file.
+
+development:
+    password: <your_password>
+    theme_id: "<your_theme_id>"
+    store: <you_store_name>.myshopify.com
+
+production:
+    password: <your_password>
+    theme_id: "<your_theme_id>"
+    store: <you_store_name>.myshopify.com

packages/nx-shopify/src/schematics/theme/files/package.json.template

@@ -0,0 +1,17 @@
+{
+  "name": "nx-shopify-src-structure",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "tsc": "tsc -p tsconfig.app.json",
+    "webpack": "webpack"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "typescript": "^3.9.7",
+    "webpack": "^4.44.2"
+  }
+}

packages/nx-shopify/src/schematics/theme/files/src/config/settings_data.json.template

@@ -0,0 +1,6 @@
+{
+  "current": "Default",
+  "presets": {
+    "Default": {}
+  }
+}

packages/nx-shopify/src/schematics/theme/files/src/config/settings_schema.json.template

@@ -0,0 +1,10 @@
+[
+  {
+    "name": "theme_info",
+    "theme_name": "__className__",
+    "theme_version": "1.0.0",
+    "theme_author": "Shopify",
+    "theme_documentation_url": "https://github.com/trafilea/nx-shopify",
+    "theme_support_url": "https://github.com/trafilea/nx-shopify/issues"
+  }
+]

packages/nx-shopify/src/schematics/theme/files/src/environments/environment.prod.ts.template

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true,
+};

packages/nx-shopify/src/schematics/theme/files/src/environments/environment.ts.template

@@ -0,0 +1,3 @@
+export const environment = {
+  production: false,
+};

packages/nx-shopify/src/schematics/theme/files/src/locales/en.default.json.template

@@ -0,0 +1,8 @@
+{
+  "general": {
+    "404": {
+      "title": "Not found",
+      "subtext_html": "The page you were looking for does not exist"
+    }
+  }
+}

packages/nx-shopify/src/schematics/theme/files/src/theme/layout/theme.liquid.template

@@ -0,0 +1,46 @@
+<!doctype html>
+<html>
+<head>
+  <title>{{ page_title }}</title>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="description" content="{{ page_description | escape }}">
+  <link rel="canonical" href="{{ canonical_url }}">
+  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
+  {{ content_for_header }} <!-- Header hook for plugins -->
+</head>
+<body>
+
+  {% section 'header' %}
+
+  {% for link in linklists.main-menu.links %}
+    {% assign child_list_handle = link.title | handleize %}
+    {% if linklists[child_list_handle].links != blank %}
+      <a href="{{ link.url }}">{{ link.title }}</a>
+      [{% for childlink in linklists[child_list_handle].links %}
+        <a href="{{ childlink.url }}">{{ childlink.title | escape }}</a>
+      {% endfor %}]
+    {% else %}
+      <a href="{{ link.url }}">{{ link.title }}</a>
+    {% endif %}
+  {% endfor %}
+
+  <a href="/cart">cart</a>
+
+  {% if shop.customer_accounts_enabled %}
+    {% if customer %}
+      <a href="/account">account</a>
+      {{ 'log out'  | customer_logout_link }}
+    {% else %}
+      {{ 'log in ' | customer_login_link }}
+      {{ 'register' | customer_register_link }}
+    {% endif %}
+  {% endif %}
+
+  <main role="main">
+    {{ content_for_layout }}
+  </main>
+
+  {% section 'footer' %}
+</body>
+</html>

packages/nx-shopify/src/schematics/theme/files/src/theme/layout/theme.ts.template

@@ -0,0 +1 @@
+console.log('Hello from theme.ts! :)');