eddev 0.3.38 → 2.0.0-beta.10

package/dist/app/lib/blocks/editor/installGutenbergHooks.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { InlineEditingContextProvider } from "../inline-editing";
+import { BlockContext, EditableBlock } from "./EditorSupport";
+import { blocksByTag } from "./blocks-by-tag";
+import { editorConfigStore, getEditingPostInfo, watchEditorTemplate } from "./editor-config";
+import { useSnapshot } from "valtio";
+import { getBlockMetadata } from "../block-utils";
+function listenForHandleResize() {
+    let interval = setInterval(() => {
+        let viewportTarget = document.querySelector(".interface-interface-skeleton__content");
+        if (viewportTarget) {
+            const updateSize = () => {
+                document.documentElement.style.setProperty("--vw100", viewportTarget.clientWidth + "px");
+            };
+            const ro = new ResizeObserver(updateSize);
+            ro.observe(viewportTarget);
+            clearInterval(interval);
+        }
+    }, 100);
+}
+export function whenEditorIsReady() {
+    return new Promise((resolve) => {
+        const unsubscribe = wp.data.subscribe(() => {
+            // This will trigger after the initial render blocking, before the window load event
+            // This seems currently more reliable than using __unstableIsEditorReady
+            if (wp.data.select("core/editor").isCleanNewPost() || wp.data.select("core/block-editor").getBlockCount() > 0) {
+                unsubscribe();
+                resolve();
+            }
+        });
+    });
+}
+export function installEDGutenbergHooks() {
+    import("../../../../../css/editor-styles.css");
+    // Skip this if we're not in the block editor
+    if (!wp.blockEditor)
+        return;
+    const withClientIdClassName = wp.compose.createHigherOrderComponent((BlockListBlock) => {
+        return (props) => {
+            const generateClass = useSnapshot(editorConfigStore).currentBlocksConfig?.generateBlockClassName;
+            Object.assign(props, getBlockMetadata(props.name));
+            let className = generateClass ? generateClass(props, getEditingPostInfo()) : "";
+            return _jsx(BlockListBlock, { ...props, className: className });
+        };
+    }, "withClientIdClassName");
+    wp.hooks.addFilter("editor.BlockListBlock", "ed", withClientIdClassName);
+    listenForHandleResize();
+    // Remove unwanted formatting options
+    // https://developer.wordpress.org/block-editor/how-to-guides/format-api/
+    wp.richText.unregisterFormatType("core/image");
+    wp.richText.unregisterFormatType("core/language");
+    wp.richText.unregisterFormatType("core/keyboard");
+    wp.richText.unregisterFormatType("core/text-color");
+    whenEditorIsReady().then(() => watchEditorTemplate());
+    wp.hooks.addFilter("blocks.registerBlockType", "ed", (item, name) => {
+        // Hook into ACF blocks, customising the edit mode.
+        if (name.startsWith("acf/")) {
+            const edit = item.edit;
+            item.acf = {
+                ...(item.acf ?? {}),
+                mode: item.mode,
+            };
+            // Add an 'inline' object attribute, which will hold all inline contents
+            item.attributes.inline = { type: "object" };
+            item.attributes.isFromTemplate = { type: "boolean" };
+            item.supports.customClassName = false;
+            item.edit = function (props) {
+                const self = this;
+                useEffect(() => {
+                    ;
+                    wp.data.dispatch("core/block-editor").setTemplateValidity(true);
+                }, []);
+                const children = wp.data.useSelect((select) => {
+                    const { getBlock, getBlockOrder } = select("core/block-editor");
+                    const innerBlockIDs = getBlockOrder(props.clientId);
+                    const children = innerBlockIDs.map((id) => {
+                        return getBlock(id);
+                    });
+                    return children;
+                }, []);
+                return (_jsx(BlockContext.Provider, { value: { name, props }, children: _jsx(InlineEditingContextProvider, { values: props.attributes.inline || {}, innerBlocks: children, block: [name, props], index: -1, onChange: (attrs) => {
+                            props.setAttributes({ ...props.attributes, inline: attrs });
+                        }, insertBlocksAfter: props.insertBlocksAfter, children: edit.call(self, props) }) }));
+            };
+        }
+        // Find PHP-defined 'tags' for core blocks.
+        if ("ED_BLOCK_TAGS" in window && window.ED_BLOCK_TAGS) {
+            const tags = window.ED_BLOCK_TAGS[name];
+            if (tags) {
+                item.tags = tags;
+            }
+        }
+        // Ensure tags is always an array
+        if (typeof item.tags === "string") {
+            item.tags = [item.tags];
+        }
+        else if (!Array.isArray(item.tags)) {
+            item.tags = [];
+        }
+        blocksByTag.add(item.name, item.tags);
+        return {
+            ...item,
+            get parent() {
+                return blocksByTag.expand([
+                    ...(item.parent ?? []),
+                    ...(item.tags.includes("root") ? ["core/post-content"] : []),
+                ]);
+            },
+            get ancestor() {
+                return item.ancestor ? blocksByTag.expand(item.ancestor) : undefined;
+            },
+            get allowedBlocks() {
+                return item.allowedBlocks ? blocksByTag.expand(item.allowedBlocks) : undefined;
+            },
+        };
+    });
+    const acf = "acf" in window ? window.acf : {};
+    const parseJSX = acf.parseJSX;
+    acf.parseJSX = (html) => {
+        let payload;
+        try {
+            payload = JSON.parse(html);
+        }
+        catch (err) {
+            console.error(err);
+            throw new Error("eddev: Error parsing block data from: \n" + html);
+        }
+        return _jsx(EditableBlock, { payload: payload });
+    };
+}

package/dist/app/lib/blocks/editor/usePostEditor.d.ts

@@ -0,0 +1,27 @@
+import { InlineValueStore } from "../inline-editing";
+export declare function usePostEditor(): {
+    post: any;
+    updatePost(update: any): void;
+    meta: any;
+    updateMeta: Function;
+};
+/**
+ * Returns the current post title, allowing it to be updated.
+ *
+ * NOTE: This only works in the editor.
+ *
+ * For convenience, you can pass in a default title to use when not in the editor, which you can fetch via GraphQL
+ *
+ * @returns [title, setTitle]
+ */
+export declare function usePostTitleEditor(title?: string): InlineValueStore<string>;
+/**
+ * Returns a post meta value, allowing it to be updated.
+ *
+ * See ED()->registerPostMeta() for more information on how to define post meta.
+ *
+ * @param key The key specified
+ * @param value The value to use when not in the editor
+ * @returns [value, setValue]
+ */
+export declare function usePostMetaEditor<K extends keyof PostMetaTypes>(key: K, value?: PostMetaTypes[K]): InlineValueStore<PostMetaTypes[K]>;

package/dist/app/lib/blocks/editor/usePostEditor.js

@@ -0,0 +1,79 @@
+export function usePostEditor() {
+    const post = wp.data.useSelect((select) => {
+        const editor = select("core/editor");
+        const post = editor.getCurrentPost();
+        const edits = editor.getPostEdits();
+        return {
+            ...post,
+            ...edits,
+        };
+    }, []);
+    const [meta, updateMeta] = wp.coreData.useEntityProp("postType", post.type, "meta");
+    return {
+        post,
+        updatePost(update) {
+            wp.data.dispatch("core/editor").editPost(update);
+        },
+        meta,
+        updateMeta,
+    };
+}
+/**
+ * Returns the current post title, allowing it to be updated.
+ *
+ * NOTE: This only works in the editor.
+ *
+ * For convenience, you can pass in a default title to use when not in the editor, which you can fetch via GraphQL
+ *
+ * @returns [title, setTitle]
+ */
+export function usePostTitleEditor(title = "") {
+    if (env.admin) {
+        const post = wp.data.useSelect((select) => {
+            const editor = select("core/editor");
+            const post = editor.getCurrentPost();
+            const edits = editor.getPostEdits();
+            return {
+                ...post,
+                ...edits,
+            };
+        }, []);
+        return [
+            post.title ?? "",
+            (title) => {
+                wp.data.dispatch("core/editor").editPost({ title });
+            },
+        ];
+    }
+    else {
+        return [title, () => { }];
+    }
+}
+/**
+ * Returns a post meta value, allowing it to be updated.
+ *
+ * See ED()->registerPostMeta() for more information on how to define post meta.
+ *
+ * @param key The key specified
+ * @param value The value to use when not in the editor
+ * @returns [value, setValue]
+ */
+export function usePostMetaEditor(key, value) {
+    if (env.admin) {
+        const postType = wp.data.useSelect((select) => {
+            const editor = select("core/editor");
+            const post = editor.getCurrentPost();
+            return post.type;
+        }, []);
+        const [meta, setMeta] = wp.coreData.useEntityProp("postType", postType, "meta");
+        return [
+            meta?.[key] ?? value,
+            (newValue) => {
+                setMeta({ ...(meta ?? {}), [key]: newValue });
+            },
+        ];
+    }
+    else {
+        return [value, () => { }];
+    }
+}

package/dist/app/lib/blocks/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./ContentBlocks";
+export * from "./EditableText";
+export * from "./InnerBlocks";
+export * from "./defineBlock";
+export * from "./editor/controls";
+export * from "./editor/usePostEditor";
+export * from "./block-utils";
+export { defineEditorConfig } from "./editor/editor-config";
+export { useBlockContext, useInlineEditableValue, useInnerBlocks, useTemplate } from "./inline-editing";

package/dist/app/lib/blocks/index.js

@@ -0,0 +1,9 @@
+export * from "./ContentBlocks";
+export * from "./EditableText";
+export * from "./InnerBlocks";
+export * from "./defineBlock";
+export * from "./editor/controls";
+export * from "./editor/usePostEditor";
+export * from "./block-utils";
+export { defineEditorConfig } from "./editor/editor-config";
+export { useBlockContext, useInlineEditableValue, useInnerBlocks, useTemplate } from "./inline-editing";

package/dist/app/lib/blocks/inline-editing.d.ts

@@ -0,0 +1,54 @@
+import { ContentBlock } from "./ContentBlocks";
+import { PropsWithChildren } from "react";
+type Attributes = Record<string, any>;
+export type InlineValueStore<T> = [value: T, setValue: (value: T) => void];
+type InlineEditingContext = {
+    values: Attributes;
+    innerBlocks: ContentBlock[];
+    parents: [string, Attributes][];
+    block: [string, Attributes];
+    index: number;
+    setValue(key: string, value: any): any;
+    getValue(key: string): any;
+    insertBlocksAfter?: (block: any) => void;
+    readonly?: boolean;
+};
+declare const InlineEditingContext: import("react").Context<InlineEditingContext | undefined>;
+type ProviderProps = PropsWithChildren<{
+    values: Attributes;
+    innerBlocks: ContentBlock[];
+    block: [string, Attributes];
+    index: number;
+    onChange?: (attrs: Attributes) => void;
+    insertBlocksAfter?: (block: any) => void;
+    readonly?: boolean;
+}>;
+export declare function InlineEditingContextProvider(props: ProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ReadonlyInlineEditingProvider(props: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Allows for arbitrary storage of key/value pairs within the current block.
+ * This is used internally by EditableText, but can be used to store anything.
+ *
+ * @param key The unique item identifier
+ * @param defaultValue The default value (default is undefined)
+ * @returns a [value, setValue] tuple, similar to useState
+ */
+export declare function useInlineEditableValue<T>(key: string, defaultValue?: T): InlineValueStore<T>;
+/**
+ * Can be used as a drop-in version of useInlineEditableValue, but will pipe-through a store if one has been used
+ * @private
+ **/
+export declare function useValueStore<T>(id: string | InlineValueStore<T>, defaultValue?: T): InlineValueStore<T>;
+export declare function useBlockAppender(): ((block: any) => void) | undefined;
+export declare function useInnerBlocks(): ContentBlock[];
+export declare function useBlockParents(): [string, Attributes][];
+export declare function useBlockContext(): InlineEditingContext | undefined;
+/**
+ * Returns the current template name.
+ * - In the editor, this uses Gutenberg state.
+ * - On the frontend, this uses the actual WP template hierarchy.
+ *
+ * As such, there may be inconsistencies between the editor and the frontend.
+ */
+export declare function useTemplate(): keyof ViewProps;
+export {};

package/dist/app/lib/blocks/inline-editing.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { usePostEditor } from "./editor/usePostEditor";
+import { useRoute } from "../routing";
+import { addBlockMetadata } from "./block-utils";
+const InlineEditingContext = createContext(undefined);
+export function InlineEditingContextProvider(props) {
+    const parentContext = useContext(InlineEditingContext);
+    addBlockMetadata(props.innerBlocks);
+    return (_jsx(InlineEditingContext.Provider, { value: {
+            values: props.values,
+            innerBlocks: props.innerBlocks,
+            block: props.block,
+            index: props.index,
+            parents: [...(parentContext?.block ? [parentContext?.block] : []), ...(parentContext?.parents || [])].filter(Boolean),
+            getValue(key) {
+                return props.values?.[key];
+            },
+            setValue(key, value) {
+                if (props.onChange) {
+                    props.onChange({
+                        ...(props.values || {}),
+                        [key]: value,
+                    });
+                }
+            },
+            insertBlocksAfter: props.insertBlocksAfter,
+            readonly: props.readonly || parentContext?.readonly,
+        }, children: props.children }));
+}
+export function ReadonlyInlineEditingProvider(props) {
+    const parentContext = useContext(InlineEditingContext);
+    return (_jsx(InlineEditingContext.Provider, { value: {
+            ...parentContext,
+            readonly: true,
+        }, children: props.children }));
+}
+/**
+ * Allows for arbitrary storage of key/value pairs within the current block.
+ * This is used internally by EditableText, but can be used to store anything.
+ *
+ * @param key The unique item identifier
+ * @param defaultValue The default value (default is undefined)
+ * @returns a [value, setValue] tuple, similar to useState
+ */
+export function useInlineEditableValue(key, defaultValue) {
+    const attrs = useContext(InlineEditingContext);
+    return [
+        attrs?.getValue(key) ?? defaultValue,
+        (value) => {
+            attrs?.setValue(key, value);
+        },
+    ];
+}
+/**
+ * Can be used as a drop-in version of useInlineEditableValue, but will pipe-through a store if one has been used
+ * @private
+ **/
+export function useValueStore(id, defaultValue) {
+    const attrs = useContext(InlineEditingContext);
+    if (typeof id === "string") {
+        return [
+            attrs?.getValue(id) ?? defaultValue,
+            (value) => {
+                attrs?.setValue(id, value);
+            },
+        ];
+    }
+    else if (Array.isArray(id)) {
+        return [id[0] ?? defaultValue, id[1]];
+    }
+    else {
+        throw new Error("Missing ID or store for inline value");
+    }
+}
+export function useBlockAppender() {
+    const ctx = useContext(InlineEditingContext);
+    return ctx?.insertBlocksAfter;
+}
+export function useInnerBlocks() {
+    const ctx = useContext(InlineEditingContext);
+    return ctx?.innerBlocks || [];
+}
+export function useBlockParents() {
+    const ctx = useContext(InlineEditingContext);
+    return ctx?.parents || [];
+}
+export function useBlockContext() {
+    return useContext(InlineEditingContext);
+}
+/**
+ * Returns the current template name.
+ * - In the editor, this uses Gutenberg state.
+ * - On the frontend, this uses the actual WP template hierarchy.
+ *
+ * As such, there may be inconsistencies between the editor and the frontend.
+ */
+export function useTemplate() {
+    if (env.admin) {
+        const post = usePostEditor();
+        if (post.post?.template) {
+            return post.post?.template?.replace(/(views\/|\.tsx$)/g, "");
+        }
+        else if (post.post?.type === "page") {
+            return "page";
+        }
+        else {
+            return ("single-" + post.post?.type);
+        }
+    }
+    else {
+        return useRoute().view;
+    }
+}

package/dist/app/lib/devtools/components/BreakpointIndicator.js

@@ -0,0 +1,81 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useTailwindConfig } from "../hooks/useTailwind.js";
+import { usePersistState } from "../hooks/usePersistState.js";
+function parseBreakpointMin(breakpoint) {
+    return parseInt(breakpoint);
+}
+const COLORS = [
+    ["#ff5555", "#ffffff"],
+    ["#55ff55", "#000000"],
+    ["#5555ff", "#ffffff"],
+    ["#ff55ff", "#ffffff"],
+    ["#ffff55", "#000000"],
+    ["#55ffff", "#000000"],
+];
+function getColors(index) {
+    const color = COLORS[index % COLORS.length] ?? ["#000", "#fff"];
+    return {
+        backgroundColor: color[0],
+        color: color[1],
+    };
+}
+export function BreakpointIndicator() {
+    const ref = useRef(null);
+    const tw = useTailwindConfig();
+    const [activeSize, setActiveSize] = useState(-1);
+    const [width, setWidth] = useState(window.innerWidth);
+    const [expanded, setExpanded] = usePersistState("breakpointIndicatorExpanded", false);
+    // Convert the screens into a list of breakpoints with a min
+    const screens = useMemo(() => {
+        if (!tw?.theme?.screens)
+            return [];
+        const definedScreens = Object.entries(tw?.theme?.screens)
+            .map(([key, value]) => ({
+            name: key,
+            min: parseBreakpointMin(value),
+        }))
+            .filter((screen) => screen.min > 0);
+        return [
+            {
+                name: "BASE",
+                min: 0,
+            },
+            ...definedScreens,
+        ]
+            .sort((a, b) => a.min - b.min)
+            .map((screen, i, arr) => ({
+            ...screen,
+            max: arr[i + 1] ? arr[i + 1].min - 1 : undefined,
+        }));
+    }, [tw?.theme?.screens, !!tw]);
+    useEffect(() => {
+        if (!tw)
+            return;
+        const update = () => {
+            setWidth(window.innerWidth);
+            setActiveSize(screens.findLastIndex((screen) => window.innerWidth >= screen.min));
+        };
+        update();
+        window.addEventListener("resize", update);
+        return () => window.removeEventListener("resize", update);
+    }, [screens, !!tw]);
+    const maxSize = screens[screens.length - 1]?.min;
+    const screen = screens[activeSize];
+    const globalProgress = width / maxSize;
+    return (_jsx("div", { ref: ref, "data-breakpoint": true, className: "fixed left-2 bottom-2 z-[999999999999999]", onClick: () => setExpanded(!expanded), children: !!screens && !!screen && (_jsx(_Fragment, { children: expanded ? (_jsx("div", { className: "btn w-[400px] bg-black px-2", children: _jsxs("div", { className: "relative w-full h-full cursor-pointer", children: [_jsxs("div", { className: "absolute bottom-[-3px] -translate-x-1/2 -translate-y-1/2 leading-none text-[8px] text-white", style: { left: `calc(min(${globalProgress},1) * 100%)` }, children: ["\u23F6 ", _jsxs("span", { className: globalProgress < 0.85 ? `absolute left-2` : `absolute right-2`, children: [width, "px"] })] }), screens.map((screen, i) => {
+                            const colors = getColors(i);
+                            const active = i === activeSize;
+                            const last = i === screens.length - 1;
+                            return (_jsxs("div", { className: "absolute flex-1 flex flex-col data-[disabled]:opacity-60 transition-opacity", "data-disabled": active ? undefined : "", style: last
+                                    ? {
+                                        right: 0,
+                                    }
+                                    : {
+                                        left: `${(screen.min / maxSize) * 100}%`,
+                                        width: `${(((screen.max ?? maxSize) - screen.min) / maxSize) * 100}%`,
+                                    }, children: [_jsx("span", { className: "text-[8px] text-neutral-300 leading-normal", style: { color: active ? colors.backgroundColor : undefined }, children: screen.name }), !last && _jsx("span", { className: "h-[1px]", style: colors })] }, screen.name));
+                        })] }) })) : (
+            // Condensed
+            _jsx("div", { className: "btn px-3 cursor-pointer", style: getColors(activeSize), children: screen.name })) })) }));
+}

package/{dev-ui → dist/app/lib/devtools}/components/DevUI.d.ts

@@ -1 +1,2 @@
+import "../../../../../css/devtools.css";
 export default function DevUI(): import("react/jsx-runtime").JSX.Element;

package/dist/app/lib/devtools/components/DevUI.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "../../../../../css/devtools.css";
+import { BreakpointIndicator } from "./BreakpointIndicator";
+export default function DevUI() {
+    return (_jsx("div", { className: "eddev-ui", children: _jsx(BreakpointIndicator, {}) }));
+}

package/dist/app/lib/devtools/dev-tools-store.d.ts

@@ -0,0 +1,9 @@
+import { Config as TailwindConfig } from "tailwindcss";
+type Store = {
+    loadTailwindConfig: () => void;
+    tailwindConfig: TailwindConfig | null;
+};
+export declare const devToolsStore: Store & {
+    set<K extends keyof Store>(key: K, value: Store[K]): void;
+};
+export {};

package/dist/app/lib/devtools/dev-tools-store.js

@@ -0,0 +1,8 @@
+import { proxy, ref } from "valtio";
+export const devToolsStore = proxy({
+    tailwindConfig: null,
+    loadTailwindConfig() { },
+    set(key, value) {
+        devToolsStore[key] = (value ? ref(value) : value);
+    },
+});

package/dist/app/lib/devtools/hooks/usePersistState.js

@@ -0,0 +1,31 @@
+import { useState } from "react";
+const get = (id, fallback = undefined) => {
+    if (typeof localStorage === "undefined") {
+        return fallback;
+    }
+    const value = localStorage.getItem("devui_" + id);
+    if (value !== null) {
+        try {
+            return JSON.parse(value);
+        }
+        catch (err) {
+            return fallback;
+        }
+    }
+    else {
+        return fallback;
+    }
+};
+const set = (id, value) => {
+    localStorage.setItem("devui_" + id, JSON.stringify(value));
+};
+export function usePersistState(id, initial) {
+    const [value, setValue] = useState(() => get(id, initial));
+    return [
+        value,
+        (value) => {
+            set(id, value);
+            setValue(value);
+        },
+    ];
+}