Migrate to Yarn workspaces (#146)

This PR splits the repository into five node packages that are also yarn workspaces:

- php-cli
- php-wasm
- typescript-reference-doc-generator
- wordpress-playground
- wordpress-plugin-ide

This effectively undoes [Use folders instead of separate npm packages](#70), so you may ask "why bother?"

With this PR:

* The build process is straightforward. There's no `gulp` and there's no mountain of custom logic in `esbuild.js`. Files are moved around the repo using a simple `copy` plugin or an `import` statement. There's no custom cache busting logic – it's handled by the build tools instead
* `php-wasm` is now reusable and can be published in npm. This means it can be easily reused outside of WordPress Playground.
* Each package has its own build process that caters to its specific needs. For example, `php-cli` outputs a node.js script. Web workers can now be bundled as `iife` (which is the only way to use them in firefox) while other assets are es modules.
* There are less tasks in general. For example, TypeScript types are handled by rollup in a few packages.

At the same time, none of the [original downsides of using packages ](#70) are present:

* There's no global build pipeline. Every package outputs a complete build artifact that can be directly imported in case of libs, or used in the browser in case of the Playground website.
* Yarn workspaces ensure the tasks are executed in the correct order
* tsconfig.json and package.json can mostly be copied, there's no `api-documenter.json` at all.

.eslintrc.js

@@ -16,15 +16,18 @@ module.exports = {
 	},
 	extends: [
 		'eslint:recommended',
-		'plugin:@wordpress/eslint-plugin/recommended',
+		// 'plugin:@wordpress/eslint-plugin/recommended',
 		'plugin:react/recommended',
+		'plugin:@typescript-eslint/recommended',
 	],
-	overrides: [],
+	// overrides: [],
+	parser: '@typescript-eslint/parser',
 	parserOptions: {
 		ecmaVersion: 'latest',
 		sourceType: 'module',
 	},
-	plugins: ['react'],
+	root: true,
+	plugins: ['react', '@typescript-eslint'],
 	rules: {
 		'no-inner-declarations': 0,
 		'no-use-before-define': 'off',
@@ -36,5 +39,7 @@ module.exports = {
 		'no-nested-ternary': 0,
 		'jsx-a11y/click-events-have-key-events': 0,
 		'jsx-a11y/no-static-element-interactions': 0,
+		'@typescript-eslint/ban-ts-comment': 0,
+		'@typescript-eslint/no-non-null-assertion': 0,
 	},
 };

.gitignore

@@ -1,15 +1,22 @@
 .DS_Store
 .idea
 .local
+.vitepress
+.vite
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+.rollup.cache
 node_modules
+/live-code-example
+/testwp
 package-lock.json
-build/*
-build-cli/*
-build-api
-build-wp
-build-php
-build-types
-build-scripts
+packages/*/build
+testwp
 !build/wp-admin
 !build/wp-content
 !build/wp-includes
@@ -18,6 +25,7 @@ build-scripts
 !build/wp.data
 !build/wp.js
 *.tsbuildinfo
+*.d.ts
 tsdoc-metadata.json
 var
 dist.zip

.yarnrc.yml

@@ -0,0 +1,7 @@
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: "@yarnpkg/plugin-workspace-tools"
+
+yarnPath: .yarn/releases/yarn-3.4.1.cjs

README.md

@@ -27,10 +27,16 @@ You can embed WordPress Playground in your project via an `<iframe>` – find ou
 You also can run WordPress Playground locally as follows:
 
 ```bash
+# Install Yarn if you don't have it:
+npm install -g yarn
+
+# Now you're ready to run Playground:
 git clone https://github.com/WordPress/wordpress-playground
 cd wordpress-playground
-npm install
-npm run dev
+yarn install
+# An initial build is needed at the moment:
+yarn run build
+yarn run dev
 ```
 
 A browser should open and take you to your very own client-side WordPress at [http://127.0.0.1:8777/wordpress.html](http://127.0.0.1:8777/wordpress.html)!

bin/build-api-docs.sh

@@ -0,0 +1,6 @@
+#!/bin/bash
+
+node packages/typescript-reference-doc-generator/build/tsdoc-to-api-markdown.js \
+	-e packages/php-wasm/build/web/types/index.d.ts \
+       packages/wordpress-plugin-ide/build/types/index.d.ts \
+	-o docs/api