diegohaz / arc

I'm about 15 months into a ARc front end, and the experience has been great. Thank you so much for putting together such a good toolkit.

That said, we feel like we have “outgrown” the atomic component organization methodology. We have roughly 100 components, and would rather be organizing these in folders like "menu" and "account". I'm also starting another project on ARc, and my designer flatly refuses to even break ground with atomic.

Unfortunately, the webpack (is this right?) seems to be very finicky about the order of components. Off the bat, renaming "atoms" to "widgets" causes the higher-level components to fail. Renaming it to "_widgets" fixes the problem, but that won't be sustainable down the road.

I've tried to get some assistance through a Stack Overflow question (https://stackoverflow.com/questions/50335247/organizing-project-components-does-this-need-to-be-alphabetic) , but everyone seems to think I'm possibly crazy. Could you tell me a little about how this works?

(I apologize if github issues is the wrong place for an inquiry like this, but I've hit a wall.)

Hi, @EricWVGG. It's good to know that you've reached this far with this approach. That's a great feedback.

I've implemented ARc without "A" in some cases, usually smaller projects with a few components, when I wanted to have a flat components folder.

In those cases, I've just removed the components/index.js file and started importing components directly (import Component from "../components/Component").

If you want to keep importing components dynamically, I'd recommend you to update [components/index.js]. You'll probably find a solution by reordering req keys.

arc/src/components/index.js

Lines 2 to 7 in 2c87238

    
           const req = require.context('.', true, /\.\/[^/]+\/[^/]+\/index\.js$/) 
        
           req.keys().forEach((key) => { 
        
             const componentName = key.replace(/^.+\/([^/]+)\/index\.js/, '$1') 
        
             module.exports[componentName] = req(key).default 
        
           })

Another possible solution is to never use the component directly on the top level of your module (component file). JavaScript will be able to resolve the circular dependency at runtime (#131 (comment)).

I'll give that a crack.

https://strongwater.net, if you're interested in taking a look. Thank you again, this framework is absolutely top notch.

… if anyone in the future digs up this discussion, here's how I resolved the issue. Using renaming "atoms" to "widgets" as an example:

const load_components = (req) => req.keys().forEach((key) => {
  const componentName = key.replace(/^.+\/([^/]+)\/index\.js/, '$1')
  module.exports[componentName] = req(key).default
})

load_components( require.context('.', true, /\.\/widgets\/[^/]+\/index\.js$/) )
load_components( require.context('.', true, /\.\/_molecules\/[^/]+\/index\.js$/) )
load_components( require.context('.', true, /\.\/_organisms\/[^/]+\/index\.js$/) )
load_components( require.context('.', true, /\.\/pages\/[^/]+\/index\.js$/) )
load_components( require.context('.', true, /\.\/templates\/[^/]+\/index\.js$/) )
load_components( require.context('.', true, /\.\/themes\/[^/]+\/index\.js$/) )

Clunky, but this isn't as straightforward as dynamically running regexes with variables, as require_context() requires a statically defined regex, I'm sure as some sort of safety mechanism.

	const req = require.context('.', true, /\.\/[^/]+\/[^/]+\/index\.js$/)

	req.keys().forEach((key) => {
	const componentName = key.replace(/^.+\/([^/]+)\/index\.js/, '$1')
	module.exports[componentName] = req(key).default
	})

removing the "a" from "ARc"