WordPress / playground-tools

GNU General Public License v2.0
127 stars 38 forks source link

Playground Block: Support JSX source transpilation #280

Closed adamziel closed 1 month ago

adamziel commented 1 month ago

Adds a "Transpile JSX" attribute to the Playground block that enables block-building examples using JSX syntax. This enables reusing existing JSX code examples in interactive tutorials on building WordPress blocks.

On the technical end, this PR uses esbuild-wasm to run the transpilation in the browser.

Testing instructions

  1. Insert the Playground block
  2. Recreate this code example in the code editor: https://github.com/WordPress/gutenberg-examples/tree/trunk/blocks-jsx/01-basic-esnext
  3. Apply the Blueprint below
  4. Confirm the block displays a page with a "Hello world example" block
{
  "landingPage": "/?page_id=1",
  "phpExtensionBundles": [
    "kitchen-sink"
  ],
  "preferredVersions": {
    "php": "7.4",
    "wp": "5.9"
  },
  "login": true,
  "steps": [
    {
      "step": "unzip",
      "extractToPath": "/tmp",
      "zipFile": {
        "resource": "url",
        "url": "https://github-proxy.com/proxy/?repo=wordpress/playground-tools&pr=133&directory=packages/wordpress-es-modules-plugin/src"
      }
    },
    {
      "step": "mv",
      "fromPath": "/tmp/packages/wordpress-es-modules-plugin/src",
      "toPath": "/wordpress/wp-content/plugins/esm"
    },
    {
      "step": "activatePlugin",
      "pluginPath": "esm/index.php"
    },
    {
      "step": "resetData"
    },
    {
      "step": "runPHP",
      "code": "<?php\nrequire '/wordpress/wp-load.php';\n$page_id = wp_insert_post( [\n\t'post_type'    => 'page',\n\t'post_status'  => 'publish',\n\t'post_title'   => 'Hello World example',\n\t'post_content' => '<!-- wp:gutenberg-examples/example-01-basic-esnext --><div style=\"background-color:#900;color:#fff;padding:20px\" class=\"wp-block-gutenberg-examples-example-01-basic-esnext\">Hello World, step 1 (from the frontend).</div><!-- /wp:gutenberg-examples/example-01-basic-esnext -->'\n] );\n"
    }
  ]
}