chore(docs): testing tutorials with playwright

.devcontainer/sandbox_only/devcontainer.json

@@ -0,0 +1,18 @@
+{
+  "name": "Sandbox Only",
+  "image": "node:lts-bookworm",
+  "features": {
+    "ghcr.io/devcontainers/features/docker-in-docker:2": {}
+  },
+  "onCreateCommand": "cp -R /root/workspace /root/scripts && rm -rf /root/workspace/* && sh /root/scripts/onCreateCommand.sh sandbox_only",
+  "postAttachCommand": "sh /root/scripts/postAttachCommand.sh",
+  "customizations": {
+    "vscode": {
+      "settings": {},
+      "extensions": ["noir-lang.vscode-noir"]
+    }
+  },
+  "workspaceMount": "source=${localWorkspaceFolder}/.devcontainer/scripts,target=/root/workspace,type=bind",
+  "workspaceFolder": "/root/workspace",
+  "forwardPorts": [8080]
+}

.devcontainer/scripts/onCreateCommand.sh

@@ -13,14 +13,17 @@ fi
 if ! grep -q "alias sandbox" ~/.bashrc; then
     echo "alias sandbox=\"npx aztec-app sandbox\"" >> ~/.bashrc
 fi
+corepack enable
 
-source ~/.bashrc
-yes | npx aztec-app -t $TYPE -n $NAME -s
-mv $NAME/* $NAME/.* .
-rm -rf $NAME
+if [ "$TYPE" != "sandbox_only" ]; then
+    source ~/.bashrc
+    yes | npx create-aztec-app -t $TYPE -n $NAME -s
+    mv $NAME/* $NAME/.* .
+    rm -rf $NAME
+
+    yarn
 
-yarn
-
-npx -y playwright install --with-deps
-yarn add @aztec/builder
-yarn prep
+    npx -y playwright install --with-deps
+    yarn add @aztec/builder
+    yarn prep
+fi

.devcontainer/scripts/postAttachCommand.sh

@@ -1,7 +1,6 @@
 #!/usr/bin/env bash
-TYPE=$1
-NAME=$2
 
+apt update
 apt install gh
 gh codespace ports visibility 8080:public -c $CODESPACE_NAME
 

.github/workflows/ci.yml

@@ -516,6 +516,21 @@ jobs:
         timeout-minutes: 40
         run: earthly-ci --no-output ./docs/+deploy-preview --ENV=staging --PR=${{ github.event.number }} --AZTEC_BOT_COMMENTER_GITHUB_TOKEN=${{ secrets.AZTEC_BOT_GITHUB_TOKEN }} --NETLIFY_AUTH_TOKEN=${{ secrets.NETLIFY_AUTH_TOKEN }} --NETLIFY_SITE_ID=${{ secrets.NETLIFY_SITE_ID }}
 
+  docs-test:
+    needs: [setup, changes]
+    runs-on: ${{ github.event.pull_request.user.login || github.actor }}-x86
+    if: ${{ needs.changes.outputs.non-barretenberg-cpp == 'true' }}
+    steps:
+      - uses: actions/checkout@v4
+        with: { ref: "${{ env.GIT_COMMIT }}" }
+      - uses: ./.github/ci-setup-action
+        with:
+          concurrency_key: docs-test-x86
+      - name: "Docs Test"
+        if: github.event.number
+        timeout-minutes: 40
+        run: earthly-ci --no-output ./docs/+test
+
   bb-bench:
     runs-on: ubuntu-20.04
     needs: [setup, changes]
@@ -663,6 +678,7 @@ jobs:
       - prover-client-test
       - l1-contracts-test
       - docs-preview
+      - docs-test
       # - bb-bench # non-blocking
       - boxes
       - boxes-test

aztec-up/bin/.aztec-run

@@ -104,12 +104,19 @@ if [[ -z "${SKIP_PORT_ASSIGNMENT:-}" ]]; then
   port_assignment="-p $AZTEC_PORT:$AZTEC_PORT"
 fi
 
+
+if [ "$NON_INTERACTIVE" = "true" ]; then
+  TI=""
+else
+  TI="-ti"
+fi
+
 docker run \
-  -ti \
   --rm \
   --workdir "$PWD" \
   -v $HOME:$HOME -v cache:/cache \
   $port_assignment \
+  $TI \
   ${DOCKER_ENV:-} \
   ${DOCKER_HOST_BINDS:-} \
   ${DOCKER_USER:-} \

boxes/bin.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { Command, Option } from "commander";
+import { Command } from "commander";
 const program = new Command();
 import { chooseProject } from "./scripts/steps/chooseBox.js";
 import {
@@ -18,6 +18,7 @@ import {
   log,
   sandboxRunStep,
 } from "./scripts/steps/sandbox/run.js";
+import { init } from "./scripts/init.js";
 
 const getLatestStable = async () => {
   const { data } = await axios.get(
@@ -26,71 +27,76 @@ const getLatestStable = async () => {
   return data[0].tag_name.split("-v")[1];
 };
 
-const init = async ({ debug, github_token, version }) => {
-  const axiosOpts = {
-    timeout: 5000,
-    headers: github_token ? { Authorization: `token ${github_token}` } : {},
-  };
-
-  const prettyOpts = {
-    sync: true,
-    colorize: true,
-    include: debug ? "time" : "",
-    customLevels: "success:80",
-    customColors: "success:bgGreen",
-  };
-
-  const prettyStream = pretty(prettyOpts);
-  const logger = pino(
-    {
-      customLevels: {
-        success: 80,
+program
+  .option("-v, --version <version>", "a version number or master tag")
+  .option("-d, --debug", "output extra debugging")
+  .option("-gh, --github_token <github_token>", "a github token")
+  .hook("preSubcommand", async (thisCommand) => {
+    const { debug, github_token, version } = thisCommand.opts();
+    const axiosOpts = {
+      timeout: 5000,
+      headers: github_token ? { Authorization: `token ${github_token}` } : {},
+    };
+
+    const prettyOpts = {
+      sync: true,
+      colorize: true,
+      include: debug ? "time" : "",
+      customLevels: "success:80",
+      customColors: "success:bgGreen",
+    };
+
+    const prettyStream = pretty(prettyOpts);
+    const logger = pino(
+      {
+        customLevels: {
+          success: 80,
+        },
+        level: debug ? "debug" : "info",
       },
-      level: debug ? "debug" : "info",
-    },
-    prettyStream,
-  );
-
-  global.debug = (msg) => logger.debug(msg);
-  global.info = (msg) => logger.info(msg);
-  global.success = (msg) => logger.success(msg);
-
-  global.warn = (msg) => logger.warn(msg);
-  global.error = (msg) => logger.error(msg);
-
-  global.github = async ({ path, raw = false }) => {
-    try {
-      const url = raw
-        ? `https://raw.githubusercontent.com/${AZTEC_REPO}/${path}`
-        : `https://api.github.com/repos/${AZTEC_REPO}/contents/${path}`;
-      const { data } = await axios.get(url, axiosOpts);
-      global.debug(data);
-      return data;
-    } catch (e) {
-      global.error(e);
-    }
-  };
-
-  // versioning is confusing here because "latest" and "master" point to the same thing at times
-  // so let's clarify a bit:
-  //
-  // if the user has set a version (ex. "master" or "0.23.0"), use that
-  // otherwise use the stable release (ex. 0.24.0)
-  global.latestStable = await getLatestStable();
-  global.version = version || global.latestStable;
-
-  // if the user has set a semver version (matches the regex), fetch that tag (i.e. aztec-packages-v0.23.0)
-  // otherwise use the version as the tag
-  global.tag = global.version.match(/^\d+\.\d+\.\d+$/)
-    ? `aztec-packages-v${global.version}`
-    : global.version;
-
-  global.debug(`Version: ${global.version}`);
-  global.debug(`Tag: ${global.tag}`);
-  global.debug(`LatestStable: ${global.latestStable}`);
-
-  global.spinner = ora({ color: "blue" });
-};
+      prettyStream,
+    );
+
+    global.debug = (msg) => logger.debug(msg);
+    global.info = (msg) => logger.info(msg);
+    global.success = (msg) => logger.success(msg);
+
+    global.warn = (msg) => logger.warn(msg);
+    global.error = (msg) => logger.error(msg);
+
+    global.github = async ({ path, raw = false }) => {
+      try {
+        const url = raw
+          ? `https://raw.githubusercontent.com/${AZTEC_REPO}/${path}`
+          : `https://api.github.com/repos/${AZTEC_REPO}/contents/${path}`;
+        const { data } = await axios.get(url, axiosOpts);
+        global.debug(data);
+        return data;
+      } catch (e) {
+        global.error(e);
+      }
+    };
+
+    // versioning is confusing here because "latest" and "master" point to the same thing at times
+    // so let's clarify a bit:
+    //
+    // if the user has set a version (ex. "master" or "0.23.0"), use that
+    // otherwise use the stable release (ex. 0.24.0)
+    global.latestStable = await getLatestStable();
+    global.version = version || global.latestStable;
+
+    // if the user has set a semver version (matches the regex), fetch that tag (i.e. aztec-packages-v0.23.0)
+    // otherwise use the version as the tag
+    global.tag = global.version.match(/^\d+\.\d+\.\d+$/)
+      ? `aztec-packages-v${global.version}`
+      : global.version;
+
+    global.debug(`Version: ${global.version}`);
+    global.debug(`Tag: ${global.tag}`);
+    global.debug(`LatestStable: ${global.latestStable}`);
+
+    global.spinner = ora({ color: "blue" });
+  });
 
 const sandbox = program.command("sandbox");
 sandbox.description("Manage the Aztec Sandbox");
@@ -100,12 +106,17 @@ sandbox.command("stop").action(stop);
 sandbox.command("install").action(install);
 sandbox.command("update").action(update);
 
+program
+  .command("init")
+  .description("Bootstrap an empty Aztec contract")
+  .argument("[folder]", "optional folder to init your project into", ".")
+  .action(async (folder) => {
+    await init(folder);
+  });
+
 program
   .command("new", { isDefault: true })
   .description("An Aztec project with a built-in development network")
-  .option("-d, --debug", "output extra debugging")
-  .option("-gh, --github_token <github_token>", "a github token")
-  .option("-v, --version <version>", "a version number or master tag")
   .option(
     "-s, --skip-sandbox",
     "skip sandbox installation and run after cloning",
@@ -128,8 +139,7 @@ program
     }
 
     const { projectType, projectName, skipSandbox } = options;
-    // SETUP: Initialize global variables
-    await init(options);
+
     // // STEP 1: Choose the boilerplate
     await chooseProject({ projectType, projectName });
 

boxes/init/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

boxes/init/Nargo.toml

@@ -0,0 +1,6 @@
+[package]
+name = "init"
+type = "contract"
+
+[dependencies]
+aztec = { path = "../../noir-projects/aztec-nr/aztec" }

boxes/init/package.json

@@ -0,0 +1,4 @@
+{
+    "packageManager": "yarn@4.2.2",
+    "type": "module"
+}

boxes/init/src/main.nr

@@ -0,0 +1,6 @@
+
+contract Main {
+    #[aztec(private)]
+    #[aztec(initializer)]
+    fn constructor() { }
+}

boxes/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "create-aztec-app",
+  "name": "aztec-app",
   "packageManager": "yarn@4.0.2",
-  "version": "0.4.4",
+  "version": "0.4.9",
   "type": "module",
   "scripts": {
     "compile": "yarn workspaces foreach -A -v run compile",

boxes/scripts/init.js

@@ -0,0 +1,19 @@
+import { replacePaths } from "./utils.js";
+import { AZTEC_REPO } from "./config.js";
+import tiged from "tiged";
+
+export async function init(folder) {
+  const emitter = tiged(`${AZTEC_REPO}/boxes/init${tag && `#${tag}`}`, {
+    verbose: true,
+  });
+  emitter.on("info", ({ message }) => debug(message));
+  emitter.on("warn", ({ message }) => error(message));
+  await emitter.clone(`${folder}`);
+
+  await replacePaths({
+    rootDir: `${folder}`,
+    tag,
+    version,
+    prefix: "",
+  });
+}

boxes/scripts/utils.js

@@ -199,7 +199,7 @@ export async function replacePaths({ rootDir, prefix = "" }) {
           replaces.push(
             new Promise(async (resolve, reject) => {
               let content = parse(await fs.readFile(filePath, "utf8"));
-
+              if (!content.dependencies) return;
               Object.keys(content.dependencies).forEach((dep) => {
                 const directory = content.dependencies[dep].path.replace(
                   /^(..\/)+/,
@@ -224,6 +224,7 @@ export async function replacePaths({ rootDir, prefix = "" }) {
           replaces.push(
             new Promise(async (resolve, reject) => {
               let content = JSON.parse(await fs.readFile(filePath, "utf8"));
+              if (!content.dependencies) return;
               Object.keys(content.dependencies)
                 .filter((deps) => deps.match("@aztec"))
                 // "master" actually means "latest" for the npm release