Formats

.editorconfig

@@ -0,0 +1,12 @@
+# This file is for unifying the coding style of different editors and IDEs.
+# editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintrc.js

@@ -0,0 +1,50 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+  },
+  extends: [
+    'plugin:react/recommended',
+    'airbnb',
+    'plugin:prettier/recommended',
+  ],
+  globals: {
+    Atomics: 'readonly',
+    SharedArrayBuffer: 'readonly',
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  plugins: ['react', 'svelte3'],
+  rules: {
+    'import/no-extraneous-dependencies': 'off',
+    'react/jsx-filename-extension': 'off',
+    'jsx-a11y/label-has-associated-control': 'off',
+    'react/no-array-index-key': 'off',
+    'react/prop-types': 'off',
+    'react/jsx-props-no-spreading': 'off',
+  },
+  overrides: [
+    {
+      files: ['**/*.svelte'],
+      processor: 'svelte3/svelte3',
+      rules: {
+        'import/no-mutable-exports': ['off'],
+        'import/first': ['off'],
+        'import/no-unresolved': ['off'],
+        'import/no-extraneous-dependencies': ['off'],
+        'import/extensions': ['off'],
+        'no-multiple-empty-lines': ['off'],
+        'no-undef-init': ['off'],
+        'no-shadow': ['off'],
+        'no-nested-ternary': ['off'],
+        'a11y-invalid-attribute': ['off'],
+        'a11y-missing-attribute': ['off'],
+      },
+    },
+  ],
+};

.huskyrc

@@ -0,0 +1,3 @@
+{
+  "hooks": {}
+}

.huskyrc2

@@ -0,0 +1,5 @@
+{
+  "hooks": {
+    "pre-commit": "lint-staged"
+  }
+}

.lintstagedrc

@@ -0,0 +1,8 @@
+{
+  "*.js": [
+    "eslint"
+  ],
+  "*.+(js|json|ts)": [
+    "prettier --write"
+  ]
+}

.prettierrc

@@ -0,0 +1,18 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": true
+}

.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "eslint.enable": true,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "vue",
+    "typescript",
+    "svelte"
+  ]
+}

build/webpack-react.config.js

@@ -54,60 +54,48 @@ module.exports = {
           options: {
             presets: [
               '@babel/preset-react',
-              ['@babel/preset-env', {
-                modules: false,
-              }],
+              [
+                '@babel/preset-env',
+                {
+                  modules: false,
+                },
+              ],
             ],
             plugins: [
               '@babel/plugin-transform-runtime',
               '@babel/plugin-syntax-dynamic-import',
             ],
           },
         },
-        include: [
-          resolvePath('src'),
-          resolvePath('demo'),
-        ],
+        include: [resolvePath('src'), resolvePath('demo')],
       },
       {
         test: /\.css$/,
-        use: [
-          'style-loader',
-          'css-loader',
-          'postcss-loader',
-        ],
+        use: ['style-loader', 'css-loader', 'postcss-loader'],
       },
       {
         test: /\.(sa|sc)ss$/,
-        use: [
-          'style-loader',
-          'css-loader',
-          'postcss-loader',
-          'sass-loader',
-        ],
+        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
         loader: 'file-loader',
         options: {
           name: 'images/[name].[hash:6].[ext]',
-
         },
       },
       {
         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac|m4a)(\?.*)?$/,
         loader: 'file-loader',
         options: {
           name: 'media/[name].[hash:6].[ext]',
-
         },
       },
       {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
         loader: 'file-loader',
         options: {
           name: 'fonts/[name].[hash:6].[ext]',
-
         },
       },
     ],
@@ -127,14 +115,17 @@ module.exports = {
       filename: './index.html',
       template: './demo/react/index.html',
       inject: true,
-      minify: env === 'production' ? {
-        collapseWhitespace: true,
-        removeComments: true,
-        removeRedundantAttributes: true,
-        removeScriptTypeAttributes: true,
-        removeStyleLinkTypeAttributes: true,
-        useShortDoctype: true,
-      } : false,
+      minify:
+        env === 'production'
+          ? {
+              collapseWhitespace: true,
+              removeComments: true,
+              removeRedundantAttributes: true,
+              removeScriptTypeAttributes: true,
+              removeStyleLinkTypeAttributes: true,
+              useShortDoctype: true,
+            }
+          : false,
     }),
     new CopyWebpackPlugin([
       {

build/webpack-svelte.config.js

@@ -54,20 +54,20 @@ module.exports = {
           loader: 'babel-loader',
           options: {
             presets: [
-              ['@babel/preset-env', {
-                modules: false,
-              }],
+              [
+                '@babel/preset-env',
+                {
+                  modules: false,
+                },
+              ],
             ],
             plugins: [
               '@babel/plugin-transform-runtime',
               '@babel/plugin-syntax-dynamic-import',
             ],
           },
         },
-        include: [
-          resolvePath('src'),
-          resolvePath('demo'),
-        ],
+        include: [resolvePath('src'), resolvePath('demo')],
       },
       {
         test: /\.svelte$/,
@@ -80,43 +80,31 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        use: [
-          'style-loader',
-          'css-loader',
-          'postcss-loader',
-        ],
+        use: ['style-loader', 'css-loader', 'postcss-loader'],
       },
       {
         test: /\.(sa|sc)ss$/,
-        use: [
-          'style-loader',
-          'css-loader',
-          'postcss-loader',
-          'sass-loader',
-        ],
+        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
         loader: 'file-loader',
         options: {
           name: 'images/[name].[hash:6].[ext]',
-
         },
       },
       {
         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac|m4a)(\?.*)?$/,
         loader: 'file-loader',
         options: {
           name: 'media/[name].[hash:6].[ext]',
-
         },
       },
       {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
         loader: 'file-loader',
         options: {
           name: 'fonts/[name].[hash:6].[ext]',
-
         },
       },
     ],
@@ -136,14 +124,17 @@ module.exports = {
       filename: './index.html',
       template: './demo/svelte/index.html',
       inject: true,
-      minify: env === 'production' ? {
-        collapseWhitespace: true,
-        removeComments: true,
-        removeRedundantAttributes: true,
-        removeScriptTypeAttributes: true,
-        removeStyleLinkTypeAttributes: true,
-        useShortDoctype: true,
-      } : false,
+      minify:
+        env === 'production'
+          ? {
+              collapseWhitespace: true,
+              removeComments: true,
+              removeRedundantAttributes: true,
+              removeScriptTypeAttributes: true,
+              removeStyleLinkTypeAttributes: true,
+              useShortDoctype: true,
+            }
+          : false,
     }),
     new CopyWebpackPlugin([
       {