{"id":37347151,"url":"https://github.com/said10/invock-js","last_synced_at":"2026-01-16T04:00:05.975Z","repository":{"id":57275567,"uuid":"141753978","full_name":"said10/invock-js","owner":"said10","description":"Javascript Framework for building User Interface Components","archived":false,"fork":false,"pushed_at":"2018-08-01T21:05:36.000Z","size":174,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-19T20:56:12.668Z","etag":null,"topics":["components","framework","reactive","state-management","user-interface"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/said10.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-20T20:16:34.000Z","updated_at":"2018-08-02T13:16:33.000Z","dependencies_parsed_at":"2022-09-15T19:12:49.282Z","dependency_job_id":null,"html_url":"https://github.com/said10/invock-js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/said10/invock-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/said10%2Finvock-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/said10%2Finvock-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/said10%2Finvock-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/said10%2Finvock-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/said10","download_url":"https://codeload.github.com/said10/invock-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/said10%2Finvock-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28477206,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T03:13:13.607Z","status":"ssl_error","status_checked_at":"2026-01-16T03:11:47.863Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["components","framework","reactive","state-management","user-interface"],"created_at":"2026-01-16T04:00:05.776Z","updated_at":"2026-01-16T04:00:05.864Z","avatar_url":"https://github.com/said10.png","language":null,"readme":"# invock-js\nJavascript Framework for building User Interface Components\n\nIt's Aplha Version not ready for production.\n\nNB : Please Create the Issues in github if a problem appear.[invock-js Issues](https://github.com/said10/invock-js/issues)\n\n# Table of contents\n- [Architecture](#Architecture)\n- [Installation](#installation)\n- [Architecture](#Architecture)\n- [Get Started](#Get Started)\n- [Component](#Component)\n- [Mount Component](#Mount Component)\n- [Template Language](#Template Language)\n- [Filter](#Filter)\n- [State \u0026 Props](#State \u0026 Props)\n- [Events](#Events)\n- [If Condition](#If Condition)\n- [Else Condition](#Else Condition)\n- [For-Loop operation](#For-Loop operation)\n- [Methodes of Component](#Methodes of Component)\n- [State Management](#State Management)\n- [Module HTTP](#Module HTTP)\n- [Module Layout](#Module Layout)\n- [Desktop \u0026 Mobile management](#Desktop \u0026 Mobile management)\n- [Plugins for DOM manipulation](#Plugins for DOM manipulation)\n- [Module Layout](#Module Layout)\n- [Module Router](#Module Router)\n- [Advanced State Management](#advanced-state-management)\n- [Module UI](#Module UI)\n- [Middlwares](#Middlwares)\n- [Extra things](#Extra things)\n- [Exemples \u0026 Demos](#Exemples \u0026 Demos)\n- [Test](#Test)\n- [Ressources](#Ressources)\n- [License](#License)\n\n## Architecture\n![Architecture of invock-js](https://raw.githubusercontent.com/said10/invock-js/master/architecture_of_framework.png)\n\n## Installation\n\nInstallation from npm\n\n```js\nnpm install invock-js\n```\n\nFor Browser Use\n```js\n\u003cscript src=\"js/dist/invock.js\"\u003e\u003c/script\u003e\n```\n\n## Get Started\n\nTo start with invock-js you have to clone the project GET_STARTED in order to use invock-js quickly. \n```js\ngit clone https://github.com/said10/invock-js-get-started.git\nnpm install\n```\nThe directory contains all the items you will need to get started :\n\n```js\nnpm start\n```\n\n## Component\nto create your components you need to extend from Component Object like this :\n```js\nimport invock, {Component} from \"invock-js\";\n\nclass Header extends Component {\n    \n    constructor(props) {\n        super(props);\n    }\n    render() {\n        return `\n            \u003ch1\u003eHello World\u003c/h1\u003e\n        `;\n    }\n}\n```\nThen you have to export the created component like that\n\n```js\ninvock.export(\"Header\", Header);\n```\n\n## Mount Component\n\nto display a component on the DOM of your application it is necessary to do\n\n```js\ninvock.mount({ parent : \"#container\", root : \"{% Header %}\" });\n```\nNote: it is not necessary to use invock.mount on each component just creates the export is mandatory, but for invock.mount it's better to use it just on the main component of your application\n\n## Template Language\n\nthe language template used to describe your components is inspired by Jinja2 (templating engine for Python), it is very simple and easy to use since it is used on many Framework and tools.\n\n```js\nimport invock, {Component} from \"invock-js\";\n\nclass Header extends Component {\n    constructor(props) {\n        super(props);\n        this.props.title = \"Hello World\";\n    }\n    render() {\n        return `\n            \u003ch1\u003e{{props.title}}\u003c/h1\u003e\n        `;\n    }\n}\ninvock.export(\"Header\", Header);\n```\nto be able to call a component inside another component in the HTML code you have to do this\n\n```js\nimport invock, {Component} from \"invock-js\";\nimport Title from \"invock-js\";\n\nclass Header extends Component {\n    render() {\n        return `\n            {% Title %}\n        `;\n    }\n}\ninvock.export(\"Header\", Header);\n```\n\n## Filter\nthe role of Filter module is to help you to process and manipulate data in a transparent way without touching the DOM which is itself is cut through by JS,\nExample making a text uppercase\n```js\nrender() {\n    return `\n        \u003ch1\u003e{{props.title|upper}}\u003c/h1\u003e\n    `;\n}\n```\nthe Filter module contains by default more than 21 ready-to-use filter to be able to do the basic treatments without you developing them every time, these filters accept parameters to give you more flexibility and control over the rendering of your data in the components : \n\n- add : Adds the argument to the value\n- multiply : multiply the argument to the value\n- length : Returns the length of the value. This works for both strings and lists.\n- addSlashes : Adds slashes before quotes. Useful for escaping strings\n- capFirst : Capitalizes the first character of the value\n- cut : Removes all values of arg from the given string\n- default : If value evaluates to False / undefined / Empty String, uses the given default\n- diviseBy : Returns True if the value is divisible by the argument\n- first : Returns the first item in a lis\n- last : Returns the last item in a lis\n- lower : Converts a string into all lowercase\n- upper : Converts a string into all uppercase\n- slice : Returns a slice of the list\n- slugify : Removes characters that aren’t alphanumerics, underscores, or hyphens. Converts to lowercase. Also strips leading and trailing whitespace.\n- stringify : Convert a JavaScript object into a string \n- title : Converts a string into titlecase by making words start with an uppercase character and the remaining characters lowercase\n- truncateWords : Truncates a string if it is longer than the specified number of characters.\n- truncateChars : Truncates a string after a certain number of words\n- wordCount : Returns the number of words\n- urlEncode : Escapes a value for use in a URL\n- date : Formats a date according to the given format\n- ...\n\nit is possible to use the filters on IF conditions or FOR loops for example.\n\n### Example of Filters\ncomming soon\n\nof course you can create your own filter with the minimum of code and time.\n```js\nimport {Filter}\n\n// Filter.addFilter(name, function of Filter)\n\nFilter.addFilter(\"default\", function(value, param) {\n    if (value === \"\") {\n        return param;\n    }\n    else {\n        return value;\n    }\n});\n```\n\nThe role of this filter is to replace the value of the variable that is an empty string with the word \"empty\".\n```js\n\nrender() {\n    return `\n        \u003ch1\u003e{{props.title|default:empty}}\u003c/h1\u003e\n    `;\n}\n```\n\n## State \u0026 Props\nto create dynamic and interactive components you need data and display it so that the user can interact with your interface OR application, that's why it comes the role of Props\u0026State to give you the ability to dynamize your components in an intuitive and dynamic way.\n\nbasic example\n```js\nimport invock, {Component} from \"invock-js\";\n\nclass Header extends Component {\n    constructor(props) {\n        super (props);\n        this.props = { title : \"Hello World\" };\n        this.state = { name : \"invock-js\" };\n    }\n    render() {\n        return `\n            \u003ch1\u003e{{props.title}}\u003c/h1\u003e\n            \u003ch1\u003e{{state.name}}\u003c/h1\u003e\n        `;\n    }\n}\ninvock.export(\"Header\", Header);\n```\n\nadvanced example\n```js\nimport invock, {Component} from \"invock-js\";\nimport Header from './components/header';\n\nclass HomePage extends Component {\n    constructor(props) {\n        super (props);\n    }\n    render() {\n        return `\n            {% Header title=\"Hello World\" %}\n        `;\n    }\n}\ninvock.export(\"HomePage\", HomePage);\n```\nthe TITLE property is passed to the HEADER component by the Object PROPS, which will be displayed in its own DOM.\n\n## Events\n\nto launch invock-js event which contains a system that is a little different compared to other Framework, this system is inspired by the events system of \"backbons.js\"\n\n```js\nimport invock, {Component} from \"invock-js\";\n\nclass Header extends Component {\n    \n    constructor(props) {\n        super(props);\n        this.events = {\n            \"click h1\" : \"clickH1\"\n        };\n    }\n    \n    clickH1(evt, self) {\n        console.log(evt);\n        // return the Event Object\n        console.log(self);\n        // return the Component Object (Header)\n    }\n                                \n    render() {\n        return `\n            \u003ch1\u003eHello World\u003c/h1\u003e\n        `;\n    }\n}\n```\n\nthis is another way to launch an event for DOM elements.\n\n```js\nimport invock, {Component} from \"invock-js\";\n\nclass Header extends Component {\n    \n    constructor(props) {\n        super(props);\n        // addEvent(selector, event_type, callback, options)\n        this.addEvent(\"h1\", \"click\", \"clickH1\", {})\n    }\n    \n    clickH1(evt, self, options) {\n        console.log(evt);\n        // return the Event Object\n        console.log(self);\n        // return the Component Object (Header)\n        console.log(options);\n        // return the Options Object passed in addEvent Method\n    }\n                                \n    render() {\n        return `\n            \u003ch1\u003eHello World\u003c/h1\u003e\n        `;\n    }\n}\n```\n\n\n## If Condition\n\nCreate a condition in a component is very simple and intuitive in order to have a readable code.\n\nBasic Exemple\n```js\nimport invock, {Component} from \"invock-js\";\n\nclass Header extends Component {\n    constructor(props) {\n        super (props);\n        this.props = { title : \"Hello World\" };\n    }\n    render() {\n        return `\n            {% if props.title = \"Hello World\" %}\n                \u003ch1\u003e{{props.title}}\u003c/h1\u003e\n            {% endif %}\n        `;\n    }\n}\ninvock.export(\"Header\", Header);\n```\n\n```js\nimport invock, {Component} from \"invock-js\";\n\nclass Header extends Component {\n    constructor(props) {\n        super (props);\n        this.props = { title : \"Hello World\", count : 0, status : true };\n    }\n    render() {\n        return `\n            {% if props.title = \"Hello World\" AND props.count = 1 %}\n                \u003ch1\u003e{{props.title}}\u003c/h1\u003e\n            {% endif %}\n\n            {% if props.title != \"Hello World\" OR props.count = 0 %}\n                \u003ch1\u003e{{props.title}}\u003c/h1\u003e\n            {% endif %}\n\n            {% if props.title = \"Hello World\" OR props.count \u003e 10 %}\n                \u003ch1\u003e{{props.title}}\u003c/h1\u003e\n            {% endif %}\n\n            {% if props.title = \"Hello World\" OR props.count \u003e= 20 %}\n                \u003ch1\u003e{{props.title}}\u003c/h1\u003e\n            {% endif %}\n\n            {% if props.title = \"Hello World\" OR props.count \u003c 20 %}\n                \u003ch1\u003e{{props.title}}\u003c/h1\u003e\n            {% endif %}\n\n            {% if props.title = \"Hello World\" OR props.count \u003c= 20 %}\n                \u003ch1\u003e{{props.title}}\u003c/h1\u003e\n            {% endif %}\n\n            {% if props.status = true OR props.count \u003c= 20 %}\n                \u003ch1\u003e{{props.title}}\u003c/h1\u003e\n            {% endif %}\n        `;\n    }\n}\ninvock.export(\"Header\", Header);\n```\n\n## Else Condition\n\nIt is the same thing to do an ELSE it is necessary to do this :\n\n```js\nimport invock, {Component} from \"invock-js\";\n\nclass Header extends Component {\n    constructor(props) {\n        super (props);\n        this.props = { title : \"Hello World\" };\n    }\n    render() {\n        return `\n            {% if props.title != \"Hello World\" %}\n                \u003ch1\u003e{{props.title}}\u003c/h1\u003e\n            {% else %}\n                \u003ch1\u003eDisplay : {{props.title}}\u003c/h1\u003e\n            {% endif %}\n        `;\n    }\n}\ninvock.export(\"Header\", Header);\n```\n\n## For-Loop operation\n\nthe creation of the FOR loops is very simple as on jinga2 it is necessary to do this :\n\n```js\nimport invock, {Component} from \"invock-js\";\n\nclass Header extends Component {\n    constructor(props) {\n        super (props);\n        this.state = { numbers : [ 0,1,2,3,4,5 ] };\n    }\n    render() {\n        return `\n            {% for number in state.numbers %}\n                \u003ch3\u003e{{number}}\u003c/h3\u003e\n            {% endif %}\n        `;\n    }\n}\ninvock.export(\"Header\", Header);\n```\nnote: you can use just the loops with PROPS\u0026 STATE objects.\n\n\n\n## Methodes of Component\n\nEach component contains methods that will be useful in the development phase to be able to control the flow of data and the interactions with the users of your application.\n\namong these methods there is :\n\n```js\nimport invock, {Component} from \"invock-js\";\n\nclass Header extends Component {\n    constructor(props) {\n        super (props);\n    }\n    \n    beforeRender() {\n        // this feature of launches before the rendering operation begins\n    }\n    \n    AfterRender() {\n        // this feature launches after each rendering operation done\n    }\n                                \n    beforeUpdate() {\n    \n    }\n    \n    afterUpdate() {\n    \n    }\n    \n    render() {\n        return `\n            \u003ch3\u003eHello World\u003c/h3\u003e\n        `;\n    }\n}\ninvock.export(\"Header\", Header);\n```\n\n## State Management\n\nThe management of the state is very dynamic and transparent so that you can modify your components in an optimal and efficient way, when a change is detected the system just interact with the DOM element in the target component, without doing the reRendering of the component.\n\n```js\nimport invock, {Component} from \"invock-js\";\n\nclass Header extends Component {\n    constructor(props) {\n        super (props);\n        this.state = {\n            title : \"hello World\"\n        }\n    }\n    \n    AfterRender() {\n        var self = this;\n        var timer = setTimeout(function() {\n            self.setState({ title : \"invock-js\" })\n        }, 5000)\n    }\n    \n    render() {\n        return `\n            \u003ch3\u003e{{state.title}}\u003c/h3\u003e\n            \u003cp\u003e\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor semper imperdiet. Nunc gravida turpis nec purus maximus viverra.\n            \u003c/p\u003e\n        `;\n    }\n}\ninvock.export(\"Header\", Header);\n```\n\n\n## Module HTTP\nThe HTTP module provides useful methods for you to communicate and interact with the server and consume web services via AJAX requests, you can also modify the configurations of the module to adapt it to your business needs for your application.\nthe HTTP Module is built into the Component object by default to provide a simple API to use.\n```js\nimport invock, {Component} from \"invock-js\";\n\nclass Header extends Component {\n    constructor(props) {\n        super (props);\n    }\n    \n    beforeRender() {\n        this.http.url = \"/api/exemple/data.json\";\n        this.http.fetch(function(response) {\n            console.log(response);\n        }, function(error) {\n            console.log(error);\n        })\n    }\n    \n    render() {\n        return `\n            \u003ch3\u003eHello World\u003c/h3\u003e\n        `;\n    }\n}\ninvock.export(\"Header\", Header);\n```\namong the methods of the HTP module there is\n- fetch(success_fn, error_fn) : retrieve data from a URL\n- post(data, success_fn, error_fn) : post data to the server\n- update(data, success_fn, error_fn) : update the data in the server\n- delete(data, success_fn, error_fn) : delete one or more element in the server\n\nin Component Object \n- getDataJSON(url, error_fn) : retrieve data from the server before the rendering operation\n\n## Module Layout\n\nThe Layout module's role is to organize and reuse layouts in different views and applications with minimum effort.\n\n```js\nimport invock, {Component} from \"invock-js\";\nimport LayoutHome from \"../layouts/home\";\n\nclass App extends Component {\n    render() {\n        return `\n            \u003clayout name=\"layoutHome\"\u003e\n                \u003cdiv block-layout=\"header\"\u003e\n                    \u003ch3\u003eHeader Block\u003c/h3\u003e\n                \u003c/div\u003e\n                \u003cdiv block-layout=\"side-bar\"\u003e\n                    \u003ch3\u003eSide-bar Block\u003c/h3\u003e\n                \u003c/div\u003e\n                \u003cdiv block-layout=\"content\"\u003e\n                    \u003ch3\u003eContent Block\u003c/h3\u003e\n                \u003c/div\u003e\n            \u003clayout\u003e\n        `;\n    }\n}\ninvock.export(\"App\", App);\n```\nto create your own layout it is very simple it takes :\n\n```js\nimport invock, {Layout} from \"invock-js\";\nimport LayoutHome from \"../layouts/home\";\n\nclass LayoutHome extends Component {\n    createLayout() {\n        this.name = \"LayoutHome\";\n                    \n        this.AddCSS(\"css/layout/home.css\");\n                    \n        //this.addBlock(\"id\", \"classess\", \"parent\");\n        \n        this.addBlock(\"header\", \"header-top\");\n        this.addBlock(\"side\", \"left side-content\");\n        this.addBlock(\"content\", \"left\");\n        this.addBlockCleaner();\n    }\n}\ninvock.exportLayout(\"LayoutHome\", LayoutHome);\n```\n\n## Desktop \u0026 Mobile management\ninvock-js offers the possibility to create 2 versions of UI, one for the Desktop and another one for the Mobile in the same component without sacrificing your business logic layer so that the same layer can be used in both versions. a totally transparent way.\n\n```js\nimport invock, {Component} from \"invock-js\";\n\nclass Header extends Component {\n    constructor(props) {\n        super (props);\n        this.events = {\n            \"click h1\" : \"clickH1\"\n        };\n    }\n    clickH1(evt, self) {\n        console.log(evt.target.data(\"version\"));\n    }\n    \n    render() {\n        return `\n            \u003cdesktop\u003e\n                \u003ch3 data-version=\"desktop\"\u003eDesktop Version\u003c/h3\u003e\n            \u003c/desktop\u003e\n            \u003cmobile\u003e\n                \u003ch3 data-version=\"mobile\"\u003eMobile Version\u003c/h3\u003e\n            \u003c/mobile\u003e\n        `;\n    }\n}\ninvock.export(\"Header\", Header);\n```\n\n## Plugins for DOM manipulation\nin a web application you will still need to implement interactive elements with the user such as :\n- popup  \n- slider\n- carousel\n- validator \n- notification bar\n- ...\n\ninvock-js offers a small plugins system so that you can create your own, in order to apply manipulations on the DOM, building your plugin is a simple operation and its goal is not to hack your JS code.\n\nto create a plugin you need\n\n```js\nimport {dom} from \"invock-js\";\nconst plugin = dom.addPlugin(\"plugin\", function(params) {\n\tvar element = this;\n\tparams = params || {};\n    var name = this.data(\"name\");\n    var parent_element = element.getParent()\n    if (name === \"invock-js\") {\n        parent_element.addClass(\"active\");\n    }\n    else {\n        parent_element.removeClass(\"active\");\n    }\n});                                                            \n```\n\nto use a plugin you have to:\n```js\nimport invock, {Component} from \"invock-js\";\nimport plugin from \"../plugins/plugin\";\n\nclass Header extends Component {\n    constructor(props) {\n        super (props);\n    }\n                                \n    afterRender() {\n        var h3 = this.parent.find(\"h3\");\n        h3.runPlugin(\"plugin\", {});\n    }\n    \n    render() {\n        return `\n            \u003cdesktop\u003e\n                \u003ch3 data-version=\"desktop\" data-name=\"invock-js\"\u003eVersion desktop\u003c/h3\u003e\n            \u003c/desktop\u003e\n            \u003cmobile\u003e\n                \u003ch3 data-version=\"mobile\"\u003eVersion Mobile\u003c/h3\u003e\n            \u003c/mobile\u003e\n        `;\n    }\n}\ninvock.export(\"Header\", Header);\n```\n\n## Module Router\nThe module Router aims to help you create SPA it manages links and views for you, the module contains 2 main components : \n- Link : to create links that you need for your menu for example\n- Route : it is the component that will manage the view link with it according to active URL in the application\n\nto create a menu here is an example :\n\n```js\nimport invock, {Component, Link} from \"invock-js\";\n\nclass Menu extends Component {\n    constructor(props) {\n        super(props);\n        \n    }\n    \n    render() {\n        return `\n            \u003cdesktop\u003e\n                \u003cdiv class=\"navigation white shadow align-center\"\u003e\n                    \u003cul class=\"horizontal center-auto\"\u003e\n                        \u003cli\u003e{% Link url=\"/\" name=\"Home\" classes=\"color\" %}\u003c/li\u003e\n                        \u003cli\u003e{% Link url=\"/about\" name=\"About\" classes=\"color\" %}\u003c/li\u003e\n                        \u003cli\u003e{% Link url=\"/contact\" name=\"Contact\" classes=\"color\" %}\u003c/li\u003e\n                    \u003c/ul\u003e\n                    \u003cdiv class=\"clr\"\u003e\u003c/div\u003e\n                \u003c/div\u003e\n            \u003c/desktop\u003e\n        `;\n    }\n}\n\ninvock.export(\"Menu\", Menu);\n```\nto create a view with a route :\n\n```js\nimport invock, {Component} from \"invock-js\";\nimport Menu from './menu';\nimport Home from './views/home';\nimport About from './views/about';\nimport Contact from './views/contact';\n\nclass App extends Component {\n    \n    constructor(props) {\n        super(props);\n    }\n    \n    render() {\n        return `\n            \u003cdesktop\u003e\n                \u003cdiv class=\"app\"\u003e\n                    {% Menu %}\n                    \u003cdiv id=\"views\"\u003e\n                        {% Route path=\"/\" component=\"Home\" title=\"Home Page\" name=\"home\" %}\n                        {% Route path=\"/about\" component=\"About\" title=\"About\" name=\"about\" %}\n                        {% Route path=\"/contact\" component=\"Contact\" title=\"Contact\" name=\"contact\" %}\n                    \u003c/div\u003e\n                \u003c/div\u003e\n            \u003c/desktop\u003e\n        `;\n    }\n}\ninvock.export(\"App\", App);\ninvock.mount({ parent : \"#container\", root : \"{% App %}\" });\n```\n\n## Advanced State Management\n\nthis section to treat the problem that is related with the management of the state of the components in an application that each Framework must face and presents answers for this question. \n\ninvock-js offers a global Store to store all the states for all the components of the application and you can access any component or its data provided that you respect a few small recommendations.\n\n![Data Flow in invock-js](https://raw.githubusercontent.com/said10/invock-js/master/data_flow.png)\n\nwe start by telling invock-js that this component will interact with the Store.\n\n```js\nimport invock, {Component} from \"invock-js\";\n\nclass header extends Component {\n    \n    constructor(props) {\n        super(props);\n    }\n    \n    render() {\n        return `\n            \u003cdesktop\u003e\n                \u003cdiv class=\"app\"\u003e\n                    \u003ch1\u003e{{props.title}}\u003c/h1\u003e\n                \u003c/div\u003e\n            \u003c/desktop\u003e\n        `;\n    }\n}\ninvock.export(\"header\", header);\ninvock.mountInStore({ parent : \"#container\", root : \"{% header %}\" });\n```\nthen we pass the properties that the component or components need.\n\n```js\nimport invock, {Component} from \"invock-js\";\n\nclass header extends Component {\n    \n    constructor(props) {\n        super(props);\n    }\n    \n    render() {\n        return `\n            \u003cdesktop\u003e\n                \u003cdiv class=\"app\"\u003e\n                    \u003ch1\u003e{{props.title}}\u003c/h1\u003e\n                    \u003ch2\u003e{{props.name}}\u003c/h2\u003e\n                \u003c/div\u003e\n            \u003c/desktop\u003e\n        `;\n    }\n}\ninvock.addProps({\n    title : \"Hello World\",\n    name : \"invock-js\"\n})\ninvock.export(\"header\", header);\ninvock.mountInStore({ parent : \"#container\", root : \"{% header %}\" }, \"title,name\");\n```\n\nThe properties you want to pass to a component needs must be configured on invock.mountInStore or invock.export and must be separated by a comma.\n\nCalling the invock.addProps function is not necessary on every component, it is better to just call the parent component or View component of your application.\n\nNote: invock-js stores by default all the properties of the components in the Store which means the communication between the components is much easier especially that we have a complex application or a very specific work logic.\n\nOther exemple : \n\n```js\nimport invock, {Component} from \"invock-js\";\n\nclass header extends Component {\n    \n    constructor(props) {\n        super(props);\n    }\n    \n    render() {\n        return `\n            \u003cdesktop\u003e\n                \u003cdiv class=\"app\"\u003e\n                    \u003ch1\u003e{{props.title}}\u003c/h1\u003e\n                    \u003ch2\u003e{{props.name}}\u003c/h2\u003e\n                \u003c/div\u003e\n            \u003c/desktop\u003e\n        `;\n    }\n}\ninvock.addProps({\n    title : \"Hello World\",\n    name : \"invock-js\"\n})\ninvock.export(\"header\", header, \"title,name\");\n```\n\n## Module UI\nPlease visit this link for more informations and details :\n[invock-js-ui](https://github.com/said10/invock-js-ui)\n\n## Middlwares\ncomming soon\n\n## Extra things\ncomming soon\n\n## Exemples \u0026 Demos\ncomming soon\n\n## Test\ncomming soon\n\n## Ressources\n- [dom](https://github.com/said10/domJS)\n- [parser](https://github.com/said10/parserHTML)\n- [Sample UI](https://github.com/said10/sample-ui)\n- Template Language insipred by [jinga2](http://jinja.pocoo.org/docs/2.10/)\n- Event System insipred by [backbone.js](http://backbonejs.org/)\n\n## License\nGPU - [Said10](https://github.com/said10/)\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaid10%2Finvock-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaid10%2Finvock-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaid10%2Finvock-js/lists"}