Adapter for SvelteKit which turns your app into a wordpress plugin admin interface.
Install with npm i -D sveltekit-adapter-wordpress-admin
, setup the adapter in svelte.config.js
.
svelte.config.js
Note: It's likely you will need to set custom base paths for Wordpress.
import adapter from 'sveltekit-adapter-wordpress-admin';
import { sveltePreprocess } from 'svelte-preprocess';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: [sveltePreprocess(), vitePreprocess()],
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter({
pages: 'build',
assets: 'build',
fallback: null,
indexPath: 'index.php',
shadow: false,
menu: {
page_title: 'Svelte in Admin!',
menu_title: 'Svelte in Admin!',
icon: 'dashicons-generic',
slug: 'svelte-in-admin'
},
prefix: 'skawa_svelte_in_admin',
renderHead: (head) =>
[...head.querySelectorAll(`link[rel="modulepreload"]`)]
.map((element) => element.outerHTML)
.join(''),
renderBody: (body) => body.innerHTML
}),
embedded: true
}
};
const host = 'https://example.com';
// handle wordpress url structure
if (process.env.NODE_ENV === 'production') {
const base = '/wp-content/plugins/my-wp-plugin/admin/build';
config.kit.paths = {
base,
assets: host + base
};
}
export default config;
index.php
Note: You can choose the path by setting indexPath
in the adapter config.
<!-- index.php -->
<?php
include plugin_dir_path( __FILE__ ) . 'svelte_kit_admin.php';
// add other PHP code here, like `add_action('rest_api_init', 'mu_plugin_register_routes');` and so on
?>
[!NOTE]
Current limitation
You'll need to write all your PHP code in one file for the moment. Please submit an issue if you'd like me to think about aindexDir
option or something. I might do it sometimes if I need it.
This adapter was heavily inspired by sveltekit-adapter-wordpress-shortcode by @tomatrow.
WordPress plugins bindings took inspirations from this old repo by @Ebeldev.