		{
		"package": {
		"dependencies": {
		"@mediamonks/eslint-config": "^1.2.3",
		"@mediamonks/eslint-config-react": "^1.0.0",
		"@mediamonks/react-scripts": "4.0.1-mm.3",
		@@ -20,27 +20,5 @@ "@storybook/addon-actions": "^6.1.7",
		"@types/styled-components": "^5.1.4",
		"@typescript-eslint/eslint-plugin": "^4.14.1",
		"@typescript-eslint/parser": "^4.14.1",
		"@vue/cli-plugin-typescript": "^4.5.11",
		"@vue/cli-service": "^4.5.11",
		"@vue/eslint-config-airbnb": "^5.3.0",
		"@vue/eslint-config-typescript": "^7.0.0",
		"babel-eslint": "^10.1.0",
		"babel-loader": "8.1.0",
		"confusing-browser-globals": "^1.0.10",
		"cross-env": "^7.0.3",
		"cypress": "^4.12.1",
		"eslint": "^7.19.0",
		"eslint-config-prettier": "^7.2.0",
		"eslint-friendly-formatter": "^4.0.1",
		"eslint-import-resolver-webpack": "^0.13.0",
		"eslint-plugin-babel": "^5.3.1",
		"eslint-plugin-cypress": "^2.11.2",
		"eslint-plugin-html": "^6.1.1",
		"eslint-plugin-import": "^2.22.1",
		"eslint-plugin-jsx-a11y": "^6.4.1",
		"eslint-plugin-prettier": "^3.3.1",
		"eslint-plugin-react": "^7.22.0",
		"eslint-plugin-react-hooks": "^4.2.0",
		"eslint-plugin-unicorn": "27.0.0",
		"eslint-plugin-vue": "^7.5.0",
		"eslint": "^7.21.0",
		"framer-motion": "^2.9.4",
		@@ -47,0 +25,0 @@ "husky": "^4.3.0",

template/.eslintrc.js

		module.exports = {
		extends: ['@mediamonks'],
		rules: {
		// this is the same rule configuration as in `eslint-config-airbnb`
		// with the `ForOfStatement` selector omitted, as for modern browsers `for ... of` statements are fine to be used
		'no-restricted-syntax': [
		'error',
		{
		selector: 'ForInStatement',
		message:
		'for..in loops iterate over the entire prototype chain, which is virtually never what you want. Use Object.{keys,values,entries}, and iterate over the resulting array.',
		},
		{
		selector: 'LabeledStatement',
		message:
		'Labels are a form of GOTO; using them makes code confusing and hard to maintain and understand.',
		},
		{
		selector: 'WithStatement',
		message:
		'`with` is disallowed in strict mode because it makes code impossible to predict and optimize.',
		},
		],
		'react/jsx-props-no-spreading': 'off',
		// no longer needed with the new JSX transform
		'react/react-in-jsx-scope': 'off',
		extends: ['@mediamonks/eslint-config-react'],
		parserOptions: {
		project: 'tsconfig.json',
		},
		};

template/src/hooks/useMount.ts

		import { EffectCallback, useEffect } from 'react';

		/**
		* @param fn - function, which is triggered on mount. If the function returns a callback, it will be called on unmount.
		* @param callback - function, which is triggered on mount. If the function returns a callback, it will be called on unmount.
		*/
		const useMount = (fn: EffectCallback): void => {
		useEffect(fn, []);
		};

		export default useMount;
		export default function useMount(callback: EffectCallback): void {
		// eslint-disable-next-line react-hooks/exhaustive-deps
		useEffect(callback, []);
		}

template/src/hooks/useStoreFactory.ts

		@@ -14,5 +14,5 @@ import { action, observable, runInAction } from 'mobx';
		*/
		const useStoreFactory = <TStore extends Record<string, unknown>>(
		storeFactory: () => TStore,
		): TStore => {
		export default function useStoreFactory<T extends Record<string, unknown>>(
		storeFactory: () => T,
		): T {
		const [store] = useState(() => {
		@@ -23,7 +23,7 @@ const local = observable(storeFactory());
		for (const key of Object.keys(local)) {
		const fn = local[key];
		if (typeof fn === 'function') {
		const callback = local[key];
		if (typeof callback === 'function') {
		(local as Record<typeof key, unknown>)[key] = action(
		fn.name,
		(...args: Array<unknown>) => fn.apply(local, args),
		callback.name,
		(...args: Array<unknown>) => callback.apply(local, args),
		);
		@@ -38,4 +38,2 @@ }
		return store;
		};

		export default useStoreFactory;
		}

template/src/hooks/useUnmount.ts

		import { useEffect } from 'react';

		/**
		* @param fn - function, which is triggered on unmount.
		* @param destructor - function, which is triggered on unmount.
		*/
		const useUnmount = (fn: () => void): void => {
		useEffect(() => fn, []);
		};

		export default useUnmount;
		export default function useUnmount(destructor: () => void): void {
		// eslint-disable-next-line react-hooks/exhaustive-deps
		useEffect(() => destructor, []);
		}

template/src/reportWebVitals.ts

		@@ -5,2 +5,3 @@ import type { ReportHandler } from 'web-vitals';
		if (onPerfEntry && onPerfEntry instanceof Function) {
		// eslint-disable-next-line @typescript-eslint/naming-convention
		const { getCLS, getFID, getFCP, getLCP, getTTFB } = await import('web-vitals');
		@@ -7,0 +8,0 @@

@mediamonks/cra-template-standard - npm Package Compare versions

New alerts