Merge pull request #222 from DaveKeehl/enhancement/220-create-custom-…

…preprocessor

Create custom preprocessor

examples/with-svelte-vite/svelte.config.js

@@ -1,7 +1,8 @@
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import { svelteRevealPreprocess } from 'svelte-reveal';
 
 export default {
   // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
   // for more information about preprocessors
-  preprocess: vitePreprocess()
+  preprocess: [vitePreprocess(), svelteRevealPreprocess()]
 };

examples/with-sveltekit/src/routes/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { reveal, type RevealOptions } from 'svelte-reveal';
-  import 'svelte-reveal/styles.css';
 
   const config: RevealOptions[] = [
     { preset: 'fade', duration: 2000 },
@@ -15,7 +14,7 @@
 <main>
   {#each config as element}
     <section>
-      <div use:reveal={{ ...element }} class="wrapper sr__hide">
+      <div use:reveal={{ ...element }} class="wrapper">
         <h1>{element.preset} transition</h1>
       </div>
     </section>

examples/with-sveltekit/svelte.config.js

@@ -1,11 +1,12 @@
 import adapter from '@sveltejs/adapter-auto';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import { svelteRevealPreprocess } from 'svelte-reveal';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   // Consult https://kit.svelte.dev/docs/integrations#preprocessors
   // for more information about preprocessors
-  preprocess: vitePreprocess(),
+  preprocess: [vitePreprocess(), svelteRevealPreprocess({ ssr: true })],
 
   kit: {
     // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.

packages/svelte-reveal/CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Added
+
+- Custom preprocessor to reduce boilerplate when using SvelteKit ([#222](https://github.com/DaveKeehl/svelte-reveal/pull/222))
+
 ## [1.1.0] - 2024-04-10
 
 ### Added

packages/svelte-reveal/src/index.ts

@@ -13,5 +13,6 @@ export {
   setConfig,
   setDefaultOptions
 } from './internal/API.ts';
+export { svelteRevealPreprocess } from '@/preprocessor.ts';
 export type { RevealConfig } from '@/types/config.ts';
 export type { RevealOptions } from '@/types/options.ts';

packages/svelte-reveal/src/internal/preprocessor.ts

@@ -0,0 +1,38 @@
+import { PreprocessorGroup } from 'svelte/compiler';
+
+export function svelteRevealPreprocess(options?: { ssr?: boolean }): PreprocessorGroup {
+  const ssr = options?.ssr ?? false;
+
+  return {
+    markup({ content }) {
+      if (!ssr) return { code: content };
+
+      const cssClassToAdd = 'sr__hide';
+      const regex = /(<[\w-]+\s+[^>]*)(use:reveal)([^>]*>)/g;
+
+      const modifiedContent = content.replace(regex, (match, start, directive, end) => {
+        if (/class="[^"]*"/.test(match)) {
+          return match.replace(/class="([^"]*)"/, `class="$1 ${cssClassToAdd}"`);
+        }
+        return `${start}class="${cssClassToAdd}" ${directive}${end}`;
+      });
+
+      return { code: modifiedContent };
+    },
+    script({ content }) {
+      if (!ssr) return { code: content };
+
+      const importStatement = `import 'svelte-reveal/styles.css';`;
+      const importRegex = /import\s*['"]svelte-reveal\/styles\.css['"]/;
+
+      // If the import already exists, return the content as is
+      if (importRegex.test(content)) return { code: content };
+
+      // If the script tag exists, add the import at the top
+      if (content.trim().length > 0) return { code: `${importStatement}\n${content}` };
+
+      // If no script tag exists, create one with the import statement
+      return { code: `<script>\n${importStatement}\n</script>\n${content}` };
+    }
+  };
+}