Component Archetype Structure
In the previous component archetype, we use
demo-server to demo and test react component inside of component itself, which has a risk of causing chicken-egg issues. In order to avoid this, we removed
demo-server for component archetype and let it focus more on build, eslint check and unit tests itself.
Meanwhile, in the new electrode components, we demo components through
<repo>/demo-app where import components from
<repo>/packages/<componentName>. The latest electrode components can be generated by the latest electrode-generator.
Below is the new structure of the Electrode React Component Archetype:
- electrode-archetype-react-component |- config/ | |- babel | |- browser_test | |- dependencies | |- eslint | |- istanbul | |- karma | |- stylint | |- webpack | |- partial | |- babel.js | |- define.js | |- fonts.js | |- images.js | |- json.js | |- optimize.js | |- sourcemaps.js | |- styles.js | |- webpack.config.coverage.js | |- webpack.config.dev.js | |- webpack.config.js | |- webpack.config.test.js | |- archetype.js |- scripts/ |- archetype-clap.js |- xclap.js |- package.json ...
The Component Archetype still provides babel, eslint, karma and webpack config files as before, files can be found under
electrode-archetype-react-component/config folder. But there are some updates for webpack config files, which can be found in the next section.