cambis/silverstripe-inertia

Inertia.js 的 Silverstripe 适配器。

维护者

详细信息

github.com/Cambis/silverstripe-inertia

源代码

问题

安装: 16

依赖: 0

建议者: 0

安全: 0

星标: 3

关注者: 1

分支: 0

开放问题: 0

类型:silverstripe-vendormodule

v0.4.1 2024-06-11 01:59 UTC

Requires

MIT 3682f6bde366f6bf43930e440812e6003f5163c1

silverstripeinertia

This package is auto-updated.

Last update: 2024-09-11 02:43:45 UTC

README

基于 inertia-bundle 的 Silverstripe Inertia.js 适配器。

访问 inertiajs.com 了解更多信息。

入门

安装服务器适配器。

composer require cambis/silverstripe-inertia

安装首选客户端适配器。

React

yarn add -D @inertiajs/react

Vue

yarn add -D @inertiajs/vue3

Svelte

yarn add -D @inertiajs/svelte

配置

以下是一个基本的配置，以开始使用。

服务器端

首先，使用以下配置您的 Silverstripe 应用程序

配置文件

创建一个配置文件

---
Name: inertia
After:
  - requestprocessors
---
SilverStripe\Core\Injector\Injector:
  SilverStripe\Control\Director:
    properties:
      Middlewares:
        InertiaMiddleware: '%$Cambis\Inertia\Control\Middleware\InertiaMiddleware'

PageController:
  extensions:
    - Cambis\Inertia\Extension\InertiaPageControllerExtension

模板

在您的根 Page.ss 模板中添加以下内容

<head>
...
+$InertiaHead($PageData)
</head>
<body>
-$Layout
+$InertiaBody($PageData)
...
</body>

根模板位置是可选可配置的

Cambis\Inertia\Inertia:
  root_view: MyAlternativePage

PageController

配置您的 PageController 类以提供 Inertia 服务。

use SilverStripe\CMS\Controllers\ContentController;
use SilverStripe\Control\HTTPRequest;
use SilverStripe\Control\HTTPResponse;

class PageController extends ContentController
{
  /**
   * @return HTTPResponse
   */
  public function index(HTTPRequest $request) {
      return $this->inertia->render('Dashboard', ['prop' => 'value']);
  }
}

如果您的 IDE 支持使用 @mixin 指令，请将其添加到您的 PageController 以启用自动完成

+use Cambis\Inertia\Extension\InertiaPageControllerExtension;
use SilverStripe\CMS\Controllers\ContentController;
use SilverStripe\Control\HTTPRequest;
use SilverStripe\Control\HTTPResponse;

+/**
+ * @mixin InertiaPageControllerExtension
+ */
class PageController extends ContentController
{
  /**
   * @return HTTPResponse
   */
  public function index(HTTPRequest $request) {
      return $this->inertia->render('Dashboard', ['prop' => 'value']);
  }
}

或者，您可以使用 @property 指令

+use Cambis\Inertia\Inertia;
use SilverStripe\CMS\Controllers\ContentController;
use SilverStripe\Control\HTTPRequest;
use SilverStripe\Control\HTTPResponse;

+/**
+ * @property Inertia $inertia
+ */
class PageController extends ContentController
{
  /**
   * @return HTTPResponse
   */
  public function index(HTTPRequest $request) {
      return $this->inertia->render('Dashboard', ['prop' => 'value']);
  }
}

客户端

一旦您的 Silverstripe 应用程序设置完成，您就可以配置客户端应用程序。

React

import { createInertiaApp } from '@inertiajs/react';
import { createRoot } from 'react-dom/client';

createInertiaApp({
  resolve: (name) => import(`./Pages/${name}`),
  setup({ el, App, props }) {
    createRoot(el).render(<App {...props} />);
  },
});

Vue

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
  resolve: (name) => import(`./Pages/${name}`),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

Svelte

import { createInertiaApp } from '@inertiajs/svelte'

createInertiaApp({
  resolve: (name) => import(`./Pages/${name}`),
  setup({ el, App, props }) {
    new App({ target: el, props })
  },
})

延迟数据评估

有时您不希望在访问同一页面类型时重新评估数据。这可以通过使用回调函数或 lazy() 在服务器端完成。

请参阅 官方文档 了解客户端配置。

return $this->inertia->render('Dashboard', [
    // ALWAYS included on first visit...
    // OPTIONALLY included on partial reloads...
    // ALWAYS evaluated...
    'foo' => 'bar',

    // ALWAYS included on first visit...
    // OPTIONALLY included on partial reloads...
    // ONLY evaluated when needed...
    'foo' => static function (): string { return 'bar'; },

    // NEVER included on first visit...
    // OPTIONALLY included on partial reloads...
    // ONLY evaluated when needed...
    'foo' => $this->inertia->lazy(static function (): string { return 'bar'; }),
]);

共享数据

您可以使用 $this->inertia->share(string, mixed) 函数在所有组件之间共享 props。一个用例是为网站填充导航菜单，这可以使用 SilverStripe\Core\Extension 完成。

<?php

namespace App\Inertia\Extension;

use Page;
use PageController;
use SilverStripe\Control\HTTPRequest;
use SilverStripe\Core\Extension;

/**
 * @method PageController&$this getOwner()
 */
class InertiaControllerMenuExtension extends Extension
{
    public function beforeCallActionHandler(HTTPRequest $request, string $action): void
    {
        $inertia = $this->getOwner()->inertia;
        $items = [];

        /** @var Page $page */
        foreach ($this->getOwner()->getMenu(1) as $page) {
            $item = [
                'id' => static function () use ($page): int {
                    return $page->ID;
                },
                'menuTitle' => static function () use ($page): string {
                    return $page->MenuTitle;
                },
                'link' => static function () use ($page): string {
                    return $page->Link();
                },
            ];

            $items[] = $item;
        }

        $inertia->share('menu', $items);
    }
}

视图数据

您可以通过渲染函数中的 render() 参数将数据传递到您的根 Silverstripe 模板中

return $this->inertia->render('Dashboard', ['prop' => 'value'], ['Title' => 'My title']);

您也可以使用 $this->inertia->viewData(string, mixed) 函数传递数据

$this->inertia->viewData(['Title' => 'My title'])

数据可以通过 $ViewData 变量访问

$ViewData.Title // 'My title'

资产版本化

默认情况下，中间件会检查配置变量 asset_url 和 manifest_file 以获取当前资产版本。

Cambis\Inertia\Inertia:
  assert_url: https://example.cdn.com/manifest.json

# OR
Cambis\Inertia\Inertia:
  manifest_file: /themes/default/dist/manifest.json

您可以通过扩展 Cambis\Inertia\Control\Middleware\InertiaMiddleware 类来指定您的应用程序的资产版本。

namespace App\Inertia\Control\Middleware;

use Cambis\Inertia\Control\Middleware\InertiaMiddleware as BaseMiddleware;
use SilverStripe\Control\HTTPRequest;

class InertiaMiddleware extends BaseMiddleware
{
    public function version(HTTPRequest $request): ?string
    {
        // Custom logic here
    }
}

不要忘记更新您的配置！

SilverStripe\Core\Injector\Injector:
  SilverStripe\Control\Director:
    properties:
      Middlewares:
-      InertiaMiddleware: '%$Cambis\Inertia\Control\Middleware\InertiaMiddleware'
+      InertiaMiddleware: '%$App\Inertia\Control\Middleware\InertiaMiddleware'

或者，您可以使用 $this->inertia->version(mixed) 函数来设置当前资产版本

$this->inertia->version('foo');
$this->inertia->version(static function (): string { return 'foo'; }) // Lazily...

缓存破坏

请参阅 官方文档 了解有关缓存破坏的信息。

服务器端渲染

要启用服务器端渲染，首先启用以下配置变量 ssr_enabled 和 ssr_host

Cambis\Inertia\Inertia:
  ssr_enabled: true
  ssr_host: https://my-ssr-host/render

请参阅 官方文档 了解有关客户端设置的更多信息。

演示

您可以在以下位置找到基本演示 这里