atomicreact / atomicreact

Framework to build web apps with atomicity concept.

AtomicReact ·

AtomicReact is a framework to build Web Apps with atomicity concept

Features

• Fast to Get Started: Install and run
• Strong Ecosystem:
  • Build encapsulated Atoms that manage their own state, then compose them to make complex UIs.
  • Easy to use Atoms from other developers
  • Atom is made by structure, logic and style! In our words: Atom = { html, js, css }
• Don't waste time recompiling: Code and view in same time with HotReload feature
• NodeJs Modules Compatibility: Easy to build with Express, Gulp, Grunt, UglifyJS2, ...
• Fast Front-End Development: Create once, reuse afterwards
• Organized: Each part in its own directory
• Build from what you already know: HTML, CSS and JAVASCRIPT
• Share: Share your Atoms with others developers.

Let's Get Started

Requirements

1. NodeJs (with NPM of course)

Get a little teoria before ?!

AtomicReact was designed in atoms concept. What things in the universe are made of? Let's get an essencial thing to our lives: The Water. The water is made with a lot of molecules whose each one is composed by one oxigen and two hidrogen atoms. Basically Atom Concept is create things from the minimal particle of them.

How it works

In AtomicReact the minimal particle is called by Atom. One Atom is formed by 3 parts: Structure (HTML) & Logic (JS) & Style (CSS). Necessarily, an Atom need to have a structure but doesn't need a logic and style.

Full Documentation

The full documentation for AtomicReact can be found on https://atomicreact.js.org

atomicreact's Issues

Failed on Step 3 $ atomic

1. npm install atomicreact -g
2. npm install atomicreact --save
3. atomic

{ Error: Command failed: node AtomicReact_run.js
fs.js:646
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open '/Users/punchee/Documents/personal/learning/AtomicReact/package.json'
    at Object.fs.openSync (fs.js:646:18)
    at Object.fs.readFileSync (fs.js:551:33)
    at new Atomic (/Users/punchee/Documents/personal/learning/AtomicReact/node_modules/atomicreact/Atomic.js:9:27)
    at Object.<anonymous> (/Users/punchee/Documents/personal/learning/AtomicReact/AtomicReact_run.js:8:16)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Function.Module.runMain (module.js:693:10)

    at ChildProcess.exithandler (child_process.js:275:12)
    at emitTwo (events.js:126:13)
    at ChildProcess.emit (events.js:214:7)
    at maybeClose (internal/child_process.js:925:16)
    at Socket.stream.socket.on (internal/child_process.js:346:11)
    at emitOne (events.js:116:13)
    at Socket.emit (events.js:211:7)
    at Pipe._handle.close [as _onclose] (net.js:557:12)
  killed: false,
  code: 1,
  signal: null,
  cmd: 'node AtomicReact_run.js' }

[EMAIL UNSUBSCRIBE]

Please do not crawl GitHub in order to mass-mail people about your project. Nobody likes that.

Bug: get the correct atom's nucleus

Props com sinal de >

falha na renderização quando insere um sinal de maior no valor da props

Reprodução do erro:

AtomoA.html

<div> <span>{props.teste}</span>

inidex.html

<AtomoA props.teste="aaaa>bbbb"></AtomoA>

Bug: pegando sub errada

Quando se tem um atomo B dentro de um atomo A, sendo ambos tem uma sub partícula com o mesmo nome X e no atomo A a sub X vem após o atomo B, ao tentar pegar a sub X do atomo A, o AtomicReact pega a sub do primeiro sub X que aparece na lista de nodes, ou seja, pega a sub do atomo B.

Exemplo:
AtomoB.html

<div> <h2 atomic.sub="X"></h2> </div>

AtomoA.html

<div>
   <AtomoB></AtomoB>
   <span atomic.sub="X"></span>
</div>

AtomoA.js

class Main {
   onRender() {
      console.log(this.getSub('X')) //printa o elemento DOM h2 do AtomoB, quando deveria printar o span do AtomoA
   }
}
module.exports.main = Main

Ideia para correção:

1. Concatenar com "_" o id do atomo junto com o nome da sub durante a renderização do atomo. Por exemplo:

AtomoB após ser renderizado:

<div data-atomic-key="AtomoB_1"> <h2 data-atomic-sub="AtomoB_1_X"></h2> </div>

AtomoA após ser renderizado:

<div data-atomic-key="AtomoA_0">
   <div> <h2 data-atomic-sub="AtomoB_1_X"></h2> </div>
   <span data-atomic-sub="AtomoA_0_X"></span>
</div>

Pegar a key do atomo

Add o recurso de saber a Key do Atomo dentro de sua classe, sugestão:

class Main {
   onRender() {
      let key = this.getKey()
   }
}
module.exports.main = Main

ou para não reservar mais uma função (this.getKey()) , colocar a key do atomo junto com seu objeto Atomic , igualmente como já se faz para pegar o id do atomo (this.getElement().Atomic.id) , por exemplo:

class Main {
   onRender() {
      let key = this.getElement().Atomic.key
   }
}
module.exports.main = Main

Should to verify if file exists when debug is false too

AtomicReact/Atomic.js

Line 437 in 6032bfe

cssBundle += fs.readFileSync(cssAtomoFile).toString();

Bug: Comentários em html em núcleos

Há um problema na renderização de um átomo qual tem comentário na parte html.

Exemplo: AtomoExemplo.html

<div>
<!-- Um simples comentário -->
<p> Eu sou um simples parágrafo</p>
</div>

Bug: lista de atomos renderizados sendo resetada em sub atomos

Se um atomo B é renderizado dentro do onRender de um atomo A, perde-se a a lista de atomos renderizados, assim perde-se o id do atomo renderizado A, ficando somente a do atomo B.
Isso acontece porque a lista de atomos renderizados é global, e deve ser uma para cada chamada em render()

Bug: valor padrão para props

Quando não é definido o valor para um props, seu valor padrão é {props.nomeDaProps}