chisel-scripts 1.0.0 → 2.0.0-alpha.0

package/lib/commands/create-block/templates/acf/block/edit.js.mustache

@@ -0,0 +1,38 @@
+/**
+ * Retrieves the translation of text.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * Those files can contain any CSS code that gets applied to the editor.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+import './editor.scss';
+
+/**
+ * The edit function describes the structure of your block in the context of the
+ * editor. This represents what the editor will render when the block is used.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
+ *
+ * @return {Element} Element to render.
+ */
+export default function Edit() {
+	return (
+		<p { ...useBlockProps() }>
+			{ __( '{{title}} – hello from the editor!', '{{textdomain}}' ) }
+		</p>
+	);
+}

package/lib/commands/create-block/templates/acf/block/editor.scss.mustache

@@ -0,0 +1,9 @@
+/**
+ * The following styles get applied inside the editor only.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-{{namespace}}-{{slug}} {
+	border: 1px dotted #f00;
+}

package/lib/commands/create-block/templates/acf/block/index.js.mustache

@@ -0,0 +1,45 @@
+// this is custom acf block
+
+/**
+ * Registers a new block provided a unique name and an object defining its behavior.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * All files containing `style` keyword are bundled together. The code used
+ * gets applied both to the front of your site and to the editor.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+import './style.scss';
+
+/**
+ * Internal dependencies
+ */
+import Edit from './edit';
+{{#isStaticVariant}}
+import save from './save';
+{{/isStaticVariant}}
+import metadata from './block.json';
+
+/**
+ * Every block starts by registering a new block type definition.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+registerBlockType( metadata.name, {
+	/**
+	 * @see ./edit.js
+	 */
+	edit: Edit,
+	{{#isStaticVariant}}
+
+	/**
+	 * @see ./save.js
+	 */
+	save,
+	{{/isStaticVariant}}
+} );

package/lib/commands/create-block/templates/acf/block/render.php.mustache

@@ -0,0 +1,10 @@
+{{#isDynamicVariant}}
+<?php
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
+ */
+?>
+<p <?php echo get_block_wrapper_attributes(); ?>>
+	<?php esc_html_e( '{{title}} – hello from a dynamic block!', '{{textdomain}}' ); ?>
+</p>
+{{/isDynamicVariant}}

package/lib/commands/create-block/templates/acf/block/save.js.mustache

@@ -0,0 +1,26 @@
+{{#isStaticVariant}}
+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * The save function defines the way in which the different attributes should
+ * be combined into the final markup, which is then serialized by the block
+ * editor into `post_content`.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
+ *
+ * @return {Element} Element to render.
+ */
+export default function save() {
+	return (
+		<p { ...useBlockProps.save() }>
+			{ '{{title}} – hello from the saved content!' }
+		</p>
+	);
+}
+{{/isStaticVariant}}

package/lib/commands/create-block/templates/acf/block/style.scss.mustache

@@ -0,0 +1,12 @@
+/**
+ * The following styles get applied both on the front of your site
+ * and in the editor.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-{{namespace}}-{{slug}} {
+	background-color: #21759b;
+	color: #fff;
+	padding: 2px;
+}

package/lib/commands/create-block/templates/acf/block/view.js.mustache

@@ -0,0 +1,25 @@
+/**
+ * Use this file for JavaScript code that you want to run in the front-end 
+ * on posts/pages that contain this block.
+ *
+ * When this file is defined as the value of the `viewScript` property
+ * in `block.json` it will be enqueued on the front end of the site.
+ *
+ * Example:
+ *
+ * ```js
+ * {
+ *   "viewScript": "file:./view.js"
+ * }
+ * ```
+ *
+ * If you're not making any changes to this file because your project doesn't need any 
+ * JavaScript running in the front-end, then you should delete this file and remove 
+ * the `viewScript` property from `block.json`. 
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script
+ */
+ 
+/* eslint-disable no-console */
+console.log("Hello World! (from {{namespace}}-{{slug}} block)");
+/* eslint-enable no-console */

package/lib/commands/create-block/templates/acf/index.js

@@ -0,0 +1,3 @@
+module.exports = {
+  blockTemplatesPath: require('path').join(__dirname, 'block'),
+};

package/lib/commands/wp-config.js

@@ -0,0 +1,116 @@
+module.exports = (api, options) => {
+  api.registerCommand(
+    'wp-config',
+    (command) =>
+      command.description(
+        'configure WP (writes wp/wp-config-local.php an dev-vhost.conf)',
+      ),
+    async () => {
+      const { runLocal, copy } = require('chisel-shared-utils');
+      const wp = (args, opts) =>
+        runLocal(['chisel-scripts', 'wp', ...args], {
+          ...opts,
+          cwd: api.resolve(),
+        });
+      const inquirer = require('inquirer');
+      const path = require('path');
+
+      const prompts = [
+        {
+          name: 'databaseHost',
+          message: 'Enter the database host:',
+          default: '127.0.0.1',
+        },
+        {
+          type: 'number',
+          name: 'databasePort',
+          message: 'Enter the database port:',
+          default: 3306,
+        },
+        {
+          name: 'databaseName',
+          message: 'Enter the database name:',
+          default: require(api.resolve('package.json')).name,
+        },
+        {
+          name: 'databaseUser',
+          message: 'Enter the database user:',
+          default: 'root',
+        },
+        {
+          type: 'password',
+          name: 'databasePassword',
+          message: 'Enter the database password:',
+        },
+      ];
+
+      const promptAndCreateDB = async () => {
+        const answers = await inquirer.prompt(prompts);
+
+        answers.databaseHostPort = `${answers.databaseHost}:${answers.databasePort}`;
+
+        const { url, tablePrefix } = options;
+
+        console.log('Creating database...');
+        console.log(api.resolve());
+
+        await copy({
+          from: path.join(__dirname, '../template'),
+          to: api.resolveRoot(),
+          templateData: {
+            ...answers,
+            documentRoot: api.resolveRoot(),
+            serverName: new URL(url).hostname,
+            tablePrefix,
+          },
+        });
+
+        const res = await wp(['db', 'query', 'SELECT 1'], {
+          reject: false,
+          silent: true,
+        });
+
+        if (res.exitCode !== 0) {
+          if (
+            res.stderr.includes('ERROR 1049') ||
+            res.stderr.includes('Unknown database')
+          ) {
+            await wp(['db', 'create']);
+          } else {
+            console.log(res.stdout);
+            console.log(res.stderr);
+            throw res;
+          }
+        } else {
+          // exists
+          const { useExisting } = await inquirer.prompt([
+            {
+              type: 'confirm',
+              name: 'useExisting',
+              message:
+                'Database already exist, do you want to use existing database?',
+            },
+          ]);
+
+          if (!useExisting) {
+            await wp(['db', 'drop', '--yes']);
+            await wp(['db', 'create']);
+          }
+        }
+      };
+
+      // eslint-disable-next-line no-constant-condition
+      while (true) {
+        try {
+          await promptAndCreateDB();
+          break;
+        } catch (e) {
+          console.log(e); // TODO: remove
+          console.log('');
+          console.log('Trying again...');
+          console.log('');
+        }
+      }
+    },
+  );
+};

package/lib/commands/wp-scripts.mjs

@@ -0,0 +1,70 @@
+import chiselSharedUtils from 'chisel-shared-utils';
+import { join } from 'path';
+import fs from 'fs';
+import { pathToFileURL } from 'url';
+
+const { runLocalWithExit } = chiselSharedUtils;
+
+function loadExtensions() {
+  const extensionsDir = join(import.meta.dirname, '..', 'extensions');
+  const files = fs
+    .readdirSync(join(extensionsDir))
+    .filter((file) => file.endsWith('.mjs'))
+    .sort();
+
+  return Promise.all(
+    files.map((file) => import(pathToFileURL(join(extensionsDir, file)))),
+  );
+}
+
+export default function wpScripts(api) {
+  api.registerCommand(
+    'build',
+    (command) => command.description('build for production'),
+    // .option(
+    //   '--no-clean',
+    //   'do not remove the dist directory before building the project',
+    // )
+    // .option('--watch', 'watch for changes')
+    // .option('--report', 'generate report to help analyze bundles content')
+    async () => {
+      process.env.NODE_ENV = 'production';
+
+      for (const extension of await loadExtensions()) {
+        if (!extension.build) continue;
+
+        await extension.build(api);
+      }
+
+      await runLocalWithExit(['wp-scripts', 'build'], {
+        cwd: api.resolve(),
+      });
+    },
+  );
+
+  api.registerCommand(
+    'start',
+    (command) => command.description('start development server'),
+    async () => {
+      process.env.NODE_ENV = 'development';
+
+      const extensions = await loadExtensions();
+
+      for (const extension of extensions) {
+        if (!extension.build) continue;
+
+        await extension.build(api);
+      }
+
+      for (const extension of extensions) {
+        if (!extension.start) continue;
+
+        await extension.start(api);
+      }
+
+      await runLocalWithExit(['wp-scripts', 'start', '--hot'], {
+        cwd: api.resolve(),
+      });
+    },
+  );
+}

package/lib/commands/wp.js

@@ -0,0 +1,22 @@
+const { runWithExit } = require('chisel-shared-utils');
+
+module.exports = (api) => {
+  api.registerCommand(
+    'wp',
+    (command) =>
+      command
+        .description('run WP-CLI command')
+        .allowUnknownOption()
+        .helpOption('--chisel-help'),
+    async () => {
+      const path = require('path');
+
+      const args = process.argv.slice(3);
+      const wpCliPath = path.resolve(__dirname, '../..', 'wp-cli.phar');
+
+      await runWithExit(['php', wpCliPath, '--color', ...args], {
+        cwd: api.resolveRoot(),
+      });
+    },
+  );
+};

package/lib/extensions/stylesheets.mjs

@@ -0,0 +1,51 @@
+import { relative, join } from 'path';
+import fastGlob from 'fast-glob';
+import fs from 'fs/promises';
+
+const { convertPathToPattern } = fastGlob;
+
+export const build = async (api) => {
+  const stylesDir = api.resolve('src/styles');
+  const pattern = convertPathToPattern(stylesDir) + '/*/**/*.scss';
+  const files = (await fastGlob(pattern)).sort();
+
+  const groups = files.sort().reduce((acc, file) => {
+    const group = convertPathToPattern(relative(stylesDir, file)).split('/')[0];
+    acc[group] = acc[group] || [];
+    acc[group].push(file);
+    return acc;
+  }, {});
+
+  for (const [group, files] of Object.entries(groups)) {
+    const dir = join(stylesDir, group);
+    const content = [
+      '// stylelint-disable',
+      '// This file is auto generated. Do not edit directly.',
+      '',
+      ...files
+        .map((file) => {
+          const finalPath = convertPathToPattern(relative(dir, file));
+          if (finalPath === '_index.scss') return '';
+          return `@use '${finalPath}';`;
+        })
+        .filter(Boolean),
+      '',
+    ].join('\n');
+
+    await fs.writeFile(join(stylesDir, group, '_index.scss'), content);
+  }
+};
+
+export const start = async (api) => {
+  const { default: chokidar } = await import('chokidar');
+
+  const stylesDir = api.resolve('src/styles');
+  const pattern = convertPathToPattern(stylesDir) + '/*/**/*.scss';
+
+  const watcher = chokidar.watch(convertPathToPattern(pattern), {
+    persistent: false,
+    ignoreInitial: true,
+  });
+  watcher.on('add', () => build(api));
+  watcher.on('unlink', () => build(api));
+};

package/lib/template/dev-vhost.chisel-tpl.conf

@@ -0,0 +1,8 @@
+<VirtualHost *:80>
+    DocumentRoot "<%= documentRoot %>"
+    ServerName <%= serverName %>
+    <Directory "<%= documentRoot %>">
+      AllowOverride All
+      Require all granted
+    </Directory>
+</VirtualHost>

package/lib/template/wp-config-local.chisel-tpl.php

@@ -0,0 +1,56 @@
+<?php
+/**
+ * The base configuration for WordPress local installation
+ *
+ * This file contains the following configurations:
+ *
+ * * MySQL settings
+ * * Database table prefix
+ * * External settings when needed
+ *
+ */
+
+// ** MySQL settings - You can get this info from your web host ** //
+/** The name of the database for WordPress */
+define( 'DB_NAME', '<%= databaseName %>' );
+
+/** MySQL database username */
+define( 'DB_USER', '<%= databaseUser %>' );
+
+/** MySQL database password */
+define( 'DB_PASSWORD', '<%= databasePassword %>' );
+
+/** MySQL hostname */
+define( 'DB_HOST', '<%= databaseHostPort %>' );
+
+
+/**
+ * WordPress Database Table prefix.
+ *
+ * You can have multiple installations in one database if you give each
+ * a unique prefix. Only numbers, letters, and underscores please!
+ */
+$table_prefix = '<%= tablePrefix %>';
+
+/**
+ * For developers: WordPress debugging mode.
+ *
+ * Change this to true to enable the display of notices during development.
+ * It is strongly recommended that plugin and theme developers use WP_DEBUG
+ * in their development environments.
+ *
+ * For information on other constants that can be used for debugging,
+ * visit the Codex.
+ *
+ * @link https://codex.wordpress.org/Debugging_in_WordPress
+ */
+define( 'WP_DEBUG', true );
+define( 'WP_DEBUG_LOG', true );
+define( 'WP_DEBUG_DISPLAY', true );
+define( 'SCRIPT_DEBUG', true );
+
+// Required for the theme fast refresh mode.
+define( 'WP_ENVIRONMENT_TYPE', 'development' );
+
+/** The Database Collate type. Don't change this if in doubt. */
+define( 'DB_COLLATE', '' );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chisel-scripts",
-  "version": "1.0.0",
+  "version": "2.0.0-alpha.0",
   "description": "TODO",
   "bin": {
     "chisel-scripts": "bin/chisel-scripts.js"
@@ -18,50 +18,24 @@
   "homepage": "https://www.getchisel.co/",
   "license": "MIT",
   "scripts": {
-    "test": "echo \"Error: run tests from root\" && exit 1"
+    "test": "echo \"Error: run tests from root\" && exit 1",
+    "prepare": "node ./fetch-packages.js"
   },
   "bugs": {
     "url": "https://github.com/xfiveco/generator-chisel/issues"
   },
-  "engines": {
-    "node": ">=10"
-  },
   "dependencies": {
-    "@babel/core": "^7.10.2",
-    "babel-loader": "^8.1.0",
-    "case-sensitive-paths-webpack-plugin": "^2.3.0",
-    "chisel-shared-utils": "^1.0.0",
-    "cli-highlight": "^2.1.4",
-    "cliui": "^6.0.0",
+    "chisel-shared-utils": "^2.0.0-alpha.0",
+    "chokidar": "^3.6.0",
     "commander": "^5.1.0",
-    "css-loader": "^3.5.3",
-    "cssnano": "^4.1.10",
-    "file-loader": "^6.0.0",
+    "fast-glob": "^3.3.2",
     "fs-extra": "^9.0.1",
     "globby": "^11.0.1",
-    "hash-sum": "^2.0.0",
-    "lodash": "^4.17.15",
-    "mini-css-extract-plugin": "^0.9.0",
-    "mini-svg-data-uri": "^1.2.3",
-    "open": "^7.0.4",
-    "postcss": "^7.0.32",
-    "postcss-loader": "^3.0.0",
-    "sass": "^1.26.7",
-    "sass-loader": "^8.0.2",
-    "source-map-explorer": "^2.4.2",
-    "tapable": "^1.1.3",
-    "terser-webpack-plugin": "^3.0.5",
-    "unminified-webpack-plugin": "^2.0.0",
-    "url-loader": "^4.1.0",
-    "webpack": "^4.43.0",
-    "webpack-bundle-analyzer": "^3.8.0",
-    "webpack-chain": "^6.4.0",
-    "webpack-fix-style-only-entries": "^0.5.0",
-    "webpack-merge": "^4.2.2",
-    "webpackbar": "^4.0.0"
+    "inquirer": "^7.1.0",
+    "lodash": "^4.17.15"
   },
-  "optionalDependencies": {
-    "fibers": "^5.0.0"
+  "peerDependencies": {
+    "@wordpress/scripts": "^27.9.0"
   },
-  "gitHead": "a879e91b61e119d27439c9bd9e7298c89776a4fb"
+  "gitHead": "694c57055488e434f25c3397be312771a8763527"
 }

package/lib/chisel.config.base.js

@@ -1,31 +0,0 @@
-module.exports = {
-  source: {
-    base: 'src',
-    scripts: 'scripts',
-    styles: 'styles',
-    assets: 'assets',
-    templates: 'templates',
-    content: '../content',
-    public: '../public',
-  },
-
-  output: {
-    base: 'dist',
-    scripts: 'scripts',
-    styles: 'styles',
-    assets: 'assets',
-  },
-
-  wp: {
-    directoryName: 'wp',
-  },
-
-  staticFrontend: {
-    serveDist: false,
-    skipHtmlExtension: false,
-    buildFormat: 'prettify', // prettify, minify, as-is/undefined
-    htmlHint: true,
-  },
-
-  plugins: [],
-};