Load plugins and inject code or component into custom location in your sveltekit project.
npm i -D sveltekit-plugin-system
In+layout.svelte for client-side usage:
<script lang="ts"> import { loadPlugins } from 'sveltekit-plugin-system'; loadPlugins({ plugins: import.meta.glob('../../**/plugins/**/index.(ts|js)', { eager: true }) });</script><slot />
Inhooks.server.ts for server-side usage:
importtype{Handle}from'@sveltejs/kit';import{loadPlugins}from'sveltekit-plugin-system';exportconsthandle:Handle=async({ resolve, event})=>{loadPlugins({plugins:import.meta.glob('../../**/plugins/**/index.(ts|js)',{eager:true})});returnawaitresolve(event);};You need to re-build your project to make it works if you add or remove a server-side hook in your plugin(s).
The hook location is the target location where the component or code will be injected from plugins.
For this example, in+layout.svelte, we are adding theHook component,with a location namedafter-content.
Placed after<slot />, the plugins can now inject components after the slot content.
<script lang="ts"> import { loadPlugins, Hook } from "sveltekit-plugin-system"; loadPlugins({ plugins: import.meta.glob('../../**/plugins/**/index.(ts|js)', { eager: true }) });</script><slot /><Hook location="after-content" /> <!-- Add hook location here -->
Plugins are simple folders containing anindex.ts file that exports a function withhooks store as an argument.
We can inject a component in theafter-content location from the plugin :
Insrc/plugins/plugin-example/index.ts:
importtype{Plugins}from'sveltekit-plugin-system';importComponentExamplefrom'./ComponentExample.svelte';exportdefault(hooks:Plugins.HookCreateStore)=>{hooks.addComponent('after-content',ComponentExample);};Actions are function that will be executed at the given location.
For example, let's log something from our plugin :
In our+layout.svelte file, we will add thedoAction function fromhooks store, and name the hook locationlog-something :
<script lang="ts"> import { loadPlugins, hooks } from "sveltekit-plugin-system"; loadPlugins({ plugins: import.meta.glob('../../**/plugins/**/index.(ts|js)', { eager: true }) }); $: hooks.doAction('log-something') // Action hook</script><slot />
In our plugin, we can now use thedoAction function fromhooks store :
src/plugins/plugin-example/index.ts:
importtype{Plugins}from'sveltekit-plugin-system';exportdefault(hooks:Plugins.HookCreateStore)=>{// Add an action to `log-something` location.hooks.addAction('log-something',()=>{console.log('This log message comes from a plugin!');});};Now, on each page of your project, you will see the log message in the console:This log message comes from a plugin!
Filters are functions that take an argument and return something.
It's useful to update a variable and return the updated variable.
For example, we will add a key: value to event.locals from a plugin:
In our project, we can add the server-side sveltekit hook :hooks.server.ts,initialize the locals variable to an empty object, and make it filterable from plugins.
Inhooks.server.ts:
importtype{Handle}from'@sveltejs/kit';import{loadPlugins,hooks}from'sveltekit-plugin-system';exportconsthandle:Handle=async({ resolve, event})=>{// Load plugins server-sideloadPlugins({plugins:import.meta.glob('../../**/plugins/**/index.(ts|js)',{eager:true})});event.locals={};// Init locals as an empty object// Filter event.locals from pluginsevent.locals=hooks.applyFilter('server-locals',event.locals);// Add console.log to check the updated locals in the consoleif(Object.keys(event.locals).length>0){console.log('> A plugin is filtering event.locals :');console.log('> event.locals =',event.locals);}returnawaitresolve(event);};In our plugin :
importtype{Plugins}from'sveltekit-plugin-system';exportdefault(hooks:Plugins.HookCreateStore)=>{// Filter event.localshooks.addFilter('server-locals',(locals:{[key:string]:string})=>{locals.test='ok';returnlocals;});};Now, re-build your project, and start it, you will see the following logs in your server-side console :
> A plugin is filtering event.locals :> event.locals = { test: 'ok' }
ChatGPT
You can use Tailwind in your plugin's components, but Tailwind needs to know their location in order to analyze them.
Intailwind.config.js:
exportdefault{content:['./src/**/*.{html,js,svelte,ts}','./plugins/**/*.{html,js,svelte,ts}'// Specify your plugins path here]};