Merge pull request #40 from emulsify-ds/release-sdc-support--2

ProjectNameResolverPlugin

.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, '../config/webpack/sdc-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;
 };

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.

config/webpack/sdc-loader.js

@@ -0,0 +1,8 @@
+module.exports = function (source) {
+  const projectName = this.getOptions().projectName || '';
+  const result = source.replace(
+    new RegExp(`${projectName}:`, 'g'),
+    `${projectName}/`,
+  );
+  return result;
+};