[PHP.wasm] Document bundler configuration for the .dat file import in @php-wasm/web

[adamziel]

Added instructions for using @php-wasm/web with bundlers like Vite. The import dataFilename from './icudt741.dat'; like published in the package will typically trip up bundlers with their default configuration.

cc @fellyph @mho22 @brandonpayton

[mho22]

I tried to reproduce this in a separate project and lots of things have been deprecated, like php.run or php.request. scriptPath had to be /www/index.php and it returned an error since we do not inject name. The second use case is in favor of a PHPRequestHandler instead of php.request.

So here is an updated version that will run a simple script first, and then a HTTP request in the console :

import { PHP, PHPRequestHandler } from '@php-wasm/universal';
import { loadWebRuntime } from '@php-wasm/web';

// loadWebRuntime() calls import('php.wasm') and import('icudt74l.dat') internally.
// Your bundler must resolve import('php.wasm') as a static file URL.
// If you use Webpack, you can use the file-loader to do so.
const php = new PHP(await loadWebRuntime('8.3'));

let response;

php.writeFile('/test.php', `<?php echo "Hello, World!"; ?>`);

// Run a script directly:
response = await php.runStream( {
    scriptPath: '/test.php',
} );

console.log(await response.stdoutText);

php.mkdir('/www');
php.writeFile('/www/index.php', `<?php echo "Hello " . $_POST['name']; ?>`);

// Or use the familiar HTTP concepts:
const handler = new PHPRequestHandler({ phpFactory: async () => php });

response = await handler.request({
	method: 'POST',
	url: 'index.php',
	body: { name: 'John' },
});

console.log(response.text);

[mho22]

This suggestion has been merged in #2778

[mho22]

Thanks for that, I should have created that section when we struggled with this a few months back with @bgrgicak.

[mho22]

I replaced file with text and the build part was no more needed. I don't know if that matters.

import { defineConfig } from 'vite';

export default defineConfig( {
	assetsInclude: [/\.dat$/, /\.wasm$/, /\.so$/, /\.la$/],
    optimizeDeps : {
		esbuildOptions : {
			loader : {
				'.dat': 'text',
				'.wasm': 'text',
				'.so': 'text',
				'.la': 'text',
			}
		}
	}
} );

[brandonpayton]

@mho22 what build part are you referring to. I feel like I'm missing something obvious.

[brandonpayton]

I posted this and only then noticed the build key directly below this comment. ✅

[adamziel]

Thank you so much for reviewing @mho22!