prakma

v1.3.2

Published

2 years ago

JS framework to write JSX syntax. Supports state, import statement, async functions, sass, scss, and more.

Downloads

0High
0Medium
0Low

leocast

js jsx custom pragma prakma react webpack babel @prakma love

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.