Prakma NPM | npm.io

Simple: You don't have to worry about compile, the webpack preloaded config does it for you.
Powerful: Supports state, import statement, async functions, children inside components, sass, and more!.
Awesome: Comes with an easy to handle file structure to make your apps.

➤ Installation

Git clone (recommended)

git clone https://github.com/Leoocast/Prakma.git

npm install

npm

npm install prakma

Linux / Mac or Windows

npm explore prakma -- npm run export-linux

npm explore prakma -- npm run export-windows

npm install

The next step is open dist/home.html, if you see the Prakma logo, you have done great!😄

➤ Getting Started

This is the tree of files we have initially:

├── 📁dist
│   ├── 📁img
│   ├── 📁js
|   |	├──📁home
|   |	|   └── home.js
|   |	└── 📁prakma
|   |       └── prakma.js
|   └── home.html
└── 📁src
    ├── 📁components
    └── 📁views
	├── 📁home
	|   ├── 📁components
	|   |    ├── welcome.style.sass
	|   |    ├── welcome.code.js
	|   |    └── welcome.component.jsx
	|   └── main.jsx
	└── 📁home.app.jsx

📁 dist

Here is your compiled code, here you have a folder for every view you made in src. For make an another view, you just have to add something like this to your new html. Suppose that we have a view called Contact.

<body>
	<div id="app"></div>
	<script src="js/prakma/Prakma.js"></script>
	<script src="js/contact/contact.js" type="module"></script>
</body>

Look at this div: <div id="app"> here is where our view will be rendered. Noticed that we have to call Prakma.js before our view.

📁 src

This is the cool part, we have 3 main folders here.

components: Where all our general components will live.
prakma: Just a folder to save my love, prakma.js.
views : I'm going to explain this one...

| 📁components

This folder is where you gonna save your global components of the project.

| 📁views

This structure is suggested by me, doesn't mean that you have to use it, but is what I recommend.

We should have a folder for every view. Continuing with the example of Contact, let's suppose we have a Form component too. This should be our structure.

📁views
├── 📁contact
|   └── 📁components
|       ├── 📁form
|	|    ├── form.component.jsx
|	|    ├── form.code.js
|	|    └── form.style.sass
|     	├── main.jsx
|       |── main.code.js
|       └── main.style.sass
└── contact.app.jsx

| 📁 components

Here we have to put every component will be use in our main script. I like to have a folder for every component and 3 files inside:

.jsx (our component, a function returning jsx).
.js (component logic, every function that our component jsx gonna need).
.sas (styles).

|📁 components -> 📑 main.jsx

Like the name said, this is our main view file. This is where we assemble our components.

| 📑 contact.app.jsx

Every view must have an entry point, in this case, for our example will be contact.app.jsx.

import { Main } from  './components/main'
  
const  app = document.getElementById('app')
app.appendChild(Main())

And you have to add the route of our new view in the entry property inside webpack.config.views.js.

module.exports =  {
    contact: view `contact`,
}

➤ State

So cool! but where is the state? 🤔

We have a global state here, so, how can we manage it?

If we want to use it, we have to import the state first that is inside of:

📁libs
└── 📁prakma
    └── prakma.js

import { setState, getState } from "../../../libs/prakma/prakma";

Suppose we have a user we want to store, just do this:

setState({user})

If we want to retrieve the object:

const user = getState().user

Ok, we have an internal state. Now, if I want to update the view when the state changes?

Well, here is a little different from React. Suppose we want to print the user info, for that we must write this type of component.

export const User = () => (
	<div class="user">
		<div>##user.name##</div>
		<div>##user.age##</div>
		<div>##user.occupation##</div>
	</div>
)

And our object in the state must be stored like this:

const user = {
	name: "Leo",
	age: 20,
	occupation: "Engineer"
}

setState({user})

We can modify the object every time we want:

setState({user: {age: 22}})

At the moment we do that, our view will be updated.

Important note: This only works for objects, I'm working in print an array with his key and something like React, wait for that in the nexts months.

➤ Fetch / Request an API

With Prakma you can easily make a request. You can do it importing the request object:

import { Request } from '../../request/request'

const morty = await Request.GET('https://rickandmortyapi.com/api/character//2')

That's the raw form, but you can do it better with a Prakma controller, but first you have to config the host in api/config.json.js:

export const config = {
    server: 'https://rickandmortyapi.com/api/'
}

Then, create a controller file in api/controller, in this case characterController.js:

import { PrakmaController } from "./controller";

class CharacterController extends PrakmaController{
    constructor(){
        super('character/')
    }

    async getMorty(){
        return this.get('2')
    }
}

export const characterController = new CharacterController()

And in your main view, just import the object from the characterController and call the method getMorty():

import { characterController } from '../../../libs/api/controller/characterController'

//You can do this
characterController.getMorty().then(morty => {
    //awesome code
})

//Or this
const morty = await characterController.getMorty()

➤ DOM

Goodbye `document.getElementById` hi `get`

Prakma has a lot of methods than can help you to code by not taking care of the DOM methods, just use a help method inside libs/utils/dom.code. I'm working in the documentation for this.

➤ Package.json scripts

Script name	Description
watch	Start watching our files to compile any change in `dist/js/viewName/viewName.js`
build	Compile and minify our files. They will be in `build/js/viewName/viewName.js`
Export scripts
export-linux	This script just must be used to export the prakma files out of node_modules after installation.
export-windows	This script just must be used to export the prakma files out of node_modules after installation.

➤ License

Licensed under MIT.

➤ FAQ

Where can I see examples?

You can see some here: PrakmaExamples

How can I get involved?

Create an issue or pull-request. You are also very welcome to throw me a message at @leoocast10.

How can I support you?

There are lot's of ways to support me! I would be so happy if you gave this repository a star, tweeted about it or told your friends about this little corner of the Internet ❤️

That's all for now folks.