2.0.16 • Published 7 years ago

flatman-server v2.0.16

Weekly downloads
566
License
-
Repository
-
Last release
7 years ago

Flatman server (service side rendering)

Basic usage

Creating a component

import el, { Component } from "flatman-server";

class MyElement extends Component {
  render(props) {
    return el("div", { className: "my-class" });
  }
}

Rendering a component

el(MyElement).toHtml(); // <div class="my-class"></div>

The Html component

import el, { Html, Component, render } from "flatman-server";

render(el(Html, {
  // Can be a string, array or null
  scripts: ["bundle.js"],
  // Can be a string, array or null
  styles: "bundle.css",
  // Anything in the head property will be appended to the head tag
  head: [],
  // must be an element or an array of elements
  favicon: [],
  supportMobile: true
}, [
  el("div", {
      className: "my-tiny-page"
    })
]))

Result

<html>
  <head>
    <meta http-equiv="X-UX-Compatible" content="IE=edge,chrome=1">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <script src="bundle.js"></script>
    <link rel="stylesheet" type="text/css" href="bundle.js">
  </head>
  <body>
    <div class="my-tiny-page"></div>
  </body>
</html>

Lifecycle

onMount and onUnmount work with the Html component. beforeAppendChildren and 'afterAppendChildren` work with any component.

import el, { Html, Component } from "flatman-server";

class MyComponent extends Component {
  componentDidUpdate(state, prevState) {
    // Do stuff
  }

  beforeComponentToHtml(vnode) {
    // vnode represents the 'expanded' node tree which is rendered.
  }

  afterComponentToHtml(html) {
    // html - the rendered html output
  }

  __emitComponentDidUpdate(state, prevState) {
    let i = -1;
    const n = this.__subscribers.onComponentDidUpdate.length;
    while (++i < n) {
      this.__subscribers.onComponentDidUpdate[i](state, prevState);
    }
  }

  render() {
    return el();
  }
}
2.0.16

7 years ago

2.0.15

7 years ago

2.0.14

7 years ago

2.0.13

7 years ago

2.0.12

7 years ago

2.0.11

7 years ago

2.0.10

7 years ago

2.0.9

7 years ago

2.0.8

7 years ago

2.0.7

7 years ago

2.0.6

7 years ago

2.0.5

7 years ago

1.2.24

7 years ago

2.0.4

7 years ago

2.0.3

7 years ago

2.0.2

7 years ago

2.0.1

7 years ago

2.0.0

7 years ago

1.2.23

7 years ago

1.2.22

7 years ago

1.2.21

7 years ago

1.2.20

7 years ago

1.2.19

7 years ago

1.2.18

7 years ago

1.2.17

7 years ago

1.2.16

7 years ago

1.2.15

7 years ago

1.2.14

7 years ago

1.2.13

7 years ago

1.2.12

7 years ago

1.2.11

7 years ago

1.2.10

7 years ago

1.2.9

7 years ago

1.2.8

7 years ago

1.2.7

7 years ago

1.2.6

7 years ago

1.2.5

7 years ago

1.2.4

7 years ago

1.2.3

7 years ago

1.2.2

7 years ago

1.2.1

7 years ago

1.2.0

7 years ago

1.1.3

7 years ago

1.1.2

7 years ago

1.1.1

7 years ago

1.1.0

7 years ago

0.33.0

7 years ago

1.0.0

7 years ago

0.32.5

7 years ago

0.32.4

7 years ago

0.32.3

7 years ago

0.32.2

7 years ago

0.32.1

7 years ago

0.32.0

7 years ago

0.31.8

7 years ago

0.31.7

7 years ago

0.31.6

7 years ago

0.31.5

7 years ago

0.31.4

7 years ago

0.31.3

7 years ago

0.31.2

7 years ago

0.31.1

7 years ago

0.31.0

7 years ago

0.30.0

7 years ago

0.29.3

7 years ago

0.29.2

7 years ago

0.29.1

7 years ago

0.29.0

7 years ago

0.28.2

7 years ago

0.28.1

7 years ago

0.28.0

7 years ago

0.27.15

7 years ago

0.27.14

7 years ago

0.27.13

7 years ago

0.27.12

7 years ago

0.27.11

7 years ago

0.27.10

7 years ago

0.27.9

7 years ago

0.27.8

7 years ago

0.27.7

7 years ago

0.27.5

7 years ago

0.27.4

7 years ago

0.27.3

7 years ago

0.27.2

7 years ago

0.27.1

7 years ago

0.27.0

7 years ago

0.26.2

7 years ago

0.26.1

7 years ago

0.26.0

7 years ago

0.25.20

7 years ago

0.25.19

7 years ago

0.25.18

7 years ago

0.25.16

7 years ago

0.25.15

7 years ago

0.25.14

7 years ago

0.25.13

7 years ago

0.25.12

7 years ago

0.25.11

7 years ago

0.25.10

7 years ago

0.25.9

7 years ago

0.25.8

7 years ago

0.25.7

7 years ago

0.25.6

7 years ago

0.25.4

7 years ago

0.25.3

7 years ago

0.25.2

7 years ago

0.25.0

7 years ago

0.24.5

7 years ago

0.24.4

7 years ago

0.24.3

7 years ago

0.24.2

7 years ago

0.24.1

7 years ago

0.24.0

7 years ago

0.23.4

7 years ago

0.23.3

7 years ago

0.23.2

7 years ago

0.23.1

7 years ago

0.23.0

7 years ago

0.22.0

7 years ago

0.21.1

7 years ago

0.21.0

7 years ago

0.20.4

7 years ago

0.20.3

7 years ago

0.20.2

7 years ago

0.20.1

7 years ago

0.20.0

7 years ago

0.19.0

7 years ago

0.18.3

7 years ago

0.18.2

7 years ago

0.18.1

7 years ago

0.18.0

7 years ago

0.17.0

7 years ago

0.16.3

7 years ago

0.16.2

7 years ago

0.16.1

7 years ago

0.16.0

7 years ago

0.15.4

8 years ago

0.15.3

8 years ago

0.15.2

8 years ago

0.15.1

8 years ago

0.15.0

8 years ago

0.14.5

8 years ago

0.14.4

8 years ago

0.14.3

8 years ago

0.14.2

8 years ago

0.14.1

8 years ago

0.14.0

8 years ago

0.13.1

8 years ago

0.13.0

8 years ago

0.12.2

8 years ago

0.12.1

8 years ago

0.12.0

8 years ago

0.11.2

8 years ago

0.11.1

8 years ago

0.11.0

8 years ago

0.10.6

8 years ago

0.10.4

8 years ago

0.10.3

8 years ago

0.10.2

8 years ago

0.10.1

8 years ago

0.10.0

8 years ago

0.9.0

8 years ago

0.8.0

8 years ago

0.7.5

8 years ago

0.7.4

8 years ago

0.7.3

8 years ago

0.7.2

8 years ago

0.7.1

8 years ago

0.7.0

8 years ago

0.6.16

8 years ago

0.6.15

8 years ago

0.6.14

8 years ago

0.6.13

8 years ago

0.6.12

8 years ago

0.6.11

8 years ago

0.6.10

8 years ago

0.6.9

8 years ago

0.6.8

8 years ago

0.6.7

8 years ago

0.6.6

8 years ago

0.6.5

8 years ago

0.6.4

8 years ago

0.6.1

8 years ago

0.6.0

8 years ago

0.5.4

8 years ago

0.5.3

8 years ago

0.5.2

8 years ago

0.5.1

8 years ago