feat(build): inject generated js chunks into theme script tags

trafilea · Dec 15, 2020 · aa1bdab · aa1bdab
1 parent 628132a
commit aa1bdab
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 3 deletions.
diff --git a/packages/nx-shopify/src/schematics/theme/files/src/theme/layout/theme.liquid.template b/packages/nx-shopify/src/schematics/theme/files/src/theme/layout/theme.liquid.template
@@ -7,6 +7,10 @@
   <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">
+
+  {% include 'style-tags', layout: 'theme' %}
+  {% include 'script-tags', layout: 'theme' %}
+
   {{ content_for_header }} <!-- Header hook for plugins -->
 </head>
 <body>

diff --git a/packages/nx-shopify/src/webpack/configs/shopify.config.ts b/packages/nx-shopify/src/webpack/configs/shopify.config.ts
@@ -6,9 +6,7 @@ import * as webpackMerge from 'webpack-merge';
 import * as HTMLWebpackPlugin from 'html-webpack-plugin';
 import * as MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { BuildBuilderOptions } from '../../builders/build/schema';
-import {
-  getTemplateEntryPoints,
-} from '../utils/template-utils';
+import { getTemplateEntryPoints, getLayoutEntryPoints } from '../utils';
 import { getCommonWebpackPartialConfig } from './common.config';
 
 function getShopifyWebpackPartialConfig(options: BuildBuilderOptions) {
@@ -17,6 +15,7 @@ function getShopifyWebpackPartialConfig(options: BuildBuilderOptions) {
   const webpackConfig: Configuration = {
     entry: {
       ...getTemplateEntryPoints(sourceRoot),
+      ...getLayoutEntryPoints(sourceRoot),
     },
     output: {
       path: options.outputPath,
@@ -65,6 +64,24 @@ function getShopifyWebpackPartialConfig(options: BuildBuilderOptions) {
       new MiniCssExtractPlugin({
         filename: 'assets/[name].css',
       }),
+      new HTMLWebpackPlugin({
+        excludeChunks: ['static'],
+        filename: `snippets/script-tags.liquid`,
+        template: path.resolve(__dirname, 'templates', 'script-tags.html'),
+        inject: false,
+        minify: {
+          removeComments: true,
+          collapseWhitespace: true,
+          removeAttributeQuotes: false,
+          preserveLineBreaks: true,
+          // more options:
+          // https://github.com/kangax/html-minifier#options-quick-reference
+        },
+        // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+        chunksSortMode: 'auto',
+        liquidTemplates: getTemplateEntryPoints(sourceRoot),
+        liquidLayouts: getLayoutEntryPoints(sourceRoot),
+      }),
     ],
   };
   return webpackConfig;

diff --git a/packages/nx-shopify/src/webpack/configs/templates/script-tags.html b/packages/nx-shopify/src/webpack/configs/templates/script-tags.html
@@ -0,0 +1,43 @@
+<% for (var chunk in htmlWebpackPlugin.files.js) { %> <% if
+(htmlWebpackPlugin.options.isDevServer === true) { %> <% var src =
+htmlWebpackPlugin.files.js[chunk] %> <% } else { %> <% var templateName =
+htmlWebpackPlugin.files.js[chunk].split('/').reverse()[0].replace('.js',
+'').split('.')[1] %> <% var templateFull =
+htmlWebpackPlugin.files.js[chunk].split('/').reverse()[0].replace('.js', '') %>
+<% var basename = htmlWebpackPlugin.files.js[chunk].split('/').reverse()[0]; %>
+<% var src = `{{ '${basename}' | asset_url }}` %> <% } %> <% if (typeof
+htmlWebpackPlugin.options.liquidLayouts[templateFull] !== 'undefined') { %> {%-
+if layout == '<%= templateName %>' -%}
+<script type="text/javascript" src="<%= src %>" defer></script>
+{%- else -%}
+<link rel="prefetch" href="<%= src %>" as="script" />
+{%- endif -%} <% } else if (chunk.split('@').length > 1) { %> <% var pages =
+chunk.split('@') %> <% var conditions = [] %> <% pages.forEach(function(page){
+%> <% var pageTemplate = htmlWebpackPlugin.options.liquidTemplates[page] %> <%
+if (typeof pageTemplate !== 'undefined') { %> <% if
+(pageTemplate.includes('customers\\') || pageTemplate.includes('customers/')) {
+%> <% conditions.push("template == 'customers/" +
+page.split('.').slice(1).join('.') + "'") %> <% } else { %> <%
+conditions.push("template == '" + page.split('.').slice(1).join('.') + "'") %>
+<% } %> <% } else if (typeof htmlWebpackPlugin.options.liquidLayouts[page] !==
+'undefined') { %> <% conditions.push("layout == '" + page.split('.')[1] + "'")
+%> <% } %> <% }); %> {%- if <%= conditions.join(' or ') %> -%}
+<script type="text/javascript" src="<%= src %>" defer></script>
+{%- else -%}
+<link rel="prefetch" href="<%= src %>" as="script" />
+{%- endif -%} <% } else if (typeof
+htmlWebpackPlugin.options.liquidTemplates[templateFull] !== 'undefined') { %> <%
+var chunkTemplate = htmlWebpackPlugin.options.liquidTemplates[templateFull] %>
+<% if (chunkTemplate.includes('customers\\') ||
+chunkTemplate.includes('customers/')) { %> {%- if template == 'customers/<%=
+chunk.split('.').slice(1).join('.') %>' -%}
+<script type="text/javascript" src="<%= src %>" defer></script>
+{%- else -%}
+<link rel="prefetch" href="<%= src %>" as="script" />
+{%- endif -%} <% } else { %> {%- if template == '<%= templateName %>' -%}
+<script type="text/javascript" src="<%= src %>" defer></script>
+{%- else -%}
+<link rel="prefetch" href="<%= src %>" as="script" />
+{%- endif -%} <% } %> <% } else { %>
+<script type="text/javascript" src="<%= src %>" defer></script>
+<% } %> <% } %>
diff --git a/packages/nx-shopify/src/webpack/utils/index.ts b/packages/nx-shopify/src/webpack/utils/index.ts
@@ -0,0 +1,2 @@
+export * from './theme-layouts-utils';
+export * from './theme-template-utils';
diff --git a/packages/nx-shopify/src/webpack/utils/theme-layouts-utils.ts b/packages/nx-shopify/src/webpack/utils/theme-layouts-utils.ts
@@ -0,0 +1,15 @@
+import * as glob from 'glob';
+import * as path from 'path';
+
+export function getLayoutEntryPoints(sourceRoot) {
+  const entrypoints = {};
+
+  const templatesEntries = glob.sync(`${sourceRoot}/theme/layout/**/*.ts`);
+
+  templatesEntries.forEach((filePath) => {
+    const entryName = path.parse(filePath).name;
+    entrypoints[`layout.${entryName}`] = filePath;
+  });
+
+  return entrypoints;
+}
diff --git a/...opify/src/webpack/utils/template-utils.ts → ...src/webpack/utils/theme-template-utils.ts b/...opify/src/webpack/utils/template-utils.ts → ...src/webpack/utils/theme-template-utils.ts
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './theme-layouts-utils';
		export * from './theme-template-utils';