Skip to content

[BC Break] Update ReduxModule
Compare
Choose a tag to compare
@koriym koriym released this 15 Dec 08:26
· 55 commits to 1.x since this release
0.3.0
7bee07e

Update ReduxModule and SsrInterface

BEAR.ReactJsModule

JavaScript code

You need three js bundled file.

  • react.bundle.js React library bundled code
  • {app-name}.bundle.js Application bundled code for client side
  • {ssr-app-name}.bundle.js Application bundled code for server side

You can include JavaScript client code (CSS, DOM ..) for {app}.bundle.js only. See more detail at the example.

Module Install

$distDir = dirname(__DIR__, 2) . '/var/www/dist';
$this->install(new ReduxModule($distDir, 'ssr_app');

In this canse, you need to place ssr-app.bundle.js at $baseDir directory.

ResourceOjbect

To inject SSR renderer, Annotate @Inject with @Named annotation to setRenderer setter method
with {ssr-app-name} application name.

use BEAR\Resource\RenderInterface;
use BEAR\Resource\ResourceObject;
use Ray\Di\Di\Inject;
use Ray\Di\Di\Named;

class Greeting extends ResourceObject
{
    /**
     * @Inject
     * @Named("ssr_app")
     */
    public function setRenderer(RenderInterface $renderer)
    {
        $this->renderer = $renderer;
    }

    public function onGet()
    {
        $this->body = [
            'title' => 'Greeting',
            'hello' => ['message' => 'konichiwa']
        ];

        return $this;
    }
}

Template

We need php template code. For exapmle, Index.php page resource needs Index.html.php template file.
You can get the value of body by escape() or raw().

<?php

/* @var $ssr \BEAR\ReactJsModule\Ssr */
list($markup, $script) = $ssr->render(['hello']);

return <<<"EOT"
<!doctype>
<html>
<head>
    <title>{$ssr->escape('title')}</title>
</head>
<body>
<div id="root">{$markup}</div>
<script src="build/react.bundle.js"></script>
<script src="build/app.bundle.js"></script>
<script>{$script}</script>
</body>
</html>
EOT;

Note: app.bundle.js is client javascript code. The page is rendered fully even {$markup} is removed by client JS code.

Assets 2
Loading