@agnos-ui/svelte-preprocess

Preprocessor to run Svelte actions server-side, which are called directives in AgnosUI.

Installation

npm install @agnos-ui/svelte-preprocess

Usage

Add the directivesPreprocess() preprocessor to your svelte.config.js:

import {directivesPreprocess} from '@agnos-ui/svelte-preprocess';

// ...

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// ...

	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
	// for more information about preprocessors
	preprocess: [
		// ... existing preprocessors

		// Add the following line:
		directivesPreprocess(),
	],

	// ...
};

export default config;

Given the following file:

<script>
	import {myDirective} from './myDirective';
</script>

<div use:myDirective></div>

The preprocessor will transform it into something like:

<script>
	import {ssrAttributes} from '@agnos-ui/svelte-headless/utils/directive';
	import {BROWSER} from 'esm-env';
	import {myDirective} from './myDirective';
</script>

<div use:myDirective {...BROWSER ? {} : ssrAttributes(myDirective)}></div>

On the server, ssrAttributes runs all the provided directives with an SSRHTMLElement that implements a subset of the full HTMLElement. The attributes added by the directives on this element are returned by ssrAttributes to be included in the SSR-generated markup.

If the element has a class attribute, the preprocessor will replace it with the classDirective directive to make sure the value of the class attribute is correctly merged both on the server and on the client with any other class that may be added by some other directive.