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

package/src/plugin/create.ts

@@ -0,0 +1,270 @@
+export type SolidAppSourceOptions = {
+  appId: string;
+  title: string;
+  entryName?: string;
+  appRole?: 'shell' | 'vertical';
+  capabilities: {
+    ssr: boolean;
+    federation: boolean;
+  };
+};
+
+export type SolidAppSourceArtifact = {
+  path: string;
+  content: string;
+};
+
+export type SolidAppSources = {
+  sourceExtension: '.tsx';
+  jsxImportSource: '@solidjs/web';
+  artifacts: SolidAppSourceArtifact[];
+};
+
+/** The adapter owns the entry, route tree, document and hydration bootstrap. */
+export function generateSolidAppSources(
+  options: SolidAppSourceOptions,
+): SolidAppSources {
+  const entryName = options.entryName ?? 'main';
+  if (entryName !== 'main') {
+    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 (
+    typeof options.capabilities.ssr !== 'boolean' ||
+    typeof options.capabilities.federation !== 'boolean'
+  ) {
+    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 async function action({ request }: DataHandlerInput) {
+  const form = await request.formData();
+  const name = form.get('name');
+  if (typeof name !== 'string' || !name.trim())
+    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>
+  );
+}
+`,
+      },
+    ],
+  };
+}

package/src/plugin/index.ts

@@ -0,0 +1,72 @@
+import path from 'node:path';
+import {
+  defineRendererAdapter,
+  type NativeRendererAdapter,
+  nativeRendererDependencies,
+} from '@modern-js/renderer-core/adapter';
+import { compilerArtifacts } from '../manifest';
+import { pluginSolidRenderer, pluginSourceDirectory } from './compiler';
+import { generateSolidAppSources } from './create';
+import { solidProfile } from './profile';
+
+/** The build-side Solid renderer adapter UltraModern loads for `renderer: 'solid'`. */
+export const rendererAdapter: NativeRendererAdapter<'solid'> =
+  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',
+        'seroval',
+        'seroval-plugins',
+        '@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: () =>
+      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,
+          '@solidjs/babel-plugin': profile.compiler.version,
+        },
+      }),
+      generateAppSources: generateSolidAppSources,
+    },
+  });

package/src/plugin/lazy-modules.cjs

@@ -0,0 +1,146 @@
+const fs = require('node:fs');
+const path = require('node:path');
+const { createHash } = require('node:crypto');
+const babel = require('@babel/core');
+const compiler = require('@solidjs/compiler');
+
+const markerPrefix = '__SOLID_LAZY_MODULE__:';
+const extensions = ['.tsx', '.ts', '.jsx', '.js'];
+
+function resolveLazyModule(
+  filename,
+  specifier,
+  projectRoot,
+  sourceExtensions = extensions,
+  dependencies,
+) {
+  const split = specifier.search(/[?#]/);
+  const pathname = split < 0 ? specifier : specifier.slice(0, split);
+  const suffix = split < 0 ? '' : specifier.slice(split);
+  if (!pathname.startsWith('.') && !path.isAbsolute(pathname)) {
+    throw new Error(
+      `Solid lazy import ${specifier} in ${filename} must name a static relative or absolute application module. Render Module Federation remotes with federatedComponent('${pathname}') from @modern-js/renderer-solid/federation`,
+    );
+  }
+  const requested = path.resolve(path.dirname(filename), pathname);
+  const requestedRelative = path.relative(projectRoot, requested);
+  if (
+    requestedRelative === '..' ||
+    requestedRelative.startsWith(`..${path.sep}`) ||
+    path.isAbsolute(requestedRelative)
+  ) {
+    throw new Error(
+      `Solid lazy module ${requested} must belong to the application source tree`,
+    );
+  }
+  const candidates = [
+    requested,
+    ...sourceExtensions.map(extension => requested + extension),
+    ...sourceExtensions.map(extension =>
+      path.join(requested, `index${extension}`),
+    ),
+  ];
+  const resolved = candidates.find(
+    candidate => fs.existsSync(candidate) && fs.statSync(candidate).isFile(),
+  );
+  if (!resolved) {
+    for (const candidate of candidates) dependencies?.missing.add(candidate);
+    throw new Error(
+      `Cannot resolve Solid lazy module ${specifier} from ${filename}`,
+    );
+  }
+  dependencies?.files.add(resolved);
+  const relative = path.relative(projectRoot, resolved);
+  if (relative.startsWith(`..${path.sep}`) || path.isAbsolute(relative)) {
+    throw new Error(
+      `Solid lazy module ${resolved} must belong to the application source tree`,
+    );
+  }
+  return {
+    filename: resolved,
+    request: resolved + suffix,
+    key: relative.split(path.sep).join('/') + suffix,
+  };
+}
+
+function markerVisitor(onMarker) {
+  return {
+    StringLiteral(marker) {
+      if (
+        marker.key === 2 &&
+        marker.listKey === 'arguments' &&
+        marker.parentPath.isCallExpression() &&
+        marker.node.value.startsWith(markerPrefix)
+      ) {
+        onMarker(marker, marker.node.value.slice(markerPrefix.length));
+      }
+    },
+  };
+}
+
+function collectLazyModules(
+  projectRoot,
+  entryDirectories = [],
+  sourceExtensions = extensions,
+  dependencies,
+) {
+  const root = path.join(projectRoot, 'src');
+  const found = new Map();
+  const visited = new Set();
+  const walk = directory => {
+    dependencies?.contexts.add(directory);
+    if (!fs.existsSync(directory) || visited.has(directory)) return;
+    visited.add(directory);
+    for (const item of fs
+      .readdirSync(directory, { withFileTypes: true })
+      .sort((a, b) => a.name.localeCompare(b.name))) {
+      const filename = path.join(directory, item.name);
+      if (item.isDirectory()) {
+        if (item.name !== 'node_modules') walk(filename);
+      } else if (
+        /\.[jt]sx?$/.test(item.name) &&
+        !/\.d\.[cm]?ts$/.test(item.name)
+      ) {
+        dependencies?.files.add(filename);
+        try {
+          const source = fs.readFileSync(filename, 'utf8');
+          const lazy = compiler.transformLazy(source, {
+            filename,
+            sourceMap: false,
+          });
+          const ast = babel.parseSync(lazy.code, {
+            filename,
+            babelrc: false,
+            configFile: false,
+            parserOpts: { plugins: ['typescript', 'jsx'] },
+          });
+          babel.traverse(
+            ast,
+            markerVisitor((_marker, specifier) => {
+              const module = resolveLazyModule(
+                filename,
+                specifier,
+                projectRoot,
+                sourceExtensions,
+                dependencies,
+              );
+              found.set(module.key, {
+                ...module,
+                entryName: `solid-lazy-${createHash('sha256').update(module.key).digest('hex').slice(0, 16)}`,
+              });
+            }),
+          );
+        } catch (error) {
+          throw new Error(
+            `Solid lazy discovery failed in ${filename}: ${error instanceof Error ? error.message : String(error)}`,
+            { cause: error },
+          );
+        }
+      }
+    }
+  };
+  for (const directory of [root, ...entryDirectories]) walk(directory);
+  return [...found.values()].sort((a, b) => a.key.localeCompare(b.key));
+}
+
+module.exports = { collectLazyModules, markerVisitor, resolveLazyModule };

package/src/plugin/preserve-import-loader.cjs

@@ -0,0 +1,46 @@
+const babel = require('@babel/core');
+
+/** Preserve the native runtime's browser URL import without patching its file. */
+module.exports = function preserveSolidImport(source, inputMap) {
+  const callback = this.async();
+  let matched = 0;
+  try {
+    const result = babel.transformSync(source, {
+      filename: this.resourcePath,
+      babelrc: false,
+      configFile: false,
+      sourceMaps: true,
+      inputSourceMap:
+        typeof inputMap === 'string' ? JSON.parse(inputMap) : inputMap,
+      plugins: [
+        () => ({
+          visitor: {
+            CallExpression(call) {
+              if (
+                call.node.callee.type === 'Import' &&
+                call.node.arguments.length === 1 &&
+                call.node.arguments[0].type === 'Identifier' &&
+                call.node.arguments[0].name === 'entryUrl'
+              ) {
+                const argument = call.node.arguments[0];
+                argument.leadingComments = [
+                  ...(argument.leadingComments ?? []),
+                  { type: 'CommentBlock', value: ' webpackIgnore: true ' },
+                ];
+                matched++;
+              }
+            },
+          },
+        }),
+      ],
+    });
+    if (matched !== 1 || !result) {
+      throw new Error(
+        'Solid native browser URL import contract changed. Expected one import(entryUrl) in @solidjs/web 2.0.0-rc.13; update and revalidate the compiler integration.',
+      );
+    }
+    callback(null, result.code, result.map);
+  } catch (error) {
+    callback(error);
+  }
+};

package/src/plugin/profile.ts

@@ -0,0 +1,42 @@
+import type { RendererBuildProfile } from '@modern-js/renderer-core/adapter';
+
+export const solidProfile: RendererBuildProfile<'solid'> = {
+  renderer: 'solid',
+  status: 'preview',
+  protocolVersion: 1,
+  minimumNode: '26.10.0',
+  hmr: {
+    editedBoundary: 'may-reset',
+    unaffectedComponents: 'preserved',
+    document: 'preserved',
+    roots: 'single',
+    cleanup: 'exactly-once',
+  },
+  compiler: { name: '@solidjs/compiler', version: '2.0.0-rc.13' },
+  hydration: { name: '@solidjs/web', version: '2.0.0-rc.13' },
+  router: {
+    name: '@modern-js/renderer-solid',
+    version: '3.8.3',
+    coreName: '@tanstack/router-core',
+    coreVersion: '1.171.34',
+  },
+  sourceExtensions: ['.tsx', '.ts', '.jsx', '.js'],
+  jsxImportSource: '@solidjs/web',
+  dependencies: {
+    'solid-js': '2.0.0-rc.13',
+    '@solidjs/web': '2.0.0-rc.13',
+    '@solidjs/signals': '2.0.0-rc.13',
+    '@solidjs/compiler': '2.0.0-rc.13',
+    '@modern-js/renderer-solid': '3.8.3',
+    seroval: '1.6.8',
+    'seroval-plugins': '1.6.8',
+  },
+  capabilities: {
+    worker: true,
+    moduleFederation: true,
+    rsc: false,
+    ssg: true,
+    i18n: true,
+    svgComponent: true,
+  },
+};

package/src/plugin/solid-loader.cjs

@@ -0,0 +1,83 @@
+const babel = require('@babel/core');
+const compiler = require('@solidjs/compiler');
+const { markerVisitor, resolveLazyModule } = require('./lazy-modules.cjs');
+
+module.exports = async function solidLoader(source, inputMap) {
+  const callback = this.async();
+  const { projectRoot, server, isProd, sourceExtensions } = this.getOptions();
+  const filename = this.resourcePath;
+  const maps = [];
+  const step = result => {
+    if (!result || typeof result.code !== 'string') {
+      throw new Error(
+        `The native Solid compiler produced no code for ${filename}`,
+      );
+    }
+    if (result.map)
+      maps.unshift(
+        typeof result.map === 'string' ? JSON.parse(result.map) : result.map,
+      );
+    return result.code;
+  };
+  try {
+    const { default: remapping } = await import('@jridgewell/remapping');
+    if (inputMap)
+      maps.push(typeof inputMap === 'string' ? JSON.parse(inputMap) : inputMap);
+    let code = step(
+      compiler.transformLazy(source, { filename, sourceMap: true }),
+    );
+    code = step(
+      babel.transformSync(code, {
+        filename,
+        babelrc: false,
+        configFile: false,
+        sourceMaps: true,
+        parserOpts: { plugins: ['typescript', 'jsx'] },
+        plugins: [
+          () => ({
+            visitor: markerVisitor((marker, specifier) => {
+              const module = resolveLazyModule(
+                filename,
+                specifier,
+                projectRoot,
+                sourceExtensions,
+              );
+              this.addDependency(module.filename);
+              marker.node.value = module.key;
+            }),
+          }),
+        ],
+      }),
+    );
+    const applicationSource =
+      !filename.includes('/node_modules/') ||
+      filename.includes('/node_modules/.modern-js/solid/');
+    if (!server && !isProd && applicationSource) {
+      code = step(
+        compiler.transformRefresh(code, {
+          filename,
+          bundler: 'standard',
+          importSource: 'solid-js/refresh',
+          jsx: false,
+          fixRender: true,
+          granular: true,
+          sourceMap: true,
+        }),
+      );
+    }
+    code = step(
+      compiler.transform(code, {
+        filename,
+        moduleName: '@solidjs/web',
+        generate: server ? 'ssr' : 'dom',
+        hydratable: true,
+        dev: !isProd,
+        sourceMap: true,
+      }),
+    );
+    const map = maps.length ? remapping(maps, () => null) : undefined;
+    callback(null, code, map);
+  } catch (error) {
+    callback(error);
+  }
+};

package/src/plugin/svg-component-template.cjs

@@ -0,0 +1,19 @@
+// Solid sets unknown SVG props as attributes, accepts `class`, and renders
+// `innerHTML` as children during SSR and hydration.
+module.exports = ({
+  attributes,
+  markup,
+  origin,
+}) => `/** @jsxImportSource @solidjs/web */
+// Generated by UltraModern from ${origin}. Do not edit.
+import type { JSX } from '@solidjs/web';
+
+const attributes: { readonly [name: string]: string } = ${attributes};
+const markup = ${markup};
+
+export default function SvgComponent(
+  props: { readonly [name: string]: unknown },
+): JSX.Element {
+  return <svg {...attributes} {...props} innerHTML={markup} />;
+}
+`;