├── .gitignore
├── README.md
├── assets
    └── src
    │   ├── App.svelte
    │   └── main.js
├── includes
    └── SvelteWP.php
├── package.json
├── rollup.config.js
└── svelte-wordpress-plugin.php


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | assets/build
3 | yarn.lock


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # svelte-wordpress-plugin
 2 | 
 3 | ## Install dependencies
 4 | 
 5 | ```bash
 6 | yarn
 7 | ```
 8 | or use NPM
 9 | ```bash
10 | npm install
11 | ```
12 | 
13 | # Getting started
14 | 1. ``yarn run dev`` or ``yarn run build``
15 | 2. Activate the plugin in your WordPress admin
16 | 3. If your homepage shows "Bar" it works!
17 | 
18 | 


--------------------------------------------------------------------------------
/assets/src/App.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     let foo = 'bar'
 3 | </script>
 4 | 
 5 | <style>
 6 |     h1 {
 7 |         color: #40b3ff;
 8 |     }
 9 | </style>
10 | <h1>{foo}</h1>


--------------------------------------------------------------------------------
/assets/src/main.js:
--------------------------------------------------------------------------------
1 | import App from './App.svelte';
2 | 
3 | const app = new App({
4 |     target: document.body
5 | });
6 | 
7 | export default app;


--------------------------------------------------------------------------------
/includes/SvelteWP.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | class SvelteWP
 4 | {
 5 |     public function __construct()
 6 |     {
 7 |         add_action( 'wp_enqueue_scripts', array( $this, 'swp_dependencies' ) );
 8 |     }
 9 | 
10 |     public function swp_dependencies() 
11 |     {
12 |         wp_enqueue_script( 'swp', plugins_url( 'assets/build/bundle.js', dirname( __FILE__ ) ), array(), time(), true );
13 |         wp_enqueue_style( 'swp', plugins_url( 'assets/build/bundle.css', dirname( __FILE__ ) ), array(), time() );
14 |         
15 |         // Optional
16 |         wp_localize_script( 'swp', 'wordpress_object', array(
17 |         	'plugins_url' => plugins_url( '/', dirname( __FILE__ ) ),
18 |             'ajax_url' => admin_url( 'admin-ajax.php' ),
19 |         ));
20 |     }
21 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "svelte-wordpress-plugin",
 3 |     "version": "0.0.1",
 4 |     "devDependencies": {
 5 |         "npm-run-all": "^4.1.5",
 6 |         "rollup": "^1.10.1",
 7 |         "rollup-plugin-commonjs": "^9.3.4",
 8 |         "rollup-plugin-node-resolve": "^4.2.3",
 9 |         "rollup-plugin-svelte": "^5.0.3",
10 |         "rollup-plugin-terser": "^4.0.4",
11 |         "svelte": "3.6.1"
12 |     },
13 |     "scripts": {
14 |         "build": "rollup -c",
15 |         "dev": "rollup -c -w"
16 |     }
17 | }


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import svelte from 'rollup-plugin-svelte';
 2 | import resolve from 'rollup-plugin-node-resolve';
 3 | import commonjs from 'rollup-plugin-commonjs';
 4 | import { terser } from 'rollup-plugin-terser';
 5 | 
 6 | const production = !process.env.ROLLUP_WATCH;
 7 | 
 8 | export default {
 9 | 	input: 'assets/src/main.js',
10 | 	output: {
11 | 		sourcemap: true,
12 | 		format: 'iife',
13 | 		name: 'app',
14 | 		file: 'assets/build/bundle.js'
15 | 	},
16 | 	plugins: [
17 | 		svelte({
18 | 			// enable run-time checks when not in production
19 | 			dev: !production,
20 | 			// we'll extract any component CSS out into
21 | 			// a separate file — better for performance
22 | 			css: css => {
23 | 				css.write('assets/build/bundle.css');
24 | 			}
25 | 		}),
26 | 
27 | 		// If you have external dependencies installed from
28 | 		// npm, you'll most likely need these plugins. In
29 | 		// some cases you'll need additional configuration —
30 | 		// consult the documentation for details:
31 | 		// https://github.com/rollup/rollup-plugin-commonjs
32 | 		resolve({ browser: true }),
33 | 		commonjs(),
34 | 
35 | 		// If we're building for production (npm run build
36 | 		// instead of npm run dev), minify
37 | 		production && terser()
38 | 	]
39 | };


--------------------------------------------------------------------------------
/svelte-wordpress-plugin.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /**
 4 |  * Plugin Name:  Svelte WordPress Plugin Boilerplate
 5 |  * Description:  A boilerplate for developing WordPress plugins with Svelte
 6 |  * Version: 0.0.1
 7 |  * License: GPL2+
 8 |  * Author: Dylan Blokhuis
 9 |  * Author URI: https://github.com/dylanblokhuis
10 |  */
11 | 
12 | if ( ! defined( 'ABSPATH' ) ) {
13 | 	die( 'Access denied.' );
14 | }
15 | 
16 | require_once( __DIR__ . '/includes/SvelteWP.php' );
17 | 
18 | if ( class_exists( 'SvelteWP' ) ) {
19 | 	$svelteWP = new SvelteWP();
20 | }


--------------------------------------------------------------------------------