fix filename and directory name overlap breaking the build (#264)

* wip

* linting

* got specs working and removed extra test code

* regex ftw

* remove page name known issue from docs

* clean up TODOs

* all scenarios building and passing

packages/cli/src/config/webpack.config.common.js

@@ -4,35 +4,45 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
 const webpack = require('webpack');
 
-const isDirectory = source => fs.lstatSync(source).isDirectory();
 const getUserWorkspaceDirectories = (source) => {
-  return fs.readdirSync(source).map(name => path.join(source, name)).filter(isDirectory);
+  return fs.readdirSync(source)
+    .map(name => path.join(source, name))
+    .filter(path => fs.lstatSync(path).isDirectory());
 };
-const mapUserWorkspaceDirectory = (userPath) => {
-  const directory = userPath.split('/')[userPath.split('/').length - 1];
-
+const mapUserWorkspaceDirectories = (directoryPath, userWorkspaceDirectory) => {
+  const directoryName = directoryPath.replace(`${userWorkspaceDirectory}/`, '');
+  const userWorkspaceDirectoryRoot = userWorkspaceDirectory.split('/').slice(-1);
+
   return new webpack.NormalModuleReplacementPlugin(
-    new RegExp(`${directory}`),
+    // https://github.com/ProjectEvergreen/greenwood/issues/132
+    new RegExp(`\\.\\.\\/${directoryName}.+$(?<!\.js)|${userWorkspaceDirectoryRoot}\\/${directoryName}.+$(?<!\.js)`),
     (resource) => {
-
+      
       // workaround to ignore cli/templates default imports when rewriting
-      if (!new RegExp('\/cli\/templates').test(resource.request)) {
-        resource.request = resource.request.replace(new RegExp(`\.\.\/${directory}`), userPath);
+      if (!new RegExp('\/cli\/templates').test(resource.content)) {
+        resource.request = resource.request.replace(new RegExp(`\\.\\.\\/${directoryName}`), directoryPath);
       }
+
       // remove any additional nests, after replacement with absolute path of user workspace + directory
       const additionalNestedPathIndex = resource.request.lastIndexOf('..');
 
       if (additionalNestedPathIndex > -1) {
         resource.request = resource.request.substring(additionalNestedPathIndex + 2, resource.request.length);
       }
     }
+
   );
 };
 
 module.exports = ({ config, context }) => {
+  const { userWorkspace } = context;
+
   // dynamically map all the user's workspace directories for resolution by webpack
-  // this essentially helps us keep watch over changes from the user, and greenwood's build pipeline
-  const mappedUserDirectoriesForWebpack = getUserWorkspaceDirectories(context.userWorkspace).map(mapUserWorkspaceDirectory);
+  // this essentially helps us keep watch over changes from the user's workspace forgreenwood's build pipeline
+  const mappedUserDirectoriesForWebpack = getUserWorkspaceDirectories(userWorkspace)
+    .map((directory) => {
+      return mapUserWorkspaceDirectories(directory, userWorkspace);
+    });
 
   // if user has an assets/ directory in their workspace, automatically copy it for them
   const userAssetsDirectoryForWebpack = fs.existsSync(context.assetDir) ? [{

packages/cli/test/cases/build.default.workspace-user-directory-mapping/build.default.workspace-user-directory-mapping.spec.js

@@ -0,0 +1,53 @@
+/*
+ * Use Case
+ * Run Greenwood build command with no config and custom workspace testing for file / directory name collisions.
+ * See this issue for more details: https://github.com/ProjectEvergreen/greenwood/issues/132
+ *
+ * User Result
+ * Should generate a bare bones Greenwood build with out any errors due to naming.
+ *
+ * User Command
+ * greenwood build
+ *
+ * User Config
+ * None (Greenwood Default)
+ *
+ * User Workspace
+ * src/
+ *   components/
+ *     header/
+ *       header.js
+ *   pages/
+ *     about.md
+ *     index.md
+ *   services/
+ *     components.js
+ *     pages/
+ *       pages.js
+ *   templates/
+ *     page-template.js
+ */
+const TestBed = require('../../../../../test/test-bed');
+
+describe('Build Greenwood With: ', function() {
+  const LABEL = 'Default Greenwood Configuration and Workspace w/Naming Collisions';
+  let setup;
+
+  before(async function() {
+    setup = new TestBed();
+    this.context = await setup.setupTestBed(__dirname);
+  });
+
+  describe(LABEL, function() {
+    before(async () => {
+      await setup.runGreenwoodCommand('build');
+    });
+
+    runSmokeTest(['public', 'index', 'not-found'], LABEL);
+  });
+
+  after(function() {
+    setup.teardownTestBed();
+  });
+
+});

packages/cli/test/cases/build.default.workspace-user-directory-mapping/src/components/header/header.js

@@ -0,0 +1,10 @@
+import service from '../../services/components';
+import '../../services/pages/pages';
+
+class HeaderComponent extends HTMLElement {
+  constructor() {
+    service('hello world');
+  }
+}
+
+customElements.define('x-header', HeaderComponent);

packages/cli/test/cases/build.default.workspace-user-directory-mapping/src/pages/index.md

@@ -0,0 +1,3 @@
+### Greenwood
+
+This is the home page built by Greenwood. Make your own pages in src/pages/index.js!

packages/cli/test/cases/build.default.workspace-user-directory-mapping/src/pages/pages.md

@@ -0,0 +1,3 @@
+### Pages page
+
+This is a custom about page built by Greenwood.

packages/cli/test/cases/build.default.workspace-user-directory-mapping/src/services/components.js

@@ -0,0 +1,5 @@
+const logger = (message = '') => {
+  console.log(`LOGGER [components] => ${message}`);
+};
+
+export default logger;

packages/cli/test/cases/build.default.workspace-user-directory-mapping/src/services/pages/pages.js

@@ -0,0 +1,5 @@
+const logger = (message = '') => {
+  console.log(`LOGGER [pages] => ${message}`);
+};
+
+export default logger;

packages/cli/test/cases/build.default.workspace-user-directory-mapping/src/templates/page-template.js

@@ -0,0 +1,22 @@
+import { html, LitElement } from 'lit-element';
+import '../components/header/header';
+
+MDIMPORT;
+METAIMPORT;
+METADATA;
+
+class PageTemplate extends LitElement {
+  render() {
+    return html`
+      METAELEMENT
+      <div class='wrapper'>
+        <div class='page-template blog-content content owen-test'>
+          <entry></entry>
+        </div>
+        <x-header></x-header>
+      </div>
+    `;
+  }
+}
+
+customElements.define('page-template', PageTemplate);

www/pages/docs/layouts.md

@@ -118,6 +118,4 @@ For example, given this folder structure:
 You will have the following page URLs:
 - _/_
 - _/blog/first-post/_
-- _/blog/second-post/_
-
-> Note: there is a [known issue](https://github.com/ProjectEvergreen/greenwood/issues/132) where certain reserved words with Greenwood are not allowed as pages names.  These words are: _styles_, _templates_, and _pages_.
+- _/blog/second-post/_

www/templates/home-template.js

@@ -1,6 +1,6 @@
 import { html, LitElement } from 'lit-element';
 import '../components/banner/banner';
-import '../components/card/card.js';
+import '../components/card/card';
 import '../components/header/header';
 import '../components/footer/footer';
 import '../components/row/row';