@cnamts/vue-cli-plugin-vue-dash - npm Package Compare versions

Comparing version 2.0.0-alpha.49 to 2.0.0-alpha.51

generator/functions/extendPackage.js

 const vdPkg = require('../../package.json');
-const VueDotVersion = vdPkg.version;
+// Use dev dependency to get Vue Dot version
+let VueDotVersion = vdPkg.devDependencies['@cnamts/vue-dot'] || 'next';
 
+// If the version is an alpha or a beta
+if (VueDotVersion.includes('alpha') || VueDotVersion.includes('beta')) {
+	// Remove ^ char to avoid version auto-bump
+	VueDotVersion = VueDotVersion.replace('^', '');
+}
+
 /** Extend package.json */
@@ -10,24 +17,25 @@ function extendPackage(api, options) {
 			'axios': '^0.19.2',
-			'core-js': '^3.6.4',
-			'dayjs': '^1.8.19',
+			'core-js': '^3.6.5',
+			'dayjs': '^1.8.28',
 			'languages': '^0.1.3',
-			'vue-meta': '^2.3.2',
+			'vue-meta': '^2.3.4',
 			'vue-the-mask': '^0.11.1',
-			'vuetify': '^2.2.6'
+			'vuetify': '^2.2.30'
 		},
 		devDependencies: {
-			'@babel/core': '^7.8.3',
-			'@types/webfontloader': '^1.6.29',
-			'@mdi/js': '^4.8.95',
-			'@typescript-eslint/eslint-plugin': '^2.17.0',
-			'@typescript-eslint/parser': '^2.17.0',
-			'babel-jest': '^24.9.0',
-			'jest': '^24.9.0',
+			'@babel/core': '^7.10.2',
+			'@types/webfontloader': '^1.6.32',
+			'@mdi/js': '^5.3.45',
+			'@typescript-eslint/eslint-plugin': '^3.1.0',
+			'@typescript-eslint/parser': '^3.1.0',
+			'@types/jest': '25.2.3',
+			'babel-jest': '^25.5.1',
+			'jest': '^25.5.4',
 			'jest-serializer-vue': '^2.0.2',
-			'ts-jest': '^24.3.0',
-			'vue-class-component': '^7.2.2',
-			'vue-cli-plugin-vuetify': '^2.0.3',
-			'vuetify-loader': '^1.4.3',
+			'ts-jest': '^25.5.1',
+			'vue-class-component': '^7.2.3',
+			'vue-cli-plugin-vuetify': '^2.0.5',
+			'vuetify-loader': '^1.4.4',
 			'webfontloader': '^1.6.28',
-			'webpack': '^4.41.5'
+			'webpack': '^4.43.0'
 		}
@@ -37,3 +45,3 @@ };
 	if (options.i18n) {
-		newPackageProperties.dependencies['vue-i18n'] = '^8.15.3';
+		newPackageProperties.dependencies['vue-i18n'] = '^8.18.1';
 	}
@@ -40,0 +48,0 @@

generator/getResourcesToDelete.js

@@ -14,6 +14,2 @@ /**
 		{
-			type: 'folder',
-			path: 'src/router/'
-		},
-		{
 			type: 'file',
@@ -57,2 +53,7 @@ path: 'src/shims-tsx.d.ts'
 			condition: !options.cypress
+		},
+		{
+			type: 'folder',
+			path: 'public/js/lib',
+			condition: !options.matomo
 		}
@@ -59,0 +60,0 @@ ];

generator/template/_eslintrc.js

@@ -6,9 +6,10 @@ module.exports = {
 	},
+	parser: 'vue-eslint-parser',
 	extends: [
 		'plugin:vue/recommended',
 		'eslint:recommended',
-		'@vue/typescript'
+		'@vue/typescript/recommended'
 	],
 	rules: {
-		// Allow logs in development
+		// Allow logs in development but not in production
 		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
@@ -25,8 +26,6 @@ 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
 
-		// 1 empty line maximum
-		'no-multiple-empty-lines': ['error', { 'max': 1 }],
+		// Force semi-colons
+		'semi': 'off',
+		'@typescript-eslint/semi': ['error'],
 
-		// Force semi
-		'semi': ['error', 'always'],
-
 		// Remove space in functions, eg. function()
@@ -42,19 +41,23 @@ 'space-before-function-paren': ['error', 'never'],
 
+		// Maximum 1 empty line
+		'no-multiple-empty-lines': ['error', { 'max': 1 }],
+
 		// Remove trailing coma
 		'comma-dangle': ['error', 'never'],
 
-		'space-before-blocks': ['error', 'always'],
-		'keyword-spacing': ['error', { 'before': true }],
-
 		// Force PascalCase for component names
-		'vue/component-name-in-template-casing': ['error', 'PascalCase', {
-			'ignores': [
-				'keep-alive',
-				'component',
-				'transition',
-				'transition-group'
-			]
-		}],
+		'vue/component-name-in-template-casing': [
+			'error',
+			'PascalCase',
+			{
+				'ignores': [
+					'keep-alive',
+					'component',
+					'transition',
+					'transition-group'
+				]
+			}
+		],
 
-		// Single quotes
+		// Force single quotes
 		'quotes': ['error', 'single'],
@@ -71,3 +74,3 @@
 		// Allow v-html
-		'vue/no-v-html': 'off',
+		'vue/no-v-html': ['off'],
 
@@ -83,22 +86,36 @@ // Limit .vue files to 350 lines
 
-		// Disable multi spaces
-		'no-multi-spaces': ['error'],
+		// Force arrow functions
+		'prefer-arrow-callback': 'error',
 
-		'no-prototype-builtins': 'off'
+		'no-prototype-builtins': 'off',
+
+		'@typescript-eslint/explicit-module-boundary-types': [
+			'error',
+			{
+				'allowedNames': [
+					'beforeCreate',
+					'created',
+					'beforeMount',
+					'mounted',
+					'beforeUpdate',
+					'updated',
+					'beforeDestroy',
+					'destroyed'
+				]
+			}
+		]
 	},
 	overrides: [
 		{
-			files: ['*.ts'],
+			files: ['*.vue'],
 			rules: {
-				'vue/script-indent': 'off',
-				'indent': ['error', 'tab'],
-				'semi': 'off'
+				// The core 'no-unused-vars' rules (in the eslint:recommended ruleset)
+				// does not work with type definitions
+				'no-unused-vars': 'off'
 			}
 		},
 		{
-			files: ['*.vue', '*.js'],
+			files: ['*.js'],
 			rules: {
-				// The core 'no-unused-vars' rules (in the eslint:recommended ruleset)
-				// does not work with type definitions
-				'no-unused-vars': 'off'
+				'@typescript-eslint/no-var-requires': 'off'
 			}
@@ -105,0 +122,0 @@ }

generator/template/jest.config.js

@@ -25,3 +25,3 @@ module.exports = {
 		'!**/decorators.ts',
-		'!**/router.ts',
+		'!**/router/**',
 		'!**/main.ts',
@@ -42,6 +42,10 @@ '!**/theme/**',
 		MAINTENANCE: 'false',
-		MAINTENANCE_CODE: '',
 		MAINTENANCE_TITLE: '',
-		MAINTENANCE_MESSAGE: ''
+		MAINTENANCE_MESSAGE: '',
+		// Workaround of error "TypeError: Unable to require `.d.ts` file."
+		// See https://github.com/kulshekhar/ts-jest/issues/805#issuecomment-456055213
+		'ts-jest': {
+			isolatedModules: true
+		}
 	}
 };

generator/template/src/components/global/ErrorPage/tests/ErrorPage.spec.ts

@@ -5,3 +5,3 @@ import Vue from 'vue';
 import { mountComponent } from '@/tests-unit';
-import html from '@/tests-unit/html';
+import { html } from '@cnamts/vue-dot/tests/utils/html';
 
@@ -8,0 +8,0 @@ import ErrorPage from '../';

generator/template/src/components/layout/tests/AppFooter.spec.ts

@@ -5,3 +5,3 @@ import Vue from 'vue';
 import { mountComponent } from '@/tests-unit';
-import html from '@/tests-unit/html';
+import { html } from '@cnamts/vue-dot/tests/utils/html';
 
@@ -8,0 +8,0 @@ import AppFooter from '../AppFooter.vue';

generator/template/src/components/layout/tests/AppHeader.spec.ts

@@ -5,3 +5,3 @@ import Vue from 'vue';
 import { mountComponent } from '@/tests-unit';
-import html from '@/tests-unit/html';
+import { html } from '@cnamts/vue-dot/tests/utils/html';
 
@@ -8,0 +8,0 @@ import AppHeader from '../AppHeader.vue';

generator/template/src/components/layout/tests/AppToolbar.spec.ts

@@ -5,3 +5,3 @@ import Vue from 'vue';
 import { mountComponent } from '@/tests-unit';
-import html from '@/tests-unit/html';
+import { html } from '@cnamts/vue-dot/tests/utils/html';
 
@@ -8,0 +8,0 @@ import AppToolbar from '../AppToolbar.vue';

generator/template/src/components/layout/tests/HeaderMenu.spec.ts

@@ -5,3 +5,3 @@ import Vue from 'vue';
 import { mountComponent } from '@/tests-unit';
-import html from '@/tests-unit/html';
+import { html } from '@cnamts/vue-dot/tests/utils/html';
 
@@ -8,0 +8,0 @@ import HeaderMenu from '../HeaderMenu.vue';

generator/template/src/components/Links/tests/Links.spec.ts

@@ -5,3 +5,3 @@ import Vue from 'vue';
 import { mountComponent } from '@/tests-unit';
-import html from '@/tests-unit/html';
+import { html } from '@cnamts/vue-dot/tests/utils/html';
 
@@ -8,0 +8,0 @@ import Links from '../';

generator/template/src/decorators.ts

 import { createDecorator } from 'vue-class-component';
+import type { MetaInfo } from 'vue-meta';
 
+export { MetaInfo };
+
 /** Vue Meta decorator */
@@ -4,0 +7,0 @@ export const Meta = createDecorator((options, key) => {

generator/template/src/global.d.ts

 import Vue from 'vue';
-import VuexBindings from './store/types';
+import { VuexBindings } from './store/types';
 
 declare module 'vue/types/vue' {
-	// tslint:disable-next-line:no-empty-interface
-	interface Vue extends VuexBindings {}
+	/* eslint-disable @typescript-eslint/no-empty-interface */
+	interface Vue extends VuexBindings {
+		// Here you can add types for plugins
+		// that don't have typings
+	}
 }

generator/template/src/i18n.ts

 import Vue from 'vue';
 import VueI18n from 'vue-i18n';
-import axios from '@/plugins/axios';
 
-import translations from '@/translations';
+import axios from 'axios';
 
+import { supportedLanguages } from '@/translations';
+import { default as fallbackLangMessages } from '@/translations/fr';
+
 Vue.use(VueI18n);
 
-// Get default language from previously selected, or from the browser, or fallback to French
-let defaultLang = window.localStorage.getItem('lang') || navigator.language.substr(0, 2) || 'fr';
+const FALLBACK_LANG = 'fr';
 
-if (!translations.includes(defaultLang)) {
-	defaultLang = 'fr';
+/** Default language from previously selected or fallback lang */
+let defaultLang = window.localStorage.getItem('lang') || FALLBACK_LANG;
+
+if (!supportedLanguages.includes(defaultLang)) {
+	defaultLang = FALLBACK_LANG;
 }
 
-const i18n = new VueI18n({
+export const i18n = new VueI18n({
 	locale: defaultLang,
-	fallbackLocale: 'fr', // By default, fallback to French if translation isn't found
-	silentTranslationWarn: true // Remove warnings from the console, as suggested by the author of vue-i18n
+	fallbackLocale: FALLBACK_LANG
 });
 
-const loadedLanguages: string[] = [];
+// Set messages for default language
+i18n.setLocaleMessage(FALLBACK_LANG, fallbackLangMessages);
 
-// Set the language everywhere in the app where it needs to be
-// This means i18n locale, axios headers, localStorage and HTML lang attribute
+const loadedLanguages = [FALLBACK_LANG]; // Our default language that is preloaded
+
 function setI18nLanguage(lang: string): string {
@@ -40,15 +44,31 @@ i18n.locale = lang;
 
-// The function to change language, which loads the translation file if needed with webpack dynamic import
-export function loadLanguageAsync(lang: string): Promise<string> {
-	if (!loadedLanguages.includes(lang)) {
-		return import(/* webpackChunkName: "translations-[request]" */ `@/translations/${lang}`).then((messages) => {
-			i18n.setLocaleMessage(lang, messages.default);
-			loadedLanguages.push(lang);
-			return setI18nLanguage(lang);
-		});
+/**
+ * The function to change language, which loads
+ * the translation file if needed with webpack dynamic import
+ *
+ * @param {string} lang The lang to use
+ * @returns {Promise<string>}
+ */
+export async function loadLanguageAsync(lang: string): Promise<string> {
+	// If the same language
+	if (i18n.locale === lang) {
+		return Promise.resolve(setI18nLanguage(lang));
 	}
 
-	return Promise.resolve(setI18nLanguage(lang));
+	// If the language was already loaded
+	if (loadedLanguages.includes(lang)) {
+		return Promise.resolve(setI18nLanguage(lang));
+	}
+
+	// If the language isn't supported
+	if (!supportedLanguages.includes(lang)) {
+		return Promise.reject(lang);
+	}
+
+	// If the language hasn't been loaded yet
+	const messages = await import(/* webpackChunkName: "translations-[request]" */ `@/translations/${lang}`);
+	i18n.setLocaleMessage(lang, messages.default);
+	loadedLanguages.push(lang);
+
+	return setI18nLanguage(lang);
 }
-
-export default i18n;

generator/template/src/main.ts

 import Vue from 'vue';
 
+// Register class components hooks
+import Component from 'vue-class-component';
+
+Component.registerHooks([
+	'beforeRouteEnter',
+	'beforeRouteLeave',
+	'beforeRouteUpdate'
+]);
+
 // Import plugins
-import vuetify from './plugins/vuetify';
+import { vuetify } from './plugins/vuetify';
 import './plugins/vue-dot';
@@ -10,5 +19,5 @@ import './plugins/webfontloader';
 import App from './App.vue';
-import router from './router';
-import store from './store';<% if (i18n) { %>
-import i18n from './i18n';<% } %>
+import { router } from './router';
+import { store } from './store';<% if (i18n) { %>
+import { i18n } from './i18n';<% } %>
 
@@ -15,0 +24,0 @@ // Register global components

generator/template/src/plugins/axios.ts

@@ -1,6 +0,6 @@
-import axios, { AxiosError } from 'axios';
+import axios, { AxiosError, AxiosResponse } from 'axios';
 
-import store from '@/store';
+import { store } from '@/store';
 
-import { mdiAlert } from '@mdi/js';
+import { mdiAlert as errorIcon } from '@mdi/js';
 <% if (i18n) { %>
@@ -43,3 +43,3 @@ import common from '@/translations/fr/common';
 			message: errorMessage,
-			icon: mdiAlert
+			icon: errorIcon
 		});
@@ -51,2 +51,3 @@ }
 
-export default instance;
+export { instance as axios };
+export { AxiosResponse };

generator/template/src/plugins/vue-dot.ts

@@ -10,3 +10,3 @@ import Vue from 'vue';
 // Import the theme styles
-import '@/theme/theme.scss';
+import '@/theme/styles/index.scss';
 
@@ -13,0 +13,0 @@ // Register v-mask directive

generator/template/src/plugins/vuetify.ts

@@ -9,12 +9,9 @@ import Vue from 'vue';
 // Import theme colors
-import colors from '@/theme/colors';
+import { themeColors } from '@/theme/colors';
 
 Vue.use(Vuetify);
 
-export default new Vuetify({
+export const vuetify = new Vuetify({
 	theme: {
-		// Destructure colors object in theme
-		themes: {
-			...colors
-		}
+		themes: themeColors
 	},
@@ -21,0 +18,0 @@ icons: {

generator/template/src/services/dateFormatter.ts

@@ -8,3 +8,3 @@ import dayjs from 'dayjs';
  * @param {string} [format=DD/MM/YYYY] The format to parse the date to
- * @returns {string} The formated date
+ * @returns {string} The formatted date
  */
@@ -11,0 +11,0 @@ export default function formatDate(date: string | undefined, format = 'DD/MM/YYYY'): string {

generator/template/src/store/index.ts

@@ -16,3 +16,3 @@ import Vue from 'vue';
 /** See https://vuex.vuejs.org/fr/getting-started.html for help */
-const store: StoreOptions<RootState> = {
+const storeOptions: StoreOptions<RootState> = {
 	strict: true,
@@ -29,2 +29,2 @@ state: {},
 
-export default new Vuex.Store<RootState>(store);
+export const store = new Vuex.Store<RootState>(storeOptions);

generator/template/src/store/types.d.ts

@@ -1,2 +0,2 @@
-// tslint:disable-next-line:no-empty-interface
+/* eslint-disable @typescript-eslint/no-empty-interface */
 export interface RootState {}
@@ -10,3 +10,3 @@
  */
-export default interface VuexBindings {
+export interface VuexBindings {
 	// modules/notification
@@ -13,0 +13,0 @@ notify: (notification: NotificationObj) => void;

generator/template/src/theme/colors.ts

@@ -5,3 +5,3 @@ // Import Vuetify theme from Design Tokens
 /** Custom Vuetify color theme */
-export default {
+export const themeColors = {
 	light: {
@@ -8,0 +8,0 @@ ...vuetifyTheme

generator/template/src/translations/fr/views/maintenance.ts

 export default {
 	title: 'Maintenance en cours',
-	code: '503',
-	error: 'Maintenance en cours',
 	message: 'L\'application n\'est pas disponible pour le moment, veuillez nous excuser pour la gêne occasionnée.'
 };

generator/template/src/translations/index.ts

@@ -1,5 +0,3 @@
-const translations = [
+export const supportedLanguages = [
 	'fr'
 ];
-
-export default translations;

generator/template/src/types/index.d.ts

 // Here you can define types that
 // you'll be using across your application
 
-import Vue from 'vue';
-
 export interface Link {
@@ -11,14 +9,1 @@ id: number;
 }
-
-/** Vue Router next() param */
-export interface NextRoute {
-	name: string;
-}
-
-/**
- * Extends refs, eg:
- * $refs!: Refs<{
- *  myProp: MyType;
- * }>;
- */
-export type Refs<T extends object> = Vue['$refs'] & T;

generator/template/src/views/tests/About.spec.ts

@@ -5,3 +5,3 @@ import Vue from 'vue';
 import { mountComponent } from '@/tests-unit';
-import html from '@/tests-unit/html';
+import { html } from '@cnamts/vue-dot/tests/utils/html';
 
@@ -8,0 +8,0 @@ import About from '../About.vue';

generator/template/src/views/tests/Home.spec.ts

@@ -5,6 +5,4 @@ import Vue from 'vue';
 import { mountComponent } from '@/tests-unit';
-import html from '@/tests-unit/html';
+import { html } from '@cnamts/vue-dot/tests/utils/html';
 
-import Vuex from 'vuex';
-
 import Home from '../Home.vue';
@@ -11,0 +9,0 @@

generator/template/src/views/tests/Maintenance.spec.ts

@@ -5,3 +5,3 @@ import Vue from 'vue';
 import { mountComponent } from '@/tests-unit';
-import html from '@/tests-unit/html';
+import { html } from '@cnamts/vue-dot/tests/utils/html';
 
@@ -8,0 +8,0 @@ import Maintenance from '../Maintenance.vue';

generator/template/src/views/tests/NotFound.spec.ts

@@ -5,3 +5,3 @@ import Vue from 'vue';
 import { mountComponent } from '@/tests-unit';
-import html from '@/tests-unit/html';
+import { html } from '@cnamts/vue-dot/tests/utils/html';
 
@@ -8,0 +8,0 @@ import NotFound from '../NotFound.vue';

generator/template/tests/unit/App.spec.ts

@@ -5,3 +5,3 @@ import Vue from 'vue';
 import { router, mountComponent } from '@/tests-unit';
-import html from '@/tests-unit/html';
+import { html } from '@cnamts/vue-dot/tests/utils/html';
 
@@ -8,0 +8,0 @@ import App from '@/App.vue';

generator/template/tests/unit/index.ts

@@ -13,4 +13,6 @@ // Global test configuration
 	config
-} from '@vue/test-utils';<% if (i18n) { %>
+} from '@vue/test-utils';
 
+import { addVApp } from '@cnamts/vue-dot/tests/utils/addVApp';<% if (i18n) { %>
+
 // If mocks is undefined, init it
@@ -37,3 +39,3 @@ if (!config.mocks) {
  */
-export function newRouter(options: RouterOptions) {
+export function newRouter(options: RouterOptions): VueRouter {
 	return new VueRouter(options);
@@ -56,3 +58,3 @@ }
  */
-export function newStore(options: StoreOptions<any>): Store<any> {
+export function newStore<T = unknown>(options: StoreOptions<T>): Store<T> {
 	return new Vuex.Store(options);
@@ -71,7 +73,12 @@ }
 
+const vuetify = new Vuetify();
+
+import VueTheMask from 'vue-the-mask';
+localVue.use(VueTheMask);
+
+addVApp();
+
 // Register global components
 import '@/components/global';
 
-const vuetify = new Vuetify();
-
 /**
@@ -88,3 +95,3 @@ * Generic mount function
 	options: ShallowMountOptions<Vue> | MountOptions<Vue> = {},
-	fullMount: boolean = false
+	fullMount = false
 ): Wrapper<Vue> {
@@ -101,2 +108,2 @@ // Use mount() instead of shallowMount() when fullMount is true
 
-export default localVue;
+export { localVue };

generator/template/vue.config.js

@@ -11,3 +11,6 @@ // Vue CLI configuration
 			splitChunks: {
-				chunks: 'all'
+				chunks: 'all',
+				// Remove default ~ from filename
+				// because it's blocked by firewall
+				automaticNameDelimiter: '.'
 			}
@@ -14,0 +17,0 @@ },

package.json

 {
 	"name": "@cnamts/vue-cli-plugin-vue-dash",
-	"version": "2.0.0-alpha.49",
+	"version": "2.0.0-alpha.51",
 	"description": "Vue CLI plugin to scaffold front-end projects",
@@ -23,11 +23,14 @@ "keywords": [
 	"dependencies": {
-		"@cnamts/cli-helpers": "^2.0.0-alpha.48",
-		"dayjs": "^1.8.20",
-		"fs-extra": "^8.1.0",
+		"@cnamts/cli-helpers": "^2.0.0-alpha.51",
+		"dayjs": "^1.8.23",
+		"fs-extra": "^9.0.0",
 		"superb": "^4.0.0"
 	},
+	"devDependencies": {
+		"@cnamts/vue-dot": "^2.0.0-alpha.51"
+	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d37598d7055b3c144f95b392b1cd0c3059711d8d"
+	"gitHead": "5b75ffe697f3be9bef69be6d003ea6c9f70b27c4"
 }

prompts.js

@@ -12,3 +12,3 @@ const shouldRenderTemplate = require('./shouldRenderTemplate');
 		type: 'text',
-		message: 'Project description',
+		message: 'Description du projet',
 		default: `My ${superb()} project`
@@ -19,3 +19,3 @@ },
 		type: 'confirm',
-		message: 'Use i18n (internationalization)',
+		message: 'Utiliser Vue i18n (pour l\'internationalisation)',
 		default: true
@@ -26,4 +26,10 @@ },
 		type: 'confirm',
-		message: 'Use Vuex Persist',
+		message: 'Utiliser Vuex Persist',
 		default: true
+	},
+	{
+		name: 'matomo',
+		type: 'confirm',
+		message: 'Installer Matomo (pour les analyses d\'audience)',
+		default: false
 	}
@@ -30,0 +36,0 @@ ];

No alert changes

Improved metrics

Total package byte prevSize

183368

increased by1.39%

Number of package files

115

increased by5.5%

Lines of code

1708

increased by0.95%

Worsened metrics

Dev dependency count

1

increased byInfinity%

Dependency changes

• + Addedat-least-node@1.0.0(transitive)

• + Addedfs-extra@9.1.0(transitive)

• + Addedjsonfile@6.1.0(transitive)

• + Addeduniversalify@2.0.1(transitive)

• - Removedfs-extra@8.1.0(transitive)

• - Removedjsonfile@4.0.0(transitive)

• - Removeduniversalify@0.1.2(transitive)

• Updated@cnamts/cli-helpers@^2.0.0-alpha.51

• Updateddayjs@^1.8.23

• Updatedfs-extra@^9.0.0