chore: Drop install entry point and replace it with an Vue Plugin

README.md

@@ -37,13 +37,13 @@ import { NcAppNavigation, NcActions, NcActionButton } from '@nextcloud/vue'
 
 ### Registering all components.
 
-> Be careful, this will registry all components, even the ones not being used.
+> Be careful, this will registry all components and directives, even the ones not being used.
 
 ```js
 import Vue from 'vue'
-import NcComponents from '@nextcloud/vue/dist/install.js'
+import { NextcloudVuePlugin } from '@nextcloud/vue'
 
-Vue.use(NcComponents)
+Vue.use(NextcloudVuePlugin)
 ```
 
 ## Development setup

jest.config.js

@@ -3,7 +3,7 @@
  *
  * @author Marco Ambrosini <marcoambrosini@pm.me>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
@@ -49,19 +49,20 @@ const ignorePatterns = [
 
 module.exports = {
 	moduleFileExtensions: [
-	  'js',
-	  'vue',
+		'js',
+		'ts',
+		'vue',
 	],
 
 	testEnvironment: 'jsdom',
 	setupFilesAfterEnv: [
-	  './tests/setup.js',
+		'./tests/setup.js',
 	],
 
 	transform: {
-	  '^.+\\.js$': 'babel-jest',
-	  '^.+\\.vue$': '@vue/vue2-jest',
-	  '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
+		'^.+\\.(j|t)s$': 'babel-jest',
+		'^.+\\.vue$': '@vue/vue2-jest',
+		'.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
 	},
 	transformIgnorePatterns: [
 		'/node_modules/(?!(' + ignorePatterns.join('|') + '))',
@@ -72,20 +73,20 @@ module.exports = {
 	},
 
 	snapshotSerializers: [
-	  '<rootDir>/node_modules/jest-serializer-vue',
+		'<rootDir>/node_modules/jest-serializer-vue',
 	],
 
 	coverageDirectory: './coverage/',
 	collectCoverage: false,
 	collectCoverageFrom: [
-	  '<rootDir>/src/**/*.{js,vue}',
-	  '!**/node_modules/**',
+		'<rootDir>/src/**/*.{js,ts,vue}',
+		'!**/node_modules/**',
 	],
 	coverageReporters: [
-	  'json',
-	  'text',
-	  'html',
-	  'lcov',
-	  'clover',
+		'json',
+		'text',
+		'html',
+		'lcov',
+		'clover',
 	],
 }

src/index.js

@@ -24,3 +24,5 @@ export * from './components/index.js'
 export * from './functions/index.js'
 export * from './directives/index.js'
 export * from './mixins/index.js'
+
+export { NextcloudVuePlugin } from './plugin.ts'

src/plugin.ts

@@ -0,0 +1,33 @@
+import type { DefineComponent, Directive, PluginObject } from 'vue'
+
+import * as NcComponents from './components/index.js'
+import * as NcDirectives from './directives/index.js'
+
+/**
+ * Install all Nextcloud Vue components and directives globally
+ * @example
+ * ```js
+ * import { NextcloudVuePlugin } from '@nextcloud/vue'
+ * import Vue from 'vue'
+ *
+ * // ...
+ *
+ * Vue.use(NextcloudVuePlugin)
+ * new Vue({
+ *     // options
+ * })
+ * ```
+ */
+export const NextcloudVuePlugin: PluginObject<never> = {
+	install(Vue) {
+		// Install components
+		Object.entries(NcComponents as { [key: string]: DefineComponent }).forEach(([name, component]) => {
+			Vue.component(component.name || name, component)
+		})
+
+		// Install directives
+		Object.entries(NcDirectives as { [key: string]: Directive }).forEach(([name, directive]) => {
+			Vue.directive(name, directive)
+		})
+	},
+}

tests/unit/plugin.spec.ts

@@ -0,0 +1,35 @@
+/**
+ * @copyright Copyright (c) 2023 Ferdinand Thiessen <opensource@fthiessen.de>
+ *
+ * @author Ferdinand Thiessen <opensource@fthiessen.de>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { describe, expect, it } from '@jest/globals'
+import { createLocalVue, mount } from '@vue/test-utils'
+
+import { NextcloudVuePlugin } from '../../src/plugin'
+
+describe('Nextcloud Vue Plugin', () => {
+	it('can be installed', () => {
+		const localVue = createLocalVue()
+		localVue.use(NextcloudVuePlugin)
+		const wrapper = mount({ render: (h) => h('NcButton', { props: { ariaLabel: 'button' } }) }, { localVue })
+		expect(wrapper.vm.$el.tagName).not.toBe('NCBUTTON') // If it could no be installed it would be 'NCBUTTON', otherwise it would be 'A' or 'BUTTON'
+	})
+})

webpack.config.js

@@ -22,8 +22,6 @@ const SCOPE_VERSION = JSON.stringify(versionHash)
 console.info('This build version hash is', versionHash, '\n')
 
 webpackConfig.entry = {
-	install: path.join(__dirname, 'src', 'install.js'),
-
 	...globSync('src/components/*/index.js').reduce((acc, item) => {
 		const name = item
 			.replace('/index.js', '')