Auto-complete metafields depending on shop data

[aswamy]

What are you adding in this PR?

Part 1 for #502

• Adding support for metadata autocompletion on our editors
• listens to file changes for .shopify folder
• This should work for VScode only

What's next? Any followup issues?

• We need to make it work on OSE next
• We will create a CLI command to fetch the metafields.json
• We need to automatically call this CLI command in VSCode on startup

What did you learn?

• registering for DidChangeWatchedFilesNotification took some time, but had to read-up on client capabilities and how to subscribe to notifications after initialization

https://microsoft.github.io/language-server-protocol/specifications/lsp/3.17/specification/#workspace_didChangeWatchedFiles

Tophat

Run the following query and dump the contents into .shopify/metafields.json in the theme repository. Remove the nodes array, and place it directory under each group.

query {
	article: metafieldDefinitions(ownerType: ARTICLE, first: 250) {
		nodes {
			...MetafieldDefinitionFields
		}
	}
	blog: metafieldDefinitions(ownerType: BLOG, first: 250) {
		nodes {
			...MetafieldDefinitionFields
		}
	}
	brand: metafieldDefinitions(ownerType: BRAND, first: 250) {
		nodes {
			...MetafieldDefinitionFields
		}
	}
	collection: metafieldDefinitions(ownerType: COLLECTION, first: 250) {
		nodes {
			...MetafieldDefinitionFields
		}
	}
	company: metafieldDefinitions(ownerType: COMPANY, first: 250) {
		nodes {
			...MetafieldDefinitionFields
		}
	}
	company_location: metafieldDefinitions(ownerType: COMPANY_LOCATION, first: 250) {
		nodes {
			...MetafieldDefinitionFields
		}
	}
	location: metafieldDefinitions(ownerType: LOCATION, first: 250) {
		nodes {
			...MetafieldDefinitionFields
		}
	}
	market: metafieldDefinitions(ownerType: MARKET, first: 250) {
		nodes {
			...MetafieldDefinitionFields
		}
	}
	order: metafieldDefinitions(ownerType: ORDER, first: 250) {
		nodes {
			...MetafieldDefinitionFields
		}
	}
	page: metafieldDefinitions(ownerType: PAGE, first: 250) {
		nodes {
			...MetafieldDefinitionFields
		}
	}
	product: metafieldDefinitions(ownerType: PRODUCT, first: 250) {
		nodes {
			...MetafieldDefinitionFields
		}
	}
	variant: metafieldDefinitions(ownerType: PRODUCTVARIANT, first: 250) {
		nodes {
			...MetafieldDefinitionFields
		}
	}
	shop: metafieldDefinitions(ownerType: SHOP, first: 250) {
		nodes {
			...MetafieldDefinitionFields
		}
	}
}

fragment MetafieldDefinitionFields on MetafieldDefinition {
	name
	namespace
	description
	type {
		category
		name
	}
}

Before you deploy

• I included a minor bump changeset
• My feature is backward compatible

[aswamy]

• changed memo to memoize and used the rootUri as memo key
• updated file paths so it is OS agnostic
• updated metafield namespace types to have the format product_metafield_${namespace}
• changed the format of metafields.json (see changeset)
• changed memoize function as we discussed + added a test case file since it was missing 😁

[aswamy]

• updated to remove unused getMetafieldDefinitions in unit tests
• updated usage of findThemeRootURI(...) within onDidChangeWatchedFiles
• changed getMetafieldDefinitions inside theme-check so it can be injected

[charlespwd]

Hmm. Thinking about this, are we sure we're not mutating the original object here? Should we clone/replace metafieldsProperty before doing this mutation?

Remember that ...objectMap gives you a shallow clone of the object map. Looks like we're mutating the original object map here and this is no bueno. Means that if you'd get metafield data from one theme in another.

[aswamy]

Looks like we're mutating the original object map here and this is no bueno. Means that if you'd get metafield data from one theme in another.

OH i didn't know that! Yeah this is actually modifying existing type's properties. E.g. product would be modified so that it's metafields property would return product_metafields instead of untyped.

I guess i could clone product, modify its property, and add it to result 👍

[aswamy]

We talked about it in person - since this isn't unique to a theme, we should be fine with this change happening across themes within a workspace. Added a warning message in a comment above the block instead.

[charlespwd]

Oh are we doing it already. I'll just dm you to verify :D this code is dense and hard to review lol

[aswamy]

Yeah sorry there are three things happening to make the whole thing work. We can talk about it more today, but here are the things:

• customMetafieldTypeEntries --> we copy the metafield type and create one for each category we support. e.g. product_metafield, collection_metafield, etc.
• metafieldDefinitionsObjectMap --> reads the metafield definitions we fetched and converts it into types for auto-completion
• the for-loop you commented above --> we override existing types like product and collection, so their metafields properties don't return as untyped, but instead return product_metafields and collection_metafields respectively

[charlespwd]

LGTM, didn't tophat yet 👀