Skip to content

Commit 011ea63

Browse files
adamzieladamziel
committed
Squash. Previous HEAD=f6dc45a BASE=23a572a
1 parent a45faf6 commit 011ea63

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+7659
-865
lines changed

‎.github/workflows/ci.yml

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ jobs:
1717
main-branch-name: 'trunk'
1818
- run: npm install -g yarn nx
1919
- run: yarn install --frozen-lockfile
20-
2120
- run: nx format:check || npx prettier --check .
2221
- run: nx affected --target=typecheck
2322
- run: nx affected --target=lint --parallel=3

‎README.md

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,7 @@ You can connect to the Playground using the JavaScript client. Here's an example
4646
<script type="module">
4747
import { connectPlayground, login } from '@wp-playground/client';
4848
49-
const client = await connectPlayground(
50-
document.getElementById('wp'),
51-
{ loadRemote: 'https://playground.wordpress.net/remote.html' }
52-
);
49+
const client = await connectPlayground(document.getElementById('wp'), { loadRemote: 'https://playground.wordpress.net/remote.html' });
5350
await client.isReady();
5451
await login(client, 'admin', 'password');
5552
await client.goTo('/wp-admin/post-new.php');

‎package.json

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,25 @@
3737
},
3838
"private": true,
3939
"dependencies": {
40+
"@codemirror/autocomplete": "6.4.2",
41+
"@codemirror/commands": "6.2.2",
42+
"@codemirror/lang-css": "6.1.1",
43+
"@codemirror/lang-html": "6.4.2",
44+
"@codemirror/lang-php": "6.0.1",
45+
"@codemirror/lang-sql": "6.4.0",
46+
"@codemirror/language": "6.6.0",
47+
"@codemirror/state": "6.2.0",
48+
"@codemirror/theme-one-dark": "6.1.1",
49+
"@codemirror/view": "6.9.3",
4050
"classnames": "^2.3.2",
4151
"comlink": "^4.4.1",
4252
"file-saver": "^2.0.5",
43-
"react": "^18.2.0",
44-
"react-dom": "^18.2.0",
53+
"react": "18",
54+
"react-dom": "18",
4555
"react-modal": "^3.16.1"
4656
},
4757
"devDependencies": {
58+
"@codemirror/lang-javascript": "6.1.4",
4859
"@convex-dev/typedoc-plugin-markdown": "3.14.0",
4960
"@knodes/typedoc-plugin-pages": "0.23.1",
5061
"@nrwl/devkit": "^15.8.6",
@@ -68,14 +79,23 @@
6879
"@types/file-saver": "^2.0.5",
6980
"@types/jest": "^29.4.0",
7081
"@types/node": "18.14.2",
71-
"@types/react": "^18.0.28",
72-
"@types/react-dom": "^18.0.11",
82+
"@types/react": "18",
83+
"@types/react-dom": "18",
7384
"@types/react-modal": "^3.13.1",
85+
"@types/wordpress__block-editor": "11.5.0",
86+
"@types/wordpress__blocks": "12.5.0",
7487
"@typescript-eslint/eslint-plugin": "^5.36.1",
7588
"@typescript-eslint/parser": "^5.36.1",
7689
"@vitejs/plugin-react": "^3.1.0",
7790
"@vitest/coverage-c8": "~0.25.8",
7891
"@vitest/ui": "^0.25.8",
92+
"@wordpress/block-editor": "11.6.0",
93+
"@wordpress/blocks": "12.6.0",
94+
"@wordpress/components": "23.6.0",
95+
"@wordpress/core-data": "6.6.0",
96+
"@wordpress/data": "8.6.0",
97+
"@wordpress/element": "5.6.0",
98+
"@wordpress/notices": "3.29.0",
7999
"dts-bundle-generator": "^7.2.0",
80100
"esbuild": "^0.17.5",
81101
"esbuild-plugin-copy": "^2.1.0",
@@ -88,17 +108,20 @@
88108
"eslint-plugin-react-hooks": "4.6.0",
89109
"gh-pages": "5.0.0",
90110
"glob": "^9.3.0",
111+
"i": "0.3.7",
91112
"jest": "^29.4.1",
92113
"jest-environment-jsdom": "^29.4.1",
93114
"jest-environment-node": "^29.4.1",
94115
"jsdom": "~20.0.3",
95116
"jsonc-eslint-parser": "^2.1.0",
96117
"lerna": "6.6.1",
97118
"nx": "15.8.6",
119+
"parcel": "2.8.3",
98120
"prettier": "^2.6.2",
99121
"react-test-renderer": "18.2.0",
100122
"rimraf": "^4.4.0",
101123
"rollup-plugin-dts": "^5.2.0",
124+
"rollup-plugin-external-globals": "0.7.3",
102125
"rollup-plugin-ts": "^3.2.0",
103126
"ts-jest": "^29.0.5",
104127
"ts-node": "10.9.1",
@@ -110,7 +133,8 @@
110133
"vite": "^4.0.1",
111134
"vite-plugin-dts": "~1.7.1",
112135
"vite-plugin-eslint": "^1.8.1",
113-
"vite-plugin-static-copy": "^0.13.1",
136+
"vite-plugin-external": "1.2.8",
137+
"vite-plugin-static-copy": "0.13.1",
114138
"vite-plugin-wasm": "^3.2.2",
115139
"vite-tsconfig-paths": "^4.0.2",
116140
"vitepress": "1.0.0-alpha.60",

‎packages/interactive-code-block/.eslintrc.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"extends": ["../../.eslintrc.json"],
3+
"ignorePatterns": ["!**/*"],
4+
"overrides": [
5+
{
6+
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
7+
"rules": {}
8+
},
9+
{
10+
"files": ["*.ts", "*.tsx"],
11+
"rules": {}
12+
},
13+
{
14+
"files": ["*.js", "*.jsx"],
15+
"rules": {}
16+
}
17+
]
18+
}

‎packages/interactive-code-block/README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# interactive-code-block
2+
3+
This library was generated with [Nx](https://nx.dev).
4+
5+
## Building
6+
7+
Run `nx build interactive-code-block` to build the library.
8+
9+
## Running unit tests
10+
11+
Run `nx test interactive-code-block` to execute the unit tests via [Jest](https://jestjs.io).

‎packages/interactive-code-block/package.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"name": "@wp-playground/interactive-code-block",
3+
"version": "0.0.1",
4+
"type": "module"
5+
}

‎packages/interactive-code-block/project.json

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "interactive-code-block",
3+
"$schema": "../../node_modules/nx/schemas/project-schema.json",
4+
"sourceRoot": "packages/interactive-code-block/src",
5+
"projectType": "library",
6+
"targets": {
7+
"build": {
8+
"executor": "@nrwl/vite:build",
9+
"outputs": ["{options.outputPath}"],
10+
"options": {
11+
"outputPath": "dist/packages/interactive-code-block"
12+
}
13+
},
14+
"dev": {
15+
"executor": "@nrwl/vite:build",
16+
"outputs": ["{options.outputPath}"],
17+
"options": {
18+
"outputPath": "dist/packages/interactive-code-block",
19+
"watch": true,
20+
"minify": false
21+
}
22+
},
23+
"test": {
24+
"executor": "@nrwl/vite:test",
25+
"outputs": ["coverage/packages/interactive-code-block"],
26+
"options": {
27+
"passWithNoTests": true,
28+
"reportsDirectory": "../../coverage/packages/interactive-code-block"
29+
}
30+
},
31+
"lint": {
32+
"executor": "@nrwl/linter:eslint",
33+
"outputs": ["{options.outputFile}"],
34+
"options": {
35+
"lintFilePatterns": ["packages/interactive-code-block/**/*.ts"]
36+
}
37+
}
38+
},
39+
"tags": []
40+
}

‎packages/interactive-code-block/public/block.php

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<?php
2+
3+
add_action('init', function () {
4+
$asset_file = require plugin_dir_path(__FILE__) . 'index.asset.php';
5+
foreach ($asset_file['dependencies'] as $dep) {
6+
if (wp_script_is($dep, 'registered')) {
7+
$deps[] = $dep;
8+
}
9+
}
10+
// Register block scripts
11+
$scripts = [
12+
'interactive-code-block' => $asset_file['files']['view'],
13+
'interactive-code-block-editor' => $asset_file['files']['editor'],
14+
];
15+
foreach ($scripts as $script => $file) {
16+
wp_register_script(
17+
$script,
18+
plugins_url($file, __FILE__),
19+
$deps,
20+
'' // Version is included in the file name
21+
);
22+
}
23+
24+
// Load block scripts as ES modules
25+
add_filter('script_loader_tag', function ($tag, $handle, $src) use ($scripts) {
26+
if (!array_key_exists($handle, $scripts)) {
27+
return $tag;
28+
}
29+
30+
// Remove any query string from the URL
31+
$new_url = current(explode('?', $src));
32+
$tag = '<script type="module" src="' . esc_url($new_url) . '"></script>';
33+
return $tag;
34+
}, 10, 3);
35+
36+
$asset_file = require plugin_dir_path(__FILE__) . 'index.asset.php';
37+
$deps = [];
38+
foreach ($asset_file['dependencies'] as $dep) {
39+
if (wp_style_is($dep, 'registered')) {
40+
$deps[] = $dep;
41+
}
42+
}
43+
44+
// Register block styles
45+
$styles = [
46+
'interactive-code-block' => 'view',
47+
'interactive-code-block-editor' => 'editor',
48+
];
49+
foreach ($styles as $style => $file) {
50+
wp_register_style(
51+
$style,
52+
plugins_url('assets/' . $file . '.css', __FILE__),
53+
$deps,
54+
$asset_file['version']
55+
);
56+
}
57+
58+
// Register the block itself
59+
register_block_type_from_metadata(__DIR__ . '/assets/block.json', [
60+
'render_callback' => function ($attributes) {
61+
if (!isset($attributes['code'])) {
62+
return '';
63+
}
64+
65+
$execution_scripts = get_option(LCS_Execution_Scripts_Endpoint::OPTION_KEY, []);
66+
$script_id = $attributes['executionScript'];
67+
$script = $execution_scripts[$script_id] ?? '';
68+
69+
$all_libraries = lcs_get_libraries_list();
70+
$library_ids = array_unique(
71+
array_merge(
72+
$attributes['libraries'],
73+
$script['libraries'] ?? []
74+
)
75+
);
76+
$libraries = array_values(array_filter($all_libraries, function ($library) use ($library_ids) {
77+
return in_array($library['id'], $library_ids);
78+
}));
79+
80+
// The base64_decode is to prevent incorrect escaping by Gutenberg
81+
// E.g. representing <h1 title="&lt;div&gt; &quot;html&quot;"> seems
82+
// to be a problem for Gutenberg – it will store it as
83+
// &lt;h1 title=&quot;&amp;lt;div&amp;gt; &amp;quot;html&amp;quot;&quot;$gt;
84+
return '
85+
<div
86+
class="wp-playground-interactive-code-snippet"
87+
data-code="' . esc_attr($attributes['code']) . '"
88+
data-file-type="' . esc_attr($attributes['fileType']) . '"
89+
data-libraries="' . esc_attr(json_encode($libraries)) . '"
90+
data-execution-script="' . esc_attr(json_encode($script)) . '"
91+
data-execution-script-id="' . esc_attr(json_encode($script_id)) . '"
92+
data-cached-output="' . esc_attr($attributes['cachedOutput']) . '"
93+
data-show-cached-output="' . esc_attr($attributes['showCachedOutput']) . '"
94+
>
95+
<b>Loading interactive code snippet...</b>
96+
</div>
97+
';
98+
}
99+
// Render a static code snippet while the interactive one is loading:
100+
// Useful only for PHP and only if the PHP version >= webhost version.
101+
// ' . highlight_string(base64_decode($attributes['code']), true) . '
102+
]);
103+
});
104+
105+
106+
function lce_editor_init($hook)
107+
{
108+
global $current_screen;
109+
if (!$current_screen->is_block_editor()) {
110+
return;
111+
}
112+
113+
lce_preload_endpoints_data();
114+
}
115+
add_action('admin_enqueue_scripts', 'lce_editor_init');

0 commit comments

Comments
 (0)