Nuxt•2y ago•

2 replies

Group auto-imported utils without disabling tree-shaking

The utils/ folder is auto-imported. I do have a lot of utilities. For example

dateUtils.ts

export function formatDateTimeISO()
export function formatDateDefault()
export function parseISODuration()

export function formatDateTimeISO()
export function formatDateDefault()
export function parseISODuration()

or

passengerUtils.ts

export function isToddler()
export function isChild()
export function isAdult()

export function isToddler()
export function isChild()
export function isAdult()

this is just simplified, there are more. The auto-import makes this function available everywhere. While this is cool, its hard to understand where they come from. I would prefer having

passengerUtils.isToddler()

passengerUtils.isToddler()

dateUtils.formatDateTimeISO()

dateUtils.formatDateTimeISO()

(with a prefix).

I think that would be possible by doing this:

passengerUtils.ts

function isToddler()
function isChild()
function isAdult()

export default {
  isToddler,
  isChild,
  isAdult
}

function isToddler()
function isChild()
function isAdult()

export default {
  isToddler,
  isChild,
  isAdult
}

But I am afraid by doing that, I would lose all benefits of Tree-Shaking. (same like

import _ from 'lodash"

import _ from 'lodash"

instead of specific). I think having

import * as passengerUtils from "~/utils/dateUtils"

import * as passengerUtils from "~/utils/dateUtils"

would theoretically be tree-shaked as far as I understand (https://stackoverflow.com/questions/45735534/is-using-an-es6-import-to-load-specific-names-faster-than-importing-a-namespace)

But it seems there is no way that Nuxt auto-import would use

* as xy

* as xy

I dont want to lose tree-shaking, but also I want to avoid cluttering global name-spacing with function names. And avoid competely disabling auto-imports.

Does anyone see a possibility?

Nuxt•2y ago•

2 replies

exophunk

Group auto-imported utils without disabling tree-shaking

The utils/ folder is auto-imported. I do have a lot of utilities. For example

dateUtils.ts

export function formatDateTimeISO()
export function formatDateDefault()
export function parseISODuration()

export function formatDateTimeISO()
export function formatDateDefault()
export function parseISODuration()

or

passengerUtils.ts

export function isToddler()
export function isChild()
export function isAdult()

export function isToddler()
export function isChild()
export function isAdult()

this is just simplified, there are more. The auto-import makes this function available everywhere. While this is cool, its hard to understand where they come from. I would prefer having

passengerUtils.isToddler()

passengerUtils.isToddler()

dateUtils.formatDateTimeISO()

dateUtils.formatDateTimeISO()

(with a prefix).

I think that would be possible by doing this:

passengerUtils.ts

function isToddler()
function isChild()
function isAdult()

export default {
  isToddler,
  isChild,
  isAdult
}

function isToddler()
function isChild()
function isAdult()

export default {
  isToddler,
  isChild,
  isAdult
}

But I am afraid by doing that, I would lose all benefits of Tree-Shaking. (same like

import _ from 'lodash"

import _ from 'lodash"

instead of specific). I think having

import * as passengerUtils from "~/utils/dateUtils"

import * as passengerUtils from "~/utils/dateUtils"

* as xy

* as xy

I dont want to lose tree-shaking, but also I want to avoid cluttering global name-spacing with function names. And avoid competely disabling auto-imports.

Does anyone see a possibility?

Group auto-imported utils without disabling tree-shaking

Similar Threads

Group auto-imported utils without disabling tree-shaking

Similar Threads

Similar Threads

Similar Threads