WIP: Liquid HMR

.eslintignore

@@ -0,0 +1,2 @@
+/dist/**
+/shopify-dev-utils/**

package.json

@@ -22,6 +22,7 @@
     "@shopify/eslint-plugin": "^39.0.3",
     "@shopify/themekit": "^1.1.6",
     "autoprefixer": "^10.0.4",
+    "axios": "^0.21.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
@@ -36,12 +37,15 @@
     "file-loader": "^6.0.0",
     "glob": "^7.1.6",
     "html-webpack-plugin": "^4.3.0",
+    "liquidjs": "^9.16.1",
     "mini-css-extract-plugin": "^1.3.1",
     "node-fetch": "^2.6.1",
     "node-sass": "^5.0.0",
     "postcss": "^8.1.10",
     "postcss-loader": "^4.0.4",
     "prettier": "^2.1.2",
+    "raw-loader": "^4.0.2",
+    "sass": "^1.29.0",
     "sass-loader": "^10.1.0",
     "style-loader": "^2.0.0",
     "tailwindcss": "^2.0.1",
@@ -52,6 +56,7 @@
     "webpack-dev-server": "^3.11.0",
     "webpack-merge": "^5.7.3",
     "webpack-shell-plugin-next": "^2.0.8",
+    "yaml": "^1.10.0",
     "yargs": "^16.1.0"
   }
 }

shopify-dev-utils/convertToGlobalDataStructure.js

@@ -0,0 +1,38 @@
+module.exports.convertToGlobalDataStructure = function convertToGlobalDataStructure(gqlData) {
+    // return gqlData;
+    return {
+        shop: {
+            name: gqlData.shop.name,
+        },
+        collections: gqlData.collections.edges.map(({ node }) => ({
+            title: node.title,
+            id: node.id,
+            handle: node.handle,
+            image: node.image,
+            description: node.description,
+            url: `/collections/${node.handle}`,
+            products: node.products.edges.map((product) => ({
+                id: product.node.id,
+                title: product.node.title,
+                description: product.node.description,
+                handle: product.node.handle,
+                available: product.node.availableForSale,
+                price: product.node.priceRange.maxVariantPrice, // preserve the entire obj for money-* filters
+                price_max: product.node.priceRange.maxVariantPrice,
+                price_min: product.node.priceRange.minVariantPrice,
+                price_varies:
+                    +product.node.priceRange.maxVariantPrice.amount !==
+                    +product.node.priceRange.minVariantPrice,
+                url: `/products/${product.node.handle}`,
+                featured_image:
+                    product.node.images.edges.length > 0
+                        ? {
+                              id: product.node.images.edges[0].node.id,
+                              alt: product.node.images.edges[0].node.altText,
+                              src: product.node.images.edges[0].node.originalSrc,
+                          }
+                        : null,
+            })),
+        })),
+    };
+};

shopify-dev-utils/filters/asset_url.js

@@ -0,0 +1,5 @@
+module.exports.assetUrl = function assetUrl(v) {
+    const { publicPath } = this.context.opts.loaderOptions;
+
+    return `${publicPath}${v}`;
+};

shopify-dev-utils/filters/default_pagination.js

@@ -0,0 +1,26 @@
+module.exports.defaultPagination = function defaultPagination(paginate, ...rest) {
+    const next = rest.filter((arg) => arg[0] === 'next').pop();
+    const previous = rest.filter((arg) => arg[0] === 'previous').pop();
+
+    const prevLabel =
+        previous.length > 0 ? previous.pop() : paginate.previous ? paginate.previous.title : '';
+    const nextLabel = next.length > 0 ? next.pop() : paginate.next ? paginate.next.title : '';
+
+    const prevPart = paginate.previous
+        ? `<span class="prev"><a href="${paginate.previous.url}" title="${prevLabel}">${prevLabel}</a></span>`
+        : '';
+    const nextPart = paginate.next
+        ? `<span class="next"><a href="${paginate.next.url}" title="${nextLabel}">${nextLabel}</a></span>`
+        : '';
+
+    const pagesPart = paginate.parts
+        .map((part) => {
+            if (part.is_link) {
+                return `<span class="page"><a href="${part.url}" title="${part.title}">${part.title}</a></span>`;
+            }
+            return `<span class="page current">${part.title}</span>`;
+        })
+        .join('');
+
+    return `${prevPart}${pagesPart}${nextPart}`;
+};

shopify-dev-utils/filters/money_with_currency.js

@@ -0,0 +1,13 @@
+module.exports.moneyWithCurrency = function moneyWithCurrency(price) {
+    if (!price || !price.currencyCode || !price.amount) {
+        return '';
+    }
+
+    // the price that this object gets has 2 fields it is not the same value in "real" env,
+    // at real it should be only a number multiplied by 100
+    return new Intl.NumberFormat('en', {
+        style: 'currency',
+        currency: price.currencyCode,
+        maximumFractionDigits: 2,
+    }).format(price.amount);
+};

shopify-dev-utils/filters/money_without_trailing_zeros.js

@@ -0,0 +1,14 @@
+const { moneyWithCurrency } = require('./money_with_currency');
+
+module.exports.moneyWithoutTrailingZeros = function moneyWithoutTrailingZeros(price) {
+    // the price that this object gets has 2 fields it is not the same value in "real" env,
+    // at real it should be only a number multiplied by 100
+    const moneyWithCurrencyAndTrailingZeros = moneyWithCurrency(price);
+    return moneyWithCurrencyAndTrailingZeros.replace(
+        /([,.][^0]*(0+))\D*$/,
+        (match, group, zeros) => {
+            const cutSize = zeros.length > 1 ? zeros.length + 1 : zeros.length;
+            return match.replace(group, group.substring(0, group.length - cutSize));
+        }
+    );
+};

shopify-dev-utils/filters/script_tag.js

@@ -0,0 +1,3 @@
+module.exports.scriptTag = function scriptTag(v) {
+    return `<script src="${v}"></script>`;
+};

shopify-dev-utils/filters/stylesheet_tag.js

@@ -0,0 +1,3 @@
+module.exports.stylesheetTag = function stylesheetTag() {
+    return ''; // in Dev mode we load css from js for HMR
+};

shopify-dev-utils/filters/within.js

@@ -0,0 +1,3 @@
+module.exports.within = function within(productUrl, collection) {
+    return `${collection.url}${productUrl}`;
+};

shopify-dev-utils/liquidDev.entry.js

@@ -0,0 +1,63 @@
+const context = require.context(
+    '../src',
+    true,
+    /(collection|footer|featured-product|featured-collection|header|message)\.liquid$/
+);
+
+const cache = {};
+
+context.keys().forEach(function (key) {
+    cache[key] = context(key);
+});
+
+function replaceHtml(key, startCommentNode) {
+    const commentNodeType = startCommentNode.nodeType;
+    while (
+        startCommentNode.nextSibling.nodeType !== commentNodeType ||
+        !startCommentNode.nextSibling.nodeValue.includes(`hmr-end: ${key}`)
+    ) {
+        startCommentNode.nextSibling.remove();
+    }
+
+    const tpl = document.createElement('template');
+    tpl.innerHTML = cache[key];
+    startCommentNode.parentNode.insertBefore(tpl.content, startCommentNode.nextSibling);
+}
+
+if (module.hot) {
+    module.hot.accept(context.id, function () {
+        const newContext = require.context(
+            '../src',
+            true,
+            /(collection|footer|featured-product|featured-collection|header|message)\.liquid$/
+        );
+        const changes = [];
+        newContext.keys().forEach(function (key) {
+            const newFile = newContext(key);
+            if (cache[key] !== newFile) {
+                changes.push(key);
+                cache[key] = newFile;
+            }
+        });
+
+        changes.forEach((changedFile) => {
+            traverseHMRComments(changedFile, replaceHtml);
+        });
+    });
+}
+
+function traverseHMRComments(file, callback) {
+    const nodeIterator = document.createNodeIterator(
+        document.body,
+        NodeFilter.SHOW_COMMENT,
+        function (node) {
+            return node.nodeValue.includes(`hmr-start: ${file}`)
+                ? NodeFilter.FILTER_ACCEPT
+                : NodeFilter.FILTER_REJECT;
+        }
+    );
+
+    while (nodeIterator.nextNode()) {
+        callback(file, nodeIterator.referenceNode);
+    }
+}

shopify-dev-utils/liquidDev.loader.js

@@ -0,0 +1,78 @@
+const loaderUtils = require('loader-utils');
+const path = require('path');
+const { Liquid } = require('liquidjs');
+const glob = require('glob');
+const { moneyWithoutTrailingZeros } = require('./filters/money_without_trailing_zeros');
+const { moneyWithCurrency } = require('./filters/money_with_currency');
+const { within } = require('./filters/within');
+const { defaultPagination } = require('./filters/default_pagination');
+const { scriptTag } = require('./filters/script_tag');
+const { stylesheetTag } = require('./filters/stylesheet_tag');
+const { assetUrl } = require('./filters/asset_url');
+const { getStoreGlobalData } = require('./storeData');
+const { liquidSectionTags } = require('./section-tags/index');
+const { Paginate } = require('./tags/paginate');
+
+let engine;
+let loadPromise;
+
+function initEngine() {
+    if (!loadPromise) {
+        loadPromise = new Promise(async (resolve) => {
+            const liquidFiles = [
+                ...glob
+                    .sync('./src/components/**/*.liquid')
+                    .map((filePath) =>
+                        path.resolve(path.join(__dirname, '../'), path.dirname(filePath))
+                    )
+                    .reduce((set, dir) => {
+                        set.add(dir);
+                        return set;
+                    }, new Set()),
+            ];
+
+            engine = new Liquid({
+                root: liquidFiles, // root for layouts/includes lookup
+                extname: '.liquid', // used for layouts/includes, defaults "",
+                globals: await getStoreGlobalData(),
+            });
+
+            engine.registerFilter('asset_url', assetUrl);
+            engine.registerFilter('stylesheet_tag', stylesheetTag);
+            engine.registerFilter('script_tag', scriptTag);
+            engine.registerFilter('default_pagination', defaultPagination);
+            engine.registerFilter('within', within);
+            engine.registerFilter('money_with_currency', moneyWithCurrency);
+            engine.registerFilter('money_without_trailing_zeros', moneyWithoutTrailingZeros);
+
+            engine.registerTag('paginate', Paginate);
+            engine.plugin(liquidSectionTags());
+
+            resolve();
+        });
+    }
+
+    return loadPromise;
+}
+
+module.exports = async function (content) {
+    if (this.cacheable) this.cacheable();
+    const callback = this.async();
+
+    if (!engine) {
+        await initEngine();
+    }
+
+    engine.options.loaderOptions = loaderUtils.getOptions(this);
+    const { isSection } = engine.options.loaderOptions;
+
+    // section handled specially
+    if (typeof isSection === 'function' && isSection(this.context)) {
+        const sectionName = path.basename(this.resourcePath, '.liquid');
+        content = `{% section "${sectionName}" %}`;
+    }
+
+    return engine
+        .parseAndRender(content, engine.options.loaderOptions.globals || {})
+        .then((result) => callback(null, result));
+};

shopify-dev-utils/section-tags/index.d.ts

@@ -0,0 +1,2 @@
+import { Liquid } from 'liquidjs';
+export declare function liquidSectionTags(): (this: Liquid) => void;

shopify-dev-utils/section-tags/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.liquidSectionTags = void 0;
+const javascript_1 = require("./javascript");
+const schema_1 = require("./schema");
+const section_1 = require("./section");
+const stylesheet_1 = require("./stylesheet");
+function liquidSectionTags() {
+    return function () {
+        this.registerTag('section', section_1.Section);
+        this.registerTag('schema', schema_1.Schema);
+        this.registerTag('stylesheet', stylesheet_1.StyleSheet);
+        this.registerTag('javascript', javascript_1.JavaScript);
+    };
+}
+exports.liquidSectionTags = liquidSectionTags;

shopify-dev-utils/section-tags/javascript.d.ts

@@ -0,0 +1,2 @@
+import { TagImplOptions } from 'liquidjs/dist/template/tag/tag-impl-options';
+export declare const JavaScript: TagImplOptions;

shopify-dev-utils/section-tags/javascript.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JavaScript = void 0;
+exports.JavaScript = {
+    parse: function (tagToken, remainTokens) {
+        this.tokens = [];
+        const stream = this.liquid.parser.parseStream(remainTokens);
+        stream
+            .on('token', (token) => {
+            if (token.name === 'endjavascript')
+                stream.stop();
+            else
+                this.tokens.push(token);
+        })
+            .on('end', () => {
+            throw new Error(`tag ${tagToken.getText()} not closed`);
+        });
+        stream.start();
+    },
+    render: function () {
+        const text = this.tokens.map((token) => token.getText()).join('');
+        return `<script>${text}</script>`;
+    }
+};

shopify-dev-utils/section-tags/schema.d.ts

@@ -0,0 +1,2 @@
+import { TagImplOptions } from 'liquidjs/dist/template/tag/tag-impl-options';
+export declare const Schema: TagImplOptions;

shopify-dev-utils/section-tags/schema.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Schema = void 0;
+function generateSettingsObj(settings) {
+    if (!Array.isArray(settings)) {
+        return settings;
+    }
+    return settings
+        .filter((entry) => !!entry.id)
+        .reduce((sectionSettings, entry) => {
+        sectionSettings[entry.id] = entry.default;
+        return sectionSettings;
+    }, {});
+}
+exports.Schema = {
+    parse: function (tagToken, remainTokens) {
+        this.tokens = [];
+        const stream = this.liquid.parser.parseStream(remainTokens);
+        stream
+            .on('token', (token) => {
+            if (token.name === 'endschema') {
+                stream.stop();
+            }
+            else
+                this.tokens.push(token);
+        })
+            .on('end', () => {
+            throw new Error(`tag ${tagToken.getText()} not closed`);
+        });
+        stream.start();
+    },
+    render: function (ctx) {
+        const json = this.tokens.map((token) => token.getText()).join('');
+        const schema = JSON.parse(json);
+        const scope = ctx.scopes[ctx.scopes.length - 1];
+        scope.section = {
+            settings: generateSettingsObj(schema.settings),
+            blocks: (schema.blocks || []).map((block) => ({
+                ...block,
+                settings: generateSettingsObj(block.settings)
+            }))
+        };
+        return '';
+    }
+};

shopify-dev-utils/section-tags/section.d.ts

@@ -0,0 +1,2 @@
+import { TagImplOptions } from 'liquidjs';
+export declare const Section: TagImplOptions;