generator-chisel 2.0.0-alpha.10 → 2.0.0-alpha.12

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 <!-- INSERT-NEW-ENTRIES-HERE -->
 
+## 2.0.0-alpha.12 (2024-11-12)
+
+- Try adjusting commands ([1c322a0](https://github.com/xfiveco/generator-chisel/commit/1c322a0))
+
+## 2.0.0-alpha.11 (2024-11-12)
+
+- V2: Add Devcontainers (#538) ([b878421](https://github.com/xfiveco/generator-chisel/commit/b878421)), closes [#538](https://github.com/xfiveco/generator-chisel/issues/538)
+- composer, wp-config, plugins list updates ([642f983](https://github.com/xfiveco/generator-chisel/commit/642f983))
+
 ## 2.0.0-alpha.10 (2024-10-31)
 
 - add assets index ([fed4fd3](https://github.com/xfiveco/generator-chisel/commit/fed4fd3))

package/bin/chisel.js

@@ -19,6 +19,12 @@ const createProgram = () => {
       '--link',
       'link Chisel packages (yarn link) in created project (for development)',
     )
+    .option('--devcontainer', 'create devcontainer', false)
+    .option(
+      '--devcontainer-complete <details>',
+      'complete creation inside devcontainer',
+      false
+    )
     .action((...args) => {
       const cmd = args.slice(-1)[0];
       args = args.slice(0, -1);

package/lib/commands/create/Creator.js

@@ -15,6 +15,12 @@ module.exports = class Creator {
     this.args = opts.args;
     this.cmd = opts.cmd;
     this.index = 0;
+
+    if (this.cmd.devcontainerComplete) {
+      this.data.devcontainerComplete = JSON.parse(
+        Buffer.from(this.cmd.devcontainerComplete, 'base64').toString(),
+      );
+    }
   }
 
   schedule(priority, action) {

package/lib/commands/create/creators/app/chisel-starter-theme/composer.json

@@ -4,6 +4,9 @@
       "composer/installers": true,
       "php-http/discovery": true,
       "dealerdirect/phpcodesniffer-composer-installer": true
+    },
+    "platform": {
+      "php": "7.4"
     }
   },
   "require-dev": {

package/lib/commands/create/creators/app/chisel-starter-theme/package.chisel-tpl.json

@@ -6,8 +6,12 @@
   "author": "<%= app.author %>",
   "description": "Chisel WP",
   "scripts": {
+    "devcontainer": "npx @devcontainers/cli@0.71",
+    "devcontainer:up": "npm run --silent devcontainer -- up --workspace-folder ../../..",
+    "devcontainer:enter": "../../../.devcontainer/exec bash",
+    "devcontainer:start": "../../../.devcontainer/exec npm run --silent start",
     "start": "chisel-scripts start",
-    "dev": "npm run start",
+    "dev": "npm run --silent start",
     "build": "chisel-scripts build && npm run lint && npm run phpcs && npm run twigcs",
     "build-scripts": "chisel-scripts build",
     "add-page": "chisel-scripts add-page",

package/lib/commands/create/creators/app/index.js

@@ -1,6 +1,5 @@
 const path = require('path');
 const { startCase } = require('lodash');
-const speakingUrl = require('speakingurl');
 const {
   execa,
   run,
@@ -8,6 +7,8 @@ const {
   installDependencies,
 } = require('chisel-shared-utils');
 const packagesVersions = require('../../packages-versions');
+const { prepareName, getWordpressVersion } = require('../utils');
+const fs = require('fs/promises');
 
 module.exports = async (api) => {
   let app;
@@ -20,27 +21,40 @@ module.exports = async (api) => {
       timeout: 2000,
     }).catch(() => ({}));
 
-    app = await api.prompt([
-      {
-        name: 'name',
-        message: 'Please enter the project name:',
-        default: () => startCase(path.basename(process.cwd())),
-        validate: (val) => Boolean(val),
-      },
-      {
-        name: 'author',
-        message: 'Please enter author name:',
-        default: async () => (await userName).stdout,
-      },
-    ]);
+    const { devcontainerComplete } = api.creator.data;
+
+    app = await api.prompt(
+      [
+        !devcontainerComplete && {
+          name: 'name',
+          message: 'Please enter the project name:',
+          default: () => startCase(path.basename(process.cwd())),
+          validate: (val) => Boolean(val),
+        },
+        !devcontainerComplete && {
+          type: 'number',
+          name: 'devcontainerPort',
+          message: 'Enter the devcontainer port:',
+          default: 3000,
+          validate: (val) => Boolean(val),
+        },
+        {
+          name: 'author',
+          message: 'Please enter author name:',
+          default: async () => (await userName).stdout,
+          validate: (val) => Boolean(val),
+        },
+      ].filter(Boolean),
+    );
 
-    app.nameSlug = speakingUrl(app.name)
-      .replace(/(?<=[^\d])-(\d+)/g, (_, d) => d)
-      .replace(/[^a-z0-9-]/g, '-');
-    // app.nameCamel = camelCase(app.nameSlug);
     app.hasJQuery = false;
-    app.themeName = `${app.nameSlug}-chisel`;
-    app.themePath = `wp-content/themes/${app.themeName}`;
+    app.wordpressVersion = await getWordpressVersion();
+
+    if (devcontainerComplete) {
+      Object.assign(app, devcontainerComplete);
+    }
+
+    Object.assign(app, prepareName(app.name));
 
     await api.creator.loadCreator('wp');
   });
@@ -86,6 +100,25 @@ module.exports = async (api) => {
       { cwd: api.resolve(app.themePath) },
     );
 
+    await api.modifyFile(
+      '.devcontainer/devcontainer.json',
+      async (body) => {
+        const extensionsText = await fs.readFile(
+          api.resolve(app.themePath, '.vscode/extensions.json'),
+          'utf8',
+        );
+        const { recommendations } = JSON.parse(extensionsText);
+
+        return body.replace(
+          / +\/\/ EXTENSIONS-FROM-VSCODE-EXTENSIONS-FILE/,
+          recommendations
+            .map((ext) => `        ${JSON.stringify(ext)}`)
+            .join(',\n'),
+        );
+      },
+      { isJson: false },
+    );
+
     if (api.creator.cmd.link) {
       const availablePackages = Object.keys(packagesVersions);
       const installedAndAvailable = installedPackages.filter((pkg) =>

package/lib/commands/create/creators/app/template/.devcontainer/Dockerfile

@@ -0,0 +1,21 @@
+ARG BASE_IMAGE_VERSION
+FROM wordpress:${BASE_IMAGE_VERSION}
+
+ARG CHISEL_PORT=3000
+
+# Install MariaDB Client
+RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+    && apt-get -y install --no-install-recommends mariadb-client
+
+# Install WP CLI
+RUN curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar \
+ && chmod +x wp-cli.phar \
+ && mv wp-cli.phar /usr/local/bin/wp
+
+# Update port
+RUN sed -i 's/80/${CHISEL_PORT}/' /etc/apache2/ports.conf
+
+# Use wordpress user to run apache
+ENV APACHE_RUN_USER wordpress
+ENV APACHE_RUN_GROUP wordpress
+ENV CHISEL_PORT=${CHISEL_PORT}

package/lib/commands/create/creators/app/template/.devcontainer/compose.chisel-tpl

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+docker compose -p <%= app.nameSlug %>_devcontainer <%= '"${@}"' %>

package/lib/commands/create/creators/app/template/.devcontainer/devcontainer.json.chisel-tpl

@@ -0,0 +1,31 @@
+// For format details, see https://aka.ms/devcontainer.json.
+{
+  "name": "WordPress Development",
+  "dockerComposeFile": "docker-compose.yml",
+  "service": "app",
+  // when changing workspace name or theme path, also update the docker-compose.yml file
+  "workspaceFolder": "/workspaces/<%= app.nameSlug %>/<%= app.themePath %>",
+
+  // Features to add to the dev container. More info: https://containers.dev/features.
+  "features": {
+    "ghcr.io/devcontainers/features/common-utils:2": {
+      "username": "wordpress"
+    },
+    "ghcr.io/devcontainers/features/node:1": {
+      "version": "20"
+    },
+    "ghcr.io/devcontainers/features/git:1": {}
+  },
+
+  "postCreateCommand": "bash ../../../.devcontainer/post-create-command.sh",
+
+  "remoteUser": "wordpress",
+
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        // EXTENSIONS-FROM-VSCODE-EXTENSIONS-FILE
+      ]
+    }
+  }
+}

package/lib/commands/create/creators/app/template/.devcontainer/docker-compose.yml.chisel-tpl

@@ -0,0 +1,42 @@
+version: '3.8'
+
+name: <%= app.nameSlug %>_devcontainer
+
+services:
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        # Keep this in sync with installed WordPress version and
+        # PHP version used in production
+        # See https://hub.docker.com/_/wordpress for available versions
+        BASE_IMAGE_VERSION: <%= app.wordpressVersion %>-php8.3
+        CHISEL_PORT: <%= app.devcontainerPort %>
+
+    ports:
+      - '127.0.0.1:<%= app.devcontainerPort %>:<%= app.devcontainerPort %>' # should be CHISEL_PORT
+      - '127.0.0.1:<%= app.devcontainerPort + 1 %>:<%= app.devcontainerPort + 1 %>' # should be CHISEL_PORT + 1
+
+    volumes:
+      - ..:/workspaces/<%= app.nameSlug %>
+      - ..:/var/www/html
+      - node_modules:/workspaces/<%= app.nameSlug %>/wp-content/themes/<%= app.themeName %>/node_modules
+      - vendor:/workspaces/<%= app.nameSlug %>/wp-content/themes/<%= app.themeName %>/vendor
+      - vendor:/var/www/html/wp-content/themes/<%= app.themeName %>/vendor
+
+  db:
+    image: mariadb:11.4
+    restart: unless-stopped
+    volumes:
+      - db:/var/lib/mysql
+    environment:
+      MYSQL_ROOT_PASSWORD: mariadb
+      MYSQL_DATABASE: mariadb
+      MYSQL_USER: mariadb
+      MYSQL_PASSWORD: mariadb
+
+volumes:
+  db:
+  vendor:
+  node_modules:

package/lib/commands/create/creators/app/template/.devcontainer/exec

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+
+if [ -f /.dockerenv ]; then
+  exec "${@}"
+else
+  this_file_dir=$(dirname "${BASH_SOURCE[0]}")
+  npm run --silent devcontainer -- exec --workspace-folder "${this_file_dir}/.." "${@}"
+fi

package/lib/commands/create/creators/app/template/.devcontainer/post-create-command.sh.chisel-tpl

@@ -0,0 +1,23 @@
+#!/bin/bash
+
+set -eux
+
+sudo chown "$USER:$USER" node_modules vendor
+
+pushd ../../..
+
+sudo chown "$USER:$USER" . index.php wp-config.php
+if [ -d .git ] ; then sudo chown "$USER:$USER" .git ; fi
+chmod +x .devcontainer/compose .devcontainer/exec
+<% if (app.devcontainer) { %>
+{
+    npx --yes generator-chisel@<%= chiselVersion %> --devcontainer-complete <%= app.responsesAsBase64 %>
+    exit
+}
+<% } %>
+popd
+<% if (!app.devcontainer) { %>
+npm install
+npm run wp-config -- --devcontainer
+npm run composer install
+npm run build<% } %>

package/lib/commands/create/creators/devcontainer.js

@@ -0,0 +1,62 @@
+const { prepareName, getWordpressVersion } = require('./utils');
+const fsPromises = require('fs/promises');
+
+module.exports = async (api) => {
+  let app;
+
+  api.schedule(api.PRIORITIES.PROMPT, async () => {
+    app = await api.prompt([
+      {
+        name: 'name',
+        message: 'Please enter the project name:',
+        validate: (val) => Boolean(val),
+      },
+      {
+        type: 'number',
+        name: 'devcontainerPort',
+        message: 'Enter the devcontainer port:',
+        default: 3000,
+        validate: (val) => Boolean(val),
+      },
+    ]);
+
+    const responsesAsBase64 = Buffer.from(JSON.stringify(app)).toString(
+      'base64'
+    );
+
+    Object.assign(app, prepareName(app.name));
+    app.devcontainer = true;
+    app.responsesAsBase64 = responsesAsBase64;
+    app.wordpressVersion = await getWordpressVersion();
+    api.creator.data.app = app;
+  });
+
+  api.schedule(api.PRIORITIES.COPY, async () => {
+    await api.copy({
+      from: '../app/template/.devcontainer',
+      to: '.devcontainer',
+    });
+
+    await fsPromises.mkdir(api.creator.data.app.themePath, {
+      recursive: true,
+    });
+
+    await fsPromises.writeFile('index.php', '');
+    await fsPromises.writeFile('wp-config.php', '');
+  });
+
+  api.schedule(api.PRIORITIES.END_MESSAGE, async () => {
+    console.log(`
+Devcontainer definition is ready.
+
+To continue creating the project do one of the following:
+
+1. If you are using VS Code, open the folder in VS Code and run
+   "Dev Containers: Reopen in Container" from the command palette.
+
+2. Otherwise you have to use Dev Containers CLI to start the container:
+   > npx -y @devcontainers/cli@latest up --workspace-folder .
+   (dot at the end is part of the command)
+`);
+  });
+};

package/lib/commands/create/creators/utils.js

@@ -0,0 +1,28 @@
+module.exports.prepareName = (name) => {
+  const speakingUrl = require('speakingurl');
+  const nameSlug = speakingUrl(name)
+    .replace(/(?<=[^\d])-(\d+)/g, (_, d) => d)
+    .replace(/[^a-z0-9-]/g, '-');
+
+  const themeName = `${nameSlug}-chisel`;
+
+  return {
+    nameSlug,
+    themeName,
+    themePath: `wp-content/themes/${themeName}`,
+  };
+};
+
+module.exports.getWordpressVersion = async () => {
+  const response = await fetch(
+    'https://api.wordpress.org/core/version-check/1.7/',
+  );
+
+  if (!response.ok) {
+    throw new Error('Failed to fetch WordPress version');
+  }
+
+  const data = await response.json();
+
+  return data.offers.find((offer) => offer.response === 'upgrade').version;
+};

package/lib/commands/create/creators/wp/index.js

@@ -26,16 +26,31 @@ module.exports = (api) => {
     const userName = gitConfig('user.name');
     const userEmail = gitConfig('user.email');
 
+    let url = `http://${api.creator.data.app.nameSlug}.test/`;
+    const { devcontainerPort } = api.creator.data.app;
+
+    if (process.env.CODESPACES === 'true') {
+      const {
+        CODESPACE_NAME,
+        GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN,
+      } = process.env;
+      url = `https://${CODESPACE_NAME}-${devcontainerPort}.${GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN}/`;
+    } else if (await fs.exists('/.dockerenv')) {
+      url = `http://127.0.0.1:${devcontainerPort}/`;
+    }
+
     await api.prompt([
       {
         name: 'title',
         message: 'Enter title for the new site:',
         default: api.creator.data.app.name,
+        validate: (val) => Boolean(val),
       },
       {
         name: 'url',
         message: 'Enter URL:',
-        default: `http://${api.creator.data.app.nameSlug}.test/`,
+        default: url,
+        validate: (val) => Boolean(val),
       },
       {
         name: 'adminUser',
@@ -47,6 +62,7 @@ module.exports = (api) => {
             nameParts[0].toLowerCase() + Math.floor(1000 + Math.random() * 9000)
           );
         },
+        validate: (val) => Boolean(val),
       },
       {
         name: 'adminPassword',
@@ -88,7 +104,6 @@ module.exports = (api) => {
       `${api.creator.data.app.themePath}/package.json`,
       (body) => {
         body.chisel = {
-          url: api.creator.data.wp.url,
           tablePrefix,
         };
       },
@@ -104,7 +119,13 @@ module.exports = (api) => {
   api.schedule(api.PRIORITIES.WP_CONFIG, async () => {
     if (api.creator.cmd.skipWpConfig) return;
 
-    await runLocal(['chisel-scripts', 'wp-config'], {
+    const extraArgs = [];
+
+    if (api.creator.data.devcontainerComplete) {
+      extraArgs.push('--devcontainer');
+    }
+
+    await runLocal(['chisel-scripts', 'wp-config', ...extraArgs], {
       cwd: api.resolve(themePath),
       execaOpts: { stdio: 'inherit' },
     });

package/lib/commands/create/creators/wp-plugins/plugins.json

@@ -1,6 +1,6 @@
 {
   "plugins": {
-    "WP Premium: Gravity Forms": "https://github.com/wp-premium/gravityforms/archive/master.zip",
+    "WP Premium: Gravity Forms": "https://github.com/pronamic/gravityforms/archive/master.zip",
     "SVG Support": "svg-support",
     "Yoast SEO": "wordpress-seo",
     "Yoast SEO ACF": "acf-content-analysis-for-yoast-seo"

package/lib/commands/create/index.js

@@ -3,8 +3,15 @@ const Creator = require('./Creator');
 const createCommand = async ({ args, cmd }) => {
   const creator = new Creator(undefined, { args, cmd });
 
-  await creator.loadCreator('init');
-  await creator.loadCreator('app');
+  if (cmd.devcontainer) {
+    await creator.loadCreator('devcontainer');
+  } else {
+    if (!cmd.devcontainerComplete) {
+      await creator.loadCreator('init');
+    }
+
+    await creator.loadCreator('app');
+  }
 
   return creator.run();
 };

package/lib/commands/create/packages-versions.js

@@ -1,5 +1,5 @@
 module.exports = {
-  'chisel-scripts': '2.0.0-alpha.3.1',
-  'chisel-shared-utils': '2.0.0-alpha.0',
-  'generator-chisel': '2.0.0-alpha.10',
+  'chisel-scripts': '2.0.0-alpha.4',
+  'chisel-shared-utils': '2.0.0-alpha.1',
+  'generator-chisel': '2.0.0-alpha.12',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-chisel",
-  "version": "2.0.0-alpha.10",
+  "version": "2.0.0-alpha.12",
   "description": "A generator for scaffolding front-end and WordPress projects",
   "bin": {
     "chisel": "bin/chisel.js"
@@ -26,7 +26,7 @@
     "babel"
   ],
   "dependencies": {
-    "chisel-shared-utils": "^2.0.0-alpha.0",
+    "chisel-shared-utils": "^2.0.0-alpha.1",
     "commander": "^5.1.0",
     "execa": "^4.0.2",
     "fs-extra": "^9.0.1",
@@ -37,5 +37,5 @@
     "tinyqueue": "^2.0.3",
     "update-notifier": "^4.1.0"
   },
-  "gitHead": "92466fd4d8e4a29e588345c304f5040d428b567a"
+  "gitHead": "1935bf86091473b23e1d44fefab87a59c37d80fe"
 }