# edge-stacks

> Stacks implementation for Edge

Latest version **2.0.0-0** (published 2023-08-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install edge-stacks
pnpm add edge-stacks
yarn add edge-stacks
bun add edge-stacks
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0-0 |
| Published | 2023-08-19 |
| First published | 2022-09-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18.16.0 |
| Dependencies | 3 |
| Unpacked size | 17.2 KB |
| Known vulnerabilities | 0 (+4 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 7 |
| Author | virk |
| Maintainers | virk |

## Links

- npm: https://www.npmjs.com/package/edge-stacks
- Repository: https://github.com/edge-js/stacks
- Homepage: https://github.com/edge-js/stacks#readme
- Issues: https://github.com/edge-js/stacks/issues
- npm.io page: https://npm.io/package/edge-stacks

## Dependencies (3)

- [nanoid](https://npm.io/package/nanoid.md) ^4.0.2
- [edge-error](https://npm.io/package/edge-error.md) ^3.0.0
- [edge-parser](https://npm.io/package/edge-parser.md) ^8.2.2

## Recent versions

- 2.0.0-0 (latest) — 2023-08-19
- 1.0.1 — 2023-03-20
- 1.0.0 — 2022-09-06
- 0.0.1-1 — 2022-09-05
- 0.0.1-0 — 2022-09-05

## README

# Edge stacks

[![gh-workflow-image]][gh-workflow-url] [![typescript-image]][typescript-url] [![npm-image]][npm-url] [![license-image]][license-url] [![synk-image]][synk-url]

Edge 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.

1. Following is the markup of a layout file.

   ```html
   <!doctype html>
   <html lang="en">
     <head>
       <!-- Creating a stack for JavaScript -->
       @stack('js')
     </head>
     <body>
       @!component('button', { message: 'Hello 👋' })
     </body>
   </html>
   ```

2. Now, let's create the button component. We will call a frontend JavaScript method `sayMessage` every time someone clicks the button.

   ```html
   <button click="sayMessage('{{ message }}')">Click me to get the message</button>
   ```

3. Finally, we must create the `sayMessage` function. With stacks, you can write JavaScript within the same component file.

   ```html
   <button onclick="sayMessage('{{ message }}')">Click me to get the message</button>

   @pushTo('js')
   <script>
     function sayMessage(message) {
       alert(message)
     }
   </script>
   @end
   ```

The `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.

However, the `@pushTo` tag will push contents as many times as you import the component, which can be a deal breaker in this case.

Therefore, we ship with another `@pushOnceTo` tag. It pushes the content to a stack only once, regardless of how many times you import the component.

## Setup

You can install the package from the npm package registry as follows.

```sh
npm i edge-stacks
```

And use it as a plugin as follows.

```ts
import { Edge } from 'edge.js'
import { edgeStacks } from 'edge-stacks'

const edge = new Edge()
edge.use(edgeStacks)
```

AdonisJS 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).

```ts
import View from '@ioc:Adonis/Core/View'
import { edgeStacks } from 'edge-stacks'

View.use(edgeStacks)
```

## Tags

Following is the list of tags registered by this package.

### @stack

The `@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.

```html
@stack('js') @stack('css')
```

Calling `@stack` multiple times with the same name will result in a runtime error.

```html
<!-- ❌ Fails -->
@stack('js') @stack('js')
```

```html
<!-- ✅ Works -->
@if(foo) @stack('js') @elseif (bar) @stack('js') @end
```

### @pushTo

The `@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.

```html
@pushTo('js')
<script defer></script>
@end
```

Calling `@pushTo` before registering a stack will result in an error.

```html
<!-- ❌ Fails, since the stack is created afterward -->
@pushTo('js') @end @stack('js')
```

### @pushOnceTo

The `@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.

```html
@pushOnceTo('js')
<script defer></script>
@end
```

![](https://cdn.jsdelivr.net/gh/thetutlage/static/sponsorkit/sponsors.png)

[gh-workflow-image]: https://img.shields.io/github/actions/workflow/status/edge-js/stacks/test.yml?style=for-the-badge
[gh-workflow-url]: https://github.com/edge-js/stacks/actions/workflows/test.yml 'Github action'
[typescript-image]: https://img.shields.io/badge/Typescript-294E80.svg?style=for-the-badge&logo=typescript
[typescript-url]: "typescript"
[license-image]: https://img.shields.io/npm/l/edge-stacks?color=blueviolet&style=for-the-badge
[license-url]: LICENSE.md 'license'
[npm-image]: https://img.shields.io/npm/v/edge-stacks.svg?style=for-the-badge&logo=npm
[npm-url]: https://npmjs.org/package/edge-stacks 'npm'
[synk-image]: https://img.shields.io/snyk/vulnerabilities/github/edge-js/stacks?label=Synk%20Vulnerabilities&style=for-the-badge
[synk-url]: https://snyk.io/test/github/edge-js/stacks?targetFile=package.json 'synk'

---
_Source: https://npm.io/package/edge-stacks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._