🎨 Server-side rendering of wp-show in PHP

.babelrc

@@ -0,0 +1,10 @@
+{
+	"presets": [
+		[
+			"@babel/preset-react",
+			{
+				"throwIfNamespace": false
+			}
+		]
+	]
+}

package.json

@@ -3,15 +3,15 @@
 	"version": "0.1.0",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
-	"main": "build/index.js",
 	"scripts": {
 		"build": "webpack --mode=production",
 		"start": "webpack --mode=development --watch",
 		"dev": "npm start",
 		"test": "jest",
 		"test:watch": "jest --watch",
 		"plugin-zip": "wp-scripts plugin-zip",
-		"wp-env": "wp-env"
+		"wp-env": "wp-env",
+		"ssr": "node ssr.mjs"
 	},
 	"prettier": {
 		"useTabs": true,
@@ -39,6 +39,7 @@
 	"dependencies": {
 		"@preact/signals": "^1.1.2",
 		"hpq": "^1.3.0",
-		"preact": "^10.10.6"
+		"preact": "^10.10.6",
+		"ultrahtml": "^0.4.0"
 	}
 }

src/blocks/favorites-number/block.json

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "bhe/favorites-number",
+	"version": "0.1.0",
+	"title": "BHE - Favorites Number",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"textdomain": "bhe",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./style.css",
+	"style": "file:./style-index.css",
+	"render": "file:./render.php"
+}

src/blocks/favorites-number/edit.js

@@ -0,0 +1,19 @@
+import '@wordpress/block-editor';
+import { useBlockProps } from '@wordpress/block-editor';
+
+const Edit = () => {
+	return (
+		<div {...useBlockProps()}>
+			<img
+				draggable="false"
+				role="img"
+				class="emoji"
+				alt=":heart:"
+				src="https://s.w.org/images/core/emoji/14.0.0/svg/2764.svg"
+			/>
+			<span>5</span>
+		</div>
+	);
+};
+
+export default Edit;

src/blocks/favorites-number/index.js

@@ -0,0 +1,8 @@
+import { registerBlockType } from '@wordpress/blocks';
+import Edit from './edit';
+import './style.scss';
+
+registerBlockType('bhe/favorites-number', {
+	edit: Edit,
+	save: () => null,
+});

src/blocks/favorites-number/render.php

@@ -0,0 +1,13 @@
+<div wp-effect:restore="actions.favorites.restore" wp-effect:save="actions.favorites.save">
+    <img 
+        class="emoji"
+        alt=":heart:"
+        src="https://s.w.org/images/core/emoji/14.0.0/svg/1f90d.svg"
+        wp-bind:src="selectors.favorites.isFavoritePostsEmpty"
+    />
+    <span
+        wp-bind:children="state.favorites.count"
+    >
+    0
+    </span>
+</div>

src/blocks/favorites-number/style.scss

@@ -0,0 +1,4 @@
+.wp-block-bhe-favorites-number {
+    border: 1px solid rgb(209, 21, 21);
+    position: relative;
+}

src/blocks/favorites-number/view.js

@@ -0,0 +1,48 @@
+import wpx from '../../runtime/wpx';
+import { deepMerge } from '../../runtime/utils';
+
+wpx({
+	state: {
+		favorites: {
+			posts: [],
+			count: ({ state }) => state.favorites.posts.length,
+		},
+	},
+	selectors: {
+		favorites: {
+			isPostIncluded: ({ state, context: { post } }) =>
+				`https://s.w.org/images/core/emoji/14.0.0/svg/${
+					state.favorites.posts.includes(post.id) ? '2764' : '1f90d'
+				}.svg`,
+			isFavoritePostsEmpty: ({ state }) =>
+				`https://s.w.org/images/core/emoji/14.0.0/svg/${
+					state.favorites.posts.length !== 0 ? '2764' : '1f90d'
+				}.svg`,
+		},
+	},
+	actions: {
+		favorites: {
+			togglePost: ({ state, context }) => {
+				const index = state.favorites.posts.findIndex(
+					(post) => post === context.post.id
+				);
+				if (index === -1) state.favorites.posts.push(context.post.id);
+				else state.favorites.posts.splice(index, 1);
+			},
+			save: ({ state }) => {
+				localStorage.setItem(
+					'wpmoviesdemo.favorites',
+					JSON.stringify(state.favorites)
+				);
+			},
+			restore: ({ state }) => {
+				deepMerge(
+					state.favorites,
+					JSON.parse(
+						localStorage.getItem('wpmoviesdemo.favorites')
+					) || {}
+				);
+			},
+		},
+	},
+});

src/blocks/post-favorite/block.json

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "bhe/post-favorite",
+	"version": "0.1.0",
+	"title": "BHE - Post Favorite",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"textdomain": "bhe",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./style.css",
+	"style": "file:./style-index.css",
+	"render": "file:./render.php"
+}

src/blocks/post-favorite/edit.js

@@ -0,0 +1,18 @@
+import '@wordpress/block-editor';
+import { useBlockProps } from '@wordpress/block-editor';
+
+const Edit = () => {
+	return (
+		<div {...useBlockProps()}>
+			<img
+				draggable="false"
+				role="img"
+				class="emoji"
+				alt=":heart:"
+				src="https://s.w.org/images/core/emoji/14.0.0/svg/2764.svg"
+			/>
+		</div>
+	);
+};
+
+export default Edit;

src/blocks/post-favorite/index.js

@@ -0,0 +1,8 @@
+import { registerBlockType } from '@wordpress/blocks';
+import Edit from './edit';
+import './style.scss';
+
+registerBlockType('bhe/post-favorite', {
+	edit: Edit,
+	save: () => null,
+});

src/blocks/post-favorite/render.php

@@ -0,0 +1,15 @@
+<?php
+$post = get_post();
+$wrapper_attributes = get_block_wrapper_attributes();
+?>
+
+<wp-context data='{"post": {"id": <?= $post->ID ?>}}'>
+    <img
+        <?= $wrapper_attributes ?>
+        wp-on:click="actions.favorites.togglePost"
+        class="emoji"
+        alt=":heart:"
+        src="https://s.w.org/images/core/emoji/14.0.0/svg/1f90d.svg"
+        wp-bind:src="selectors.favorites.isPostIncluded"
+    />
+</wp-context>

src/blocks/post-favorite/style.scss

@@ -0,0 +1,4 @@
+.wp-block-bhe-post-favorite {
+    width: 1rem;
+    cursor: pointer;
+}

src/blocks/tabs/block.json

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "bhe/tabs",
+	"version": "0.1.0",
+	"title": "BHE - Tabs",
+	"category": "text",
+	"icon": "tab",
+	"description": "Tabs",
+	"textdomain": "bhe",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./style.css",
+	"style": "file:./style-index.css",
+	"render": "file:./render.php"
+}

src/blocks/tabs/edit.js

@@ -0,0 +1,7 @@
+import { useBlockProps } from '@wordpress/block-editor';
+
+const Edit = () => {
+	return <div {...useBlockProps()}>I'm a tab</div>;
+};
+
+export default Edit;

src/blocks/tabs/index.js

@@ -0,0 +1,8 @@
+import { registerBlockType } from '@wordpress/blocks';
+import Edit from './edit';
+import './style.scss';
+
+registerBlockType('bhe/tabs', {
+	edit: Edit,
+	save: () => null,
+});

src/blocks/tabs/render.php

@@ -0,0 +1,11 @@
+<?php
+wpx([
+	'state' => [
+		'show' => true,
+		'dontShow' => false,
+	],
+]); ?>
+
+<h3>The tabs!</h3>
+<wp-show when="state.show"><div>I should be shown</div></wp-show>
+<wp-show when="state.dontShow"><div>I should not be shown</div></wp-show>

src/blocks/tabs/style.scss

@@ -0,0 +1,2 @@
+.wp-block-bhe-tabs {
+}

src/runtime/components.js

@@ -4,8 +4,13 @@ import { component } from './hooks';
 
 export default () => {
 	const WpContext = ({ children, data, context: { Provider } }) => {
-		const signals = useMemo(() => deepSignal(JSON.parse(data)), []);
+		const signals = useMemo(() => deepSignal(JSON.parse(data)), [data]);
 		return <Provider value={signals}>{children}</Provider>;
 	};
 	component('wp-context', WpContext);
+
+	const WpShow = ({ children }) => {
+		return children;
+	};
+	component('wp-show', WpShow);
 };

src/runtime/deepsignal.js

@@ -1,33 +1,35 @@
 import { signal } from '@preact/signals';
-import { knownSymbols, shouldWrap } from './utils';
 
 const proxyToSignals = new WeakMap();
 const objToProxy = new WeakMap();
-const returnSignal = /^\$/;
 
 export const deepSignal = (obj) => new Proxy(obj, handlers);
+export const options = { returnSignal: /^\$/ };
 
 const handlers = {
 	get(target, prop, receiver) {
-		if (typeof prop === 'symbol' && knownSymbols.has(prop))
-			return Reflect.get(target, prop, receiver);
-		const shouldReturnSignal = returnSignal.test(prop);
-		const key = shouldReturnSignal ? prop.replace(returnSignal, '') : prop;
+		const returnSignal = options.returnSignal.test(prop);
+		const key = returnSignal
+			? prop.replace(options.returnSignal, '')
+			: prop;
 		if (!proxyToSignals.has(receiver))
 			proxyToSignals.set(receiver, new Map());
 		const signals = proxyToSignals.get(receiver);
 		if (!signals.has(key)) {
 			let val = Reflect.get(target, key, receiver);
-			if (typeof val === 'object' && val !== null && shouldWrap(val))
-				val = new Proxy(val, handlers);
+			if (typeof val === 'object' && val !== null) {
+				if (!objToProxy.has(val))
+					objToProxy.set(val, new Proxy(val, handlers));
+				val = objToProxy.get(val);
+			}
 			signals.set(key, signal(val));
 		}
 		return returnSignal ? signals.get(key) : signals.get(key).value;
 	},
 
 	set(target, prop, val, receiver) {
 		let internal = val;
-		if (typeof val === 'object' && val !== null && shouldWrap(val)) {
+		if (typeof val === 'object' && val !== null) {
 			if (!objToProxy.has(val))
 				objToProxy.set(val, new Proxy(val, handlers));
 			internal = objToProxy.get(val);