nickpoulos/laravel-svelte-direct

Composer 安装命令：


                            composer require nickpoulos/laravel-svelte-direct

包简介

Use Svelte components seamlessly in Laravel Blade Templates

README 文档

README

What?

Use Svelte Components from within your Laravel Blade Templates -- totally seamlessly.

Why?

Modern JavaScript has been a gift and a curse. An amazing gift for developing front ends, plus a whole lot of cursing trying to get it all configured and setup.

Things that used to be very simple became increasingly complex overnight. With build steps, webpack, SSR, code-splitting, and everything else, it can get overwhelming quick.

There have been several awesome attempts to get the best of both worlds, especially within the Laravel community. Projects like Livewire and Alpine.js are amazing and really inspired the creation of this project.

Lately I have really taken a liking to Svelte, a different take on the typical React/Vue style application. It was refreshing to get declarative, reactive, single file components, without all the boilerplate. But coming from PHP & Laravel, I still want my Blade templates and server side rendering (ya know the old school way).

Normally in this situation, Laravel is just there to serve the shell of the DOM, and then have Svelte/Vue/React take over your entire body tag, or very large chunks of your DOM.

But I like eating my cake too, and so this little project was born.

How?

This package has two main pieces.

A Laravel Mix plugin that compiles each of your Svelte components into their own bite-sized JS files
A Blade Pre-Compiler that scans Blade templates identifies your Svelte component tags, and loads the right component JS automatically

Install Laravel Svelte Direct

composer require nickpoulos/laravel-svelte-direct

Configure Laravel Mix

webpack.mix.js

const mix = require('laravel-mix');
require('./vendor/nickpoulos/laravel-svelte-direct/js/mix');

mix.svelteDirect('resources/js/Components', 'public/js');

Write Your Svelte Components

Write your Svelte components as your normally would, except for two small additions that we will add to the top of our file. Both are part of the official Svelte docs/spec and are not custom syntax.

<!-- svelte-ignore missing-custom-element-compile-options -->
<svelte:options tag="flash-message" />

The options tag tells Svelte (and Svelte Direct), what the component's HTML tag should be. Normally this technique is only used in Svelte when compiling to WebComponents (more on that later). But it is the perfect mechanism for our cause as well.

The comment tag tells Svelte to ignore when we don't have customElement set to true.

Configure Blade Template

In your applications's main Blade layout/component, add the @stack('sveltedirect')'above your ending </body> tag.

Feel free to add your Svelte component anywhere inside the Blade HTML. You will notice the tag we use in the HTML below matches the <svelte:options> tag attribute above.

example.blade.php

<!doctype html>
<html>
<head>
    <title>My Example App</title>    
</head>
<body>
<div class="container">

    <!-- example Svelte components here --> 
    <app-header>
        <flash-message type="success" message="test" />
    </app-header>
    <!-- end components -->
    
</div>

<script type="text/javascript">
    // tie your components together using vanilla js or something ike alpine
</script>

<!-- START Svelte Direct Component JavaScript -->
@stack('sveltedirect')
<!-- END Svelte Direct Component JavaScript -->

</body>
</html>

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

License

The MIT License (MIT). Please see License File for more information.

nickpoulos/laravel-svelte-direct 适用场景与选型建议

nickpoulos/laravel-svelte-direct 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 112 次下载、GitHub Stars 达 19，最近一次更新时间为 2021 年 05 月 21 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「laravel」「nickpoulos」「laravel-svelte-direct」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 nickpoulos/laravel-svelte-direct 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 nickpoulos/laravel-svelte-direct 我们能提供哪些服务？

定制开发 / 二次开发

基于 nickpoulos/laravel-svelte-direct 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发