Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[next] feat!: Change module import paths - drop dist and .js-extension #6389

Merged
merged 1 commit into from
Jan 18, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ All notable changes to this project will be documented in this file.
### 💥 Breaking Changes
* The package now uses Vue 3 instead of Vue 2.7
* The package is now a native ESM package and the CommonJS entry points were dropped!
* The old import path `@nextcloud/vue/dist/Components/NcComponent.js` were removed, please use the new ones (`@nextcloud/vue/components/NcComponent`) instead.
* The `limitWidth` prop of `NcSettingsSection` was removed (the content is now always limitted width) [\#5605](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5605)
* The `closing` and `opening` events of `NcAppSidebar` were removed as they are directly emitted when the sidebar was opened when using `v-if` and also just duplicated the state of the `open` prop [\#5606](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5606)
* The `checked` prop was renamed to `modelValue`, the `update:checked` event was renamed to `update:modelValue`. This affects the following components.
Expand Down Expand Up @@ -107,6 +108,18 @@ All notable changes to this project will be documented in this file.
* [next] chore: Update and pin development dependencies [\#5266](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5266) \([susnux](https://github.com/susnux)\)
* [next] chore(NcUserStatusIcon): remove warn if status is not set by @ShGKme in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5744

## [v8.23.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.23.0) (UNRELEASED)
[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.22.0...v8.23.0)

### 🚀 Enhancements
* The individual import path of components, composables, directives, and functions was changed.
The type of import is (e.g. `components`) is now lowercase and the `dist` will be omitted.
For example to import the `NcButton` component the path has changed:
- from `import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'`.
- to `import NcButton from '@nextcloud/vue/components/NcButton'`

The old import paths are still valid, but deprecated and will be removed in version 9.

## [v8.14.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.14.0) (2024-07-04)
[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.13.0...v8.14.0)

Expand Down
4 changes: 2 additions & 2 deletions docs/composables.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
To use any composable, import and use it according to documentation or Vue guidelines, for example:

```js static
import { useIsMobile } from '@nextcloud/vue/dist/composables/useIsMobile.js'
import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'

export default {
setup() {
Expand All @@ -21,7 +21,7 @@ export default {
or in `<script setup>`:

```js static
import { useIsMobile } from '@nextcloud/vue/dist/composables/useIsMobile.js'
import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'

const isMobile = useIsMobile()
```
2 changes: 1 addition & 1 deletion docs/composables/useHotKey.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ It respects Nextcloud's value of ```OCP.Accessibility.disableKeyboardShortcuts``

### Usage
```js static
import { useHotKey } from '@nextcloud/vue/dist/Composables/useHotKey/index.js'
import { useHotKey } from '@nextcloud/vue/composables/useHotKey'

const stopCallback = useHotKey(key, callback, options)
```
Expand Down
2 changes: 1 addition & 1 deletion docs/composables/useIsDarkTheme.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
import {
useIsDarkTheme,
useIsDarkThemeElement,
} from '@nextcloud/vue/dist/Composables/useIsDarkTheme.js'
} from '@nextcloud/vue/composables/useIsDarkTheme'
```

Same as `isDarkTheme` functions, but with reactivity.
Expand Down
6 changes: 3 additions & 3 deletions docs/directives.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
To use any directive, import and register it locally, for example:

```js static
import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
import Tooltip from '@nextcloud/vue/directives/Tooltip'

export default {
directives: {
Expand All @@ -19,13 +19,13 @@ export default {
or in `<script setup>`:

```js static
import vTooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
import vTooltip from '@nextcloud/vue/directives/Tooltip'
```

You can also register any directive globally. But it is not recommended.

```js static
import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
import Tooltip from '@nextcloud/vue/directives/Tooltip'

const app = createApp(App)
.directive('Tooltip', Tooltip)
Expand Down
2 changes: 1 addition & 1 deletion docs/directives/focus.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
-->

```js static
import Focus from '@nextcloud/vue/dist/Directives/Focus.js'
import Focus from '@nextcloud/vue/directives/Focus'
```

Focus an element when it is mounted to DOM.
Expand Down
2 changes: 1 addition & 1 deletion docs/directives/linkify.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
-->

```js static
import Linkify from '@nextcloud/vue/dist/Directives/Linkify.js'
import Linkify from '@nextcloud/vue/directives/Linkify'
```

Automatically make links in rendered text clickable.
Expand Down
2 changes: 1 addition & 1 deletion docs/directives/tooltip.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
-->

```js static
import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
import Tooltip from '@nextcloud/vue/directives/Tooltip'
```

Tooltip directive based on [v-tooltip](https://github.com/Akryum/v-tooltip).
Expand Down
2 changes: 1 addition & 1 deletion docs/functions/a11y.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
-->

```js static
import { isA11yActivation } from '@nextcloud/vue/dist/Functions/a11y.js'
import { isA11yActivation } from '@nextcloud/vue/functions/a11y'
```

## Definitions
Expand Down
2 changes: 1 addition & 1 deletion docs/functions/emoji.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
emojiAddRecent,
getCurrentSkinTone,
setCurrentSkinTone,
} from '@nextcloud/vue/dist/Functions/emoji.js'
} from '@nextcloud/vue/functions/emoji'
```

## Definitions
Expand Down
2 changes: 1 addition & 1 deletion docs/functions/isDarkTheme.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
import {
isDarkTheme,
checkIfDarkTheme,
} from '@nextcloud/vue/dist/Functions/isDarkTheme.js'
} from '@nextcloud/vue/functions/isDarkTheme'
```

Check whether the dark theme is enabled in Nextcloud.
Expand Down
2 changes: 1 addition & 1 deletion docs/functions/spawnDialog.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
```ts static
import {
spawnDialog,
} from '@nextcloud/vue/dist/Functions/dialog.js'
} from '@nextcloud/vue/functions/dialog'
```

## Definitions
Expand Down
2 changes: 1 addition & 1 deletion docs/functions/usernameToColor.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
-->

```js static
import usernameToColor from '@nextcloud/vue/dist/Functions/usernameToColor.js'
import usernameToColor from '@nextcloud/vue/functions/usernameToColor'
```

## Definition
Expand Down
2 changes: 1 addition & 1 deletion docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ You can also import individual module without bundling the full library.


```js static
import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
import NcAvatar from '@nextcloud/vue/components/NcAvatar'
```

## Recommendations
Expand Down
24 changes: 12 additions & 12 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,25 +36,25 @@
"types": "./dist/index.d.ts",
"import": "./dist/index.mjs"
},
"./dist/Components/*.js": {
"./components/*": {
"types": "./dist/components/*/index.d.ts",
"import": "./dist/Components/*.mjs"
"import": "./dist/components/*/index.mjs"
},
"./dist/Directives/*.js": {
"./composables/*": {
"types": "./dist/composables/*/index.d.ts",
"import": "./dist/composables/*/index.mjs"
},
"./directives/*": {
"types": "./dist/directives/*/index.d.ts",
"import": "./dist/Directives/*.mjs"
"import": "./dist/directives/*/index.mjs"
},
"./dist/Functions/*.js": {
"./functions/*": {
"types": "./dist/functions/*/index.d.ts",
"import": "./dist/Functions/*.mjs"
"import": "./dist/functions/*/index.mjs"
},
"./dist/Mixins/*.js": {
"./mixins/*": {
"types": "./dist/mixins/*/index.d.ts",
"import": "./dist/Mixins/*.mjs"
},
"./dist/Composables/*.js": {
"types": "./dist/composables/*/index.d.ts",
"import": "./dist/Composables/*.mjs"
"import": "./dist/mixins/*/index.mjs"
}
},
"files": [
Expand Down
47 changes: 8 additions & 39 deletions vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,45 +19,14 @@ const SCOPE_VERSION = JSON.stringify(versionHash)

// Entry points which we build using vite
const entryPoints = {
...globSync(['src/directives/*/index.js', 'src/directives/*/index.ts']).reduce((acc, item) => {
const name = item
.replace(/\/index\.(j|t)s/, '')
.replace('src/directives/', 'Directives/')
acc[name] = join(import.meta.dirname, item)
return acc
}, {}),

...globSync(['src/components/*/index.js', 'src/components/*/index.ts']).reduce((acc, item) => {
const name = item
.replace(/\/index\.(j|t)s/, '')
.replace('src/components/', 'Components/')
acc[name] = join(import.meta.dirname, item)
return acc
}, {}),

...globSync(['src/functions/*/index.js', 'src/functions/*/index.ts']).reduce((acc, item) => {
const name = item
.replace(/\/index\.(j|t)s/, '')
.replace('src/functions/', 'Functions/')
acc[name] = join(import.meta.dirname, item)
return acc
}, {}),

...globSync(['src/mixins/*/index.js', 'src/mixins/*/index.ts']).reduce((acc, item) => {
const name = item
.replace(/\/index\.(j|t)s/, '')
.replace('src/mixins/', 'Mixins/')
acc[name] = join(import.meta.dirname, item)
return acc
}, {}),

...globSync(['src/composables/*/index.js', 'src/composables/*/index.ts']).reduce((acc, item) => {
const name = item
.replace(/\/index\.(j|t)s/, '')
.replace('src/composables/', 'Composables/')
acc[name] = join(import.meta.dirname, item)
return acc
}, {}),
...globSync('src/@(components|composables|directives|functions|mixins)/*/index.@(js|ts)')
.reduce((acc, item) => {
const name = item
.replace('src/', '')
.replace(/\/index\.(j|t)s$/, '/index')
acc[name] = join(import.meta.dirname, item)
return acc
}, {}),

index: resolve(import.meta.dirname, 'src/index.ts'),
}
Expand Down
Loading