Complete solid adapter

Author: punyflash

README.md

@@ -9,6 +9,11 @@
 - [x] Props merging
 - [x] State remembering
 - [x] History encryption
-- [x] Server-side rendering
 - [x] Polling
-- [ ] Simple frontend framework adapters
+- [x] Server-side rendering
+- [ ] Precache (PWA)
+- [x] Svelte adapter
+- [x] Vue adapter
+- [x] SolidJS adapter
+- [ ] React adapter
+- [ ] Angular adapter

eslint.config.js

@@ -9,6 +9,7 @@ export default defineConfig([
   tseslint.configs.recommended,
   {
     rules: {
+      "@typescript-eslint/no-namespace": "off",
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/no-unused-vars': ['warn', {
         argsIgnorePattern: '^_',

package.json

@@ -44,7 +44,8 @@
   "peerDependencies": {
     "@bprogress/core": "^1.0.0",
     "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0",
-    "vue": "^3.0.0"
+    "vue": "^3.0.0",
+    "solid-js": "^1.0.0"
   },
   "files": [
     "dist"
@@ -65,9 +66,9 @@
       "require": "./dist/server.cjs"
     },
     "./inertia": {
-      "types": "./dist/extensions/inertia.d.ts",
-      "import": "./dist/extensions/inertia.js",
-      "require": "./dist/extensions/inertia.cjs"
+      "types": "./dist/extensions/inertia/index.d.ts",
+      "import": "./dist/extensions/inertia/index.js",
+      "require": "./dist/extensions/inertia/index.cjs"
     },
     "./bprogress": {
       "types": "./dist/extensions/bprogress.d.ts",
@@ -83,6 +84,11 @@
       "types": "./dist/adapters/vue.d.ts",
       "import": "./dist/adapters/vue.js",
       "require": "./dist/adapters/vue.cjs"
+    },
+    "./solid-js": {
+      "types": "./dist/adapters/solid-js.d.ts",
+      "import": "./dist/adapters/solid-js.js",
+      "require": "./dist/adapters/solid-js.cjs"
     }
   }
 }

src/adapters/solid-js.ts

@@ -0,0 +1,66 @@
+import { getPage, subscribe, useForm as useVortexForm, useRemember as useVortexRemember, Page, link as vortexLink, visible as vortexVisible } from '../index';
+import { type Signal } from "../signals";
+import { type Action } from '../dom';
+import { createEffect, createSignal, onCleanup } from "solid-js";
+import { createMutable, modifyMutable, reconcile } from "solid-js/store";
+
+
+type ExtractAccessorReturn<F> = F extends (
+  node: any,
+  accessor: () => infer R
+) => any ? R : never;
+
+export const [usePage] = convertSignal({ get: getPage, subscribe } as Signal<Page>)
+
+export const link = convertActionToDirective(vortexLink)
+
+export const visible = convertActionToDirective(vortexVisible)
+
+declare module "solid-js" {
+    namespace JSX {
+        interface Directives {
+            link?: ExtractAccessorReturn<typeof link>
+            visible?: ExtractAccessorReturn<typeof visible>
+        }
+    }
+}
+
+export function useForm<T extends object>(data: T | (() => T), rememberKey?: string) {
+    return convertSignalToMutable(useVortexForm(data, rememberKey))
+}
+
+export function useRemember<T extends object>(data: T, key: string = 'default') {
+    return convertSignalToMutable(useVortexRemember(data, key))
+}
+
+function convertSignal<T>({ get, subscribe }: Signal<T>) {
+    const signal = createSignal(get())
+    subscribe(signal[1])
+    return signal
+}
+
+function convertSignalToMutable<T extends object>({ get, subscribe }: Signal<T>) {
+    const mutable = createMutable(get())
+    subscribe((data) => modifyMutable(mutable, reconcile(data)))
+    return mutable
+}
+
+function convertActionToDirective<E extends HTMLElement,T>(action: Action<E, T>) {
+    return (node: E, accessor: () => T) => {
+        const current = action(node, accessor())
+
+        if (current?.destroy) {
+            onCleanup(current.destroy)
+        }
+
+        if (current?.update) {
+            createEffect(() => {
+                current?.update?.(accessor())
+            })
+        } else {
+            createEffect(() => {
+                accessor()
+            })
+        }
+    }
+}

src/adapters/svelte.ts

@@ -1,6 +1,6 @@
 import { getPage, subscribe, useForm as useVortexForm, useRemember as useVortexRemember } from '../index'
-import { readable, Writable } from 'svelte/store'
-import { Signal } from '../signals'
+import { readable, type Writable } from 'svelte/store'
+import { type Signal } from '../signals'
 export { link, visible } from '../index'
 
 export const page = readable(getPage(), subscribe)

src/adapters/vue.ts

@@ -1,16 +1,23 @@
-import { getPage, Page, subscribe, useForm as useVortexForm, useRemember as useVortexRemember } from '../index'
+import { getPage, Page, subscribe, useForm as useVortexForm, useRemember as useVortexRemember, link as vortexLink, visible as vortexVisible } from '../index'
 import { reactive, onBeforeUnmount, Reactive, Directive, Plugin  } from 'vue'
-import { Signal } from '../signals'
-import { link as vortexLink, visible as vortexVisible, Action } from '../dom'
+import { type Signal } from '../signals'
+import { type Action } from '../dom'
 
 const link = convertActionToDirective(vortexLink)
 const visible = convertActionToDirective(vortexVisible)
 
+declare module '@vue/runtime-core' {
+    export interface GlobalDirectives {
+        link: typeof link
+        visible: typeof visible
+    }
+}
+
 export const vortex: Plugin = {
     install: (app) => app.directive('link', link).directive('visible', visible)
 }
 
-export function usePage() {
+export function usePage(): Page {
     return convertSignalToReactive({ get: getPage, subscribe } as Signal<Page>)
 }
 

src/client.ts

@@ -29,9 +29,6 @@ export async function createVortex(setup: (el: HTMLElement, page: Page, hydrate:
 
     const dispose = await setup(element, page, !!element.dataset?.ssr);
 
-    delete element.dataset.page
-    delete element.dataset.ssr
-
     return () => {
         if (dispose instanceof Function) {
             dispose();

src/dom.ts

@@ -14,7 +14,11 @@ type PrefetchLinkConfig = {
     cacheFor?: number | string | (number | string)[]
 }
 
-export const link: Action<HTMLElement, RouterRequestConfig & PrefetchLinkConfig> = (node, options = {})  => {
+export const link: Action<HTMLElement, RouterRequestConfig & PrefetchLinkConfig | boolean> = (node, options = true)  => {
+    if (options === true) {
+        options = {}
+    }
+
     function mergeOptions(options: RouterRequestConfig & PrefetchLinkConfig): { options: RouterRequestConfig } & PrefetchLinkConfig {
         options.method = options.method || 'get'
         options.url = options.url || (node as HTMLAnchorElement).href || ''
@@ -46,7 +50,7 @@ export const link: Action<HTMLElement, RouterRequestConfig & PrefetchLinkConfig>
 
     function navigate(event) {
         event.preventDefault()
-        axios.request(options)
+        axios.request(options as RouterRequestConfig & PrefetchLinkConfig)
     }
 
     const prefetch = () => axios.request({ ...options, prefetch: config.cacheFor })
@@ -81,14 +85,18 @@ export const link: Action<HTMLElement, RouterRequestConfig & PrefetchLinkConfig>
         }
     }
 
-    let config = mergeOptions(options)
+    let config = mergeOptions(options as RouterRequestConfig & PrefetchLinkConfig)
     reinstallPrefetchEvents()
 
     node.addEventListener('click', navigate)
 
     return {
         update(newOptions) {
-            config = mergeOptions(newOptions)
+            if (newOptions === true) {
+                newOptions = {}
+            }
+
+            config = mergeOptions(newOptions as RouterRequestConfig & PrefetchLinkConfig)
             reinstallPrefetchEvents()
         },
         destroy() {
@@ -98,16 +106,16 @@ export const link: Action<HTMLElement, RouterRequestConfig & PrefetchLinkConfig>
 }
 
 type VisibleConfig = {
-    vortex: VortexConfig,
+    vortex: VortexConfig | boolean,
     buffer?: number,
     always?: boolean,
 }
 
-export const visible: Action<HTMLElement, VisibleConfig | VortexConfig> = (node, rawOptions) => {
-    function mergeOptions(options: VisibleConfig | VortexConfig): VisibleConfig {
-        return !options.vortex
-            ? { buffer: 0, always: false, vortex: options  }
-            : { buffer: 0, always: false, ...options as VisibleConfig }
+export const visible: Action<HTMLElement, VisibleConfig | VortexConfig | boolean> = (node, rawOptions = true) => {
+    function mergeOptions(options: VisibleConfig | VortexConfig | boolean): VisibleConfig {
+        return options === true || !(options as VortexConfig).vortex
+            ? { buffer: 0, always: true, vortex: options  }
+            : { buffer: 0, always: true, ...options as VisibleConfig }
     }
 
     let options: VisibleConfig = mergeOptions(rawOptions)

vite.config.ts

@@ -21,15 +21,16 @@ export default defineConfig({
                 "index": resolve(__dirname, 'src/index.ts'),
                 "server": resolve(__dirname, 'src/server.ts'),
                 // Extensions
-                "extensions/inertia": resolve(__dirname, 'src/extensions/inertia/index.ts'),
+                "extensions/inertia/index": resolve(__dirname, 'src/extensions/inertia/index.ts'),
                 "extensions/bprogress": resolve(__dirname, 'src/extensions/bprogress.ts'),
                 // Adapters
                 "adapters/svelte": resolve(__dirname, 'src/adapters/svelte.ts'),
                 "adapters/vue": resolve(__dirname, 'src/adapters/vue.ts'),
+                "adapters/solid-js": resolve(__dirname, 'src/adapters/solid-js.ts'),
             },
         },
         rollupOptions: {
-            external: [...builtinModules, /^node:/, 'axios', /^\@bprogress\/core/, 'svelte', 'vue'],
+            external: [...builtinModules, /^node:/, 'axios', /^\@bprogress\/core/, /^svelte/, 'vue', /^solid\-js/],
         }
     },
 })