@shopify/theme-language-server-common
Version:
<h1 align="center" style="position: relative;" > <br> <img src="https://github.com/Shopify/theme-check-vscode/blob/main/images/shopify_glyph.png?raw=true" alt="logo" width="141" height="160"> <br> Theme Language Server </h1>
878 lines (767 loc) • 24.9 kB
text/typescript
import {
AssignMarkup,
LiquidExpression,
LiquidHtmlNode,
LiquidTag,
LiquidTagDecrement,
LiquidTagIncrement,
LiquidVariable,
LiquidVariableLookup,
NamedTags,
NodeTypes,
} from '@shopify/liquid-html-parser';
import {
ArrayReturnType,
DocsetEntry,
FilterEntry,
ObjectEntry,
ReturnType,
SourceCodeType,
ThemeDocset,
isError,
parseJSON,
path,
} from '@shopify/theme-check-common';
import {
GetThemeSettingsSchemaForURI,
InputSetting,
isInputSetting,
isSettingsCategory,
} from './settings';
import { findLast, memo } from './utils';
import { visit } from './visitor';
export class TypeSystem {
constructor(
private readonly themeDocset: ThemeDocset,
private readonly getThemeSettingsSchemaForURI: GetThemeSettingsSchemaForURI,
) {}
async inferType(
thing: Identifier | LiquidExpression | LiquidVariable | AssignMarkup,
partialAst: LiquidHtmlNode,
uri: string,
): Promise<PseudoType | ArrayType> {
const [objectMap, filtersMap, symbolsTable] = await Promise.all([
this.objectMap(uri, partialAst),
this.filtersMap(),
this.symbolsTable(partialAst, uri),
]);
return inferType(thing, symbolsTable, objectMap, filtersMap);
}
async availableVariables(
partialAst: LiquidHtmlNode,
partial: string,
node: LiquidVariableLookup,
uri: string,
): Promise<{ entry: DocsetEntry; type: PseudoType | ArrayType }[]> {
const [objectMap, filtersMap, symbolsTable] = await Promise.all([
this.objectMap(uri, partialAst),
this.filtersMap(),
this.symbolsTable(partialAst, uri),
]);
return Object.entries(symbolsTable)
.filter(
([key, typeRanges]) =>
key.startsWith(partial) &&
typeRanges.some((typeRange) => isCorrectTypeRange(typeRange, node)),
)
.map(([identifier, typeRanges]) => {
const typeRange = findLast(typeRanges, (typeRange) => isCorrectTypeRange(typeRange, node))!;
const type = resolveTypeRangeType(typeRange.type, symbolsTable, objectMap, filtersMap);
const entry = objectMap[isArrayType(type) ? type.valueType : type] ?? {};
return {
entry: { ...entry, name: identifier },
type,
};
});
}
public async themeSettingProperties(uri: string): Promise<ObjectEntry[]> {
const themeSettingsSchema = await this.getThemeSettingsSchemaForURI(uri);
const categories = themeSettingsSchema.filter(isSettingsCategory);
const result: ObjectEntry[] = [];
for (const category of categories) {
const inputSettings = category.settings.filter(isInputSetting);
for (const setting of inputSettings) {
result.push({
name: setting.id,
summary: '', // TODO, this should lookup the locale file for settings... setting.label
description: '', // TODO , this should lookup the locale file as well... setting.info,
return_type: settingReturnType(setting),
access: {
global: false,
parents: [],
template: [],
},
});
}
}
return result;
}
/**
* An indexed representation of objects.json by name
*
* e.g. objectMap['product'] returns the product ObjectEntry.
*/
public objectMap = async (uri: string, ast: LiquidHtmlNode): Promise<ObjectMap> => {
const [objectMap, themeSettingProperties] = await Promise.all([
this._objectMap(),
this.themeSettingProperties(uri),
]);
// Here we shallow mutate `settings.properties` to have the properties made
// available by settings_schema.json
const result: ObjectMap = {
...objectMap,
settings: {
...(objectMap.settings ?? {}),
properties: themeSettingProperties,
},
};
// Deal with sections/file.liquid section.settings by infering the type from the {% schema %}
if (/[\/\\]sections[\/\\]/.test(uri) && result.section) {
result.section = JSON.parse(JSON.stringify(result.section)); // easy deep clone
const settings = result.section.properties?.find((x) => x.name === 'settings');
if (!settings || !settings.return_type) return result;
settings.return_type = [{ type: 'section_settings', name: '' }];
result.section_settings = {
name: 'section_settings',
access: {
global: false,
parents: [],
template: [],
},
properties: schemaSettingsAsProperties(ast),
return_type: [],
};
}
// Deal with blocks/files.liquid block.settings in a similar fashion
if (/[\/\\]blocks[\/\\]/.test(uri) && result.block) {
result.block = JSON.parse(JSON.stringify(result.block)); // easy deep clone
const settings = result.block.properties?.find((x) => x.name === 'settings');
if (!settings || !settings.return_type) return result;
settings.return_type = [{ type: 'block_settings', name: '' }];
result.block_settings = {
name: 'block_settings',
access: {
global: false,
parents: [],
template: [],
},
properties: schemaSettingsAsProperties(ast),
return_type: [],
};
}
return result;
};
// This is the big one we reuse (memoized)
private _objectMap = memo(async (): Promise<ObjectMap> => {
const entries = await this.objectEntries();
return entries.reduce((map, entry) => {
map[entry.name] = entry;
return map;
}, {} as ObjectMap);
});
/** An indexed representation of filters.json by name */
public filtersMap = memo(async (): Promise<FiltersMap> => {
const entries = await this.filterEntries();
return entries.reduce((map, entry) => {
map[entry.name] = entry;
return map;
}, {} as FiltersMap);
});
public filterEntries = memo(async () => {
return this.themeDocset.filters();
});
public objectEntries = memo(async () => {
return this.themeDocset.objects();
});
private async symbolsTable(partialAst: LiquidHtmlNode, uri: string): Promise<SymbolsTable> {
const seedSymbolsTable = await this.seedSymbolsTable(uri);
return buildSymbolsTable(partialAst, seedSymbolsTable);
}
/**
* The seedSymbolsTable contains all the global variables.
*
* This lets us have the ambient type of things first, but if someone
* reassigns product, then we'll be able to change the type of product on
* the appropriate range.
*
* This is not memo'ed because we would otherwise need to clone the thing.
*/
private seedSymbolsTable = async (uri: string) => {
const [globalVariables, contextualVariables] = await Promise.all([
this.globalVariables(),
this.contextualVariables(uri),
]);
return globalVariables.concat(contextualVariables).reduce((table, objectEntry) => {
table[objectEntry.name] ??= [];
table[objectEntry.name].push({
identifier: objectEntry.name,
type: objectEntryType(objectEntry),
range: [0],
});
return table;
}, {} as SymbolsTable);
};
private globalVariables = memo(async () => {
const entries = await this.objectEntries();
return entries.filter(
(entry) => !entry.access || entry.access.global === true || entry.access.template.length > 0,
);
});
private contextualVariables = async (uri: string) => {
const entries = await this.objectEntries();
const contextualEntries = getContextualEntries(uri);
return entries.filter((entry) => contextualEntries.includes(entry.name));
};
}
const SECTION_FILE_REGEX = /sections[\/\\][^.\\\/]*\.liquid$/;
const BLOCK_FILE_REGEX = /blocks[\/\\][^.\\\/]*\.liquid$/;
const SNIPPET_FILE_REGEX = /snippets[\/\\][^.\\\/]*\.liquid$/;
const LAYOUT_FILE_REGEX = /layout[\/\\]checkout\.liquid$/;
function getContextualEntries(uri: string): string[] {
const normalizedUri = path.normalize(uri);
if (LAYOUT_FILE_REGEX.test(normalizedUri)) {
return [
'locale',
'direction',
'skip_to_content_link',
'checkout_html_classes',
'checkout_stylesheets',
'checkout_scripts',
'content_for_logo',
'breadcrumb',
'order_summary_toggle',
'content_for_order_summary',
'alternative_payment_methods',
'content_for_footer',
'tracking_code',
];
}
if (SECTION_FILE_REGEX.test(normalizedUri)) {
return ['section', 'predictive_search', 'recommendations', 'comment'];
}
if (BLOCK_FILE_REGEX.test(normalizedUri)) {
return ['app', 'section', 'block'];
}
if (SNIPPET_FILE_REGEX.test(normalizedUri)) {
return ['app'];
}
return [];
}
/** An indexed representation on objects.json (by name) */
type ObjectMap = Record<ObjectEntryName, ObjectEntry>;
/** An indexed representation on filters.json (by name) */
type FiltersMap = Record<FilterEntryName, FilterEntry>;
/** An identifier refers to the name of a variable, e.g. `x`, `product`, etc. */
type Identifier = string;
type ObjectEntryName = ObjectEntry['name'];
type FilterEntryName = FilterEntry['name'];
const Untyped = 'untyped' as const;
type Untyped = typeof Untyped;
const String = 'string' as const;
type String = typeof String;
/** A pseudo-type is the possible values of an ObjectEntry's return_type.type */
export type PseudoType = ObjectEntryName | String | Untyped | 'number' | 'boolean';
/**
* A variable can have many types in the same file
*
* Just think of this:
*
* {{ x }} # unknown
* {% assign x = all_products['cool-handle'] %}
* {{ x }} # product
* {% assign x = x.featured_image %}
* {{ x }} # image
* [% assign x = x.src %}]
* {{ x }} # string
*/
interface TypeRange {
/** The name of the variable */
identifier: Identifier;
/** The type of the variable */
type: PseudoType | ArrayType | LazyVariableType | LazyDeconstructedExpression;
/**
* The range may be one of two things:
* - open ended (till end of file, end === undefined)
* - closed (inside for loop)
*/
range: [start: number, end?: number];
}
/** Some things can be an array type (e.g. product.images) */
export type ArrayType = {
kind: 'array';
valueType: PseudoType;
};
const arrayType = (valueType: PseudoType): ArrayType => ({
kind: 'array',
valueType,
});
/**
* Because a type may depend on another, this represents the type of
* something as the type of a LiquidVariable chain.
* {% assign x = y.foo | filter1 | filter2 %}
*/
type LazyVariableType = {
kind: NodeTypes.LiquidVariable;
node: LiquidVariable;
offset: number;
};
const lazyVariable = (node: LiquidVariable, offset: number): LazyVariableType => ({
kind: NodeTypes.LiquidVariable,
node,
offset,
});
/**
* A thing may be the deconstruction of something else.
*
* examples
* - for thing in (0..2)
* - for thing in collection
* - for thing in parent.collection
* - for thing in 'string?'
*/
type LazyDeconstructedExpression = {
kind: 'deconstructed';
node: LiquidExpression;
offset: number;
};
const LazyDeconstructedExpression = (
node: LiquidExpression,
offset: number,
): LazyDeconstructedExpression => ({
kind: 'deconstructed',
node,
offset,
});
/**
* A symbols table is a map of identifiers to TypeRanges.
*
* It stores the mapping of variable name to type by position in the file.
*
* The ranges are sorted in range.start order.
*/
type SymbolsTable = Record<Identifier, TypeRange[]>;
function buildSymbolsTable(
partialAst: LiquidHtmlNode,
seedSymbolsTable: SymbolsTable,
): SymbolsTable {
const typeRanges = visit<SourceCodeType.LiquidHtml, TypeRange>(partialAst, {
// {% assign x = foo.x | filter %}
AssignMarkup(node) {
return {
identifier: node.name,
type: lazyVariable(node.value, node.position.start),
range: [node.position.end],
};
},
// This also covers tablerow
ForMarkup(node, ancestors) {
const parentNode = ancestors.at(-1)! as LiquidTag;
return {
identifier: node.variableName,
type: LazyDeconstructedExpression(node.collection, node.position.start),
range: [parentNode.blockStartPosition.end, end(parentNode.blockEndPosition?.end)],
};
},
// {% capture foo %}
// ...
// {% endcapture}
LiquidTag(node) {
if (node.name === 'capture' && typeof node.markup !== 'string') {
return {
identifier: node.markup.name!,
type: String,
range: [node.position.end],
};
} else if (['form', 'paginate'].includes(node.name)) {
return {
identifier: node.name,
type: node.name,
range: [node.blockStartPosition.end, end(node.blockEndPosition?.end)],
};
} else if (['for', 'tablerow'].includes(node.name)) {
return {
identifier: node.name + 'loop',
type: node.name + 'loop',
range: [node.blockStartPosition.end, end(node.blockEndPosition?.end)],
};
} else if (isLiquidTagIncrement(node) || isLiquidTagDecrement(node)) {
if (node.markup.name === null) return;
return {
identifier: node.markup.name,
type: 'number',
range: [node.position.start],
};
} else if (node.name === 'layout') {
return {
identifier: 'none',
type: 'keyword',
range: [node.position.start, node.position.end],
};
}
},
});
return typeRanges
.sort(({ range: [startA] }, { range: [startB] }) => startA - startB)
.reduce((table, typeRange) => {
table[typeRange.identifier] ??= [];
table[typeRange.identifier].push(typeRange);
return table;
}, seedSymbolsTable);
}
/**
* Given a TypeRange['type'] (which may be lazy), resolve its type recursively.
*
* The output is a fully resolved PseudoType | ArrayType. Which means we
* could use it to power completions.
*/
function resolveTypeRangeType(
typeRangeType: TypeRange['type'],
symbolsTable: SymbolsTable,
objectMap: ObjectMap,
filtersMap: FiltersMap,
): PseudoType | ArrayType {
if (typeof typeRangeType === 'string') {
return typeRangeType;
}
switch (typeRangeType.kind) {
case 'array': {
return typeRangeType;
}
case 'deconstructed': {
const arrayType = inferType(typeRangeType.node, symbolsTable, objectMap, filtersMap);
if (typeof arrayType === 'string') {
return Untyped;
} else {
return arrayType.valueType;
}
}
default: {
return inferType(typeRangeType.node, symbolsTable, objectMap, filtersMap);
}
}
}
function inferType(
thing: Identifier | LiquidExpression | LiquidVariable | AssignMarkup,
symbolsTable: SymbolsTable,
objectMap: ObjectMap,
filtersMap: FiltersMap,
): PseudoType | ArrayType {
if (typeof thing === 'string') {
return objectMap[thing as PseudoType]?.name ?? Untyped;
}
switch (thing.type) {
case NodeTypes.Number: {
return 'number';
}
case NodeTypes.String: {
return 'string';
}
case NodeTypes.LiquidLiteral: {
return 'boolean';
}
case NodeTypes.Range: {
return arrayType('number');
}
// The type of the assign markup is the type of the right hand side.
// {% assign x = y.property | filter1 | filter2 %}
case NodeTypes.AssignMarkup: {
return inferType(thing.value, symbolsTable, objectMap, filtersMap);
}
// A variable lookup is expression[.lookup]*
// {{ y.property }}
case NodeTypes.VariableLookup: {
return inferLookupType(thing, symbolsTable, objectMap, filtersMap);
}
// A variable is the VariableLookup + Filters
// The type is the return value of the last filter
// {{ y.property | filter1 | filter2 }}
case NodeTypes.LiquidVariable: {
if (thing.filters.length > 0) {
const lastFilter = thing.filters.at(-1)!;
const filterEntry = filtersMap[lastFilter.name];
return filterEntry ? filterEntryReturnType(filterEntry) : Untyped;
} else {
return inferType(thing.expression, symbolsTable, objectMap, filtersMap);
}
}
default: {
return Untyped;
}
}
}
function inferLookupType(
thing: LiquidVariableLookup,
symbolsTable: SymbolsTable,
objectMap: ObjectMap,
filtersMap: FiltersMap,
): PseudoType | ArrayType {
// we return the type of the drop, so a.b.c
const node = thing;
// We don't complete global lookups. It's too much of an edge case.
if (node.name === null) return Untyped;
/**
* curr stores the type of the variable lookup starting at the beginning.
*
* It starts as the type of the top-level identifier, and the we
* recursively change it to the return type of the lookups.
*
* So, for x.images.first.src we do:
* - curr = infer type of x | x
* - curr = x.images -> ArrayType<image> | x.images
* - curr = images.first -> image | x.images.first
* - curr = first.src -> string | x.images.first.src
*
* Once were done iterating, the type of the lookup is curr.
*/
let curr = inferIdentifierType(node, symbolsTable, objectMap, filtersMap);
for (let lookup of node.lookups) {
// Here we redefine curr to be the returnType of the lookup.
// e.g. images[0] -> image
// e.g. images.first -> image
// e.g. images.size -> number
if (isArrayType(curr)) {
curr = inferArrayTypeLookupType(curr, lookup);
}
// e.g. product.featured_image -> image
// e.g. product.images -> ArrayType<images>
// e.g. product.name -> string
else {
curr = inferPseudoTypePropertyType(curr, lookup, objectMap);
}
// Early return
if (curr === Untyped) {
return Untyped;
}
}
return curr;
}
/**
* Given a VariableLookup node, infer the type of its root (position-relative).
*
* e.g. for the following
* {% assign x = product %}
* {{ x.images.first }}
*
* This function infers the type of `x`.
*/
function inferIdentifierType(
node: LiquidVariableLookup,
symbolsTable: SymbolsTable,
objectMap: ObjectMap,
filtersMap: FiltersMap,
) {
// The name of a variable
const identifier = node.name;
// We don't complete the global access edge case
// e.g. {{ ['all_products'] }}
if (!identifier) {
return Untyped;
}
const typeRanges = symbolsTable[identifier];
if (!typeRanges) {
return Untyped;
}
const typeRange = findLast(typeRanges, (tr) => isCorrectTypeRange(tr, node));
return typeRange
? resolveTypeRangeType(typeRange.type, symbolsTable, objectMap, filtersMap)
: Untyped;
}
/**
* infers the type of a lookup on an ArrayType
* - images[0] becomes 'image'
* - images[index] becomes 'image'
* - images.first becomes 'image'
* - images.last becomes 'image'
* - images.size becomes 'number'
* - anything else becomes 'untyped'
*/
function inferArrayTypeLookupType(curr: ArrayType, lookup: LiquidExpression) {
// images[0]
// images[index]
if (lookup.type === NodeTypes.Number || lookup.type === NodeTypes.VariableLookup) {
return curr.valueType;
}
// images.first
// images.last
// images.size
// anything else is undef
else if (lookup.type === NodeTypes.String) {
switch (lookup.value) {
case 'first':
case 'last': {
return curr.valueType;
}
case 'size': {
return 'number';
}
default: {
return Untyped;
}
}
}
// images[true]
// images[(0..2)]
else {
return Untyped;
}
}
function inferPseudoTypePropertyType(
curr: PseudoType, // settings
lookup: LiquidExpression,
objectMap: ObjectMap,
) {
const parentEntry: ObjectEntry | undefined = objectMap[curr];
// products[0]
// products[true]
// products[(0..10)]
// unknown.images
if (!parentEntry || lookup.type !== NodeTypes.String) {
return Untyped;
}
const propertyName = lookup.value;
const property = parentEntry.properties?.find((property) => property.name === propertyName);
if (!property) {
return Untyped;
}
return objectEntryType(property);
}
function filterEntryReturnType(entry: FilterEntry): PseudoType | ArrayType {
return docsetEntryReturnType(entry, 'string');
}
function objectEntryType(entry: ObjectEntry): PseudoType | ArrayType {
return docsetEntryReturnType(entry, entry.name);
}
/**
* This function converts the return_type property in one of the .json
* files into a PseudoType or ArrayType.
*/
export function docsetEntryReturnType(
entry: ObjectEntry | FilterEntry,
defaultValue: PseudoType,
): PseudoType | ArrayType {
const returnTypes = entry.return_type;
if (returnTypes && returnTypes.length > 0) {
const returnType = returnTypes[0];
if (isArrayReturnType(returnType)) {
return arrayType(returnType.array_value);
} else {
return returnType.type;
}
}
return defaultValue;
}
function isArrayReturnType(rt: ReturnType): rt is ArrayReturnType {
return rt.type === 'array';
}
export function isArrayType(thing: PseudoType | ArrayType): thing is ArrayType {
return typeof thing !== 'string';
}
/** Assumes findLast */
function isCorrectTypeRange(typeRange: TypeRange, node: LiquidVariableLookup): boolean {
const [start, end] = typeRange.range;
if (end && node.position.start > end) return false;
return node.position.start > start;
}
function end(offset: number | undefined): number | undefined {
if (offset === -1) return undefined;
return offset;
}
function isLiquidTagIncrement(node: LiquidTag): node is LiquidTagIncrement {
return node.name === NamedTags.increment && typeof node.markup !== 'string';
}
function isLiquidTagDecrement(node: LiquidTag): node is LiquidTagDecrement {
return node.name === NamedTags.decrement && typeof node.markup !== 'string';
}
function settingReturnType(setting: InputSetting): ObjectEntry['return_type'] {
switch (setting.type) {
// basic settings
case 'checkbox':
return [{ type: 'boolean', name: '' }];
case 'range':
case 'number':
return [{ type: 'number', name: '' }];
case 'radio':
case 'select':
case 'text':
case 'textarea':
return [{ type: 'string', name: '' }];
// specialized settings
case 'article':
return [{ type: 'article', name: '' }];
case 'blog':
return [{ type: 'blog', name: '' }];
case 'collection':
return [{ type: 'collection', name: '' }];
case 'collection_list':
return [{ type: 'array', array_value: 'collection' }];
case 'color':
return [{ type: 'color', name: '' }];
case 'color_background':
return [{ type: 'string', name: '' }];
case 'color_scheme':
return [{ type: 'color_scheme', name: '' }];
// TODO ??
case 'color_scheme_group':
return [];
case 'font_picker':
return [{ type: 'font', name: '' }];
case 'html':
return [{ type: 'string', name: '' }];
case 'image_picker':
return [{ type: 'image', name: '' }];
case 'inline_richtext':
return [{ type: 'string', name: '' }];
case 'link_list':
return [{ type: 'linklist', name: '' }];
case 'liquid':
return [{ type: 'string', name: '' }];
case 'page':
return [{ type: 'page', name: '' }];
case 'product':
return [{ type: 'product', name: '' }];
case 'product_list':
return [{ type: 'array', array_value: 'product' }];
case 'richtext':
return [{ type: 'string', name: '' }];
case 'text_alignment':
return [{ type: 'string', name: '' }];
case 'url':
return [{ type: 'string', name: '' }];
case 'video':
return [{ type: 'video', name: '' }];
case 'video_url':
return [{ type: 'string', name: '' }];
default:
return [];
}
}
function schemaSettingsAsProperties(ast: LiquidHtmlNode): ObjectEntry[] {
if (ast.type !== NodeTypes.Document) return [];
try {
const source = ast._source; // (the unfixed source)
const start = /\{%\s*schema\s*%\}/m.exec(source);
const end = /\{%\s*endschema\s*%\}/m.exec(source);
if (!start || !end) return [];
const schema = source.slice(start.index + start[0].length, end.index);
const json = parseJSON(schema);
if (isError(json) || !('settings' in json) || !Array.isArray(json.settings)) return [];
const result: ObjectEntry[] = [];
const inputSettings = json.settings.filter(isInputSetting);
for (const setting of inputSettings) {
result.push({
name: setting.id,
summary: '', // TODO, this should lookup the locale file for settings... setting.label
description: '', // TODO , this should lookup the locale file as well... setting.info,
return_type: settingReturnType(setting),
access: {
global: false,
parents: [],
template: [],
},
});
}
return result;
} catch (_) {
return [];
}
}