houdini icon indicating copy to clipboard operation
houdini copied to clipboard

Changing the houdini output folder

Open Nukiloco opened this issue 3 years ago • 16 comments

I'm currently reading https://www.houdinigraphql.com/api/config and I can't seem to find the field that changes the path or name of the $houdini folder.

Nukiloco avatar Jul 09 '22 08:07 Nukiloco

It's not currently possible to change that path but I would gladly review a PR that adds a runtimePath option if you wanted to give it a shot. We also will want to add another config value for customizing the alias that the generator uses to import things, maybe something like runtimeAlias?

AlecAivazis avatar Jul 09 '22 09:07 AlecAivazis

I have never worked or contributed on a npm repo before so if I did it would be my first time. Also I think this is where the $houdini folder comes from.

https://github.com/HoudiniGraphql/houdini/blob/6e717629e0059cead070a92db9a6b81c91a163d2/src/common/config.ts#L154-L157

A lot places in the source code uses the rootDir. I'm not sure what you mean by runtimeAlias. Do you mean the alias for each import on generated files like import stuff from customAlias?

Also to note, it doesn't seem like the rootDir in the config is exposed in the houdini.config.js file. Or the vsode intellisense doesn't recognize it?

Nukiloco avatar Jul 09 '22 11:07 Nukiloco

@AlecAivazis is there any reason the $houdini folder is created in the project root? If it could be placed anywhere in the src dir we can skip configuring vite to serve the root directory.

https://github.com/HoudiniGraphql/houdini/blob/70f9f71065767075de037b9dd4ac190101588037/example/svelte.config.js#L25

david-plugge avatar Jul 09 '22 17:07 david-plugge

@Nukiloco That's no problem at all! If you are up for it, I'll help you any way I can. Basically there are two parts to this feature. One part is where the actual ./$houdini directory is written. The actual import resolves using a vite alias so we can leave it up to the user to make sure that $houdini resolves to the custom place they have set. The second part of this feature is the actual text for the alias to use. A user might want to change this to $lib/houdini for example if they don't want to have extra alias in their config and they want to take advantage of the existing $lib alias that SvelteKit. This was a lot of info so feel free to reach out to me on discord if you want a more direct way of talking.

@david-plugge the convention of putting it in root pre-dates SvelteKit requiring the extra vite config to resolve the import. I think the best solution to this problem is to change the way users install houdini to use a SvelteKit/Vite plugin which should let us do the ugly allow stuff behind the scenes

AlecAivazis avatar Jul 09 '22 19:07 AlecAivazis

After reading this, I'm still confused on why there would be two config options here instead of one which should just be a path.

Nukiloco avatar Jul 09 '22 23:07 Nukiloco

Unforuntately we can't have one path that works in both situations because the file system is only accessible through vite aliases ($lib only resolves to ./src/lib because it has been explicitly set up). This means that if we want to be able to support any situation we need to let the user customize both sides of the problem: the actual filepath where things end up and the alias that can be used to import that path. This let's someone configure their setup however they want as long as they are willing to own the alias definition

AlecAivazis avatar Jul 10 '22 08:07 AlecAivazis

it may work:

// houdini.config.js
/** @type {import('houdini').ConfigFile} \*/
const config = {
	runtimePath: './src/houdini',
	...
};
export default config;
// svelte.config.js
import houdiniConfig from './houdini.config.js'

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: [
		preprocess(),
		houdini(houdiniConfig)
	],
	kit: {
		alias: houdiniConfig.runtimePath
	}
};
export default config;

That way we could even pass the config to the preprocessor without having to specify the config path (#395)

david-plugge avatar Jul 10 '22 08:07 david-plugge

additionally, customizing GQL_ would be nice, some projects have case conventions.

endigma avatar Aug 05 '22 17:08 endigma

You mean to have it lowercase? Or being able to customize "what you want"? 👀

jycouet avatar Aug 05 '22 17:08 jycouet

maybe a format string? an option with prefix and case would be good enough

endigma avatar Aug 05 '22 17:08 endigma

prefix_query_title in snake_case PREFIX_QUERY_TITLE in MACRO_CASE prefixQueryTitle in camel PrefixQueryTitle in Pascal (these two would be the same if prefix was ignored by the case-transformer prefixquerytitle in flatcase (don't think this is necessary)

would fit into

{
    prefix: string,
    case: "camel" | "snake" | "pascal" | "spinal" ... etc
}

endigma avatar Aug 05 '22 17:08 endigma

prefix_query_title in snake_case

PREFIX_QUERY_TITLE in MACRO_CASE

prefixQueryTitle in camel

PrefixQueryTitle in Pascal (these two would be the same if prefix was ignored by the case-transformer

prefixquerytitle in flatcase (don't think this is necessary)

Would it be crazy to use the examples as the pattern? At least that way it's more descriptive of what will be generated.

I imagine it'd look something like:

{
    pattern: "QueryName",
    // or
    pattern: "GQL_Query_Name"
}

AlecAivazis avatar Aug 06 '22 10:08 AlecAivazis

Isn´t it sufficient to just add a prefix config option? I´m not sure but is the name is extracted from the Graphql query/mutation... ? If so the prefix should be enough right?

david-plugge avatar Aug 06 '22 10:08 david-plugge

Isn´t it sufficient to just add a prefix config option? I´m not sure but is the name is extracted from the Graphql query/mutation... ? If so the prefix should be enough right?

not sure how this works internally, if the query portion is derived from the query text then yeah just prefix would be good

endigma avatar Aug 06 '22 14:08 endigma

Now that the #460 tangent is closed, is this planned as well?

endigma avatar Aug 25 '22 16:08 endigma