@coherent.js/adapters 1.0.0-beta.6 → 1.0.0-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coherent.js/adapters",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-beta.7",
   "description": "Framework adapters for Coherent.js (Astro, Remix, SvelteKit)",
   "type": "module",
   "main": "src/index.js",
@@ -28,8 +28,8 @@
   ],
   "author": "Coherent.js Team",
   "license": "MIT",
-  "dependencies": {
-    "@coherent.js/core": "1.0.0-beta.6"
+  "peerDependencies": {
+    "@coherent.js/core": "1.0.0-beta.7"
   },
   "devDependencies": {
     "vitest": "^4.0.8"
@@ -38,10 +38,17 @@
     "type": "git",
     "url": "git+https://github.com/Tomdrouv1/coherent.js.git"
   },
+  "homepage": "https://github.com/Tomdrouv1/coherent.js",
+  "bugs": {
+    "url": "https://github.com/Tomdrouv1/coherent.js/issues"
+  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
+  "engines": {
+    "node": ">=20.0.0"
+  },
   "sideEffects": false,
   "scripts": {
     "build": "node build.mjs",

package/src/astro.js

@@ -1,23 +1,84 @@
 /**
  * Astro Integration for Coherent.js
+ *
+ * Provides server-side rendering of Coherent.js components within Astro projects.
  */
 
 import { render } from '@coherent.js/core';
 
-export function createAstroIntegration(_options = {}) {
+/**
+ * Create an Astro integration for Coherent.js
+ *
+ * @param {Object} [options] - Integration options
+ * @param {boolean} [options.hydrate] - Enable client-side hydration
+ * @param {string} [options.hydrateScript] - Custom hydration script path
+ * @returns {Object} Astro integration configuration
+ *
+ * @example
+ * // astro.config.mjs
+ * import { createAstroIntegration } from '@coherent.js/adapters/astro';
+ * export default { integrations: [createAstroIntegration()] };
+ */
+export function createAstroIntegration(options = {}) {
   return {
     name: 'coherent',
     hooks: {
-      'astro:config:setup': ({ addRenderer }) => {
+      'astro:config:setup': ({ addRenderer, updateConfig }) => {
         addRenderer({
           name: '@coherent.js/adapters/astro',
-          serverEntrypoint: '@coherent.js/adapters/astro/server.js',
+          serverEntrypoint: '@coherent.js/adapters/astro',
         });
+
+        if (options.hydrate) {
+          updateConfig({
+            vite: {
+              optimizeDeps: {
+                include: ['@coherent.js/client']
+              }
+            }
+          });
+        }
+      },
+      'astro:build:done': ({ logger }) => {
+        logger?.info('Coherent.js components built successfully');
       }
     }
   };
 }
 
-export async function renderComponent(Component, props) {
-  return render(Component, props);
+/**
+ * Render a Coherent.js component to HTML string
+ *
+ * @param {Function|Object} Component - Coherent.js component
+ * @param {Object} [props] - Component props
+ * @param {Object} [renderOptions] - Rendering options
+ * @returns {string} Rendered HTML
+ */
+export function renderComponent(Component, props = {}, renderOptions = {}) {
+  const componentDef = typeof Component === 'function'
+    ? Component(props)
+    : Component;
+
+  return render(componentDef, renderOptions);
+}
+
+/**
+ * Create a server-side component renderer for Astro
+ *
+ * @param {Object} [options] - Renderer options
+ * @returns {Object} Astro renderer configuration
+ */
+export function createRenderer(options = {}) {
+  return {
+    name: '@coherent.js/astro-renderer',
+    check(Component) {
+      // Check if this looks like a Coherent.js component (function or plain object with tag keys)
+      return typeof Component === 'function' ||
+        (typeof Component === 'object' && Component !== null && !Array.isArray(Component));
+    },
+    renderToStaticMarkup(Component, props) {
+      const html = renderComponent(Component, props, options);
+      return { html };
+    }
+  };
 }

package/src/index.js

@@ -3,6 +3,6 @@
  * Integrations for modern web frameworks
  */
 
-export { createAstroIntegration } from './astro.js';
-export { createRemixAdapter } from './remix.js';
-export { createSvelteKitAdapter } from './sveltekit.js';
+export { createAstroIntegration, renderComponent, createRenderer } from './astro.js';
+export { createRemixAdapter, withCoherent } from './remix.js';
+export { createSvelteKitAdapter, createPreprocessor, createHandle } from './sveltekit.js';

package/src/remix.js

@@ -1,25 +1,82 @@
 /**
  * Remix Adapter for Coherent.js
+ *
+ * Provides SSR integration and loader utilities for Remix projects.
  */
 
 import { render } from '@coherent.js/core';
 
-export function createRemixAdapter(_options = {}) {
+/**
+ * Create a Remix adapter for Coherent.js
+ *
+ * @param {Object} [options] - Adapter options
+ * @param {boolean} [options.hydrate] - Enable client-side hydration
+ * @returns {Object} Remix adapter utilities
+ *
+ * @example
+ * const adapter = createRemixAdapter();
+ * const html = adapter.renderComponent(MyComponent, { title: 'Hello' });
+ */
+export function createRemixAdapter(options = {}) {
   return {
-    renderComponent: (component, props) => render(component, props),
-    createLoader: (component) => {
-      return async ({ request, params }) => {
-        return {
-          component,
-          props: { request, params }
-        };
+    /**
+     * Render a Coherent.js component to HTML
+     */
+    renderComponent(component, props = {}) {
+      const def = typeof component === 'function' ? component(props) : component;
+      return render(def);
+    },
+
+    /**
+     * Create a Remix loader that renders a Coherent.js component
+     */
+    createLoader(component, getProps) {
+      return async ({ request, params, context }) => {
+        const props = getProps
+          ? await getProps({ request, params, context })
+          : { request, params };
+
+        const def = typeof component === 'function' ? component(props) : component;
+        const html = render(def);
+
+        return new Response(html, {
+          headers: { 'Content-Type': 'text/html; charset=utf-8' }
+        });
+      };
+    },
+
+    /**
+     * Create a Remix action handler that processes form data
+     * and renders a Coherent.js component with the result
+     */
+    createAction(component, handler) {
+      return async ({ request, params, context }) => {
+        const formData = await request.formData();
+        const data = Object.fromEntries(formData);
+        const result = await handler({ data, request, params, context });
+
+        if (result instanceof Response) return result;
+
+        const def = typeof component === 'function' ? component(result) : component;
+        const html = render(def);
+
+        return new Response(html, {
+          headers: { 'Content-Type': 'text/html; charset=utf-8' }
+        });
       };
     }
   };
 }
 
+/**
+ * HOC: Wrap a Coherent.js component for use in Remix routes
+ *
+ * @param {Function} Component - Coherent.js component function
+ * @returns {Function} Remix-compatible component
+ */
 export function withCoherent(Component) {
   return function CoherentRemixComponent(props) {
-    return render(Component, props);
+    const def = typeof Component === 'function' ? Component(props) : Component;
+    return render(def);
   };
 }

package/src/sveltekit.js

@@ -1,24 +1,117 @@
 /**
  * SvelteKit Adapter for Coherent.js
+ *
+ * Provides server-side rendering and preprocessor integration for SvelteKit projects.
  */
 
 import { render } from '@coherent.js/core';
 
-export function createSvelteKitAdapter(_options = {}) {
+/**
+ * Create a SvelteKit adapter for Coherent.js
+ *
+ * @param {Object} [options] - Adapter options
+ * @returns {Object} SvelteKit adapter utilities
+ *
+ * @example
+ * const adapter = createSvelteKitAdapter();
+ * const html = adapter.renderComponent(MyComponent, { title: 'Hello' });
+ */
+export function createSvelteKitAdapter(options = {}) {
   return {
     name: '@coherent.js/sveltekit',
-    renderComponent: (component, props) => render(component, props)
+
+    /**
+     * Render a Coherent.js component to HTML
+     */
+    renderComponent(component, props = {}) {
+      const def = typeof component === 'function' ? component(props) : component;
+      return render(def);
+    },
+
+    /**
+     * Create a SvelteKit server load function
+     */
+    createLoad(component, getProps) {
+      return async ({ params, url, fetch }) => {
+        const props = getProps
+          ? await getProps({ params, url, fetch })
+          : { params };
+
+        const def = typeof component === 'function' ? component(props) : component;
+        const html = render(def);
+
+        return { html, props };
+      };
+    },
+
+    /**
+     * Create a SvelteKit form action handler
+     */
+    createAction(handler) {
+      return async ({ request, params }) => {
+        const formData = await request.formData();
+        const data = Object.fromEntries(formData);
+        return handler({ data, params });
+      };
+    }
   };
 }
 
-export function createPreprocessor(_options = {}) {
+/**
+ * Create a Svelte preprocessor for Coherent.js templates
+ *
+ * Transforms inline Coherent.js object syntax within Svelte components.
+ *
+ * @param {Object} [options] - Preprocessor options
+ * @param {string} [options.tag] - Custom tag to process (default: 'coherent')
+ * @returns {Object} Svelte preprocessor
+ */
+export function createPreprocessor(options = {}) {
+  const tag = options.tag || 'coherent';
+
   return {
     name: 'coherent-preprocessor',
-    markup({ content, _filename }) {
-      // Basic preprocessor logic
+    markup({ content, filename }) {
+      // Find <coherent> blocks and render them to HTML
+      const regex = new RegExp(`<${tag}>(.*?)</${tag}>`, 'gs');
+      let transformed = content;
+      let match;
+
+      while ((match = regex.exec(content)) !== null) {
+        try {
+          // The content inside <coherent> tags should be a JS object literal
+          // This is a basic transform — production use should handle more cases
+          const objectStr = match[1].trim();
+          transformed = transformed.replace(match[0], `{@html coherentRender(${objectStr})}`);
+        } catch {
+          // Leave unchanged if parsing fails
+        }
+      }
+
       return {
-        code: content
+        code: transformed,
+        map: null
       };
     }
   };
 }
+
+/**
+ * SvelteKit hooks integration
+ *
+ * @param {Object} [options] - Hook options
+ * @returns {Object} SvelteKit handle function
+ */
+export function createHandle(options = {}) {
+  return async ({ event, resolve }) => {
+    // Add Coherent.js render function to locals
+    event.locals.coherent = {
+      render(component, props = {}) {
+        const def = typeof component === 'function' ? component(props) : component;
+        return render(def);
+      }
+    };
+
+    return resolve(event);
+  };
+}