React

by Abdul Ahmad

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.some-section {
  padding: 100px 0;
  box-sizing: border-box;
  border: 1px dashed #ddd;
}

.some-button {
  display: inline-block;
  vertical-align: middle;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 5px;
  border-radius: 5px;
}

React

class ComponentIdentityManager {
    _identities = {};
    _separator = '--';

    registerIdentity({ 
    	componentName, uniqueName, parentName, isPartOfNameId = true
    }) {
        if (!componentName) return;
        // - it's ok for parentName to be undefined, this means
        //   it's the last item in the component hierarchy
        const finalName = this.resolveName({ componentName, uniqueName });
        this._identities[finalName] = { value: parentName, isPartOfNameId };      
    }

    generateName({ componentName, uniqueName }) {
        let nameGenComplete = false;
        let componentNameId = this.resolveName({ componentName, uniqueName });
        let componentFinalName = componentNameId;
        let lastComponentName = componentNameId;

        while (!nameGenComplete) {
            const parentName = this._identities[lastComponentName];
            if (!parentName || !parentName.value) {
                nameGenComplete = true;
                break;
            }
            
            lastComponentName = parentName;
            // - skip names that shouldn't be part of name
            if (parentName.isPartOfNameId) break;
            
            componentFinalName = this.combineNames({ names: [
              parentName.value,
              componentFinalName,
            ]});
        }
        
        return componentFinalName;
    }
    
    combineNames({ names } = {}) {
      return names.join(this._separator);
    }
    
    resolveName({ componentName, uniqueName } = {}) {
    	let finalName;
      if (!uniqueName) finalName = componentName;
      else finalName = this.combineNames({ names: [ componentName, uniqueName ]});
      
      return finalName;
    }
}

const componentIdManager = new ComponentIdentityManager();

function App() {
	return (
  	<SomePage>
      <FlexWrapper>
        <FlexChildButton uniqueName='flex-child-1' />
        <FlexChildButton uniqueName='flex-child-2' />
        <FlexChildButton...