README

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

Required

@nettpack/core

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:

now you must study @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 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

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):

nettpack / stage

Maintainers

Details

README

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

How to use:

How to use Application js class:

Reducers