Develop

.eslintrc

@@ -19,18 +19,22 @@
     "prettier/prettier": ["error", {
       "endOfLine": "auto"
     }],
+    "import/extensions": "off",
     "import/no-unresolved": 0,
     "import/no-extraneous-dependencies": 0,
     "vue/no-v-html": "off",
     "vue/max-attributes-per-line": "off",
     "vue/singleline-html-element-content-newline": "off",
     "vue/html-closing-bracket-newline": "off",
-    "vue/html-self-closing": ["error", {
-      "html": {
-        "void": "always",
-        "normal": "never",
-        "component": "any"
+    "vue/html-self-closing": [
+      "error",
+      {
+        "html": {
+          "void": "always",
+          "normal": "never",
+          "component": "any"
+        }
       }
-    }]
+    ]
   }
 }

.husky/_/husky.sh

@@ -0,0 +1,30 @@
+#!/bin/sh
+if [ -z "$husky_skip_init" ]; then
+  debug () {
+    [ "$HUSKY_DEBUG" = "1" ] && echo "husky (debug) - $1"
+  }
+
+  readonly hook_name="$(basename "$0")"
+  debug "starting $hook_name..."
+
+  if [ "$HUSKY" = "0" ]; then
+    debug "HUSKY env variable is set to 0, skipping hook"
+    exit 0
+  fi
+
+  if [ -f ~/.huskyrc ]; then
+    debug "sourcing ~/.huskyrc"
+    . ~/.huskyrc
+  fi
+
+  export readonly husky_skip_init=1
+  sh -e "$0" "$@"
+  exitCode="$?"
+
+  if [ $exitCode != 0 ]; then
+    echo "husky - $hook_name hook exited with code $exitCode (error)"
+    exit $exitCode
+  fi
+
+  exit 0
+fi

.storybook/main.js

@@ -0,0 +1,55 @@
+const path = require('path')
+
+module.exports = {
+  core: {
+    builder: 'webpack5'
+  },
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/preset-scss',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        vueDocgenOptions: {
+          alias: {
+            '@': path.resolve(__dirname, '../')
+          }
+        }
+      }
+    },
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        cssLoaderOptions: {
+          // When you have splitted your css over multiple files
+          // and use @import('./other-styles.css')
+          importLoaders: 1
+        },
+        postcssLoaderOptions: {
+          implementation: require('postcss')
+        }
+      }
+    }
+  ],
+  webpackFinal: async (config) => {
+    config.resolve.alias['@'] = path.resolve(__dirname, '../src')
+    config.module.rules.push({
+      test: /\.(s[ac]ss|css)$/,
+      use: [
+        'postcss-loader',
+        {
+          loader: 'sass-loader',
+          options: {
+            sassOptions: {
+              indentWidth: 4,
+              includePaths: []
+            }
+          }
+        }
+      ]
+    })
+    return config
+  }
+}

.storybook/manager-head.html

@@ -0,0 +1 @@
+<link rel="icon" href="favicon.png" />

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons'
+import UnknownTheme from './unknown-theme'
+
+addons.setConfig({
+  theme: UnknownTheme
+})

.storybook/preview.js

@@ -0,0 +1,17 @@
+import '../style/tailwind.scss'
+import '../style/main.scss'
+
+import { themes } from '@storybook/theming'
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/
+    }
+  },
+  docs: {
+    theme: themes.dark
+  }
+}

.storybook/unknown-theme.js

@@ -0,0 +1,10 @@
+import { create } from '@storybook/theming'
+
+export default create({
+  base: 'dark',
+  brandTitle: 'IUnknown Storybook',
+  brandUrl: 'https://theunknown.ch',
+  fontBase: '"Roboto", sans-serif',
+  fontCode: 'monospace',
+  brandImage: 'https://theunknown.ch/version/1620234786727/static/images/unk-logo.png'
+})

README.md

@@ -1,6 +1,5 @@
-# Vue Skeleton
+# Vue Unknown
 ## A web framework based on Vue 3
-![Vue Skeleton](https://github.com/the-unknown-code/vue-skeleton/blob/main/static/images/vue-skeleton-logo-xs.png?raw=true)
 
 # Features 
 - [Vuex](https://next.vuex.vuejs.org/)
@@ -10,13 +9,13 @@
 - [Webpack](https://webpack.js.org/)
 - [Tailwind CSS](https://tailwindcss.com/)
 - [Service Worker](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin)
+- [Storybook](https://storybook.js.org/)
 - [SCSS](https://sass-lang.com/)
 - [Favicon Generator](https://github.com/jantimon/favicons-webpack-plugin)
-- [Axios](https://github.com/axios/axios)
 - [Airbnb Coding Standard](https://github.com/airbnb/javascript)
 - [Prettier](https://prettier.io/)
 - [Lint Staged](https://github.com/okonet/lint-staged)
 
 # Documentation
-- [Vue Skeleton: Wiki](https://github.com/the-unknown-code/vue-skeleton/wiki/Documentation)
-- [Vue Skeleton: Template generator]()
+- [Vue Unknown: Wiki](https://github.com/the-unknown-code/vue-unknown/wiki/Documentation)
+- [Vue Unknown: Template generator]()

dev-tools/config/scripts/build.js

@@ -8,7 +8,7 @@ const chalk = require('chalk')
 const webpack = require('webpack')
 const webpackConfig = require('../webpack.config.prod')
 
-const spinner = ora('Vue Skeleton: Building for production')
+const spinner = ora('Vue Unknown: Building for production')
 spinner.start()
 
 fs.emptyDirSync(webpackConfig.output.path)
@@ -39,7 +39,7 @@ webpack(webpackConfig, (err, stats) => {
   )
 
   console.log()
-  console.log(chalk.blue('Vue Skeleton: You can preview your build by running:'), chalk.blue.bold('yarn preview'))
-  console.log(chalk.blue('Vue Skeleton: You can analyze your build by running:'), chalk.blue.bold('yarn analyze'))
+  console.log(chalk.blue('Vue Unknown: You can preview your build by running:'), chalk.blue.bold('yarn preview'))
+  console.log(chalk.blue('Vue Unknown: You can analyze your build by running:'), chalk.blue.bold('yarn analyze'))
   console.log()
 })

dev-tools/config/webpack.config.dev.js

@@ -17,13 +17,13 @@ module.exports = detectPort(config.devServer.port).then((port) => {
     devWebpackConfig.plugins.push(
       new FriendlyErrorsWebpackPlugin({
         compilationSuccessInfo: {
-          messages: [`Vue Skeleton - Your application is running here: ${config.devServer.useHttps ? 'https' : 'http'}://localhost:${port}`]
+          messages: [`Vue Unknown - Your application is running here: ${config.devServer.useHttps ? 'https' : 'http'}://localhost:${port}`]
         }
       })
     )
   } else {
     // eslint-disable-next-line no-throw-literal
-    throw 'Vue Skeleton: Plugins not declared'
+    throw 'Vue Unknown: Plugins not declared'
   }
 
   return devWebpackConfig

dev-tools/config/webpack.helpers.js

@@ -7,5 +7,9 @@ exports.compose = (funcs) => {
     return funcs[0]
   }
 
-  return funcs.reduce((a, b) => (...args) => a(b(...args)))
+  return funcs.reduce(
+    (a, b) =>
+      (...args) =>
+        a(b(...args))
+  )
 }

dev-tools/config/webpack.module.optimize.js

@@ -1,44 +1,54 @@
 const TerserPlugin = require('terser-webpack-plugin')
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
 
-module.exports = ({ config, isDevelopment }) => (webpackConfig) => ({
-  ...webpackConfig,
-  optimization: isDevelopment
-    ? {
-        noEmitOnErrors: true
-      }
-    : {
-        minimize: true,
-        minimizer: [
-          (compiler) => {
-            new TerserPlugin({
-              parallel: true,
-              extractComments: false,
-              terserOptions: {
-                compress: {
-                  drop_console: true
+module.exports =
+  ({ config, isDevelopment }) =>
+  (webpackConfig) => ({
+    ...webpackConfig,
+    optimization: isDevelopment
+      ? {
+          noEmitOnErrors: true
+        }
+      : {
+          minimize: true,
+          minimizer: [
+            (compiler) => {
+              new TerserPlugin({
+                parallel: true,
+                extractComments: false,
+                terserOptions: {
+                  compress: {
+                    drop_console: true
+                  }
                 }
-              }
-            }).apply(compiler)
-          },
-          new CssMinimizerPlugin()
-        ],
-        runtimeChunk: 'single',
-        splitChunks: {
-          cacheGroups: {
-            vendor: {
-              test: /[\\/]node_modules[\\/]/,
-              name: 'vendors',
-              chunks: 'all',
-              priority: -10,
-              reuseExistingChunk: true
+              }).apply(compiler)
             },
-            default: {
-              minChunks: 2,
-              priority: -20,
-              reuseExistingChunk: true
+            new CssMinimizerPlugin()
+          ],
+          removeAvailableModules: false,
+          removeEmptyChunks: false,
+          splitChunks: false
+
+          /*
+          splitChunks: {
+            chunks: 'all',
+            maxInitialRequests: Infinity,
+            minSize: 0,
+            cacheGroups: {
+              vendor: {
+                test: /[\\/]node_modules[\\/]/,
+                name(module) {
+                  // get the name. E.g. node_modules/packageName/not/this/part.js
+                  // or node_modules/packageName
+                  const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
+
+                  // npm package names are URL-safe, but some servers don't like @ symbols
+                  return `npm.${packageName.replace('@', '')}`
+                }
+              }
             }
           }
+
+          */
         }
-      }
-})
+  })

dev-tools/config/webpack.module.output.js

@@ -1,11 +1,13 @@
 const path = require('path')
 
-module.exports = ({ config, isDevelopment = true }) => (webpackConfig) => ({
-  ...webpackConfig,
-  output: {
-    path: path.join(config.projectRoot, 'dist', config.dist.publicPath !== '/' ? config.dist.publicPath : ''),
-    publicPath: isDevelopment ? '/' : config.dist.publicPath,
-    filename: isDevelopment ? '[name].js' : path.posix.join('', `${config.dist.versionPath}js/[name].js`),
-    chunkFilename: isDevelopment ? '[id].js' : path.posix.join('', `${config.dist.versionPath}js/[id].js`)
-  }
-})
+module.exports =
+  ({ config, isDevelopment = true }) =>
+  (webpackConfig) => ({
+    ...webpackConfig,
+    output: {
+      path: path.join(config.projectRoot, 'dist', config.dist.publicPath !== '/' ? config.dist.publicPath : ''),
+      publicPath: isDevelopment ? '/' : config.dist.publicPath,
+      filename: isDevelopment ? '[name].js' : path.posix.join('', `${config.dist.versionPath}js/[name].js`),
+      chunkFilename: isDevelopment ? '[id].js' : path.posix.join('', `${config.dist.versionPath}js/[id].js`)
+    }
+  })