houdini-svelte 1.2.6 → 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

@@ -84573,11 +84573,11 @@ var require_esprima2 = __commonJS2({
                 case "}":
                   regex2 = false;
                   if (this.values[this.curly - 3] === "function") {
-                    var check2 = this.values[this.curly - 4];
-                    regex2 = check2 ? !this.beforeFunctionExpression(check2) : false;
+                    var check = this.values[this.curly - 4];
+                    regex2 = check ? !this.beforeFunctionExpression(check) : false;
                   } else if (this.values[this.curly - 4] === "function") {
-                    var check2 = this.values[this.curly - 5];
-                    regex2 = check2 ? !this.beforeFunctionExpression(check2) : true;
+                    var check = this.values[this.curly - 5];
+                    regex2 = check ? !this.beforeFunctionExpression(check) : true;
                   }
                   break;
                 default:
@@ -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) => {
@@ -188549,7 +188624,7 @@ export const redirect = svelteKitRedirect
   schema({ config: config4 }) {
     return `
 """
-	@${config4.loadDirective} is used to disable automatic fetch (no load, no auto fetch in component), you will have to do it manually.
+	@${config4.loadDirective} is used to enable automatic fetch on inline queries.
 """
 directive @${config4.loadDirective} on QUERY
 

package/build/plugin-esm/index.js

@@ -84564,11 +84564,11 @@ var require_esprima2 = __commonJS2({
                 case "}":
                   regex2 = false;
                   if (this.values[this.curly - 3] === "function") {
-                    var check2 = this.values[this.curly - 4];
-                    regex2 = check2 ? !this.beforeFunctionExpression(check2) : false;
+                    var check = this.values[this.curly - 4];
+                    regex2 = check ? !this.beforeFunctionExpression(check) : false;
                   } else if (this.values[this.curly - 4] === "function") {
-                    var check2 = this.values[this.curly - 5];
-                    regex2 = check2 ? !this.beforeFunctionExpression(check2) : true;
+                    var check = this.values[this.curly - 5];
+                    regex2 = check ? !this.beforeFunctionExpression(check) : true;
                   }
                   break;
                 default:
@@ -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) => {
@@ -188539,7 +188614,7 @@ export const redirect = svelteKitRedirect
   schema({ config: config4 }) {
     return `
 """
-	@${config4.loadDirective} is used to disable automatic fetch (no load, no auto fetch in component), you will have to do it manually.
+	@${config4.loadDirective} is used to enable automatic fetch on inline queries.
 """
 directive @${config4.loadDirective} on QUERY
 

package/build/preprocess-cjs/index.js

@@ -84577,11 +84577,11 @@ var require_esprima2 = __commonJS2({
                 case "}":
                   regex2 = false;
                   if (this.values[this.curly - 3] === "function") {
-                    var check2 = this.values[this.curly - 4];
-                    regex2 = check2 ? !this.beforeFunctionExpression(check2) : false;
+                    var check = this.values[this.curly - 4];
+                    regex2 = check ? !this.beforeFunctionExpression(check) : false;
                   } else if (this.values[this.curly - 4] === "function") {
-                    var check2 = this.values[this.curly - 5];
-                    regex2 = check2 ? !this.beforeFunctionExpression(check2) : true;
+                    var check = this.values[this.curly - 5];
+                    regex2 = check ? !this.beforeFunctionExpression(check) : true;
                   }
                   break;
                 default:
@@ -96024,7 +96024,7 @@ var Config = class {
   projectRoot;
   schema;
   schemaPath;
-  persistedQueryPath;
+  persistedQueriesPath = "./$houdini/persisted_queries.json";
   exclude;
   scalars;
   module = "esm";
@@ -96076,7 +96076,8 @@ var Config = class {
       logLevel,
       defaultFragmentMasking = "enable",
       watchSchema,
-      projectDir
+      projectDir,
+      persistedQueriesPath
     } = this.configFile;
     if (typeof schema === "string") {
       this.schema = graphql2.buildSchema(schema);
@@ -96113,6 +96114,9 @@ var Config = class {
     this.schemaPollHeaders = watchSchema?.headers ?? {};
     this.rootDir = join2(this.projectRoot, "$houdini");
     this.#fragmentVariableMaps = {};
+    if (persistedQueriesPath) {
+      this.persistedQueriesPath = persistedQueriesPath;
+    }
     if (defaultKeys) {
       this.defaultKeys = defaultKeys;
     }

package/build/preprocess-esm/index.js

@@ -84570,11 +84570,11 @@ var require_esprima2 = __commonJS2({
                 case "}":
                   regex2 = false;
                   if (this.values[this.curly - 3] === "function") {
-                    var check2 = this.values[this.curly - 4];
-                    regex2 = check2 ? !this.beforeFunctionExpression(check2) : false;
+                    var check = this.values[this.curly - 4];
+                    regex2 = check ? !this.beforeFunctionExpression(check) : false;
                   } else if (this.values[this.curly - 4] === "function") {
-                    var check2 = this.values[this.curly - 5];
-                    regex2 = check2 ? !this.beforeFunctionExpression(check2) : true;
+                    var check = this.values[this.curly - 5];
+                    regex2 = check ? !this.beforeFunctionExpression(check) : true;
                   }
                   break;
                 default:
@@ -96017,7 +96017,7 @@ var Config = class {
   projectRoot;
   schema;
   schemaPath;
-  persistedQueryPath;
+  persistedQueriesPath = "./$houdini/persisted_queries.json";
   exclude;
   scalars;
   module = "esm";
@@ -96069,7 +96069,8 @@ var Config = class {
       logLevel,
       defaultFragmentMasking = "enable",
       watchSchema,
-      projectDir
+      projectDir,
+      persistedQueriesPath
     } = this.configFile;
     if (typeof schema === "string") {
       this.schema = graphql2.buildSchema(schema);
@@ -96106,6 +96107,9 @@ var Config = class {
     this.schemaPollHeaders = watchSchema?.headers ?? {};
     this.rootDir = join2(this.projectRoot, "$houdini");
     this.#fragmentVariableMaps = {};
+    if (persistedQueriesPath) {
+      this.persistedQueriesPath = persistedQueriesPath;
+    }
     if (defaultKeys) {
       this.defaultKeys = defaultKeys;
     }