Migrate to webpack

.eslintignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+
+/create-component.js
+/webpack.config.js

.eslintrc

@@ -0,0 +1,85 @@
+{
+  "env": {
+    "es2020": true,
+    "browser": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": ["./tsconfig.json"],
+    "sourceType": "module",
+    "ecmaVersion": 2020
+  },
+  "extends": [
+    "airbnb-typescript/base",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "prettier",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "no-plusplus": "off",
+    "class-methods-use-this": "off",
+    "array-callback-return": "off",
+    "arrow-body-style": "off",
+    "no-param-reassign": "off",
+    "consistent-return": "off",
+    "guard-for-in": "warn",
+    "no-underscore-dangle": "off",
+    "no-restricted-syntax": "off",
+    "default-case": "off",
+    "max-len": [
+      "error",
+      {
+        "code": 120,
+        "ignoreUrls": true,
+        "ignoreRegExpLiterals": true,
+        "ignorePattern": "^import\\s.+\\sfrom\\s.+;$"
+      }
+    ],
+
+    "require-jsdoc": "off",
+    "object-curly-newline": "off",
+    "prefer-destructuring": "off",
+    "no-case-declarations": "off",
+    "no-console": [
+      2,
+      {
+        "allow": ["info", "warn", "error"]
+      }
+    ],
+
+    "import/extensions": "off",
+    "import/no-dynamic-require": "off",
+    "import/no-extraneous-dependencies": "off",
+    "import/prefer-default-export": "off",
+
+    "@typescript-eslint/prefer-regexp-exec": "off",
+    "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-explicit-any": "error",
+    "@typescript-eslint/no-unsafe-member-access": "warn",
+    "@typescript-eslint/no-unsafe-assignment": "warn",
+    "@typescript-eslint/no-unsafe-return": "warn",
+    "@typescript-eslint/no-unsafe-call": "warn",
+    "@typescript-eslint/no-unused-expressions": "off",
+    "@typescript-eslint/no-floating-promises": "off",
+    "@typescript-eslint/no-non-null-assertion": "error",
+    "@typescript-eslint/no-shadow": "off",
+    "@typescript-eslint/restrict-template-expressions": "off",
+    "@typescript-eslint/unbound-method": "off",
+    "@typescript-eslint/no-use-before-define": ["error", { "functions": false }],
+    "@typescript-eslint/naming-convention": [
+      "error",
+      {
+        "selector": "variable",
+        "format": ["camelCase", "UPPER_CASE", "snake_case", "PascalCase"],
+        "leadingUnderscore": "allow"
+      }
+    ]
+  }
+}

.gitignore

@@ -0,0 +1,7 @@
+/dist
+.DS_Store
+/stats.json
+/node_modules
+/coverage
+/yarn.lock
+/package-lock.json

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 120,
+  "endOfLine": "auto"
+}

README.md

@@ -0,0 +1,65 @@
+# Pure Start
+
+**Pure Start** is a boilerplate that allows you to start working on a new project fast and easy. It provides you with a clean and flexible environment to create static applications and can be extended to create something more complex.
+
+## Features
++ Starting local server
++ SASS/SCSS preprocessors
++ Pug templating
++ JS transpilation
++ TypesScript support
++ File minification
++ Some predefined UI components
++ and more...
+
+## Installation
++ Manually download and unpack repository archive
++ Using Git `git clone https://github.com/nmihalyov/pure-start.git`
+
+## Commands
+Run this commands using `npm run ${command}` or `yarn ${command}`
++ `start` – starts local dev server on development mode
++ `build` – creates production build
++ `stats` – generates JSON file for analyzing bundle
++ `analyze` – opens analyze report (run `stats` before)
++ `comp` – creates new component (see below for details)
++ `prettier:check` – checks for prettier compliance
++ `prettier:fix` – fixes prettier issues
++ `eslint:check` – checks for eslint compliance
++ `eslint:fix` – fixes eslint issues
+
+## Creating a component
+You can create component manually or by CLI. The comman below will create catalog and **pug**, **scss** files named by `<component_name>` in components catalog with simple layout:
+
+`npm run comp <component_name>`
+
+#### Modificators
+
+`--ui` – creates component in **_ui** subfolder
+
+`--js` – additionaly creates **js** file
+
+`--ts` – additionaly creates **ts** file
+
+`--section` – generates section layout for **pug** file
+
+## Structure
+Boilerplate's structure is pretty simple!
+
+At the root there a some config files and script for creating components via CLI.
+
+`dist` folder contains production build for your project that can be deployed. Do not changing anything here by your hands.
+
+`src` is a working directory which contains your project source code. Below folders are located here.
+
+`assets` is used for static content like images and fonts.
+
+`components` contains your... components! They can be UI (like button, checkbox, etc.) or just simple components, as you like. Components usually has 3 realizations: markup – pug, styles – scss, scripts – javascript (this one may be missing).
+
+`pug` consists of `layouts` (which are shells for different page, e.g. one for online shop interface and other for admin section), `pages` (for pages markup) and `utils` (any utilities you can use for pages or layouts).
+
+`scss` for JavaScript and TypesScript files (you can write both, but it's highly recommended to use TS).
+
+`scss` for global styles (don't write component specific styles here).
+
+`index.js` is entry point for youe JS/TS files.

create-component.js

@@ -0,0 +1,58 @@
+// Creates component from CLI
+const fs = require('fs');
+const path = require('path');
+
+let basePath = './src/components/';
+const files = {
+  pug: `mixin {component}\n  .{component}`,
+  scss: `.{component} {\n  \n}`,
+};
+
+const args = process.argv.slice(2);
+
+const createFiles = (component) => {
+  const componentPath = path.join(basePath, component);
+
+  Object.keys(files).forEach((extension) => {
+    const fileName = `${component}.${extension}`;
+    const fileSource = files[extension].replace(/\{component}/g, component);
+    const filePath = path.join(componentPath, fileName);
+
+    fs.writeFile(filePath, fileSource, 'utf8', (err) => {
+      if (err) throw err;
+    });
+  });
+};
+
+const createFolder = (component) => {
+  fs.mkdir(`${basePath}${component}`, (err) => {
+    if (err) {
+      throw err;
+    } else {
+      createFiles(component);
+    }
+  });
+};
+
+if (args.includes('--ui')) {
+  basePath += '_ui/';
+}
+
+if (args.includes('--js')) {
+  files.js = '';
+}
+
+if (args.includes('--ts')) {
+  files.ts = '';
+}
+
+if (args.includes('--section')) {
+  files.pug = `mixin {component}\n  section.{component}.container\n    .{component}__wrapper.wrapper`;
+}
+
+args.map((component) => {
+  if (!['--ui', '--js', '--ts', '--section'].includes(component)) {
+    createFolder(component);
+    console.info(`Component "${component}" was successfully created`);
+  }
+});

package.json

@@ -0,0 +1,67 @@
+{
+  "name": "pure-start",
+  "version": "2.0.0",
+  "description": "Start your project with 'Pure Start' easily then ever!",
+  "private": "true",
+  "scripts": {
+    "start": "cross-env NODE_ENV=development npx webpack serve --hot --mode development",
+    "build": "cross-env NODE_ENV=production npx webpack-cli --mode production",
+    "stats": "npx webpack --profile --json=stats.json",
+    "analyze": "npx webpack-bundle-analyzer stats.json",
+    "comp": "node ./create-component.js",
+    "prettier:check": "prettier --check \"src/**/*.{js,ts}\"",
+    "prettier:fix": "prettier --write \"src/**/*.{js,ts}\"",
+    "eslint:check": "npx eslint . --ext .js,.ts",
+    "eslint:fix": "npx eslint --fix \"./**\""
+  },
+  "keywords": [
+    "javascript",
+    "webpack",
+    "boilerplate",
+    "pure",
+    "start"
+  ],
+  "repository": "https://github.com/nmihalyov/pure-start",
+  "author": "Nikita Mihalyov <[email protected]>",
+  "license": "MIT",
+  "browserslist": "> 0.25%, not dead",
+  "devDependencies": {
+    "@babel/core": "^7.15.0",
+    "@babel/polyfill": "^7.12.1",
+    "@babel/preset-env": "^7.15.0",
+    "@typescript-eslint/eslint-plugin": "^4.31.1",
+    "@typescript-eslint/parser": "^4.31.1",
+    "autoprefixer": "^10.3.1",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.2.2",
+    "clean-webpack-plugin": "^4.0.0-alpha.0",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.2.0",
+    "css-minimizer-webpack-plugin": "^3.0.2",
+    "css-mqpacker": "^7.0.0",
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb-typescript": "^16.1.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-webpack-plugin": "^3.0.1",
+    "html-webpack-plugin": "^5.3.2",
+    "mini-css-extract-plugin": "^2.2.0",
+    "node-sass": "^6.0.1",
+    "postcss-loader": "^6.1.1",
+    "prettier": "^2.5.1",
+    "pug": "^3.0.2",
+    "pug-loader": "^2.4.0",
+    "sass-loader": "^12.1.0",
+    "style-loader": "^3.2.1",
+    "ts-loader": "^9.2.5",
+    "typescript": "^4.4.3",
+    "webpack": "^5.49.0",
+    "webpack-bundle-analyzer": "^4.4.2",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^4.0.0-rc.0"
+  },
+  "dependencies": {
+    "sanitize.css": "^12.0.1"
+  }
+}

src/components/_ui/button/button.pug

@@ -0,0 +1,15 @@
+mixin button(style, type, text, className, options)
+  - className = `button button--${style} ${className || ''}`
+  - isDisabled = options && options.disabled
+
+  if isDisabled
+    - className += 'button--disabled'
+
+  if type === 'link'
+    a(class=className, href=options.link, disabled=isDisabled)= text
+  else if type === 'button'
+    button(class=className, disabled=isDisabled)= text
+  else if type === 'popup'
+    button.js-open-popup(class=className, data-popup=options.popup, disabled=isDisabled)= text
+  else if type === 'submit'
+    button(type="submit", class=className, disabled=isDisabled)= text

src/components/_ui/button/button.scss

@@ -0,0 +1,60 @@
+.button {
+  display: inline-flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  min-width: 160px;
+  padding: 10px 15px;
+  border: none;
+  text-decoration: none;
+  transition: all .3s ease;
+  color: $white;
+  cursor: pointer;
+  text-align: center;
+  font: {
+    size: 16px;
+    weight: 500;
+  }
+  &--primary {
+    background-color: $red;
+    &.button--disabled {
+      background-color: $gray2;
+    }
+    &:hover {
+      background-color: $red2;
+      color: $white;
+    }
+    &:active {
+      background-color: $red3;
+      transition: none;
+    }
+  }
+  &--secondary {
+    padding: 9px 14px;
+    border: 1px solid $black;
+    color: $black;
+    &.button--disabled {
+      border-color: $gray;
+    }
+    &:hover {
+      background-color: $black;
+      color: $white;
+    }
+    &:active {
+      border-color: lighten($black, 7);
+      background-color: lighten($black, 7);
+      transition: none;
+    }
+  }
+  &--disabled {
+    pointer-events: none;
+    color: $gray;
+  }
+}
+
+@media only screen and (max-width: $mobile) {
+  .button {
+    min-width: 145px;
+    font-size: 14px;
+  }
+}

src/components/_ui/checkbox/checkbox.pug

@@ -0,0 +1,8 @@
+mixin checkbox(text, name, className, required, checked, options)
+  - isDisabled = options && options.disabled
+
+  label.checkbox(class=`${className || ''}`)
+    input.checkbox__input(type="checkbox", name=name, required=required, checked=checked, disabled=isDisabled)
+    .checkbox__box
+      .checkbox__box-mark
+    p.checkbox__text!= text