{"_id":"@cis-badvilbel/twig-monaco-editor","_rev":"3-611e441b7f207534068170a302030584","name":"@cis-badvilbel/twig-monaco-editor","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@cis-badvilbel/twig-monaco-editor","version":"1.0.0","keywords":["TWIG","IntelliSense","Monaco","Monaco-Editor"],"author":{"name":"Kay Schroeder","email":"kay.schroeder@cis-gotha.de"},"license":"MIT","_id":"@cis-badvilbel/twig-monaco-editor@1.0.0","maintainers":[{"name":"cis-badvilbel","email":"kay.schroeder@cis-gotha.de"}],"homepage":"https://github.com/cis-ks/twig-monaco-editor#readme","bugs":{"url":"https://github.com/cis-ks/twig-monaco-editor/issues"},"dist":{"shasum":"11bb9db5fdbfcbeda2b4b8accea4de7257402299","tarball":"https://registry.npmjs.org/@cis-badvilbel/twig-monaco-editor/-/twig-monaco-editor-1.0.0.tgz","fileCount":11,"integrity":"sha512-khqi/4cy3Q81h9lES7WCljvd/CzjzNy84h6OPQnjkSSW1TEQZSHwv1vxRf6NvU6CKVlnAa9lV1s5Xe9jZrTiUw==","signatures":[{"sig":"MEUCIQDiJY9EHrpKofM6iwyvscBMW6xo9Yo8lNxIPowAl9iF2QIgIHw2k8VCY6t/716S1s9ZQMg6PE6wrAa/WVdTlt49QgE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":35273},"main":"src/index.ts","types":"src/types.d.ts","module":"src/index.ts","gitHead":"f92e59d0c393da83abf381512190e77549b3125b","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"cis-badvilbel","email":"kay.schroeder@cis-gotha.de"},"repository":{"url":"git+https://github.com/cis-ks/twig-monaco-editor.git","type":"git"},"_npmVersion":"10.9.2","description":"IntelliSense for Twig within Micros0ofts Monaco-Editor","directories":{},"_nodeVersion":"22.14.0","dependencies":{"monaco-editor":"^0.52"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^9.20.1","@eslint/js":"^9.20.0","typescript":"^5.7.3","typescript-eslint":"^8.24.1"},"_npmOperationalInternal":{"tmp":"tmp/twig-monaco-editor_1.0.0_1764618992304_0.6203433275496977","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@cis-badvilbel/twig-monaco-editor","version":"1.0.2","keywords":["TWIG","IntelliSense","Monaco","Monaco-Editor"],"author":{"name":"Kay Schroeder","email":"kay.schroeder@cis-gotha.de"},"license":"MIT","_id":"@cis-badvilbel/twig-monaco-editor@1.0.2","maintainers":[{"name":"cis-badvilbel","email":"kay.schroeder@cis-gotha.de"}],"homepage":"https://github.com/cis-ks/twig-monaco-editor#readme","bugs":{"url":"https://github.com/cis-ks/twig-monaco-editor/issues"},"dist":{"shasum":"42a81fc32975d1e70d7e4088379ca006a010e32c","tarball":"https://registry.npmjs.org/@cis-badvilbel/twig-monaco-editor/-/twig-monaco-editor-1.0.2.tgz","fileCount":11,"integrity":"sha512-Po0q9vPHZ+AzQwDr95LSFBjEXz5hlpDP27tECS6avkBMqCK++JS3rRNF/NptAQL2Uz6q9eat4mF9b3ORzKt3cw==","signatures":[{"sig":"MEQCIDevVWeb2Uz14AMrog97YkjbotUdGlnVxD1Jo1LO2afBAiB+j3q4nVXDm5Ha3KrIuewy4nULp2NKyBVJ/r1yEU74gA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":50124},"main":"src/index.ts","types":"src/types.d.ts","module":"src/index.ts","gitHead":"16650470b2a9b9c03a6505a2a3d0df30d8401afd","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"cis-badvilbel","email":"kay.schroeder@cis-gotha.de"},"repository":{"url":"git+https://github.com/cis-ks/twig-monaco-editor.git","type":"git"},"_npmVersion":"10.9.3","description":"IntelliSense for Twig within Micros0ofts Monaco-Editor","directories":{},"_nodeVersion":"22.18.0","dependencies":{"monaco-editor":"^0.55"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^9.39.1","@eslint/js":"^9.39.1","typescript":"^5.9.3","typescript-eslint":"^8.48.1"},"_npmOperationalInternal":{"tmp":"tmp/twig-monaco-editor_1.0.2_1765186047848_0.7526592269147854","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@cis-badvilbel/twig-monaco-editor","version":"1.0.3","description":"IntelliSense for Twig within Micros0ofts Monaco-Editor","main":"src/index.ts","module":"src/index.ts","types":"src/types.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/cis-ks/twig-monaco-editor.git"},"keywords":["TWIG","IntelliSense","Monaco","Monaco-Editor"],"author":{"name":"Kay Schroeder","email":"kay.schroeder@cis-gotha.de"},"license":"MIT","bugs":{"url":"https://github.com/cis-ks/twig-monaco-editor/issues"},"homepage":"https://github.com/cis-ks/twig-monaco-editor#readme","dependencies":{"monaco-editor":"^0.55"},"devDependencies":{"@eslint/js":"^9.39.1","eslint":"^9.39.1","typescript":"^5.9.3","typescript-eslint":"^8.48.1"},"_id":"@cis-badvilbel/twig-monaco-editor@1.0.3","gitHead":"6837c32630739c9a755227046f8a00ac833f2dc8","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-IbFjQdnU3l0gXhFVJfqb/vmQupOaEhA0V7nMDoxjpXBZjecVUhDbo8JKGMdIOEt5kErreNDqPsijqnAE57uWHw==","shasum":"c79909c5bc8b37967bf0c514c54eb65d80aec31b","tarball":"https://registry.npmjs.org/@cis-badvilbel/twig-monaco-editor/-/twig-monaco-editor-1.0.3.tgz","fileCount":11,"unpackedSize":35273,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDxWJ/lVS45wqLmhKdN9aFV5+K8PoIbxgv7oUyA2esunAiEAki8NEsudpTYHM21p+bVHls8thPtMqrl/z925kix6+PA="}]},"_npmUser":{"name":"cis-badvilbel","email":"kay.schroeder@cis-gotha.de"},"directories":{},"maintainers":[{"name":"cis-badvilbel","email":"kay.schroeder@cis-gotha.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/twig-monaco-editor_1.0.3_1765186294372_0.5693920800869903"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-01T19:56:32.158Z","modified":"2025-12-08T09:31:34.715Z","1.0.0":"2025-12-01T19:56:32.488Z","1.0.2":"2025-12-08T09:27:28.004Z","1.0.3":"2025-12-08T09:31:34.528Z"},"bugs":{"url":"https://github.com/cis-ks/twig-monaco-editor/issues"},"author":{"name":"Kay Schroeder","email":"kay.schroeder@cis-gotha.de"},"license":"MIT","homepage":"https://github.com/cis-ks/twig-monaco-editor#readme","keywords":["TWIG","IntelliSense","Monaco","Monaco-Editor"],"repository":{"type":"git","url":"git+https://github.com/cis-ks/twig-monaco-editor.git"},"description":"IntelliSense for Twig within Micros0ofts Monaco-Editor","maintainers":[{"name":"cis-badvilbel","email":"kay.schroeder@cis-gotha.de"}],"readme":"## Installation\n\n````shell\nnpm require @cis-badvilbel/twig-monaco-editor\n````\n\n## Features\n\n- Auto-completion of Twig 3.x control structures, filters and functions\n- Extension of autocomplete with your own definitions (filters, functions, variables)\n- When using nested variables/objects, filters (such as ``last``, ``first`` or ``filter``) are \"ignored\".\n\n## Usage\n\n### Using just the Twig-Completion-Editor-Class\nThe following minimal example enables the use of the Monaco editor including auto-completion for the Twig control structures, filters and functions.\n\n```html\n<div id=\"editor\"></div>\n```\n\n```javascript\nimport {TwigMonacoEditor} from 'twig-monaco-editor'\n\ndocument.addEventListener('DOMContentLoaded', () => {\n    const editor = new TwigMonacoEditor('editor', {})\n})\n```\n\nThe first option is the ID of the HTML DOM element that is to be replaced by the editor.\n\nThe second option are further options that are used to instantiate the editor. [See Monaco Editor documentation](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IStandaloneEditorConstructionOptions.html) for more details.\nOnly the language is set to ``twig`` and does not need to be stored or is automatically overwritten.\n\n### Using only the Completion-Provider\n\nIt is also possible to use only the completion provider, which also enables use in a language other than Twig:\n\n```javascript\nimport {twigCompletionProvider} from 'twig-monaco-editor'\nimport * as monaco from 'monaco-editor'\n\nmonaco.languages.registerCompletionItemProvider('twig', new twigCompletionProvider(\n    customCompletionOptions,\n    customFilterOptions,\n    customFunctionOptions,\n    defaultCompletionKind\n))\n```\n\nAll options are optional.\n\nThe following descriptions of the functions also apply when using the provider directly.\n\n### Adding Custom Completion Options\n\nTwig offers the option of defining your own filters or functions. These can be integrated into the Twig Monaco editor alongside your own variables.\n\nThe following object structure is used internally for this purpose:\n\n```typescript\ntype CompletionOption = {\n    label?: string,\n    insertText?: string|insertTextSnippet,\n    insertTextRules?: CompletionItemInsertTextRule\n    kind?: CompletionItemKind,\n    detail?: string,\n    hint?: string,\n    documentation?: string,\n    subOptions?: CompletionOptions|CompletionItem[],\n    is_list?: boolean,\n    range?: Range\n}\n```\n\nIt follows the structure of the [``CompletionItem`` of the Monaco editor](https://microsoft.github.io/monaco-editor/docs.html#interfaces/languages.CompletionItem.html).\n\nThe transfer to the Twig Monaco editor takes place as a CompletionOptions object, which represents a simple assignment of the label to the CompletionOption:\n\n```javascript\n{\n    label: { ... },\n    variable: { ... }\n}\n```\n\nInternally, the properties are adopted or \"calculated\" via default values, if not defined.\n\n- Label and insertText are taken from the key if not specified.\n- The kind can be specified or the default value is used. The default value can be passed to the constructor as the 6th option, otherwise it is ``languages.CompletionItemKind.Property``.\n- Range is filled in automatically when the suggestion list is created and does not need to be entered.\n- Detail is ``string`` in case it is not defined\n- SubOptions is again an object with the pairing of Key and CompletionOption.\n\n#### Example\n\nThe following example is a minimal example of an auto-completion of individual variables or variables/objects with corresponding properties:\n\n```javascript\nconst completion = {\n    device: {\n        subOptions: {\n            id: {\n                detail: 'integer'\n            },\n            hostname: {},\n            ip_address: {},\n            interfaces: {\n                subOptions: {\n                    name: {},\n                    access_vlan: {}\n                }\n            }\n        }\n    },\n    locations: {\n        subOptions: {\n            name: {},\n            address: {},\n            contact: {}\n        }\n    }\n}\n```\n\n#### Initialization with own completion options\n\n```javascript\nconst editor = new TwigMonacoEditor(\n    'editor',\n    {},\n    <customCompletion/VariableOptions>,\n    <customFilterOptions>,\n    <customFunctionOptions>,\n    <defaultCompletionKind>\n)\n```\n\n### Custom functions/filters with snippet/tab support\n\nThe definition of your own functions or filters with parameters can also be stored as a code snippet so that tab stops can be set up and used.\n\nAll you need to do is define ``insertText`` as follows:\n\n```javascript\n{\n    functionName: {\n        insertText: { value: \"functionName(${1}, ${2})${0}\"}\n    }\n}\n```\n\nAll tab stops are defined consecutively with ``${i}``. ``${0}`` is then the final position after you have finished.\n\nThe required ``InsertTextRule`` is automatically set to the correct value ``monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet``.\n\n### Variables in FOR loops and in SET statements\n\nIf variables are defined in set statements or for loops, these variables are also added to the list of suggestions. Assignments to nested variables are adopted.\n\nWhen reassigning variables to nested objects, all filters that do not contain a space are automatically filtered out. For the ``filter`` filter, the complete statement is filtered out and a sub-assignment is possible, e.g:\n\n```\n{% for deviceInterfaces in devices|filter((d) => d.name == 'router1').interfaces %}\n```\n\nThis example only shows the basic mode of operation and ``deviceInterfaces`` refers to the definition in ``devices.subOptions.interfaces`` in its own ``customCompletionOptions`` object.\n\nWith For loops, the scope (you are inside the loop) is taken into account.\n\nFor set statements, the scope (within a ``{% with %}``) is currently **not** observed.\n\n## Access to editor instance\n\nAccess to the editor instance is still possible via the ``editor`` property:\n\n```javascript\nconst twigEditor = new TwigMonacoEditor('editor', {})\n\nconst value = twigEditor.editor.getValue()\ntwigEditor.editor.setValue('Replacing the content')\n```\n\n## Using with Vite: Splitting the JS files\n\nIt is recommended not to use the standard build settings for Vite, as this leads to duplications and unnecessarily large index files, which usually slow down the initial loading of the page.\n\nWith the following settings, which are only an example and must be adapted to your own project, the index files are kept as small as possible and at the same time duplicated code for the Monaco editor (which is around 3-6MB in size when unpacked) is kept to a minimum.\n\n```javascript\nexport default defineConfig({\n    build: {\n        rollupOptions: {\n            output: {\n                manualChunks(id, meta) {\n                    if (id.includes('twig-monaco-editor')) {\n                        return 'twig-monaco-editor'\n                    } else if (id.includes('monaco-editor')) {\n                        return 'monaco-editor'\n                    } else {\n                        return 'vendor' // Or do what you think fits your code best\n                    }\n                }\n            }\n        }\n    },\n    resolve: {\n        dedupe: ['monaco-editor'] // This ensures, that twig-monaco-editor and monaco-editor don't include the same source\n    }\n})\n\n```\n\nThe above example provides the following output variables in a small example:\n\n```\ndist/index.html                                 1.49 kB │ gzip:   0.56 kB\ndist/assets/codicon-DCmgc-ay.ttf               80.34 kB\ndist/assets/index-CRb4mluJ.css                131.64 kB │ gzip:  20.66 kB\ndist/assets/monaco-editor-BMrrEDdW.css        133.02 kB │ gzip:  21.10 kB\ndist/assets/index-DQXZqKF-.js                   1.99 kB │ gzip:   1.04 kB\ndist/assets/twig-monaco-editor-Df71ywh5.js      9.67 kB │ gzip:   2.88 kB\ndist/assets/monaco-editor-BITGtLfy.js       3,912.93 kB │ gzip: 993.61 kB\n```\n\nWith the automatic packaging of Vite, some parts of the Monaco editor are outsourced, but the Monaco editor, together with the Twig Monaco editor, is also packed as a duplicate in index.js:\n\n```\ndist/index.html                               1.10 kB │ gzip:     0.50 kB\ndist/assets/codicon-DCmgc-ay.ttf             80.34 kB\ndist/assets/index-seylN-Z1.css              213.40 kB │ gzip:    34.46 kB\ndist/assets/azcli-BaLxmfj-.js                 1.09 kB │ gzip:     0.46 kB\ndist/assets/azcli-D1avlpzM.js                 1.09 kB │ gzip:     0.46 kB\n...\n~ 165 files with about 0.5-8kB\n...\ndist/assets/jsonMode-DQXoFORo.js             41.78 kB │ gzip:    12.13 kB\ndist/assets/jsonMode-DY4fHppG.js             41.78 kB │ gzip:    12.13 kB\ndist/assets/index-qhdgBbuR.js             6,686.61 kB │ gzip: 1,719.00 kB\n```\n\nThis reduces the loading speed, as the browser has to load the main components completely before the page is displayed. The browser can only load the other data, including the Monaco editor, asynchronously by splitting it up.","readmeFilename":"README.md"}