eddev 0.3.38 → 2.0.0-beta.10

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

@@ -0,0 +1,9 @@
+import { useSnapshot } from "valtio";
+import { devToolsStore } from "../dev-tools-store";
+import { useEffect } from "react";
+export function useTailwindConfig() {
+    useEffect(() => {
+        devToolsStore.loadTailwindConfig();
+    }, []);
+    return useSnapshot(devToolsStore).tailwindConfig;
+}

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

@@ -0,0 +1 @@
+export * from "./dev-tools-store";

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

@@ -0,0 +1 @@
+export * from "./dev-tools-store";

package/dist/app/lib/devtools/loader.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { dynamic } from "../dynamic";
+import { usePersistState } from "./hooks/usePersistState";
+import { useIsSSR } from "../routing";
+const DevUI = dynamic(() => import("./components/DevUI"));
+export function DevUILoader() {
+    const ssr = useIsSSR();
+    const [render, setRender] = usePersistState("enable_devui", typeof window !== "undefined" && (env.dev || window["ENABLE_DEV_UI"]));
+    useEffect(() => {
+        if (document.location.search.includes("activate-dev-ui")) {
+            setRender(true);
+        }
+    }, []);
+    if (ssr)
+        return null;
+    if (render) {
+        return _jsx(DevUI, {});
+    }
+    else {
+        return null;
+    }
+}

package/dist/app/lib/devtools/tailwind.config.d.ts

@@ -0,0 +1,23 @@
+declare const _default: {
+    darkMode: [];
+    important: string;
+    content: string[];
+    theme: {
+        fontFamily: {
+            mono: [string, string, string];
+            body: [string, string, string];
+        };
+        fontSize: {
+            ui: [string, string];
+        };
+        extend: {
+            height: {
+                button: string;
+            };
+        };
+    };
+    corePlugins: {
+        preflight: false;
+    };
+};
+export default _default;

package/dist/app/lib/devtools/tailwind.config.js

@@ -0,0 +1,24 @@
+// @ts-ignore
+export default {
+    darkMode: [],
+    important: ".eddev-ui",
+    // @ts-ignore
+    content: [__dirname + "/**/*.{js,jsx,ts,tsx}"],
+    theme: {
+        fontFamily: {
+            mono: ["Roboto Mono", "menlo", "monospace"],
+            body: ["Inter", "Roboto", "sans-serif"],
+        },
+        fontSize: {
+            ui: ["12px", "16px"],
+        },
+        extend: {
+            height: {
+                button: "22px",
+            },
+        },
+    },
+    corePlugins: {
+        preflight: false,
+    },
+};

package/{hooks → dist/app/lib/devtools}/useQueryDebug.d.ts

@@ -1,4 +1,4 @@
-export declare type QueryDebugItem = {
+export type QueryDebugItem = {
     file: string;
     errors: string[];
     duration: number;

package/dist/app/lib/devtools/useQueryDebug.js

@@ -0,0 +1,13 @@
+import { create } from "zustand";
+const useQueryDebug = create((set) => ({
+    value: undefined,
+    set: (value) => {
+        set({ value });
+    },
+}));
+export function setQueryDebug(value) {
+    useQueryDebug.setState({ value });
+}
+export function useQueryDebugData() {
+    return useQueryDebug((store) => store.value);
+}

package/dist/app/lib/dynamic/dynamic.d.ts

@@ -0,0 +1,8 @@
+import { ComponentType } from "react";
+export type DynamicComponent<T extends ComponentType<any>> = T & {
+    preload: () => Promise<T>;
+};
+export declare function dynamic<T extends ComponentType<any>>(factory: () => Promise<{
+    default: T;
+}>): DynamicComponent<T>;
+export default dynamic;

package/dist/app/lib/dynamic/dynamic.js

@@ -0,0 +1,25 @@
+import { createElement, forwardRef, lazy, memo, useRef } from "react";
+export function dynamic(factory) {
+    const ReactLazyComponent = lazy(factory);
+    let PreloadedComponent;
+    let factoryPromise;
+    const Component = memo(forwardRef(function LazyWithPreload(props, ref) {
+        // Once one of these is chosen, we must ensure that it continues to be
+        // used for all subsequent renders, otherwise it can cause the
+        // underlying component to be unmounted and remounted.
+        const ComponentToRender = useRef(PreloadedComponent ?? ReactLazyComponent);
+        return createElement(ComponentToRender.current, Object.assign(ref ? { ref } : {}, props));
+    }));
+    const LazyWithPreload = Component;
+    LazyWithPreload.preload = () => {
+        if (!factoryPromise) {
+            factoryPromise = factory().then((module) => {
+                PreloadedComponent = module.default;
+                return PreloadedComponent;
+            });
+        }
+        return factoryPromise;
+    };
+    return LazyWithPreload;
+}
+export default dynamic;

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

@@ -0,0 +1 @@
+export { dynamic, DynamicComponent } from "./dynamic";

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

@@ -0,0 +1 @@
+export { dynamic } from "./dynamic";

package/dist/app/lib/hooks/apiConfig.d.ts

@@ -0,0 +1,18 @@
+export type APIConfigStore = {
+    /**
+     * Any value, which will be used as part of the cache key for each query.
+     *
+     * Changing this value at runtime will invalidate any cached queries, and re-execute them if needed.
+     **/
+    customQueryKey?: any;
+    /**
+     * Allows you to override the fetch options used when calling a query or mutation.
+     * This can be used for adding things like Authorization headers to every (or certain) requests.
+     */
+    customQueryFetchOptions?: (type: "query" | "mutation", queryName: string, queryArgs: any, url: string, opts: RequestInit) => RequestInit | Promise<RequestInit>;
+    /**
+     * Update aspects of the API client
+     */
+    set: (config: Partial<APIConfigStore>) => void;
+};
+export declare const useAPIConfig: import("zustand").UseBoundStore<import("zustand").StoreApi<APIConfigStore>>;

package/dist/app/lib/hooks/apiConfig.js

@@ -0,0 +1,4 @@
+import { create } from "zustand";
+export const useAPIConfig = create((set, get) => ({
+    set: (config) => set(config),
+}));

package/{hooks → dist/app/lib/hooks}/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./usePageLoad";
 export * from "./useAppData";
 export * from "./useRPC";
+export * from "./queryUtils";
+export * from "./apiConfig";

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

@@ -0,0 +1,5 @@
+export * from "./usePageLoad";
+export * from "./useAppData";
+export * from "./useRPC";
+export * from "./queryUtils";
+export * from "./apiConfig";

package/dist/app/lib/hooks/queryUtils.d.ts

@@ -0,0 +1,49 @@
+import { FetchQueryOptions, UndefinedInitialDataOptions, UseMutationOptions, UseMutationResult, UseQueryResult, UseInfiniteQueryResult, UndefinedInitialDataInfiniteOptions } from "@tanstack/react-query";
+type OptionalMaybes<T> = T extends any[] ? T : T extends {
+    [key: string]: any;
+} ? {
+    [K in keyof T]: T[K] extends null ? T[K] | undefined : T[K];
+} : T;
+type MaybeVars = {
+    [key: string]: any;
+} | undefined;
+export type QueryError = Error & {
+    messages: string[];
+    statusCode: number;
+};
+/** Regular queries */
+type CreateUseQueryOptions = {
+    name: string;
+};
+export type UseQueryFunction<TData, TVars> = ((args: OptionalMaybes<TVars>, options?: Omit<UndefinedInitialDataOptions<TData, QueryError, TData>, "queryKey" | "queryFn"> & {
+    headers?: Record<string, string>;
+}) => UseQueryResult<TData, QueryError>) & {
+    fetch: (args: OptionalMaybes<TVars>, options?: Omit<FetchQueryOptions<TData, QueryError, TData>, "queryKey" | "queryFn"> & {
+        headers?: Record<string, string>;
+    }) => Promise<TData>;
+};
+export declare function createUseQuery<TData extends any, TVars extends MaybeVars>(init: CreateUseQueryOptions): UseQueryFunction<TData, TVars>;
+/** Regular queries */
+type CreateUseInfiniteQueryOptions = {
+    name: string;
+    defaultLimit: number;
+    paths: Record<"nodesPath" | "pageInfoPath" | "endCursorPath" | "hasNextPagePath", string[]>;
+};
+export type UseInfiniteQueryFunction<TData, TVars> = (args: OptionalMaybes<Omit<TVars, "cursor">>, options?: Omit<UndefinedInitialDataInfiniteOptions<TData, QueryError, TData, any[]>, "queryKey" | "queryFn" | "initialData" | "initialPageParam" | "getNextPageParam" | "select"> & {
+    headers?: Record<string, string>;
+    /** Initial data can be passed in, but should match the original GraphQL query in structure (including nodes/hasNextPage/endCursor) */
+    initialData?: any;
+}) => UseInfiniteQueryResult<{
+    nodes: TData;
+    total?: number | null;
+}, QueryError>;
+export declare function createUseInfiniteQuery<TData extends any, TVars extends MaybeVars>(init: CreateUseInfiniteQueryOptions): UseInfiniteQueryFunction<TData, TVars>;
+export type UseMutationFunction<TData, TArgs> = ((options?: Omit<UseMutationOptions<TData, QueryError, TArgs>, "mutationFn"> & {
+    headers?: Record<string, string>;
+}) => UseMutationResult<TData, QueryError, TArgs>) & {
+    mutate: (args: OptionalMaybes<TArgs>, options?: Omit<FetchQueryOptions<TData, QueryError, TData>, "queryKey" | "queryFn"> & {
+        headers?: Record<string, string>;
+    }) => Promise<TData>;
+};
+export declare function createUseMutation<TData extends any, TArgs extends MaybeVars>(init: CreateUseQueryOptions): UseMutationFunction<TData, TArgs>;
+export {};

package/dist/app/lib/hooks/queryUtils.js

@@ -0,0 +1,180 @@
+import { useMutation, useQuery, useInfiniteQuery, } from "@tanstack/react-query";
+import { joinURL } from "ufo";
+import { getQueryClient } from "../../utils/query-client";
+import { useAPIConfig } from "./apiConfig";
+import { useEffect, useState } from "react";
+function createQueryError(messages, statusCode) {
+    const error = new Error(messages.join(", "));
+    error.statusCode = statusCode;
+    error.messages = messages;
+    return error;
+}
+const fetchGETQuery = async (name, params, opts) => {
+    let url;
+    let options = {
+        headers: opts?.headers,
+    };
+    if (env.serverless && env.client) {
+        url = `/_data/query/${name}`;
+    }
+    else if (env.serverless) {
+        url = joinURL(env.origin ?? "", `/wp-json/ed/v1/query/${name}`);
+    }
+    else {
+        url = `/wp-json/ed/v1/query/${name}`;
+    }
+    if (params)
+        url += "?params=" + encodeURIComponent(params);
+    // Apply API configuration
+    const apiConfig = useAPIConfig.getState();
+    if (apiConfig.customQueryFetchOptions) {
+        options = await apiConfig.customQueryFetchOptions?.("query", name, params, url, options);
+    }
+    const response = await fetch(url, options);
+    const payload = await response.json();
+    if (payload.errors?.length > 0) {
+        throw createQueryError(payload.errors.map((e) => e.message), response.status);
+    }
+    return payload.data;
+};
+export function createUseQuery(init) {
+    const hook = (args, options) => {
+        const customKey = useAPIConfig((state) => state.customQueryKey);
+        return useQuery({
+            queryKey: [init.name, args, options?.headers, options?.headers, customKey],
+            queryFn: (args) => fetchGETQuery(init.name, args.queryKey[1] ? JSON.stringify(args.queryKey[1]) : "", {
+                headers: options?.headers,
+            }),
+            ...options,
+        });
+    };
+    hook.fetch = async (args, options) => {
+        const customKey = useAPIConfig.getState().customQueryKey;
+        return getQueryClient().fetchQuery({
+            queryKey: [init.name, args, options?.headers, options?.headers, customKey],
+            queryFn: (args) => fetchGETQuery(init.name, args.queryKey[1] ? JSON.stringify(args.queryKey[1]) : "", {
+                headers: options?.headers,
+            }),
+            ...options,
+        });
+    };
+    return hook;
+}
+function selectByPath(data, path) {
+    return path.reduce((acc, key) => (acc ? acc[key] : null), data);
+}
+export function createUseInfiniteQuery(init) {
+    const hook = (args, options) => {
+        const customKey = useAPIConfig((state) => state.customQueryKey);
+        const [initial, setInitial] = useState(() => {
+            if (options?.initialData) {
+                const data = options?.initialData;
+                const endCursor = selectByPath(data, init.paths.endCursorPath);
+                const hasNextPage = selectByPath(data, init.paths.hasNextPagePath);
+                const nodes = selectByPath(data, init.paths.nodesPath);
+                if (!nodes)
+                    return {};
+                return {
+                    initialData: {
+                        pages: [{ nodes, endCursor, hasNextPage }],
+                        pageParams: [],
+                    },
+                };
+            }
+        });
+        useEffect(() => {
+            setInitial({
+                initialData: undefined,
+            });
+        }, []);
+        return useInfiniteQuery({
+            queryKey: [init.name, args, init.defaultLimit, options?.headers, options?.headers, customKey],
+            queryFn: async (args) => {
+                const finalArgs = {
+                    limit: args.queryKey[2],
+                    ...(args.queryKey[1] ?? {}),
+                    cursor: args.pageParam,
+                };
+                const data = await fetchGETQuery(init.name, JSON.stringify(finalArgs), {
+                    headers: options?.headers,
+                });
+                const endCursor = selectByPath(data, init.paths.endCursorPath);
+                const hasNextPage = selectByPath(data, init.paths.hasNextPagePath);
+                const nodes = selectByPath(data, init.paths.nodesPath);
+                const total = selectByPath(data, [...init.paths.pageInfoPath, "total"]);
+                return {
+                    nodes,
+                    hasNextPage,
+                    endCursor,
+                    total,
+                };
+            },
+            initialPageParam: "",
+            getNextPageParam: (lastPage) => {
+                // @ts-ignore
+                return lastPage.hasNextPage ? lastPage.endCursor : undefined;
+            },
+            select(data) {
+                return {
+                    nodes: data.pages.flatMap((page) => page.nodes),
+                    total: data.pages[data.pages.length - 1]?.total,
+                };
+            },
+            ...options,
+            ...initial,
+        });
+    };
+    return hook;
+}
+const fetchMutation = async (name, params, opts) => {
+    let url;
+    let options = {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+            ...opts?.headers,
+        },
+        body: JSON.stringify(params),
+    };
+    if (env.serverless && env.client) {
+        // Relative request (in browser)
+        url = `/_data/mutation/${name}`;
+    }
+    else if (env.serverless) {
+        // Request to the origin server (server to server)
+        url = joinURL(env.origin ?? "", `/wp-json/ed/v1/mutation/${name}`);
+    }
+    else {
+        // Request straight to the wordpress route
+        url = `/wp-json/ed/v1/mutation/${name}`;
+    }
+    // Apply API configuration
+    const apiConfig = useAPIConfig.getState();
+    if (apiConfig.customQueryFetchOptions) {
+        options = await apiConfig.customQueryFetchOptions?.("mutation", name, params, url, options);
+    }
+    const response = await fetch(url, options);
+    const payload = await response.json();
+    if (payload.errors?.length > 0) {
+        throw createQueryError(payload.errors.map((e) => e.message), response.status);
+    }
+    return payload.data;
+};
+export function createUseMutation(init) {
+    const hook = (options) => {
+        return useMutation({
+            mutationKey: [init.name],
+            mutationFn: (args) => fetchMutation(init.name, args, {
+                headers: options?.headers,
+            }),
+            ...options,
+        });
+    };
+    hook.mutate = async (args, options) => {
+        return fetchMutation(init.name, args, {
+            headers: options?.headers,
+        });
+    };
+    return hook;
+}

package/dist/app/lib/hooks/useAppData.d.ts

@@ -0,0 +1,4 @@
+type Selector<T> = (data: AppData) => T;
+declare function useAppData(): AppData;
+declare function useAppData<T>(selector: Selector<T>): T;
+export { useAppData };

package/dist/app/lib/hooks/useAppData.js

@@ -0,0 +1,11 @@
+import { useRouter } from "../routing";
+function useAppData(selector) {
+    const loader = useRouter((r) => r.loader);
+    if (selector) {
+        return selector(loader.appData);
+    }
+    else {
+        return loader.appData;
+    }
+}
+export { useAppData };

package/{hooks → dist/app/lib/hooks}/usePageLoad.d.ts

@@ -2,5 +2,5 @@ interface PageLoadStore {
     loading: boolean;
     setIsLoading(loading: boolean): void;
 }
-export declare const usePageLoad: import("zustand").UseBoundStore<PageLoadStore, import("zustand").StoreApi<PageLoadStore>>;
+export declare const usePageLoad: import("zustand").UseBoundStore<import("zustand").StoreApi<PageLoadStore>>;
 export {};

package/dist/app/lib/hooks/usePageLoad.js

@@ -0,0 +1,5 @@
+import { create } from "zustand";
+export const usePageLoad = create((set) => ({
+    loading: false,
+    setIsLoading: (loading) => set({ loading: loading }),
+}));

package/dist/app/lib/hooks/useRPC.d.ts

@@ -0,0 +1,9 @@
+export declare const useRPCQuery: RPCUseQuery;
+export declare const useRPCMutation: RPCUseMutation;
+export declare const useRPCInfiniteQuery: RPCUseInfiniteQuery;
+export declare const rpcClient: null;
+export type UseRPCMutationResult = any;
+export type UseRPCQueryResult = any;
+export type UseRPCInfiniteQueryResult = any;
+export declare const RPCClientError: null;
+export type RPCClientError = any;

package/dist/app/lib/hooks/useRPC.js

@@ -0,0 +1,9 @@
+const trpc = {};
+// @ts-ignore
+export const useRPCQuery = trpc.useQuery;
+// @ts-ignore
+export const useRPCMutation = trpc.useMutation;
+// @ts-ignore
+export const useRPCInfiniteQuery = trpc.useInfiniteQuery;
+export const rpcClient = null;
+export const RPCClientError = null;

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

@@ -0,0 +1,4 @@
+export * from "./read-block-manifest";
+export * from "./read-view-manifest";
+export * from "./read-admin-manifest";
+export * from "./internal-store";

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

@@ -0,0 +1,4 @@
+export * from "./read-block-manifest";
+export * from "./read-view-manifest";
+export * from "./read-admin-manifest";
+export * from "./internal-store";

package/dist/app/lib/internal/internal-store.d.ts

@@ -0,0 +1,9 @@
+import { FunctionComponent } from "react";
+type BlockManifest = Record<string, FunctionComponent<any>>;
+type Store = {
+    blocks: BlockManifest;
+};
+export declare const internalStore: Store & {
+    set<K extends keyof Store>(key: K, value: Store[K]): void;
+};
+export {};

package/dist/app/lib/internal/internal-store.js

@@ -0,0 +1,7 @@
+import { proxy, ref } from "valtio";
+export const internalStore = proxy({
+    blocks: {},
+    set(key, value) {
+        internalStore[key] = (value ? ref(value) : value);
+    },
+});

package/dist/app/lib/internal/read-admin-manifest.d.ts

@@ -0,0 +1,19 @@
+import type { FunctionComponent } from "react";
+import { FieldTypeDefinition } from "../admin";
+/**
+ * This file exists simply to prevent circular dependencies.
+ * The manifest itself sets the value of this object directly.
+ */
+type AdminManifest = {
+    fields: Record<string, () => Promise<FieldTypeDefinition<any>>>;
+    widgets: Record<string, () => Promise<{
+        component: FunctionComponent<any>;
+    }>>;
+};
+type AdminManifestStore = {
+    value: AdminManifest;
+    subscribe(cb: (value: AdminManifest) => void): () => void;
+    set(value: AdminManifest): void;
+};
+export declare const adminManifestReader: AdminManifestStore;
+export {};

package/dist/app/lib/internal/read-admin-manifest.js

@@ -0,0 +1,17 @@
+let subscribers = new Set();
+export const adminManifestReader = {
+    value: {
+        fields: {},
+        widgets: {},
+    },
+    subscribe(cb) {
+        subscribers.add(cb);
+        return () => {
+            subscribers.delete(cb);
+        };
+    },
+    set(value) {
+        this.value = value;
+        subscribers.forEach((cb) => cb(value));
+    },
+};

package/dist/app/lib/internal/read-block-manifest.d.ts

@@ -0,0 +1,15 @@
+import type { FunctionComponent } from "react";
+/**
+ * This file exists simply to prevent circular dependencies.
+ * The manifest itself sets the value of this object directly.
+ */
+type BlockManifest = Record<string, FunctionComponent<any>>;
+type PublicBlockManifest = Record<string, PublicBlockMeta>;
+type BlockManifestStore = {
+    value: BlockManifest;
+    info: PublicBlockManifest;
+    subscribe(cb: (value: BlockManifest) => void): () => void;
+    set(value: BlockManifest, info: PublicBlockManifest): void;
+};
+export declare const blockManifestReader: BlockManifestStore;
+export {};

package/dist/app/lib/internal/read-block-manifest.js

@@ -0,0 +1,16 @@
+let subscribers = new Set();
+export const blockManifestReader = {
+    value: {},
+    info: {},
+    subscribe(cb) {
+        subscribers.add(cb);
+        return () => {
+            subscribers.delete(cb);
+        };
+    },
+    set(value, info) {
+        this.value = value;
+        this.info = info;
+        subscribers.forEach((cb) => cb(value));
+    },
+};

package/dist/app/lib/internal/read-view-manifest.d.ts

@@ -0,0 +1,12 @@
+import type { FunctionComponent } from "react";
+/**
+ * This file exists simply to prevent circular dependencies.
+ * The manifest itself sets the value of this object directly.
+ */
+type ViewManifest = {
+    [K: string]: FunctionComponent<any>;
+};
+export declare const viewManifestReader: {
+    value: ViewManifest;
+};
+export {};

package/dist/app/lib/internal/read-view-manifest.js

@@ -0,0 +1,3 @@
+export const viewManifestReader = {
+    value: {},
+};