0.000089 => 8.90E-05

如果單純把 8.90E-05 這個指數型式的數字直接塞入 MySQL，MySQL 會自動轉換，是完全沒問題的，但如果需要透過 bcmul 這一類的函數進行運算時，PHP 就會丟出 `bcmul(): bcmath function argument is not well-formed` 這個訊息。所以我們就必須把指數轉回 float 的型式，只要執行以下程式即可

echo sprintf('%f', '8.90E-05'); // 輸出 0.000089

但如果是 8.90E-15 這個數字會出現什麼結果呢？

echo sprintf('%f', '8.90E-12'); // 輸出 0.000000 

小數點位數大於 5 轉換是會有問題的，所以我們將程式進化一下

function toFloat($number) {
 if (preg_match('/E-(\d+)/', (string) $number, $matched)) {
  $length = max(5, ((int) $matched[1]) + 1);
  
  return sprintf('%.'.$length.'f', $number);
 }
 
 return sprintf('%f', $number);
}

echo toFloat('8.90E-12'); // 輸出 0.0000000000089

這樣就能很好的解決小數點位數過多的問題了

以上的 HTML 發現有兩個 Hello World 的重覆 HTML，這時我們想到把清除掉的方法有

1. 使用 @include directive

建立 hello-world.blade.php`

<div>
  Hello World
</div>

使用 @include directive 載入

@include('hello-world')

this is content

@include('hello-world')

2. 使用 Component

建立 `components/hello-world.blade.php`

<div>
  Hello World
</div>

使用 <x-hello-world />載入

<x-hello-world />

this is content

<x-hello-world />

3. 使用 ob_start

@php(ob_start())
<div>
 Hello World
</div>
@php($hello = ob_get_clean())

{!! $hello !!}

this is content

{!! $hello !!}

這三個方案都可以消除重覆的區塊，前二個方案是 Laravel 官方內建的方案，但必須將重覆的區塊移至新的檔案才能再載入，而第三個方案則是利用 ob_start 將輸出存入 buffer 後再取出，就不必再新增檔案了

Laravel Validate 有異常時，返回上一頁我們就可以在 blade 裡這樣寫

<label for="email">Email</label>
 
<input id="title"
    type="email"
    name="email"
    class="@error('email') is-invalid @enderror">
 
@error('email')
    <div class="alert alert-danger">{{ $message }}</div>
@enderror

但在 Laravel Validate 出錯且 request 為 ajax 則會回應以下的資訊

{
  data: {
      errors: {
          email: ['The email field must be a valid email address.'],
          name: ['The name field is required.'],
      },
      message: 'The name field is required. (and 1 more error)',
  }
}

因為不想再另外記其他的使用方式，所以就直接幫 Alpine 寫了一個 Plugin

// errors.js
class MessageBag {
    constructor(errors = {}) {
        this.errors = errors;
    }

    set(key, value) {
        return this.put(key, value);
    }

    put(key, value) {
        const values = typeof key === 'object' ? key : {[key]: value};

        for (const x in values) {
            let val = values[x];

            this.errors[x] = typeof val === 'string' ? [val] : val;
        }

        return this;
    }

    get(key) {
        if (!this.errors.hasOwnProperty(key) || !this.errors[key]) {
            this.put(key, null);
        }

        return this.errors[key];
    }

    has(key) {
        return this.get(key) !== null;
    }

    first(key) {
        if (!this.has(key)) {
            return null;
        }

        const value = this.get(key);

        return value instanceof Array ? value[0] : value;
    }

    remove(...keys) {
        keys.forEach(key => this.put(key, null));
    }

    clear() {
        this.remove(...Object.keys(this.errors));
    }

    all() {
        return Object.keys(this.errors).reduce((acc, key) => {
            const value = this.get(key);

            return value === null ? acc : {...acc, [key]: value};
        }, {});
    }

    registerAxiosInterceptor(axios) {
        const beforeRequest = (config) => {
            this.clear();

            return config;
        };
        const onError = (err) => {
            const {status, data} = err.response;

            if (status === 422) {
                this.set(data.errors);
            }

            return Promise.reject(err);
        };

        axios.interceptors.request.use(beforeRequest, err => Promise.reject(err));
        axios.interceptors.response.use(response => response, onError);
    }
}

export default function (Alpine) {
    const errors = Alpine.reactive(new MessageBag({}));
    Alpine.magic('errors', () => errors);
    Object.defineProperty(Alpine, 'errors', {get: () => errors});
}

初始化程式

// bootstrap.js
import Alpine from 'alpinejs';
import Axios from 'axios';
import errors from './errors';

errors(Alpine);
Alpine.start();

window.axios = Axios.create();
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
Alpine.errors.registerAxiosInterceptor(window.axios);

把以上的程式複製到 js 資料夾後 build 完，就可以開心的使用了

再附上測試程式(包含實際使用方式)

// errors.test.js
import { fireEvent, screen } from '@testing-library/dom';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import Alpine from 'alpinejs';
import plugin from './errors';

describe('Alpine $errors', () => {
    const givenComponent = (name) => {
        const component = document.createElement('div');
        component.innerHTML = `
            <div x-data>
                <div>
                    <label for="${name}" class="block text-sm font-medium leading-6 text-gray-900">${name}</label>
                    <div class="relative mt-2 rounded-md shadow-sm">
                        <input type="text" name="${name}" id="${name}"
                               class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                               :class="{'text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500': $errors.has('${name}')}"
                               @keyup="$errors.remove('${name}')"
                               role="input">
                    </div>

                    <template x-if="$errors.has('${name}')">
                        <p x-text="$errors.first('${name}')" class="mt-2 text-sm text-red-600" id="${name}-error" role="error-message"></p>
                    </template>
                </div>
            </div>
        `;
        document.body.append(component);

        return component;
    };

    beforeAll(() => {
        plugin(Alpine);

        const mock = new MockAdapter(axios);
        mock.onPost('/users').reply(422, {
            'message': 'The email field must be a valid email address.',
            'errors': {'email': ['The email field must be a valid email address.']},
        });
        Alpine.$errors.registerAxiosInterceptor(axios);

        Alpine.start();
    });

    afterAll(() => Alpine.stopObservingMutations());

    beforeEach(() => {
        document.body.innerHTML = '';
        givenComponent('email');
        givenComponent('password');
    });

    afterEach(() => document.body.innerHTML = '');

    const getInvalidInputs = () => screen.queryAllByRole('input').filter(el => el.classList.contains('text-red-900'));
    const getErrorMessages = () => screen.queryAllByRole('error-message');

    async function expectShowError() {


        try {
            await axios.post('/users');
        } catch (e) {
        }

        expect(getInvalidInputs()).toHaveLength(1);
        expect(getErrorMessages()).toHaveLength(1);
        expect(getErrorMessages()[0].innerHTML).toContain('The email field must be a valid email address.');
    }

    it('show errors', async () => {
        await expectShowError();
    });

    it('clear errors', async () => {
        await expectShowError();

        await Alpine.nextTick(() => Alpine.$errors.clear());

        expect(getInvalidInputs()).toHaveLength(0);
        expect(getErrorMessages()).toHaveLength(0);
    });

    it('key up clear input error', async () => {
        await expectShowError();

        const invalidInput = getInvalidInputs()[0];
        await Alpine.nextTick(() => fireEvent.keyUp(invalidInput));

        expect(invalidInput.classList).not.toContain('text-red-900');
    });
});

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

當執行 npm run dev 時，@vite 會將 asset 的路徑指向 http://localhost，這時只需要加入 server.host 的設定即可

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

const host = 'xxx.test';

export default defineConfig({
    server: {
        host: host,
        hmr: {
            host: host,
        },
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

如果使用 valet 且想要使用 https 可以至資料夾內執行 valet secure後再使使用以下設定檔即可

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

const host = 'xxx.test';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
            valetTls: host,
        }),
    ],
});

InstalledVersions::getVersion('laravel/framework');

這個功能目前在 Laravel 的官方文件沒提到的，根據 PR 的描述，當遇到資料庫提供『不同函式名但功能相同的』的 sql function 我們就可以利用 Database Expression 來幫我們解決這個問題。

以常用的 MySQL 的 IF為例，我們可能會寫出以下的 code

namespace Tests\Feature;

use Illuminate\Foundation\Testing\RefreshDatabase;
use Illuminate\Support\Facades\DB;
use Tests\TestCase;

class ExampleTest extends TestCase
{
    use RefreshDatabase;

    public function test_database_expression(): void
    {
        $result = DB::query()
            ->selectRaw('IF(10 > 1, 1, 0) AS value')
            ->first();

        self::assertEquals(1, $result->value);
    }
}

但當我們把資料庫改為 SQLite 時再執行一次測試則會出現 no such function的錯誤訊息

為了讓測試通則會將程式改為

namespace Tests\Feature;

use Illuminate\Database\MySqlConnection;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Illuminate\Support\Facades\DB;
use Tests\TestCase;

class ExampleTest extends TestCase
{
    use RefreshDatabase;

    public function test_database_expression(): void
    {
        $isMySQL = is_a(DB::connection(), MySqlConnection::class);

        $result = DB::query()
            ->when($isMySQL, function ($query) {
                return $query->selectRaw('IF(10 > 1, 1, 0) AS value');
            })
            ->when(! $isMySQL, function ($query) {
                return $query->selectRaw('CASE WHEN 10 > 1 THEN 1 ELSE 0 END AS value');
            })
            ->first();

        self::assertEquals(1, $result->value);
    }
}

這樣使用的資料庫不論是 MySQL 或 SQLite，程式都可以正常的運作，但 code 看起來就相對複雜多了，所以我們可以利用這個 Expression 再將程式做一次調整，我們最終可以將程式碼改為

namespace Tests\Feature;

use Illuminate\Contracts\Database\Query\Expression;
use Illuminate\Database\Grammar;
use Illuminate\Database\Query\Grammars\SQLiteGrammar;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Illuminate\Support\Facades\DB;
use Tests\TestCase;

class ExampleTest extends TestCase
{
    use RefreshDatabase;

    public function test_database_expression(): void
    {
        $result = DB::query()
            ->select(new IfExpression('value', '10 > 1', 1, 0))
            ->first();

        self::assertEquals(1, $result->value);
    }
}

class IfExpression implements Expression
{
    public function __construct(
        private readonly string $alias,
        private readonly string $condition,
        private readonly mixed $true,
        private readonly mixed $false
    ) {
    }

    public function getValue(Grammar $grammar)
    {
        return match (get_class($grammar)) {
            SQLiteGrammar::class => "CASE WHEN $this->condition THEN $this->true ELSE $this->false END AS $this->alias",
            default => "IF($this->condition, $this->true, $this->false) AS $this->alias",
        };
    }
}

這樣的調整，不但讓我們程式碼變的容易閱讀之外，也幫助我們更容易的消除重覆的程式碼，已經升級至 Laravel 10 的人可以多加利用

每個資料庫的內建的 function 其實都不一樣的，當把 SQLite 當成主要測試資料庫難免會遇到 SQLite 不支援的 function，但 PHP 是支援 SQLite 的自定義 function 的，一樣直接來看實例

我們先在在 routes/web.php 裡寫以下的測試程式

Route::get('/', function() {
  return User::query()->orderByRaw('FIELD(id, 3, 5, 4, 1, 2)')->get();
});

接下來我們可以加入以下的測試案例

namespace Tests\Feature;

use App\Models\User;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Tests\TestCase;

class ExampleTest extends TestCase
{
    use RefreshDatabase;

    public function test_sql_function(): void
    {
        User::factory()->count(5)->create();

        $data = $this->get('/')->assertStatus(200)->collect();

        // 預期得到 id 排序為 3, 5, 4, 1, 2 的結果
        self::assertEquals([3, 5, 4, 1, 2], $data->pluck('id')->toArray());
    }
}

執行測試後我們會得到以下的結果

接著我們修改 phpunit.xml 把資料庫改為 SQLite 再執行一次測試會得到 no such function FIELD的錯誤訊息，因為 SQLite 並不支援 FIELD 的 function

為了讓 SQLite 支援 FILED 的 function，我們可以在 TestCase 裡加入以下程式碼

namespace Tests;

use Illuminate\Database\SQLiteConnection;
use Illuminate\Foundation\Testing\TestCase as BaseTestCase;
use Illuminate\Support\Facades\DB;

abstract class TestCase extends BaseTestCase
{
    use CreatesApplication;

    protected function setUp(): void
    {
        parent::setUp();
        $connection = DB::connection();
        // 判斷是否為 SQLite
        if (is_a($connection, SQLiteConnection::class)) {
            // 自訂 SQLite function
            $connection->getPdo()->sqliteCreateFunction(
                'FIELD',
                static fn($id, ...$array) => array_search($id, $array)
            );
        }
    }
}

加完以上程式碼後我們就可以正常的執行測試了

執行以下的程式

Storage::disk('s3')->exists('path/to.jpg');

檔案不存在時拋出 League\Flysystem\UnableToCheckFileExistence，而完整的錯誤訊息則是

Client error: `HEAD https://xxx.amazonaws.com/path/to.jpg` resulted in a `403 Forbidden` response

竟然會是 403 Forbidden？但如果是檔案存在的情況則會正常回應 true，所以不會是 token 錯誤，當下就認定為是 thrid-party package 有 bug，但實際查了一下 issue，查到了這一篇討論，它的結論是

We are unfortunately left in a sad state because the culprit is the AWS underlying API. It throws an ambiguous 403 Forbidden when user has s3:getObject but does not have s3:ListBucket. In this case, the 403 is always because the file does not exist, but we have no way to determine whether this 403 is caused by file not exist or if the user has no permission at all.

所以需要再給予 s3:ListBucket這個權限，檔案不存在就會正常回應 false，如果沒有 s3:ListBucket這個權限，則會回應 403

PHPUnit 跑測試的時候一直出現這訊息，這時只需要執行

pecl install -o -f grpc-1.49.0

把 grpc 降到 1.49.0 就不會出現這個訊息了

延續 Laravel Container 這一篇，我們今天就來看看 Container 和 Facades 的關聯是什麼！

首先我先把程式做個調整

// FakeApi 不變
namespace App;

class FakeApi
{
    private string $token;

    public function __construct(string $token)
    {
        $this->token = $token;
    }

    public function getToken(): string
    {
        return $this->token;
    }
}

 

namespace App\Providers;

use App\FakeApi;
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Str;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        // 將 API 的 token 改為亂數
        $this->app->bind(FakeApi::class, fn() => new FakeApi(Str::random()));
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        //
    }
}

namespace Tests\Feature;

use App\FakeApi;
use Tests\TestCase;

class FacadeTest extends TestCase
{
    public function test_facade(): void
    {
        /** @var FakeApi $fakeApi */
        $fakeApi = app(FakeApi::class);
        /** @var FakeApi $fakeApi2 */
        $fakeApi2 = app(FakeApi::class);
      
        self::assertEquals($fakeApi->getToken(), $fakeApi2->getToken());
    }
}

測試就改為從 container 取出兩次 FakeApi，接著試試看執行測試會得到什麼結果 …

果然出現錯誤，因為我們在 Container 裡註冊 FakeApi 是使用 bind，所以每次從 Container 取出 FakeApi 就會執行 new FakeApi，那我們應該怎麼修改呢？

namespace App\Providers;

use App\FakeApi;
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Str;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        // bind 改為 singleton
        $this->app->singleton(FakeApi::class, fn() => new FakeApi(Str::random()));
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        //
    }
}

只需要把 bind 改為 singleton，每次從 Container 取出 FakeApi 就會是同一個 instance 了

接下來建立一個 FakeApi 的 Facade

namespace App\Facades;

use Illuminate\Support\Facades\Facade;

class FakeApi extends Facade
{
    protected static function getFacadeAccessor()
    {
        // 指定 Container 註冊的名稱
        return \App\FakeApi::class;
    }
}

建立完 Facade 之後再將測試做個調整

namespace Tests\Feature;

use App\Facades\FakeApi as FakeApiFacade;
use App\FakeApi;
use Tests\TestCase;

class FacadeTest extends TestCase
{
    public function test_facade(): void
    {
        /** @var FakeApi $fakeApi */
        $fakeApi = app(FakeApi::class);

        self::assertEquals($fakeApi->getToken(), FakeApiFacade::getToken());
    }
}

測試一樣會通過，所以由這個例子就可以證明，Facade 是透過 getFacadeAccessor 這個 method 去 Container 裡取得 instance，再透過 Facade 的 static method 去執行 instance 的 method

接下來可能會有人問 Laravel 的 DB Facade 我沒看到 class 名啊？

namespace Illuminate\Support\Facades;

class DB extends Facade
{
    /**
     * Get the registered name of the component.
     *
     * @return string
     */
    protected static function getFacadeAccessor()
    {
        return 'db';
    }
}

一樣將程式做個調整

namespace App\Providers;

use App\FakeApi;
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Str;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        $this->app->singleton(FakeApi::class, fn() => new FakeApi(Str::random()));
        // 增加別名
        $this->app->singleton('fake-api', fn() => $this->app->make(FakeApi::class));
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        //
    }
}

namespace App\Facades;

use Illuminate\Support\Facades\Facade;

class FakeApi extends Facade
{
    protected static function getFacadeAccessor()
    {
        // 指定 Container 註冊的名稱(別名)
        return 'fake-api';
    }

}

測試一樣會通過，所以透過這個例子我們可以得知，Laravel Container 不僅僅可以註冊 class name 也可以直接註冊字串( FakeApi::class 實際上就是一個字串)，讓我們可以透過『字串』去 Container 裡取得 instance 的

同場加映，以 DB Facade 為例，在剛接觸 Laravel 真的不太容易找到 ‘db’ 這個字串在哪兒註冊到Container 裡，但我們可以使用 grep 暴力找出來的

grep -rnw ./vendor -e "\$this->app->\(singleton\|bind\)('db'"