compact components, extract with extractcomponent

example.compact

13c7f10cc63ac70ce3e692307913e9132e5b0933c687ca1d33fe0cafd7b7cd3ec170fcc1d7973d992ea51dd6aef228fb53ab24aa1e71fd3e7cf2f2c5d31ec7ea327d20f150129cba818001d2c0d7e0f4fbd94fbc70b703c3c263af579ea6b6e3f4729a0910f28c95cb293b1e3279107ce1b52eef3f9a47ab390a1eb24bb1e66cc120c1748c539264d82e37a7201d77973d5aeb0f645baf7a65043bf1da4bcd15e284f80c8ed72a706b2dc05b47095bdf78fd821d472ac04b66fd7993c1185087ef69c49a2cb99672fdcad8f9c43f69b6269ea391d873e57c85430d06693ec4c7b8d3e60aa19f69d50ca6843b89388aba1c1d7fc63f8da527d248dc2dc4be0a4002b458bbda3b3770ec5e67eeae8a5ac467cacadbb76dd2a2a3cca60b7fe5dd89ebc70dd43becac2042e8c689a3ebd20179113c822a660ef8b6328709eefd0188ea71223c2d48f3ff0ce0bf51311b80d1533cf72c5a95ecdf37461d4e782ee71c4e50773ec83723e426861bd252bef88e62f79a578e6434227cb7197ac1fa40f416b2245d6ef233cd3544976cee29453eb4716a4d526ed8bf152d553faaaaf659ac4dbb12018cada249bd4d053f1de74ccaf9c82941bd9784c62168cf47432121c1090c15c618ef5bfe942c4ff0b9140faa223beda35aa1081cf6b10a29ab3e69861cb2b201ebfafcd7cd922c4317427a336551ef6aa0084ae49c4d907a56c2306221e2f74c63b5552ae4a26a0293d16480fb7abb03774fa1598e166a774927fdc0419fb5e10bf4a284899c7c2850edad36bb3f3a193defe7e37e0a31acb8f12a1cf06e353ffd668f33ad312b1a8da562bc75ee9aa97c66902d8973cdcba7a2e03642b860e460bdcaac42f02dcdf8dfc587846990029ae540062c777b214ac216a4b8c5c05ea2172e326bd6e057744d7308cbd81f7c8717e25af111c7052943b773948b7deb81b3d0e326e40e55e543d0317458906bae1c64fc7292198c99182729761f189ce602dc660bfb3b8cd7fa422b39868f6051cb5b0e4c51dd25e4b92b62595758fef09d917656a4d50b4d4b55090ccd4c32ef03ace4aac9946e779a7b075ad5719bc1d31d772416aac08757485981e824faba23a3d8610eb400e863dd35395ec7b26a9a33a532767156de76c5d1283f29293f0a72790cbafe9a39877e07232facccd1ed4470488673151f1950d7e135850ae330e72b932e269e1944046ce3856e237696610422d748c2a2f360d52b3a0a670d7e784a5825f22e65e5958f78aa7ce166e516bc68fd4dbae35c848fdad1b8fad78d25130b34e1d4cd0c135ca740d80ca63646c9519ddba52c693407fb6ef706e72b16642eb851b1dfc4ea4282569abc16a22e5439c548dd57e74a09457be38a9aa9763877f10e800c4adddff3a6b368709dcaa0d52594951f1f35cc1587cf013c19a9714cbcdea3f018a3019fe444a270dd52b1db512883bb9066855836dc0f88dbfc64e63cc5e5428e42a6cd4a0b94ea6810a5b0be7cb67a663648d4a2865761bb13812abeb3c6f4b524b1402126054eff4514b679297931e6422984472aed05a63999ab11f9913774aab2eb23ad12ab1a6cfd1c09be88bae667b8cf3277de9670547c7b62ba82a03d6bac0f86eac9b61c313ddd2db68e357821165ec13ff0d0fa8a387683c2d80ffad90ee73d1f63617290e38ac6efe9078022ff6ed791fe696426942cc0dc571520c6899e0c485ee4a4550677a2c90619977651dd57d8b516f1c06eab730b0c76c7b539298b6adcf87c0ec0d856e33acfdbcaeba061701b00a383511d5b5b3a79c0a561681337ea5ec3cf2ff2ad91da3df2ac5988863885be9677896ade8c5e09c97b7183bf4aff987857fa533d727298958a84c2ebba1e405ca079620ccba64ef862cbc7af415f0afa0ce808a726a5cde96b64d104755a159a3d1360f44fac6084cc52b279c228a30181cc76db90ce35634444dc9e118764de39a18c70fb205c3527c643603740ae4eab947565d8dfdd55a05c97b3adac6cbf5d45953f225e6ca82cb40bd3659159b3a3d2b66c184bc7329d18f75514cad6842a67ce14a57e4e67ef39efdfa387cfd65b4b92dcb0872f443d1f91b7eecb8f71a375342866dbd97f23b59dd94b1d43b5278dcf1d768112a4be61e470fe293c1d7becb2fb6afc4cb80eb22f5b3951e4adc35185125513adebc3cee6ce658577465d6a19b2c6a925c9bd40f092b9455341c2666791569d9287ead29158170dcf4da42484f5d185278e27fafdf944eecfa9870717f105fcbe0ecfc4b960a25619e3576610627ac16fe8d628ba62623640e82c6da6ddd99bead5fc8a4949e47a26bd9e2416b5c787ef16929dc5885f819170306814882edc2bcb8590f3140d4802bbd610ab691533bb33a6320369ab77aef5461464d03f341a2162cdadb087bd93b02ebe59854425f1d08f0e210392a4cc74dd10c842d486e843c4c668179ac8dca4d91798d6083b9d5f74508f7d1f83a17e9d96f4da451bcb226a1d94fd85a1ae96d6293cb4f7093a62536b3701cd9b613eea65c99152c29a97d3c3d24a191c70d6c431ea5a04a761ffd79247f30bbab5f7bc0c4ca803465607159ddd4e4fd99ab469af62a8507227d2dca0d91b628b90cd9f9eac9f326aead5d7bea8dea9fba8a40d28ea24e678513d8f26c8e7c5f008bbf1017ca0ae4e9f384be0a2326a135cfc3c757f55f8b881ca5a95ef66a50a83ad99b66d93b0a7de785f26a96959437da43d189336a953dc4f0293ffb4925626d02b5a627002f99dce294d8bbedbb1688fe80fd8b60f79fef06681bdaa20caee2d573250dd309a94defa1b358cbeddc345c9822cd071ce91dbc62121c5d5fa7592b37cc3c46784037d97b3bc35b16ab9bf24fda709f6a86c8237cf5e8a5738ac109d46ec32b1bbe5ba991f990f4636b2a07511a01e30ac1a56ae6198bc0ac662a9317f44159cd0cc60fe574e45e0cca44d0dea77121527db1c55723275ac11a709d92114fd6097c3457af9b9917ca6e39b8f18c9f1715e24680229c245f6e5276027def6c5153ee83258a10f42f114c2951d70b800d7f03ec3d860ba867caf5ae0aaacf5f23b303bef220f3def807885c85bd9e1495e2f2a685aa32e9417ef1171efa3a5b3ae9a83789552a46ec46fea7bd1edb6a9eec982fe134185b2cb84c4aae782c0a1f4b651ae9ebd4e13e17ddfa77b92b2615884e20d8f2567c6b6801862259b7bf7c48df9779645935654dc2cdf3f89d399ada8f990960128da987fefe7ea8306676a3b43fa106664042a12cd6bbde09654692d756cbf9a82772e4f7a349273cc91332790faf287324b09b6e87ebb94da8d54e17e30c2828518b12937f1576434aea9deb0a889698d275d6bdc926e6bee5315f0e60b23865cee6e6beaa7b0179716b9bc5f351469c0f777f61effb9adf975db5ad23235c51934cc1e36ff0396c84b654a04f5217f67f9df15040cbac1b0d05394e52c474db1d854d3d2e1f7b26e011a42aae6f27aa7b83b6b2e98b783f0b1a6bc3e1c50fb5c4fda9c534910196b0db8f56685a7a9ad1605727df4d97df37e7e257093cffd52cdf92cb62c14eda06777828aa0993d7f6602ac1dce282a5d45d182dce4e31f5bc178dee2737ca887626da417d0b459e09c264d78e08bd01e24aba72e47f8abba1badeab9a482fb638feeb8d34d699199307b0b87e1d6f02e82d56df60914917de05a004563a6b8d31c5e962f799525b963f56e7c15a71311e453b8d1900f4b3f1284d7f2b7883e519af013e2a32bf12112962c2ca3c58ccacf70fea420107a10cfd0321569181727f653b4c98e85ef0a7f5cb54b6680054722267782390353defb40b10f0ca14dc7dcac4f80165ebc612fc759d9f9465b12e71740eb83b39fc73ddf3b03f6fed5aa607ba4859e90bb08357d5a6e2b27bedfd2ec081e2de766553d600e181a504d10071c67e1cfdc29170f8e2168d48f2c480465f4b1eaeecb63666f24b4be5f3d9638e86d552519725910071fe71d9e038eafabee251d4523af9b02dcca5447bf84cb368d5a5a6e443ab2fb86be3bc47579b141ab716ef9f882a1687477e3241ac7d975287daff8c32033e6224cd90ac34c7e0746e5d212590f70328e070cb6654c77cfb79048f305537346812f89f71b281ea5955bf065a05fba2a9c77dae2139237de0d4b45f5d92624bb8d0e35f00bf0b6a4dddbc018532ddb2878f6edfe020196a9df3ca2789ca4177fb74ff8dbaf615d711672951678233c2b7d9ff760e87cad8a57824e03dcb60229f6b737a90d130cefed33dfedd215cb7eafd1ceac254dfe0145ee94c2a4c1ea24cd464936bc3ad67cebe11913188950b817a45e76859a0bd2d0fb1e9ec48cfa572a6e91e7f93b6048af8f8312aa0abd2515982dd64f58fbd8686658781e5baddfe898095aaad0c856482fc48195d594089c727c0d8a83154b9508847ad01f8b1e78039f46f225e0987d3a76a0c5d6148f6871c1aead984c786315e8da84992140be4e76f13951c2eeedc2e64333269ae794cb92fe083c8e9ee6048c662067ec4ee96e1776d820099d5c2a936455a3799c8fc5e22c93543c3d1cbeb89e6415542ff66fc588efb7d5cebd2866d3153d6d0ca03a4bc2a2508f94e6c14d9ceb9520d02943b611628b20430fb60b18bc7fe2164dfb53931cf7dc7c636fddfce773cdd0924f3ac8abe34cc5ea336dfe6c96ec47c6e9cf61b4ab453710ba246d1eec2242d7d37c9943f44db12bea896235f4963dad300c748c2bf45b657643d5b37b04bf52225abcfeb3bc10262ef89efe964e0dee2e9bbdef4fcf19c16a7cf202791a24e8b405de5eb10c0e50e7c1761a1e4c0c730872ec7272376960ea7a8553529ec3362199ad931437a12b9a09039a6e08509bb16aa67bb47354dc479a3960c20207643ada2d03d0e61f48b91f7459bb5064ab678c292c5e1cc237b12adfb8c29b06f3af9b5240f8cb3bd03d58ab41b7b0bf1fcc530ba03a7437ae653bbeee9da5896907d63ad6f39979d87877d6316b3e38e4ecbef65744c4935c5d29ac0c1e52b372321d444b0984f7d9a4f04c7d1e9a092a2b0a9d2263f4e064b02d3ef4c7f37ed39136bc3c61395d984573e51fa842e1b387c12f68be988297d5ffaf0d109f23e7c48747245ddd4f8a97e346bd5fd6b1c186bba81d34d1b07e13711f618f961fcf5e798b0191b4e5c51b616789089701f4ffe55fbed5b7189a3c8a7b303ce9be200fa26d91ae5362a948bd797ae6e757e2c66621d050370afde246457cf13a4ef41b289c6812280134af6a3791fd3d55e77bcf4efad946156021488a1e7af68129988719f03b4529387c7f1864e0d6ed2a2b213e0d86b7dd506cd3b0eb29f334226047e933b281e2dacd5025c3343aa8020fb9a4a3eafb49e01ef57cc7d11329f013e614c7e4a361f0c1008e1f44289eeb68a1be857ceac91109ad5060e82fa950c57f74eba833fa5548b18303b1289d36e90da305b5cd98a9cc62a4e89340498f69da37ae5ab929e68b0586e2d95cbca96eefc950713bcfa39dbd1d4991f78e1a9129df8f990dd2ecb3aa68fffc56a552a667e7023df0d31818d806b0f83aa0ef6a673549c2108b842f09ea6496e8425e887d5c0b1c4b34dc2ea98966ed8894e56126c6b7392dcc52b149a09d23cbf0f62fb18a7816c86f2fa6a408ac6c6ed0b23f68c3826cffdaf6a20225

index.html

<!DOCTYPE html>
<!-- Generate with extractcomponent -->
<html>
    <head>
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

        <link rel="stylesheet" type="text/css" href="css/style.component.css">
        
        <script src="https://unpkg.com/vue@2.3.3"></script>
        <script src="https://unpkg.com/react@15/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

        <title>Components</title>

    </head>

    <body>
        <div id = "vapp"></div>
        <div id = "rapp"></div>
        <script type="text/javascript" src="js/build.components.js"></script>

    </body>
</html>