allow overriding certain config files (#355)

.changeset/tricky-ties-hang.md

@@ -0,0 +1,5 @@
+---
+"10up-toolkit": patch
+---
+
+Fix: allow overriding buildfiles.config.js, filenames.config.js and paths.config.js as stated in README

packages/toolkit/__tests__/build-project-overriding-config-files/.gitignore

@@ -0,0 +1 @@
+./dist

packages/toolkit/__tests__/build-project-overriding-config-files/__fixtures__/assets/css/admin-styles.css

@@ -0,0 +1 @@
+.admin-class { color: blue; }

packages/toolkit/__tests__/build-project-overriding-config-files/__fixtures__/assets/css/frontend.css

@@ -0,0 +1 @@
+.test { color: red; }

packages/toolkit/__tests__/build-project-overriding-config-files/__fixtures__/assets/js/admin.js

@@ -0,0 +1,3 @@
+import '../css/admin-styles.css';
+
+export const admin = () => {};

packages/toolkit/__tests__/build-project-overriding-config-files/__fixtures__/assets/js/frontend.js

@@ -0,0 +1,13 @@
+/* eslint-disable*/
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { useState } from 'react';
+
+const App = () => {
+	const [state] = useState(1);
+
+	return <p>This is a react app {state}</p>;
+};
+
+ReactDOM.render(<App />, document.getElementById('root'));
+

packages/toolkit/__tests__/build-project-overriding-config-files/__fixtures__/includes/blocks/example/block.json

@@ -0,0 +1,43 @@
+{
+	"title": "Example Block",
+	"description": "An Example Block",
+	"textdomain": "tenup-scaffold",
+	"name": "tenup/example",
+	"icon": "feedback",
+	"category": "tenup-scaffold-blocks",
+	"attributes": {
+		"title": {
+			"type": "string"
+		}
+	},
+	"example": {
+		"attributes": {
+			"title": "Example Block"
+		}
+	},
+	"supports": {
+		"align": false,
+		"alignWide": false,
+		"anchor": false,
+		"color": {
+			"gradients": false,
+			"background": false,
+			"text": false
+		},
+		"customClassName": false,
+		"defaultStylePicker": false,
+		"typography": {
+			"fontSize": false,
+			"lineHeight": true
+		},
+		"html": false,
+		"inserter": true,
+		"multiple": true,
+		"reusable": false,
+		"spacing": {
+			"padding": false
+		}
+	},
+	"editorScript": "file:../../../../dist/editor.js",
+	"editorStyle": "file:../../../../dist/editor.css"
+}

packages/toolkit/__tests__/build-project-overriding-config-files/__fixtures__/includes/blocks/example/edit.js

@@ -0,0 +1,4 @@
+import './editor-styles.css';
+
+const ExampleBlockEdit = () => {};
+export default ExampleBlockEdit;

packages/toolkit/__tests__/build-project-overriding-config-files/__fixtures__/includes/blocks/example/editor-styles.css

@@ -0,0 +1 @@
+/* Editor specific styles */

packages/toolkit/__tests__/build-project-overriding-config-files/__fixtures__/includes/blocks/example/index.js

@@ -0,0 +1,11 @@
+/* eslint-disable */
+import { registerBlockType } from '@wordpress/blocks';
+
+import edit from './edit';
+import save from './save';
+import block from './block.json';
+
+registerBlockType(block, {
+	edit,
+	save,
+});

packages/toolkit/__tests__/build-project-overriding-config-files/__fixtures__/includes/blocks/example/save.js

@@ -0,0 +1,8 @@
+/**
+ * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#save
+ *
+ * @returns {null} Dynamic blocks do not save the HTML.
+ */
+const ExampleBlockSave = () => null;
+
+export default ExampleBlockSave;

packages/toolkit/__tests__/build-project-overriding-config-files/filenames.config.js

@@ -0,0 +1,9 @@
+// filenames.config.js
+module.exports = {
+	js: 'js/test/[name].js',
+	jsChunk: 'js/test/[name].[contenthash].chunk.js',
+	css: 'css/test/[name].css',
+	// changing where gutenberg blocks assets are stored.
+	block: 'js/test/blocks/[name]/editor.js',
+	blockCSS: 'css/test/blocks/[name]/editor.css',
+};

packages/toolkit/__tests__/build-project-overriding-config-files/package.json

@@ -0,0 +1,12 @@
+{
+	"name": "test-build-project",
+	"10up-toolkit": {
+		"useBlockAssets": false,
+		"entry": {
+			"admin": "./__fixtures__/assets/js/admin.js",
+			"frontend": "./__fixtures__/assets/js/frontend.js",
+			"frontend-css": "./__fixtures__/assets/css/frontend.css",
+			"example-block": "./__fixtures__/includes/blocks/example/index.js"
+		}
+	}
+}

packages/toolkit/__tests__/build-project-overriding-config-files/test.js

@@ -0,0 +1,29 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import spawn from 'cross-spawn';
+import fs from 'fs';
+import path from 'path';
+
+describe('build a project (overriding config)', () => {
+	it('builds and compiles js and css', async () => {
+		spawn.sync('node', ['../../scripts/build'], {
+			cwd: __dirname,
+		});
+
+		expect(fs.existsSync(path.join(__dirname, 'dist', 'js', 'test', 'admin.js'))).toBeTruthy();
+		expect(
+			fs.existsSync(path.join(__dirname, 'dist', 'js', 'test', 'admin.asset.php')),
+		).toBeTruthy();
+		expect(
+			fs.existsSync(path.join(__dirname, 'dist', 'js', 'test', 'frontend.js')),
+		).toBeTruthy();
+		expect(
+			fs.existsSync(path.join(__dirname, 'dist', 'js', 'test', 'frontend.asset.php')),
+		).toBeTruthy();
+		expect(
+			fs.existsSync(path.join(__dirname, 'dist', 'css', 'test', 'frontend-css.css')),
+		).toBeTruthy();
+		expect(
+			fs.existsSync(path.join(__dirname, 'dist', 'css', 'test', 'frontend-css.asset.php')),
+		).toBeTruthy();
+	});
+});