polen 0.0.4 → 0.0.6

package/README.md

@@ -5,5 +5,51 @@ A framework for delightful GraphQL developer portals ✨.
 ## Installation
 
 ```
-npm add polen
+npm add polen vite
 ```
+
+Vite is a peer dependency of Polen.
+
+## Usage
+
+The following shows minimal default usage.
+
+1. Have a GraphQL schema file in the same directory that you run `vite`.
+
+   ```graphql
+   type Query {
+      	hello: String
+    	}
+   ```
+
+2. Use Polen in your Vite config.
+
+   ```ts
+   import { defineConfig } from 'vite'
+   import { Polen } from 'polen'
+
+   export default defineConfig({
+     plugins: [
+       Polen.VitePlugin({
+         // options here...
+       }),
+     ],
+   })
+   ```
+
+3. Build your developer portal.
+
+   ```sh
+   npx vite build --app
+   ```
+
+4. You now have a deployable developer portal. Try it locally
+   (http://localhost:5174):
+
+   ```sh
+   node dist/entry.js
+   ```
+
+## Examples
+
+You can find working examples in the [examples](./examples) directory.

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

@@ -3,4 +3,4 @@ import type { GraphQLSchema } from 'graphql';
 export interface Props {
     schema: GraphQLSchema;
 }
-export declare const ColumnView: FC<Props>;
+export declare const TypeIndex: FC<Props>;

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

@@ -2,7 +2,7 @@ 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 }) => {
+export const TypeIndex = ({ schema }) => {
     const kindMap = Grafaid.getKindMap(schema);
     const sections = entries(kindMap.list);
     return (<Flex direction="column" gap="6">

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

@@ -1,3 +1,4 @@
 import type { FC } from 'react';
+import type { LinkPropsRadix } from './RadixLink.jsx';
 import type { LinkProps as LinkPropsReactRouter } from 'react-router';
-export declare const Link: FC<LinkPropsReactRouter>;
+export declare const Link: FC<LinkPropsReactRouter & LinkPropsRadix>;

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

@@ -1,5 +1,9 @@
 import { LinkRadix } from './RadixLink.jsx';
 import { Link as LinkReactRouter } from 'react-router';
-export const Link = props => (<LinkRadix asChild>
-    <LinkReactRouter {...props}></LinkReactRouter>
-  </LinkRadix>);
+export const Link = props => {
+    const { underline, color, m, mt, mb, ml, mr, my, mx } = props;
+    const radixProps = { underline, color, m, mt, mb, ml, mr, my, mx };
+    return (<LinkRadix asChild {...radixProps}>
+      <LinkReactRouter {...props}></LinkReactRouter>
+    </LinkRadix>);
+};

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

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

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

@@ -31,7 +31,7 @@ export const TypeAnnotation = ({ type }) => {
         }
         // If it's an expandable type (object or interface), make it a link
         // if (Grafaid.isExpandableType(namedType)) {
-        return (<Link to="/reference/${namedType.name}">
+        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

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

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

package/build/app-template/components/TypeIndex.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 TypeIndex = ({ 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/routes/home.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,6 +1,8 @@
-import { Link } from 'react-router';
 import { createRouteIndex } from '../../lib/react-router-helpers.js';
-const Component = () => <Link to="/reference">Reference</Link>;
+import { Box } from '@radix-ui/themes';
+const Component = () => {
+    return <Box>home todo</Box>;
+};
 export const index = createRouteIndex({
     Component,
 });

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

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

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

@@ -0,0 +1,23 @@
+import { Link, Outlet } from 'react-router';
+import { createRouteIndex } from '../../lib/react-router-helpers.js';
+import { Box } from '@radix-ui/themes';
+import { reference } from './reference.jsx';
+const Component = () => {
+    return (<Box>
+      <Box>
+        <Box>
+          <Link to="/reference">Home</Link>
+          <Link to="/reference">Reference</Link>
+        </Box>
+      </Box>
+      <Box>
+        <Outlet />
+      </Box>
+    </Box>);
+};
+export const index = createRouteIndex({
+    Component,
+    children: [
+        reference,
+    ],
+});

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

@@ -1,14 +1,12 @@
 import { buildASTSchema, parse } from 'graphql';
-import { ColumnView } from '../components/ColumnView.jsx';
-import { Box, Flex } from '@radix-ui/themes';
+import { TypeIndex } from '../components/TypeIndex.jsx';
+import { Container, 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,
     };
@@ -17,10 +15,10 @@ const Component = () => {
     const data = useLoaderData();
     const schema = buildASTSchema(data.documentNode);
     return (<Flex direction="row" align="start">
-      <ColumnView schema={schema}/>
-      <Box width="40rem">
+      <TypeIndex schema={schema}/>
+      <Container>
         <Outlet />
-      </Box>
+      </Container>
     </Flex>);
 };
 export const reference = createRoute({
@@ -29,6 +27,5 @@ export const reference = createRoute({
     Component,
     children: [
         reference$type,
-        // reference$type$field,
     ],
 });

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

@@ -1,6 +1,5 @@
 export declare const Component: () => import("react").JSX.Element;
 export declare const root: {
-    id: string;
     path: string;
     Component: () => import("react").JSX.Element;
     children: (import("react-router").IndexRouteObject | {

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

@@ -1,29 +1,53 @@
+import { Box, Text } from '@radix-ui/themes';
+import { index } from './index.jsx';
+import { Link as LinkReactRouter } from 'react-router';
+import { GitHubLogoIcon } from '@radix-ui/react-icons';
+import { Link } from '../components/Link.jsx';
 import { Outlet, ScrollRestoration } from 'react-router';
-import { Theme } from '@radix-ui/themes';
+import { Flex, Theme } from '@radix-ui/themes';
 import { createRoute } from '../../lib/react-router-helpers.js';
-import { index } from './index.jsx';
 import { reference } from './reference.jsx';
 import radixStylesUrl from '@radix-ui/themes/styles.css?url';
 import entryClientUrl from '../entry.client.jsx?url';
+import templateVariables from 'virtual:polen/template/variables';
 export const Component = () => {
     return (<html lang="en">
       <head>
         <meta charSet="utf-8"/>
         <meta name="viewport" content="width=device-width, initial-scale=1"/>
-        <title>My Developer Portal</title>
+        <title>{templateVariables.title}</title>
         {import.meta.env.DEV && <link rel="stylesheet" href={radixStylesUrl}/>}
       </head>
-      <body>
-        <Theme>
-          <Outlet />
-        </Theme>
+      <body style={{ margin: 0 }}>
+        <Layout />
         <ScrollRestoration />
         {import.meta.env.DEV && <script type="module" src={entryClientUrl}></script>}
       </body>
     </html>);
 };
+const Layout = () => {
+    return (<Theme asChild>
+      <Box m="8">
+        <Flex align="center" gap="8" pb="4" mb="8" style={{
+            borderBottom: `1px solid var(--gray-3)`,
+        }}>
+          <LinkReactRouter to="/" style={{ color: `inherit`, textDecoration: `none` }}>
+            <Flex align="center" gap="2">
+              <GitHubLogoIcon style={{ width: 30, height: 30 }}/>
+              <Text size="3" weight="medium">{templateVariables.title}</Text>
+            </Flex>
+          </LinkReactRouter>
+          <Flex direction="row" gap="4">
+            <Link color="gray" to="/reference">Reference</Link>
+          </Flex>
+        </Flex>
+        <Box>
+          <Outlet />
+        </Box>
+      </Box>
+    </Theme>);
+};
 export const root = createRoute({
-    id: `root`, // todo remove
     path: `/`,
     Component,
     children: [

package/build/vite-plugin/_exports.js

@@ -7,6 +7,7 @@ import { Build } from './build.js';
 import { nodeAdapter as HonoDevServerNodeAdapter } from '@hono/vite-dev-server/node';
 import HonoDevServer from '@hono/vite-dev-server';
 const virtualIdentifierAssetGraphqlSchema = virtualIdentifier([`assets`, `graphql-schema`]);
+const virtualIdentifierTemplateVariables = virtualIdentifier([`template`, `variables`]);
 const codes = {
     MODULE_LEVEL_DIRECTIVE: `MODULE_LEVEL_DIRECTIVE`,
     CIRCULAR_DEPENDENCY: `CIRCULAR_DEPENDENCY`,
@@ -21,12 +22,19 @@ export const VitePlugin = (polenConfigInput) => {
         }),
         ReactVite(),
         {
-            name: `polen-virtual-graphql-schema`,
-            ...Vite.VirtualIdentifier.toHooks(virtualIdentifierAssetGraphqlSchema, async () => {
-                const schema = await Fs.readFile(polenConfig.schema.path, `utf-8`);
-                const moduleContent = `export default ${JSON.stringify(schema)}`;
-                return moduleContent;
-            }),
+            name: `polen-virtual`,
+            ...Vite.VirtualIdentifier.toHooks$FromMap(new Map([
+                [virtualIdentifierAssetGraphqlSchema, async () => {
+                        const schema = await Fs.readFile(polenConfig.schema.path, `utf-8`);
+                        const moduleContent = `export default ${JSON.stringify(schema)}`;
+                        return moduleContent;
+                    }],
+                // eslint-disable-next-line
+                [virtualIdentifierTemplateVariables, async () => {
+                        const moduleContent = `export default ${JSON.stringify(polenConfig.templateVariables)}`;
+                        return moduleContent;
+                    }],
+            ])),
         },
         {
             name: `polen-build-client`,

package/build/vite-plugin/configurator/main.d.ts

@@ -1,4 +1,14 @@
 export interface ConfigInput {
+    templateVariables?: {
+        /**
+         * Title of the app.
+         *
+         * Used in the navigation bar and in the title tag.
+         *
+         * @defaultValue `My Developer Portal`
+         */
+        title?: string;
+    };
     /**
      * Path to the GraphQL schema file
      */
@@ -10,7 +20,11 @@ export interface ConfigInput {
      */
     ssr?: boolean;
 }
+export interface TemplateVariables {
+    title: string;
+}
 export interface Config {
+    templateVariables: TemplateVariables;
     mode: string;
     schema: {
         path: string;

package/build/vite-plugin/configurator/main.js

@@ -3,6 +3,9 @@ const pathAppTemplateDir = Path.join(import.meta.dirname, `../../app-template`);
 const workspaceDir = process.cwd();
 const outDir = Path.join(workspaceDir, `dist`);
 const configInputDefaults = {
+    templateVariables: {
+        title: `My Developer Portal`,
+    },
     mode: `client`,
     schema: {
         path: Path.join(workspaceDir, `schema.graphql`),
@@ -29,6 +32,10 @@ export const normalizeInput = (configInput) => {
     if (configInput?.ssr !== undefined) {
         config.ssr.enabled = configInput.ssr;
     }
+    config.templateVariables = {
+        ...config.templateVariables,
+        ...configInput?.templateVariables,
+    };
     if (configInput?.schemaPath !== undefined) {
         config.schema.path = Path.absolutify(configInput.schemaPath, config.paths.workspaceDir);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polen",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
   "repository": {
     "type": "git",
@@ -16,25 +16,19 @@
   ],
   "dependencies": {
     "@hono/node-server": "^1.14.0",
-    "@hono/vite-build": "^1.5.0",
     "@hono/vite-dev-server": "^0.19.0",
+    "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/themes": "^3.2.1",
     "consola": "^3.4.2",
     "defu": "^6.1.4",
     "es-toolkit": "^1.34.1",
     "fuse.js": "^7.1.0",
-    "get-port-please": "^3.1.2",
     "graphql": "^16.10.0",
     "hono": "^4.7.5",
     "marked": "^15.0.7",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-helmet-async": "^2.0.5",
-    "react-markdown": "^10.1.0",
-    "react-router": "^7.5.0",
-    "rollup": "^4.39.0",
-    "tsx": "^4.19.3",
-    "zod": "^3.24.2"
+    "react-router": "^7.5.0"
   },
   "devDependencies": {
     "@changesets/cli": "^2.28.1",
@@ -47,6 +41,7 @@
     "@typescript-eslint/eslint-plugin": "^8.29.0",
     "@typescript-eslint/parser": "^8.29.0",
     "@vitejs/plugin-react": "^4.3.4",
+    "dripip": "^0.10.0",
     "eslint": "^9.24.0",
     "eslint-plugin-deprecation": "^3.0.0",
     "eslint-plugin-only-warn": "^1.1.0",
@@ -56,6 +51,7 @@
     "eslint-plugin-unused-imports": "^4.1.4",
     "globals": "^16.0.0",
     "publint": "^0.3.10",
+    "tsx": "^4.19.3",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.29.0",
     "vite": "^6.2.5",
@@ -78,6 +74,6 @@
     "check:lint": "eslint . --max-warnings 0",
     "check:types": "tsc --noEmit",
     "check:publint": "publint run --strict",
-    "release:version": "changeset version && git commit -am \"chore: release\""
+    "release:version": "changeset version && git commit -am \"chore: release\" && git push"
   }
 }