sveltekit-adapter-wordpress-admin

sveltekit-adapter-wordpress-admin (SKAWA)

Adapter for SvelteKit which turns your app into a wordpress plugin admin interface.

Usage

Install with npm i -D sveltekit-adapter-wordpress-admin, setup the adapter in svelte.config.js.

Example 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;

Example index.php

Note: You can choose the path by setting indexPath in the adapter config.

<!-- index.php -->
<?php
/**
 * Plugin Name: My Shortcode
 */

include plugin_dir_path( __FILE__ ) . 'svelte_kit_shortcode.php';
?>

Attributions

This adapter was heavily inspired by sveltekit-adapter-wordpress-shortcode by @tomatrow.

WordPress plugins bindings took inspirations from this old repo by @Ebeldev.

License

MIT