anmol098 / element

(DRAFT) framework for composing decoupled & stateful web interfaces/ontologies based on atom principles (used internally @footloose.io)

Documentation of the current frontend framework in use in development →

Quickstart

Install Globally

1. npm run build
2. sudo npm -g install .

Create a new Project

1. mkdir newProject && cd newProject
2. muffin -i //press enter for any prompt to take the default value

Project structure

/ assets/

components/

pages/

gulpfile.js

index.src.html

package.json

sw.js

Javascript Interface

1. DomComponent

2. PostOffice

3. DataSource

4. Router

Prebuilt Tags

1. <include src="”>

2. <component-data src="”>

Prebuilt HTML Attributes

1. route="”

2. sub-route

CSS interface

1. .page class

Examples -

Case 1. Writing a simple component called ContactCard

components/contact_card.js
class ContactCard extends DomComponent { static domElName = "contact-card" static schema = { “name”: “”, “email”: “”, “phone_no”: “” } static markupFunc = (data) => { return `<h1>${data.name}</h1> <h3 class=”contact”> ${data. email} <br/> ${data.phone_no} </h3>` } } customElements.define(ContactCard.domElName, ContactCard)	domElName specifies the html tagName schema specifies the default data that will be used in markupFunc markupFunc specifies the function that renders the data into ui the last line (customElements.define) registers the component for use in html/dom

index.src.html
	component-data tag can be added inside any component → socket specifies the PostOffice.websocket label is any string to key this data in indexeddb any fixtures to quick test the component could be added as json inside component-data tag

Case 2. Adding multiple routes in SPA

index.src.html
about <div route=”about-page”> <h2>About Page</h2> </div> <script type=”text/javascript”> var _router = new Router(); document.onload = (ev) => { _router.go(“contact-page”); } </script>	route=”..string..” attribute specifies the unique route (url pathname & window.history entry) _router variable (could be named anything) stores the Router instance _router.go(“..route_name..”) function triggers the route with the given ..route_name..

Case 3. Splitting index.src.html into multiple files

index.src.html
._container_ { padding: 100px;} </style> { "name”:”ankur”, “email”:”[e-mail]”, “phone_no”:”[phone]” } about	any file included via has to be enclosed within the tag; that can contain html, css & javascript.