@bleedingdev/modern-js-renderer-solid 0.0.0-stage → 3.9.3-ultramodern.10

package/dist/esm-node/plugin/create.js

@@ -0,0 +1,236 @@
+function generateSolidAppSources(options) {
+    const entryName = options.entryName ?? 'main';
+    if ('main' !== entryName) throw new Error('The Solid app template supports the main entry only. The create-time workspace writer places src/modern-app-env.d.ts, src/routes/index.css and the package manifest at the app root regardless of entryName, so it cannot yet route a second entry into src/<entryName>/. Add that entry by hand after generation (mirror src/routes under src/<entryName>/routes) until an admitted native multi-entry create template exists; the native entry generator itself already supports arbitrary entry names.');
+    if (!options.appId.trim() || !options.title.trim()) throw new Error('The Solid app template requires an appId and title.');
+    if ('boolean' != typeof options.capabilities.ssr || 'boolean' != typeof options.capabilities.federation) throw new Error('The Solid app template requires admitted capabilities.');
+    const title = JSON.stringify(options.title);
+    const aboutTitle = JSON.stringify(`${options.title} - About`);
+    const appId = JSON.stringify(options.appId);
+    return {
+        sourceExtension: '.tsx',
+        jsxImportSource: '@solidjs/web',
+        artifacts: [
+            {
+                path: 'src/routes/layout.tsx',
+                content: `import type { JSX } from '@solidjs/web';
+import { Link, Outlet } from '@modern-js/renderer-solid/router';
+import Stable from '../components/Stable';
+import './index.css';
+
+const appTitle = ${title};
+
+export default function Layout(): JSX.Element {
+  return (
+    <main data-testid="native-layout">
+      <header>
+        <p>{appTitle}</p>
+        <nav aria-label="Application">
+          <Link to="/">Home</Link>
+          <Link to="/about">About</Link>
+${options.capabilities.federation ? '          <Link to="/remotes">Federated applications</Link>\n' : ''}
+        </nav>
+      </header>
+      <Stable />
+      <Outlet />
+    </main>
+  );
+}
+`
+            },
+            {
+                path: 'src/routes/page.tsx',
+                content: `import type { JSX } from '@solidjs/web';
+import {
+  ActionForm,
+  Link,
+  useLoaderData,
+  useRouteAction,
+} from '@modern-js/renderer-solid/router';
+import Counter from '../components/Counter';
+
+const appId = ${appId};
+const appTitle = ${title};
+
+export default function HomePage(): JSX.Element {
+  const data = useLoaderData({ strict: false });
+  const action = useRouteAction();
+  return (
+    <section data-app-id={appId} data-testid="native-route" data-renderer="solid">
+      <h1>{appTitle}</h1>
+      <Counter />
+      <pre data-testid="native-loader-value">{JSON.stringify(data())}</pre>
+      <ActionForm action={action}>
+        <label>
+          Name <input name="name" />
+        </label>
+        <button type="submit" disabled={action.pending()}>
+          Save
+        </button>
+        <button type="submit" name="intent" value="redirect">
+          Save and redirect
+        </button>
+      </ActionForm>
+      <pre data-testid="native-action-value">
+        {JSON.stringify(action.outcome())}
+      </pre>
+      <output data-testid="native-action-error">
+        {action.error()?.message}
+      </output>
+      <Link to="/about">Open native about route</Link>
+    </section>
+  );
+}
+`
+            },
+            {
+                path: 'src/routes/page.head.ts',
+                content: `import type { FileSystemRouteModule } from '@modern-js/renderer-solid/router';
+
+export const head: NonNullable<FileSystemRouteModule['head']> = () => ({
+  meta: [
+    { title: ${title} },
+    { name: 'description', content: 'Built with the native Solid renderer' },
+  ],
+});
+`
+            },
+            {
+                path: 'src/routes/about/page.tsx',
+                content: `import type { JSX } from '@solidjs/web';
+import { Link } from '@modern-js/renderer-solid/router';
+
+export default function AboutPage(): JSX.Element {
+  return (
+    <section data-testid="native-about">
+      <h1>Native Solid navigation</h1>
+      <Link to="/">Home</Link>
+    </section>
+  );
+}
+`
+            },
+            {
+                path: 'src/routes/about/page.head.ts',
+                content: `import type { FileSystemRouteModule } from '@modern-js/renderer-solid/router';
+
+export const head: NonNullable<FileSystemRouteModule['head']> = () => ({
+  meta: [
+    { title: ${aboutTitle} },
+    { name: 'description', content: 'Built with the native Solid renderer' },
+  ],
+});
+`
+            },
+            {
+                path: 'src/routes/page.data.ts',
+                content: `import type { DataHandlerInput } from '@modern-js/renderer-core/data';
+
+export function loader({ request }: DataHandlerInput) {
+  const url = new URL(request.url);
+  if (url.searchParams.get('case') === 'not-found')
+    throw new Response('Native route not found', { status: 404 });
+  if (url.searchParams.get('case') === 'error')
+    throw new Error('Native loader failure');
+  if (url.searchParams.get('case') === 'redirect')
+    return new Response(null, { status: 302, headers: { location: '/about' } });
+  return {
+    message: 'Native loader value',
+    privateValue: request.headers.get('x-conformance-private'),
+  };
+}
+
+export function action({ request }: DataHandlerInput) {
+  return request.formData().then(form => {
+    const name = form.get('name');
+    if (typeof name !== 'string' || name.trim().length === 0)
+      return Response.json(
+        { fieldErrors: { name: 'Name required' } },
+        { status: 422 },
+      );
+    if (form.get('intent') === 'redirect')
+      return new Response(null, {
+        status: 303,
+        headers: {
+          location: '/about',
+          'set-cookie': 'conformance-saved=1; Path=/; SameSite=Lax',
+        },
+      });
+    if (form.get('intent') === 'throw') throw new Error('Native action failure');
+    return {
+      saved: name,
+      privateValue: request.headers.get('x-conformance-private'),
+    };
+  });
+}
+`
+            },
+            {
+                path: 'src/routes/error.tsx',
+                content: `import type { ErrorRouteComponent } from '@modern-js/renderer-solid/router';
+
+const ErrorBoundary: ErrorRouteComponent = props => (
+  <section data-testid="native-error">
+    <h1>Something went wrong</h1>
+    <output>
+      {props.error instanceof Error ? props.error.message : String(props.error)}
+    </output>
+  </section>
+);
+
+export default ErrorBoundary;
+`
+            },
+            {
+                path: 'src/routes/not-found.tsx',
+                content: `import type { NotFoundRouteComponent } from '@modern-js/renderer-solid/router';
+
+const NotFound: NotFoundRouteComponent = () => (
+  <section data-testid="native-not-found">
+    <h1>Page not found</h1>
+  </section>
+);
+
+export default NotFound;
+`
+            },
+            {
+                path: 'src/components/Counter.tsx',
+                content: `import type { JSX } from '@solidjs/web';
+import { createSignal } from 'solid-js';
+
+export default function Counter(): JSX.Element {
+  const [count, setCount] = createSignal(0);
+  return (
+    <section data-testid="native-edited-component">
+      <span data-testid="native-hmr-marker">Counter before native edit</span>
+      <button type="button" onClick={() => setCount(count() + 1)}>
+        Increment
+      </button>
+      <output data-testid="native-count">{count()}</output>
+    </section>
+  );
+}
+`
+            },
+            {
+                path: 'src/components/Stable.tsx',
+                content: `import type { JSX } from '@solidjs/web';
+import { createSignal } from 'solid-js';
+
+export default function Stable(): JSX.Element {
+  const [count, setCount] = createSignal(0);
+  return (
+    <section data-testid="native-unaffected-component">
+      <button type="button" onClick={() => setCount(count() + 1)}>
+        Increment stable state
+      </button>
+      <output data-testid="native-unaffected-count">{count()}</output>
+    </section>
+  );
+}
+`
+            }
+        ]
+    };
+}
+export { generateSolidAppSources };

package/dist/esm-node/plugin/index.js

@@ -0,0 +1,70 @@
+import node_path from "node:path";
+import { defineRendererAdapter, nativeRendererDependencies } from "@modern-js/renderer-core/adapter";
+import { compilerArtifacts } from "../manifest.js";
+import { pluginSolidRenderer, pluginSourceDirectory } from "./compiler.js";
+import { generateSolidAppSources } from "./create.js";
+import { solidProfile } from "./profile.js";
+const rendererAdapter = defineRendererAdapter({
+    name: 'solid',
+    kind: 'native',
+    profile: solidProfile,
+    routerFrameworks: [
+        'solid'
+    ],
+    runtime: {
+        package: 'solid-js',
+        bootstrap: '@modern-js/renderer-solid',
+        entryClient: '@modern-js/renderer-solid/entry-client',
+        entryServer: '@modern-js/renderer-solid/entry-server',
+        router: '@modern-js/renderer-solid/router',
+        i18n: '@modern-js/renderer-solid/i18n',
+        manifest: '@modern-js/renderer-solid/manifest'
+    },
+    federation: {
+        library: 'module',
+        ssr: true,
+        shared: [
+            'solid-js',
+            '@solidjs/web',
+            '@solidjs/signals',
+            '@modern-js/renderer-solid',
+            '@modern-js/renderer-solid/client',
+            '@modern-js/renderer-solid/router',
+            '@modern-js/renderer-solid/federation',
+            '@modern-js/renderer-core',
+            '@modern-js/renderer-core/',
+            '@tanstack/router-core',
+            '@tanstack/history'
+        ]
+    },
+    worker: {
+        nativeDocuments: true,
+        rsc: false
+    },
+    lazyStyles: 'renderer',
+    svgComponentTemplate: ()=>node_path.join(pluginSourceDirectory(), 'svg-component-template.cjs'),
+    compiler: pluginSolidRenderer,
+    artifacts: compilerArtifacts,
+    create: {
+        templates: {
+            federation: true,
+            workers: false
+        },
+        dependencies: (profile)=>({
+                frameworkDependencies: [
+                    '@modern-js/renderer-core',
+                    '@modern-js/renderer-solid'
+                ],
+                dependencies: {
+                    ...nativeRendererDependencies(profile),
+                    'solid-js': profile.hydration.version,
+                    '@solidjs/signals': profile.hydration.version
+                },
+                devDependencies: {
+                    [profile.compiler.name]: profile.compiler.version
+                }
+            }),
+        generateAppSources: generateSolidAppSources
+    }
+});
+export { rendererAdapter };

package/dist/esm-node/plugin/profile.js

@@ -0,0 +1,51 @@
+const solidProfile = {
+    renderer: 'solid',
+    status: 'preview',
+    protocolVersion: 1,
+    minimumNode: '26.12.0',
+    hmr: {
+        editedBoundary: 'may-reset',
+        unaffectedComponents: 'preserved',
+        document: 'preserved',
+        roots: 'single',
+        cleanup: 'exactly-once'
+    },
+    compiler: {
+        name: '@solidjs/compiler',
+        version: '2.0.0-rc.15'
+    },
+    hydration: {
+        name: '@solidjs/web',
+        version: '2.0.0-rc.15'
+    },
+    router: {
+        name: '@modern-js/renderer-solid',
+        version: '3.8.3',
+        coreName: '@tanstack/router-core',
+        coreVersion: '1.171.38'
+    },
+    sourceExtensions: [
+        '.tsx',
+        '.ts',
+        '.jsx',
+        '.js'
+    ],
+    jsxImportSource: '@solidjs/web',
+    dependencies: {
+        '@tanstack/router-core': 'https://github.com/BleedingDev/router/releases/download/ultramodern-router-core-585d3233f7f5/tanstack-router-core-1.171.38.tgz',
+        'solid-js': '2.0.0-rc.15',
+        '@solidjs/web': '2.0.0-rc.15',
+        '@solidjs/signals': '2.0.0-rc.15',
+        '@solidjs/compiler': '2.0.0-rc.15',
+        '@modern-js/renderer-solid': '3.8.3'
+    },
+    capabilities: {
+        worker: true,
+        moduleFederation: true,
+        rsc: false,
+        ssg: true,
+        i18n: true,
+        svgComponent: true
+    }
+};
+export { solidProfile };

package/dist/esm-node/route-completion.js

@@ -0,0 +1,161 @@
+import { DataProtocolError } from "@modern-js/renderer-core/data";
+import { Dynamic } from "@solidjs/web";
+import { createEffect, createMemo, createSignal, onCleanup } from "solid-js";
+import { createRouter, preparePublicContextData, useMatch } from "./router-binding/index.js";
+import { assertNativeSerializationOptions, registerPublicRouteDataOwner } from "./router-binding/registryTransfer.js";
+var _m$ = Symbol();
+var _d$ = {
+    get () {
+        const ready = this[_m$];
+        return ready();
+    },
+    enumerable: true,
+    configurable: true
+};
+function _P$(_p) {
+    this[_m$] = _p;
+    Object.defineProperty(this, "component", _d$);
+}
+_P$.prototype = Object.prototype;
+const routeScopes = new WeakMap();
+const routerScopes = new WeakMap();
+function assertManagedRouteData(route) {
+    if (!route) return;
+    if (route.options.loader || route.options.beforeLoad || route.options.context) throw new DataProtocolError("Custom native Solid loader/beforeLoad/context routes are unsupported by the immutable public-data profile; use createFileSystemRouteTree");
+    for (const child of route.children ?? [])assertManagedRouteData(child);
+}
+function registerRouteCompletionScope(route, scope) {
+    routeScopes.set(route, scope);
+}
+const createApplicationRouter = (options)=>{
+    assertNativeSerializationOptions(options);
+    const scope = options.routeTree ? routeScopes.get(options.routeTree) : void 0;
+    if (!scope) assertManagedRouteData(options.routeTree);
+    if (scope && options.routeTree) registerPublicRouteDataOwner(options.routeTree, scope.hydrationOwner, scope.privateRoots);
+    const context = preparePublicContextData(options.context, scope?.hydrationOwner);
+    if (void 0 !== context && (!context || "object" != typeof context || Array.isArray(context))) throw new DataProtocolError("The native Solid router context must be a public record");
+    const router = createRouter({
+        ...options,
+        context
+    });
+    if (scope) {
+        scope.attach(router);
+        routerScopes.set(router, scope);
+    }
+    return router;
+};
+function ownApplicationRouteData(router) {
+    const scope = routerScopes.get(router);
+    if (scope) onCleanup(()=>scope.dispose());
+    else assertManagedRouteData(router.options.routeTree);
+}
+function createRouteCompletionScope(privateRoots = [], session) {
+    const records = new WeakMap();
+    const pending = new Set();
+    const hydration = new AbortController();
+    let router;
+    function begin(signal, cancel) {
+        if (!router) throw new Error("Use createApplicationRouter to own progressive Solid route data");
+        const [failure, setFailure] = createSignal();
+        const native = router;
+        let value;
+        let leases = 0;
+        let settled = false;
+        let failed = false;
+        const stop = ()=>{
+            if (!settled) {
+                pending.delete(stop);
+                if (value && "object" == typeof value) native.clearCache({
+                    filter: (match)=>match.loaderData === value
+                });
+                cancel();
+            }
+        };
+        const fail = (reason)=>{
+            if (failed) return;
+            failed = true;
+            settled = true;
+            pending.delete(stop);
+            if (value && "object" == typeof value) native.clearCache({
+                filter: (match)=>match.loaderData === value
+            });
+            setFailure({
+                reason
+            });
+            cancel();
+        };
+        const record = {
+            failure,
+            acquire () {
+                leases++;
+                let released = false;
+                return ()=>{
+                    if (released) return;
+                    released = true;
+                    if (0 === --leases && !native.state.matches.some((match)=>match.loaderData === value)) stop();
+                };
+            }
+        };
+        return {
+            owner: {
+                signal,
+                fail
+            },
+            publish (publicValue, completion) {
+                value = publicValue;
+                const deferred = value && "object" == typeof value ? Reflect.ownKeys(value).flatMap((key)=>{
+                    const entry = Object.getOwnPropertyDescriptor(value, key);
+                    return entry && !entry.get && entry.value instanceof Promise ? [
+                        entry.value
+                    ] : [];
+                }) : [];
+                if (!completion && 0 === deferred.length) return;
+                if (value && "object" == typeof value) {
+                    records.set(value, record);
+                    pending.add(stop);
+                } else if (completion) throw new DataProtocolError("Progressive route data requires its native value object");
+                if (completion) completion.then(()=>{
+                    settled = true;
+                    pending.delete(stop);
+                }, fail);
+                else Promise.allSettled(deferred).then(()=>{
+                    settled = true;
+                    pending.delete(stop);
+                });
+            }
+        };
+    }
+    return {
+        privateRoots,
+        hydrationOwner: session ?? {
+            signal: hydration.signal,
+            fail: (error)=>hydration.abort(error)
+        },
+        attach (native) {
+            if (router && router !== native) throw new Error("A Solid data scope already owns its native router");
+            router = native;
+        },
+        begin,
+        component (component) {
+            return function() {
+                const record = useMatch({
+                    strict: false,
+                    select: (match)=>match.loaderData && "object" == typeof match.loaderData ? records.get(match.loaderData) : void 0
+                });
+                createEffect(record, (current)=>current?.acquire());
+                const ready = createMemo(()=>{
+                    const failure = record()?.failure();
+                    if (failure) throw failure.reason;
+                    return component;
+                });
+                return Dynamic(new _P$(ready));
+            };
+        },
+        dispose () {
+            hydration.abort();
+            for (const stop of pending)stop();
+            pending.clear();
+        }
+    };
+}
+export { createApplicationRouter, createRouteCompletionScope, ownApplicationRouteData, registerRouteCompletionScope };

package/dist/esm-node/route-data-error.js

@@ -0,0 +1,108 @@
+import { DataProtocolError, assertPublicData } from "@modern-js/renderer-core/data";
+import { RouteDataError } from "@modern-js/renderer-core/router";
+function invalid(message) {
+    throw new DataProtocolError(message);
+}
+function publicFields(value, required, optional = [], allowStackAccessor = false) {
+    const descriptors = Object.getOwnPropertyDescriptors(value);
+    for (const key of Reflect.ownKeys(descriptors)){
+        if ("string" != typeof key || !required.includes(key) && !optional.includes(key)) invalid("Route data errors must not contain undeclared fields");
+        const descriptor = Object.getOwnPropertyDescriptor(value, key);
+        if (descriptor.get || descriptor.set) {
+            if (allowStackAccessor && "stack" === key) continue;
+            invalid("Route data errors must not contain accessors");
+        }
+    }
+    for (const key of required)if (!Object.hasOwn(descriptors, key)) invalid("Route data errors are missing a declared field");
+    return descriptors;
+}
+function validateFields(routeId, status, name, message) {
+    if ("string" != typeof routeId || 0 === routeId.length) invalid("Route data errors require a nonempty route identifier");
+    if ("number" != typeof status || !Number.isInteger(status) || status < 200 || status > 599) invalid("Route data errors require a valid public HTTP status");
+    if ("string" != typeof name || "string" != typeof message) invalid("Route data errors require public name and message strings");
+    return {
+        routeId,
+        status,
+        name,
+        message
+    };
+}
+function projectRouteDataError(error, production = true) {
+    if (!error || "object" != typeof error || Object.getPrototypeOf(error) !== RouteDataError.prototype) invalid("Only the exact RouteDataError class has a route error projection");
+    const descriptors = publicFields(error, [
+        "routeId",
+        "status",
+        "data",
+        "name",
+        "message"
+    ], [
+        "stack"
+    ], true);
+    const routeId = descriptors.routeId.value;
+    const status = descriptors.status.value;
+    const name = descriptors.name.value;
+    const message = descriptors.message.value;
+    const fields = validateFields(routeId, status, name, message);
+    const snapshot = {
+        kind: "ultramodern-route-data-error",
+        version: 1,
+        routeId: fields.routeId,
+        status: fields.status,
+        data: descriptors.data.value,
+        error: {
+            name: fields.name,
+            message: fields.message
+        }
+    };
+    const stack = descriptors.stack;
+    if (stack && !stack.get && !stack.set) {
+        if ("string" != typeof stack.value) invalid("Route data error stacks must be strings");
+        if (!production) snapshot.error.stack = stack.value;
+    }
+    assertPublicData(snapshot);
+    return snapshot;
+}
+function plainRecord(value) {
+    if (!value || "object" != typeof value) invalid("Malformed route data error snapshot");
+    const prototype = Object.getPrototypeOf(value);
+    if (prototype !== Object.prototype && null !== prototype) invalid("Route data error snapshots require plain records");
+    return value;
+}
+function restoreRouteDataError(snapshot) {
+    const descriptors = publicFields(plainRecord(snapshot), [
+        "kind",
+        "version",
+        "routeId",
+        "status",
+        "data",
+        "error"
+    ]);
+    if ("ultramodern-route-data-error" !== descriptors.kind.value || 1 !== descriptors.version.value) invalid("Unsupported route data error snapshot");
+    const error = publicFields(plainRecord(descriptors.error.value), [
+        "name",
+        "message"
+    ], [
+        "stack"
+    ]);
+    const routeId = descriptors.routeId.value;
+    const fields = validateFields(routeId, descriptors.status.value, error.name.value, error.message.value);
+    if (error.stack && "string" != typeof error.stack.value) invalid("Route data error stacks must be strings");
+    assertPublicData(snapshot);
+    const restored = new RouteDataError(fields.routeId, {
+        kind: "error",
+        status: fields.status,
+        data: descriptors.data.value,
+        error: {
+            name: fields.name,
+            message: fields.message
+        },
+        thrown: true
+    });
+    if (error.stack) Object.defineProperty(restored, "stack", {
+        value: error.stack.value,
+        configurable: true,
+        writable: true
+    });
+    return restored;
+}
+export { projectRouteDataError, restoreRouteDataError };