houdini-svelte 1.2.7 → 1.2.8

package/build/plugin/kit.d.ts

@@ -14,6 +14,7 @@ export declare function is_root_layout(config: Config, filename: string): boolea
 export declare function is_root_layout_server(config: Config, filename: string): boolean;
 export declare function is_root_layout_script(config: Config, filename: string): boolean;
 export declare function is_layout_component(framework: Framework, filename: string): boolean;
+export declare function is_page_component(framework: Framework, filename: string): boolean;
 export declare function is_layout(framework: Framework, filename: string): boolean;
 export declare function is_component(config: Config, framework: Framework, filename: string): boolean;
 export declare function page_query_path(config: Config, filename: string): string;
@@ -25,6 +26,7 @@ export type RouteVisitor = {
     inlineLayoutQueries?: RouteVisitorHandler<graphql.OperationDefinitionNode>;
     routePageQuery?: RouteVisitorHandler<graphql.OperationDefinitionNode>;
     routeLayoutQuery?: RouteVisitorHandler<graphql.OperationDefinitionNode>;
+    routeComponentQuery?: RouteVisitorHandler<graphql.OperationDefinitionNode>;
     layoutQueries?: RouteVisitorHandler<graphql.OperationDefinitionNode[]>;
     pageQueries?: RouteVisitorHandler<graphql.OperationDefinitionNode[]>;
     layoutExports?: RouteVisitorHandler<string[]>;
@@ -34,6 +36,10 @@ export type RouteVisitor = {
         svelteTypeFilePath: string;
         layoutQueries: graphql.OperationDefinitionNode[];
         pageQueries: graphql.OperationDefinitionNode[];
+        componentQueries: {
+            query: graphql.OperationDefinitionNode;
+            componentPath: string;
+        }[];
         layoutExports: string[];
         pageExports: string[];
     }>;

package/build/plugin-cjs/index.js

@@ -186350,6 +186350,9 @@ function is_root_layout_script(config4, filename) {
 function is_layout_component(framework2, filename) {
   return framework2 === "kit" && filename.endsWith("+layout.svelte");
 }
+function is_page_component(framework2, filename) {
+  return framework2 === "kit" && filename.endsWith("+page.svelte");
+}
 function is_layout(framework2, filename) {
   return is_layout_script(framework2, filename) || is_layout_component(framework2, filename);
 }
@@ -186380,6 +186383,7 @@ async function walk_routes(config4, framework2, visitor, dirpath = config4.route
   let layoutExports = [];
   let pageQueries = [];
   let layoutQueries = [];
+  let componentQueries = [];
   let validRoute = false;
   for (const child of await fs_exports.readdir(dirpath)) {
     const childPath = path_exports.join(dirpath, child);
@@ -186426,7 +186430,7 @@ async function walk_routes(config4, framework2, visitor, dirpath = config4.route
           layoutQueries.push(definition);
         }
       });
-    } else if (is_component(config4, framework2, child)) {
+    } else if (is_page_component(framework2, childPath)) {
       validRoute = true;
       const contents = await fs_exports.readFile(childPath);
       if (!contents) {
@@ -186451,6 +186455,31 @@ async function walk_routes(config4, framework2, visitor, dirpath = config4.route
           pageQueries.push(definition);
         }
       });
+    } else if (is_component(config4, framework2, childPath)) {
+      validRoute = true;
+      const contents = await fs_exports.readFile(childPath);
+      if (!contents) {
+        continue;
+      }
+      const parsed = await parseSvelte(contents);
+      if (!parsed) {
+        continue;
+      }
+      const { script } = parsed;
+      await find_graphql(config4, script, {
+        where: (tag2) => {
+          try {
+            return !!config4.extractQueryDefinition(tag2);
+          } catch {
+            return false;
+          }
+        },
+        tag: async ({ parsedDocument }) => {
+          let definition = config4.extractQueryDefinition(parsedDocument);
+          await visitor.routeComponentQuery?.(definition, childPath);
+          componentQueries.push({ query: definition, componentPath: childPath });
+        }
+      });
     } else if (child === plugin_config(config4).layoutQueryFilename) {
       validRoute = true;
       const contents = await fs_exports.readFile(childPath);
@@ -186500,6 +186529,7 @@ async function walk_routes(config4, framework2, visitor, dirpath = config4.route
         svelteTypeFilePath,
         layoutQueries,
         pageQueries,
+        componentQueries,
         layoutExports,
         pageExports
       },
@@ -186897,6 +186927,7 @@ async function svelteKitGenerator(framework2, { config: config4 }) {
       svelteTypeFilePath,
       layoutQueries,
       pageQueries,
+      componentQueries,
       layoutExports,
       pageExports
     }) {
@@ -186919,6 +186950,14 @@ async function svelteKitGenerator(framework2, { config: config4 }) {
           uniqueLayoutQueries.push(layout);
         }
       }
+      const componentNames = [];
+      const uniqueComponentQueries = [];
+      for (const component of componentQueries) {
+        if (!componentNames.includes(component.query.name.value)) {
+          componentNames.push(component.query.name.value);
+          uniqueComponentQueries.push(component);
+        }
+      }
       if (!config4.include.some((path3) => path3.includes("js")) && (!plugin_config(config4).static || uniquePageQueries.length > 0 || uniqueLayoutQueries.length > 0)) {
         console.error(
           `\u26A0\uFE0F You are using at least one page/layout query but aren't "include"ing .js files in your config. 
@@ -186934,6 +186973,11 @@ async function svelteKitGenerator(framework2, { config: config4 }) {
           config4,
           uniqueLayoutQueries
         );
+        const componentQueryTypeImports = getComponentTypeImports(
+          dirpath,
+          config4,
+          uniqueComponentQueries
+        );
         const beforePageLoad = pageExports.includes(houdini_before_load_fn);
         const afterPageLoad = pageExports.includes(houdini_afterLoad_fn);
         const onPageError = pageExports.includes(houdini_on_error_fn);
@@ -186952,6 +186996,11 @@ async function svelteKitGenerator(framework2, { config: config4 }) {
           config4,
           uniquePageQueries
         );
+        const component_append_VariablesFunction = append_ComponentVariablesFunction(
+          dirpath,
+          config4,
+          uniqueComponentQueries
+        );
         const layout_append_beforeLoad = append_beforeLoad(beforeLayoutLoad, "Layout");
         const page_append_beforeLoad = append_beforeLoad(beforePageLoad, "Page");
         const layout_append_afterLoad = append_afterLoad(
@@ -186992,11 +187041,11 @@ async function svelteKitGenerator(framework2, { config: config4 }) {
 import type { ${functionImportsToBring.join(
           ", "
         )} } from '${houdiniRelative}/plugins/houdini-svelte/runtime/types';` : "";
-        typeImports = typeImports.concat(functionImports).concat(layoutTypeImports).concat(pageTypeImports);
+        typeImports = typeImports.concat(functionImports).concat(layoutTypeImports).concat(pageTypeImports).concat(componentQueryTypeImports);
         const layoutParams = `${layoutQueries.length > 0 && !utilityTypes.includes("LayoutParams") ? "\ntype LayoutParams = LayoutLoadEvent['params'];" : ""}`;
         const pageParams = `${pageQueries.length > 0 && !utilityTypes.includes("PageParams") ? "\ntype PageParams = PageLoadEvent['params'];" : ""}`;
         utilityTypes = utilityTypes.concat(layoutParams).concat(pageParams).replaceAll(/\$types\.js/gm, "$houdini");
-        typeExports = typeExports.concat(append_loadInput([...layoutQueries, ...pageQueries])).concat(layout_append_beforeLoad).concat(page_append_beforeLoad).concat(layout_append_afterLoad).concat(page_append_afterLoad).concat(layout_append_onError).concat(page_append_onError).concat(layout_append_VariablesFunction).concat(page_append_VariablesFunction).replace(
+        typeExports = typeExports.concat(append_loadInput([...layoutQueries, ...pageQueries])).concat(layout_append_beforeLoad).concat(page_append_beforeLoad).concat(layout_append_afterLoad).concat(page_append_afterLoad).concat(layout_append_onError).concat(page_append_onError).concat(layout_append_VariablesFunction).concat(page_append_VariablesFunction).concat(component_append_VariablesFunction).replace(
           /(?<=LayoutData = )([\s\S]*?)(?=;)/,
           `Expand<$1 & { ${layoutQueries.map((query3) => {
             const name = query3.name.value;
@@ -187041,6 +187090,20 @@ import { ${name}$result, ${name}$input } from '${houdiniRelative}/${config4.arti
 import { ${name}Store } from '${houdiniRelative}/plugins/houdini-svelte/${stores_directory_name()}/${name}';`;
   }).join("\n");
 }
+function getComponentTypeImports(dirpath, config4, queries) {
+  if (queries.length === 0) {
+    return "";
+  }
+  let typeFile = "\nimport type { ComponentProps } from 'svelte'\n";
+  return typeFile + queries.map((query3) => {
+    const no_ext = path_exports.parse(query3.componentPath).name;
+    const file = path_exports.parse(query3.componentPath);
+    return `
+import ${no_ext} from './${file.base}'
+import type { ${query3.query.name.value}$input } from '${path_exports.relative(dirpath, path_exports.join(config4.artifactDirectory, query3.query.name.value)).replace("/$houdini", "")}'
+`;
+  }).join("\n");
+}
 function append_VariablesFunction(type, filepath, config4, queries) {
   const { params } = route_params(filepath);
   const garunteed_args = params.filter((param) => !param.optional).map((param) => param.name);
@@ -187065,6 +187128,18 @@ export type ${config4.variableFunctionName(
     )} = VariableFunction<${type}Params, ${input_type}>;`;
   }).join("\n");
 }
+function append_ComponentVariablesFunction(filepath, config4, queries) {
+  return queries.map((query3) => {
+    const no_ext = path_exports.parse(query3.componentPath).name;
+    const prop_type = no_ext + "Props";
+    return `
+type ${prop_type} = ComponentProps<${no_ext}>
+export type ${config4.variableFunctionName(
+      query3.query.name.value
+    )} = <_Props extends ${prop_type}>(args: { props: _Props }) => ${query3.query.name.value}$input
+`;
+  }).join("\n");
+}
 function append_loadInput(queries) {
   return `${queries.filter((q) => q.variableDefinitions?.length).length ? `
 type LoadInput = { ${queries.filter((query3) => query3.variableDefinitions?.length).map((query3) => {

package/build/plugin-esm/index.js

@@ -186340,6 +186340,9 @@ function is_root_layout_script(config4, filename) {
 function is_layout_component(framework2, filename) {
   return framework2 === "kit" && filename.endsWith("+layout.svelte");
 }
+function is_page_component(framework2, filename) {
+  return framework2 === "kit" && filename.endsWith("+page.svelte");
+}
 function is_layout(framework2, filename) {
   return is_layout_script(framework2, filename) || is_layout_component(framework2, filename);
 }
@@ -186370,6 +186373,7 @@ async function walk_routes(config4, framework2, visitor, dirpath = config4.route
   let layoutExports = [];
   let pageQueries = [];
   let layoutQueries = [];
+  let componentQueries = [];
   let validRoute = false;
   for (const child of await fs_exports.readdir(dirpath)) {
     const childPath = path_exports.join(dirpath, child);
@@ -186416,7 +186420,7 @@ async function walk_routes(config4, framework2, visitor, dirpath = config4.route
           layoutQueries.push(definition);
         }
       });
-    } else if (is_component(config4, framework2, child)) {
+    } else if (is_page_component(framework2, childPath)) {
       validRoute = true;
       const contents = await fs_exports.readFile(childPath);
       if (!contents) {
@@ -186441,6 +186445,31 @@ async function walk_routes(config4, framework2, visitor, dirpath = config4.route
           pageQueries.push(definition);
         }
       });
+    } else if (is_component(config4, framework2, childPath)) {
+      validRoute = true;
+      const contents = await fs_exports.readFile(childPath);
+      if (!contents) {
+        continue;
+      }
+      const parsed = await parseSvelte(contents);
+      if (!parsed) {
+        continue;
+      }
+      const { script } = parsed;
+      await find_graphql(config4, script, {
+        where: (tag2) => {
+          try {
+            return !!config4.extractQueryDefinition(tag2);
+          } catch {
+            return false;
+          }
+        },
+        tag: async ({ parsedDocument }) => {
+          let definition = config4.extractQueryDefinition(parsedDocument);
+          await visitor.routeComponentQuery?.(definition, childPath);
+          componentQueries.push({ query: definition, componentPath: childPath });
+        }
+      });
     } else if (child === plugin_config(config4).layoutQueryFilename) {
       validRoute = true;
       const contents = await fs_exports.readFile(childPath);
@@ -186490,6 +186519,7 @@ async function walk_routes(config4, framework2, visitor, dirpath = config4.route
         svelteTypeFilePath,
         layoutQueries,
         pageQueries,
+        componentQueries,
         layoutExports,
         pageExports
       },
@@ -186887,6 +186917,7 @@ async function svelteKitGenerator(framework2, { config: config4 }) {
       svelteTypeFilePath,
       layoutQueries,
       pageQueries,
+      componentQueries,
       layoutExports,
       pageExports
     }) {
@@ -186909,6 +186940,14 @@ async function svelteKitGenerator(framework2, { config: config4 }) {
           uniqueLayoutQueries.push(layout);
         }
       }
+      const componentNames = [];
+      const uniqueComponentQueries = [];
+      for (const component of componentQueries) {
+        if (!componentNames.includes(component.query.name.value)) {
+          componentNames.push(component.query.name.value);
+          uniqueComponentQueries.push(component);
+        }
+      }
       if (!config4.include.some((path3) => path3.includes("js")) && (!plugin_config(config4).static || uniquePageQueries.length > 0 || uniqueLayoutQueries.length > 0)) {
         console.error(
           `\u26A0\uFE0F You are using at least one page/layout query but aren't "include"ing .js files in your config. 
@@ -186924,6 +186963,11 @@ async function svelteKitGenerator(framework2, { config: config4 }) {
           config4,
           uniqueLayoutQueries
         );
+        const componentQueryTypeImports = getComponentTypeImports(
+          dirpath,
+          config4,
+          uniqueComponentQueries
+        );
         const beforePageLoad = pageExports.includes(houdini_before_load_fn);
         const afterPageLoad = pageExports.includes(houdini_afterLoad_fn);
         const onPageError = pageExports.includes(houdini_on_error_fn);
@@ -186942,6 +186986,11 @@ async function svelteKitGenerator(framework2, { config: config4 }) {
           config4,
           uniquePageQueries
         );
+        const component_append_VariablesFunction = append_ComponentVariablesFunction(
+          dirpath,
+          config4,
+          uniqueComponentQueries
+        );
         const layout_append_beforeLoad = append_beforeLoad(beforeLayoutLoad, "Layout");
         const page_append_beforeLoad = append_beforeLoad(beforePageLoad, "Page");
         const layout_append_afterLoad = append_afterLoad(
@@ -186982,11 +187031,11 @@ async function svelteKitGenerator(framework2, { config: config4 }) {
 import type { ${functionImportsToBring.join(
           ", "
         )} } from '${houdiniRelative}/plugins/houdini-svelte/runtime/types';` : "";
-        typeImports = typeImports.concat(functionImports).concat(layoutTypeImports).concat(pageTypeImports);
+        typeImports = typeImports.concat(functionImports).concat(layoutTypeImports).concat(pageTypeImports).concat(componentQueryTypeImports);
         const layoutParams = `${layoutQueries.length > 0 && !utilityTypes.includes("LayoutParams") ? "\ntype LayoutParams = LayoutLoadEvent['params'];" : ""}`;
         const pageParams = `${pageQueries.length > 0 && !utilityTypes.includes("PageParams") ? "\ntype PageParams = PageLoadEvent['params'];" : ""}`;
         utilityTypes = utilityTypes.concat(layoutParams).concat(pageParams).replaceAll(/\$types\.js/gm, "$houdini");
-        typeExports = typeExports.concat(append_loadInput([...layoutQueries, ...pageQueries])).concat(layout_append_beforeLoad).concat(page_append_beforeLoad).concat(layout_append_afterLoad).concat(page_append_afterLoad).concat(layout_append_onError).concat(page_append_onError).concat(layout_append_VariablesFunction).concat(page_append_VariablesFunction).replace(
+        typeExports = typeExports.concat(append_loadInput([...layoutQueries, ...pageQueries])).concat(layout_append_beforeLoad).concat(page_append_beforeLoad).concat(layout_append_afterLoad).concat(page_append_afterLoad).concat(layout_append_onError).concat(page_append_onError).concat(layout_append_VariablesFunction).concat(page_append_VariablesFunction).concat(component_append_VariablesFunction).replace(
           /(?<=LayoutData = )([\s\S]*?)(?=;)/,
           `Expand<$1 & { ${layoutQueries.map((query3) => {
             const name = query3.name.value;
@@ -187031,6 +187080,20 @@ import { ${name}$result, ${name}$input } from '${houdiniRelative}/${config4.arti
 import { ${name}Store } from '${houdiniRelative}/plugins/houdini-svelte/${stores_directory_name()}/${name}';`;
   }).join("\n");
 }
+function getComponentTypeImports(dirpath, config4, queries) {
+  if (queries.length === 0) {
+    return "";
+  }
+  let typeFile = "\nimport type { ComponentProps } from 'svelte'\n";
+  return typeFile + queries.map((query3) => {
+    const no_ext = path_exports.parse(query3.componentPath).name;
+    const file = path_exports.parse(query3.componentPath);
+    return `
+import ${no_ext} from './${file.base}'
+import type { ${query3.query.name.value}$input } from '${path_exports.relative(dirpath, path_exports.join(config4.artifactDirectory, query3.query.name.value)).replace("/$houdini", "")}'
+`;
+  }).join("\n");
+}
 function append_VariablesFunction(type, filepath, config4, queries) {
   const { params } = route_params(filepath);
   const garunteed_args = params.filter((param) => !param.optional).map((param) => param.name);
@@ -187055,6 +187118,18 @@ export type ${config4.variableFunctionName(
     )} = VariableFunction<${type}Params, ${input_type}>;`;
   }).join("\n");
 }
+function append_ComponentVariablesFunction(filepath, config4, queries) {
+  return queries.map((query3) => {
+    const no_ext = path_exports.parse(query3.componentPath).name;
+    const prop_type = no_ext + "Props";
+    return `
+type ${prop_type} = ComponentProps<${no_ext}>
+export type ${config4.variableFunctionName(
+      query3.query.name.value
+    )} = <_Props extends ${prop_type}>(args: { props: _Props }) => ${query3.query.name.value}$input
+`;
+  }).join("\n");
+}
 function append_loadInput(queries) {
   return `${queries.filter((q) => q.variableDefinitions?.length).length ? `
 type LoadInput = { ${queries.filter((query3) => query3.variableDefinitions?.length).map((query3) => {

package/build/test-cjs/index.js

@@ -306242,6 +306242,9 @@ function is_root_layout_script(config5, filename) {
 function is_layout_component(framework2, filename) {
   return framework2 === "kit" && filename.endsWith("+layout.svelte");
 }
+function is_page_component(framework2, filename) {
+  return framework2 === "kit" && filename.endsWith("+page.svelte");
+}
 function is_layout(framework2, filename) {
   return is_layout_script(framework2, filename) || is_layout_component(framework2, filename);
 }
@@ -306272,6 +306275,7 @@ async function walk_routes(config5, framework2, visitor, dirpath = config5.route
   let layoutExports = [];
   let pageQueries = [];
   let layoutQueries = [];
+  let componentQueries = [];
   let validRoute = false;
   for (const child of await fs_exports.readdir(dirpath)) {
     const childPath = path_exports.join(dirpath, child);
@@ -306318,7 +306322,7 @@ async function walk_routes(config5, framework2, visitor, dirpath = config5.route
           layoutQueries.push(definition);
         }
       });
-    } else if (is_component(config5, framework2, child)) {
+    } else if (is_page_component(framework2, childPath)) {
       validRoute = true;
       const contents = await fs_exports.readFile(childPath);
       if (!contents) {
@@ -306343,6 +306347,31 @@ async function walk_routes(config5, framework2, visitor, dirpath = config5.route
           pageQueries.push(definition);
         }
       });
+    } else if (is_component(config5, framework2, childPath)) {
+      validRoute = true;
+      const contents = await fs_exports.readFile(childPath);
+      if (!contents) {
+        continue;
+      }
+      const parsed = await parseSvelte(contents);
+      if (!parsed) {
+        continue;
+      }
+      const { script } = parsed;
+      await find_graphql(config5, script, {
+        where: (tag2) => {
+          try {
+            return !!config5.extractQueryDefinition(tag2);
+          } catch {
+            return false;
+          }
+        },
+        tag: async ({ parsedDocument }) => {
+          let definition = config5.extractQueryDefinition(parsedDocument);
+          await visitor.routeComponentQuery?.(definition, childPath);
+          componentQueries.push({ query: definition, componentPath: childPath });
+        }
+      });
     } else if (child === plugin_config(config5).layoutQueryFilename) {
       validRoute = true;
       const contents = await fs_exports.readFile(childPath);
@@ -306392,6 +306421,7 @@ async function walk_routes(config5, framework2, visitor, dirpath = config5.route
         svelteTypeFilePath,
         layoutQueries,
         pageQueries,
+        componentQueries,
         layoutExports,
         pageExports
       },
@@ -306789,6 +306819,7 @@ async function svelteKitGenerator(framework2, { config: config5 }) {
       svelteTypeFilePath,
       layoutQueries,
       pageQueries,
+      componentQueries,
       layoutExports,
       pageExports
     }) {
@@ -306811,6 +306842,14 @@ async function svelteKitGenerator(framework2, { config: config5 }) {
           uniqueLayoutQueries.push(layout);
         }
       }
+      const componentNames = [];
+      const uniqueComponentQueries = [];
+      for (const component of componentQueries) {
+        if (!componentNames.includes(component.query.name.value)) {
+          componentNames.push(component.query.name.value);
+          uniqueComponentQueries.push(component);
+        }
+      }
       if (!config5.include.some((path5) => path5.includes("js")) && (!plugin_config(config5).static || uniquePageQueries.length > 0 || uniqueLayoutQueries.length > 0)) {
         console.error(
           `\u26A0\uFE0F You are using at least one page/layout query but aren't "include"ing .js files in your config. 
@@ -306826,6 +306865,11 @@ async function svelteKitGenerator(framework2, { config: config5 }) {
           config5,
           uniqueLayoutQueries
         );
+        const componentQueryTypeImports = getComponentTypeImports(
+          dirpath,
+          config5,
+          uniqueComponentQueries
+        );
         const beforePageLoad = pageExports.includes(houdini_before_load_fn);
         const afterPageLoad = pageExports.includes(houdini_afterLoad_fn);
         const onPageError = pageExports.includes(houdini_on_error_fn);
@@ -306844,6 +306888,11 @@ async function svelteKitGenerator(framework2, { config: config5 }) {
           config5,
           uniquePageQueries
         );
+        const component_append_VariablesFunction = append_ComponentVariablesFunction(
+          dirpath,
+          config5,
+          uniqueComponentQueries
+        );
         const layout_append_beforeLoad = append_beforeLoad(beforeLayoutLoad, "Layout");
         const page_append_beforeLoad = append_beforeLoad(beforePageLoad, "Page");
         const layout_append_afterLoad = append_afterLoad(
@@ -306884,11 +306933,11 @@ async function svelteKitGenerator(framework2, { config: config5 }) {
 import type { ${functionImportsToBring.join(
           ", "
         )} } from '${houdiniRelative}/plugins/houdini-svelte/runtime/types';` : "";
-        typeImports = typeImports.concat(functionImports).concat(layoutTypeImports).concat(pageTypeImports);
+        typeImports = typeImports.concat(functionImports).concat(layoutTypeImports).concat(pageTypeImports).concat(componentQueryTypeImports);
         const layoutParams = `${layoutQueries.length > 0 && !utilityTypes.includes("LayoutParams") ? "\ntype LayoutParams = LayoutLoadEvent['params'];" : ""}`;
         const pageParams = `${pageQueries.length > 0 && !utilityTypes.includes("PageParams") ? "\ntype PageParams = PageLoadEvent['params'];" : ""}`;
         utilityTypes = utilityTypes.concat(layoutParams).concat(pageParams).replaceAll(/\$types\.js/gm, "$houdini");
-        typeExports = typeExports.concat(append_loadInput([...layoutQueries, ...pageQueries])).concat(layout_append_beforeLoad).concat(page_append_beforeLoad).concat(layout_append_afterLoad).concat(page_append_afterLoad).concat(layout_append_onError).concat(page_append_onError).concat(layout_append_VariablesFunction).concat(page_append_VariablesFunction).replace(
+        typeExports = typeExports.concat(append_loadInput([...layoutQueries, ...pageQueries])).concat(layout_append_beforeLoad).concat(page_append_beforeLoad).concat(layout_append_afterLoad).concat(page_append_afterLoad).concat(layout_append_onError).concat(page_append_onError).concat(layout_append_VariablesFunction).concat(page_append_VariablesFunction).concat(component_append_VariablesFunction).replace(
           /(?<=LayoutData = )([\s\S]*?)(?=;)/,
           `Expand<$1 & { ${layoutQueries.map((query5) => {
             const name = query5.name.value;
@@ -306933,6 +306982,20 @@ import { ${name}$result, ${name}$input } from '${houdiniRelative}/${config5.arti
 import { ${name}Store } from '${houdiniRelative}/plugins/houdini-svelte/${stores_directory_name()}/${name}';`;
   }).join("\n");
 }
+function getComponentTypeImports(dirpath, config5, queries) {
+  if (queries.length === 0) {
+    return "";
+  }
+  let typeFile = "\nimport type { ComponentProps } from 'svelte'\n";
+  return typeFile + queries.map((query5) => {
+    const no_ext = path_exports.parse(query5.componentPath).name;
+    const file = path_exports.parse(query5.componentPath);
+    return `
+import ${no_ext} from './${file.base}'
+import type { ${query5.query.name.value}$input } from '${path_exports.relative(dirpath, path_exports.join(config5.artifactDirectory, query5.query.name.value)).replace("/$houdini", "")}'
+`;
+  }).join("\n");
+}
 function append_VariablesFunction(type, filepath, config5, queries) {
   const { params } = route_params(filepath);
   const garunteed_args = params.filter((param) => !param.optional).map((param) => param.name);
@@ -306957,6 +307020,18 @@ export type ${config5.variableFunctionName(
     )} = VariableFunction<${type}Params, ${input_type}>;`;
   }).join("\n");
 }
+function append_ComponentVariablesFunction(filepath, config5, queries) {
+  return queries.map((query5) => {
+    const no_ext = path_exports.parse(query5.componentPath).name;
+    const prop_type = no_ext + "Props";
+    return `
+type ${prop_type} = ComponentProps<${no_ext}>
+export type ${config5.variableFunctionName(
+      query5.query.name.value
+    )} = <_Props extends ${prop_type}>(args: { props: _Props }) => ${query5.query.name.value}$input
+`;
+  }).join("\n");
+}
 function append_loadInput(queries) {
   return `${queries.filter((q) => q.variableDefinitions?.length).length ? `
 type LoadInput = { ${queries.filter((query5) => query5.variableDefinitions?.length).map((query5) => {

package/build/test-esm/index.js

@@ -306227,6 +306227,9 @@ function is_root_layout_script(config5, filename) {
 function is_layout_component(framework2, filename) {
   return framework2 === "kit" && filename.endsWith("+layout.svelte");
 }
+function is_page_component(framework2, filename) {
+  return framework2 === "kit" && filename.endsWith("+page.svelte");
+}
 function is_layout(framework2, filename) {
   return is_layout_script(framework2, filename) || is_layout_component(framework2, filename);
 }
@@ -306257,6 +306260,7 @@ async function walk_routes(config5, framework2, visitor, dirpath = config5.route
   let layoutExports = [];
   let pageQueries = [];
   let layoutQueries = [];
+  let componentQueries = [];
   let validRoute = false;
   for (const child of await fs_exports.readdir(dirpath)) {
     const childPath = path_exports.join(dirpath, child);
@@ -306303,7 +306307,7 @@ async function walk_routes(config5, framework2, visitor, dirpath = config5.route
           layoutQueries.push(definition);
         }
       });
-    } else if (is_component(config5, framework2, child)) {
+    } else if (is_page_component(framework2, childPath)) {
       validRoute = true;
       const contents = await fs_exports.readFile(childPath);
       if (!contents) {
@@ -306328,6 +306332,31 @@ async function walk_routes(config5, framework2, visitor, dirpath = config5.route
           pageQueries.push(definition);
         }
       });
+    } else if (is_component(config5, framework2, childPath)) {
+      validRoute = true;
+      const contents = await fs_exports.readFile(childPath);
+      if (!contents) {
+        continue;
+      }
+      const parsed = await parseSvelte(contents);
+      if (!parsed) {
+        continue;
+      }
+      const { script } = parsed;
+      await find_graphql(config5, script, {
+        where: (tag2) => {
+          try {
+            return !!config5.extractQueryDefinition(tag2);
+          } catch {
+            return false;
+          }
+        },
+        tag: async ({ parsedDocument }) => {
+          let definition = config5.extractQueryDefinition(parsedDocument);
+          await visitor.routeComponentQuery?.(definition, childPath);
+          componentQueries.push({ query: definition, componentPath: childPath });
+        }
+      });
     } else if (child === plugin_config(config5).layoutQueryFilename) {
       validRoute = true;
       const contents = await fs_exports.readFile(childPath);
@@ -306377,6 +306406,7 @@ async function walk_routes(config5, framework2, visitor, dirpath = config5.route
         svelteTypeFilePath,
         layoutQueries,
         pageQueries,
+        componentQueries,
         layoutExports,
         pageExports
       },
@@ -306774,6 +306804,7 @@ async function svelteKitGenerator(framework2, { config: config5 }) {
       svelteTypeFilePath,
       layoutQueries,
       pageQueries,
+      componentQueries,
       layoutExports,
       pageExports
     }) {
@@ -306796,6 +306827,14 @@ async function svelteKitGenerator(framework2, { config: config5 }) {
           uniqueLayoutQueries.push(layout);
         }
       }
+      const componentNames = [];
+      const uniqueComponentQueries = [];
+      for (const component of componentQueries) {
+        if (!componentNames.includes(component.query.name.value)) {
+          componentNames.push(component.query.name.value);
+          uniqueComponentQueries.push(component);
+        }
+      }
       if (!config5.include.some((path5) => path5.includes("js")) && (!plugin_config(config5).static || uniquePageQueries.length > 0 || uniqueLayoutQueries.length > 0)) {
         console.error(
           `\u26A0\uFE0F You are using at least one page/layout query but aren't "include"ing .js files in your config. 
@@ -306811,6 +306850,11 @@ async function svelteKitGenerator(framework2, { config: config5 }) {
           config5,
           uniqueLayoutQueries
         );
+        const componentQueryTypeImports = getComponentTypeImports(
+          dirpath,
+          config5,
+          uniqueComponentQueries
+        );
         const beforePageLoad = pageExports.includes(houdini_before_load_fn);
         const afterPageLoad = pageExports.includes(houdini_afterLoad_fn);
         const onPageError = pageExports.includes(houdini_on_error_fn);
@@ -306829,6 +306873,11 @@ async function svelteKitGenerator(framework2, { config: config5 }) {
           config5,
           uniquePageQueries
         );
+        const component_append_VariablesFunction = append_ComponentVariablesFunction(
+          dirpath,
+          config5,
+          uniqueComponentQueries
+        );
         const layout_append_beforeLoad = append_beforeLoad(beforeLayoutLoad, "Layout");
         const page_append_beforeLoad = append_beforeLoad(beforePageLoad, "Page");
         const layout_append_afterLoad = append_afterLoad(
@@ -306869,11 +306918,11 @@ async function svelteKitGenerator(framework2, { config: config5 }) {
 import type { ${functionImportsToBring.join(
           ", "
         )} } from '${houdiniRelative}/plugins/houdini-svelte/runtime/types';` : "";
-        typeImports = typeImports.concat(functionImports).concat(layoutTypeImports).concat(pageTypeImports);
+        typeImports = typeImports.concat(functionImports).concat(layoutTypeImports).concat(pageTypeImports).concat(componentQueryTypeImports);
         const layoutParams = `${layoutQueries.length > 0 && !utilityTypes.includes("LayoutParams") ? "\ntype LayoutParams = LayoutLoadEvent['params'];" : ""}`;
         const pageParams = `${pageQueries.length > 0 && !utilityTypes.includes("PageParams") ? "\ntype PageParams = PageLoadEvent['params'];" : ""}`;
         utilityTypes = utilityTypes.concat(layoutParams).concat(pageParams).replaceAll(/\$types\.js/gm, "$houdini");
-        typeExports = typeExports.concat(append_loadInput([...layoutQueries, ...pageQueries])).concat(layout_append_beforeLoad).concat(page_append_beforeLoad).concat(layout_append_afterLoad).concat(page_append_afterLoad).concat(layout_append_onError).concat(page_append_onError).concat(layout_append_VariablesFunction).concat(page_append_VariablesFunction).replace(
+        typeExports = typeExports.concat(append_loadInput([...layoutQueries, ...pageQueries])).concat(layout_append_beforeLoad).concat(page_append_beforeLoad).concat(layout_append_afterLoad).concat(page_append_afterLoad).concat(layout_append_onError).concat(page_append_onError).concat(layout_append_VariablesFunction).concat(page_append_VariablesFunction).concat(component_append_VariablesFunction).replace(
           /(?<=LayoutData = )([\s\S]*?)(?=;)/,
           `Expand<$1 & { ${layoutQueries.map((query5) => {
             const name = query5.name.value;
@@ -306918,6 +306967,20 @@ import { ${name}$result, ${name}$input } from '${houdiniRelative}/${config5.arti
 import { ${name}Store } from '${houdiniRelative}/plugins/houdini-svelte/${stores_directory_name()}/${name}';`;
   }).join("\n");
 }
+function getComponentTypeImports(dirpath, config5, queries) {
+  if (queries.length === 0) {
+    return "";
+  }
+  let typeFile = "\nimport type { ComponentProps } from 'svelte'\n";
+  return typeFile + queries.map((query5) => {
+    const no_ext = path_exports.parse(query5.componentPath).name;
+    const file = path_exports.parse(query5.componentPath);
+    return `
+import ${no_ext} from './${file.base}'
+import type { ${query5.query.name.value}$input } from '${path_exports.relative(dirpath, path_exports.join(config5.artifactDirectory, query5.query.name.value)).replace("/$houdini", "")}'
+`;
+  }).join("\n");
+}
 function append_VariablesFunction(type, filepath, config5, queries) {
   const { params } = route_params(filepath);
   const garunteed_args = params.filter((param) => !param.optional).map((param) => param.name);
@@ -306942,6 +307005,18 @@ export type ${config5.variableFunctionName(
     )} = VariableFunction<${type}Params, ${input_type}>;`;
   }).join("\n");
 }
+function append_ComponentVariablesFunction(filepath, config5, queries) {
+  return queries.map((query5) => {
+    const no_ext = path_exports.parse(query5.componentPath).name;
+    const prop_type = no_ext + "Props";
+    return `
+type ${prop_type} = ComponentProps<${no_ext}>
+export type ${config5.variableFunctionName(
+      query5.query.name.value
+    )} = <_Props extends ${prop_type}>(args: { props: _Props }) => ${query5.query.name.value}$input
+`;
+  }).join("\n");
+}
 function append_loadInput(queries) {
   return `${queries.filter((q) => q.variableDefinitions?.length).length ? `
 type LoadInput = { ${queries.filter((query5) => query5.variableDefinitions?.length).map((query5) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "houdini-svelte",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "description": "The svelte plugin for houdini",
   "keywords": [
     "typescript",
@@ -32,7 +32,7 @@
     "rollup": "^3.7.4",
     "svelte": "^3.57.0",
     "vite": "^4.1.1",
-    "houdini": "^1.2.7"
+    "houdini": "^1.2.8"
   },
   "files": [
     "build"