Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Determine liquid conditions from compilation. #43

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

Determine liquid conditions from compilation. #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
15b87f6
Determine liquid conditions from compilation.
davidwarrington Jun 9, 2021
3898825
Append template parent directory to Liquid condition.
davidwarrington Jun 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
118 changes: 50 additions & 68 deletions utils/render-asset-snippets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const path = require('path');
const Config = require('../packages/Config');

/** @typedef {{[key: string]: string}} Entrypoints */
/** @typedef {{[key: string]: string[]}} Entrypoints */
/**
* @typedef {{
* entrypoint: string;
Expand All @@ -11,8 +11,6 @@ const Config = require('../packages/Config');
* }} ModulePartialData
*/

const entryNameDelimiter = '@';
const entryPartsDelimiter = '.';
const mode = Config.get('app.mode');

/** @param {string} filename */
Expand Down Expand Up @@ -49,30 +47,6 @@ const assignBaseUrl = () => {
`;
};

/**
* @param {string} type
* @param {string[]} otherFileNameParts
*/
const getEntrypointKey = (type, otherFileNameParts) => {
const filename = otherFileNameParts.join(entryPartsDelimiter);

return `${type}.${path.basename(filename)}`;
};

/** @param {ModulePartialData[]} partials */
const getLiquidConditionsFromPartials = partials => {
return partials
.map(partial => {
let name = partial.filename;
if (partial.parentDirectory) {
name = `${partial.parentDirectory}/${name}`;
}

return `${partial.type} == '${name}'`;
})
.join(' or ');
};

/**
* @param {string} entry
* @param {Entrypoints} entrypoints
Expand All @@ -83,43 +57,52 @@ const getParentDirectory = (entry, entrypoints) => {
return path.basename(dirname);
};

/**
* @param {string} filename
* @param {Entrypoints} entrypoints
* @returns {ModulePartialData[]}
*/
const getPartialsData = (filename, entrypoints) => {
const fileNameParts = path
.basename(filename, path.extname(filename))
.split(entryNameDelimiter)
.filter(part => !part.startsWith('vendor'));

return fileNameParts.map(partialName => {
const [type, ...otherFileNameParts] = partialName.split(
entryPartsDelimiter
);
const getChunkForFile = (filename, compilation) => {
return [...compilation.chunks].find(chunk => chunk.files.has(filename));
};

let parentDirectory;
if (type === 'templates') {
const parentDirectoryName = getParentDirectory(
partialName,
entrypoints
);
if (parentDirectoryName !== 'templates') {
parentDirectory = parentDirectoryName;
const getLiquidConditionsFromChunk = (chunk, entrypoints) => {
const liquidAssociations = {
layouts: [],
templates: [],
other: [],
};

let runtimes;
if (typeof chunk.runtime === 'string') {
runtimes = [chunk.runtime];
} else {
runtimes = [...chunk.runtime];
}

runtimes.forEach(runtime => {
if (runtime.startsWith('layout.', '')) {
liquidAssociations.layouts.push(runtime.replace(/^layout\./, ''));
} else if (runtime.startsWith('templates.', '')) {
let template = runtime.replace(/^templates\./, '');
const parentDirectory = getParentDirectory(runtime, entrypoints);
if (parentDirectory !== 'templates') {
template = `${parentDirectory}/${template}`;
}
}

return {
entrypoint: entrypoints[getEntrypointKey(type, otherFileNameParts)],
filename: otherFileNameParts.join(entryPartsDelimiter),
parentDirectory,
type: type === 'templates' ? 'template' : type,
};
liquidAssociations.templates.push(template);
} else {
liquidAssociations.other.push(runtime);
}
});

const conditions = [];
liquidAssociations.layouts.forEach(layout =>
conditions.push(`layout == '${layout}'`)
);
liquidAssociations.templates.forEach(template =>
conditions.push(`template == '${template}'`)
);

return conditions.join(' or ');
};

const renderScriptTagsSnippet = ({ htmlWebpackPlugin }) => {
const renderScriptTagsSnippet = ({ compilation, htmlWebpackPlugin }) => {
const jsFiles = htmlWebpackPlugin.files.js.map(filename =>
decodeURIComponent(path.basename(filename))
);
Expand All @@ -130,15 +113,14 @@ const renderScriptTagsSnippet = ({ htmlWebpackPlugin }) => {
return `<script src="${getAssetSrc(filename)}"></script>`;
}

const partials = getPartialsData(
filename,
const associatedChunk = getChunkForFile(filename, compilation);

const conditions = getLiquidConditionsFromChunk(
associatedChunk,
htmlWebpackPlugin.options.entrypoints
);

const assetSrc = getAssetSrc(filename);

const conditions = getLiquidConditionsFromPartials(partials);

return `
{%- if ${conditions} -%}
<script src="${assetSrc}" defer></script>
Expand All @@ -164,21 +146,21 @@ const renderScriptTagsSnippet = ({ htmlWebpackPlugin }) => {
return tags;
};

const renderStyleTagsSnippet = ({ htmlWebpackPlugin }) => {
const renderStyleTagsSnippet = ({ compilation, htmlWebpackPlugin }) => {
const cssFiles = htmlWebpackPlugin.files.css.map(filename =>
decodeURIComponent(path.basename(filename))
);

const tags = cssFiles
.map(filename => {
const partials = getPartialsData(
filename,
const associatedChunk = getChunkForFile(filename, compilation);

const conditions = getLiquidConditionsFromChunk(
associatedChunk,
htmlWebpackPlugin.options.entrypoints
);
const assetSrc = getAssetSrc(filename);

const conditions = getLiquidConditionsFromPartials(partials);

return `
{%- if ${conditions} -%}
<link href="${assetSrc}" rel="stylesheet">
Expand Down
1 change: 0 additions & 1 deletion webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,6 @@ module.exports = () => {
config.optimization = {
splitChunks: {
chunks: 'initial',
name: getChunkName,
},
};
} else {
Expand Down