PHPackages                             nettpack/stage - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. nettpack/stage

ActiveExtensions[Utility & Helpers](/categories/utility)

nettpack/stage
==============

Nettpack stage js for Nette

v1.0.9(6y ago)02347TypeScriptPHP ^7.2

Since Jun 12Pushed 6y agoCompare

[ Source](https://github.com/nettpack/stage)[ Packagist](https://packagist.org/packages/nettpack/stage)[ Docs](https://github.com/nettpack/stage)[ RSS](/packages/nettpack-stage/feed)WikiDiscussions master Synced 2mo ago

READMEChangelog (10)Dependencies (6)Versions (11)Used By (7)

NettPack - staging
------------------

[](#nettpack---staging)

##### Nettpack staging is package for creating node components into Nette project.

[](#nettpack-staging-is-package-for-creating-node-components-into-nette-project)

Required

- [@nettpack/core](https://www.npmjs.com/package/@nettpack/core)

#### How to use:

[](#how-to-use)

- First copy and paste content ./src/Config/stageJs.neon.dist into your config.neon in Nette project
- Now use trait NettPack\\Stage\\Application\\NettPackTrait into your base presenter file.

    ```
     use NettpackTrait;
    ```
- In layout.latte use this in head tag

    ```
     {control nettpackLoader}
    ```
- In layout.latte use this in body tag on bottom line

    ```
     {control nettpackControl}
    ```

#### How to use Application js class:

[](#how-to-use-application-js-class)

- now you must study [@nettpack/core](https://www.npmjs.com/package/@nettpack/core) line "example module (each module is webpack.config.js)" and search in webpack.config.js entry : {app: \[\]} Entry point of this application.js like this:

    ```
     if (module.hot) {
     	module.hot.accept();
     }
     import {App} from "Stage";

     function importAll (r) {
     	r.keys().forEach(r);
     }
     importAll(require.context('../', true, /\.(js|css|less|png|gif)$/));

     $(document).ready(function () {
     	App.run();
     });
    ```
- now you must study [@nettpack/core](https://www.npmjs.com/package/@nettpack/core) line "How to insert another vendor package files into build collection"
- Now you can create ComponentClass with sagas like this:

    ```
     if (module.hot) {
     	module.hot.accept();
     }

     import {App, BaseComponent, SAGA_REDRAW_SNIPPET, Saga, Reducer} from "Stage"

     class TestControlComponent extends BaseComponent {

     	initial() {
     		super.initial();
     		this.installPlugins();
     	}

     	@Saga(SAGA_REDRAW_SNIPPET)
     	public installPlugins(action = null){
     		let target = document;
     		if (action) {
     			const {content} = action.payload;
     			if (content) {
     				target = content
     			}
     		}
     	}
     }
     App.addComponent("TestControlComponent", TestControlComponent);
    ```

    - Function initial start after App start function run();
    - Annotation @Saga('TYPE\_NAME')
        - TYPE\_NAME name of event
        - function which may be run after event fire(to this action has been insert parameter action, this is Action object /vendor/nettpack/stage/src/Assets/Action.js)
        - SAGA\_REDRAW\_SNIPPET - fire after redraw snippet action
- If you want run saga onAnchor your component, you can use phpAnnotation.

    ```
     use NettPack\Stage\Annotations as NP;

     /**
      * @NP\NettPack(snippetSagas={
      *     @NP\SnippetSaga(saga="SAGA_MY_COMPONENT", snippet="snippet--my-component")
      * })
      */
     class MyComponent extends Control
     {
     }
    ```

    - After redrawControl my-component fire saga event SAGA\_MY\_COMPONENT and callback which has been on this event set

    ```
     @Saga('SAGA_MY_COMPONENT')
     public myFunction(action) {}
    ```
- If you want after Ajax action run another saga. To request data or parameters place parameter 'saga' and value 'name\_of\_saga\_may\_be\_run\_after\_response'

    ```
     const formData = new FormData(form[0]);
     formData.append('saga','name_of_saga_may_be_run_after_response');
     $.ajax({
     	type: 'POST',
     	url: form[0].action ,
     	data: formData,
     });
    ```
- If you want into saga pass another custom parameter please use function `addSagasParameter`

    ```
     import {addSagasParameter} from "Stage";
     const formData = new FormData();
     addSagasParameter(formData, 'paramName', 'paramValue');

    ```

#### Reducers

[](#reducers)

- BaseComponent contains function createReducer

    - Reducer is for change current state in store inside your application thanks listening on sagas events.
- Reducer example:

```
@Reducer('TEST')
public testReducer(state = {
       	myObject: {
       		A: undefined,
       		B: undefined,
       	}
       }, action) {
       	switch (action.type) {
       		// Listening on TEST_SAGA and save new State from payload
       		case 'TEST_SAGA': {
       			const myObject = action.payload.myObject;
       			return Object.assign({}, state, {
       				myObject,
       			});
       		}
       		default: {

       			return state;
       		}
       	}
       }
```

- And from App you can this reducer call

```
App.getStore().dispatch({
	type: 'TEST_SAGA',
	payload: {
		myObject: {
			A: "TEST_A",
			B: "TEST_B",
		}
	},
});

```

- In devTools in your browser adminMode you can see 'prev state' and 'next state' change inside Test object (my testReducer):

[![DevTools](src/DOC/devTools.PNG?raw=true)](src/DOC/devTools.PNG?raw=true)

###  Health Score

29

—

LowBetter than 59% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity11

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity60

Established project with proven stability

 Bus Factor1

Top contributor holds 66.7% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~29 days

Recently: every ~52 days

Total

10

Last Release

2264d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/5a500f94f138e7ada908cb2838a74907071575bdd36dc2cfc9454203de341ec1?d=identicon)[bajzany](/maintainers/bajzany)

---

Top Contributors

[![bajzany](https://avatars.githubusercontent.com/u/30310980?v=4)](https://github.com/bajzany "bajzany (12 commits)")[![chomenko](https://avatars.githubusercontent.com/u/2452430?v=4)](https://github.com/chomenko "chomenko (6 commits)")

---

Tags

stagenettpack

### Embed Badge

![Health badge](/badges/nettpack-stage/health.svg)

```
[![Health](https://phpackages.com/badges/nettpack-stage/health.svg)](https://phpackages.com/packages/nettpack-stage)
```

###  Alternatives

[ipub/gravatar

Gravatar creator for Nette Framework

122.0k1](/packages/ipub-gravatar)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)