├── .babelrc ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── docs ├── bundle.js └── index.html ├── package-lock.json ├── package.json ├── src ├── docs │ ├── index.html │ ├── index.jsx │ └── styles.css └── lib │ └── index.jsx └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/env", "@babel/react"], 3 | "plugins": [ 4 | "@babel/plugin-proposal-object-rest-spread", 5 | "@babel/plugin-proposal-class-properties" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | /lib -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | docs 2 | src 3 | .babelrc 4 | webpack.config.js -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Markus Englund 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Deprecation notice 2 | 3 | I no longer maintain this boilerplate and I recommend you use [this one](https://github.com/transitive-bullshit/react-modern-library-boilerplate) instead. It uses Rollup to bundle the library which is better for a variety of reasons as compared to using only babel as was done here. Good luck! 4 | 5 | # React component boilerplate 6 | 7 | This is a simple boilerplate project for building a react component package for npm. It is suitable for building any type of UI component or library (like for example a dropdown menu or a toggle-switch). The project contains a correctly transpiled folder for the component library (easy to get wrong) as well as a demo page for showcasing it. The demo can easily be uploaded to _GitHub Pages_. This boilerplate project is meant to be minimal and easy to understand. Linting, testing, prettier etc have been purposefully left out. It does not include a UMD build, as those aren't really used anymore. 8 | 9 | If you are new to building React components for npm you should check out [this guide](https://medium.com/@markus.s.englund/a-guide-to-building-a-react-component-for-npm-68f03b314753). 10 | 11 | ## How it is structured 12 | 13 | The source code has two separate parts – the library and the documentation (demo) page. Both are written in ES6 and JSX, and therefore have to be transpiled by Babel but in different ways. 14 | 15 | ### Component library transpilation 16 | 17 | The library source code, which is located in `src/lib`, is transpiled with Babel but is _not_ bundled with Webpack. Bundling is completely unnecessary, since the developer who will in the end use your library for their application will bundle their entire codebase, which includes your library. More importantly, if your library has any dependencies, bundling them together with your code would be a disaster since it could cause duplication and therefore larger final bundle size. The components still have to be transpiled since many developers have Webpack configured to not transpile their node_modules folder. Some may not be using JSX or ES6 at all, and would therefore be unable to transpile your component. 18 | 19 | ### Demo app transpilation 20 | 21 | The demo app source code lives inside the `src/docs` folder. It is transpiled, bundled and minified by Webpack and Babel into the `docs` folder in the root directory (by running `npm run docs:prod`). This is a completely normal react app with minimal configuration that imports the component library. It has two purposes: 1. To have a way of inspecting your components while you develop the library, and 2. As a demo to showcase to people who try to figure out what your library does. 22 | 23 | The reason that the folder doesn't have a logical name like `demo` is that GitHub Pages requires it to be called `docs` for some reason... 24 | 25 | ## Getting started 26 | 27 | Follow these steps to get started developing your own react component: 28 | 29 | * `git clone https://github.com/yogaboll/react-npm-component-starter.git` 30 | * `npm install` 31 | * `npm run dev` to transpile both the lib and docs folder in watch mode and serve the docs page for you. 32 | * Go to http://127.0.0.1:8000 to see the demo in action. Whenever you change the code in either src/lib or src/docs, the page will automatically update. 33 | 34 | Remember to reset the git history: 35 | 36 | * `rm -rf .git` 37 | * `git init` 38 | * `git add .` 39 | * `git commit -m "setup project"` 40 | 41 | When you have completed development and want to publish to npm: 42 | 43 | * Change the "name" field in the package.json file (the npm package will get this name), as well "description", "author" and any other fields that need to change. 44 | * `npm publish` 45 | * Go to npmjs.com/package/[YOUR COMPONENT NAME]/ to confirm that it has been published. 46 | 47 | Host demo on GitHub Pages: 48 | 49 | * `npm run docs:prod` - Make a production bundle of the demo app. 50 | * Commit your changes to git and push to your GitHub repository. 51 | * On your GitHub repo page, click the **settings** tab and scroll down to the **GitHub Pages** heading. Pick `master branch /docs folder` in the **source** dropdown, And BOOM, your demo page is already live on the internet for free. 52 | * Note: Sometimes it might take about an hour for the page to actually start hosting. Adding /index.html after the url works instantly for whatever reason. 53 | 54 | ## What about CSS? 55 | 56 | ### Inline styles 57 | 58 | The easiest option is to use the style attribute. Like this for example: 59 | 60 | `` 61 | 62 | This is a clean approach since the user of your package doesn't have to separately import a css file. The downside is that you can't use a bunch of css features: pseudo-selectors like `:focus` and `:hover`, media-queries and some prefixed css-properties, which can be a deal breaker. 63 | 64 | ### Separate CSS file 65 | 66 | Your other option is to create a css file inside the `src/lib` folder. It will be automatically copied to the generated `lib` folder. Then you have to ask your users to import it into their app with something like `import "../node_modules/[NAME_OF_YOUR_LIBRARY]/lib/styles.css";` or to manually copy it. Your css class names might be global for the developers entire app so make the class names are unique. 67 | 68 | Keep in mind that it is a bad idea to import the css directly into your component file. This requires the webpack style-loader to work, so any user of your package that does not use this loader will be screwed. 69 | -------------------------------------------------------------------------------- /docs/bundle.js: -------------------------------------------------------------------------------- 1 | !function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=6)}([function(e,t,n){"use strict";e.exports=n(7)},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";function r(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}/* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | var o=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(e){r[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,l,u=r(e),c=1;c=0&&b.splice(t,1)}function l(e){var t=document.createElement("style");return e.attrs.type="text/css",c(t,e.attrs),a(e,t),t}function u(e){var t=document.createElement("link");return e.attrs.type="text/css",e.attrs.rel="stylesheet",c(t,e.attrs),a(e,t),t}function c(e,t){Object.keys(t).forEach(function(n){e.setAttribute(n,t[n])})}function s(e,t){var n,r,o,a;if(t.transform&&e.css){if(!(a=t.transform(e.css)))return function(){};e.css=a}if(t.singleton){var c=v++;n=y||(y=l(t)),r=f.bind(null,n,c,!1),o=f.bind(null,n,c,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=u(t),r=d.bind(null,n,t),o=function(){i(n),n.href&&URL.revokeObjectURL(n.href)}):(n=l(t),r=p.bind(null,n),o=function(){i(n)});return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else o()}}function f(e,t,n,r){var o=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=k(t,o);else{var a=document.createTextNode(o),i=e.childNodes;i[t]&&e.removeChild(i[t]),i.length?e.insertBefore(a,i[t]):e.appendChild(a)}}function p(e,t){var n=t.css,r=t.media;if(r&&e.setAttribute("media",r),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}function d(e,t,n){var r=n.css,o=n.sourceMap,a=void 0===t.convertToAbsoluteUrls&&o;(t.convertToAbsoluteUrls||a)&&(r=C(r)),o&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var i=new Blob([r],{type:"text/css"}),l=e.href;e.href=URL.createObjectURL(i),l&&URL.revokeObjectURL(l)}var h={},m=function(e){var t;return function(){return void 0===t&&(t=e.apply(this,arguments)),t}}(function(){return window&&document&&document.all&&!window.atob}),g=function(e){var t={};return function(n){if(void 0===t[n]){var r=e.call(this,n);if(r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}t[n]=r}return t[n]}}(function(e){return document.querySelector(e)}),y=null,v=0,b=[],C=n(21);e.exports=function(e,t){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");t=t||{},t.attrs="object"==typeof t.attrs?t.attrs:{},t.singleton||"boolean"==typeof t.singleton||(t.singleton=m()),t.insertInto||(t.insertInto="head"),t.insertAt||(t.insertAt="bottom");var n=o(e,t);return r(n,t),function(e){for(var a=[],i=0;iA.length&&A.push(e)}function d(e,t,n,o){var a=typeof e;"undefined"!==a&&"boolean"!==a||(e=null);var i=!1;if(null===e)i=!0;else switch(a){case"string":case"number":i=!0;break;case"object":switch(e.$$typeof){case w:case x:case E:case T:i=!0}}if(i)return n(o,e,""===t?"."+h(e,0):t),1;if(i=0,t=""===t?".":t+":",Array.isArray(e))for(var l=0;lthis.eventPool.length&&this.eventPool.push(e)}function V(e){e.eventPool=[],e.getPooled=j,e.release=z}function B(e,t,n,r){return H.call(this,e,t,n,r)}function K(e,t,n,r){return H.call(this,e,t,n,r)}function W(e,t){switch(e){case"topKeyUp":return-1!==dr.indexOf(t.keyCode);case"topKeyDown":return 229!==t.keyCode;case"topKeyPress":case"topMouseDown":case"topBlur":return!0;default:return!1}}function $(e){return e=e.detail,"object"==typeof e&&"data"in e?e.data:null}function q(e,t){switch(e){case"topCompositionEnd":return $(t);case"topKeyPress":return 32!==t.which?null:(xr=!0,kr);case"topTextInput":return e=t.data,e===kr&&xr?null:e;default:return null}}function Q(e,t){if(Er)return"topCompositionEnd"===e||!hr&&W(e,t)?(e=U(),sr._root=null,sr._startText=null,sr._fallbackText=null,Er=!1,e):null;switch(e){case"topPaste":return null;case"topKeyPress":if(!(t.ctrlKey||t.altKey||t.metaKey)||t.ctrlKey&&t.altKey){if(t.char&&1Vr.length&&Vr.push(e)}}}function Me(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n["Webkit"+e]="webkit"+t,n["Moz"+e]="moz"+t,n["ms"+e]="MS"+t,n["O"+e]="o"+t.toLowerCase(),n}function De(e){if(qr[e])return qr[e];if(!$r[e])return e;var t,n=$r[e];for(t in n)if(n.hasOwnProperty(t)&&t in Qr)return qr[e]=n[t];return""}function Ae(e){return Object.prototype.hasOwnProperty.call(e,Jr)||(e[Jr]=Xr++,Yr[e[Jr]]={}),Yr[e[Jr]]}function Le(e){for(;e&&e.firstChild;)e=e.firstChild;return e}function Ue(e,t){var n=Le(e);e=0;for(var r;n;){if(3===n.nodeType){if(r=e+n.textContent.length,e<=t&&r>=t)return{node:n,offset:t-e};e=r}e:{for(;n;){if(n.nextSibling){n=n.nextSibling;break e}n=n.parentNode}n=void 0}n=Le(n)}}function Fe(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&("input"===t&&"text"===e.type||"textarea"===t||"true"===e.contentEditable)}function He(e,t){if(oo||null==to||to!==En())return null;var n=to;return"selectionStart"in n&&Fe(n)?n={start:n.selectionStart,end:n.selectionEnd}:window.getSelection?(n=window.getSelection(),n={anchorNode:n.anchorNode,anchorOffset:n.anchorOffset,focusNode:n.focusNode,focusOffset:n.focusOffset}):n=void 0,ro&&Tn(ro,n)?null:(ro=n,e=H.getPooled(eo.select,no,e,t),e.type="select",e.target=to,D(e),e)}function je(e,t,n,r){return H.call(this,e,t,n,r)}function ze(e,t,n,r){return H.call(this,e,t,n,r)}function Ve(e,t,n,r){return H.call(this,e,t,n,r)}function Be(e){var t=e.keyCode;return"charCode"in e?0===(e=e.charCode)&&13===t&&(e=13):e=t,32<=e||13===e?e:0}function Ke(e,t,n,r){return H.call(this,e,t,n,r)}function We(e,t,n,r){return H.call(this,e,t,n,r)}function $e(e,t,n,r){return H.call(this,e,t,n,r)}function qe(e,t,n,r){return H.call(this,e,t,n,r)}function Qe(e,t,n,r){return H.call(this,e,t,n,r)}function Ge(e){0>po||(e.current=fo[po],fo[po]=null,po--)}function Ye(e,t){po++,fo[po]=e.current,e.current=t}function Xe(e){return Ze(e)?go:ho.current}function Je(e,t){var n=e.type.contextTypes;if(!n)return Pn;var r=e.stateNode;if(r&&r.__reactInternalMemoizedUnmaskedChildContext===t)return r.__reactInternalMemoizedMaskedChildContext;var o,a={};for(o in n)a[o]=t[o];return r&&(e=e.stateNode,e.__reactInternalMemoizedUnmaskedChildContext=t,e.__reactInternalMemoizedMaskedChildContext=a),a}function Ze(e){return 2===e.tag&&null!=e.type.childContextTypes}function et(e){Ze(e)&&(Ge(mo,e),Ge(ho,e))}function tt(e,t,n){null!=ho.cursor&&r("168"),Ye(ho,t,e),Ye(mo,n,e)}function nt(e,t){var n=e.stateNode,o=e.type.childContextTypes;if("function"!=typeof n.getChildContext)return t;n=n.getChildContext();for(var a in n)a in o||r("108",ke(e)||"Unknown",a);return kn({},t,n)}function rt(e){if(!Ze(e))return!1;var t=e.stateNode;return t=t&&t.__reactInternalMemoizedMergedChildContext||Pn,go=ho.current,Ye(ho,t,e),Ye(mo,mo.current,e),!0}function ot(e,t){var n=e.stateNode;if(n||r("169"),t){var o=nt(e,go);n.__reactInternalMemoizedMergedChildContext=o,Ge(mo,e),Ge(ho,e),Ye(ho,o,e)}else Ge(mo,e);Ye(mo,t,e)}function at(e,t,n){this.tag=e,this.key=t,this.stateNode=this.type=null,this.sibling=this.child=this.return=null,this.index=0,this.memoizedState=this.updateQueue=this.memoizedProps=this.pendingProps=this.ref=null,this.internalContextTag=n,this.effectTag=0,this.lastEffect=this.firstEffect=this.nextEffect=null,this.expirationTime=0,this.alternate=null}function it(e,t,n){var r=e.alternate;return null===r?(r=new at(e.tag,e.key,e.internalContextTag),r.type=e.type,r.stateNode=e.stateNode,r.alternate=e,e.alternate=r):(r.effectTag=0,r.nextEffect=null,r.firstEffect=null,r.lastEffect=null),r.expirationTime=n,r.pendingProps=t,r.child=e.child,r.memoizedProps=e.memoizedProps,r.memoizedState=e.memoizedState,r.updateQueue=e.updateQueue,r.sibling=e.sibling,r.index=e.index,r.ref=e.ref,r}function lt(e,t,n){var o=void 0,a=e.type,i=e.key;return"function"==typeof a?(o=a.prototype&&a.prototype.isReactComponent?new at(2,i,t):new at(0,i,t),o.type=a,o.pendingProps=e.props):"string"==typeof a?(o=new at(5,i,t),o.type=a,o.pendingProps=e.props):"object"==typeof a&&null!==a&&"number"==typeof a.tag?(o=a,o.pendingProps=e.props):r("130",null==a?a:typeof a,""),o.expirationTime=n,o}function ut(e,t,n,r){return t=new at(10,r,t),t.pendingProps=e,t.expirationTime=n,t}function ct(e,t,n){return t=new at(6,null,t),t.pendingProps=e,t.expirationTime=n,t}function st(e,t,n){return t=new at(7,e.key,t),t.type=e.handler,t.pendingProps=e,t.expirationTime=n,t}function ft(e,t,n){return e=new at(9,null,t),e.expirationTime=n,e}function pt(e,t,n){return t=new at(4,e.key,t),t.pendingProps=e.children||[],t.expirationTime=n,t.stateNode={containerInfo:e.containerInfo,pendingChildren:null,implementation:e.implementation},t}function dt(e){return function(t){try{return e(t)}catch(e){}}}function ht(e){if("undefined"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__)return!1;var t=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(t.isDisabled||!t.supportsFiber)return!0;try{var n=t.inject(e);yo=dt(function(e){return t.onCommitFiberRoot(n,e)}),vo=dt(function(e){return t.onCommitFiberUnmount(n,e)})}catch(e){}return!0}function mt(e){"function"==typeof yo&&yo(e)}function gt(e){"function"==typeof vo&&vo(e)}function yt(e){return{baseState:e,expirationTime:0,first:null,last:null,callbackList:null,hasForceUpdate:!1,isInitialized:!1}}function vt(e,t){null===e.last?e.first=e.last=t:(e.last.next=t,e.last=t),(0===e.expirationTime||e.expirationTime>t.expirationTime)&&(e.expirationTime=t.expirationTime)}function bt(e,t){var n=e.alternate,r=e.updateQueue;null===r&&(r=e.updateQueue=yt(null)),null!==n?null===(e=n.updateQueue)&&(e=n.updateQueue=yt(null)):e=null,e=e!==r?e:null,null===e?vt(r,t):null===r.last||null===e.last?(vt(r,t),vt(e,t)):(vt(r,t),e.last=t)}function Ct(e,t,n,r){return e=e.partialState,"function"==typeof e?e.call(t,n,r):e}function kt(e,t,n,r,o,a){null!==e&&e.updateQueue===n&&(n=t.updateQueue={baseState:n.baseState,expirationTime:n.expirationTime,first:n.first,last:n.last,isInitialized:n.isInitialized,callbackList:null,hasForceUpdate:!1}),n.expirationTime=0,n.isInitialized?e=n.baseState:(e=n.baseState=t.memoizedState,n.isInitialized=!0);for(var i=!0,l=n.first,u=!1;null!==l;){var c=l.expirationTime;if(c>a){var s=n.expirationTime;(0===s||s>c)&&(n.expirationTime=c),u||(u=!0,n.baseState=e)}else u||(n.first=l.next,null===n.first&&(n.last=null)),l.isReplace?(e=Ct(l,r,e,o),i=!0):(c=Ct(l,r,e,o))&&(e=i?kn({},e,c):kn(e,c),i=!1),l.isForced&&(n.hasForceUpdate=!0),null!==l.callback&&(c=n.callbackList,null===c&&(c=n.callbackList=[]),c.push(l));l=l.next}return null!==n.callbackList?t.effectTag|=32:null!==n.first||n.hasForceUpdate||(t.updateQueue=null),u||(n.baseState=e),e}function wt(e,t){var n=e.callbackList;if(null!==n)for(e.callbackList=null,e=0;ep?(d=f,f=null):d=f.sibling;var y=m(r,f,l[p],u);if(null===y){null===f&&(f=d);break}e&&f&&null===y.alternate&&t(r,f),a=i(y,a,p),null===s?c=y:s.sibling=y,s=y,f=d}if(p===l.length)return n(r,f),c;if(null===f){for(;pd?(y=p,p=null):y=p.sibling;var b=m(a,p,v.value,c);if(null===b){p||(p=y);break}e&&p&&null===b.alternate&&t(a,p),l=i(b,l,d),null===f?s=b:f.sibling=b,f=b,p=y}if(v.done)return n(a,p),s;if(null===p){for(;!v.done;d++,v=u.next())null!==(v=h(a,v.value,c))&&(l=i(v,l,d),null===f?s=v:f.sibling=v,f=v);return s}for(p=o(a,p);!v.done;d++,v=u.next())null!==(v=g(p,a,d,v.value,c))&&(e&&null!==v.alternate&&p.delete(null===v.key?d:v.key),l=i(v,l,d),null===f?s=v:f.sibling=v,f=v);return e&&p.forEach(function(e){return t(a,e)}),s}return function(e,o,i,u){"object"==typeof i&&null!==i&&i.type===Eo&&null===i.key&&(i=i.props.children);var c="object"==typeof i&&null!==i;if(c)switch(i.$$typeof){case Co:e:{var s=i.key;for(c=o;null!==c;){if(c.key===s){if(10===c.tag?i.type===Eo:c.type===i.type){n(e,c.sibling),o=a(c,i.type===Eo?i.props.children:i.props,u),o.ref=Tt(c,i),o.return=e,e=o;break e}n(e,c);break}t(e,c),c=c.sibling}i.type===Eo?(o=ut(i.props.children,e.internalContextTag,u,i.key),o.return=e,e=o):(u=lt(i,e.internalContextTag,u),u.ref=Tt(o,i),u.return=e,e=u)}return l(e);case ko:e:{for(c=i.key;null!==o;){if(o.key===c){if(7===o.tag){n(e,o.sibling),o=a(o,i,u),o.return=e,e=o;break e}n(e,o);break}t(e,o),o=o.sibling}o=st(i,e.internalContextTag,u),o.return=e,e=o}return l(e);case wo:e:{if(null!==o){if(9===o.tag){n(e,o.sibling),o=a(o,null,u),o.type=i.value,o.return=e,e=o;break e}n(e,o)}o=ft(i,e.internalContextTag,u),o.type=i.value,o.return=e,e=o}return l(e);case xo:e:{for(c=i.key;null!==o;){if(o.key===c){if(4===o.tag&&o.stateNode.containerInfo===i.containerInfo&&o.stateNode.implementation===i.implementation){n(e,o.sibling),o=a(o,i.children||[],u),o.return=e,e=o;break e}n(e,o);break}t(e,o),o=o.sibling}o=pt(i,e.internalContextTag,u),o.return=e,e=o}return l(e)}if("string"==typeof i||"number"==typeof i)return i=""+i,null!==o&&6===o.tag?(n(e,o.sibling),o=a(o,i,u)):(n(e,o),o=ct(i,e.internalContextTag,u)),o.return=e,e=o,l(e);if(So(i))return y(e,o,i,u);if(Et(i))return v(e,o,i,u);if(c&&St(e,i),void 0===i)switch(e.tag){case 2:case 1:u=e.type,r("152",u.displayName||u.name||"Component")}return n(e,o)}}function Pt(e,t,n,o,a){function i(e,t,n){var r=t.expirationTime;t.child=null===e?Po(t,null,n,r):_o(t,e.child,n,r)}function l(e,t){var n=t.ref;null===n||e&&e.ref===n||(t.effectTag|=128)}function u(e,t,n,r){if(l(e,t),!n)return r&&ot(t,!1),s(e,t);n=t.stateNode,zr.current=t;var o=n.render();return t.effectTag|=1,i(e,t,o),t.memoizedState=n.state,t.memoizedProps=n.props,r&&ot(t,!0),t.child}function c(e){var t=e.stateNode;t.pendingContext?tt(e,t.pendingContext,t.pendingContext!==t.context):t.context&&tt(e,t.context,!1),g(e,t.containerInfo)}function s(e,t){if(null!==e&&t.child!==e.child&&r("153"),null!==t.child){e=t.child;var n=it(e,e.pendingProps,e.expirationTime);for(t.child=n,n.return=t;null!==e.sibling;)e=e.sibling,n=n.sibling=it(e,e.pendingProps,e.expirationTime),n.return=t;n.sibling=null}return t.child}function f(e,t){switch(t.tag){case 3:c(t);break;case 2:rt(t);break;case 4:g(t,t.stateNode.containerInfo)}return null}var p=e.shouldSetTextContent,d=e.useSyncScheduling,h=e.shouldDeprioritizeSubtree,m=t.pushHostContext,g=t.pushHostContainer,y=n.enterHydrationState,v=n.resetHydrationState,b=n.tryToClaimNextHydratableInstance;e=xt(o,a,function(e,t){e.memoizedProps=t},function(e,t){e.memoizedState=t});var C=e.adoptClassInstance,k=e.constructClassInstance,w=e.mountClassInstance,x=e.updateClassInstance;return{beginWork:function(e,t,n){if(0===t.expirationTime||t.expirationTime>n)return f(e,t);switch(t.tag){case 0:null!==e&&r("155");var o=t.type,a=t.pendingProps,E=Xe(t);return E=Je(t,E),o=o(a,E),t.effectTag|=1,"object"==typeof o&&null!==o&&"function"==typeof o.render?(t.tag=2,a=rt(t),C(t,o),w(t,n),t=u(e,t,!0,a)):(t.tag=1,i(e,t,o),t.memoizedProps=a,t=t.child),t;case 1:e:{if(a=t.type,n=t.pendingProps,o=t.memoizedProps,mo.current)null===n&&(n=o);else if(null===n||o===n){t=s(e,t);break e}o=Xe(t),o=Je(t,o),a=a(n,o),t.effectTag|=1,i(e,t,a),t.memoizedProps=n,t=t.child}return t;case 2:return a=rt(t),o=void 0,null===e?t.stateNode?r("153"):(k(t,t.pendingProps),w(t,n),o=!0):o=x(e,t,n),u(e,t,o,a);case 3:return c(t),a=t.updateQueue,null!==a?(o=t.memoizedState,a=kt(e,t,a,null,null,n),o===a?(v(),t=s(e,t)):(o=a.element,E=t.stateNode,(null===e||null===e.child)&&E.hydrate&&y(t)?(t.effectTag|=2,t.child=Po(t,null,o,n)):(v(),i(e,t,o)),t.memoizedState=a,t=t.child)):(v(),t=s(e,t)),t;case 5:m(t),null===e&&b(t),a=t.type;var T=t.memoizedProps;return o=t.pendingProps,null===o&&null===(o=T)&&r("154"),E=null!==e?e.memoizedProps:null,mo.current||null!==o&&T!==o?(T=o.children,p(a,o)?T=null:E&&p(a,E)&&(t.effectTag|=16),l(e,t),2147483647!==n&&!d&&h(a,o)?(t.expirationTime=2147483647,t=null):(i(e,t,T),t.memoizedProps=o,t=t.child)):t=s(e,t),t;case 6:return null===e&&b(t),e=t.pendingProps,null===e&&(e=t.memoizedProps),t.memoizedProps=e,null;case 8:t.tag=7;case 7:return a=t.pendingProps,mo.current?null===a&&null===(a=e&&e.memoizedProps)&&r("154"):null!==a&&t.memoizedProps!==a||(a=t.memoizedProps),o=a.children,t.stateNode=null===e?Po(t,t.stateNode,o,n):_o(t,t.stateNode,o,n),t.memoizedProps=a,t.stateNode;case 9:return null;case 4:e:{if(g(t,t.stateNode.containerInfo),a=t.pendingProps,mo.current)null===a&&null==(a=e&&e.memoizedProps)&&r("154");else if(null===a||t.memoizedProps===a){t=s(e,t);break e}null===e?t.child=_o(t,null,a,n):i(e,t,a),t.memoizedProps=a,t=t.child}return t;case 10:e:{if(n=t.pendingProps,mo.current)null===n&&(n=t.memoizedProps);else if(null===n||t.memoizedProps===n){t=s(e,t);break e}i(e,t,n),t.memoizedProps=n,t=t.child}return t;default:r("156")}},beginFailedWork:function(e,t,n){switch(t.tag){case 2:rt(t);break;case 3:c(t);break;default:r("157")}return t.effectTag|=64,null===e?t.child=null:t.child!==e.child&&(t.child=e.child),0===t.expirationTime||t.expirationTime>n?f(e,t):(t.firstEffect=null,t.lastEffect=null,t.child=null===e?Po(t,null,null,n):_o(t,e.child,null,n),2===t.tag&&(e=t.stateNode,t.memoizedProps=e.props,t.memoizedState=e.state),t.child)}}}function Nt(e,t,n){function o(e){e.effectTag|=4}var a=e.createInstance,i=e.createTextInstance,l=e.appendInitialChild,u=e.finalizeInitialChildren,c=e.prepareUpdate,s=e.persistence,f=t.getRootHostContainer,p=t.popHostContext,d=t.getHostContext,h=t.popHostContainer,m=n.prepareToHydrateHostInstance,g=n.prepareToHydrateHostTextInstance,y=n.popHydrationState,v=void 0,b=void 0,C=void 0;return e.mutation?(v=function(){},b=function(e,t,n){(t.updateQueue=n)&&o(t)},C=function(e,t,n,r){n!==r&&o(t)}):r(s?"235":"236"),{completeWork:function(e,t,n){var s=t.pendingProps;switch(null===s?s=t.memoizedProps:2147483647===t.expirationTime&&2147483647!==n||(t.pendingProps=null),t.tag){case 1:return null;case 2:return et(t),null;case 3:return h(t),Ge(mo,t),Ge(ho,t),s=t.stateNode,s.pendingContext&&(s.context=s.pendingContext,s.pendingContext=null),null!==e&&null!==e.child||(y(t),t.effectTag&=-3),v(t),null;case 5:p(t),n=f();var k=t.type;if(null!==e&&null!=t.stateNode){var w=e.memoizedProps,x=t.stateNode,E=d();x=c(x,k,w,s,n,E),b(e,t,x,k,w,s,n),e.ref!==t.ref&&(t.effectTag|=128)}else{if(!s)return null===t.stateNode&&r("166"),null;if(e=d(),y(t))m(t,n,e)&&o(t);else{e=a(k,s,n,e,t);e:for(w=t.child;null!==w;){if(5===w.tag||6===w.tag)l(e,w.stateNode);else if(4!==w.tag&&null!==w.child){w.child.return=w,w=w.child;continue}if(w===t)break;for(;null===w.sibling;){if(null===w.return||w.return===t)break e;w=w.return}w.sibling.return=w.return,w=w.sibling}u(e,k,s,n)&&o(t),t.stateNode=e}null!==t.ref&&(t.effectTag|=128)}return null;case 6:if(e&&null!=t.stateNode)C(e,t,e.memoizedProps,s);else{if("string"!=typeof s)return null===t.stateNode&&r("166"),null;e=f(),n=d(),y(t)?g(t)&&o(t):t.stateNode=i(s,e,n,t)}return null;case 7:(s=t.memoizedProps)||r("165"),t.tag=8,k=[];e:for((w=t.stateNode)&&(w.return=t);null!==w;){if(5===w.tag||6===w.tag||4===w.tag)r("247");else if(9===w.tag)k.push(w.type);else if(null!==w.child){w.child.return=w,w=w.child;continue}for(;null===w.sibling;){if(null===w.return||w.return===t)break e;w=w.return}w.sibling.return=w.return,w=w.sibling}return w=s.handler,s=w(s.props,k),t.child=_o(t,null!==e?e.child:null,s,n),t.child;case 8:return t.tag=7,null;case 9:case 10:return null;case 4:return h(t),v(t),null;case 0:r("167");default:r("156")}}}}function Ot(e,t){function n(e){var n=e.ref;if(null!==n)try{n(null)}catch(n){t(e,n)}}function o(e){switch("function"==typeof gt&>(e),e.tag){case 2:n(e);var r=e.stateNode;if("function"==typeof r.componentWillUnmount)try{r.props=e.memoizedProps,r.state=e.memoizedState,r.componentWillUnmount()}catch(n){t(e,n)}break;case 5:n(e);break;case 7:a(e.stateNode);break;case 4:c&&l(e)}}function a(e){for(var t=e;;)if(o(t),null===t.child||c&&4===t.tag){if(t===e)break;for(;null===t.sibling;){if(null===t.return||t.return===e)return;t=t.return}t.sibling.return=t.return,t=t.sibling}else t.child.return=t,t=t.child}function i(e){return 5===e.tag||3===e.tag||4===e.tag}function l(e){for(var t=e,n=!1,i=void 0,l=void 0;;){if(!n){n=t.return;e:for(;;){switch(null===n&&r("160"),n.tag){case 5:i=n.stateNode,l=!1;break e;case 3:case 4:i=n.stateNode.containerInfo,l=!0;break e}n=n.return}n=!0}if(5===t.tag||6===t.tag)a(t),l?b(i,t.stateNode):v(i,t.stateNode);else if(4===t.tag?i=t.stateNode.containerInfo:o(t),null!==t.child){t.child.return=t,t=t.child;continue}if(t===e)break;for(;null===t.sibling;){if(null===t.return||t.return===e)return;t=t.return,4===t.tag&&(n=!1)}t.sibling.return=t.return,t=t.sibling}}var u=e.getPublicInstance,c=e.mutation;e=e.persistence,c||r(e?"235":"236");var s=c.commitMount,f=c.commitUpdate,p=c.resetTextContent,d=c.commitTextUpdate,h=c.appendChild,m=c.appendChildToContainer,g=c.insertBefore,y=c.insertInContainerBefore,v=c.removeChild,b=c.removeChildFromContainer;return{commitResetTextContent:function(e){p(e.stateNode)},commitPlacement:function(e){e:{for(var t=e.return;null!==t;){if(i(t)){var n=t;break e}t=t.return}r("160"),n=void 0}var o=t=void 0;switch(n.tag){case 5:t=n.stateNode,o=!1;break;case 3:case 4:t=n.stateNode.containerInfo,o=!0;break;default:r("161")}16&n.effectTag&&(p(t),n.effectTag&=-17);e:t:for(n=e;;){for(;null===n.sibling;){if(null===n.return||i(n.return)){n=null;break e}n=n.return}for(n.sibling.return=n.return,n=n.sibling;5!==n.tag&&6!==n.tag;){if(2&n.effectTag)continue t;if(null===n.child||4===n.tag)continue t;n.child.return=n,n=n.child}if(!(2&n.effectTag)){n=n.stateNode;break e}}for(var a=e;;){if(5===a.tag||6===a.tag)n?o?y(t,a.stateNode,n):g(t,a.stateNode,n):o?m(t,a.stateNode):h(t,a.stateNode);else if(4!==a.tag&&null!==a.child){a.child.return=a,a=a.child;continue}if(a===e)break;for(;null===a.sibling;){if(null===a.return||a.return===e)return;a=a.return}a.sibling.return=a.return,a=a.sibling}},commitDeletion:function(e){l(e),e.return=null,e.child=null,e.alternate&&(e.alternate.child=null,e.alternate.return=null)},commitWork:function(e,t){switch(t.tag){case 2:break;case 5:var n=t.stateNode;if(null!=n){var o=t.memoizedProps;e=null!==e?e.memoizedProps:o;var a=t.type,i=t.updateQueue;t.updateQueue=null,null!==i&&f(n,i,a,e,o,t)}break;case 6:null===t.stateNode&&r("162"),n=t.memoizedProps,d(t.stateNode,null!==e?e.memoizedProps:n,n);break;case 3:break;default:r("163")}},commitLifeCycles:function(e,t){switch(t.tag){case 2:var n=t.stateNode;if(4&t.effectTag)if(null===e)n.props=t.memoizedProps,n.state=t.memoizedState,n.componentDidMount();else{var o=e.memoizedProps;e=e.memoizedState,n.props=t.memoizedProps,n.state=t.memoizedState,n.componentDidUpdate(o,e)}t=t.updateQueue,null!==t&&wt(t,n);break;case 3:n=t.updateQueue,null!==n&&wt(n,null!==t.child?t.child.stateNode:null);break;case 5:n=t.stateNode,null===e&&4&t.effectTag&&s(n,t.type,t.memoizedProps,t);break;case 6:case 4:break;default:r("163")}},commitAttachRef:function(e){var t=e.ref;if(null!==t){var n=e.stateNode;switch(e.tag){case 5:t(u(n));break;default:t(n)}}},commitDetachRef:function(e){null!==(e=e.ref)&&e(null)}}}function It(e){function t(e){return e===No&&r("174"),e}var n=e.getChildHostContext,o=e.getRootHostContext,a={current:No},i={current:No},l={current:No};return{getHostContext:function(){return t(a.current)},getRootHostContainer:function(){return t(l.current)},popHostContainer:function(e){Ge(a,e),Ge(i,e),Ge(l,e)},popHostContext:function(e){i.current===e&&(Ge(a,e),Ge(i,e))},pushHostContainer:function(e,t){Ye(l,t,e),t=o(t),Ye(i,e,e),Ye(a,t,e)},pushHostContext:function(e){var r=t(l.current),o=t(a.current);r=n(o,e.type,r),o!==r&&(Ye(i,e,e),Ye(a,r,e))},resetHostContainer:function(){a.current=No,l.current=No}}}function Rt(e){function t(e,t){var n=new at(5,null,0);n.type="DELETED",n.stateNode=t,n.return=e,n.effectTag=8,null!==e.lastEffect?(e.lastEffect.nextEffect=n,e.lastEffect=n):e.firstEffect=e.lastEffect=n}function n(e,t){switch(e.tag){case 5:return null!==(t=i(t,e.type,e.pendingProps))&&(e.stateNode=t,!0);case 6:return null!==(t=l(t,e.pendingProps))&&(e.stateNode=t,!0);default:return!1}}function o(e){for(e=e.return;null!==e&&5!==e.tag&&3!==e.tag;)e=e.return;p=e}var a=e.shouldSetTextContent;if(!(e=e.hydration))return{enterHydrationState:function(){return!1},resetHydrationState:function(){},tryToClaimNextHydratableInstance:function(){},prepareToHydrateHostInstance:function(){r("175")},prepareToHydrateHostTextInstance:function(){r("176")},popHydrationState:function(){return!1}};var i=e.canHydrateInstance,l=e.canHydrateTextInstance,u=e.getNextHydratableSibling,c=e.getFirstHydratableChild,s=e.hydrateInstance,f=e.hydrateTextInstance,p=null,d=null,h=!1;return{enterHydrationState:function(e){return d=c(e.stateNode.containerInfo),p=e,h=!0},resetHydrationState:function(){d=p=null,h=!1},tryToClaimNextHydratableInstance:function(e){if(h){var r=d;if(r){if(!n(e,r)){if(!(r=u(r))||!n(e,r))return e.effectTag|=2,h=!1,void(p=e);t(p,d)}p=e,d=c(r)}else e.effectTag|=2,h=!1,p=e}},prepareToHydrateHostInstance:function(e,t,n){return t=s(e.stateNode,e.type,e.memoizedProps,t,n,e),e.updateQueue=t,null!==t},prepareToHydrateHostTextInstance:function(e){return f(e.stateNode,e.memoizedProps,e)},popHydrationState:function(e){if(e!==p)return!1;if(!h)return o(e),h=!0,!1;var n=e.type;if(5!==e.tag||"head"!==n&&"body"!==n&&!a(n,e.memoizedProps))for(n=d;n;)t(e,n),n=u(n);return o(e),d=p?u(e.stateNode):null,!0}}}function Mt(e){function t(e){ae=G=!0;var t=e.stateNode;if(t.current===e&&r("177"),t.isReadyForCommit=!1,zr.current=null,1i.expirationTime)&&(a=i.expirationTime),i=i.sibling;o.expirationTime=a}if(null!==t)return t;if(null!==n&&(null===n.firstEffect&&(n.firstEffect=e.firstEffect),null!==e.lastEffect&&(null!==n.lastEffect&&(n.lastEffect.nextEffect=e.firstEffect),n.lastEffect=e.lastEffect),1e))if(J<=q)for(;null!==Y;)Y=c(Y)?a(Y):o(Y);else for(;null!==Y&&!w();)Y=c(Y)?a(Y):o(Y)}else if(!(0===J||J>e))if(J<=q)for(;null!==Y;)Y=o(Y);else for(;null!==Y&&!w();)Y=o(Y)}function l(e,t){if(G&&r("243"),G=!0,e.isReadyForCommit=!1,e!==X||t!==J||null===Y){for(;-1t)&&(e.expirationTime=t),null!==e.alternate&&(0===e.alternate.expirationTime||e.alternate.expirationTime>t)&&(e.alternate.expirationTime=t),null===e.return){if(3!==e.tag)break;var n=e.stateNode;!G&&n===X&&tCe&&r("185"),null===o.nextScheduledRoot)o.remainingExpirationTime=a,null===ue?(le=ue=o,o.nextScheduledRoot=o):(ue=ue.nextScheduledRoot=o,ue.nextScheduledRoot=le);else{var i=o.remainingExpirationTime;(0===i||ace)return;V(se)}var t=j()-$;ce=e,se=z(b,{timeout:10*(e-2)-t})}function v(){var e=0,t=null;if(null!==ue)for(var n=ue,o=le;null!==o;){var a=o.remainingExpirationTime;if(0===a){if((null===n||null===ue)&&r("244"),o===o.nextScheduledRoot){le=ue=o.nextScheduledRoot=null;break}if(o===le)le=a=o.nextScheduledRoot,ue.nextScheduledRoot=a,o.nextScheduledRoot=null;else{if(o===ue){ue=n,ue.nextScheduledRoot=le,o.nextScheduledRoot=null;break}n.nextScheduledRoot=o.nextScheduledRoot,o.nextScheduledRoot=null}o=n.nextScheduledRoot}else{if((0===e||axe)&&(he=!0)}function x(e){null===pe&&r("246"),pe.remainingExpirationTime=0,me||(me=!0,ge=e)}var E=It(e),T=Rt(e),S=E.popHostContainer,_=E.popHostContext,P=E.resetHostContainer,N=Pt(e,E,T,d,p),O=N.beginWork,I=N.beginFailedWork,R=Nt(e,E,T).completeWork;E=Ot(e,u);var M=E.commitResetTextContent,D=E.commitPlacement,A=E.commitDeletion,L=E.commitWork,U=E.commitLifeCycles,F=E.commitAttachRef,H=E.commitDetachRef,j=e.now,z=e.scheduleDeferredCallback,V=e.cancelDeferredCallback,B=e.useSyncScheduling,K=e.prepareForCommit,W=e.resetAfterCommit,$=j(),q=2,Q=0,G=!1,Y=null,X=null,J=0,Z=null,ee=null,te=null,ne=null,re=null,oe=!1,ae=!1,ie=!1,le=null,ue=null,ce=0,se=-1,fe=!1,pe=null,de=0,he=!1,me=!1,ge=null,ye=null,ve=!1,be=!1,Ce=1e3,we=0,xe=1;return{computeAsyncExpiration:f,computeExpirationForFiber:p,scheduleWork:d,batchedUpdates:function(e,t){var n=ve;ve=!0;try{return e(t)}finally{(ve=n)||fe||C(1,null)}},unbatchedUpdates:function(e){if(ve&&!be){be=!0;try{return e()}finally{be=!1}}return e()},flushSync:function(e){var t=ve;ve=!0;try{e:{var n=Q;Q=1;try{var o=e();break e}finally{Q=n}o=void 0}return o}finally{ve=t,fe&&r("187"),C(1,null)}},deferredUpdates:function(e){var t=Q;Q=f();try{return e()}finally{Q=t}}}}function Dt(e){function t(e){return e=Se(e),null===e?null:e.stateNode}var n=e.getPublicInstance;e=Mt(e);var o=e.computeAsyncExpiration,a=e.computeExpirationForFiber,i=e.scheduleWork;return{createContainer:function(e,t){var n=new at(3,null,0);return e={current:n,containerInfo:e,pendingChildren:null,remainingExpirationTime:0,isReadyForCommit:!1,finishedWork:null,context:null,pendingContext:null,hydrate:t,nextScheduledRoot:null},n.stateNode=e},updateContainer:function(e,t,n,l){var u=t.current;if(n){n=n._reactInternalFiber;var c;e:{for(2===we(n)&&2===n.tag||r("170"),c=n;3!==c.tag;){if(Ze(c)){c=c.stateNode.__reactInternalMemoizedMergedChildContext;break e}(c=c.return)||r("171")}c=c.stateNode.context}n=Ze(n)?nt(n,c):c}else n=Pn;null===t.context?t.context=n:t.pendingContext=n,t=l,t=void 0===t?null:t,l=null!=e&&null!=e.type&&null!=e.type.prototype&&!0===e.type.prototype.unstable_isAsyncReactComponent?o():a(u),bt(u,{expirationTime:l,partialState:{element:e},callback:t,isReplace:!1,isForced:!1,nextCallback:null,next:null}),i(u,l)},batchedUpdates:e.batchedUpdates,unbatchedUpdates:e.unbatchedUpdates,deferredUpdates:e.deferredUpdates,flushSync:e.flushSync,getPublicRootInstance:function(e){if(e=e.current,!e.child)return null;switch(e.child.tag){case 5:return n(e.child.stateNode);default:return e.child.stateNode}},findHostInstance:t,findHostInstanceWithNoPortals:function(e){return e=_e(e),null===e?null:e.stateNode},injectIntoDevTools:function(e){var n=e.findFiberByHostInstance;return ht(kn({},e,{findHostInstanceByFiber:function(e){return t(e)},findFiberByHostInstance:function(e){return n?n(e):null}}))}}}function At(e,t,n){var r=3n||r.hasOverloadedBooleanValue&&!1===n?Ht(e,t):r.mustUseProperty?e[r.propertyName]=n:(t=r.attributeName,(o=r.attributeNamespace)?e.setAttributeNS(o,t,""+n):r.hasBooleanValue||r.hasOverloadedBooleanValue&&!0===n?e.setAttribute(t,""):e.setAttribute(t,""+n))}else Ft(e,t,a(t,n)?n:null)}function Ft(e,t,n){Lt(t)&&(null==n?e.removeAttribute(t):e.setAttribute(t,""+n))}function Ht(e,t){var n=i(t);n?(t=n.mutationMethod)?t(e,void 0):n.mustUseProperty?e[n.propertyName]=!n.hasBooleanValue&&"":e.removeAttribute(n.attributeName):e.removeAttribute(t)}function jt(e,t){var n=t.value,r=t.checked;return kn({type:void 0,step:void 0,min:void 0,max:void 0},t,{defaultChecked:void 0,defaultValue:void 0,value:null!=n?n:e._wrapperState.initialValue,checked:null!=r?r:e._wrapperState.initialChecked})}function zt(e,t){var n=t.defaultValue;e._wrapperState={initialChecked:null!=t.checked?t.checked:t.defaultChecked,initialValue:null!=t.value?t.value:n,controlled:"checkbox"===t.type||"radio"===t.type?null!=t.checked:null!=t.value}}function Vt(e,t){null!=(t=t.checked)&&Ut(e,"checked",t)}function Bt(e,t){Vt(e,t);var n=t.value;null!=n?0===n&&""===e.value?e.value="0":"number"===t.type?(t=parseFloat(e.value)||0,(n!=t||n==t&&e.value!=n)&&(e.value=""+n)):e.value!==""+n&&(e.value=""+n):(null==t.value&&null!=t.defaultValue&&e.defaultValue!==""+t.defaultValue&&(e.defaultValue=""+t.defaultValue),null==t.checked&&null!=t.defaultChecked&&(e.defaultChecked=!!t.defaultChecked))}function Kt(e,t){switch(t.type){case"submit":case"reset":break;case"color":case"date":case"datetime":case"datetime-local":case"month":case"time":case"week":e.value="",e.value=e.defaultValue;break;default:e.value=e.value}t=e.name,""!==t&&(e.name=""),e.defaultChecked=!e.defaultChecked,e.defaultChecked=!e.defaultChecked,""!==t&&(e.name=t)}function Wt(e){var t="";return bn.Children.forEach(e,function(e){null==e||"string"!=typeof e&&"number"!=typeof e||(t+=e)}),t}function $t(e,t){return e=kn({children:void 0},t),(t=Wt(t.children))&&(e.children=t),e}function qt(e,t,n,r){if(e=e.options,t){t={};for(var o=0;o=t.length||r("93"),t=t[0]),n=""+t),null==n&&(n="")),e._wrapperState={initialValue:""+n}}function Xt(e,t){var n=t.value;null!=n&&(n=""+n,n!==e.value&&(e.value=n),null==t.defaultValue&&(e.defaultValue=n)),null!=t.defaultValue&&(e.defaultValue=t.defaultValue)}function Jt(e){var t=e.textContent;t===e._wrapperState.initialValue&&(e.value=t)}function Zt(e){switch(e){case"svg":return"http://www.w3.org/2000/svg";case"math":return"http://www.w3.org/1998/Math/MathML";default:return"http://www.w3.org/1999/xhtml"}}function en(e,t){return null==e||"http://www.w3.org/1999/xhtml"===e?Zt(t):"http://www.w3.org/2000/svg"===e&&"foreignObject"===t?"http://www.w3.org/1999/xhtml":e}function tn(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t}function nn(e,t){e=e.style;for(var n in t)if(t.hasOwnProperty(n)){var r=0===n.indexOf("--"),o=n,a=t[n];o=null==a||"boolean"==typeof a||""===a?"":r||"number"!=typeof a||0===a||Zo.hasOwnProperty(o)&&Zo[o]?(""+a).trim():a+"px","float"===n&&(n="cssFloat"),r?e.setProperty(n,o):e[n]=o}}function rn(e,t,n){t&&(ta[e]&&(null!=t.children||null!=t.dangerouslySetInnerHTML)&&r("137",e,n()),null!=t.dangerouslySetInnerHTML&&(null!=t.children&&r("60"),"object"==typeof t.dangerouslySetInnerHTML&&"__html"in t.dangerouslySetInnerHTML||r("61")),null!=t.style&&"object"!=typeof t.style&&r("62",n()))}function on(e,t){if(-1===e.indexOf("-"))return"string"==typeof t.is;switch(e){case"annotation-xml":case"color-profile":case"font-face":case"font-face-src":case"font-face-uri":case"font-face-format":case"font-face-name":case"missing-glyph":return!1;default:return!0}}function an(e,t){e=9===e.nodeType||11===e.nodeType?e:e.ownerDocument;var n=Ae(e);t=Yn[t];for(var r=0;r<\/script>",e=e.removeChild(e.firstChild)):e="string"==typeof t.is?n.createElement(e,{is:t.is}):n.createElement(e):e=n.createElementNS(r,e),e}function un(e,t){return(9===t.nodeType?t:t.ownerDocument).createTextNode(e)}function cn(e,t,n,r){var o=on(t,n);switch(t){case"iframe":case"object":Oe("topLoad","load",e);var a=n;break;case"video":case"audio":for(a in oa)oa.hasOwnProperty(a)&&Oe(a,oa[a],e);a=n;break;case"source":Oe("topError","error",e),a=n;break;case"img":case"image":Oe("topError","error",e),Oe("topLoad","load",e),a=n;break;case"form":Oe("topReset","reset",e),Oe("topSubmit","submit",e),a=n;break;case"details":Oe("topToggle","toggle",e),a=n;break;case"input":zt(e,n),a=jt(e,n),Oe("topInvalid","invalid",e),an(r,"onChange");break;case"option":a=$t(e,n);break;case"select":Qt(e,n),a=kn({},n,{value:void 0}),Oe("topInvalid","invalid",e),an(r,"onChange");break;case"textarea":Yt(e,n),a=Gt(e,n),Oe("topInvalid","invalid",e),an(r,"onChange");break;default:a=n}rn(t,a,ra);var i,l=a;for(i in l)if(l.hasOwnProperty(i)){var u=l[i];"style"===i?nn(e,u,ra):"dangerouslySetInnerHTML"===i?null!=(u=u?u.__html:void 0)&&Jo(e,u):"children"===i?"string"==typeof u?("textarea"!==t||""!==u)&&tn(e,u):"number"==typeof u&&tn(e,""+u):"suppressContentEditableWarning"!==i&&"suppressHydrationWarning"!==i&&"autoFocus"!==i&&(Gn.hasOwnProperty(i)?null!=u&&an(r,i):o?Ft(e,i,u):null!=u&&Ut(e,i,u))}switch(t){case"input":ae(e),Kt(e,n);break;case"textarea":ae(e),Jt(e,n);break;case"option":null!=n.value&&e.setAttribute("value",n.value);break;case"select":e.multiple=!!n.multiple,t=n.value,null!=t?qt(e,!!n.multiple,t,!1):null!=n.defaultValue&&qt(e,!!n.multiple,n.defaultValue,!0);break;default:"function"==typeof a.onClick&&(e.onclick=wn)}}function sn(e,t,n,r,o){var a=null;switch(t){case"input":n=jt(e,n),r=jt(e,r),a=[];break;case"option":n=$t(e,n),r=$t(e,r),a=[];break;case"select":n=kn({},n,{value:void 0}),r=kn({},r,{value:void 0}),a=[];break;case"textarea":n=Gt(e,n),r=Gt(e,r),a=[];break;default:"function"!=typeof n.onClick&&"function"==typeof r.onClick&&(e.onclick=wn)}rn(t,r,ra);var i,l;e=null;for(i in n)if(!r.hasOwnProperty(i)&&n.hasOwnProperty(i)&&null!=n[i])if("style"===i)for(l in t=n[i])t.hasOwnProperty(l)&&(e||(e={}),e[l]="");else"dangerouslySetInnerHTML"!==i&&"children"!==i&&"suppressContentEditableWarning"!==i&&"suppressHydrationWarning"!==i&&"autoFocus"!==i&&(Gn.hasOwnProperty(i)?a||(a=[]):(a=a||[]).push(i,null));for(i in r){var u=r[i];if(t=null!=n?n[i]:void 0,r.hasOwnProperty(i)&&u!==t&&(null!=u||null!=t))if("style"===i)if(t){for(l in t)!t.hasOwnProperty(l)||u&&u.hasOwnProperty(l)||(e||(e={}),e[l]="");for(l in u)u.hasOwnProperty(l)&&t[l]!==u[l]&&(e||(e={}),e[l]=u[l])}else e||(a||(a=[]),a.push(i,e)),e=u;else"dangerouslySetInnerHTML"===i?(u=u?u.__html:void 0,t=t?t.__html:void 0,null!=u&&t!==u&&(a=a||[]).push(i,""+u)):"children"===i?t===u||"string"!=typeof u&&"number"!=typeof u||(a=a||[]).push(i,""+u):"suppressContentEditableWarning"!==i&&"suppressHydrationWarning"!==i&&(Gn.hasOwnProperty(i)?(null!=u&&an(o,i),a||t===u||(a=[])):(a=a||[]).push(i,u))}return e&&(a=a||[]).push("style",e),a}function fn(e,t,n,r,o){"input"===n&&"radio"===o.type&&null!=o.name&&Vt(e,o),on(n,r),r=on(n,o);for(var a=0;a=u.hasBooleanValue+u.hasNumericValue+u.hasOverloadedBooleanValue||r("50",l),i.hasOwnProperty(l)&&(u.attributeName=i[l]),a.hasOwnProperty(l)&&(u.attributeNamespace=a[l]),e.hasOwnProperty(l)&&(u.mutationMethod=e[l]),In[l]=u}}},In={},Rn=On,Mn=Rn.MUST_USE_PROPERTY,Dn=Rn.HAS_BOOLEAN_VALUE,An=Rn.HAS_NUMERIC_VALUE,Ln=Rn.HAS_POSITIVE_NUMERIC_VALUE,Un=Rn.HAS_OVERLOADED_BOOLEAN_VALUE,Fn=Rn.HAS_STRING_BOOLEAN_VALUE,Hn={Properties:{allowFullScreen:Dn,async:Dn,autoFocus:Dn,autoPlay:Dn,capture:Un,checked:Mn|Dn,cols:Ln,contentEditable:Fn,controls:Dn,default:Dn,defer:Dn,disabled:Dn,download:Un,draggable:Fn,formNoValidate:Dn,hidden:Dn,loop:Dn,multiple:Mn|Dn,muted:Mn|Dn,noValidate:Dn,open:Dn,playsInline:Dn,readOnly:Dn,required:Dn,reversed:Dn,rows:Ln,rowSpan:An,scoped:Dn,seamless:Dn,selected:Mn|Dn,size:Ln,start:An,span:Ln,spellCheck:Fn,style:0,tabIndex:0,itemScope:Dn,acceptCharset:0,className:0,htmlFor:0,httpEquiv:0,value:Fn},DOMAttributeNames:{acceptCharset:"accept-charset",className:"class",htmlFor:"for",httpEquiv:"http-equiv"},DOMMutationMethods:{value:function(e,t){if(null==t)return e.removeAttribute("value");"number"!==e.type||!1===e.hasAttribute("value")?e.setAttribute("value",""+t):e.validity&&!e.validity.badInput&&e.ownerDocument.activeElement!==e&&e.setAttribute("value",""+t)}}},jn=Rn.HAS_STRING_BOOLEAN_VALUE,zn={xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace"},Vn={Properties:{autoReverse:jn,externalResourcesRequired:jn,preserveAlpha:jn},DOMAttributeNames:{autoReverse:"autoReverse",externalResourcesRequired:"externalResourcesRequired",preserveAlpha:"preserveAlpha"},DOMAttributeNamespaces:{xlinkActuate:zn.xlink,xlinkArcrole:zn.xlink,xlinkHref:zn.xlink,xlinkRole:zn.xlink,xlinkShow:zn.xlink,xlinkTitle:zn.xlink,xlinkType:zn.xlink,xmlBase:zn.xml,xmlLang:zn.xml,xmlSpace:zn.xml}},Bn=/[\-\:]([a-z])/g;"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode x-height xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:title xlink:type xml:base xmlns:xlink xml:lang xml:space".split(" ").forEach(function(e){var t=e.replace(Bn,l);Vn.Properties[t]=0,Vn.DOMAttributeNames[t]=e}),Rn.injectDOMPropertyConfig(Hn),Rn.injectDOMPropertyConfig(Vn);var Kn={_caughtError:null,_hasCaughtError:!1,_rethrowError:null,_hasRethrowError:!1,injection:{injectErrorUtils:function(e){"function"!=typeof e.invokeGuardedCallback&&r("197"),u=e.invokeGuardedCallback}},invokeGuardedCallback:function(e,t,n,r,o,a,i,l,c){u.apply(Kn,arguments)},invokeGuardedCallbackAndCatchFirstError:function(e,t,n,r,o,a,i,l,u){if(Kn.invokeGuardedCallback.apply(this,arguments),Kn.hasCaughtError()){var c=Kn.clearCaughtError();Kn._hasRethrowError||(Kn._hasRethrowError=!0,Kn._rethrowError=c)}},rethrowCaughtError:function(){return c.apply(Kn,arguments)},hasCaughtError:function(){return Kn._hasCaughtError},clearCaughtError:function(){if(Kn._hasCaughtError){var e=Kn._caughtError;return Kn._caughtError=null,Kn._hasCaughtError=!1,e}r("198")}},Wn=null,$n={},qn=[],Qn={},Gn={},Yn={},Xn=Object.freeze({plugins:qn,eventNameDispatchConfigs:Qn,registrationNameModules:Gn,registrationNameDependencies:Yn,possibleRegistrationNames:null,injectEventPluginOrder:p,injectEventPluginsByName:d}),Jn=null,Zn=null,er=null,tr=null,nr={injectEventPluginOrder:p,injectEventPluginsByName:d},rr=Object.freeze({injection:nr,getListener:C,extractEvents:k,enqueueEvents:w,processEventQueue:x}),or=Math.random().toString(36).slice(2),ar="__reactInternalInstance$"+or,ir="__reactEventHandlers$"+or,lr=Object.freeze({precacheFiberNode:function(e,t){t[ar]=e},getClosestInstanceFromNode:E,getInstanceFromNode:function(e){return e=e[ar],!e||5!==e.tag&&6!==e.tag?null:e},getNodeFromInstance:T,getFiberCurrentPropsFromNode:S,updateFiberProps:function(e,t){e[ir]=t}}),ur=Object.freeze({accumulateTwoPhaseDispatches:D,accumulateTwoPhaseDispatchesSkipTarget:function(e){g(e,I)},accumulateEnterLeaveDispatches:A,accumulateDirectDispatches:function(e){g(e,M)}}),cr=null,sr={_root:null,_startText:null,_fallbackText:null},fr="dispatchConfig _targetInst nativeEvent isDefaultPrevented isPropagationStopped _dispatchListeners _dispatchInstances".split(" "),pr={type:null,target:null,currentTarget:wn.thatReturnsNull,eventPhase:null,bubbles:null,cancelable:null,timeStamp:function(e){return e.timeStamp||Date.now()},defaultPrevented:null,isTrusted:null};kn(H.prototype,{preventDefault:function(){this.defaultPrevented=!0;var e=this.nativeEvent;e&&(e.preventDefault?e.preventDefault():"unknown"!=typeof e.returnValue&&(e.returnValue=!1),this.isDefaultPrevented=wn.thatReturnsTrue)},stopPropagation:function(){var e=this.nativeEvent;e&&(e.stopPropagation?e.stopPropagation():"unknown"!=typeof e.cancelBubble&&(e.cancelBubble=!0),this.isPropagationStopped=wn.thatReturnsTrue)},persist:function(){this.isPersistent=wn.thatReturnsTrue},isPersistent:wn.thatReturnsFalse,destructor:function(){var e,t=this.constructor.Interface;for(e in t)this[e]=null;for(t=0;t=parseInt(yr.version(),10))}var vr,br=gr,Cr=Cn.canUseDOM&&(!hr||mr&&8=mr),kr=String.fromCharCode(32),wr={beforeInput:{phasedRegistrationNames:{bubbled:"onBeforeInput",captured:"onBeforeInputCapture"},dependencies:["topCompositionEnd","topKeyPress","topTextInput","topPaste"]},compositionEnd:{phasedRegistrationNames:{bubbled:"onCompositionEnd",captured:"onCompositionEndCapture"},dependencies:"topBlur topCompositionEnd topKeyDown topKeyPress topKeyUp topMouseDown".split(" ")},compositionStart:{phasedRegistrationNames:{bubbled:"onCompositionStart",captured:"onCompositionStartCapture"},dependencies:"topBlur topCompositionStart topKeyDown topKeyPress topKeyUp topMouseDown".split(" ")},compositionUpdate:{phasedRegistrationNames:{bubbled:"onCompositionUpdate",captured:"onCompositionUpdateCapture"},dependencies:"topBlur topCompositionUpdate topKeyDown topKeyPress topKeyUp topMouseDown".split(" ")}},xr=!1,Er=!1,Tr={eventTypes:wr,extractEvents:function(e,t,n,r){var o;if(hr)e:{switch(e){case"topCompositionStart":var a=wr.compositionStart;break e;case"topCompositionEnd":a=wr.compositionEnd;break e;case"topCompositionUpdate":a=wr.compositionUpdate;break e}a=void 0}else Er?W(e,n)&&(a=wr.compositionEnd):"topKeyDown"===e&&229===n.keyCode&&(a=wr.compositionStart);return a?(Cr&&(Er||a!==wr.compositionStart?a===wr.compositionEnd&&Er&&(o=U()):(sr._root=r,sr._startText=F(),Er=!0)),a=B.getPooled(a,t,n,r),o?a.data=o:null!==(o=$(n))&&(a.data=o),D(a),o=a):o=null,(e=br?q(e,n):Q(e,n))?(t=K.getPooled(wr.beforeInput,t,n,r),t.data=e,D(t)):t=null,[o,t]}},Sr=null,_r=null,Pr=null,Nr={injectFiberControlledHostComponent:function(e){Sr=e}},Or=Object.freeze({injection:Nr,enqueueStateRestore:Y,restoreStateIfNeeded:X}),Ir=!1,Rr={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};Cn.canUseDOM&&(vr=document.implementation&&document.implementation.hasFeature&&!0!==document.implementation.hasFeature("",""));var Mr={change:{phasedRegistrationNames:{bubbled:"onChange",captured:"onChangeCapture"},dependencies:"topBlur topChange topClick topFocus topInput topKeyDown topKeyUp topSelectionChange".split(" ")}},Dr=null,Ar=null,Lr=!1;Cn.canUseDOM&&(Lr=ne("input")&&(!document.documentMode||9=document.documentMode,eo={select:{phasedRegistrationNames:{bubbled:"onSelect",captured:"onSelectCapture"},dependencies:"topBlur topContextMenu topFocus topKeyDown topKeyUp topMouseDown topMouseUp topSelectionChange".split(" ")}},to=null,no=null,ro=null,oo=!1,ao={eventTypes:eo,extractEvents:function(e,t,n,r){var o,a=r.window===r?r.document:9===r.nodeType?r:r.ownerDocument;if(!(o=!a)){e:{a=Ae(a),o=Yn.onSelect;for(var i=0;i=Vo-e){if(!(-1!==jo&&jo<=e))return void(zo||(zo=!0,requestAnimationFrame($o)));Uo.didTimeout=!0}else Uo.didTimeout=!1;jo=-1,e=Fo,Fo=null,null!==e&&e(Uo)}},!1);var $o=function(e){zo=!1;var t=e-Vo+Ko;tt&&(t=8),Ko=t"+t+"",t=Xo.firstChild;e.firstChild;)e.removeChild(e.firstChild);for(;t.firstChild;)e.appendChild(t.firstChild)}}),Zo={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},ea=["Webkit","ms","Moz","O"];Object.keys(Zo).forEach(function(e){ea.forEach(function(t){t=t+e.charAt(0).toUpperCase()+e.substring(1),Zo[t]=Zo[e]})});var ta=kn({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0}),na=Yo.html,ra=wn.thatReturns(""),oa={topAbort:"abort",topCanPlay:"canplay",topCanPlayThrough:"canplaythrough",topDurationChange:"durationchange",topEmptied:"emptied",topEncrypted:"encrypted",topEnded:"ended",topError:"error",topLoadedData:"loadeddata",topLoadedMetadata:"loadedmetadata",topLoadStart:"loadstart",topPause:"pause",topPlay:"play",topPlaying:"playing",topProgress:"progress",topRateChange:"ratechange",topSeeked:"seeked",topSeeking:"seeking",topStalled:"stalled",topSuspend:"suspend",topTimeUpdate:"timeupdate",topVolumeChange:"volumechange",topWaiting:"waiting"},aa=Object.freeze({createElement:ln,createTextNode:un,setInitialProperties:cn,diffProperties:sn,updateProperties:fn,diffHydratedProperties:pn,diffHydratedText:dn,warnForUnmatchedText:function(){},warnForDeletedHydratableElement:function(){},warnForDeletedHydratableText:function(){},warnForInsertedHydratedElement:function(){},warnForInsertedHydratedText:function(){},restoreControlledState:function(e,t,n){switch(t){case"input":if(Bt(e,n),t=n.name,"radio"===n.type&&null!=t){for(n=e;n.parentNode;)n=n.parentNode;for(n=n.querySelectorAll("input[name="+JSON.stringify(""+t)+'][type="radio"]'),t=0;tr&&(o=r,r=e,e=o),o=Ue(n,e);var a=Ue(n,r);if(o&&a&&(1!==t.rangeCount||t.anchorNode!==o.node||t.anchorOffset!==o.offset||t.focusNode!==a.node||t.focusOffset!==a.offset)){var i=document.createRange();i.setStart(o.node,o.offset),t.removeAllRanges(),e>r?(t.addRange(i),t.extend(a.node,a.offset)):(i.setEnd(a.node,a.offset),t.addRange(i))}}for(t=[],e=n;e=e.parentNode;)1===e.nodeType&&t.push({element:e,left:e.scrollLeft,top:e.scrollTop});for(_n(n),n=0;n 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | React component starter 10 | 11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-component-example-project", 3 | "version": "0.1.0", 4 | "description": "A minimal boilerplate for building a react component for npm, including a demo page.", 5 | "main": "lib/index.js", 6 | "scripts": { 7 | "dev": "concurrently \"npm run lib:watch\" \"npm run docs\"", 8 | "lib": "babel src/lib -d lib --copy-files", 9 | "lib:watch": "babel src/lib -w -d lib --copy-files", 10 | "docs": "webpack-dev-server --mode development", 11 | "docs:prod": "webpack --mode production" 12 | }, 13 | "keywords": [], 14 | "license": "MIT", 15 | "peerDependencies": { 16 | "react": "^15.3.0 || ^16.2.0", 17 | "react-dom": "^15.3.0 || ^16.2.0" 18 | }, 19 | "devDependencies": { 20 | "@babel/cli": "^7.0.0-beta.46", 21 | "@babel/core": "^7.0.0-beta.46", 22 | "@babel/plugin-proposal-class-properties": "^7.0.0-beta.46", 23 | "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.46", 24 | "@babel/preset-env": "^7.0.0-beta.46", 25 | "@babel/preset-react": "^7.0.0-beta.46", 26 | "babel-loader": "^8.0.0-beta.0", 27 | "concurrently": "^4.0.1", 28 | "css-loader": "^1.0.0", 29 | "html-webpack-plugin": "^3.2.0", 30 | "react": "^16.3.2", 31 | "react-dom": "^16.3.2", 32 | "style-loader": "^0.23.1", 33 | "webpack": "^4.6.0", 34 | "webpack-cli": "^3.1.2", 35 | "webpack-dev-server": "^3.1.3" 36 | }, 37 | "author": "Markus Englund ", 38 | "homepage": "https://github.com/yogaboll/react-npm-component-starter", 39 | "repository": { 40 | "type": "git", 41 | "url": "git@github.com:yogaboll/react-npm-component-starter.git" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | React component starter 10 | 11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /src/docs/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | import MyComponent from "../../lib"; 4 | import "./styles.css"; 5 | 6 | function Demo() { 7 | return ( 8 |
9 |

Demo with examples of the component

10 | Wow what a button 11 |
12 | ); 13 | } 14 | 15 | render(, document.getElementById("app")); 16 | -------------------------------------------------------------------------------- /src/docs/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #eee; 3 | font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; 4 | } 5 | -------------------------------------------------------------------------------- /src/lib/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | class MySuperCoolComponent extends Component { 4 | handleClick = () => { 5 | console.log("Click!"); 6 | }; 7 | 8 | render() { 9 | const { color, children } = this.props; 10 | return ( 11 | 14 | ); 15 | } 16 | } 17 | 18 | export default MySuperCoolComponent; 19 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 3 | 4 | module.exports = { 5 | entry: path.join(__dirname, "src/docs"), 6 | output: { 7 | path: path.join(__dirname, "docs"), 8 | filename: "bundle.js" 9 | }, 10 | module: { 11 | rules: [ 12 | { 13 | test: /\.(js|jsx)$/, 14 | use: "babel-loader", 15 | exclude: /node_modules/ 16 | }, 17 | { 18 | test: /\.css$/, 19 | use: ["style-loader", "css-loader"] 20 | } 21 | ] 22 | }, 23 | plugins: [ 24 | new HtmlWebpackPlugin({ 25 | template: path.join(__dirname, "src/docs/index.html") 26 | }) 27 | ], 28 | resolve: { 29 | extensions: [".js", ".jsx"] 30 | }, 31 | devServer: { 32 | contentBase: path.join(__dirname, "docs"), 33 | port: 8000, 34 | stats: "minimal" 35 | } 36 | }; 37 | --------------------------------------------------------------------------------