Anatta Documentation

# Code Structure

!Important

Dont miss it

# Entry points

The entry points for all js and css resides under template.js.

TIP

Read more about it here: How It Works ?

//Templates entrypoint

src/js/bundles/templates/**/**.js 
// ** is a glob selector for all files


//Layouts entrypoint

src/js/bundles/layouts/**.js 
// ** is a glob selector for all files

# Step: 1 : Identify template or layout

Identify template that we are working on, in our case, collection.js.

//src/js/bundles/templates/{template_name}.js

src/js/bundles/templates/collection.js

If it doesn't exist,

create a new file called *collection.js in mentioned path .

# Step 2 : Import the required dependencies

Import the required dependencies for the template either its 3rd party js or just section js that is included in the template.

// {template_name}.js
//collection.js

//js and css imports here
@import sectionHello from '../sections/section-hello';

sectionHello();

or lazyload it,

// {template_name}.js
//collection.js

//js and css imports here

async loadComponent = (componentName,callback = () => {return}) => {
   if(!componentName) {
       return false;
   } 
   const {module:{default: () => return false} = await import(/* webpackChunkName: componentName */ `./${componentName}`)
   default();
   callback();
}

//some event callback
((args) => {
//note that this is a async code, you might want to pass callback
 loadComponent('section-hello');
});

# Step: 3 : Create dependency files

Create scss and js if they dont exist that are required for the section that are included in that particular template or basically any files that are required to make this template work.

/src/styles/sections/section-hello.scss

h1 {
    color: red;
}


/src/js/bundles/sections/section-hello.js

@import '~Styles/sections/section-hello.scss;

export default () => {
 console.log("hello");
}

# Step: 4 : Confirm changes

Make changes in scss or js files and see if they are reflected.

← Supported Feature →