From c102616d0718f396fbf2384abe4a8b34a8b2006b Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Tue, 18 Jul 2023 20:04:23 +0200 Subject: [PATCH] chore: Drop `install` entry point and replace it with an Vue Plugin Signed-off-by: Ferdinand Thiessen --- README.md | 6 +++--- jest.config.js | 31 ++++++++++++++++--------------- src/index.js | 2 ++ src/install.js | 16 ---------------- src/plugin.ts | 33 +++++++++++++++++++++++++++++++++ tests/unit/plugin.spec.ts | 35 +++++++++++++++++++++++++++++++++++ webpack.config.js | 2 -- 7 files changed, 89 insertions(+), 36 deletions(-) delete mode 100644 src/install.js create mode 100644 src/plugin.ts create mode 100644 tests/unit/plugin.spec.ts diff --git a/README.md b/README.md index d2381f78b3..f32ede306c 100644 --- a/README.md +++ b/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 diff --git a/jest.config.js b/jest.config.js index f30a6cadc5..b590e59d65 100644 --- a/jest.config.js +++ b/jest.config.js @@ -3,7 +3,7 @@ * * @author Marco Ambrosini * - * @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: [ - '/node_modules/jest-serializer-vue', + '/node_modules/jest-serializer-vue', ], coverageDirectory: './coverage/', collectCoverage: false, collectCoverageFrom: [ - '/src/**/*.{js,vue}', - '!**/node_modules/**', + '/src/**/*.{js,ts,vue}', + '!**/node_modules/**', ], coverageReporters: [ - 'json', - 'text', - 'html', - 'lcov', - 'clover', + 'json', + 'text', + 'html', + 'lcov', + 'clover', ], } diff --git a/src/index.js b/src/index.js index 5bc0d1c76a..862aa3c751 100644 --- a/src/index.js +++ b/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' diff --git a/src/install.js b/src/install.js deleted file mode 100644 index 8f3432b2ba..0000000000 --- a/src/install.js +++ /dev/null @@ -1,16 +0,0 @@ -import * as NcComponents from './components/index.js' - -/** - * @param {object} Vue The vue instance - */ -function install(Vue) { - Object.values(NcComponents).forEach((component) => { - Vue.component(component.name, component) - }) -} - -if (typeof window !== 'undefined' && window.Vue) { - install(window.Vue) -} - -export default install diff --git a/src/plugin.ts b/src/plugin.ts new file mode 100644 index 0000000000..9429ab4c18 --- /dev/null +++ b/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 = { + 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) + }) + }, +} diff --git a/tests/unit/plugin.spec.ts b/tests/unit/plugin.spec.ts new file mode 100644 index 0000000000..3c4a91fbc7 --- /dev/null +++ b/tests/unit/plugin.spec.ts @@ -0,0 +1,35 @@ +/** + * @copyright Copyright (c) 2023 Ferdinand Thiessen + * + * @author Ferdinand Thiessen + * + * @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 . + * + */ + +import { NextcloudVuePlugin } from '../../src/plugin' +import { createLocalVue, mount } from '@vue/test-utils' + +describe('Nextcloud Vue Plugin', () => { + 'use strict' + + 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' + }) +}) diff --git a/webpack.config.js b/webpack.config.js index c69ae7b3fb..bae3ec7a18 100644 --- a/webpack.config.js +++ b/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', '')