feat: define package exports (#14099)

packages/docs/src/pages/en/features/display-and-platform.md

@@ -24,7 +24,7 @@ The following shows how to access the application's display information:
 ```html
 <script>
   // Composables
-  import { useDisplay } from 'vuetify/lib/composables/display'
+  import { useDisplay } from 'vuetify/composables'
 
   export default {
     mounted () {
@@ -87,7 +87,7 @@ In the following example, we use a switch statement and the current breakpoint n
 
 <script>
   // Composables
-  import { useDisplay } from 'vuetify/lib/composables/display'
+  import { useDisplay } from 'vuetify/composables'
 
   export default {
     computed: {
@@ -183,7 +183,7 @@ Use the **display** composable alongside Vue 3's `setup` function to harness the
 
 <script>
   // Composables
-  import { useDisplay } from 'vuetify/lib/compsables/display'
+  import { useDisplay } from 'vuetify/composables'
 
   export default {
     setup () {
@@ -201,7 +201,7 @@ Using JSX with setup can accomplish the same thing as a template. The following
 
 ```tsx
 // Composables
-import { useDisplay } from 'vuetify/lib/composables/display'
+import { useDisplay } from 'vuetify/composables'
 
 export default {
   setup () {
@@ -236,7 +236,7 @@ Breakpoint and conditional values return a `boolean` that is derived from the cu
 
 <script>
   // Composables
-  import { useDisplay } from 'vuetify/lib/composables/display'
+  import { useDisplay } from 'vuetify/composables'
 
   setup () {
     // Destructure only the keys we want to use

packages/docs/src/pages/en/features/icon-fonts.md

@@ -23,7 +23,7 @@ To change your font library, import one of the pre-defined icon sets or provide
 // src/plugins/vuetify.js
 
 import { createVuetify } from 'vuetify'
-import { aliases, mdi } from 'vuetify/lib/iconsets/mdi'
+import { aliases, mdi } from 'vuetify/iconsets/mdi'
 
 export default createVuetify({
   icons: {
@@ -60,8 +60,8 @@ Out of the box, Vuetify supports the use of multiple *different* icon sets at th
 // src/plugins/vuetify.js
 
 import { createVuetify } from 'vuetify'
-import { aliases, fa } from 'vuetify/lib/iconsets/fa'
-import { mdi } from 'vuetify/lib/iconsets/mdi'
+import { aliases, fa } from 'vuetify/iconsets/fa'
+import { mdi } from 'vuetify/iconsets/mdi'
 
 export default createVuetify({
   icons: {
@@ -118,7 +118,7 @@ $ npm install @mdi/font -D
 // src/plugins/vuetify.js
 
 import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
-import { createVuetify } from 'vuetify/lib'
+import { createVuetify } from 'vuetify'
 
 export default createVuetify({
   icons: {
@@ -150,8 +150,8 @@ $ npm install @mdi/js -D
 ```js
 // src/plugins/vuetify.js
 
-import { createVuetify } from 'vuetify/lib'
-import { aliases, mdi } from 'vuetify/lib/iconsets/mdi-svg'
+import { createVuetify } from 'vuetify'
+import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
 
 export default createVuetify({
   icons: {
@@ -202,8 +202,8 @@ $ npm install material-design-icons-iconfont -D
 // src/plugins/vuetify.js
 
 import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure your project is capable of handling css files
-import { createVuetify } from 'vuetify/lib'
-import { aliases, md } from 'vuetify/lib/iconsets/md'
+import { createVuetify } from 'vuetify'
+import { aliases, md } from 'vuetify/iconsets/md'
 
 export default createVuetify({
   icons: {
@@ -252,7 +252,7 @@ $ npm install @fortawesome/fontawesome-free -D
 
 import '@fortawesome/fontawesome-free/css/all.css' // Ensure your project is capable of handling css files
 import { createVuetify } from 'vuetify'
-import { aliases, fa } from 'vuetify/lib/iconsets/fa'
+import { aliases, fa } from 'vuetify/iconsets/fa'
 
 export default createVuetify({
   icons: {
@@ -298,7 +298,7 @@ $ npm install font-awesome@4.7.0 -D
 
 import 'font-awesome/css/font-awesome.min.css' // Ensure your project is capable of handling css files
 import { createVuetify } from 'vuetify'
-import { aliases, fa } from 'vuetify/lib/iconsets/fa4'
+import { aliases, fa } from 'vuetify/iconsets/fa4'
 
 export default createVuetify({
   icons: {
@@ -334,7 +334,7 @@ Then register the global `font-awesome-icon` component and use the pre-defined `
 
 import { createApp } from 'vue'
 import { createVuetify } from 'vuetify'
-import { aliases, fa } from 'vuetify/lib/iconsets/fa-svg'
+import { aliases, fa } from 'vuetify/iconsets/fa-svg'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { fas } from '@fortawesome/free-solid-svg-icons'
@@ -446,8 +446,8 @@ If you are developing custom Vuetify components, you can extend the `aliases` ob
 ```js
 // src/plugins/vuetify.js
 
-import { createVuetify } from 'vuetify/lib'
-import { aliases, mdi } from 'vuetify/lib/iconsets/mdi'
+import { createVuetify } from 'vuetify'
+import { aliases, mdi } from 'vuetify/iconsets/mdi'
 
 export default createVuetify({
   icons: {

packages/docs/src/pages/en/features/internationalization.md

@@ -29,10 +29,10 @@ To set the available locale messages or the default locale, supply the `locale`
 // src/main.js
 
 import { createApp } from 'vue'
-import { createVuetify } from 'vuetify/lib'
+import { createVuetify } from 'vuetify'
 
 // Translations provided by Vuetify
-import { pl, zhHans } from 'vuetify/lib/locale'
+import { pl, zhHans } from 'vuetify/locale'
 
 // Your own translation file
 import sv from './i18n/vuetify/sv'
@@ -89,7 +89,7 @@ export default {
 
 ```js
 // src/main.js
-import { createVuetify } from 'vuetify/lib'
+import { createVuetify } from 'vuetify'
 import customLocale from './locales/customLocale'
 
 const vuetify = createVuetify({
@@ -131,8 +131,8 @@ If you are using the vue-i18n library, you can very easily integrate it with Vue
 // src/main.js
 
 import { createApp } from 'vue'
-import { createVuetify } from 'vuetify/lib'
-import { createVueI18nAdapter } from 'vuetify/lib/locale/adapters'
+import { createVuetify } from 'vuetify'
+import { createVueI18nAdapter } from 'vuetify/locale/adapters'
 import { createI18n, useI18n } from 'vue-i18n'
 
 const messages = {

packages/docs/src/pages/en/getting-started/installation.md

@@ -107,6 +107,7 @@ Once prompted, choose `Preview (Vuetify 3 + Vite)`:
 With Vue 3.0, the initialization process for Vue apps (and by extension Vuetify) has changed. With the new `createVuetify` method, the options passed to it have also changed. Please see the pages in the Features section of the documentation for further details.
 
 ```js
+import 'vuetify/styles'
 import { createApp } from 'vue'
 import { createVuetify } from 'vuetify'
 import App from './App.vue'

packages/vuetify/build/rollup.config.js

@@ -94,7 +94,6 @@ export default {
     }),
     {
       async buildEnd () {
-        console.log('buildEnd')
         const components = Object.create(null)
         const directives = []
 

packages/vuetify/build/rollup.types.config.js

@@ -32,9 +32,16 @@ function createTypesConfig (input, output) {
 }
 
 export default [
-  createTypesConfig('entry.d.ts', 'lib/entry.d.ts'),
-  createTypesConfig('framework.d.ts', 'lib/framework.d.ts'),
+  createTypesConfig('framework.d.ts', 'lib/index.d.ts'),
   createTypesConfig('entry-bundler.d.ts', 'dist/vuetify.d.ts'),
   createTypesConfig('components/index.d.ts', 'lib/components/index.d.ts'),
   createTypesConfig('directives/index.d.ts', 'lib/directives/index.d.ts'),
+  createTypesConfig('composables/index.d.ts', 'lib/composables/index.d.ts'),
+  createTypesConfig('locale/index.d.ts', 'lib/locale/index.d.ts'),
+  createTypesConfig('iconsets/fa.d.ts', 'lib/iconsets/fa.d.ts'),
+  createTypesConfig('iconsets/fa4.d.ts', 'lib/iconsets/fa4.d.ts'),
+  createTypesConfig('iconsets/fa-svg.d.ts', 'lib/iconsets/fa-svg.d.ts'),
+  createTypesConfig('iconsets/md.d.ts', 'lib/iconsets/md.d.ts'),
+  createTypesConfig('iconsets/mdi.d.ts', 'lib/iconsets/mdi.d.ts'),
+  createTypesConfig('iconsets/mdi-svg.d.ts', 'lib/iconsets/mdi-svg.d.ts'),
 ]

packages/vuetify/package.json

@@ -29,11 +29,11 @@
     "type": "github",
     "url": "https://github.com/sponsors/johnleider"
   },
-  "main": "dist/vuetify.js",
-  "module": "lib/entry.mjs",
+  "main": "lib/framework.mjs",
+  "module": "lib/framework.mjs",
   "jsdelivr": "dist/vuetify.js",
   "unpkg": "dist/vuetify.js",
-  "types": "lib/entry.d.ts",
+  "types": "lib/framework.d.ts",
   "sideEffects": [
     "*.sass",
     "*.scss",
@@ -44,6 +44,30 @@
     "dist/",
     "lib/"
   ],
+  "exports": {
+    ".": {
+      "import": "./lib/framework.mjs",
+      "require": "./dist/vuetify.js"
+    },
+    "./styles": "./lib/styles/main.css",
+    "./styles/*": "./lib/styles/*",
+    "./framework": "./lib/framework.mjs",
+    "./components": "./lib/components/index.mjs",
+    "./components/*": "./lib/components/*/index.mjs",
+    "./directives": "./lib/directives/index.mjs",
+    "./directives/*": "./lib/directives/*/*.mjs",
+    "./composables": "./lib/composables/index.mjs",
+    "./locale": "./lib/locale/index.mjs",
+    "./iconsets/*": "./lib/iconsets/*.mjs",
+    "./*": "./*"
+  },
+  "typesVersions": {
+    "*": {
+      "lib/framework.mjs": ["lib/index.d.ts"],
+      "framework": ["lib/index.d.ts"],
+      "*": ["*", "dist/*", "lib/*", "lib/*.d.ts", "lib/*/index.d.ts"]
+    }
+  },
   "scripts": {
     "watch": "cross-env TARGET=development webpack --config build/config.js --progress --watch",
     "dev": "cross-env NODE_ENV=development vite",

packages/vuetify/src/composables/index.ts

@@ -0,0 +1,12 @@
+/*
+ * PUBLIC INTERFACES ONLY
+ * Imports in our code should be to the composable directly, not this file
+ */
+
+export { useDisplay } from './display'
+export { useTheme } from './theme'
+export { provideRtl, useRtl } from './rtl'
+
+export type { DisplayBreakpoint, DisplayInstance, DisplayThresholds } from './display'
+export type { IconAliases, IconProps, IconSet } from './icons'
+export type { ThemeDefinition } from './theme'

packages/vuetify/src/entry-bundler.ts

@@ -1,10 +1,11 @@
 import './styles/main.sass'
 import * as components from './components'
 import * as directives from './directives'
-import * as framework from './framework'
+import { createVuetify as _createVuetify } from './framework'
+import type { VuetifyOptions } from './framework'
 
-export const createVuetify = (options: framework.VuetifyOptions = {}) => {
-  return framework.createVuetify({ components, directives, ...options })
+export const createVuetify = (options: VuetifyOptions = {}) => {
+  return _createVuetify({ components, directives, ...options })
 }
 
 export const version = __VUETIFY_VERSION__
@@ -13,3 +14,4 @@ export {
   components,
   directives,
 }
+export * from './composables'