Add wp-init and other small adjustments

src/runtime/constants.js

@@ -1,2 +1 @@
-export const csnMetaTagItemprop = 'wp-client-side-navigation';
 export const directivePrefix = 'data-wp-';

src/runtime/directives.js

@@ -44,17 +44,27 @@ export default () => {
 		const contextValue = useContext(context);
 		Object.values(effect).forEach((path) => {
 			useSignalEffect(() => {
-				evaluate(path, { context: contextValue });
+				return evaluate(path, { context: contextValue });
 			});
 		});
 	});
 
+	// data-wp-init.[name]
+	directive('init', ({ directives: { init }, context, evaluate }) => {
+		const contextValue = useContext(context);
+		Object.values(init).forEach((path) => {
+			useEffect(() => {
+				return evaluate(path, { context: contextValue });
+			}, []);
+		});
+	});
+
 	// data-wp-on.[event]
 	directive('on', ({ directives: { on }, element, evaluate, context }) => {
 		const contextValue = useContext(context);
 		Object.entries(on).forEach(([name, path]) => {
 			element.props[`on${name}`] = (event) => {
-				evaluate(path, { event, context: contextValue });
+				return evaluate(path, { event, context: contextValue });
 			};
 		});
 	});
@@ -86,9 +96,9 @@ export default () => {
 							: name;
 
 					useEffect(() => {
-						// This seems necessary because Preact doesn't change the class names
-						// on the hydration, so we have to do it manually. It doesn't need
-						// deps because it only needs to do it the first time.
+						// This seems necessary because Preact doesn't change the class
+						// names on the hydration, so we have to do it manually. It doesn't
+						// need deps because it only needs to do it the first time.
 						if (!result) {
 							element.ref.current.classList.remove(name);
 						} else {

src/runtime/index.js

@@ -1,13 +1,8 @@
 import registerDirectives from './directives';
 import { init } from './hydration';
-export { store } from './store';
 
 /**
  * Initialize the Interactivity API.
  */
-document.addEventListener('DOMContentLoaded', async () => {
-	registerDirectives();
-	await init();
-	// eslint-disable-next-line no-console
-	console.log('Interactivity API started');
-});
+registerDirectives();
+init();

src/runtime/store.js

@@ -3,7 +3,7 @@ import { deepSignal } from 'deepsignal';
 const isObject = (item) =>
 	item && typeof item === 'object' && !Array.isArray(item);
 
-export const deepMerge = (target, source) => {
+const deepMerge = (target, source) => {
 	if (isObject(target) && isObject(source)) {
 		for (const key in source) {
 			if (isObject(source[key])) {
@@ -36,8 +36,6 @@ const getSerializedState = () => {
 const rawState = getSerializedState();
 export const rawStore = { state: deepSignal(rawState) };
 
-if (typeof window !== 'undefined') window.store = rawStore;
-
 export const store = ({ state, ...block }) => {
 	deepMerge(rawStore, block);
 	deepMerge(rawState, state);

src/runtime/utils.js

@@ -1,4 +1,4 @@
-// For wrapperless hydration of document.body.
+// For wrapperless hydration.
 // See https://gist.github.com/developit/f4c67a2ede71dc2fab7f357f39cff28c
 export const createRootFragment = (parent, replaceNode) => {
 	replaceNode = [].concat(replaceNode);