feat: better support for svelte

improve prettier and lint-staged configs

package.json

@@ -34,6 +34,7 @@
     "lerna": "^3.22.1",
     "npm-run-all": "^4.1.5",
     "react": "^17.0.1",
+    "svelte": "^3.32.3",
     "ts-jest": "^26.5.1",
     "tslint": "^6.1.3",
     "type-coverage": "^2.15.1",

packages/app-config/package.json

@@ -18,7 +18,7 @@
     "@pkgr/imagemin": "^0.5.0",
     "browserslist": "^4.16.3",
     "postcss": "^8.2.6",
-    "stylelint": "^13.10.0"
+    "stylelint": "^13.11.0"
   },
   "publishConfig": {
     "access": "public"

packages/eslint-config/base.js

@@ -18,8 +18,6 @@ module.exports = {
     'plugin:unicorn/recommended',
     'standard',
     'plugin:prettier/recommended',
-    'prettier/standard',
-    'prettier/unicorn',
   ],
   settings: {
     node: {
@@ -28,6 +26,7 @@ module.exports = {
         '.ts',
         '.tsx',
         '.vue',
+        '.svelte',
         '.mjs',
         '.js',
         '.jsx',
@@ -39,8 +38,7 @@ module.exports = {
   },
   globals: isWebpackAvailable ? getGlobals(webpackSpecVars) : undefined,
   rules: {
-    // blocked by https://github.com/prettier/eslint-config-prettier/issues/174
-    // 'arrow-body-style': 2,
+    'arrow-body-style': 2,
     camelcase: [
       2,
       {
@@ -82,6 +80,7 @@ module.exports = {
         ignoreArrayIndexes: true,
       },
     ],
+    'no-negated-condition': 2,
     'no-process-exit': 0, // suspended by unicorn/no-process-exit
     'node/no-unsupported-features/es-syntax': 0,
     'node/no-unsupported-features/node-builtins': 0,

packages/eslint-config/overrides.js

@@ -5,10 +5,12 @@ const {
   isAngularAvailable,
   isReactAvailable,
   isPkgAvailable,
+  isSvelteAvailable,
   isTsAvailable,
   isVueAvailable,
   tryFile,
   tryPkg,
+  tryRequirePkg,
 } = require('@pkgr/utils')
 
 const { magicNumbers } = require('./_util')
@@ -19,15 +21,14 @@ const configFile =
   tryPkg('@1stg/babel-preset/config')
 
 const jsBase = {
-  files: '*.{mjs,js,jsx}',
+  files: ['*.mjs', '*.js', '*.jsx'],
   parser: '@babel/eslint-parser',
   parserOptions: configFile && {
     babelOptions: {
       configFile,
     },
   },
   plugins: ['@babel'],
-  extends: ['prettier/babel'],
   rules: {
     camelcase: [
       2,
@@ -75,6 +76,7 @@ const resolveSettings = {
       '.tsx',
       '.d.ts',
       '.vue',
+      '.svelte',
       '.mjs',
       '.js',
       '.jsx',
@@ -86,12 +88,12 @@ const resolveSettings = {
 }
 
 const tsBase = {
-  files: '*.{ts,tsx}',
+  files: ['*.ts', '*.tsx'],
   extends: [
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:import/typescript',
-    'prettier/@typescript-eslint',
+    'prettier',
   ],
   settings: resolveSettings,
   rules: {
@@ -284,12 +286,7 @@ exports.angular = [
 ]
 
 const reactJsx = {
-  extends: [
-    'standard-react',
-    'plugin:react/recommended',
-    'prettier',
-    'prettier/react',
-  ],
+  extends: ['standard-react', 'plugin:react/recommended', 'prettier'],
   settings: {
     react: {
       version: 'detect',
@@ -337,26 +334,56 @@ exports.reactTs = {
   },
 }
 
-const vueExtends = ['plugin:vue/recommended', 'prettier', 'prettier/vue']
+const vueExtends = ['plugin:vue/recommended', 'prettier']
 
 exports.vue = [
   {
     ...jsBase,
+    files: [...jsBase.files, !isTsAvailable && '*.vue'].filter(Boolean),
     parser: 'vue-eslint-parser',
-    parserOptions: { ...jsBase.parserOptions, parser: jsBase.parser },
+    parserOptions: {
+      ...jsBase.parserOptions,
+      parser: jsBase.parser,
+    },
     extends: vueExtends,
   },
-  {
+  isTsAvailable && {
     ...tsBase,
+    files: [...tsBase.files, '*.vue'],
     parser: 'vue-eslint-parser',
-    files: '*.{vue,ts,tsx}',
     parserOptions: {
       parser: '@typescript-eslint/parser',
       extraFileExtensions: ['.vue'],
     },
     extends: [...tsBase.extends, ...vueExtends],
   },
-]
+].filter(Boolean)
+
+const svelteBase = {
+  files: '*.svelte',
+  plugins: ['svelte3'],
+  processor: 'svelte3/svelte3',
+  rules: {
+    'prettier/prettier': 0, // https://github.com/sveltejs/eslint-plugin-svelte3/issues/16
+  },
+}
+
+exports.svelte = isTsAvailable
+  ? {
+      ...tsBase,
+      ...svelteBase,
+      parserOptions: {
+        extraFileExtensions: ['.svelte'],
+      },
+      settings: {
+        ...tsBase.settings,
+        'svelte3/typescript': tryRequirePkg('typescript'),
+      },
+    }
+  : {
+      ...jsBase,
+      ...svelteBase,
+    }
 
 exports.mdx = {
   files: '*.{md,mdx}',
@@ -402,6 +429,7 @@ exports.overrides = []
     isReactAvailable && exports.reactHooks,
     isReactAvailable && exports.reactTs,
     isVueAvailable && exports.vue,
+    isSvelteAvailable && exports.svelte,
     isAngularAvailable && exports.angular,
     exports.mdx,
     exports.jest,

packages/eslint-config/package.json

@@ -16,7 +16,7 @@
     "@typescript-eslint/eslint-plugin": "^4.15.1",
     "@typescript-eslint/eslint-plugin-tslint": "^4.15.1",
     "@typescript-eslint/parser": "^4.15.1",
-    "eslint-config-prettier": "^7.2.0",
+    "eslint-config-prettier": "^8.0.0",
     "eslint-config-standard": "^16.0.2",
     "eslint-config-standard-jsx": "^10.0.0",
     "eslint-config-standard-react": "^11.0.1",
@@ -32,6 +32,7 @@
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-sonarjs": "^0.6.0",
+    "eslint-plugin-svelte3": "^3.1.1",
     "eslint-plugin-unicorn": "^28.0.2",
     "eslint-plugin-vue": "^7.6.0"
   },

packages/lib-config/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@1stg/common-config": "^1.2.0",
-    "@pkgr/rollup": "^0.11.2",
+    "@pkgr/rollup": "^0.11.3",
     "jest": "^26.6.3"
   },
   "publishConfig": {

packages/lint-staged/base.js

@@ -1,21 +1,35 @@
-/* eslint-disable sonarjs/no-duplicate-string */
-const { isPkgAvailable } = require('@pkgr/utils')
+const { isPkgAvailable, tryFile } = require('@pkgr/utils')
 
-const config = {
-  '*.{*sh,env,env.*,gql,html,json,properties,pug,rb,vue,toml,yaml,yml}': [
-    'prettier --write',
-  ],
-  '.!(*browserslist|npm|yarn)rc': ['prettier --write'],
-  '.{editorconfig|browserslistrc|npmrc|yarnrc}': [
-    'prettier --write --parser sh',
-  ],
-  Dockerfile: ['prettier --write'],
+const config = [
+  '*.{*sh,env,env.*,gql,html,json,properties,pug,rb,svelte,vue,toml,yaml,yml}',
+  '.(editorconfig|*rc)',
+  'Dockerfile',
+].reduce(
+  (acc, files) =>
+    Object.assign(acc, {
+      [files]: ['prettier --write'],
+    }),
+  {},
+)
+
+if (isPkgAvailable('eslint')) {
+  Object.assign(
+    config,
+    {
+      '*.{js,jsx,md,mdx,mjs,svelte,vue}': ['eslint --cache -f friendly --fix'],
+    },
+    require('./ts-eslint'),
+  )
 }
 
 if (isPkgAvailable('stylelint')) {
   config['*.{css,less,sass,scss,vue}'] = ['stylelint --cache --fix']
 }
 
+if (isPkgAvailable('tslint') && tryFile('tslint.json')) {
+  Object.assign(config, require('./ts-tslint'))
+}
+
 if (isPkgAvailable('@pkgr/imagemin')) {
   config['*.{gif,jpeg,jpg,png,svg,webp}'] = ['i']
 }

packages/lint-staged/index.js

@@ -1,19 +1 @@
-const { isPkgAvailable, tryFile } = require('@pkgr/utils')
-
-const config = { ...require('./base') }
-
-if (isPkgAvailable('eslint')) {
-  Object.assign(
-    config,
-    {
-      '*.{js,jsx,md,mdx,mjs,vue}': ['eslint --cache -f friendly --fix'],
-    },
-    require('./ts-eslint'),
-  )
-}
-
-if (isPkgAvailable('tslint') && tryFile('tslint.json')) {
-  Object.assign(config, require('./ts-tslint'))
-}
-
-module.exports = config
+module.exports = require('./base')

packages/lint-staged/tsc.js

@@ -1,4 +1,4 @@
 module.exports = {
-  ...require('.'),
+  ...require('./base'),
   '*.ts?(x)': () => 'tsc --incremental false --noEmit',
 }

packages/prettier-config/base.js

@@ -4,6 +4,7 @@ module.exports = {
   singleQuote: true,
   trailingComma: 'all',
   xmlWhitespaceSensitivity: 'ignore',
+  svelteIndentScriptAndStyle: false, // align with default option of `vueIndentScriptAndStyle`
   overrides: [
     {
       files: ['.*rc', '*.json'],
@@ -12,7 +13,7 @@ module.exports = {
       },
     },
     {
-      files: ['.bashrc', '.cshrc', '.zshrc'],
+      files: ['.browserslistrc', '.npmrc', '.yarnrc'],
       options: {
         parser: 'sh',
       },

packages/prettier-config/package.json

@@ -14,6 +14,7 @@
     "@prettier/plugin-xml": "^0.13.0",
     "prettier-plugin-pkg": "^0.8.0",
     "prettier-plugin-sh": "^0.6.0",
+    "prettier-plugin-svelte": "^2.1.6",
     "prettier-plugin-toml": "^0.3.1"
   },
   "publishConfig": {

packages/prettier-config/svelte.js

@@ -0,0 +1,14 @@
+const baseConfig = require('./base')
+
+module.exports = {
+  ...baseConfig,
+  overrides: [
+    ...baseConfig.overrides,
+    {
+      files: '*.html',
+      options: {
+        parser: 'svelte',
+      },
+    },
+  ],
+}

tests/test.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+let count = 1
+
+// the `$:` means 're-run whenever these values change'
+$: doubled = count * 2
+$: quadrupled = doubled * 2
+
+function handleClick() {
+  count += 1
+}
+</script>
+
+<button class="test" on:click={handleClick}>Count: {count}</button>
+
+<p>{count} * 2 = {doubled}</p>
+<p>{doubled} * 2 = {quadrupled}</p>
+
+<style>
+.test {
+  border: transparent;
+}
+</style>