nystudio107 /
craft-twigfield
| Conditions | 19 |
| Total Lines | 106 |
| Code Lines | 76 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
Complex classes like autocomplete.ts ➔ addCompletionItemsToMonaco often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
| 1 | /** |
||
| 36 | |||
| 37 | /** |
||
| 38 | * Register completion items with the Monaco editor, for the Twig language |
||
| 39 | * |
||
| 40 | * @param completionItems array of completion items, with sub-properties in `COMPLETION_KEY` |
||
| 41 | * @param autocompleteType the type of autocomplete, either `TwigExpressionAutocomplete` or `GeneralAutocomplete` |
||
| 42 | * @param hasSubProperties where the autocomplete has sub-properties, and should be parsed as such |
||
| 43 | */ |
||
| 44 | function addCompletionItemsToMonaco(completionItems: AutocompleteResponse, autocompleteType: AutocompleteTypes, hasSubProperties: boolean) { |
||
| 45 | monaco.languages.registerCompletionItemProvider('twig', { |
||
| 46 | triggerCharacters: ['.', '('], |
||
| 47 | provideCompletionItems: function (model, position, token) { |
||
| 48 | let result: monaco.languages.CompletionItem[] = []; |
||
| 49 | let currentItems = completionItems; |
||
| 50 | // Get the last word the user has typed |
||
| 51 | const currentLine = model.getValueInRange({ |
||
| 52 | startLineNumber: position.lineNumber, |
||
| 53 | startColumn: 0, |
||
| 54 | endLineNumber: position.lineNumber, |
||
| 55 | endColumn: position.column |
||
| 56 | }); |
||
| 57 | let inTwigExpression = true; |
||
| 58 | // Ensure we're inside of a Twig expression |
||
| 59 | if (currentLine.lastIndexOf('{') === -1) { |
||
| 60 | inTwigExpression = false; |
||
| 61 | } |
||
| 62 | const startExpression = currentLine.substring(currentLine.lastIndexOf('{')); |
||
| 63 | if (startExpression.indexOf('}') !== -1) { |
||
| 64 | inTwigExpression = false; |
||
| 65 | } |
||
| 66 | // We are not in a Twig expression, and this is a TwigExpressionAutocomplete, return nothing |
||
| 67 | if (!inTwigExpression && autocompleteType === 'TwigExpressionAutocomplete') { |
||
| 68 | return null; |
||
| 69 | } |
||
| 70 | // Get the current word we're typing |
||
| 71 | const currentWords = currentLine.replace("\t", "").split(" "); |
||
| 72 | let currentWord = currentWords[currentWords.length - 1]; |
||
| 73 | // If the current word includes { or ( or >, split on that, too, to allow the autocomplete to work in nested functions and HTML tags |
||
| 74 | if (currentWord.includes('{')) { |
||
| 75 | currentWord = getLastItem(currentWord.split('{')); |
||
| 76 | } |
||
| 77 | if (currentWord.includes('(')) { |
||
| 78 | currentWord = getLastItem(currentWord.split('(')); |
||
| 79 | } |
||
| 80 | if (currentWord.includes('>')) { |
||
| 81 | currentWord = getLastItem(currentWord.split('>')); |
||
| 82 | } |
||
| 83 | const isSubProperty = currentWord.charAt(currentWord.length - 1) === "."; |
||
| 84 | // If we're in a sub-property (following a .) don't present non-TwigExpressionAutocomplete items |
||
| 85 | if (isSubProperty && autocompleteType !== 'TwigExpressionAutocomplete') { |
||
| 86 | return null; |
||
| 87 | } |
||
| 88 | // We are in a Twig expression, handle TwigExpressionAutocomplete by walking through the properties |
||
| 89 | if (inTwigExpression && autocompleteType === 'TwigExpressionAutocomplete') { |
||
| 90 | // If the last character typed is a period, then we need to look up a sub-property of the completionItems |
||
| 91 | if (isSubProperty) { |
||
| 92 | // If we're in a sub-property, and this autocomplete doesn't have sub-properties, don't return its items |
||
| 93 | if (!hasSubProperties) { |
||
| 94 | return null; |
||
| 95 | } |
||
| 96 | // Is a sub-property, get a list of parent properties |
||
| 97 | const parents = currentWord.substring(0, currentWord.length - 1).split("."); |
||
| 98 | if (typeof completionItems[parents[0]] !== 'undefined') { |
||
| 99 | currentItems = completionItems[parents[0]]; |
||
| 100 | // Loop through all the parents to traverse the completion items and find the current one |
||
| 101 | for (let i = 1; i < parents.length; i++) { |
||
| 102 | if (currentItems.hasOwnProperty(parents[i])) { |
||
| 103 | currentItems = currentItems[parents[i]]; |
||
| 104 | } else { |
||
| 105 | const finalItems: monaco.languages.ProviderResult<monaco.languages.CompletionList> = { |
||
| 106 | suggestions: result |
||
| 107 | } |
||
| 108 | return finalItems; |
||
| 109 | } |
||
| 110 | } |
||
| 111 | } |
||
| 112 | } |
||
| 113 | } |
||
| 114 | // Get all the child properties |
||
| 115 | if (typeof currentItems !== 'undefined') { |
||
| 116 | for (let item in currentItems) { |
||
| 117 | if (currentItems.hasOwnProperty(item) && !item.startsWith("__")) { |
||
| 118 | const completionItem = currentItems[item][COMPLETION_KEY]; |
||
| 119 | if (typeof completionItem !== 'undefined') { |
||
| 120 | // Monaco adds a 'range' to the object, to denote where the autocomplete is triggered from, |
||
| 121 | // which needs to be removed each time the autocomplete objects are re-used |
||
| 122 | delete completionItem.range; |
||
| 123 | if ('documentation' in completionItem && typeof completionItem.documentation !== 'object') { |
||
| 124 | let docs = completionItem.documentation; |
||
| 125 | completionItem.documentation = { |
||
| 126 | value: docs, |
||
| 127 | isTrusted: true, |
||
| 128 | supportsHtml: true |
||
| 129 | } |
||
| 130 | } |
||
| 131 | // Add to final results |
||
| 132 | result.push(completionItem); |
||
| 133 | } |
||
| 134 | } |
||
| 135 | } |
||
| 136 | } |
||
| 137 | |||
| 138 | const finalItems: monaco.languages.ProviderResult<monaco.languages.CompletionList> = { |
||
| 139 | suggestions: result |
||
| 140 | } |
||
| 141 | return finalItems; |
||
| 142 | } |
||
| 260 |
