{"id":14156358,"url":"https://github.com/edge-js/stacks","last_synced_at":"2025-08-06T02:33:02.568Z","repository":{"id":58646477,"uuid":"532815451","full_name":"edge-js/stacks","owner":"edge-js","description":"Stacks implementation for the Edge template engine","archived":false,"fork":false,"pushed_at":"2023-08-19T07:30:35.000Z","size":51,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"develop","last_synced_at":"2024-11-08T16:49:47.501Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/edge-js.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":"thetutlage"}},"created_at":"2022-09-05T08:44:06.000Z","updated_at":"2024-01-24T23:27:25.000Z","dependencies_parsed_at":"2024-03-30T22:31:54.717Z","dependency_job_id":"53b983f2-8dd6-4048-b78f-0cd98dbfa6d6","html_url":"https://github.com/edge-js/stacks","commit_stats":{"total_commits":13,"total_committers":1,"mean_commits":13.0,"dds":0.0,"last_synced_commit":"36941c87b1e8e8b8982fee6c6cfd5a427e37c839"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edge-js%2Fstacks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edge-js%2Fstacks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edge-js%2Fstacks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edge-js%2Fstacks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/edge-js","download_url":"https://codeload.github.com/edge-js/stacks/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228780288,"owners_count":17971280,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-17T08:05:24.355Z","updated_at":"2024-12-09T03:31:30.443Z","avatar_url":"https://github.com/edge-js.png","language":"TypeScript","funding_links":["https://github.com/sponsors/thetutlage"],"categories":["others"],"sub_categories":[],"readme":"# Edge stacks\n\n[![gh-workflow-image]][gh-workflow-url] [![typescript-image]][typescript-url] [![npm-image]][npm-url] [![license-image]][license-url] [![synk-image]][synk-url]\n\nEdge stacks allow you to create content placeholders and push content inside them from other parts of your template. For example, You can create a placeholder for inline JavaScript in the `head` tag and push `script` tags inside it from components.\n\n1. Following is the markup of a layout file.\n   ```html\n   \u003c!DOCTYPE html\u003e\n    \u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n\n      \u003c!-- Creating a stack for JavaScript --\u003e\n      @stack('js')\n\n    \u003c/head\u003e\n    \u003cbody\u003e\n      @!component('button', { message: 'Hello 👋' })\n    \u003c/body\u003e\n    \u003c/html\u003e\n   ```\n\n2. Now, let's create the button component. We will call a frontend JavaScript method `sayMessage` every time someone clicks the button.\n    ```html\n    \u003cbutton click=\"sayMessage('{{ message }}')\"\u003e\n      Click me to get the message\n    \u003c/button\u003e\n    ```\n\n3. Finally, we must create the `sayMessage` function. With stacks, you can write JavaScript within the same component file.\n    ```html\n    \u003cbutton onclick=\"sayMessage('{{ message }}')\"\u003e\n      Click me to get the message\n    \u003c/button\u003e\n\n    @pushTo('js')\n      \u003cscript\u003e\n        function sayMessage(message) {\n          alert(message)\n        }\n      \u003c/script\u003e\n    @end\n    ```\n\nThe `pushTo` tag accepts the stack's name in which to push the content. The above example will push the content inside the `js` stack we defined inside the layout file.\n\nHowever, the `@pushTo` tag will push contents as many times as you import the component, which can be a deal breaker in this case.\n\nTherefore, we ship with another `@pushOnceTo` tag. It pushes the content to a stack only once, regardless of how many times you import the component.\n\n## Setup\nYou can install the package from the npm package registry as follows.\n\n```sh\nnpm i edge-stacks\n```\n\nAnd use it as a plugin as follows.\n\n```ts\nimport { Edge } from 'edge.js'\nimport { edgeStacks } from 'edge-stacks'\n\nconst edge = new Edge()\nedge.use(edgeStacks)\n```\n\nAdonisJS users can register the plugin with the `View` object. Then, to write the setup code, you can create a [preload file](https://docs.adonisjs.com/guides/adonisrc-file#preloads).\n\n```ts\nimport View from '@ioc:Adonis/Core/View'\nimport { edgeStacks } from 'edge-stacks'\n\nView.use(edgeStacks)\n```\n\n## Tags\nFollowing is the list of tags registered by this package.\n\n### @stack\nThe `@stack` tag creates a named placeholder where other parts of your template can push content. The tag only accepts a single argument as the name of the stack.\n\n```html\n@stack('js')\n@stack('css')\n```\n\nCalling `@stack` multiple times with the same name will result in a runtime error.\n\n```html\n\u003c!-- ❌ Fails --\u003e\n@stack('js')\n@stack('js')\n```\n\n```html\n\u003c!-- ✅ Works --\u003e\n@if(foo)\n  @stack('js')\n@elseif (bar)\n  @stack('js')\n@end\n```\n\n### @pushTo\nThe `@pushTo` tag pushes the contents inside a given named stack. The tag accepts a single argument as the stack name, followed by the content as the tag body.\n\n```html\n@pushTo('js')\n  \u003cscript defer\u003e\n  \u003c/script\u003e\n@end\n```\n\nCalling `@pushTo` before registering a stack will result in an error.\n\n```html\n\u003c!-- ❌ Fails, since the stack is created afterward --\u003e\n@pushTo('js')\n@end\n\n@stack('js')\n```\n\n### @pushOnceTo\nThe `@pushOnceTo` tag is the same as the `@pushTo` tag. However, it pushes the contents only once. The `@pushOnceTo` tag is helpful inside components and partials. So that you can import them multiple times, but the push side-effect happens only once.\n\n```html\n@pushOnceTo('js')\n  \u003cscript defer\u003e\n  \u003c/script\u003e\n@end\n```\n\n![](https://cdn.jsdelivr.net/gh/thetutlage/static/sponsorkit/sponsors.png)\n\n[gh-workflow-image]: https://img.shields.io/github/actions/workflow/status/edge-js/stacks/test.yml?style=for-the-badge\n[gh-workflow-url]: https://github.com/edge-js/stacks/actions/workflows/test.yml \"Github action\"\n\n[typescript-image]: https://img.shields.io/badge/Typescript-294E80.svg?style=for-the-badge\u0026logo=typescript\n[typescript-url]: \"typescript\"\n\n[license-image]: https://img.shields.io/npm/l/edge-stacks?color=blueviolet\u0026style=for-the-badge\n[license-url]: LICENSE.md 'license'\n\n[npm-image]: https://img.shields.io/npm/v/edge-stacks.svg?style=for-the-badge\u0026logo=npm\n[npm-url]: https://npmjs.org/package/edge-stacks 'npm'\n\n[synk-image]: https://img.shields.io/snyk/vulnerabilities/github/edge-js/stacks?label=Synk%20Vulnerabilities\u0026style=for-the-badge\n[synk-url]: https://snyk.io/test/github/edge-js/stacks?targetFile=package.json \"synk\"\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedge-js%2Fstacks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedge-js%2Fstacks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedge-js%2Fstacks/lists"}