Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blueprints: Transition from a TypeScript library to a PHP library #1025

Open
adamziel opened this issue Feb 11, 2024 · 1 comment
Open

Blueprints: Transition from a TypeScript library to a PHP library #1025

adamziel opened this issue Feb 11, 2024 · 1 comment

Comments

@adamziel
Copy link
Collaborator

adamziel commented Feb 11, 2024

Let’s pivot Blueprints from a TypeScript library to a PHP library. I started the explorations in this repo:

https://github.com/WordPress/blueprints/

Motivation

PHP Blueprints would unite all the Blueprint runtime environments, use-cases, and developers. Single library and documentation unlocking multiple ecosystems.

  • PHP would run the logic in a write once–run everywhere fashion.
  • Playground would be a thin, interchangeable glue layer using WASM to run WordPress and PHP in the browser, Node.js, VS Code, iOS, Android, desktop, etc.

PHP-powered Blueprints would:

  • Force us to write universal and interoperable code
  • Empower WordPress developers who are familiar with PHP
  • Push Playground and PHP.wasm to feature parity with native PHP
  • Remove Playground internals and asynchronous code from the equation
  • Remove the PHP/TypeScript dualism. We’ll achieve more with less code
  • Remove the temptation to duplicate implementations in different JS tools, PHP, and WordPress plugins

Blueprints would become the lingua franca of WordPress. All the runtimes would rely on the same orchestration library:

  • Independent CLI binary
  • WP-now command
  • VS Code extension
  • The web browser
  • WordPress core
  • WP-CLI plugin
  • Mobile apps

Here's a few specific use-cases I have in mind

  • Template sites
  • Site export/import
  • The w.org community space
  • Prototypes of the Site Transfer protocol
  • “Quick development setup”, e.g. I have some local files and I run wp start

Technical steps to get there

Here's the big picture of what we'll need to do:

  1. Disregard WASM and prototype a PHP library that only works well in native PHP. Don't overuse third party libraries, but rely on small components like Symfony EventDispatcher when applicable.
  2. Run that library in PHP.WASM, identify all the ways it fails.
  3. Bundle the library as phar, explore using it in WordPress, WordPress Playground plugin, wp-now, wp-cli etc.
  4. Outline a plan to make it work with the least amount of work. Use workarounds, adjust the PHP library, adjust PHP.wasm implementation, and build polyfills as needed.
  5. Outline a plan to replace all the workarounds with stable, long-term, easy-to-maintain solutions.
  6. Bring the phar library into WordPress Playground core, make the @wp-playground/blueprints library a thin wrapper that delegates all the tasks to the PHP implementation

Related and known PHP.wasm limitations

Other notes

  • WordPress Playground plugin ships a PHP implements of site export and import. This code could be moved to the PHP Blueprint library and replace the TypeScript export/import implementation.
  • The PHP library should be extensible.
  • We could generate the Blueprint JSON schema from PHP types and interfaces in the same way as we do that today using the TypeScript types.
  • A future version of the Blueprint library should know how to extract only a part of a remote ZIP file without downloading all of it.
  • wp-cli could handle complex steps like setWpConfigConstant (wp config set), enableMultisite (wp core multisite-convert), runWpInstallationWizard (wp core install). Same for wp-now features like downloading and installing WordPress core or the SQLite integration plugin.

cc @bgrgicak @dmsnell @mtias @youknowriad @eliot-akira @sejas @danielbachhuber

@adamziel
Copy link
Collaborator Author

adamziel added a commit that referenced this issue Feb 28, 2024
## What is this PR doing?

Supersedes #1051

Adds a PHP Blueprints demo page where the use of
[blueprints.phar](WordPress/blueprints#28) PHP
library in Playground may be further explored. The showcase is
intentionally not added to
http://localhost:5400/website-server/demos/index.html as PHP Blueprints
may become a part of Playground core soon enough.

For more context see:

* #1025
* https://github.com/WordPress/blueprints

## How does it work?

* The built Blueprints library is included with this PR via the
`blueprints.phar` file
* A number of PHP.wasm improvements have been merged to support it:
   * #1064
   * #1065
   * #1069
* This PR ships a `fetch` subprocess handler to enable streaming network
data in the Blueprints library – it uses [a special network transport
called
`fetch`](https://github.com/WordPress/blueprints/blob/efa8deef56095bd5bcb94868787e29f7b54350f3/src/WordPress/DataSource/PlaygroundFetchSource.php)
that requests network data via `proc_open()` when running in Playground.
Why subprocesses? They provide everything a custom network handler
needs: pipes, asynchronous execution, exit codes, internal PHP plumbing.

## Follow-up work

* Support a real-time progress bar

## Testing instructions

Go to http://localhost:5400/website-server/demos/php-blueprints.html and
confirm it looks like on the screenshot below:

![CleanShot 2024-02-28 at 15 46
14@2x](https://github.com/WordPress/wordpress-playground/assets/205419/47a91d99-07f3-40a5-a046-b58f8cda952e)
brandonpayton added a commit that referenced this issue Sep 27, 2024
… WebApp Redesign (#1731)

## Description

Implements a large part of the [website
redesign](#1561):

![CleanShot 2024-09-14 at 10 24
57@2x](https://github.com/user-attachments/assets/f245c7ac-cb8c-4e5a-b90a-b4aeff802e7b)


High-level changes shipped in this PR:

* Multiple Playgrounds. Every temporary Playground can be saved either
in the browser storage (OPFS) or in a local directory (Chrome desktop
only for now).
* New Playground settings options: Name name, language, multisite
* URL as the source of truth for the application state
* State management via Redux

This work is a convergence of 18+ months of effort and discussions. The
new UI opens relieves the users from juggling ephemeral Playgrounds and
losing their work. It opens up space for long-lived site configurations
and additional integrations. We could bring over all the [PR previewers
and demos](https://playground.wordpress.net/demos/) right into the
Playground app.

Here's just a few features unblocked by this PR:

* #1438 – no
more losing your work by accident 🎉
* #797 – with
multiple sites we can progressively build features we'll eventually
propose for WordPress core:
* A Playground export and import feature, pioneering the standard export
format for WordPress sites.
* A "Clone this Playground" feature, pioneering the [Site Transfer
Protocol](https://core.trac.wordpress.org/ticket/60375).
   * A "Sync two Playgrounds" feature, pioneering the Site Sync Protocol
* #1445 – better
git support is in top 5 most highly requested features. With multiple
Playgrounds, we can save your work and get rid of the "save your work
before connecting GitHub or you'll lose it" and cumbersome "repo setup"
forms on every interaction. Instead, we can make git operations like
Pull, Commit, etc. very easy and even enable auto-syncing with a git
repository.
* #1025 – as we
bring in more PHP plumbing into this repository, we'll replace the
TypeScript parts with PHP parts to create a WordPress core-first
Blueprints engine
* #1056 – Site
transfer protocol will unlocks seamlessly passing Playgrounds between
the browser and a local development environment
* #1558 – we'll
integrate [the Blueprints directory] and offer single-click Playground
setups, e.g. an Ecommerce store or a Slide deck editor.
#718.
* #539 – the
recorded Blueprints would be directly editable in Playground and perhaps
saved as a new Playground template
* #696 – the new
interaction model creates space for additional integrations.
* #707 – you
could create a "GitHub–synchronized" Playground
* #760 – we can
bootstrap one inside Playground using a Blueprint and benefit the users
immediately, and then gradually work towards enabling it on
WordPress.org
* #768 – the new
UI has space for a "new in Playground" section, similar to what Chrome
Devtools do
* #629  
* #32
* #104
* #497
* #562
* #580 

### Remaining work

- [ ] Write a release note for https://make.wordpress.org/playground/
- [x] Make sure GitHub integration is working. Looks like OAuth
connection leads to 404.
- [x] Fix temp site "Edit Settings" functionality to actually edit
settings (forking a temp site can come in a follow-up PR)
- [x] Fix style issue with overlapping site name label with narrow site
info views
- [x] Fix style issue with bottom "Open Site" and "WP Admin" buttons
missing for mobile viewports
- [x] Make sure there is a path for existing OPFS sites to continue to
load
- [x] Adjust E2E tests.
- [x] Reflect OPFS write error in UI when saving temp site fails
- [x] Find a path forward for
[try-wordpress](https://github.com/WordPress/try-wordpress) to continue
working after this PR
- [x] Figure out why does the browser get so choppy during OPFS save. It
looks as if there was a lot of synchronous work going on. Shouldn't all
the effort be done by a worker a non-blocking way?
- [x] Test with Safari and Firefox. Might require a local production
setup as FF won't work with the Playground dev server.
- [x] Fix Safari error: `Unhandled Promise Rejection: UnknownError:
Invalid platform file handle` when saving a temporary Playground to
OPFS.
- [x] Fix to allow deleting site that fails to boot. This is possible
when saving a temp site fails partway through.
- [x] Fix this crash:

```ts
		/**
		 * @todo: Fix OPFS site storage write timeout that happens alongside 2000
		 *        "Cannot read properties of undefined (reading 'apply')" errors here:
		 * I suspect the postMessage call we do to the safari worker causes it to
		 * respond with another message and these unexpected exchange throws off
		 * Comlink. We should make Comlink ignore those.
		 */
		// redirectTo(PlaygroundRoute.site(selectSiteBySlug(state, siteSlug)));
```
- [x] Test different scenarios manually, in particular those involving
Blueprints passed via hash
- [x] Ensure we have all the aria, `name=""` etc. accessibility
attributes we need, see AXE tools for Chrome.
- [x] Update developer documentation on the `storage` query arg (it's
removed in this PR)
- [x] Go through all the `TODOs` added in this PR and decide whether to
solve or punt them
- [x] Handle errors like "site not found in OPFS", "files missing from a
local directory"
- [x] Disable any `Local Filesystem` UI in browsers that don't support
them. Don't just hide them, though. Provide a help text to explain why
are they disabled.
- [x] Reduce the naming confusion, e.g. `updateSite` in redux-store.ts
vs `updateSite` in `site-storage.ts`. What would an unambiguous code
pattern look like?
- [x] Find a reliable and intuitive way of updating these deeply nested
redux state properties. Right now we do an ad-hoc recursive merge that's
slightly different for sites and clients. Which patterns used in other
apps would make it intuitive?
- [x] Have a single entrypoint for each logical action such as "Create a
new site", "Update site", "Select site" etc. that will take care of
updating the redux store, updating OPFS, and updating the URL. My ideal
scenario is calling something like `updateSite(slug, newConfig)` in a
React Component and being done without thinking "ughh I still need to
update OPFS" or "I also have to adjust that .json file over there"
- [x] Fix all the tiny design imperfections, e.g. cut-off labels in the
site settings form.

### Follow up work

- [ ] Mark all the related blocked issues as unblocked on the project
board, e.g.
#1703,
#1731, and more –
[see the All Tasks
view](https://github.com/orgs/WordPress/projects/180/views/2?query=sort%3Aupdated-desc+is%3Aopen&filterQuery=status%3A%22Up+next%22%2C%22In+progress%22%2C%22Needs+review%22%2C%22Reviewed%22%2C%22Done%22%2CBlocked)
- [ ] Update WordPress/Learn#1583 with info
that the redesign is now in and we're good to record a video tutorial.
- [ ] #1746
- [ ] Write a note in [What's new for developers? (October
2024)](WordPress/developer-blog-content#309)
- [ ] Document the new site saving flow in
`packages/docs/site/docs/main/about/build.md` cc @juanmaguitar
- [ ] Update all the screenshots in the documentation cc @juanmaguitar 
- [ ] When the site fails to load via `.list()`, still return that
site's info but make note of the error. Not showing that site on a list
could greatly confuse the user ("Hey, where did my site go?"). Let's be
explicit about problems.
- [ ] Introduce notifications system to provide feedback about outcomes
of various user actions.
- [ ] Add non-minified WordPress versions to the "New site" modal.
- [ ] Fix `console.js:288 TypeError: Cannot read properties of undefined
(reading 'apply') at comlink.ts:314:51 at Array.reduce (<anonymous>) at
callback (comlink.ts:314:29)` – it seems to happen at trunk, too.
- [ ] Attribute log messages to the site that triggered them.
- [ ] Take note of any interactions that we find frustrating or
confusing. We can perhaps adjust them in a follow-up PR, but let's make
sure we notice and document them here.
- [ ] Solidify the functional tooling for transforming between `URL`,
`runtimeConfiguration`, `Blueprint`, and `site settings form state` for
both OPFS sites and in-memory sites. Let's see if we can make it
reusable in Playground CLI.
- [ ] Speed up OPFS interactions, saving a site can take quite a while.
- [ ] A mobile-friendly modal architecture that doesn't stack modals,
allows dismissing, and understands some modals (e.g. fatal error report)
might have priority over other modals (e.g. connect to GitHub). Discuss
whether modals should be declared at the top level, like here, or
contextual to where the "Show modal" button is rendered.
- [ ] Discuss the need to support strong, masked passwords over a simple
password that's just `"password"`.
- [ ] Duplicate site feature implemented as "Export site + import site"
with the new core-first PHP tools from
adamziel/wxr-normalize#1 and
https://github.com/adamziel/site-transfer-protocol
- [x] Retain temporary sites between site changes. Don't just trash
their iframe and state when the user switches to another site.

Closes #1719

cc @brandonpayton

---------

Co-authored-by: Brandon Payton <[email protected]>
Co-authored-by: Bero <[email protected]>
Co-authored-by: Bart Kalisz <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant