From 1c6f1b9b79c2b4b978ce37f175fd8a51e9ef1835 Mon Sep 17 00:00:00 2001 From: Roberto Hernandez Date: Sat, 31 Aug 2024 00:14:45 -0600 Subject: [PATCH 1/4] feat: add a custom loader for twig files --- .storybook/custom-loader.js | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .storybook/custom-loader.js diff --git a/.storybook/custom-loader.js b/.storybook/custom-loader.js new file mode 100644 index 0000000..4b24472 --- /dev/null +++ b/.storybook/custom-loader.js @@ -0,0 +1,5 @@ +module.exports = function (source) { + const projectName = this.getOptions().projectName || ''; + const result = source.replace(new RegExp(`${projectName}:`, 'g'), `${projectName}/`); + return result; +}; From e7b4162f11437fa1dcd830eee34e52c6c04b28a7 Mon Sep 17 00:00:00 2001 From: Roberto Hernandez Date: Sat, 31 Aug 2024 00:16:38 -0600 Subject: [PATCH 2/4] feat: adjusting the ProjectNameResolverPlugin --- .storybook/webpack.config.js | 60 +++++++++++++++++++----------------- 1 file changed, 31 insertions(+), 29 deletions(-) diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index b32680a..0b791be 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -13,43 +13,31 @@ const emulsifyConfig = require('../../../../project.emulsify.json'); */ class ProjectNameResolverPlugin { constructor(options = {}) { - this.prefix = `${emulsifyConfig.project.name}:`; // Project name prefix. + this.prefix = options.projectName; } + apply(resolver) { - const target = resolver.ensureHook('resolved'); + const target = resolver.ensureHook('resolve'); resolver - .getHook('resolve') + .getHook('before-resolve') .tapAsync('ProjectNameResolverPlugin', (request, resolveContext, callback) => { - if (request.request.startsWith(this.prefix)) { + const requestPath = request.request; - // Start - map request to @ aliases. - const file = resolves.TwigResolve.alias[request.request]; - const srcStructure = file.split(`${emulsifyConfig.project.name}/src/`)[1]; - const parentDir = srcStructure.split(`/`)[0]; - const filePath = file.split(`/src/${parentDir}`)[1]; + if (requestPath && requestPath.startsWith(`${this.prefix}:`)) { + const newRequestPath = requestPath.replace(`${this.prefix}:`, `${this.prefix}/`); const newRequest = { ...request, - request: `@${parentDir}${filePath}`, + request: newRequestPath, }; - // End - map request to @ aliases. - - // Change request to full file path. - // const newRequest = { - // ...request, - // request: resolves.TwigResolve.alias[request.request], - // }; - - // console.log(newRequest); - return resolver.doResolve( + resolver.doResolve( target, newRequest, - `Resolved ${this.prefix} URI: ${resolves.TwigResolve.alias[request.request]}`, + `Resolved ${this.prefix} URI: ${resolves.TwigResolve.alias[requestPath]}`, resolveContext, callback ); } else { - // Proceed with default resolution if the custom prefix is not matched callback(); } }); @@ -59,17 +47,23 @@ class ProjectNameResolverPlugin { module.exports = async ({ config }) => { // Alias Object.assign(config.resolve.alias, resolves.TwigResolve.alias); - config.resolve.plugins = [new ProjectNameResolverPlugin]; - // console.log(config.resolve); + // Twig config.module.rules.push({ test: /\.twig$/, use: [ + { + loader: path.resolve(__dirname, 'custom-loader.js'), + options: { + projectName: emulsifyConfig.project.name, + }, + }, { loader: 'twigjs-loader', }, ], }); + // SCSS config.module.rules.push({ test: /\.s[ac]ss$/i, @@ -93,6 +87,13 @@ module.exports = async ({ config }) => { ], }); + // YAML + config.module.rules.push({ + test: /\.ya?ml$/, + loader: 'js-yaml-loader', + }); + + // Plugins config.plugins.push( new _StyleLintPlugin({ configFile: path.resolve(__dirname, '../', '.stylelintrc.json'), @@ -107,11 +108,12 @@ module.exports = async ({ config }) => { }), ); - // YAML - config.module.rules.push({ - test: /\.ya?ml$/, - loader: 'js-yaml-loader', - }); + // Resolver Plugins + config.resolve.plugins = [ + new ProjectNameResolverPlugin({ + projectName: emulsifyConfig.project.name, + }), + ]; return config; }; From 10222d72ac5a0cef525654fd380ce49e55ec7cd3 Mon Sep 17 00:00:00 2001 From: Roberto Hernandez Date: Sat, 31 Aug 2024 00:17:58 -0600 Subject: [PATCH 3/4] feat: removing colons from alias definitions --- config/webpack/resolves.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/webpack/resolves.js b/config/webpack/resolves.js index f52e70a..8e5ca30 100644 --- a/config/webpack/resolves.js +++ b/config/webpack/resolves.js @@ -42,7 +42,7 @@ function getAliases(aliasMatcher) { const fileName = path.basename(filePath); if (emulsifyConfig.project.platform === 'drupal') { - aliases[`${projectName}:${fileName.replace('.twig', '')}`] = file; + aliases[`${projectName}/${fileName.replace('.twig', '')}`] = file; } }); // Add typical @namespace (path to directory) aliases for twig partials. From 62c5d4165802cdc014a04220b26328aa4a483076 Mon Sep 17 00:00:00 2001 From: Roberto Hernandez Date: Tue, 3 Sep 2024 08:52:45 -0600 Subject: [PATCH 4/4] feat: renaming and relocating the SDC loader --- .storybook/webpack.config.js | 2 +- .storybook/custom-loader.js => config/webpack/sdc-loader.js | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) rename .storybook/custom-loader.js => config/webpack/sdc-loader.js (53%) diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 0b791be..305ec3e 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -53,7 +53,7 @@ module.exports = async ({ config }) => { test: /\.twig$/, use: [ { - loader: path.resolve(__dirname, 'custom-loader.js'), + loader: path.resolve(__dirname, '../config/webpack/sdc-loader.js'), options: { projectName: emulsifyConfig.project.name, }, diff --git a/.storybook/custom-loader.js b/config/webpack/sdc-loader.js similarity index 53% rename from .storybook/custom-loader.js rename to config/webpack/sdc-loader.js index 4b24472..1dd24b9 100644 --- a/.storybook/custom-loader.js +++ b/config/webpack/sdc-loader.js @@ -1,5 +1,8 @@ module.exports = function (source) { const projectName = this.getOptions().projectName || ''; - const result = source.replace(new RegExp(`${projectName}:`, 'g'), `${projectName}/`); + const result = source.replace( + new RegExp(`${projectName}:`, 'g'), + `${projectName}/`, + ); return result; };