chisel-scripts 1.0.0 → 2.0.0-alpha.1

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 <!-- INSERT-NEW-ENTRIES-HERE -->
 
+## 2.0.0-alpha.1 (2024-09-10)
+
+- copy twig files ([67ff991](https://github.com/xfiveco/generator-chisel/commit/67ff991))
+- fix whitespace ([9d58dba](https://github.com/xfiveco/generator-chisel/commit/9d58dba))
+
+## 2.0.0-alpha.0 (2024-09-08)
+
+- add block creator ([ea0e956](https://github.com/xfiveco/generator-chisel/commit/ea0e956))
+- Add Coding Standards, Minor Improvements ([cfcb017](https://github.com/xfiveco/generator-chisel/commit/cfcb017))
+- add styles indexing ([192b71d](https://github.com/xfiveco/generator-chisel/commit/192b71d))
+- adjust patterns ([b48eabb](https://github.com/xfiveco/generator-chisel/commit/b48eabb))
+- cleanup ([e78d5d4](https://github.com/xfiveco/generator-chisel/commit/e78d5d4))
+- cleanup, working start and build ([0f82f3b](https://github.com/xfiveco/generator-chisel/commit/0f82f3b))
+- create design styles ([a395fb5](https://github.com/xfiveco/generator-chisel/commit/a395fb5))
+- more cleanup, remove hooks ([dd9243b](https://github.com/xfiveco/generator-chisel/commit/dd9243b))
+- more cleanup, use default command ([e1fcf10](https://github.com/xfiveco/generator-chisel/commit/e1fcf10))
+- New chisel theme ([a05665b](https://github.com/xfiveco/generator-chisel/commit/a05665b))
+- remove engines, cleanup ([d562e69](https://github.com/xfiveco/generator-chisel/commit/d562e69))
+- remove wordpress plugin and move code to chisel scripts ([bb90260](https://github.com/xfiveco/generator-chisel/commit/bb90260))
+- WiP ([802891c](https://github.com/xfiveco/generator-chisel/commit/802891c))
+- working setup with composer ([abd16db](https://github.com/xfiveco/generator-chisel/commit/abd16db))
+
 ## 1.0.0 (2021-12-17)
 
 - Rewrite with Webpack (#509) ([14fa2d0](https://github.com/xfiveco/generator-chisel/commit/14fa2d0)), closes [#509](https://github.com/xfiveco/generator-chisel/issues/509)

package/README.md

@@ -1,26 +1,3 @@
 # chisel-scripts
 
 Main package containing scripts and configuration used by Chisel projects.
-
-## Injected commands
-
-- **`chisel-scripts build`**
-
-  ```text
-  Usage: chisel-scripts build [options]
-
-  build for production
-
-  Options:
-    --no-clean  do not remove the dist directory before building the project
-    --watch     watch for changes
-    --report    generate report to help analyze bundles content
-  ```
-
-- **`chisel-scripts inspect`**
-
-  ```text
-  Usage: chisel-scripts inspect [options]
-
-  inspect internal webpack config
-  ```

package/bin/chisel-scripts.js

@@ -2,26 +2,8 @@
 
 const Service = require('../lib/Service');
 
-// console.log('CREATE SERVICE');
-
-if (!Object.fromEntries) {
-  Object.fromEntries = function fromEntries(iterable) {
-    return [...iterable].reduce((obj, [key, val]) => {
-      obj[key] = val;
-      return obj;
-    }, {});
-  };
-}
-
-if (typeof jest !== 'undefined') {
-  module.exports = (argv) => {
-    const service = new Service();
-    return service.run(argv[0], argv.slice(1));
-  };
-} else {
-  const service = new Service();
-  service.run(process.argv[2], process.argv.slice(3)).catch((err) => {
-    console.error(err);
-    process.exit(1);
-  });
-}
+const service = new Service();
+service.run(process.argv[2], process.argv.slice(3)).catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/fetch-packages.js

@@ -0,0 +1,30 @@
+const fs = require('fs');
+const { execa } = require('chisel-shared-utils');
+
+const get = (url) =>
+  fetch(url).then((res) => {
+    if (!res.ok) {
+      throw new Error(
+        `Failed to fetch ${url} with ${res.statusText} (${res.status})`,
+      );
+    }
+
+    return res.arrayBuffer();
+  });
+
+(async () => {
+  const fileWpCli = await get(
+    'https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar',
+  );
+  fs.writeFileSync('./wp-cli.phar', new Uint8Array(fileWpCli));
+  await execa('php', ['./wp-cli.phar', '--info']);
+
+  const fileComposer = await get(
+    'https://getcomposer.org/download/latest-2.x/composer.phar',
+  );
+  fs.writeFileSync('./composer.phar', new Uint8Array(fileComposer));
+  await execa('php', ['./composer.phar', '--version']);
+})().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/index.js

@@ -0,0 +1,75 @@
+function adjustWebpackConfig(baseConfig, directory) {
+  const { sync: glob } = require('fast-glob');
+  const pathMod = require('path');
+  const CopyWebpackPlugin = require(require.resolve('copy-webpack-plugin', {
+    paths: [directory],
+  }));
+
+  const src = pathMod.join(directory, 'src');
+  const isProduction = process.env.NODE_ENV === 'production';
+  const packageJson = require(pathMod.join(directory, 'package.json'));
+
+  const [blockMetadataFiles, scriptsFiles, stylesFiles] = [
+    '**/block.json',
+    'scripts/*.{js,jsx,ts,tsx}',
+    'styles/*.scss',
+  ].map((pattern) =>
+    glob(pattern, {
+      absolute: true,
+      cwd: src,
+    }),
+  );
+
+  const entriesFromFiles = (files) =>
+    Object.fromEntries(
+      files.map((file) => {
+        const name = pathMod.join(
+          pathMod.dirname(pathMod.relative(src, file)),
+          pathMod.basename(file, pathMod.extname(file)),
+        );
+        return [name, file];
+      }),
+    );
+
+  const entry = {
+    ...(blockMetadataFiles.length > 0 && baseConfig.entry()),
+    ...entriesFromFiles(scriptsFiles),
+    ...entriesFromFiles(stylesFiles),
+  };
+
+  const updatedConfig = {
+    ...baseConfig,
+    entry,
+    resolve: {
+      ...baseConfig.resolve,
+      alias: {
+        ...baseConfig.resolve.alias,
+        '~design$': pathMod.join(src, 'design'),
+      },
+    },
+    devServer: baseConfig.devServer && {
+      ...baseConfig.devServer,
+      allowedHosts: [new URL(packageJson.chisel.url).host],
+    },
+    optimization: {
+      ...baseConfig.optimization,
+      ...(!isProduction && { runtimeChunk: 'single' }),
+    },
+    plugins: [
+      ...baseConfig.plugins,
+      new CopyWebpackPlugin({
+        patterns: [
+          {
+            from: '**/*.twig',
+            context: 'src',
+            noErrorOnMissing: true,
+          },
+        ],
+      }),
+    ],
+  };
+
+  return updatedConfig;
+}
+
+module.exports.adjustWebpackConfig = adjustWebpackConfig;

package/lib/PluginAPI.js

@@ -1,5 +1,4 @@
 const path = require('path');
-const tapable = require('tapable');
 
 // Based on https://github.com/vuejs/vue-cli/blob/80b93951b1710733a66765cbd535b12b7bb59279/packages/%40vue/cli-service/lib/PluginAPI.js
 
@@ -8,12 +7,6 @@ module.exports = class PluginAPI {
     this.id = id;
     /** @type import('./Service') */
     this.service = service;
-
-    this.tapable = tapable;
-  }
-
-  get hooks() {
-    return this.service.hooks;
   }
 
   /**
@@ -40,43 +33,6 @@ module.exports = class PluginAPI {
     }
   }
 
-  registerHooks(scope, hooks = {}) {
-    if (this.service.hooksFromPlugins[scope]) {
-      throw new Error(`Hooks scope ${scope} is already registered`);
-    }
-
-    this.service.hooksFromPlugins[scope] = Object.freeze({ ...hooks });
-    this.service.hooks = Object.freeze({
-      ...this.service.hooksBase,
-      ...this.service.hooksFromPlugins,
-    });
-  }
-
-  /**
-   * Register a function that will receive a chainable webpack config
-   * the function is lazy and won't be called until `resolveWebpackConfig` is
-   * called
-   *
-   * @param {function} fn
-   */
-  chainWebpack(fn) {
-    this.service.webpackChainFns.push(fn);
-  }
-
-  /**
-   * Register
-   * - a webpack configuration object that will be merged into the config
-   * OR
-   * - a function that will receive the raw webpack config.
-   *   the function can either mutate the config directly or return an object
-   *   that will be merged into the config.
-   *
-   * @param {object | function} fn
-   */
-  configureWebpack(fn) {
-    this.service.webpackRawConfigFns.push(fn);
-  }
-
   /**
    * Resolve path for a project.
    *
@@ -86,4 +42,8 @@ module.exports = class PluginAPI {
   resolve(..._path) {
     return path.resolve(this.service.context, ..._path.filter(Boolean));
   }
+
+  resolveRoot(..._path) {
+    return this.resolve('../../..', ..._path);
+  }
 };

package/lib/Service.js

@@ -1,180 +1,76 @@
 // Based on https://github.com/vuejs/vue-cli/blob/80b93951b1710733a66765cbd535b12b7bb59279/packages/%40vue/cli-service/lib/Service.js
 
-const merge = require('webpack-merge');
-const Config = require('webpack-chain');
 const path = require('path');
 const { defaultsDeep } = require('lodash');
 const { Command } = require('commander');
-const { AsyncSeriesHook } = require('tapable');
 const PluginAPI = require('./PluginAPI');
 
-function cloneRuleNames(to, from) {
-  if (!to || !from) {
-    return;
-  }
-  from.forEach((r, i) => {
-    if (to[i]) {
-      Object.defineProperty(to[i], '__ruleNames', {
-        // eslint-disable-next-line no-underscore-dangle
-        value: r.__ruleNames,
-      });
-      cloneRuleNames(to[i].oneOf, r.oneOf);
-    }
-  });
-}
-
 module.exports = class Service {
   constructor(context) {
     this.initialized = false;
     this.webpackChainFns = [];
     this.webpackRawConfigFns = [];
 
-    this.hooksBase = Object.freeze({
-      pluginsToInitialize: new AsyncSeriesHook(['plugins']),
-      pluginsInitialized: new AsyncSeriesHook([]),
-      projectOptionsLoaded: new AsyncSeriesHook(['options']),
-      configHooksLoaded: new AsyncSeriesHook(['service']),
-    });
-    this.hooksFromPlugins = {};
-    this.hooks = this.hooksBase;
-
     this.program = new Command('chisel-scripts');
     this.programCommands = {};
     this.context = context || process.env.CHISEL_CONTEXT || process.cwd();
-    this.plugins = this.loadPlugins();
+    this.plugins = [];
+    this.projectOptions = {};
   }
 
   // eslint-disable-next-line class-methods-use-this
-  loadPlugins() {
+  async loadPlugins() {
     const idToPlugin = (id) => ({
       id: id.replace(/^.\//, 'built-in:'),
       apply: require(id),
     });
 
     const builtInPlugins = [
-      // './commands/serve',
-      './commands/build',
-      './commands/inspect',
-      // config plugins are order sensitive
-      './config/base',
-      './config/js',
-      './config/css',
-      // './config/prod',
-    ];
+      'wp-scripts.mjs', // start, build
+      'composer',
+      'wp',
+      'wp-config',
+      'add-page',
+      'create-block',
+    ].map((id) => `./commands/${id}`);
 
     const plugins = [];
 
-    plugins.push(...builtInPlugins.map(idToPlugin));
+    for (const id of builtInPlugins) {
+      if (id.endsWith('.mjs')) {
+        plugins.push({
+          id: id.replace(/^.\//, 'built-in:'),
+          apply: (await import(id)).default,
+        });
+      } else {
+        plugins.push(idToPlugin(id));
+      }
+    }
 
-    return plugins;
+    this.plugins = plugins;
   }
 
   async initializePlugins() {
     const plugins = [...this.plugins];
-    await this.hooks.pluginsToInitialize.promise(plugins);
 
     for (const { id, apply } of plugins) {
       await apply(new PluginAPI(id, this), this.projectOptions);
     }
-
-    await this.hooks.pluginsInitialized.promise();
   }
 
   async init() {
     if (this.initialized) return;
     this.initialized = true;
 
+    await this.loadPlugins();
+
     this.program.version(require('../package.json').version);
 
-    const baseOptions = require('./chisel.config.base.js');
-    const userOptions = require(path.resolve(this.context, 'chisel.config.js'));
-    let userLocalOptions = {};
-    try {
-      userLocalOptions = require(path.resolve(
-        this.context,
-        'chisel.config.local.js',
-      ));
-    } catch (e) {
-      //
-    }
+    const packageJson = require(path.resolve(this.context, 'package.json'));
 
-    this.projectOptions = defaultsDeep(
-      {},
-      userLocalOptions,
-      userOptions,
-      baseOptions,
-    );
-
-    await this.hooks.projectOptionsLoaded.promise(this.projectOptions);
-
-    this.initializeProjectOptionsHooks();
-
-    await this.hooks.configHooksLoaded.promise(this);
-
-    if (Array.isArray(userOptions.plugins)) {
-      userOptions.plugins.forEach((plugin, index) => {
-        if (typeof plugin === 'string') {
-          this.plugins.push({ id: plugin, apply: require(plugin) });
-        } else if (typeof plugin === 'function') {
-          this.plugins.push({
-            id: plugin.name || `plugin${index}`,
-            apply: plugin,
-          });
-        }
-      });
-    }
+    this.projectOptions = { ...packageJson.chisel };
 
     await this.initializePlugins();
-
-    // apply webpack configs from project config file
-    if (this.projectOptions.chainWebpack) {
-      this.webpackChainFns.push(this.projectOptions.chainWebpack);
-    }
-
-    if (this.projectOptions.configureWebpack) {
-      this.webpackRawConfigFns.push(this.projectOptions.configureWebpack);
-    }
-  }
-
-  initializeProjectOptionsHooks() {
-    const { hooks: optionsHooks } = this.projectOptions;
-    if (!optionsHooks) return;
-
-    const subscribe = (hooks, taps) => {
-      Object.entries(taps).forEach(([name, tap]) => {
-        const hook = hooks[name];
-
-        if (hook instanceof AsyncSeriesHook) {
-          hook.tapPromise('ChiselConfig', (...args) =>
-            Promise.resolve(tap(...args)),
-          );
-        } else {
-          throw new Error(`Don't know how to tap to ${name} hook`);
-        }
-      });
-    };
-
-    const hooksToSubscribe = Object.fromEntries(
-      Object.entries(optionsHooks).filter(
-        ([, value]) => typeof value === 'function',
-      ),
-    );
-
-    const hooksFromPlugins = Object.fromEntries(
-      Object.entries(optionsHooks).filter(
-        ([, value]) => typeof value === 'object',
-      ),
-    );
-
-    subscribe(this.hooks, hooksToSubscribe);
-
-    if (Object.keys(hooksFromPlugins).length > 0) {
-      this.hooks.pluginsInitialized.tap('Service', () => {
-        Object.entries(hooksFromPlugins).forEach(([plugin, taps]) => {
-          subscribe(this.hooks[plugin], taps);
-        });
-      });
-    }
   }
 
   async run(name, args = []) {
@@ -194,56 +90,4 @@ module.exports = class Service {
 
     return undefined;
   }
-
-  async resolveChainableWebpackConfig() {
-    const chainableConfig = new Config();
-    for (const fn of this.webpackChainFns) {
-      await fn(chainableConfig);
-    }
-    return chainableConfig;
-  }
-
-  async resolveWebpackConfig(chainableConfig) {
-    if (!chainableConfig) {
-      chainableConfig = await this.resolveChainableWebpackConfig();
-    }
-
-    // get raw config
-    let config = chainableConfig.toConfig();
-    const original = config;
-
-    if (typeof config.node === 'undefined') {
-      config.node = false;
-    }
-
-    if (!Array.isArray(config.externals)) {
-      config.externals =
-        typeof config.externals === 'undefined' ? [] : [config.externals];
-    }
-
-    // apply raw config fns
-    this.webpackRawConfigFns.forEach((fn) => {
-      if (typeof fn === 'function') {
-        // function with optional return value
-        const res = fn(config);
-        if (res) {
-          config = merge(config, res);
-        }
-      } else if (fn) {
-        // merge literal values
-        config = merge(config, fn);
-      }
-    });
-
-    // #2206 If config is merged by merge-webpack, it discards the __ruleNames
-    // information injected by webpack-chain. Restore the info so that
-    // vue inspect works properly.
-    if (config !== original) {
-      cloneRuleNames(
-        config.module && config.module.rules,
-        original.module && original.module.rules,
-      );
-    }
-    return config;
-  }
 };

package/lib/commands/add-page.js

@@ -0,0 +1,92 @@
+module.exports = (api, options) => {
+  api.registerCommand(
+    'add-page <page...>',
+    (command) =>
+      command.description(
+        'add page(s) (creates twig templates and entries in WP)',
+      ),
+    async (pages) => {
+      const fs = require('fs-extra');
+      const { runLocal, chalk } = require('chisel-shared-utils');
+      const { kebabCase, template } = require('lodash');
+
+      const wp = (args, opts) =>
+        runLocal(['chisel-scripts', 'wp', ...args], {
+          ...opts,
+          cwd: api.resolve(),
+        });
+
+      const { wp: wpOptions } = options;
+      const theme = `${wpOptions.directoryName}/wp-content/themes/${wpOptions.themeName}`;
+      const templatesFiles = [
+        api.resolve(theme, options.source.templates, 'layouts/page.twig'),
+      ];
+
+      let templateFileSelected;
+
+      for (const file of templatesFiles) {
+        if (await fs.pathExists(file)) {
+          templateFileSelected = file;
+          break;
+        }
+      }
+
+      const templateBody = await fs.readFile(templateFileSelected, {
+        encoding: 'utf8',
+      });
+      const templateCompiled = template(templateBody, {
+        sourceURL: templateFileSelected,
+      });
+
+      console.log();
+
+      for (const page of pages) {
+        // let slug = '';
+
+        const createPost = await wp(
+          [
+            'post',
+            'create',
+            { post_type: 'page', post_title: page, post_status: 'publish' },
+          ],
+          { silent: true },
+        );
+
+        const id = /Created post (\d+)\./.exec(createPost.stdout)[1];
+
+        if (!id) {
+          throw new Error('Post id not found');
+        }
+
+        const postDetailsCmd = await wp(
+          ['post', 'get', id, { format: 'json' }],
+          { silent: true },
+        );
+
+        const postDetails = JSON.parse(postDetailsCmd.stdout);
+
+        const slug = postDetails.post_name;
+        const targetFileName = `page-${slug}.twig`;
+        const targetPath = api.resolve(
+          theme,
+          options.source.templates,
+          targetFileName,
+        );
+
+        await fs.outputFile(
+          targetPath,
+          templateCompiled({
+            ...options.creatorData,
+            pageName: page,
+            pageSlug: slug,
+          }),
+        );
+
+        console.log(chalk.greenBright.bold(`Page ${page} created!`));
+        console.log(`${chalk.bold(`Template:`)} ${targetPath}`);
+        console.log(`${chalk.bold(`URL:`)} ${postDetails.guid}`);
+        console.log();
+      }
+    },
+  );
+};

package/lib/commands/composer.js

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

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

@@ -0,0 +1,45 @@
+const { runWithExit } = require('chisel-shared-utils');
+const fs = require('fs-extra');
+
+module.exports = (api) => {
+  api.registerCommand(
+    'create-block',
+    (command) =>
+      command
+        .description('create a Gutenberg block')
+        .option('-t, --template <template>', 'template to use')
+        .allowUnknownOption()
+        .helpOption('--chisel-help'),
+    async ({ template = 'standard' }, args = []) => {
+      const path = require('path');
+
+      const targetDir = api.resolve(
+        'src',
+        template === 'acf' ? 'acf-blocks' : 'blocks',
+      );
+
+      const maybeTemplatePath =
+        template && path.resolve(__dirname, 'templates', template);
+      if (maybeTemplatePath && (await fs.pathExists(maybeTemplatePath))) {
+        template = maybeTemplatePath;
+      }
+
+      await fs.ensureDir(targetDir);
+
+      await runWithExit(
+        [
+          'npx',
+          '--yes',
+          '@wordpress/create-block@latest',
+          '--template',
+          template,
+          '--no-plugin',
+          ...args,
+        ],
+        {
+          cwd: targetDir,
+        },
+      );
+    },
+  );
+};

package/lib/commands/create-block/templates/README.md

@@ -0,0 +1,5 @@
+# Custom Block Templates
+
+See https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/packages-create-block-external-template to learn more about creating custom block templates.
+
+Please note that `--no-plugin` is always passed to `@wordpress/create-block` when using `chisel-scripts create-block`.