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;
  border: 1px dashed #ddd;
}

React

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

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

    generateName({ componentName }) {
        let nameGenComplete = false;
        let finalName = componentName;
        let lastComponentName = componentName;

        while (!nameGenComplete) {
            const parentName = this._identities[lastComponentName];
            if (!parentName) {
                nameGenComplete = true;
                break;
            }
            
            lastComponentName = parentName;
            finalName = this.combineNames({ names: [
              parentName,
              finalName,
            ]});
        }
        
        return finalName;
    }
    
    combineNames({ names } = {}) {
      return names.join(this._separator);
    }
} */

/* const componentIdManager = new ComponentIdentityManager(); */

function App() {
	return (
  	<SomePage>
      <SomeSection uniqueName='hero-section'>
        <SomeButton uniqueName='cta-ok-button'>
          OK Button
        </SomeButton>
        <SomeButton uniqueName='cancel-button'>
          Cancel Button
        </SomeButton>
      </SomeSection>
      <SomeSection uniqueName='footer-section'>
        <SomeButton uniqueName='learn-more-button'>
          Learn More
        </SomeButton>
      </SomeSection>
  	</SomePage>
  );
}

function SomePage({ children }) {
    const name = 'some-page';
    // componentIdManager.registerIdentity({ componentName: name });
    // const uniqueId = componentIdManager.generateName({ componentName: name });
    
/*  ...