ESM Import Maps #3991
colinmollenhour
started this conversation in
Ideas
ESM Import Maps
#3991
Replies: 3 comments 5 replies
-
|
Just reading about this feature for the first time, I was never properly introduced to JavaScript unfortunately. So I'm going to ask some dumb questions, hope that's okay.
|
Beta Was this translation helpful? Give feedback.
1 reply
-
Zero for existing code bases, but also zero overhead. For projects with lots of modern JS it could allow you to stop using tools like Webpack entirely.
You can see in the demo commit that it can be super easy to start using. A more complex project would probably benefit from using npm and importly or jspm or some other tool. |
Beta Was this translation helpful? Give feedback.
-
|
Nice work @colinmollenhour! This seems like a great addition. I can't think of any downsides here, as this provides a clean way to import JS modules effectively and is well supported. Especially useful if OM moves towards better support for frontend frameworks. |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
I have experimented with Quasar UMD and Vue UMD. ESM support provides an alternative. I'm not sure about the benefits over UMD, any idea? |
Beta Was this translation helpful? Give feedback.
4 replies
-
|
Quasar doesn't support ESM yet but will in v3. Vue supports it as seen in the demo commit. If you have just one dependency probably no benefit but if you have many and they all support ESM it should offer multiple benefits. I added a list in the PR description. React supports ESM but you can't use JSX without a transpiler which is why I prefer Vue for OpenMage - you can write Vue code directly in the phtml files. |
Beta Was this translation helpful? Give feedback.
-
|
Here is an example of using importmap with a large framework. In this case if you used PrimeVue UMD you would download ~1MB of JS. With importmap the browser downloads each module only as-needed. Is it "better"? Not sure yet but I think it's compelling. For large libraries like Apache echarts the ESM support is not great - i.e. it works but is built into one large file. Some CDNs have tried to solve this with special ESM focused features but they fall a bit short.. Example HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/[email protected]/dist/vue.esm-browser.js",
"primevue/accordion": "https://cdn.jsdelivr.net/npm/[email protected]/accordion/accordion.esm.js",
"primevue/accordiontab": "https://cdn.jsdelivr.net/npm/[email protected]/accordiontab/accordiontab.esm.js",
"primevue/animateonscroll": "https://cdn.jsdelivr.net/npm/[email protected]/animateonscroll/animateonscroll.esm.js",
"primevue/api": "https://cdn.jsdelivr.net/npm/[email protected]/api/api.esm.js",
"primevue/autocomplete": "https://cdn.jsdelivr.net/npm/[email protected]/autocomplete/autocomplete.esm.js",
"primevue/avatar": "https://cdn.jsdelivr.net/npm/[email protected]/avatar/avatar.esm.js",
"primevue/avatargroup": "https://cdn.jsdelivr.net/npm/[email protected]/avatargroup/avatargroup.esm.js",
"primevue/badge": "https://cdn.jsdelivr.net/npm/[email protected]/badge/badge.esm.js",
"primevue/badge/style": "https://cdn.jsdelivr.net/npm/[email protected]/badge/style/badgestyle.esm.js",
"primevue/badgedirective": "https://cdn.jsdelivr.net/npm/[email protected]/badgedirective/badgedirective.esm.js",
"primevue/base": "https://cdn.jsdelivr.net/npm/[email protected]/base/base.esm.js",
"primevue/base/style": "https://cdn.jsdelivr.net/npm/[email protected]/base/style/basestyle.esm.js",
"primevue/basecomponent": "https://cdn.jsdelivr.net/npm/[email protected]/basecomponent/basecomponent.esm.js",
"primevue/basedirective": "https://cdn.jsdelivr.net/npm/[email protected]/basedirective/basedirective.esm.js",
"primevue/baseicon": "https://cdn.jsdelivr.net/npm/[email protected]/baseicon/baseicon.esm.js",
"primevue/baseicon/style": "https://cdn.jsdelivr.net/npm/[email protected]/baseicon/style/baseiconstyle.esm.js",
"primevue/blockui": "https://cdn.jsdelivr.net/npm/[email protected]/blockui/blockui.esm.js",
"primevue/breadcrumb": "https://cdn.jsdelivr.net/npm/[email protected]/breadcrumb/breadcrumb.esm.js",
"primevue/button": "https://cdn.jsdelivr.net/npm/[email protected]/button/button.esm.js",
"primevue/button/style": "https://cdn.jsdelivr.net/npm/[email protected]/button/style/buttonstyle.esm.js",
"primevue/buttongroup": "https://cdn.jsdelivr.net/npm/[email protected]/buttongroup/buttongroup.esm.js",
"primevue/calendar": "https://cdn.jsdelivr.net/npm/[email protected]/calendar/calendar.esm.js",
"primevue/calendar/style": "https://cdn.jsdelivr.net/npm/[email protected]/calendar/style/calendarstyle.esm.js",
"primevue/card": "https://cdn.jsdelivr.net/npm/[email protected]/card/card.esm.js",
"primevue/carousel": "https://cdn.jsdelivr.net/npm/[email protected]/carousel/carousel.esm.js",
"primevue/cascadeselect": "https://cdn.jsdelivr.net/npm/[email protected]/cascadeselect/cascadeselect.esm.js",
"primevue/chart": "https://cdn.jsdelivr.net/npm/[email protected]/chart/chart.esm.js",
"primevue/checkbox": "https://cdn.jsdelivr.net/npm/[email protected]/checkbox/checkbox.esm.js",
"primevue/chip": "https://cdn.jsdelivr.net/npm/[email protected]/chip/chip.esm.js",
"primevue/chips": "https://cdn.jsdelivr.net/npm/[email protected]/chips/chips.esm.js",
"primevue/colorpicker": "https://cdn.jsdelivr.net/npm/[email protected]/colorpicker/colorpicker.esm.js",
"primevue/column": "https://cdn.jsdelivr.net/npm/[email protected]/column/column.esm.js",
"primevue/columngroup": "https://cdn.jsdelivr.net/npm/[email protected]/columngroup/columngroup.esm.js",
"primevue/config": "https://cdn.jsdelivr.net/npm/[email protected]/config/config.esm.js",
"primevue/confirmationeventbus": "https://cdn.jsdelivr.net/npm/[email protected]/confirmationeventbus/confirmationeventbus.esm.js",
"primevue/confirmationoptions": "https://cdn.jsdelivr.net/npm/[email protected]/confirmationoptions/confirmationoptions.esm.js",
"primevue/confirmationservice": "https://cdn.jsdelivr.net/npm/[email protected]/confirmationservice/confirmationservice.esm.js",
"primevue/confirmdialog": "https://cdn.jsdelivr.net/npm/[email protected]/confirmdialog/confirmdialog.esm.js",
"primevue/confirmpopup": "https://cdn.jsdelivr.net/npm/[email protected]/confirmpopup/confirmpopup.esm.js",
"primevue/contextmenu": "https://cdn.jsdelivr.net/npm/[email protected]/contextmenu/contextmenu.esm.js",
"primevue/core": "https://cdn.jsdelivr.net/npm/[email protected]/core/core.esm.js",
"primevue/datatable": "https://cdn.jsdelivr.net/npm/[email protected]/datatable/datatable.esm.js",
"primevue/dataview": "https://cdn.jsdelivr.net/npm/[email protected]/dataview/dataview.esm.js",
"primevue/dataviewlayoutoptions": "https://cdn.jsdelivr.net/npm/[email protected]/dataviewlayoutoptions/dataviewlayoutoptions.esm.js",
"primevue/deferredcontent": "https://cdn.jsdelivr.net/npm/[email protected]/deferredcontent/deferredcontent.esm.js",
"primevue/dialog": "https://cdn.jsdelivr.net/npm/[email protected]/dialog/dialog.esm.js",
"primevue/dialogservice": "https://cdn.jsdelivr.net/npm/[email protected]/dialogservice/dialogservice.esm.js",
"primevue/divider": "https://cdn.jsdelivr.net/npm/[email protected]/divider/divider.esm.js",
"primevue/dock": "https://cdn.jsdelivr.net/npm/[email protected]/dock/dock.esm.js",
"primevue/dropdown": "https://cdn.jsdelivr.net/npm/[email protected]/dropdown/dropdown.esm.js",
"primevue/dynamicdialog": "https://cdn.jsdelivr.net/npm/[email protected]/dynamicdialog/dynamicdialog.esm.js",
"primevue/dynamicdialogeventbus": "https://cdn.jsdelivr.net/npm/[email protected]/dynamicdialogeventbus/dynamicdialogeventbus.esm.js",
"primevue/dynamicdialogoptions": "https://cdn.jsdelivr.net/npm/[email protected]/dynamicdialogoptions/dynamicdialogoptions.esm.js",
"primevue/editor": "https://cdn.jsdelivr.net/npm/[email protected]/editor/editor.esm.js",
"primevue/fieldset": "https://cdn.jsdelivr.net/npm/[email protected]/fieldset/fieldset.esm.js",
"primevue/fileupload": "https://cdn.jsdelivr.net/npm/[email protected]/fileupload/fileupload.esm.js",
"primevue/floatlabel": "https://cdn.jsdelivr.net/npm/[email protected]/floatlabel/floatlabel.esm.js",
"primevue/focustrap": "https://cdn.jsdelivr.net/npm/[email protected]/focustrap/focustrap.esm.js",
"primevue/galleria": "https://cdn.jsdelivr.net/npm/[email protected]/galleria/galleria.esm.js",
"primevue/iconfield": "https://cdn.jsdelivr.net/npm/[email protected]/iconfield/iconfield.esm.js",
"primevue/icons/filterslash": "https://cdn.jsdelivr.net/npm/[email protected]/icons/filterslash/index.esm.js",
"primevue/icons/filter": "https://cdn.jsdelivr.net/npm/[email protected]/icons/filter/index.esm.js",
"primevue/icons/eyeslash": "https://cdn.jsdelivr.net/npm/[email protected]/icons/eyeslash/index.esm.js",
"primevue/icons/eye": "https://cdn.jsdelivr.net/npm/[email protected]/icons/eye/index.esm.js",
"primevue/icons/exclamationtriangle": "https://cdn.jsdelivr.net/npm/[email protected]/icons/exclamationtriangle/index.esm.js",
"primevue/icons/chevronup": "https://cdn.jsdelivr.net/npm/[email protected]/icons/chevronup/index.esm.js",
"primevue/icons/chevronright": "https://cdn.jsdelivr.net/npm/[email protected]/icons/chevronright/index.esm.js",
"primevue/icons/chevronleft": "https://cdn.jsdelivr.net/npm/[email protected]/icons/chevronleft/index.esm.js",
"primevue/icons/chevrondown": "https://cdn.jsdelivr.net/npm/[email protected]/icons/chevrondown/index.esm.js",
"primevue/icons/check": "https://cdn.jsdelivr.net/npm/[email protected]/icons/check/index.esm.js",
"primevue/icons/calendar": "https://cdn.jsdelivr.net/npm/[email protected]/icons/calendar/index.esm.js",
"primevue/icons/blank": "https://cdn.jsdelivr.net/npm/[email protected]/icons/blank/index.esm.js",
"primevue/icons/bars": "https://cdn.jsdelivr.net/npm/[email protected]/icons/bars/index.esm.js",
"primevue/icons/ban": "https://cdn.jsdelivr.net/npm/[email protected]/icons/ban/index.esm.js",
"primevue/icons/arrowup": "https://cdn.jsdelivr.net/npm/[email protected]/icons/arrowup/index.esm.js",
"primevue/icons/arrowdown": "https://cdn.jsdelivr.net/npm/[email protected]/icons/arrowdown/index.esm.js",
"primevue/icons/angleup": "https://cdn.jsdelivr.net/npm/[email protected]/icons/angleup/index.esm.js",
"primevue/icons/angleright": "https://cdn.jsdelivr.net/npm/[email protected]/icons/angleright/index.esm.js",
"primevue/icons/angleleft": "https://cdn.jsdelivr.net/npm/[email protected]/icons/angleleft/index.esm.js",
"primevue/icons/angledown": "https://cdn.jsdelivr.net/npm/[email protected]/icons/angledown/index.esm.js",
"primevue/icons/angledoubleup": "https://cdn.jsdelivr.net/npm/[email protected]/icons/angledoubleup/index.esm.js",
"primevue/icons/angledoubleright": "https://cdn.jsdelivr.net/npm/[email protected]/icons/angledoubleright/index.esm.js",
"primevue/icons/angledoubleleft": "https://cdn.jsdelivr.net/npm/[email protected]/icons/angledoubleleft/index.esm.js",
"primevue/icons/angledoubledown": "https://cdn.jsdelivr.net/npm/[email protected]/icons/angledoubledown/index.esm.js",
"primevue/icons/infocircle": "https://cdn.jsdelivr.net/npm/[email protected]/icons/infocircle/index.esm.js",
"primevue/icons/minus": "https://cdn.jsdelivr.net/npm/[email protected]/icons/minus/index.esm.js",
"primevue/icons/pencil": "https://cdn.jsdelivr.net/npm/[email protected]/icons/pencil/index.esm.js",
"primevue/icons/plus": "https://cdn.jsdelivr.net/npm/[email protected]/icons/plus/index.esm.js",
"primevue/icons/refresh": "https://cdn.jsdelivr.net/npm/[email protected]/icons/refresh/index.esm.js",
"primevue/icons/search": "https://cdn.jsdelivr.net/npm/[email protected]/icons/search/index.esm.js",
"primevue/icons/searchminus": "https://cdn.jsdelivr.net/npm/[email protected]/icons/searchminus/index.esm.js",
"primevue/icons/searchplus": "https://cdn.jsdelivr.net/npm/[email protected]/icons/searchplus/index.esm.js",
"primevue/icons/sortalt": "https://cdn.jsdelivr.net/npm/[email protected]/icons/sortalt/index.esm.js",
"primevue/icons/sortamountdown": "https://cdn.jsdelivr.net/npm/[email protected]/icons/sortamountdown/index.esm.js",
"primevue/icons/sortamountupalt": "https://cdn.jsdelivr.net/npm/[email protected]/icons/sortamountupalt/index.esm.js",
"primevue/icons/spinner": "https://cdn.jsdelivr.net/npm/[email protected]/icons/spinner/index.esm.js",
"primevue/icons/star": "https://cdn.jsdelivr.net/npm/[email protected]/icons/star/index.esm.js",
"primevue/icons/starfill": "https://cdn.jsdelivr.net/npm/[email protected]/icons/starfill/index.esm.js",
"primevue/icons/thlarge": "https://cdn.jsdelivr.net/npm/[email protected]/icons/thlarge/index.esm.js",
"primevue/icons/times": "https://cdn.jsdelivr.net/npm/[email protected]/icons/times/index.esm.js",
"primevue/icons/timescircle": "https://cdn.jsdelivr.net/npm/[email protected]/icons/timescircle/index.esm.js",
"primevue/icons/trash": "https://cdn.jsdelivr.net/npm/[email protected]/icons/trash/index.esm.js",
"primevue/icons/undo": "https://cdn.jsdelivr.net/npm/[email protected]/icons/undo/index.esm.js",
"primevue/icons/upload": "https://cdn.jsdelivr.net/npm/[email protected]/icons/upload/index.esm.js",
"primevue/icons/windowmaximize": "https://cdn.jsdelivr.net/npm/[email protected]/icons/windowmaximize/index.esm.js",
"primevue/icons/windowminimize": "https://cdn.jsdelivr.net/npm/[email protected]/icons/windowminimize/index.esm.js",
"primevue/image": "https://cdn.jsdelivr.net/npm/[email protected]/image/image.esm.js",
"primevue/inlinemessage": "https://cdn.jsdelivr.net/npm/[email protected]/inlinemessage/inlinemessage.esm.js",
"primevue/inplace": "https://cdn.jsdelivr.net/npm/[email protected]/inplace/inplace.esm.js",
"primevue/inputgroup": "https://cdn.jsdelivr.net/npm/[email protected]/inputgroup/inputgroup.esm.js",
"primevue/inputgroupaddon": "https://cdn.jsdelivr.net/npm/[email protected]/inputgroupaddon/inputgroupaddon.esm.js",
"primevue/inputicon": "https://cdn.jsdelivr.net/npm/[email protected]/inputicon/inputicon.esm.js",
"primevue/inputmask": "https://cdn.jsdelivr.net/npm/[email protected]/inputmask/inputmask.esm.js",
"primevue/inputnumber": "https://cdn.jsdelivr.net/npm/[email protected]/inputnumber/inputnumber.esm.js",
"primevue/inputotp": "https://cdn.jsdelivr.net/npm/[email protected]/inputotp/inputotp.esm.js",
"primevue/inputswitch": "https://cdn.jsdelivr.net/npm/[email protected]/inputswitch/inputswitch.esm.js",
"primevue/inputtext": "https://cdn.jsdelivr.net/npm/[email protected]/inputtext/inputtext.esm.js",
"primevue/knob": "https://cdn.jsdelivr.net/npm/[email protected]/knob/knob.esm.js",
"primevue/listbox": "https://cdn.jsdelivr.net/npm/[email protected]/listbox/listbox.esm.js",
"primevue/megamenu": "https://cdn.jsdelivr.net/npm/[email protected]/megamenu/megamenu.esm.js",
"primevue/menu": "https://cdn.jsdelivr.net/npm/[email protected]/menu/menu.esm.js",
"primevue/menubar": "https://cdn.jsdelivr.net/npm/[email protected]/menubar/menubar.esm.js",
"primevue/menuitem": "https://cdn.jsdelivr.net/npm/[email protected]/menuitem/menuitem.esm.js",
"primevue/message": "https://cdn.jsdelivr.net/npm/[email protected]/message/message.esm.js",
"primevue/metergroup": "https://cdn.jsdelivr.net/npm/[email protected]/metergroup/metergroup.esm.js",
"primevue/multiselect": "https://cdn.jsdelivr.net/npm/[email protected]/multiselect/multiselect.esm.js",
"primevue/orderlist": "https://cdn.jsdelivr.net/npm/[email protected]/orderlist/orderlist.esm.js",
"primevue/organizationchart": "https://cdn.jsdelivr.net/npm/[email protected]/organizationchart/organizationchart.esm.js",
"primevue/overlayeventbus": "https://cdn.jsdelivr.net/npm/[email protected]/overlayeventbus/overlayeventbus.esm.js",
"primevue/overlaypanel": "https://cdn.jsdelivr.net/npm/[email protected]/overlaypanel/overlaypanel.esm.js",
"primevue/paginator": "https://cdn.jsdelivr.net/npm/[email protected]/paginator/paginator.esm.js",
"primevue/panel": "https://cdn.jsdelivr.net/npm/[email protected]/panel/panel.esm.js",
"primevue/panelmenu": "https://cdn.jsdelivr.net/npm/[email protected]/panelmenu/panelmenu.esm.js",
"primevue/passthrough": "https://cdn.jsdelivr.net/npm/[email protected]/passthrough/passthrough.esm.js",
"primevue/password": "https://cdn.jsdelivr.net/npm/[email protected]/password/password.esm.js",
"primevue/picklist": "https://cdn.jsdelivr.net/npm/[email protected]/picklist/picklist.esm.js",
"primevue/portal": "https://cdn.jsdelivr.net/npm/[email protected]/portal/portal.esm.js",
"primevue/progressbar": "https://cdn.jsdelivr.net/npm/[email protected]/progressbar/progressbar.esm.js",
"primevue/progressspinner": "https://cdn.jsdelivr.net/npm/[email protected]/progressspinner/progressspinner.esm.js",
"primevue/radiobutton": "https://cdn.jsdelivr.net/npm/[email protected]/radiobutton/radiobutton.esm.js",
"primevue/rating": "https://cdn.jsdelivr.net/npm/[email protected]/rating/rating.esm.js",
"primevue/resources": "https://cdn.jsdelivr.net/npm/[email protected]/resources/resources.esm.js",
"primevue/ripple": "https://cdn.jsdelivr.net/npm/[email protected]/ripple/ripple.esm.js",
"primevue/ripple/style": "https://cdn.jsdelivr.net/npm/[email protected]/ripple/style/ripplestyle.esm.js",
"primevue/row": "https://cdn.jsdelivr.net/npm/[email protected]/row/row.esm.js",
"primevue/scrollpanel": "https://cdn.jsdelivr.net/npm/[email protected]/scrollpanel/scrollpanel.esm.js",
"primevue/scrolltop": "https://cdn.jsdelivr.net/npm/[email protected]/scrolltop/scrolltop.esm.js",
"primevue/selectbutton": "https://cdn.jsdelivr.net/npm/[email protected]/selectbutton/selectbutton.esm.js",
"primevue/sidebar": "https://cdn.jsdelivr.net/npm/[email protected]/sidebar/sidebar.esm.js",
"primevue/skeleton": "https://cdn.jsdelivr.net/npm/[email protected]/skeleton/skeleton.esm.js",
"primevue/slider": "https://cdn.jsdelivr.net/npm/[email protected]/slider/slider.esm.js",
"primevue/speeddial": "https://cdn.jsdelivr.net/npm/[email protected]/speeddial/speeddial.esm.js",
"primevue/splitbutton": "https://cdn.jsdelivr.net/npm/[email protected]/splitbutton/splitbutton.esm.js",
"primevue/splitter": "https://cdn.jsdelivr.net/npm/[email protected]/splitter/splitter.esm.js",
"primevue/splitterpanel": "https://cdn.jsdelivr.net/npm/[email protected]/splitterpanel/splitterpanel.esm.js",
"primevue/stepper": "https://cdn.jsdelivr.net/npm/[email protected]/stepper/stepper.esm.js",
"primevue/stepperpanel": "https://cdn.jsdelivr.net/npm/[email protected]/stepperpanel/stepperpanel.esm.js",
"primevue/steps": "https://cdn.jsdelivr.net/npm/[email protected]/steps/steps.esm.js",
"primevue/styleclass": "https://cdn.jsdelivr.net/npm/[email protected]/styleclass/styleclass.esm.js",
"primevue/tabmenu": "https://cdn.jsdelivr.net/npm/[email protected]/tabmenu/tabmenu.esm.js",
"primevue/tabpanel": "https://cdn.jsdelivr.net/npm/[email protected]/tabpanel/tabpanel.esm.js",
"primevue/tabview": "https://cdn.jsdelivr.net/npm/[email protected]/tabview/tabview.esm.js",
"primevue/tag": "https://cdn.jsdelivr.net/npm/[email protected]/tag/tag.esm.js",
"primevue/terminal": "https://cdn.jsdelivr.net/npm/[email protected]/terminal/terminal.esm.js",
"primevue/terminalservice": "https://cdn.jsdelivr.net/npm/[email protected]/terminalservice/terminalservice.esm.js",
"primevue/textarea": "https://cdn.jsdelivr.net/npm/[email protected]/textarea/textarea.esm.js",
"primevue/tieredmenu": "https://cdn.jsdelivr.net/npm/[email protected]/tieredmenu/tieredmenu.esm.js",
"primevue/timeline": "https://cdn.jsdelivr.net/npm/[email protected]/timeline/timeline.esm.js",
"primevue/toast": "https://cdn.jsdelivr.net/npm/[email protected]/toast/toast.esm.js",
"primevue/toasteventbus": "https://cdn.jsdelivr.net/npm/[email protected]/toasteventbus/toasteventbus.esm.js",
"primevue/toastservice": "https://cdn.jsdelivr.net/npm/[email protected]/toastservice/toastservice.esm.js",
"primevue/togglebutton": "https://cdn.jsdelivr.net/npm/[email protected]/togglebutton/togglebutton.esm.js",
"primevue/toolbar": "https://cdn.jsdelivr.net/npm/[email protected]/toolbar/toolbar.esm.js",
"primevue/tooltip": "https://cdn.jsdelivr.net/npm/[email protected]/tooltip/tooltip.esm.js",
"primevue/tree": "https://cdn.jsdelivr.net/npm/[email protected]/tree/tree.esm.js",
"primevue/treenode": "https://cdn.jsdelivr.net/npm/[email protected]/treenode/treenode.esm.js",
"primevue/treeselect": "https://cdn.jsdelivr.net/npm/[email protected]/treeselect/treeselect.esm.js",
"primevue/treetable": "https://cdn.jsdelivr.net/npm/[email protected]/treetable/treetable.esm.js",
"primevue/tristatecheckbox": "https://cdn.jsdelivr.net/npm/[email protected]/tristatecheckbox/tristatecheckbox.esm.js",
"primevue/useconfirm": "https://cdn.jsdelivr.net/npm/[email protected]/useconfirm/useconfirm.esm.js",
"primevue/usedialog": "https://cdn.jsdelivr.net/npm/[email protected]/usedialog/usedialog.esm.js",
"primevue/usestyle": "https://cdn.jsdelivr.net/npm/[email protected]/usestyle/usestyle.esm.js",
"primevue/usetoast": "https://cdn.jsdelivr.net/npm/[email protected]/usetoast/usetoast.esm.js",
"primevue/utils": "https://cdn.jsdelivr.net/npm/[email protected]/utils/utils.esm.js",
"primevue/virtualscroller": "https://cdn.jsdelivr.net/npm/[email protected]/virtualscroller/virtualscroller.esm.js"
}
}
</script>
<link rel="stylesheet" href="https://unpkg.com/primevue/resources/themes/lara-light-green/theme.css" />
</head>
<body>
<h1>Vanilla Vue</h1>
<div id="app"></div>
<script type="module">
import { createApp } from 'vue'
createApp({
data() {
return { count: 0 }
},
template: `<div>Count is: {{ count }}</div><button @click="count++">Increment</button>`
}).mount('#app')
</script>
<h1>PrimeVue</h1>
<div id="app2">
<p-datepicker v-model="date"></p-datepicker>
<br /><br />
{{ date }}
</div>
<script type="module">
import { createApp, ref } from 'vue'
import PrimeVue from 'primevue/config'
import Calendar from 'primevue/calendar'
const app = createApp({
setup() {
const date = ref();
return {
date,
};
},
});
app.use(PrimeVue);
app.component('p-datepicker', Calendar);
app.mount('#app2');
</script>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
|
Didn't know about PrimeVue. Appreciate the example, it's compelling to not download a large UMD when only a few components are required.. I came across usage of Quasar ESM in this discussion. I can find the ESM dist up to ver 2.15: https://cdn.jsdelivr.net/npm/[email protected]/dist/ |
Beta Was this translation helpful? Give feedback.
-
|
Ahh ok, I saw in another discussion that it was a feature they would tackle in v3 but maybe it was just making it more official and supporting tree shaking (one file per module). The ESM build they have now is basically the same size as the UMD build so it's all in one file, not split up. This is a lot simpler but reduces the advantages over UMD. If you have libraries that are only used on some pages and not others and don't want to manage that with the layout it is still nice that it doesn't download it unless you need it. I noticed one issue with the jsdelivr method is that the ESM build of PrimeVue uses its own import url for Vue so it is possible if not highly likely that you will get different projects including different versions because there is nothing locking the version of dependencies - they probably all default to the latest. It doesn't change this PR at all but I think what is likely the best is to serve your own files instead of using a CDN by using importly or jspm. Possibly Rollup but that seems to be a pretty complex tool and at that point you're back to the level of complexity of Webpack.. |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hey, I just dropped PR #3990 which adds support for ESM Import Maps. Would love some feedback from the community!
Beta Was this translation helpful? Give feedback.
All reactions