houdini-react 2.0.0-next.8 → 2.0.0

package/vite/index.js

@@ -0,0 +1,397 @@
+import { fs, path } from "houdini";
+import {
+  app_component_path,
+  adapter_config_path,
+  plugin_dir,
+  client_build_directory
+} from "houdini/router/conventions";
+import { load_manifest } from "houdini/router/manifest";
+import { existsSync, mkdirSync, writeFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { build } from "vite";
+import { transform_file } from "./transform.js";
+const REACT_TSCONFIG_STUB = `{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "$houdini": ["."],
+            "$houdini/*": ["./*"],
+            "~": ["../src"],
+            "~/*": ["../src/*"]
+        },
+        "rootDirs": ["..", "./types"],
+        "target": "ESNext",
+        "useDefineForClassFields": true,
+        "lib": ["DOM", "DOM.Iterable", "ESNext"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "esModuleInterop": false,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "module": "ESNext",
+        "moduleResolution": "Bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx"
+    },
+    "include": [
+        "ambient.d.ts",
+        "./types/**/$types.d.ts",
+        "../vite.config.ts",
+        "../src/**/*.js",
+        "../src/**/*.ts",
+        "../src/**/*.jsx",
+        "../src/**/*.tsx",
+        "../src/+app.d.ts"
+    ],
+    "exclude": ["../node_modules/**", "./[!ambient.d.ts]**"]
+}
+`;
+const _require = createRequire(import.meta.url);
+let reactStreamingServerPath = "";
+try {
+  const main = _require.resolve("react-streaming");
+  const pkgDir = main.replace(/\/dist\/.*$/, "");
+  reactStreamingServerPath = path.join(pkgDir, "dist/server/index.node-and-web.js");
+} catch {
+}
+function index_default(ctx) {
+  let manifest;
+  let viteEnv;
+  let devServer = false;
+  let isSSRBuild = false;
+  let cfCache = null;
+  return {
+    name: "houdini-react",
+    configResolved(config) {
+      isSSRBuild = !!config.build.ssr;
+    },
+    async config(userConfig, env) {
+      viteEnv = env;
+      const runtimeDir = path.join(
+        ctx.config.root_dir,
+        ctx.config.config_file.runtimeDir ?? ".houdini"
+      );
+      try {
+        mkdirSync(runtimeDir, { recursive: true });
+        const tsconfigPath = path.join(runtimeDir, "tsconfig.json");
+        if (!existsSync(tsconfigPath)) {
+          writeFileSync(tsconfigPath, REACT_TSCONFIG_STUB);
+        }
+      } catch {
+      }
+      if (userConfig.build?.ssr) {
+        return reactStreamingServerPath ? { resolve: { alias: { "react-streaming/server": reactStreamingServerPath } } } : {};
+      }
+      try {
+        manifest = await load_manifest({ config: ctx.config });
+      } catch (e) {
+        console.log(
+          "something went wrong. please try again. \n error: " + e.message
+        );
+        manifest = {
+          pages: {},
+          layouts: {},
+          page_queries: {},
+          layout_queries: {},
+          artifacts: [],
+          local_schema: false,
+          local_yoga: false,
+          component_fields: {}
+        };
+      }
+      let conf = {
+        build: { rollupOptions: {} }
+      };
+      if (env.command === "build") {
+        conf.base = "/assets";
+      }
+      const compiledAssetsDir = client_build_directory(ctx.config);
+      await fs.mkdirp(compiledAssetsDir);
+      conf.build = {
+        outDir: compiledAssetsDir,
+        rollupOptions: {
+          output: {
+            assetFileNames: "assets/[name].js",
+            entryFileNames: "[name].js"
+          },
+          // only the client app entry belongs in the client build. The adapter entry
+          // imports src/server/+config (session keys, OAuth client secrets) and is built
+          // separately into the ssr/ directory by closeBundle below; building it here too
+          // would land a server bundle in the client-served assets dir and leak those
+          // secrets. Keeping client and server outputs in separate directories lets the
+          // adapter serve only the client assets.
+          input: {
+            "entries/app": app_component_path(ctx.config)
+          }
+        }
+      };
+      if (env.command === "build" && ctx.adapter && ctx.adapter.includePaths) {
+        const extra = typeof ctx.adapter.includePaths === "function" ? ctx.adapter.includePaths({ config: ctx.config }) : ctx.adapter.includePaths;
+        Object.assign(conf.build.rollupOptions.input ?? {}, extra);
+      }
+      for (const [id, page] of Object.entries(manifest.pages)) {
+        ;
+        conf.build.rollupOptions.input[`pages/${id}`] = `virtual:houdini/pages/${page.id}.jsx`;
+      }
+      return reactStreamingServerPath ? {
+        ...conf,
+        resolve: { alias: { "react-streaming/server": reactStreamingServerPath } }
+      } : conf;
+    },
+    resolveId(id) {
+      if (id.includes("virtual:houdini")) {
+        return id.substring(id.indexOf("virtual:houdini"));
+      }
+      return null;
+    },
+    hotUpdate() {
+      cfCache = null;
+    },
+    async transform(code, filepath, options) {
+      filepath = path.posixify(filepath);
+      if (filepath.startsWith("/src/")) {
+        filepath = path.join(process.cwd(), filepath);
+      }
+      if (!ctx.config.includeFile(filepath)) {
+        return;
+      }
+      const stripHeaders = !options?.ssr && /(?:^|\/)\+(?:page|layout)\.[jt]sx?$/.test(filepath);
+      if (cfCache === null) {
+        try {
+          cfCache = ctx.db.all(
+            "SELECT type, field, fragment FROM component_fields"
+          );
+        } catch {
+          cfCache = [];
+        }
+      }
+      return transform_file(
+        {
+          config: ctx.config,
+          content: code,
+          filepath: path.posixify(filepath),
+          watch_file: this.addWatchFile.bind(this)
+        },
+        cfCache,
+        { stripHeaders }
+      );
+    },
+    async closeBundle() {
+      if (viteEnv.mode !== "production" || devServer || isSSRBuild) {
+        return;
+      }
+      if (!ctx.adapter || ctx.adapter?.disableServer) {
+        return;
+      }
+      const compiledAssetsDir = client_build_directory(ctx.config);
+      await build({
+        build: {
+          ssr: true,
+          outDir: path.join(compiledAssetsDir, "ssr"),
+          rollupOptions: {
+            output: {
+              assetFileNames: "assets/[name].js",
+              entryFileNames: "[name].js"
+            },
+            input: {
+              "entries/adapter": adapter_config_path(ctx.config)
+            }
+          }
+        }
+      });
+    },
+    async load(id) {
+      if (!id.startsWith("virtual:houdini")) {
+        return;
+      }
+      if (!manifest) {
+        return;
+      }
+      let [, which, arg] = id.split("/");
+      const parsedPath = arg ? path.parse(arg) : "";
+      const pageName = parsedPath ? parsedPath.name : "";
+      if (which === "pages") {
+        let page = manifest.pages[pageName];
+        if (!page) {
+          try {
+            manifest = await load_manifest({ config: ctx.config });
+            page = manifest.pages[pageName];
+          } catch {
+          }
+        }
+        if (!page) {
+          throw new Error("unknown page" + pageName);
+        }
+        const pendingQueries = page.queries.filter((query) => {
+          const pg = Object.values(manifest.page_queries).find((q) => q.name === query);
+          if (pg) {
+            return pg.loading;
+          }
+          const layout = Object.values(manifest.layout_queries).find(
+            (q) => q.name === query
+          );
+          return layout?.loading;
+        });
+        return `
+import App from '$houdini/plugins/houdini-react/units/render/App'
+import Component from '$houdini/plugins/houdini-react/units/entries/${pageName}.jsx'
+import { hydrate_page } from '$houdini/plugins/houdini-react/runtime/hydration'
+hydrate_page(App, Component, '${pageName}', ${JSON.stringify(pendingQueries)})
+`;
+      }
+      if (which === "artifacts") {
+        return `
+import artifact from '$houdini/artifacts/${pageName}'
+import { register_artifact } from '$houdini/plugins/houdini-react/runtime/hydration'
+register_artifact('${pageName}', artifact)
+`;
+      }
+      if (which === "static-entry") {
+        return `
+import App from '$houdini/plugins/houdini-react/units/render/App'
+import manifest from '$houdini/plugins/houdini-react/runtime/manifest'
+import { mount_static_app } from '$houdini/plugins/houdini-react/runtime/hydration'
+mount_static_app(App, manifest)
+`;
+      }
+    },
+    async configureServer(server) {
+      devServer = true;
+      const onUnhandledRejection = (err) => {
+        console.error("\n[houdini] dev server error (server still running):\n", err, "\n");
+      };
+      process.on("unhandledRejection", onUnhandledRejection);
+      server.httpServer?.once(
+        "close",
+        () => process.off("unhandledRejection", onUnhandledRejection)
+      );
+      server.httpServer?.once("listening", () => {
+        const addr = server.httpServer?.address();
+        if (addr && typeof addr === "object") {
+          process.env.HOUDINI_PORT = String(addr.port);
+        }
+        const root = ctx.config.root_dir;
+        const entry = ["+index.tsx", "+index.jsx"].map((f) => path.join(root, "src", f)).find((f) => existsSync(f));
+        if (entry) {
+          server.ssrLoadModule(entry).catch(() => {
+          });
+        }
+      });
+      server.middlewares.use(async (req, res, next) => {
+        if (!req.url) {
+          next();
+          return;
+        }
+        const url = req.url.split("?")[0];
+        if (url.startsWith("/@") || url.startsWith("/virtual:") || url.startsWith("/node_modules/") || /\.[a-z]+$/i.test(url)) {
+          next();
+          return;
+        }
+        const manifest_module = await server.ssrLoadModule(
+          path.join(plugin_dir(ctx.config, "houdini-react"), "runtime", "manifest.ts")
+        );
+        const router_manifest = manifest_module.default;
+        for (const id of Object.keys(manifest_module.route_headers ?? {})) {
+          if (router_manifest.pages[id]) {
+            router_manifest.pages[id].headers = manifest_module.route_headers[id];
+          }
+        }
+        const { createServerAdapter } = await server.ssrLoadModule(
+          adapter_config_path(ctx.config)
+        );
+        const requestHeaders = new Headers();
+        for (const header of Object.entries(req.headers ?? {})) {
+          requestHeaders.set(header[0], header[1]);
+        }
+        const port = server.config.server.port ?? 5173;
+        const request = new Request(
+          `http://localhost:${port}` + req.url,
+          req.method === "POST" ? {
+            method: req.method,
+            headers: requestHeaders,
+            body: await getBody(req)
+          } : void 0
+        );
+        let documentPremable = `<script type="module" src="/@vite/client" async=""></script>`;
+        try {
+          const transformed = await server.transformIndexHtml(
+            req.url,
+            "<!DOCTYPE html><html><head></head><body></body></html>"
+          );
+          const headMatch = transformed.match(/<head>([\s\S]*?)<\/head>/);
+          if (headMatch?.[1]?.trim()) {
+            documentPremable = headMatch[1].trim();
+          }
+        } catch {
+        }
+        const cssLinkSet = /* @__PURE__ */ new Set();
+        for (const [url2] of server.moduleGraph.urlToModuleMap) {
+          const cleanUrl = url2.split("?")[0];
+          if (!cleanUrl.includes("node_modules") && cleanUrl.endsWith(".css") && !cleanUrl.endsWith(".module.css")) {
+            cssLinkSet.add(cleanUrl);
+          }
+        }
+        const cssLinks = [...cssLinkSet];
+        res.setHeader("Content-Type", "text/html; charset=utf-8");
+        try {
+          const result = await createServerAdapter({
+            production: false,
+            manifest: router_manifest,
+            assetPrefix: "/virtual:houdini",
+            pipe: res,
+            documentPremable,
+            cssLinks
+          })(request);
+          if (result && result.status === 404) {
+            return next();
+          }
+          if (result && typeof result !== "boolean") {
+            if (res.closed) {
+              return;
+            }
+            for (const header of result.headers ?? []) {
+              res.setHeader(header[0], header[1]);
+            }
+            if (result.status >= 300 && result.status < 400) {
+              res.writeHead(result.status, {
+                Location: result.headers.get("Location") ?? "",
+                ...[...result.headers].reduce(
+                  (headers, [key, value]) => ({
+                    ...headers,
+                    [key]: value
+                  }),
+                  {}
+                )
+              });
+            } else {
+              res.write(await result.text());
+            }
+            res.end();
+          }
+        } catch (e) {
+          console.error(e);
+          res.end();
+        }
+      });
+    }
+  };
+}
+function getBody(request) {
+  return new Promise((resolve) => {
+    const bodyParts = [];
+    let body;
+    request.on("data", (chunk) => {
+      bodyParts.push(chunk);
+    }).on("end", () => {
+      body = Buffer.concat(bodyParts).toString();
+      resolve(body);
+    });
+  });
+}
+export {
+  index_default as default
+};

package/vite/strip-headers.d.ts

@@ -0,0 +1 @@
+export declare function strip_named_export(script: any, name: string): void;

package/vite/strip-headers.js

@@ -0,0 +1,35 @@
+function strip_named_export(script, name) {
+  const body = script.body;
+  for (let i = body.length - 1; i >= 0; i--) {
+    const node = body[i];
+    if (node.type !== "ExportNamedDeclaration") {
+      continue;
+    }
+    if (node.declaration) {
+      const decl = node.declaration;
+      if (decl.type === "FunctionDeclaration" && decl.id?.name === name) {
+        body.splice(i, 1);
+        continue;
+      }
+      if (decl.type === "VariableDeclaration") {
+        decl.declarations = decl.declarations.filter(
+          (d) => !(d.id?.type === "Identifier" && d.id.name === name)
+        );
+        if (decl.declarations.length === 0) {
+          body.splice(i, 1);
+        }
+        continue;
+      }
+      continue;
+    }
+    if (node.specifiers?.length) {
+      node.specifiers = node.specifiers.filter((s) => s.exported?.name !== name);
+      if (node.specifiers.length === 0) {
+        body.splice(i, 1);
+      }
+    }
+  }
+}
+export {
+  strip_named_export
+};

package/vite/transform.d.ts

@@ -0,0 +1,13 @@
+import type { TransformPage } from 'houdini';
+import type { SourceMapInput } from 'rollup';
+export type ComponentFieldRow = {
+    type: string;
+    field: string;
+    fragment: string;
+};
+export declare function transform_file(page: TransformPage, cfRows: ComponentFieldRow[], opts?: {
+    stripHeaders?: boolean;
+}): Promise<{
+    code: string;
+    map?: SourceMapInput;
+}>;

package/vite/transform.js

@@ -0,0 +1,105 @@
+import * as graphql from "graphql";
+import {
+  ArtifactKind,
+  artifact_import,
+  ensure_imports,
+  find_graphql,
+  parseJS,
+  path,
+  printJS
+} from "houdini";
+import { componentField_unit_path, houdini_root } from "houdini/router/conventions";
+import * as recast from "recast";
+import { strip_named_export } from "./strip-headers.js";
+const AST = recast.types.builders;
+async function transform_file(page, cfRows, opts = {}) {
+  const isJSX = page.filepath.endsWith(".tsx") || page.filepath.endsWith(".jsx");
+  if (!isJSX && !page.filepath.endsWith(".ts") && !page.filepath.endsWith(".js")) {
+    return { code: page.content, map: page.map };
+  }
+  const script = parseJS(page.content, isJSX ? { plugins: ["jsx"] } : {});
+  if (opts.stripHeaders) {
+    strip_named_export(script, "headers");
+  }
+  const cfMap = {};
+  for (const row of cfRows) {
+    if (row.type && row.field && row.fragment) {
+      cfMap[row.type] ??= {};
+      cfMap[row.type][row.field] = row.fragment;
+    }
+  }
+  await find_graphql(page.config, script, {
+    skipGraphqlType: true,
+    tag({ node, artifact, parsedDocument }) {
+      const { id: artifactRef } = artifact_import({ page, script, artifact });
+      const properties = [AST.objectProperty(AST.stringLiteral("artifact"), artifactRef)];
+      if (is_paginated(parsedDocument) || is_refetchable(parsedDocument)) {
+        if (artifact.kind !== ArtifactKind.Query) {
+          const refetchName = artifact.name + (is_paginated(parsedDocument) ? "_Pagination_Query" : "_Refetch_Query");
+          const { id: refetchRef } = artifact_import({
+            page,
+            script,
+            artifact: { name: refetchName }
+          });
+          properties.push(
+            AST.objectProperty(AST.stringLiteral("refetchArtifact"), refetchRef)
+          );
+        } else {
+          properties.push(
+            AST.objectProperty(AST.stringLiteral("refetchArtifact"), artifactRef)
+          );
+        }
+      }
+      if (Object.keys(cfMap).length > 0) {
+        const typeInfo = new graphql.TypeInfo(page.config.schema);
+        graphql.visit(
+          parsedDocument,
+          graphql.visitWithTypeInfo(typeInfo, {
+            Field(fieldNode) {
+              const parentType = typeInfo.getParentType();
+              const typeName = parentType?.name;
+              if (!typeName) return;
+              const fragmentName = cfMap[typeName]?.[fieldNode.name.value];
+              if (!fragmentName) return;
+              const entryPointPath = componentField_unit_path(
+                page.config,
+                fragmentName
+              );
+              ensure_imports({
+                script,
+                sourceModule: "$houdini/" + path.relative(houdini_root(page.config), entryPointPath)
+              });
+            }
+          })
+        );
+      }
+      node.replaceWith(AST.objectExpression(properties));
+    }
+  });
+  return printJS(script);
+}
+function is_paginated(doc) {
+  let paginated = false;
+  graphql.visit(doc, {
+    Directive(node) {
+      if (node.name.value === "paginate") {
+        paginated = true;
+      }
+    }
+  });
+  return paginated;
+}
+function is_refetchable(doc) {
+  let refetchable = false;
+  graphql.visit(doc, {
+    Directive(node) {
+      if (node.name.value === "refetchable") {
+        refetchable = true;
+      }
+    }
+  });
+  return refetchable;
+}
+export {
+  transform_file
+};

package/README.md

@@ -1,36 +0,0 @@
-<div align="center">
-  <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/HoudiniGraphql/houdini/main/.github/assets/logo_l.svg">
-    <img height="140" alt="Houdini's logo (dark or light)" src="https://raw.githubusercontent.com/HoudiniGraphql/houdini/main/.github/assets/logo_d.svg">
-  </picture>
-  <br />
-  <br />
-  <strong>
-    The disappearing GraphQL clients.
-  </strong>
-  <br />
-  <br />
-  <a href="https://npmjs.org/package/houdini">
-    <img src="https://img.shields.io/npm/v/houdini.svg" alt="version" />
-  </a>
-  <a href="https://github.com/HoudiniGraphql/houdini/actions">
-    <img src="https://github.com/HoudiniGraphql/houdini/actions/workflows/tests.yml/badge.svg" alt="CI Tests" />
-  </a>
-  <a href="https://github.com/HoudiniGraphql/houdini">
-    <img src="https://img.shields.io/github/stars/HoudiniGraphql/houdini.svg?label=stars" alt="github stars" />
-  </a>
-  <a href="https://npmjs.org/package/houdini">
-    <img src="https://img.shields.io/npm/dm/houdini.svg" alt="downloads" />
-  </a>
-  <a href="https://github.com/HoudiniGraphql/houdini/blob/main/LICENSE">
-    <img src="https://img.shields.io/github/license/HoudiniGraphql/houdini.svg?maxAge=2592000" alt="license" />
-  </a>
-</div>
-
-----
-
-At its core, houdini seeks to enable a high quality developer experience
-without compromising bundle size. Like Svelte, houdini shifts what is
-traditionally handled by a bloated runtime into a compile step that allows
-for the generation of an incredibly lean GraphQL abstraction for your application.
-See more at <a href="https://www.houdinigraphql.com">HoudiniGraphQL.com</a> 🚀

package/build/plugin/codegen/entries/documentWrappers.d.ts

@@ -1,6 +0,0 @@
-import { type Config, type ProjectManifest, type Document } from 'houdini';
-export declare function generate_routing_document_wrappers({ manifest, config, documents, }: {
-    manifest: ProjectManifest;
-    config: Config;
-    documents: Record<string, Document>;
-}): Promise<void[]>;

package/build/plugin/codegen/entries/fallbacks.d.ts

@@ -1,5 +0,0 @@
-import { type Config, type ProjectManifest } from 'houdini';
-export declare function generate_fallbacks({ config, project, }: {
-    config: Config;
-    project: ProjectManifest;
-}): Promise<void>;

package/build/plugin/codegen/entries/index.d.ts

@@ -1,16 +0,0 @@
-import type { Config, ProjectManifest, PageManifest, Document } from 'houdini';
-import type { ComponentFieldData } from '..';
-export declare function generate_entries({ config, manifest, documents, componentFields, }: {
-    config: Config;
-    manifest: ProjectManifest;
-    documents: Document[];
-    componentFields: ComponentFieldData[];
-}): Promise<void>;
-export type PageBundleInput = {
-    id: string;
-    page: PageManifest;
-    project: ProjectManifest;
-    config: Config;
-    documents: Record<string, Document>;
-    componentFields: ComponentFieldData[];
-};

package/build/plugin/codegen/entries/pages.d.ts

@@ -1,2 +0,0 @@
-import type { PageBundleInput } from '.';
-export declare function generate_page_entries(args: PageBundleInput): Promise<void>;

package/build/plugin/codegen/index.d.ts

@@ -1,17 +0,0 @@
-import type { Config, GenerateHookInput, ProjectManifest } from 'houdini';
-import { processComponentFieldDirective } from 'houdini';
-/**
- * The router is fundamentally a component that knows how to render
- * a particular component tree for a given url. This is driven by something
- * we call the applications "manifest".
- *
- * In react, the tree of route directories maps to a component hierarchy
- * with suspense boundaries sprinkled when there is a loading directive
- * present on a query.
- */
-export default function routerCodegen({ config, manifest, documents, }: GenerateHookInput & {
-    manifest: ProjectManifest;
-}): Promise<void>;
-export type ComponentFieldData = ReturnType<typeof processComponentFieldDirective> & Config['componentFields'][string][string] & {
-    type: string;
-};

package/build/plugin/codegen/manifest.d.ts

@@ -1,5 +0,0 @@
-import { type Config, type ProjectManifest } from 'houdini';
-export declare function write_manifest({ config, manifest, }: {
-    config: Config;
-    manifest: ProjectManifest;
-}): Promise<void>;

package/build/plugin/codegen/render.d.ts

@@ -1,7 +0,0 @@
-import { type Config, type ProjectManifest } from 'houdini';
-import type { ComponentFieldData } from '.';
-export declare function generate_renders({ componentFields, config, manifest, }: {
-    componentFields: ComponentFieldData[];
-    config: Config;
-    manifest: ProjectManifest;
-}): Promise<void>;

package/build/plugin/codegen/router.d.ts

@@ -1,7 +0,0 @@
-import { type Config, type ProjectManifest } from 'houdini';
-export declare function format_router_manifest({ config, manifest, exportDefaultStatement, }: {
-    config: Config;
-    manifest: ProjectManifest;
-    exportDefaultStatement: (name: string) => string;
-    importStatement: (from: string, as: string) => string;
-}): string;

package/build/plugin/codegen/typeRoot.d.ts

@@ -1,5 +0,0 @@
-import { type Config, type ProjectManifest } from 'houdini';
-export declare function generate_type_root({ config, manifest, }: {
-    config: Config;
-    manifest: ProjectManifest;
-}): Promise<void>;

package/build/plugin/config.d.ts

@@ -1,4 +0,0 @@
-import type { Config } from 'houdini';
-import type { HoudiniReactPluginConfig } from '.';
-export declare function plugin_config(config: Config): HoudiniReactPluginConfig;
-export declare function test_config(): Promise<Config>;