This project has been created using webpack scaffold, you can now run
npm run build
or
yarn build
to bundle your application
plume.es.js 28.28 KiB / gzip: 8.57 KiB / brotliCompress: 7.46kb
plume.umd.js 18.91 KiB / gzip: 7.19 KiB / brotliCompress: 6.30kb
plume.iife.js 18.74 KiB / gzip: 7.12 KiB / brotliCompress: 6.24kbcore/index.es.js 17.44 KiB / gzip: 5.76 KiB / brotliCompress: 7.46kb
core/index.umd.js 11.99 KiB / gzip: 5.00 KiB / brotliCompress: 4.34kb
core/index.iife.js 11.81 KiB / gzip: 4.92 KiB / brotliCompress: 4.29kbrouter/index.es.js 23.25 KiB / gzip: 7.33 KiB / brotliCompress: 6.39kb
router/index.umd.js 15.90 KiB / gzip: 6.21 KiB / brotliCompress: 5.46kb
router/index.iife.js 15.73 KiB / gzip: 6.14 KiB / brotliCompress: 5.37kbforms/index.es.js 5.10 KiB / gzip: 1.68 KiB / brotliCompress: 1.43kb
forms/index.umd.js 3.34 KiB / gzip: 1.42 KiB / brotliCompress: 1.21kb
forms/index.iife.js 3.17 KiB / gzip: 1.35 KiB / brotliCompress: 1.15kb<header>
<nav>
<a href="#" onclick=${(e) =>
this.navigate(e, '/home')}>Items Route</a>
<a href="#" onclick=${(e) =>
this.navigate(e, '/persons')}>Persons Route</a>
<a href="#" onclick=${(e) =>
this.navigate(e, '/form')}>Sample Form</a>
<a href="#" onclick=${(e) =>
this.navigate(e, '/calculator/123', {
name: 'kiran',
})}>Calculator</a>
<a href="#" onclick=${(e) =>
this.navigate(e, '/controls')}>Controls</a>
<a href="#" onclick=${(e) => this.navigate(e, '/editor')}>Editor</a>
</nav>
</header><nav class="tabs" style="margin-bottom: 20px;">
<ul>
<li>PlumeJs</li>
</ul>
<ul ref=${(node) => {
this.tabsContainer = node;
}}>
<li class="${this.routePath === '/home' ? 'is-active' : ''}">
<a href="#" onclick=${(e) => this.navigate(e, '/home')}
>Items Route</a>
</li>
<li class="${this.routePath === '/persons' ? 'is-active' : ''}">
<a href="#" onclick=${(e) => this.navigate(e, '/persons')}
>Persons Route</a>
</li>
<li class="${this.routePath === '/form' ? 'is-active' : ''}">
<a href="#" onclick=${(e) =>
this.navigate(e, '/form')}>Form Route</a>
</li>
<li class="${
this.routePath === '/calculator' ? 'is-active' : ''
}">
<a href="#" onclick=${(e) =>
this.navigate(e, '/calculator', {
name: 'kiran',
})}>Calculator Route</a>
</li>
<li class="${this.routePath === '/controls' ? 'is-active' : ''}">
<a href="#" onclick=${(e) =>
this.navigate(e, '/controls')}>Controls</a>
</li>
<li class="${this.routePath === '/editor' ? 'is-active' : ''}">
<a href="#" onclick=${(e) =>
this.navigate(e, '/editor')}>Editor</a>
</li>
</ul>
</nav>- https://griffa.dev/posts/setting-up-eslint-to-work-with-new-or-proposed-javascript-features-such-as-private-class-fields./
- https://typicode.github.io/husky/#/?id=install
- https://alxgbsn.co.uk/2019/02/22/testing-native-es-modules-mocha-esm/
- https://kulshekhar.github.io/ts-jest/docs/guides/esm-support/
- https://bl.ocks.org/rstacruz/511f43265de4939f6ca729a3df7b001c
- https://gist.github.com/rstacruz/511f43265de4939f6ca729a3df7b001c
- https://www.reddit.com/r/node/comments/llzn11/are_most_people_not_using_esm_importexport_syntax/
- https://www.sensedeep.com/blog/posts/2021/how-to-create-single-source-npm-module.html
- https://link.medium.com/W1eXCzzHkmb
- https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/
- https://gomakethings.com/dom-diffing-with-vanilla-js/
creating blog using an editor like this https://awesomeopensource.com/project/JefMari/awesome-wysiwyg
https://stackoverflow.com/questions/47102233/how-do-i-use-markdown-it-js-to-parse-content-in-a-div
- add parammap to current route to get query params
checked svg: data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E
unchecked svg: