polen 0.0.2 → 0.0.4

package/build/_exports.d.ts

@@ -0,0 +1 @@
+export { VitePlugin } from './vite-plugin/_exports.js';

package/build/_exports.js

@@ -0,0 +1 @@
+export { VitePlugin } from './vite-plugin/_exports.js';

package/build/_namespace.d.ts

@@ -0,0 +1 @@
+export * as Polen from './_exports.js';

package/build/_namespace.js

@@ -0,0 +1 @@
+export * as Polen from './_exports.js';

package/build/app-template/components/ArgumentAnnotation.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import type { GraphQLArgument } from 'graphql';
+export interface Props {
+    data: GraphQLArgument;
+}
+/**
+ * Renders a single GraphQL argument in SDL syntax
+ */
+export declare const ArgumentAnnotation: FC<Props>;

package/build/app-template/components/ArgumentAnnotation.jsx

@@ -0,0 +1,15 @@
+import { Box, Flex, Text } from '@radix-ui/themes';
+import { TypeAnnotation } from './TypeAnnotation.jsx';
+/**
+ * Renders a single GraphQL argument in SDL syntax
+ */
+export const ArgumentAnnotation = ({ data }) => {
+    return (<Box as="div">
+      <Flex>
+        <Text>{data.name}</Text>
+        <Text>:&nbsp;</Text>
+
+        <TypeAnnotation type={data.type}/>
+      </Flex>
+    </Box>);
+};

package/build/app-template/components/ArgumentList.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+import type { GraphQLArgument } from 'graphql';
+export interface Props {
+    args: readonly GraphQLArgument[];
+}
+export declare const ArgumentsList: FC<Props>;

package/build/app-template/components/ArgumentList.jsx

@@ -0,0 +1,15 @@
+import { Box, Flex, Heading, Text } from '@radix-ui/themes';
+import { TypeAnnotation } from './TypeAnnotation.jsx';
+export const ArgumentsList = ({ args }) => {
+    if (args.length === 0)
+        return null;
+    return (<Flex direction="column">
+      <Heading size="1" weight="bold">Arguments</Heading>
+      {args.map(arg => (<Box key={arg.name}>
+          <Text>{arg.name}</Text>
+          <Text>:</Text>
+          <TypeAnnotation type={arg.type}/>
+          {arg.description && <Text as="p" size="2" color="gray">{arg.description}</Text>}
+        </Box>))}
+    </Flex>);
+};

package/build/app-template/components/ArgumentListAnnotation.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+import type { GraphQLField } from 'graphql';
+export interface Props {
+    field: GraphQLField<any, any>;
+}
+export declare const ArgumentListAnnotation: FC<Props>;

package/build/app-template/components/ArgumentListAnnotation.jsx

@@ -0,0 +1,22 @@
+import { Box, Text } from '@radix-ui/themes';
+import { ArgumentAnnotation } from './ArgumentAnnotation.jsx';
+import { Grafaid } from '../../lib/grafaid/index.js';
+import { FieldList } from './FieldList.jsx';
+export const ArgumentListAnnotation = ({ field }) => {
+    if (field.args.length === 0)
+        return null;
+    const inputObject = Grafaid.getIAP(field);
+    const inputObjectFields = inputObject
+        ? (<Box pl="3" style={{ borderLeft: `1px solid var(--gray-6)` }}>
+        <FieldList data={inputObject}/>
+      </Box>)
+        : null;
+    return (<>
+      <Text>(</Text>
+      <Box ml="2">
+        {field.args.map(arg => <ArgumentAnnotation key={arg.name} data={arg}/>)}
+        {inputObjectFields}
+      </Box>
+      <Text>)</Text>
+    </>);
+};

package/build/app-template/components/ColumnView.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+import type { GraphQLSchema } from 'graphql';
+export interface Props {
+    schema: GraphQLSchema;
+}
+export declare const ColumnView: FC<Props>;

package/build/app-template/components/ColumnView.jsx

@@ -0,0 +1,26 @@
+import { Box, Flex, Heading } from '@radix-ui/themes';
+import { Grafaid } from '../../lib/grafaid/index.js';
+import { Link } from './Link.jsx';
+import { entries } from '../../lib/prelude/main.js';
+export const ColumnView = ({ schema }) => {
+    const kindMap = Grafaid.getKindMap(schema);
+    const sections = entries(kindMap.list);
+    return (<Flex direction="column" gap="6">
+      {sections.map(([title, types]) => <TypeSection key={title} title={title} types={types}/>)}
+    </Flex>);
+};
+const TypeSection = ({ title, types }) => {
+    return (<Box>
+      <Heading size="3">{title}</Heading>
+      <TypeList types={types}/>
+    </Box>);
+};
+const TypeList = ({ types }) => {
+    return ((<Box>
+        {types.map(type => (<Box key={type.name}>
+            <Link to={`/reference/${type.name}`}>
+              {type.name}
+            </Link>
+          </Box>))}
+      </Box>));
+};

package/build/app-template/components/DeprecationReason.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+import type { Grafaid } from '../../lib/grafaid/index.js';
+export declare const DeprecationReason: FC<{
+    data: Grafaid.GraphQLField;
+}>;

package/build/app-template/components/DeprecationReason.jsx

@@ -0,0 +1,9 @@
+import { Text } from '@radix-ui/themes';
+import { Markdown } from './Markdown.jsx';
+export const DeprecationReason = ({ data }) => {
+    if (!data.deprecationReason)
+        return null;
+    return (<Text as="div" color="red">
+      <Markdown>{data.deprecationReason}</Markdown>
+    </Text>);
+};

package/build/app-template/components/Description.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+import type { Grafaid } from '../../lib/grafaid/index.js';
+import type { GraphQLNamedType } from 'graphql';
+export declare const Description: FC<{
+    data: GraphQLNamedType | Grafaid.GraphQLField;
+}>;

package/build/app-template/components/Description.jsx

@@ -0,0 +1,9 @@
+import { Text } from '@radix-ui/themes';
+import { Markdown } from './Markdown.jsx';
+export const Description = ({ data }) => {
+    if (!data.description)
+        return null;
+    return (<Text as="div" color="gray">
+      <Markdown>{data.description}</Markdown>
+    </Text>);
+};

package/build/app-template/components/Field.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+import type { BoxProps } from '@radix-ui/themes';
+import { Grafaid } from '../../lib/grafaid/index.js';
+export type Props = BoxProps & {
+    data: Grafaid.GraphQLField;
+};
+export declare const Field: FC<Props>;

package/build/app-template/components/Field.jsx

@@ -0,0 +1,19 @@
+import { Box, Text } from '@radix-ui/themes';
+import { ArgumentListAnnotation } from './ArgumentListAnnotation.jsx';
+import { TypeAnnotation } from './TypeAnnotation.jsx';
+import { Grafaid } from '../../lib/grafaid/index.js';
+import { DeprecationReason } from './DeprecationReason.jsx';
+import { Description } from './Description.jsx';
+export const Field = ({ data, ...boxProps }) => {
+    const argumentList = Grafaid.isOutputField(data) ? <ArgumentListAnnotation field={data}/> : null;
+    return (<Box {...boxProps}>
+      <Description data={data}/>
+      <DeprecationReason data={data}/>
+      <Text weight="medium">{data.name}</Text>
+      <Text>
+        {argumentList}
+        :{` `}
+        <TypeAnnotation type={data.type}/>
+      </Text>
+    </Box>);
+};

package/build/app-template/components/FieldList.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+import type { GraphQLNamedType } from 'graphql';
+export interface Props {
+    data: GraphQLNamedType;
+}
+export declare const FieldList: FC<Props>;

package/build/app-template/components/FieldList.jsx

@@ -0,0 +1,13 @@
+import { Box } from '@radix-ui/themes';
+import { Grafaid } from '../../lib/grafaid/index.js';
+import { Field } from './Field.jsx';
+export const FieldList = ({ data }) => {
+    if (!Grafaid.isTypeWithFields(data))
+        return null;
+    const fields = Grafaid.getFields(data);
+    if (fields.length === 0)
+        return null;
+    return (<Box>
+      {fields.map(field => (<Field mt="3" key={field.name} data={field}/>))}
+    </Box>);
+};

package/build/app-template/components/FieldListSection.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+import type { GraphQLNamedType } from 'graphql';
+export interface Props {
+    data: GraphQLNamedType;
+}
+export declare const FieldListSection: FC<Props>;

package/build/app-template/components/FieldListSection.jsx

@@ -0,0 +1,14 @@
+import { Box, Heading } from '@radix-ui/themes';
+import { Grafaid } from '../../lib/grafaid/index.js';
+import { FieldList } from './FieldList.jsx';
+export const FieldListSection = ({ data }) => {
+    if (!Grafaid.isTypeWithFields(data))
+        return null;
+    const fields = Grafaid.getFields(data);
+    if (fields.length === 0)
+        return null;
+    return (<Box>
+      <Heading>Fields</Heading>
+      <FieldList data={data}/>
+    </Box>);
+};

package/build/app-template/components/Link.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import type { LinkProps as LinkPropsReactRouter } from 'react-router';
+export declare const Link: FC<LinkPropsReactRouter>;

package/build/app-template/components/Link.jsx

@@ -0,0 +1,5 @@
+import { LinkRadix } from './RadixLink.jsx';
+import { Link as LinkReactRouter } from 'react-router';
+export const Link = props => (<LinkRadix asChild>
+    <LinkReactRouter {...props}></LinkReactRouter>
+  </LinkRadix>);

package/build/app-template/components/Markdown.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+export declare const Markdown: FC<{
+    children: string;
+}>;

package/build/app-template/components/Markdown.jsx

@@ -0,0 +1,13 @@
+import * as Marked from 'marked';
+export const Markdown = ({ children }) => {
+    const html = Marked.parse(children);
+    return (<div dangerouslySetInnerHTML={{ __html: html }}></div>
+    // <ReactMarkdown
+    //   components={{
+    //     p: ({ node: _, ...props }) => <p className="rt-Text" {...props} />,
+    //   }}
+    // >
+    //   {children}
+    // </ReactMarkdown>
+    );
+};

package/build/app-template/components/NamedType.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+import { type GraphQLNamedType } from 'graphql';
+export interface Props {
+    data: GraphQLNamedType;
+}
+export declare const NamedType: FC<Props>;

package/build/app-template/components/NamedType.jsx

@@ -0,0 +1,15 @@
+import { Box, Heading, Text } from '@radix-ui/themes';
+import { Markdown } from './Markdown.jsx';
+import { FieldListSection } from './FieldListSection.jsx';
+export const NamedType = ({ data }) => {
+    const description = data.description
+        ? (<Text as="div" color="gray">
+        <Markdown>{data.description}</Markdown>
+      </Text>)
+        : null;
+    return (<Box>
+      <Heading size="8">{data.name}</Heading>
+      {description}
+      <FieldListSection data={data}/>
+    </Box>);
+};

package/build/app-template/components/RadixLink.d.ts

@@ -0,0 +1 @@
+export { Link as LinkRadix } from '@radix-ui/themes';

package/build/app-template/components/RadixLink.jsx

@@ -0,0 +1 @@
+export { Link as LinkRadix } from '@radix-ui/themes';

package/build/app-template/components/TypeAnnotation.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import type { GraphQLType } from 'graphql';
+export interface Props {
+    type: GraphQLType;
+}
+/**
+ * Renders a GraphQL type recursively, with links for named types
+ */
+export declare const TypeAnnotation: FC<Props>;

package/build/app-template/components/TypeAnnotation.jsx

@@ -0,0 +1,42 @@
+import { isInputObjectType, isListType, isNamedType, isNonNullType, isScalarType } from 'graphql';
+import { Text } from '@radix-ui/themes';
+import { Link } from './Link.jsx';
+/**
+ * Renders a GraphQL type recursively, with links for named types
+ */
+export const TypeAnnotation = ({ type }) => {
+    // Handle NonNull type wrapper
+    if (isNonNullType(type)) {
+        return (<>
+        <TypeAnnotation type={type.ofType}/>
+        <Text color="gray">!</Text>
+      </>);
+    }
+    // Handle List type wrapper
+    if (isListType(type)) {
+        return (<>
+        <Text color="gray">[</Text>
+        <TypeAnnotation type={type.ofType}/>
+        <Text color="gray">]</Text>
+      </>);
+    }
+    // Handle named types
+    if (isNamedType(type)) {
+        const namedType = type;
+        // Handle input object types
+        if (isInputObjectType(namedType)) {
+            return (<Link to={`/reference/${namedType.name}`}>
+          <Text color="green">{namedType.name}</Text>
+        </Link>);
+        }
+        // If it's an expandable type (object or interface), make it a link
+        // if (Grafaid.isExpandableType(namedType)) {
+        return (<Link to="/reference/${namedType.name}">
+        <Text color={isScalarType(namedType) ? `purple` : `blue`}>{namedType.name}</Text>
+      </Link>);
+        // For scalar and other non-expandable types, just render the name
+        // return <Text color="purple">{namedType.name}</Text>
+    }
+    // Fallback for any other case (shouldn't happen in standard GraphQL usage)
+    return <Text>{String(type)}</Text>;
+};

package/build/app-template/components/TypeFieldsLinkList.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+import type { GraphQLInterfaceType, GraphQLObjectType } from 'graphql';
+export interface Props {
+    type: GraphQLObjectType | GraphQLInterfaceType;
+}
+export declare const TypeFieldsLinkList: FC<Props>;

package/build/app-template/components/TypeFieldsLinkList.jsx

@@ -0,0 +1,16 @@
+import { Box, Flex, Heading } from '@radix-ui/themes';
+import { Link } from './Link.jsx';
+export const TypeFieldsLinkList = ({ type }) => {
+    return ((<Box>
+        <Heading>{type.name}</Heading>
+        <Flex direction="column">
+          {Object.values(type.getFields()).map(field => {
+            return ((<Box key={field.name}>
+                  <Link to={`/reference/${type.name}/${field.name}`}>
+                    {field.name}
+                  </Link>
+                </Box>));
+        })}
+        </Flex>
+      </Box>));
+};

package/build/app-template/entry.client.d.ts

@@ -0,0 +1 @@
+import '@radix-ui/themes/styles.css';

package/build/app-template/entry.client.jsx

@@ -0,0 +1,22 @@
+// TODO it seems more logical to have this asset imported in the server entry.
+// But then, we won't get it from the client manifest. But we could get it from the server manifest. Should we do that?
+// But then, that wouldn't work for SPA. Does that matter? Just put a conditional here e.g. if (import.meta.env.PROD) ...?
+import '@radix-ui/themes/styles.css';
+import { RouterProvider, createBrowserRouter } from 'react-router';
+import { routes } from './routes.jsx';
+import { ReactDomClient } from '../lib/react-dom-client/_namespace.js';
+import { StrictMode } from 'react';
+// SPA
+// const router = createBrowserRouter(routes)
+// createRoot(document).render(
+//   <RouterProvider router={router} />,
+// )
+// SSR
+const router = createBrowserRouter(routes, {
+    // @ts-expect-error
+    // eslint-disable-next-line
+    hydrationData: window.__staticRouterHydrationData,
+});
+ReactDomClient.hydrateRoot(document, (<StrictMode>
+      <RouterProvider router={router}/>
+    </StrictMode>));

package/build/app-template/entry.server.d.ts

@@ -0,0 +1,3 @@
+import { Hono } from 'hono';
+declare const app: Hono<import("hono/types").BlankEnv, import("hono/types").BlankSchema, "/">;
+export default app;

package/build/app-template/entry.server.jsx

@@ -0,0 +1,96 @@
+import viteClientAssetManifest from 'virtual:polen/vite/client/manifest';
+import { Hono } from 'hono';
+import { StaticRouterProvider, createStaticHandler, createStaticRouter } from 'react-router';
+import { routes } from './routes.jsx';
+import { ReactDomServer } from '../lib/react-dom-server/_namespace.js';
+import { StrictMode } from 'react';
+import { debug } from '../lib/debug/debug.js';
+const getRouteHeaders = (context) => {
+    const leaf = context.matches[context.matches.length - 1];
+    if (!leaf)
+        return new Headers();
+    const actionHeaders = context.actionHeaders[leaf.route.id];
+    const loaderHeaders = context.loaderHeaders[leaf.route.id];
+    const headers = new Headers(actionHeaders);
+    if (loaderHeaders) {
+        for (const [key, value] of loaderHeaders.entries()) {
+            headers.append(key, value);
+        }
+    }
+    return headers;
+};
+const getAssetHtmlTags = (manifest) => {
+    // TODO: We could inline this into the generated server.
+    // TODO: this only applies in production
+    // Insert links to assets
+    const css = [];
+    const js = [];
+    for (const manifestChunk of Object.values(manifest)) {
+        if (manifestChunk.isEntry) {
+            js.push(`<script type="module" src="/${manifestChunk.file}"></script>`);
+        }
+        for (const cssItem of manifestChunk.css ?? []) {
+            css.push(`<link rel="stylesheet" href="/${cssItem}">`);
+        }
+    }
+    return {
+        css,
+        js,
+    };
+};
+const injectAssetHtmlTags = (html, htmlTags) => {
+    if (htmlTags.css.length > 0) {
+        html = html.replace(`</head>`, `${htmlTags.css.join(``)}</head>`);
+    }
+    if (htmlTags.js.length > 0) {
+        html = html.replace(`</body>`, `${htmlTags.js.join(``)}</body>`);
+    }
+    return html;
+};
+const app = new Hono();
+const staticHandler = createStaticHandler(routes);
+app.get(`*`, async (ctx) => {
+    const staticHandlerContext = await staticHandler.query(ctx.req.raw);
+    // console.log(staticHandlerContext)
+    if (staticHandlerContext instanceof Response) {
+        return staticHandlerContext;
+    }
+    const router = createStaticRouter(staticHandler.dataRoutes, staticHandlerContext);
+    let html = ``;
+    try {
+        html = ReactDomServer.renderToString((<StrictMode>
+          <StaticRouterProvider router={router} context={staticHandlerContext}/>
+        </StrictMode>));
+    }
+    catch (cause) {
+        throw new Error(`Failed to server side render the HTML`, { cause });
+    }
+    if (import.meta.env.PROD) {
+        const htmlTags = getAssetHtmlTags(viteClientAssetManifest);
+        html = injectAssetHtmlTags(html, htmlTags);
+    }
+    if (import.meta.env.DEV) {
+        debug(`transformIndexHtml`);
+        // @see https://github.com/honojs/vite-plugins/issues/141
+        html = transformIndexHtml(html);
+    }
+    const headers = getRouteHeaders(staticHandlerContext);
+    headers.set(`Content-Type`, `text/html; charset=utf-8`);
+    return new Response(`<!DOCTYPE html>${html}`, {
+        status: staticHandlerContext.statusCode,
+        headers,
+    });
+});
+const transformIndexHtml = (html) => {
+    const REACT_FAST_REFRESH_PREAMBLE = `import RefreshRuntime from '/@react-refresh'
+RefreshRuntime.injectIntoGlobalHook(window)
+window.$RefreshReg$ = () => {}
+window.$RefreshSig$ = () => (type) => type
+window.__vite_plugin_react_preamble_installed__ = true`;
+    const scripts = `` +
+        `<script type="module" src="/@vite/client"></script>` +
+        `<script type="module" async>${REACT_FAST_REFRESH_PREAMBLE}</script>`;
+    html = html.replace(`</body>`, `${scripts}</body>`);
+    return html;
+};
+export default app;

package/build/app-template/routes/index.d.ts

@@ -0,0 +1 @@
+export declare const index: import("react-router").IndexRouteObject;

package/build/app-template/routes/index.jsx

@@ -0,0 +1,6 @@
+import { Link } from 'react-router';
+import { createRouteIndex } from '../../lib/react-router-helpers.js';
+const Component = () => <Link to="/reference">Reference</Link>;
+export const index = createRouteIndex({
+    Component,
+});

package/build/app-template/routes/reference.$type.$field.d.ts

@@ -0,0 +1,4 @@
+export declare const reference$type$field: {
+    path: string;
+    Component: () => string | import("react").JSX.Element;
+};

package/build/app-template/routes/reference.$type.$field.jsx

@@ -0,0 +1,24 @@
+import { buildASTSchema } from 'graphql';
+import { Grafaid } from '../../lib/grafaid/index.js';
+import { Field } from '../components/Field.jsx';
+import { createRoute } from '../../lib/react-router-helpers.js';
+import { useParams, useRouteLoaderData } from 'react-router';
+const Component = () => {
+    const params = useParams();
+    const data = useRouteLoaderData(`/reference`);
+    const schema = buildASTSchema(data.documentNode);
+    const type = schema.getType(params.type);
+    if (!type)
+        return `Could not find type ${params.type}`;
+    if (!Grafaid.isTypeWithFields(type))
+        return `Type ${params.type} does not have fields`;
+    const fields = type.getFields();
+    const field = fields[params.field];
+    if (!field)
+        return `Could not find field ${params.field} on type ${params.type}`;
+    return <Field data={field}/>;
+};
+export const reference$type$field = createRoute({
+    path: `:type/:field`,
+    Component,
+});

package/build/app-template/routes/reference.$type.d.ts

@@ -0,0 +1,4 @@
+export declare const reference$type: {
+    path: string;
+    Component: () => string | import("react").JSX.Element;
+};

package/build/app-template/routes/reference.$type.jsx

@@ -0,0 +1,18 @@
+import { createRoute } from '../../lib/react-router-helpers.js';
+import { useParams, useRouteLoaderData } from 'react-router';
+import { buildASTSchema } from 'graphql';
+import { NamedType } from '../components/NamedType.jsx';
+const Component = () => {
+    const params = useParams();
+    const data = useRouteLoaderData(`/reference`);
+    // const data = reference$type.parentRoute.useLoaderData()
+    const schema = buildASTSchema(data.documentNode);
+    const type = schema.getType(params.type);
+    if (!type)
+        return `Could not find type ${params.type}`;
+    return <NamedType data={type}/>;
+};
+export const reference$type = createRoute({
+    path: `:type`,
+    Component,
+});

package/build/app-template/routes/reference.d.ts

@@ -0,0 +1,12 @@
+import type { DocumentNode } from 'graphql';
+export declare const reference: {
+    path: string;
+    loader: () => {
+        documentNode: DocumentNode;
+    };
+    Component: () => import("react").JSX.Element;
+    children: {
+        path: string;
+        Component: () => string | import("react").JSX.Element;
+    }[];
+};

package/build/app-template/routes/reference.jsx

@@ -0,0 +1,34 @@
+import { buildASTSchema, parse } from 'graphql';
+import { ColumnView } from '../components/ColumnView.jsx';
+import { Box, Flex } from '@radix-ui/themes';
+import { Outlet, useLoaderData } from 'react-router';
+// import { reference$type$field } from './reference.$type.$field.jsx'
+import schemaFileContent from 'virtual:polen/assets/graphql-schema';
+import { createRoute } from '../../lib/react-router-helpers.js';
+import { reference$type } from './reference.$type.jsx';
+const loader = () => {
+    const documentNode = parse(schemaFileContent);
+    // console.log(`running loader`, documentNode)
+    return {
+        documentNode,
+    };
+};
+const Component = () => {
+    const data = useLoaderData();
+    const schema = buildASTSchema(data.documentNode);
+    return (<Flex direction="row" align="start">
+      <ColumnView schema={schema}/>
+      <Box width="40rem">
+        <Outlet />
+      </Box>
+    </Flex>);
+};
+export const reference = createRoute({
+    path: `/reference`,
+    loader,
+    Component,
+    children: [
+        reference$type,
+        // reference$type$field,
+    ],
+});