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

package/dist/esm-node/plugin/compiler.mjs

@@ -0,0 +1,67 @@
+import node_fs from "node:fs";
+import { createRequire } from "node:module";
+import node_path from "node:path";
+import { fileURLToPath } from "node:url";
+import { OCTANE_COMPILER_VERSION, OCTANE_RUNTIME_VERSION, octaneModuleManifestFileName, validateOctaneModuleManifest } from "../manifest.mjs";
+function pluginSourceDirectory() {
+    let directory = node_path.dirname(fileURLToPath(import.meta.url));
+    while(true){
+        const compiler = node_path.join(directory, 'src/plugin');
+        if (node_fs.existsSync(node_path.join(directory, 'package.json')) && node_fs.existsSync(node_path.join(compiler, 'compiler-manifest.cjs'))) return compiler;
+        const parent = node_path.dirname(directory);
+        if (parent === directory) throw new Error('Cannot locate the UltraModern Octane compiler package.');
+        directory = parent;
+    }
+}
+function createOctaneCompilerPlugin(options) {
+    return {
+        name: 'ultramodern:octane:compiler',
+        setup (api) {
+            const directory = pluginSourceDirectory();
+            const require = createRequire(node_path.join(directory, 'index.cjs'));
+            const { OctaneCompilerManifestPlugin } = require('./compiler-manifest.cjs');
+            const appRequire = createRequire(node_path.join(api.context.rootPath, 'package.json'));
+            const { inferRspackEnvironment, OctaneRspackPlugin } = appRequire('@octanejs/rspack-plugin');
+            api.modifyRsbuildConfig((config, { mergeRsbuildConfig })=>mergeRsbuildConfig(config, {
+                    source: {
+                        include: [
+                            /[/\\]@octanejs[/\\]/u
+                        ]
+                    }
+                }));
+            api.modifyRspackConfig((config, { environment: rsbuildEnvironment })=>{
+                const environment = rsbuildEnvironment.name === options.workerEnvironmentName ? 'server' : inferRspackEnvironment(config.target);
+                config.plugins ??= [];
+                config.plugins.push(new OctaneRspackPlugin({
+                    root: api.context.rootPath,
+                    environment,
+                    transpile: false
+                }));
+                config.plugins.push(new OctaneCompilerManifestPlugin({
+                    emitClientManifest: 'client' === environment,
+                    root: api.context.rootPath,
+                    runtimeVersion: OCTANE_RUNTIME_VERSION,
+                    compilerVersion: OCTANE_COMPILER_VERSION,
+                    rendererIdentities: options.rendererIdentities,
+                    manifestFilename: octaneModuleManifestFileName,
+                    validateManifest: validateOctaneModuleManifest
+                }));
+                config.module ??= {};
+                config.module.rules ??= [];
+                config.module.rules.push({
+                    test: /\.tsrx$/u,
+                    type: "javascript/auto",
+                    use: [
+                        {
+                            loader: 'builtin:swc-loader',
+                            options: {
+                                detectSyntax: 'auto'
+                            }
+                        }
+                    ]
+                });
+            });
+        }
+    };
+}
+export { createOctaneCompilerPlugin, pluginSourceDirectory };

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

@@ -0,0 +1,228 @@
+function generateOctaneAppSources(options) {
+    if ((options.entryName ?? 'main') !== 'main') throw new Error('The Octane 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 Octane app template requires an appId and title.');
+    if ('.tsx' !== options.sourceExtension) throw new Error('The Octane app template requires the admitted .tsx source profile. .tsrx generation requires an admitted native template profile.');
+    if ('octane' !== options.jsxImportSource) throw new Error('The Octane app template requires jsxImportSource: "octane" from the admitted profile.');
+    if ('boolean' != typeof options.capabilities.ssr || 'boolean' != typeof options.capabilities.federation) throw new Error('The Octane 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: 'octane',
+        artifacts: [
+            {
+                path: 'src/routes/layout.tsx',
+                content: `import { Link, Outlet } from '@modern-js/renderer-octane/router';
+import Stable from '../components/stable';
+import './index.css';
+
+const appTitle = ${title};
+
+export default function Layout() {
+  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 {
+  Link,
+  useLoaderData,
+  useOctaneRouteAction,
+} from '@modern-js/renderer-octane/router';
+import { useActionState } from 'octane';
+import Counter from '../components/counter';
+
+const appId = ${appId};
+const appTitle = ${title};
+
+export default function HomePage() {
+  const data = useLoaderData({ strict: false });
+  const submit = useOctaneRouteAction();
+  const [result, action, pending] = useActionState(submit, undefined);
+  return (
+    <section data-app-id={appId} data-testid="native-route" data-renderer="octane">
+      <h1>{appTitle}</h1>
+      <Counter />
+      <pre data-testid="native-loader-value">{JSON.stringify(data)}</pre>
+      <form action={action}>
+        <label>
+          Name <input name="name" />
+        </label>
+        <button type="submit" disabled={pending}>
+          Save
+        </button>
+        <button type="submit" name="intent" value="redirect">
+          Save and redirect
+        </button>
+      </form>
+      <pre data-testid="native-action-value">{JSON.stringify(result)}</pre>
+      <Link to="/about">Open native about route</Link>
+    </section>
+  );
+}
+`
+            },
+            {
+                path: 'src/routes/page.head.ts',
+                content: `import type { FileSystemRouteModule } from '@modern-js/renderer-octane/router';
+
+export const head: NonNullable<FileSystemRouteModule['head']> = () => ({
+  meta: [
+    { title: ${title} },
+    { name: 'description', content: 'Built with the native Octane renderer' },
+  ],
+});
+`
+            },
+            {
+                path: 'src/routes/about/page.tsx',
+                content: `import { Link } from '@modern-js/renderer-octane/router';
+
+export default function AboutPage() {
+  return (
+    <section data-testid="native-about">
+      <h1>Native Octane navigation</h1>
+      <Link to="/">Home</Link>
+    </section>
+  );
+}
+`
+            },
+            {
+                path: 'src/routes/about/page.head.ts',
+                content: `import type { FileSystemRouteModule } from '@modern-js/renderer-octane/router';
+
+export const head: NonNullable<FileSystemRouteModule['head']> = () => ({
+  meta: [
+    { title: ${aboutTitle} },
+    { name: 'description', content: 'Built with the native Octane renderer' },
+  ],
+});
+`
+            },
+            {
+                path: 'src/components/counter.tsx',
+                content: `import { useState } from 'octane';
+
+export default function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <section data-testid="native-edited-component">
+      <span data-testid="native-hmr-marker">Counter before native edit</span>
+      <button type="button" onClick={() => setCount(value => value + 1)}>
+        Increment
+      </button>
+      <output data-testid="native-count">{count}</output>
+    </section>
+  );
+}
+`
+            },
+            {
+                path: 'src/components/stable.tsx',
+                content: `import { useState } from 'octane';
+
+export default function Stable() {
+  const [count, setCount] = useState(0);
+  return (
+    <section data-testid="native-unaffected-component">
+      <button type="button" onClick={() => setCount(value => value + 1)}>
+        Increment stable state
+      </button>
+      <output data-testid="native-unaffected-count">{count}</output>
+    </section>
+  );
+}
+`
+            },
+            {
+                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, { headers: { location: '/about' }, status: 302 });
+  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, {
+        headers: {
+          location: '/about',
+          'set-cookie': 'conformance-saved=1; Path=/; SameSite=Lax',
+        },
+        status: 303,
+      });
+    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-octane/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-octane/router';
+
+const NotFound: NotFoundRouteComponent = () => (
+  <section data-testid="native-not-found">
+    <h1>Page not found</h1>
+  </section>
+);
+
+export default NotFound;
+`
+            }
+        ]
+    };
+}
+export { generateOctaneAppSources };

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

@@ -0,0 +1,103 @@
+import node_path from "node:path";
+import { defineRendererAdapter, nativeRendererDependencies } from "@modern-js/renderer-core/adapter";
+import { compilerArtifacts } from "../manifest.mjs";
+import { createOctaneCompilerPlugin, pluginSourceDirectory } from "./compiler.mjs";
+import { generateOctaneAppSources } from "./create.mjs";
+import { octaneProfile } from "./profile.mjs";
+import { assertOctaneEntrySource } from "./source.mjs";
+const rendererAdapter = defineRendererAdapter({
+    name: 'octane',
+    kind: 'native',
+    profile: octaneProfile,
+    routerFrameworks: [
+        'octane'
+    ],
+    runtime: {
+        package: 'octane',
+        bootstrap: '@modern-js/renderer-octane',
+        entryClient: '@modern-js/renderer-octane/entry-client',
+        entryServer: '@modern-js/renderer-octane/entry-server',
+        router: '@modern-js/renderer-octane/router',
+        i18n: '@modern-js/renderer-octane/i18n',
+        manifest: '@modern-js/renderer-octane/manifest'
+    },
+    federation: {
+        library: 'module',
+        ssr: true,
+        shared: [
+            'octane',
+            'octane/',
+            'octane/internal/context',
+            'octane/internal/signal-read',
+            'octane/signals',
+            '@octanejs/tanstack-router',
+            '@octanejs/tanstack-router/',
+            '@modern-js/renderer-octane',
+            '@modern-js/renderer-octane/',
+            '@modern-js/renderer-octane/router',
+            '@modern-js/renderer-octane/federation',
+            '@modern-js/renderer-core',
+            '@modern-js/renderer-core/',
+            '@tanstack/router-core',
+            '@tanstack/history',
+            'seroval',
+            'seroval-plugins'
+        ],
+        sharedByEnvironment: {
+            client: {
+                'octane/internal/client': 'octane/internal/client',
+                'octane/signals/client': 'octane/signals/client',
+                'octane/profiling': 'octane/profiling',
+                'octane/hydration/streamed-signals': 'octane/hydration/streamed-signals',
+                '@modern-js/renderer-octane/client': '@modern-js/renderer-octane/client'
+            },
+            server: {
+                octane: 'octane/server',
+                'octane/server': 'octane/server',
+                'octane/internal/server': 'octane/internal/server',
+                'octane/signals/server': 'octane/signals/server'
+            }
+        }
+    },
+    worker: {
+        nativeDocuments: true,
+        rsc: false
+    },
+    lazyStyles: 'document',
+    entryClient: {
+        declarations: 'declare const __webpack_hash__: string;\n',
+        fields: {
+            nativeHydrationBuildId: '__webpack_hash__'
+        }
+    },
+    svgComponentTemplate: ()=>node_path.join(pluginSourceDirectory(), 'svg-component-template.cjs'),
+    compiler: createOctaneCompilerPlugin,
+    artifacts: compilerArtifacts,
+    assertSupportedSource: assertOctaneEntrySource,
+    create: {
+        templates: {
+            federation: true,
+            workers: true
+        },
+        dependencies: (profile, { typescriptVersion })=>({
+                frameworkDependencies: [
+                    '@modern-js/renderer-core',
+                    '@modern-js/renderer-octane'
+                ],
+                dependencies: nativeRendererDependencies(profile),
+                devDependencies: {
+                    [profile.compiler.name]: profile.dependencies[profile.compiler.name] ?? profile.compiler.version,
+                    typescript: typescriptVersion
+                },
+                typecheckCommand: 'octane-tsc --noEmit --project tsconfig.json',
+                tsconfig: {
+                    tsrx: {
+                        compiler: 'octane/compiler/volar',
+                        platform: 'web'
+                    }
+                }
+            }),
+        generateAppSources: generateOctaneAppSources
+    }
+});
+export { rendererAdapter };

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

@@ -0,0 +1,53 @@
+const octaneProfile = {
+    renderer: 'octane',
+    status: 'preview',
+    protocolVersion: 1,
+    minimumNode: '26.12.0',
+    hmr: {
+        editedBoundary: 'may-reset',
+        unaffectedComponents: 'preserved',
+        document: 'preserved',
+        roots: 'single',
+        cleanup: 'exactly-once'
+    },
+    compiler: {
+        name: '@octanejs/rspack-plugin',
+        version: '0.2.4'
+    },
+    hydration: {
+        name: 'octane',
+        version: '0.13.8'
+    },
+    router: {
+        name: '@octanejs/tanstack-router',
+        version: '0.2.10',
+        coreName: '@tanstack/router-core',
+        coreVersion: '1.171.38'
+    },
+    sourceExtensions: [
+        '.tsx',
+        '.tsrx',
+        '.ts',
+        '.js'
+    ],
+    jsxImportSource: 'octane',
+    dependencies: {
+        '@tsrx/oxc': '0.20.0',
+        octane: 'https://github.com/BleedingDev/octane/releases/download/ultramodern-octane-2383d2ab1e70/octane-0.13.8.tgz',
+        '@octanejs/tanstack-router': 'https://github.com/BleedingDev/octane/releases/download/ultramodern-octane-2383d2ab1e70/octanejs-tanstack-router-0.2.10.tgz',
+        '@octanejs/rspack-plugin': 'https://github.com/BleedingDev/octane/releases/download/ultramodern-octane-2383d2ab1e70/octanejs-rspack-plugin-0.2.4.tgz',
+        '@tanstack/router-core': 'https://github.com/BleedingDev/router/releases/download/ultramodern-router-core-585d3233f7f5/tanstack-router-core-1.171.38.tgz',
+        '@modern-js/renderer-octane': '3.8.3',
+        seroval: '1.6.9',
+        'seroval-plugins': '1.6.9'
+    },
+    capabilities: {
+        worker: true,
+        moduleFederation: true,
+        rsc: false,
+        ssg: true,
+        i18n: true,
+        svgComponent: true
+    }
+};
+export { octaneProfile };

package/dist/esm-node/plugin/source.mjs

@@ -0,0 +1,7 @@
+import promises from "node:fs/promises";
+import node_path from "node:path";
+import { octaneProfile } from "./profile.mjs";
+async function assertOctaneEntrySource(source) {
+    if (source && '.jsx' === node_path.extname(source).toLowerCase() && (await promises.stat(source)).isFile()) throw new Error(`unsupported-renderer-capability: Octane does not support .jsx source: ${source}. Supported source extensions: ${octaneProfile.sourceExtensions.join(', ')}.`);
+}
+export { assertOctaneEntrySource };