From bd480548b56becc47d59cfe558e4e5f76139fcc6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andre=CC=81=20Ekeberg?= Date: Mon, 23 May 2022 02:59:05 +0200 Subject: [PATCH] Version 1.0.1 --- .browserslistrc | 2 +- README.md | 2 +- acf-json/group_5d40407f1f9ea.json | 4 +- bolts-wp-config.php | 6 +- components/page.php | 2 +- composer.json | 6 +- config/bundling/editable.config.js | 77 ------------------ config/bundling/module.rules.js | 73 ----------------- config/bundling/webpack.config.js | 125 ----------------------------- config/testing/enzyme.config.js | 12 --- config/testing/jest.config.js | 66 --------------- core/bolts-wp-actions.php | 6 +- core/bolts-wp-admin.php | 4 +- core/bolts-wp-content.php | 6 +- core/bolts-wp-helpers.php | 4 +- core/bolts-wp-theme.php | 6 +- core/bolts-wp.php | 4 +- functions.php | 4 +- package.json | 65 +++++++-------- src/js/app.js | 6 +- src/js/polyfills.js | 2 + src/scss/_global.scss | 5 -- src/scss/style.scss | 6 +- style.css | 4 +- webpack.config.js | 65 +++++++-------- 25 files changed, 100 insertions(+), 462 deletions(-) delete mode 100644 config/bundling/editable.config.js delete mode 100644 config/bundling/module.rules.js delete mode 100644 config/bundling/webpack.config.js delete mode 100644 config/testing/enzyme.config.js delete mode 100644 config/testing/jest.config.js create mode 100755 src/js/polyfills.js mode change 100644 => 100755 webpack.config.js diff --git a/.browserslistrc b/.browserslistrc index 3869687..cec1a31 100644 --- a/.browserslistrc +++ b/.browserslistrc @@ -1 +1 @@ -last 10 versions and > 0.05% and not IE < 10 \ No newline at end of file +last 10 versions and > 0.05% and not IE < 11 diff --git a/README.md b/README.md index a54aea2..2e68c56 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # Bolts WP -*1.0.0* +*1.0.1* Bolts WP is your new favourite developer theme (at least for WordPress) - tough enough to power (and easily maintain) websites of any shape and size, yet so simple that you can become a power user within a day. It focuses on removing complexity and streamlining development without creating a whole new workflow. Its not trying to recreate the wheel, just make it rounder. diff --git a/acf-json/group_5d40407f1f9ea.json b/acf-json/group_5d40407f1f9ea.json index 541a03a..715a7d1 100644 --- a/acf-json/group_5d40407f1f9ea.json +++ b/acf-json/group_5d40407f1f9ea.json @@ -4,7 +4,7 @@ "fields": [ { "key": "field_5d40408fa9d5b", - "label": "Scripts inside <head>", + "label": "Scripts inside head", "name": "head_scripts", "type": "acf_code_field", "instructions": "", @@ -22,7 +22,7 @@ }, { "key": "field_5d4040c8a9d5c", - "label": "Scripts inside <body>", + "label": "Scripts inside body", "name": "body_scripts", "type": "acf_code_field", "instructions": "", diff --git a/bolts-wp-config.php b/bolts-wp-config.php index 2b4ba05..a63d04f 100644 --- a/bolts-wp-config.php +++ b/bolts-wp-config.php @@ -1,14 +1,14 @@ - \ No newline at end of file + diff --git a/composer.json b/composer.json index cb36995..9045974 100644 --- a/composer.json +++ b/composer.json @@ -2,8 +2,8 @@ "name": "pocketsize/bolts-wp", "description": "A starter theme for WordPress using Bolts", "type": "wordpress-theme", - "version": "1.0.0", - "license": "UNLICENSED", + "version": "1.0.1", + "license": "MIT", "keywords": [ "bolts", "theme", @@ -17,4 +17,4 @@ "require-dev": { "squizlabs/php_codesniffer": "^3.4" } -} \ No newline at end of file +} diff --git a/config/bundling/editable.config.js b/config/bundling/editable.config.js deleted file mode 100644 index ee34f27..0000000 --- a/config/bundling/editable.config.js +++ /dev/null @@ -1,77 +0,0 @@ -/** - * This is your very own config file for the Webpack bundling, where - * you can customize the most common parts of the build process. - * We believe this is all you might be interested in, but dont be afraid to - * submit an issue or a pull request if you disagree. We would love to hear from you. - * - * Check the Webpack documentation for more in-depth info on all the different settings. - * https://webpack.js.org/configuration/ - */ - -const path = require('path'); - -module.exports = { - // These are all paths used in the build process. - // Change them if you prefer a different project structure. - paths: { - root: path.resolve(__dirname, '../../'), - public: path.resolve(__dirname, '../../public'), - src: path.resolve(__dirname, '../../src'), - javascript: path.resolve(__dirname, '../../src/js'), - sass: path.resolve(__dirname, '../../src/sass'), - fonts: path.resolve(__dirname, '../../src/fonts'), - images: path.resolve(__dirname, '../../src/images'), - relative: '../../', - external: /node_modules/, - }, - - // These are the entry points for scripts and styles. - // Remember to enqueue the outputs of any added files in [../functions.php]. - // The output name will be the one of the chunk. If the chunk is named "main" the output will be "main.js" - entrypoints: { - main: ['./src/js/app.js', './src/sass/style.scss'], - }, - - // Names and paths for all output files, relative to [../public/]. - // Check out [./webpack.config.js] if you want naming based on dev/prod. - // There we check for isDev and isProd - outputs: { - javascript: { filename: 'js/[name].js' }, - css: { filename: 'css/[name].css' }, - font: { filename: 'fonts/[path][name].[ext]' }, - image: { filename: 'images/[path][name].[ext]' }, - }, - - // Sometimes we want to load libraries from CDN and retrieve them at runtime. - // These are our external dependencies that should be available to our modules, but not compiled. - // Enqueue them via CDN in [../functions.php] instead. - externals: { - //'jquery': 'jQuery', - }, - - // If you have any custom module resolutions you prefer, this is the place to be. - resolve: {}, - - // All other settings reside here. - settings: { - // Check https://webpack.js.org/configuration/devtool/ for sourcemap configs - sourceMaps: 'cheap-module-source-map', - - // Settings here: https://github.com/postcss/autoprefixer#options - // Browser support is managed in [.browserlistrc]-file - autoprefixer: {}, - - // BrowserSync settings have defaults defined in [./webpack.config.js], most notably - // a "file"-setting that triggers a reload on changes in all PHP-files, and a - // url to proxy from that is read from the [.env]-file - // Thake that in account if you want to change that setting. - browserSync: { - host: 'localhost', - port: 3000, - }, - - // webpack-dev-server is still a bit unconfigured, so consider it experimental - // settings here: https://webpack.js.org/configuration/dev-server/ - devServer: {}, - }, -}; diff --git a/config/bundling/module.rules.js b/config/bundling/module.rules.js deleted file mode 100644 index d430993..0000000 --- a/config/bundling/module.rules.js +++ /dev/null @@ -1,73 +0,0 @@ -/** - * Here we define how all filetypes are to be handled - * If you want to add a filetype , make sure to define it here - * and reference it in [./webpack.config.js]. - */ - -const config = require('./editable.config'); -const autoprefixer = require('autoprefixer'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const MQPacker = require('css-mqpacker'); -const CSSNano = require('cssnano'); - -const isDev = !!(process.env.ENV === 'dev'); -const isProd = !!(process.env.ENV === 'prod'); - -module.exports = { - javascript: { - test: /\.(js|jsx)$/, - exclude: config.paths.external, - loader: ['babel-loader'], - }, - - sass: { - test: /\.s[ac]ss$/, - include: config.paths.sass, - use: [ - MiniCssExtractPlugin.loader, - { - loader: 'css-loader', - options: { - url: false, - }, - }, - { - loader: 'postcss-loader', - options: { - plugins: () => [ - autoprefixer(config.settings.autoprefixer), - MQPacker(), - isProd - ? CSSNano() - : () => { - console.log('\nSkipping CSSNano\n'); - }, - ], - }, - }, - 'sass-loader', - ], - }, - - fonts: { - test: /\.(eot|ttf|woff|woff2|svg)(\?\S*)?$/, - include: config.paths.fonts, - loader: 'file-loader', - options: { - publicPath: config.paths.relative, - name: config.outputs.font.filename, - }, - }, - - images: { - test: /\.(png|jpe?g|gif|svg)$/, - include: config.paths.images, - loader: 'file-loader', - options: { - context: config.paths.images, - publicPath: config.paths.relative, - name: config.outputs.image.filename, - emitFile: false, - }, - }, -}; diff --git a/config/bundling/webpack.config.js b/config/bundling/webpack.config.js deleted file mode 100644 index 966101c..0000000 --- a/config/bundling/webpack.config.js +++ /dev/null @@ -1,125 +0,0 @@ -// !!! DONT EDIT THIS FILE !!! -// Changes to the Webpack settings are better done in [./editable.config.js]. - -// TODO: Get .env directory in a more efficient way -require('dotenv').config({ path: '../../../../../../' }); - -const CopyWebpackPlugin = require('copy-webpack-plugin'); -const CleanWebpackPlugin = require('clean-webpack-plugin'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const BrowserSyncPlugin = require('browser-sync-webpack-plugin'); -const ImageminPlugin = require('imagemin-webpack-plugin').default; -const ImageminMozjpeg = require('imagemin-mozjpeg'); -const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin'); - -const moduleRules = require('./module.rules'); -const config = require('./editable.config'); - -const isDev = !!(process.env.ENV === 'dev'); -const isProd = !!(process.env.ENV === 'prod'); -const doServe = !!(process.env.SERVE === 'true'); - -module.exports = { - // Entry points. - entry: config.entrypoints, - - // JS output name and destination. - output: { - path: config.paths.public, - filename: config.outputs.javascript.filename, - }, - - // External dependencies. - externals: config.externals, - - // Custom resolutions. - resolve: config.resolve, - - // Rules for handling filetypes. - module: { - rules: [ - moduleRules.javascript, - moduleRules.sass, - moduleRules.fonts, - moduleRules.images, - ], - }, - - // Plugins running in every build. - plugins: [ - new FriendlyErrorsWebpackPlugin(), - new MiniCssExtractPlugin(config.outputs.css), - new CleanWebpackPlugin(config.paths.public, { - root: config.paths.root, - }), - new CopyWebpackPlugin([ - { - context: config.paths.images, - from: { - glob: `${config.paths.images}/**/*`, - flatten: false, - dot: false, - }, - to: config.outputs.image.filename, - }, - ]), - new CopyWebpackPlugin([ - { - context: config.paths.fonts, - from: { - glob: `${config.paths.fonts}/**/*`, - flatten: false, - dot: false, - }, - to: config.outputs.font.filename, - }, - ]), - ], - - devtool: isDev ? config.settings.sourceMaps : false, -}; - -// Set BrowserSync and devServer settings if serving -if (doServe) { - // setting our default settings... - const browserSyncSettings = { - host: 'localhost', - port: 3000, - proxy: process.env.WP_HOME, - files: [ - { - match: ['../../**/*.php'], - fn: function(event, file) { - if (event === 'change') { - this.reload(); - } - }, - }, - ], - }; - - // ...and overwriting them with user settings - Object.assign(browserSyncSettings, config.settings.browserSync); - - module.exports.plugins.push(new BrowserSyncPlugin(browserSyncSettings)); - module.exports.devServer = config.settings.devServer; -} - -// Optimize if prod -// if (isProd) { -// module.exports.plugins.push( -// new ImageminPlugin({ -// test: /\.(jpe?g|png|gif|svg)$/i, -// optipng: { optimizationLevel: 7 }, -// gifsicle: { optimizationLevel: 3 }, -// pngquant: { quality: '65-90', speed: 4 }, -// svgo: { removeUnknownsAndDefaults: false, cleanupIDs: false }, -// plugins: [ -// ImageminMozjpeg({ -// quality: 90, -// progressive: true -// }) -// ] -// }) -// ) -// } diff --git a/config/testing/enzyme.config.js b/config/testing/enzyme.config.js deleted file mode 100644 index b499c5b..0000000 --- a/config/testing/enzyme.config.js +++ /dev/null @@ -1,12 +0,0 @@ -/** - * Config for Enzyme - * Used by [./jest.config.js] if React is installed - * - * Enzyme docs can be found here: - * https://airbnb.io/enzyme/ - */ - -import { configure } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; - -configure({ adapter: new Adapter() }); diff --git a/config/testing/jest.config.js b/config/testing/jest.config.js deleted file mode 100644 index 94c54ed..0000000 --- a/config/testing/jest.config.js +++ /dev/null @@ -1,66 +0,0 @@ -/** - * Jest config - * - * Put all your config here. We have included some dumb logic - * that determines if we want to load React stuff (used with the bolts-add:react script). - * - * Read more about Jest config here: - * https://jestjs.io/docs/en/configuration.html - */ - -require('dotenv').config(); -const detectInstalled = require('detect-installed'); - -// Put all your presets here -const fixedSetupFiles = []; - -// check if we should use preset-react -const react = detectInstalled.sync('react', { local: true }); - -if (react) { - fixedSetupFiles.push('/config/testing/enzyme.config.js'); -} - -// Export config -module.exports = { - // Set the root directory - rootDir: '../../', - - // Automatically clear mock calls and instances between every test - clearMocks: true, - - // An array of glob patterns indicating a set of files for which coverage information should be collected - collectCoverageFrom: ['/src/js/**/*.{js,jsx,mjs}'], - - // The directory where Jest should output its coverage files - coverageDirectory: 'coverage', - - // An array of file extensions your modules use - moduleFileExtensions: ['js', 'json', 'jsx'], - - // The paths to modules that run some code to configure or set up the testing environment before each test - setupFiles: fixedSetupFiles, - - // The test environment that will be used for testing - testEnvironment: 'jsdom', - - // The glob patterns Jest uses to detect test files - testMatch: ['**/__tests__/**/*.js?(x)', '**/?(*.)+(spec|test).js?(x)'], - - // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped - testPathIgnorePatterns: ['\\\\node_modules\\\\'], - - // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href - testURL: 'http://localhost', - - // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation - transformIgnorePatterns: ['../../node_modules/'], - - transform: { - '^.+\\.jsx$': 'babel-jest', - '^.+\\.js$': 'babel-jest', - }, - - // Indicates whether each individual test should be reported during the run - verbose: false, -}; diff --git a/core/bolts-wp-actions.php b/core/bolts-wp-actions.php index 6094970..db86c3f 100644 --- a/core/bolts-wp-actions.php +++ b/core/bolts-wp-actions.php @@ -1,10 +1,10 @@ ' : ''; } -} \ No newline at end of file +} diff --git a/core/bolts-wp.php b/core/bolts-wp.php index b1f2df1..a787dc6 100644 --- a/core/bolts-wp.php +++ b/core/bolts-wp.php @@ -1,10 +1,10 @@ (http://www.pocketsize.se)", + "license": "MIT", + "author": "Pocketsize ", "scripts": { - "dev": "yarn run development", - "development": "webpack --mode=development --progress --hide-modules --config=webpack.config.js", - "watch": "yarn run development --watch", - "prod": "yarn run production", - "production": "webpack --mode=production --no-progress --hide-modules --config=webpack.config.js" + "build": "webpack --mode production --config webpack.config.js", + "dev": "webpack --mode development --config webpack.config.js", + "watch": "webpack --watch --mode development --config webpack.config.js", + "start": "npm run watch" }, "devDependencies": { - "@babel/core": "^7.6.2", - "@babel/plugin-transform-modules-commonjs": "^7.6.0", - "@babel/plugin-transform-runtime": "^7.6.2", - "@babel/preset-env": "^7.6.2", - "@babel/register": "^7.6.2", - "@babel/runtime": "^7.6.2", - "@babel/runtime-corejs3": "^7.6.2", - "babel-loader": "^8.0.6", - "babel-runtime": "^6.26.0", - "copy-webpack-plugin": "^5.0.4", - "core-js": "^3.2.1", - "cross-env": "^5.2.1", - "css-loader": "^3.2.0", - "mini-css-extract-plugin": "^0.8.0", + "@babel/core": "^7.11.5", + "@babel/plugin-transform-runtime": "^7.11.5", + "@babel/preset-env": "^7.11.5", + "@babel/preset-react": "^7.10.4", + "@babel/register": "^7.11.5", + "@babel/runtime-corejs3": "^7.11.2", + "autoprefixer": "^9.8.6", + "babel-loader": "^8.1.0", + "babel-plugin-add-module-exports": "^1.0.2", + "babel-preset-minify": "^0.5.1", + "core-js": "^3.6.5", + "css-loader": "^4.2.2", + "eslint": "^7.30.0", + "eslint-plugin-react": "^7.24.0", + "mini-css-extract-plugin": "^0.11.0", "postcss-loader": "^3.0.0", - "postcss-preset-env": "^6.7.0", - "sass": "^1.23.0", - "sass-loader": "^8.0.0", - "webpack": "^4.40.2", - "webpack-cli": "^3.3.9" + "prettier": "2.3.2", + "regenerator-runtime": "^0.13.7", + "sass": "^1.26.10", + "sass-loader": "^10.0.1", + "webpack": "^4.44.1", + "webpack-cli": "^3.3.12" }, "dependencies": { - "bolts-lib": "^1.0.5", - "siema": "^1.5.1" + "babel-polyfill": "^6.26.0", + "bolts-lib": "^1.0.6", + "whatwg-fetch": "^3.6.2" } -} \ No newline at end of file +} diff --git a/src/js/app.js b/src/js/app.js index 7b16589..f5a9812 100755 --- a/src/js/app.js +++ b/src/js/app.js @@ -1,8 +1,8 @@ /** - * Bolts WP v1.0.0 + * Bolts WP v1.0.1 * * Developed by Pocketsize - * http://www.pocketsize.se/ + * https://pocketsize.se */ import { bolts, state, misc, addDelegatedEventListener as on } from 'bolts-lib'; @@ -49,4 +49,4 @@ import slider from './components/common/slider' misc.autoHeight(selector('action', 'auto-height')) }) -})() \ No newline at end of file +})() diff --git a/src/js/polyfills.js b/src/js/polyfills.js new file mode 100755 index 0000000..172633a --- /dev/null +++ b/src/js/polyfills.js @@ -0,0 +1,2 @@ +import 'babel-polyfill' +import 'whatwg-fetch' diff --git a/src/scss/_global.scss b/src/scss/_global.scss index 4bf966b..da791bf 100644 --- a/src/scss/_global.scss +++ b/src/scss/_global.scss @@ -15,8 +15,3 @@ html { body { font-family: sans-serif; } - -// TODO: lägg till i reset för att motverka att klipps av i containers med overflow: hidden -* { - outline-offset: -1px; -} diff --git a/src/scss/style.scss b/src/scss/style.scss index 2da58b1..69a103f 100755 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -1,8 +1,8 @@ /** - * Bolts WP v1.0.0 + * Bolts WP v1.0.1 * * Developed by Pocketsize - * http://www.pocketsize.se/ + * https://pocketsize.se */ // Importing variables to pass them on to Bolts Scss @@ -50,4 +50,4 @@ @import 'components/forms/select'; @import 'components/forms/text-input'; @import 'components/forms/textarea'; -@import 'components/forms/button'; \ No newline at end of file +@import 'components/forms/button'; diff --git a/style.css b/style.css index 7adba10..e68471b 100755 --- a/style.css +++ b/style.css @@ -1,6 +1,6 @@ /* Theme Name: Bolts WP Author: Pocketsize -Author URI: http://www.pocketsize.se/ -Version: 1.0.0 +Author URI: https://pocketsize.se +Version: 1.0.1 */ diff --git a/webpack.config.js b/webpack.config.js old mode 100644 new mode 100755 index 83890a7..0877f0d --- a/webpack.config.js +++ b/webpack.config.js @@ -1,79 +1,72 @@ -require('core-js/stable'); -require('regenerator-runtime/runtime'); +require('core-js/stable') +require('regenerator-runtime/runtime') -const path = require('path'); +const path = require('path') -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const CopyPlugin = require('copy-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin') module.exports = { entry: { main: [ - './src/js/app.js', - './src/scss/style.scss' - ], + './src/js/polyfills.js', + './src/js/main.js', + './src/scss/main.scss' + ] }, output: { path: path.resolve(__dirname, 'public'), - filename: 'js/app.js', + filename: 'js/[name].js' }, module: { rules: [ { - test: /\.js$/, - exclude: /node_modules(?!\/bolts-lib)/, + test: /\.js|\.jsx$/, + exclude: /node_modules/, use: { loader: 'babel-loader', options: { plugins: [ - ['@babel/plugin-transform-runtime', { - corejs: 3, - }] - ], - presets: [ - ['@babel/preset-env'] + [ + '@babel/plugin-transform-runtime', + { + corejs: 3 + } + ] ], + presets: ['@babel/preset-env', '@babel/preset-react'] } } }, { test: /\.scss$/, - include: path.resolve(__dirname, 'src/scss'), use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { - url: false, - }, + url: false + } }, { loader: 'postcss-loader', options: { ident: 'postcss', - plugins: [ - require('autoprefixer')(), - ] + plugins: [require('autoprefixer')()] } }, { loader: 'sass-loader', options: { - implementation: require('sass'), - }, - }, - ], + implementation: require('sass') + } + } + ] } ] }, plugins: [ new MiniCssExtractPlugin({ - filename: 'css/style.css', - }), - - new CopyPlugin([ - { from: 'src/images', to: 'images' }, - { from: 'src/fonts', to: 'fonts' }, - ]), - ], -}; \ No newline at end of file + filename: 'css/[name].css' + }) + ] +}