2.0.16 • Published 6 years ago

flatman-server v2.0.16

Weekly downloads
566
License
-
Repository
-
Last release
6 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

6 years ago

2.0.15

6 years ago

2.0.14

6 years ago

2.0.13

6 years ago

2.0.12

6 years ago

2.0.11

6 years ago

2.0.10

6 years ago

2.0.9

6 years ago

2.0.8

6 years ago

2.0.7

6 years ago

2.0.6

6 years ago

2.0.5

6 years ago

1.2.24

6 years ago

2.0.4

6 years ago

2.0.3

6 years ago

2.0.2

6 years ago

2.0.1

6 years ago

2.0.0

6 years ago

1.2.23

6 years ago

1.2.22

6 years ago

1.2.21

6 years ago

1.2.20

6 years ago

1.2.19

6 years ago

1.2.18

6 years ago

1.2.17

6 years ago

1.2.16

6 years ago

1.2.15

6 years ago

1.2.14

6 years ago

1.2.13

6 years ago

1.2.12

6 years ago

1.2.11

6 years ago

1.2.10

6 years ago

1.2.9

6 years ago

1.2.8

6 years ago

1.2.7

6 years ago

1.2.6

6 years ago

1.2.5

6 years ago

1.2.4

6 years ago

1.2.3

6 years ago

1.2.2

6 years ago

1.2.1

6 years ago

1.2.0

6 years ago

1.1.3

6 years ago

1.1.2

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

0.33.0

6 years ago

1.0.0

6 years ago

0.32.5

6 years ago

0.32.4

6 years ago

0.32.3

6 years ago

0.32.2

6 years ago

0.32.1

6 years ago

0.32.0

6 years ago

0.31.8

6 years ago

0.31.7

6 years ago

0.31.6

6 years ago

0.31.5

6 years ago

0.31.4

6 years ago

0.31.3

6 years ago

0.31.2

6 years ago

0.31.1

6 years ago

0.31.0

6 years ago

0.30.0

6 years ago

0.29.3

6 years ago

0.29.2

6 years ago

0.29.1

6 years ago

0.29.0

6 years ago

0.28.2

6 years ago

0.28.1

6 years ago

0.28.0

6 years ago

0.27.15

6 years ago

0.27.14

6 years ago

0.27.13

6 years ago

0.27.12

6 years ago

0.27.11

6 years ago

0.27.10

6 years ago

0.27.9

6 years ago

0.27.8

6 years ago

0.27.7

6 years ago

0.27.5

6 years ago

0.27.4

6 years ago

0.27.3

6 years ago

0.27.2

6 years ago

0.27.1

6 years ago

0.27.0

6 years ago

0.26.2

6 years ago

0.26.1

6 years ago

0.26.0

6 years ago

0.25.20

6 years ago

0.25.19

6 years ago

0.25.18

6 years ago

0.25.16

6 years ago

0.25.15

6 years ago

0.25.14

6 years ago

0.25.13

6 years ago

0.25.12

6 years ago

0.25.11

6 years ago

0.25.10

6 years ago

0.25.9

6 years ago

0.25.8

6 years ago

0.25.7

6 years ago

0.25.6

6 years ago

0.25.4

6 years ago

0.25.3

6 years ago

0.25.2

6 years ago

0.25.0

6 years ago

0.24.5

6 years ago

0.24.4

6 years ago

0.24.3

6 years ago

0.24.2

6 years ago

0.24.1

6 years ago

0.24.0

6 years ago

0.23.4

6 years ago

0.23.3

6 years ago

0.23.2

6 years ago

0.23.1

6 years ago

0.23.0

6 years ago

0.22.0

6 years ago

0.21.1

6 years ago

0.21.0

6 years ago

0.20.4

6 years ago

0.20.3

6 years ago

0.20.2

6 years ago

0.20.1

6 years ago

0.20.0

6 years ago

0.19.0

6 years ago

0.18.3

6 years ago

0.18.2

6 years ago

0.18.1

6 years ago

0.18.0

6 years ago

0.17.0

6 years ago

0.16.3

6 years ago

0.16.2

6 years ago

0.16.1

6 years ago

0.16.0

6 years ago

0.15.4

6 years ago

0.15.3

7 years ago

0.15.2

7 years ago

0.15.1

7 years ago

0.15.0

7 years ago

0.14.5

7 years ago

0.14.4

7 years ago

0.14.3

7 years ago

0.14.2

7 years ago

0.14.1

7 years ago

0.14.0

7 years ago

0.13.1

7 years ago

0.13.0

7 years ago

0.12.2

7 years ago

0.12.1

7 years ago

0.12.0

7 years ago

0.11.2

7 years ago

0.11.1

7 years ago

0.11.0

7 years ago

0.10.6

7 years ago

0.10.4

7 years ago

0.10.3

7 years ago

0.10.2

7 years ago

0.10.1

7 years ago

0.10.0

7 years ago

0.9.0

7 years ago

0.8.0

7 years ago

0.7.5

7 years ago

0.7.4

7 years ago

0.7.3

7 years ago

0.7.2

7 years ago

0.7.1

7 years ago

0.7.0

7 years ago

0.6.16

7 years ago

0.6.15

7 years ago

0.6.14

7 years ago

0.6.13

7 years ago

0.6.12

7 years ago

0.6.11

7 years ago

0.6.10

7 years ago

0.6.9

7 years ago

0.6.8

7 years ago

0.6.7

7 years ago

0.6.6

7 years ago

0.6.5

7 years ago

0.6.4

7 years ago

0.6.1

7 years ago

0.6.0

7 years ago

0.5.4

7 years ago

0.5.3

7 years ago

0.5.2

7 years ago

0.5.1

7 years ago