diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..a9ccc6d --- /dev/null +++ b/.babelrc @@ -0,0 +1,14 @@ +{ + "presets": [ + [ + "@babel/preset-env", + { + "targets": { + "node": "10" + } + } + ], + "@babel/preset-react" + ], + "plugins": ["@babel/plugin-proposal-class-properties"] +} \ No newline at end of file diff --git a/.gitignore b/.gitignore index 6704566..7d00a43 100644 --- a/.gitignore +++ b/.gitignore @@ -68,10 +68,13 @@ typings/ # Yarn Integrity file .yarn-integrity -# dotenv environment variables file +# Dotenv environment variables file .env .env.test +# Backups +*.bak + # parcel-bundler cache (https://parceljs.org/) .cache @@ -102,3 +105,6 @@ dist # TernJS port file .tern-port + +# Files lock +*-lock* \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..45147aa --- /dev/null +++ b/package.json @@ -0,0 +1,47 @@ +{ + "name": "delorean", + "version": "1.0.0", + "description": "Dubijando a delorean con CSS", + "main": "src/app.mjs", + "scripts": { + "build": "npm run clean && webpack --mode=development --watch", + "buildpro": "npm run clean && webpack --mode=production", + "start": "webpack-cli serve --mode development", + "clean": "rimraf ./dist" + }, + "author": "RSR", + "license": "MIT", + "devDependencies": { + "@babel/core": "^7.13.14", + "@babel/preset-env": "^7.13.12", + "@babel/preset-react": "^7.13.13", + "babel-core": "^6.26.3", + "babel-loader": "^8.2.2", + "babel-preset-env": "^1.7.0", + "babel-preset-react": "^6.24.1", + "clean-webpack-plugin": "^3.0.0", + "css-loader": "^5.2.0", + "dat.gui": "^0.7.7", + "file-loader": "^6.2.0", + "html-webpack-plugin": "^5.3.1", + "image-webpack-loader": "^7.0.1", + "mini-css-extract-plugin": "^1.4.0", + "optimize-css-assets-webpack-plugin": "^5.0.4", + "postcss-loader": "^5.2.0", + "pug": "^3.0.2", + "pug-loader": "https://github.com/pugjs/pug-loader/tarball/master", + "rimraf": "^3.0.2", + "sass": "^1.32.8", + "sass-loader": "^11.0.1", + "style-loader": "^2.0.0", + "terser-webpack-plugin": "^5.1.1", + "uglify-js": "^3.13.3", + "uglifyjs-webpack-plugin": "^1.1.2", + "webpack": "^5.30.0", + "webpack-cli": "^4.6.0" + }, + "dependencies": { + "react": "^17.0.2", + "react-dom": "^17.0.2" + } +} diff --git a/src/app.mjs b/src/app.mjs new file mode 100644 index 0000000..cb40276 --- /dev/null +++ b/src/app.mjs @@ -0,0 +1,43 @@ +"use strict"; + +import './styles/common.sass'; + +import * as dat from 'dat.gui'; + +const CONFIG = { + 'rotate-x': 0, + 'rotate-y': 0, +} + +const BOUNDS = { + 'rotate-x': [-360, 360, 1], + 'rotate-y': [-360, 360, 1], +} + +const CONTROLLER = new dat.GUI() + +const UPDATE = () => { + for (const KEY of Object.keys(CONFIG)) { + document.documentElement.style.setProperty(`--${KEY}`, CONFIG[KEY]) + } +} + +const digest = (CONFIG_OBJECT, BOUNDS_OBJECT, FOLDER) => { + for (const category in BOUNDS_OBJECT) { + if (Array.isArray(BOUNDS_OBJECT[category])) { + FOLDER.add( + CONFIG_OBJECT, + category, + BOUNDS_OBJECT[category][0], + BOUNDS_OBJECT[category][1], + BOUNDS_OBJECT[category][2] ? BOUNDS_OBJECT[category][2] : 1 + ).onChange(UPDATE) + } else { + const NEW_FOLDER = FOLDER + ? FOLDER.addFolder(category) + : GUI.addFolder(category) + digest(CONFIG_OBJECT[category], BOUNDS_OBJECT[category], NEW_FOLDER) + } + } +} +digest(CONFIG, BOUNDS, CONTROLLER) diff --git a/src/images/.gitkeep b/src/images/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/modules/draw.pug b/src/modules/draw.pug new file mode 100644 index 0000000..e69de29 diff --git a/src/styles/common.sass b/src/styles/common.sass new file mode 100644 index 0000000..9cc7c59 --- /dev/null +++ b/src/styles/common.sass @@ -0,0 +1,10 @@ +* + box-sizing: border-box + +html + height: 100% + display: flex + +body + background: #f2f2f2 + margin: auto diff --git a/src/styles/components/.gitkeep b/src/styles/components/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/styles/tools/_colors.sass b/src/styles/tools/_colors.sass new file mode 100644 index 0000000..bc1441f --- /dev/null +++ b/src/styles/tools/_colors.sass @@ -0,0 +1,4 @@ +@charset "utf-8" + +@import 'functions' +@import 'variables' diff --git a/src/styles/tools/_functions.sass b/src/styles/tools/_functions.sass new file mode 100644 index 0000000..1866e32 --- /dev/null +++ b/src/styles/tools/_functions.sass @@ -0,0 +1,17 @@ +@charset "utf-8" + +@use 'sass:map' + + + +%position + position: absolute + +%position-content + @extend %position + content: "" + +@function mapGet($map, $list...) + @each $key in $list + $map: map-get($map, $key) + @return $map \ No newline at end of file diff --git a/src/styles/tools/_mixins.sass b/src/styles/tools/_mixins.sass new file mode 100644 index 0000000..0121d34 --- /dev/null +++ b/src/styles/tools/_mixins.sass @@ -0,0 +1,34 @@ +@charset "utf-8" + +@use 'sass:map' + + + +@mixin position() + position: absolute + +@mixin location($top, $left, $width, $height) + @extend %position + top: $top + left: $left + height: $height + width: $width + +@mixin locationTopLeft($top, $left) + top: $top + left: $left + +@mixin locationBottom($bottom, $left, $width, $height) + @extend %position + bottom: $bottom + left: $left + height: $height + width: $width + +@mixin locationColor($top, $left, $width, $height, $color) + @include location($top, $left, $width, $height) + background: $color + +@mixin locationColorCircle($top, $left, $width, $height, $color) + @include locationColor($top, $left, $width, $height, $color) + border-radius: 50% diff --git a/src/styles/tools/_variables.sass b/src/styles/tools/_variables.sass new file mode 100644 index 0000000..d8b0ca1 --- /dev/null +++ b/src/styles/tools/_variables.sass @@ -0,0 +1,5 @@ +@charset "utf-8" + +// General properties +$layer: (one: 1, two: 2, three: 3) +$map: () \ No newline at end of file diff --git a/src/template/includes/foot.pug b/src/template/includes/foot.pug new file mode 100644 index 0000000..210c129 --- /dev/null +++ b/src/template/includes/foot.pug @@ -0,0 +1 @@ +p © Copyright RSR 2021 \ No newline at end of file diff --git a/src/template/includes/head.pug b/src/template/includes/head.pug new file mode 100644 index 0000000..6fb8637 --- /dev/null +++ b/src/template/includes/head.pug @@ -0,0 +1,3 @@ +meta(charset='UTF-8') +meta(name='viewport' content='width=device-width, initial-scale=1.0') +title= htmlWebpackPlugin.options.title diff --git a/src/template/index.pug b/src/template/index.pug new file mode 100644 index 0000000..366f858 --- /dev/null +++ b/src/template/index.pug @@ -0,0 +1,8 @@ +doctype 5 + +html(lang="es") + head + include includes/head.pug + body + include ../modules/draw.pug + include includes/foot.pug diff --git a/src/tools/_mixins.pug b/src/tools/_mixins.pug new file mode 100644 index 0000000..83ef51b --- /dev/null +++ b/src/tools/_mixins.pug @@ -0,0 +1,9 @@ +mixin nestedComponents(class_name, elements, sons) + each _, i in Array(elements) + div(class=`${class_name} ${class_name}--${i+1}`) + if sons + each son in sons + div(class=`${son}`) + +mixin components(class_name, elements) + +nestedComponents(class_name, elements, null) diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..222c8c3 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,169 @@ +const path = require('path'); + +const webpack = require('webpack'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); +const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); +const { CleanWebpackPlugin } = require('clean-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + +const title = 'Base Draw CSS'; +const publicPath = 'draw/css/'; +const portServer = 9000; + +module.exports = function (env) { + var isProd = false; + + if (env != null && env.production) { + isProd = true; + } + + var configUseCssDev = ["style-loader", "css-loader", 'sass-loader']; + var configUseCssProd = [ + { + loader: MiniCssExtractPlugin.loader, + options: { + hmr: process.env.NODE_ENV === 'development', + reloadAll: true, + }, + }, + { + loader: "css-loader", + options: { + sourceMap: true + } + }, + "sass-loader" + ]; + + var configUseCss = isProd ? configUseCssProd : configUseCssDev; + + return { + context: path.resolve(__dirname, "src"), + entry: { + app: './app.mjs' + }, + output: { + path: path.resolve(__dirname, 'dist'), + filename: './[name].[hash].js' + }, + devServer: { + contentBase: path.join(__dirname, 'dist'), + compress: true, + publicPath: '/'+publicPath, + open: { + app: ['chrome', '--incognito', '--other-flag'] + }, + openPage: publicPath, + port: portServer + }, + optimization: { + splitChunks: { + cacheGroups: { + styles: { + name: 'styles', + test: /\.css$/, + chunks: 'all', + enforce: true, + }, + }, + }, + minimizer: [ + new UglifyJsPlugin({ + test: /\.js(\?.*)?$/i, + cache: true, + parallel: true, + sourceMap: false + }) + ] + }, + watch: true, + watchOptions: { + ignored: /node_modules/, + }, + externals: { + gui: ['https://cdn.skypack.dev/dat.gui', 'GUI'], + }, + plugins: [ + new CleanWebpackPlugin({ + cleanAfterEveryBuildPatterns: ['dist'] + }), + new HtmlWebpackPlugin({ + template: './template/index.pug', + title: title, + filename: 'index.html', + minify: true, + hash: true + }), + new MiniCssExtractPlugin({ + filename: isProd ? '[name].[hash:8].css' : '[name].css', + chunkFilename: isProd ? '[id].[hash:8].css' : '[id].css', + }), + new OptimizeCssAssetsPlugin({ + assetNameRegExp: /\.css$/g, + cssProcessor: require('cssnano'), + cssProcessorPluginOptions: { + preset: ['default', { + discardComments: { + removeAll: true + } + }], + }, + canPrint: true + }), + new webpack.HotModuleReplacementPlugin() + ], + module: { + rules: [ + { + test: /\.m?js$/, + exclude: /(node_modules|bower_components)/, + use: { + loader: 'babel-loader', + options: { + presets: ['@babel/preset-env'], + plugins: ['@babel/plugin-proposal-object-rest-spread'] + } + } + }, + { + test: /\.pug$/i, + use: ['pug-loader'] + }, + { + test: /\.(sa|sc|c)ss$/i, + use: configUseCss + }, + { + test: /\.(gif|png|jpe?g|svg)$/i, + use: [ + 'file-loader', + { + loader: 'image-webpack-loader', + options: { + mozjpeg: { + progressive: true, + quality: 65 + }, + optipng: { + enabled: false, + }, + pngquant: { + quality: [0.50, 0.80], + speed: 10, + strip: true + }, + gifsicle: { + interlaced: false, + }, + webp: { + quality: 50 + } + } + }, + ], + }, + ], + } + } +} \ No newline at end of file