framework/bedrock
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Replace Laravel Mix with Bud (#2643)

Browse Source 
Co-authored-by: QWp6t <hi@qwp6t.me>
Co-authored-by: Ben Word <ben@benword.com>
This commit is contained in:
Kelly Mears
2021-11-21 21:53:01 -08:00
committed by GitHub
parent e533e1bd15
commit 69dfbfc65c
26 changed files with 3943 additions and 5588 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
.eslintrc.js
View File

@@ -1,30 +1,39 @@
module.exports = {
root: true,
extends: 'eslint:recommended',
parser: 'babel-eslint',
extends: ['eslint:recommended', 'plugin:react/recommended'],
globals: {
wp: true
wp: true,
},
env: {
node: true,
es6: true,
amd: true,
browser: true,
jquery: true
jquery: true,
},
parser: 'babel-eslint',
parserOptions: {
ecmaFeatures: {
experimentalObjectRestSpread: true,
globalReturn: true,
generators: false,
objectLiteralDuplicateProperties: false
impliedStrict: true,
objectLiteralDuplicateProperties: false,
jsx: true,
},
ecmaVersion: 2017,
sourceType: 'module'
sourceType: 'module',
},
plugins: ['import'],
plugins: ['import', 'react-hooks'],
settings: {
react: {
version: 'detect',
},
'import/core-modules': [],
'import/ignore': ['node_modules', '\\.(coffee|scss|css|less|hbs|svg|json)$']
'import/ignore': [
'node_modules',
'\\.(coffee|scss|css|less|hbs|svg|json)$',
],
},
rules: {
'no-console': 0,
@@ -35,8 +44,8 @@ module.exports = {
objects: 'always-multiline',
imports: 'always-multiline',
exports: 'always-multiline',
functions: 'ignore'
}
]
}
functions: 'ignore',
},
],
},
};

15
.github/workflows/main.yml vendored
View File

@@ -15,7 +15,7 @@ jobs:
if: "!contains(github.event.head_commit.message, '[ci skip]')"
strategy:
matrix:
node: ['12.14.0', '14']
node: ['16']
steps:
- name: Checkout the project
@@ -35,19 +35,20 @@ jobs:
- uses: actions/cache@v2
with:
path: ${{ steps.yarncache.outputs.dir }}
key: ${{ runner.os }}-${{ matrix.node }}-yarn-${{ hashFiles('**/package.json') }}
key: ${{ runner.os }}-${{ matrix.node }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: ${{ runner.os }}-${{ matrix.node }}-yarn-
- name: Install dependencies using Yarn
run: yarn install --frozen-lockfile
- name: Execute the Node test scripts
run: yarn test
- name: Lint scripts and styles
run: yarn lint
- name: Verify that assets are built successfully
- name: Build and compile assets
run: |
yarn build:production
cat public/mix-manifest.json
yarn build
cat public/entrypoints.json
cat public/manifest.json
php:
name: PHP ${{ matrix.php }}

2
.gitignore vendored
View File

@@ -1,5 +1,7 @@
/node_modules
/vendor
/public
.env
.budfiles
npm-debug.log
yarn-error.log

6
.prettierrc
View File

@@ -1,5 +1,9 @@
{
"bracketSpacing": false,
"jsxBracketSameLine": true,
"semi": true,
"singleQuote": true,
"trailingComma": "es5"
"tabWidth": 2,
"trailingComma": "all",
"useTabs": false
}

2
.stylelintrc
View File

@@ -1,6 +1,8 @@
{
"extends": "stylelint-config-standard",
"rules": {
"string-quotes": null,
"selector-class-pattern": null,
"declaration-colon-newline-after": null,
"value-list-comma-newline-after": null,
"no-empty-source": null,

4
app/admin.php
View File

@@ -8,7 +8,7 @@ namespace App;
use WP_Customize_Manager;
use function Roots\asset;
use function Roots\bundle;
/**
* Register the `.brand` selector to the blogname.
@@ -32,5 +32,5 @@ add_action('customize_register', function (WP_Customize_Manager $wp_customize) {
* @return void
*/
add_action('customize_preview_init', function () {
wp_enqueue_script('sage/customizer.js', asset('scripts/customizer.js')->uri(), ['customize-preview'], null, true);
bundle('customizer')->enqueueJs(true, ['customize-preview']);
});

22
app/setup.php
View File

@@ -6,7 +6,7 @@
namespace App;
use function Roots\asset;
use function Roots\bundle;
/**
* Register the theme assets.
@@ -14,16 +14,7 @@ use function Roots\asset;
* @return void
*/
add_action('wp_enqueue_scripts', function () {
wp_enqueue_script('sage/vendor.js', asset('scripts/vendor.js')->uri(), ['jquery'], null, true);
wp_enqueue_script('sage/app.js', asset('scripts/app.js')->uri(), ['sage/vendor.js'], null, true);
wp_add_inline_script('sage/vendor.js', asset('scripts/manifest.js')->contents(), 'before');
if (is_single() && comments_open() && get_option('thread_comments')) {
wp_enqueue_script('comment-reply');
}
wp_enqueue_style('sage/app.css', asset('styles/app.css')->uri(), false, null);
bundle('app')->enqueue();
}, 100);
/**
@@ -32,14 +23,7 @@ add_action('wp_enqueue_scripts', function () {
* @return void
*/
add_action('enqueue_block_editor_assets', function () {
if ($manifest = asset('scripts/manifest.asset.php')->load()) {
wp_enqueue_script('sage/vendor.js', asset('scripts/vendor.js')->uri(), ...array_values($manifest));
wp_enqueue_script('sage/editor.js', asset('scripts/editor.js')->uri(), ['sage/vendor.js'], null, true);
wp_add_inline_script('sage/vendor.js', asset('scripts/manifest.js')->contents(), 'before');
}
wp_enqueue_style('sage/editor.css', asset('styles/editor.css')->uri(), false, null);
bundle('editor')->enqueue();
}, 100);
/**

41
bud.config.js Normal file
View File

@@ -0,0 +1,41 @@
/**
* @typedef {import('@roots/bud').Bud} Bud
*
* @param {Bud} config
*/
module.exports = async (config) =>
config
/**
* Application entrypoints
*
* Paths are relative to your resources directory
*/
.entry({
app: ['scripts/app.js', 'styles/app.css'],
editor: ['scripts/editor.js', 'styles/editor.css'],
customizer: 'scripts/customizer.js',
})
/**
* These files should be processed as part of the build
* even if they are not explicitly imported in application assets.
*/
.assets(['assets/images'])
/**
* These files will trigger a full page reload
* when modified.
*/
.watch([
'tailwind.config.js',
'resources/views/*.blade.php',
'app/View/**/*.php',
])
/**
* Target URL to be proxied by the dev server.
*
* This is your local dev server.
*/
.proxy({target: 'http://example.test'});

15
config/app.php
View File

@@ -41,7 +41,7 @@ return [
|
*/
'debug' => WP_DEBUG,
'debug' => WP_DEBUG && WP_DEBUG_DISPLAY,
/*
|--------------------------------------------------------------------------
@@ -56,19 +56,6 @@ return [
'timezone' => get_option('timezone_string', 'UTC'),
/*
|--------------------------------------------------------------------------
| Global Helpers
|--------------------------------------------------------------------------
|
| This value enables the usage of various Acorn helpers without the need
| to specify a namespace. This defaults to false as to not pollute the
| global namespace.
|
*/
'globals' => false,
/*
|--------------------------------------------------------------------------
| Application Locale Configuration

5
config/assets.php
View File

@@ -1,7 +1,5 @@
<?php
use function Roots\public_path;
return [
/*
@@ -36,7 +34,8 @@ return [
'theme' => [
'path' => get_theme_file_path('public'),
'url' => get_theme_file_uri('public'),
'assets' => public_path('mix-manifest.json'),
'assets' => public_path('manifest.json'),
'bundles' => public_path('entrypoints.json'),
]
]
];

1
config/logging.php
View File

@@ -5,7 +5,6 @@ use Monolog\Handler\StreamHandler;
use Monolog\Handler\SyslogUdpHandler;
use function Roots\env;
use function Roots\storage_path;
return [

2
config/view.php
View File

@@ -1,7 +1,5 @@
<?php
use function Roots\resource_path;
return [
/*

31
docker-compose.yml Normal file
View File

@@ -0,0 +1,31 @@
version: '3'
services:
db:
image: mysql:5.7
volumes:
- db_data:/var/lib/mysql
restart: always
environment:
MYSQL_ROOT_PASSWORD: wordpress
MYSQL_DATABASE: wordpress
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress
wordpress:
depends_on:
- db
image: wordpress:latest
ports:
- '8000:80'
restart: always
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: wordpress
working_dir: /var/www/html
volumes:
- ./:/var/www/html/wp-content/themes/sage
volumes:
db_data:

4
index.php
View File

@@ -6,12 +6,12 @@
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<body <?php body_class('no-js'); ?>>
<?php wp_body_open(); ?>
<?php do_action('get_header'); ?>
<div id="app">
<?php echo \Roots\view(\Roots\app('sage.view'), \Roots\app('sage.data'))->render(); ?>
<?php echo view(app('sage.view'), app('sage.data'))->render(); ?>
</div>
<?php do_action('get_footer'); ?>

51
package.json
View File

@@ -1,46 +1,39 @@
{
"name": "sage",
"private": true,
"bud": {
"location": {
"src": "resources",
"dist": "public"
}
},
"browserslist": [
"extends @wordpress/browserslist-config"
],
"engines": {
"node": ">=12.14.0"
"node": ">=16.0.0"
},
"scripts": {
"build": "mix",
"build:production": "mix --production",
"start": "mix watch",
"hot": "mix watch --hot",
"clear": "wp acorn optimize:clear",
"test": "npm run lint",
"dev": "bud dev",
"build": "bud build",
"lint": "npm run lint:js && npm run lint:css",
"lint:js": "eslint resources/scripts",
"lint:css": "stylelint \"resources/**/*.{css,scss,vue}\"",
"translate": "npm run translate:pot && npm run translate:js",
"translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --ignore-domain --include=\"app,resources\"",
"translate:js": "wp i18n make-json ./resources/lang --pretty-print"
"test": "npm run lint"
},
"devDependencies": {
"@roots/bud": "5.0.0-next.14",
"@roots/sage": "5.0.0-next.14",
"@tailwindcss/typography": "^0.4.1",
"@tinypixelco/laravel-mix-wp-blocks": "^1.1.0",
"@wordpress/babel-preset-default": "^6.1.0",
"@wordpress/browserslist-config": "^4.0.0",
"@wordpress/dependency-extraction-webpack-plugin": "^3.1.3",
"babel-eslint": "^10.1.0",
"browser-sync": "^2.26.14",
"browser-sync-webpack-plugin": "^2.3.0",
"eslint": "^7.27.0",
"eslint-plugin-import": "^2.23.3",
"laravel-mix": "^6.0.19",
"postcss": "^8.3.0",
"sass": "^1.34.0",
"sass-loader": "11.1.1",
"stylelint": "^13.13.1",
"stylelint-config-standard": "^22.0.0",
"tailwindcss": "^2.1.2"
},
"peerDependencies": {
"jquery": "^3.5.1"
"@wordpress/browserslist-config": "4.1.0",
"eslint": "7.32.0",
"postcss": "8.3.11",
"postcss-import": "14.0.2",
"postcss-nested": "5.0.6",
"postcss-preset-env": "7.0.0",
"prettier": "2.4.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"tailwindcss": "2.2.19"
}
}

21
resources/scripts/app.js
View File

@@ -1,8 +1,17 @@
/**
* External Dependencies
*/
import 'jquery';
import {domReady} from '@scripts/components';
$(() => {
// console.log('Hello world');
/**
* Remove `.no-js` from document body
* when DOM has loaded.
*/
domReady(() => {
document.body.classList.contains('no-js') &&
document.body.classList.remove('no-js');
});
/**
* Accept module updates
*
* @see https://webpack.js.org/api/hot-module-replacement
*/
import.meta.webpackHot?.accept(console.error);

12
resources/scripts/components/index.js Normal file
View File

@@ -0,0 +1,12 @@
/**
* Calls a supplied function once
* document has loaded.
*
* @param {CallableFunction} onReady
* @return {void}
*/
export const domReady = (onReady) => {
window.requestAnimationFrame(function check() {
document.body ? onReady() : window.requestAnimationFrame(check);
});
};

8
resources/scripts/customizer.js
View File

@@ -2,14 +2,12 @@
* This file allows you to add functionality to the Theme Customizer
* live preview. jQuery is readily available.
*
* {@link https://codex.wordpress.org/Theme_Customization_API}
* @see https://codex.wordpress.org/Theme_Customization_API
*/
/**
* Change the blog name value.
*
* @param {string} value
*/
wp.customize('blogname', value => {
value.bind(to => $('.brand').text(to));
wp.customize('blogname', (value) => {
value.bind((to) => $('.brand').text(to));
});

15
resources/scripts/editor.js
View File

@@ -1,7 +1,11 @@
import '@wordpress/edit-post';
import domReady from '@wordpress/dom-ready';
import { unregisterBlockStyle, registerBlockStyle } from '@wordpress/blocks';
import {registerBlockStyle, unregisterBlockStyle} from '@wordpress/blocks';
import {domReady} from '@scripts/components';
/**
* Customize block styles
*/
domReady(() => {
unregisterBlockStyle('core/button', 'outline');
@@ -10,3 +14,10 @@ domReady(() => {
label: 'Outline',
});
});
/**
* Accept module updates
*
* @see https://webpack.js.org/api/hot-module-replacement
*/
import.meta.webpackHot?.accept(console.error);

0
resources/styles/app.scss → resources/styles/app.css
View File

0
resources/styles/common/global.scss → resources/styles/common/global.css
View File

2
resources/styles/editor.scss → resources/styles/editor.css
View File

@@ -6,6 +6,6 @@
@apply max-w-screen-md;
&.editor-post-title__block .editor-post-title__input {
@apply font-sans #{!important};
@apply font-sans;
}
}

8
tailwind.config.js
View File

@@ -1,11 +1,9 @@
module.exports = {
purge: {
content: [
'./app/**/*.php',
'./resources/**/*.{php,vue,js}',
],
content: ['./app/**/*.php', './resources/**/*.{php,vue,js}'],
},
darkMode: false, // or 'media' or 'class'
jit: true,
darkMode: false,
theme: {
extend: {
colors: {},

23
tsconfig.json Normal file
View File

@@ -0,0 +1,23 @@
{
"compilerOptions": {
"baseUrl": "./resources",
"paths": {
"@scripts/*": ["scripts/*"],
"@styles/*": ["styles/*"]
},
"outDir": "./public",
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"strict": false,
"checkJs": false,
"forceConsistentCasingInFileNames": true,
"esModuleInterop": true,
"module": "commonjs",
"moduleResolution": "node",
"resolveJsonModule": true,
"jsx": "preserve"
},
"include": ["resources/**/*"],
"exclude": ["node_modules"]
}

40
webpack.mix.js
View File

@@ -1,40 +0,0 @@
const mix = require('laravel-mix');
require('@tinypixelco/laravel-mix-wp-blocks');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Sage application. By default, we are compiling the Sass file
| for your application, as well as bundling up your JS files.
|
*/
mix
.setPublicPath('./public')
.browserSync('sage.test');
mix
.sass('resources/styles/app.scss', 'styles')
.sass('resources/styles/editor.scss', 'styles')
.options({
processCssUrls: false,
postCss: [require('tailwindcss')],
});
mix
.js('resources/scripts/app.js', 'scripts')
.js('resources/scripts/customizer.js', 'scripts')
.blocks('resources/scripts/editor.js', 'scripts')
.autoload({ jquery: ['$', 'window.jQuery'] })
.extract();
mix
.copyDirectory('resources/images', 'public/images')
.copyDirectory('resources/fonts', 'public/fonts');
mix
.sourceMaps()
.version();

9168
yarn.lock
View File

File diff suppressed because it is too large Load Diff