@adonisjs/inertia 1.0.0-2 → 1.0.0-20

package/build/app.css.stub

@@ -0,0 +1,39 @@
+{{{
+  exports({ to: app.makePath('inertia/css/app.css') })
+}}}
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body,
+#app {
+  background-color: #F7F8FA;
+  font-family: 'Poppins', sans-serif;
+  color: #46444c;
+  height: 100%;
+  width: 100%;
+}
+
+.title {
+  font-size: 42px;
+  font-weight: 500;
+  color: #5a45ff;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+a {
+  text-decoration: underline;
+  color: #5a45ff;
+}

package/build/chunk-PJEYAPJB.js

@@ -0,0 +1,254 @@
+// src/server_renderer.ts
+var styleFileRE = /\.(css|less|sass|scss|styl|stylus|pcss|postcss)($|\?)/;
+var ServerRenderer = class {
+  constructor(config, vite) {
+    this.config = config;
+    this.vite = vite;
+  }
+  /**
+   * If the module is a style module
+   */
+  #isStyle(mod) {
+    if (styleFileRE.test(mod.url) || mod.id && /\?vue&type=style/.test(mod.id)) {
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Collect CSS files from the module graph recursively
+   */
+  #collectCss(mod, styleUrls, visitedModules, importer) {
+    if (!mod.url)
+      return;
+    if (visitedModules.has(mod.url))
+      return;
+    visitedModules.add(mod.url);
+    if (this.#isStyle(mod) && (!importer || !this.#isStyle(importer))) {
+      if (mod.url.startsWith("/")) {
+        styleUrls.add(mod.url);
+      } else if (mod.url.startsWith("\0")) {
+        styleUrls.add(`/@id/__x00__${mod.url.substring(1)}`);
+      } else {
+        styleUrls.add(`/@id/${mod.url}`);
+      }
+    }
+    mod.importedModules.forEach((dep) => this.#collectCss(dep, styleUrls, visitedModules, mod));
+  }
+  /**
+   * Generate the preload tag for a CSS file
+   */
+  #getPreloadTag(href) {
+    return `<link rel="stylesheet" href="${href}" />`;
+  }
+  /**
+   * Find a page module from the entrypoint module
+   *
+   * The implementation is dumb, we are just looking for the first module
+   * imported by the entrypoint module that matches the regex
+   */
+  #findPageModule(entryMod, pageObject) {
+    const pattern = `${pageObject.component.replace(/\//g, "\\/")}.(tsx|vue|svelte|jsx|ts|js)$`;
+    const regex = new RegExp(pattern);
+    return [...entryMod?.ssrImportedModules || []].find((dep) => regex.test(dep.url));
+  }
+  /**
+   * Render the page on the server
+   *
+   * On development, we use the Vite Runtime API
+   * On production, we just import and use the SSR bundle generated by Vite
+   */
+  async render(pageObject) {
+    let render;
+    let preloadTags = [];
+    const devServer = this.vite?.getDevServer();
+    if (devServer) {
+      const runtime = await this.vite.createRuntime();
+      render = await runtime.executeEntrypoint(this.config.ssr.entrypoint);
+      const entryMod = devServer.moduleGraph.getModuleById(this.config.entrypoint);
+      const pageMod = this.#findPageModule(entryMod, pageObject);
+      if (pageMod)
+        await runtime.executeUrl(pageMod.url);
+      const preloadUrls = /* @__PURE__ */ new Set();
+      const visitedModules = /* @__PURE__ */ new Set();
+      if (pageMod)
+        this.#collectCss(pageMod, preloadUrls, visitedModules);
+      if (entryMod)
+        this.#collectCss(entryMod, preloadUrls, visitedModules);
+      preloadTags = Array.from(preloadUrls).map(this.#getPreloadTag);
+    } else {
+      render = await import(this.config.ssr.bundle);
+    }
+    const result = await render.default(pageObject);
+    const head = preloadTags.concat(result.head);
+    return { head, body: result.body };
+  }
+};
+
+// src/inertia.ts
+var kLazySymbol = Symbol("lazy");
+var Inertia = class {
+  constructor(ctx, config, vite) {
+    this.ctx = ctx;
+    this.config = config;
+    this.vite = vite;
+    this.#sharedData = config.sharedData;
+    this.#serverRenderer = new ServerRenderer(config, vite);
+  }
+  #sharedData = {};
+  #serverRenderer;
+  /**
+   * Check if a value is a lazy prop
+   */
+  #isLazyProps(value) {
+    return typeof value === "object" && value && kLazySymbol in value;
+  }
+  /**
+   * Pick props to resolve based on x-inertia-partial-data header
+   *
+   * If header is not present, resolve all props except lazy props
+   * If header is present, resolve only the props that are listed in the header
+   */
+  #pickPropsToResolve(component, props) {
+    const partialData = this.ctx.request.header("x-inertia-partial-data")?.split(",").filter(Boolean);
+    const partialComponent = this.ctx.request.header("x-inertia-partial-component");
+    let entriesToResolve = Object.entries(props);
+    if (partialData && partialComponent === component) {
+      entriesToResolve = entriesToResolve.filter(([key]) => partialData.includes(key));
+    } else {
+      entriesToResolve = entriesToResolve.filter(([key]) => !this.#isLazyProps(props[key]));
+    }
+    return entriesToResolve;
+  }
+  /**
+   * Resolve the props that will be sent to the client
+   */
+  async #resolvePageProps(component, props) {
+    const entriesToResolve = this.#pickPropsToResolve(component, props);
+    const entries = entriesToResolve.map(async ([key, value]) => {
+      if (typeof value === "function") {
+        return [key, await value(this.ctx)];
+      }
+      if (this.#isLazyProps(value)) {
+        const lazyValue = value[kLazySymbol];
+        return [key, await lazyValue()];
+      }
+      return [key, value];
+    });
+    return Object.fromEntries(await Promise.all(entries));
+  }
+  /**
+   * Build the page object that will be returned to the client
+   *
+   * See https://inertiajs.com/the-protocol#the-page-object
+   */
+  async #buildPageObject(component, pageProps) {
+    return {
+      component,
+      version: this.config.versionCache.getVersion(),
+      props: await this.#resolvePageProps(component, { ...this.#sharedData, ...pageProps }),
+      url: this.ctx.request.url(true)
+    };
+  }
+  /**
+   * If the page should be rendered on the server or not
+   *
+   * The ssr.pages config can be a list of pages or a function that returns a boolean
+   */
+  async #shouldRenderOnServer(component) {
+    const isSsrEnabled = this.config.ssr.enabled;
+    if (!isSsrEnabled)
+      return false;
+    let isSsrEnabledForPage = false;
+    if (typeof this.config.ssr.pages === "function") {
+      isSsrEnabledForPage = await this.config.ssr.pages(this.ctx, component);
+    } else if (this.config.ssr.pages) {
+      isSsrEnabledForPage = this.config.ssr.pages?.includes(component);
+    } else {
+      isSsrEnabledForPage = true;
+    }
+    return isSsrEnabledForPage;
+  }
+  /**
+   * Render the page on the server
+   */
+  async #renderOnServer(pageObject, viewProps) {
+    const { head, body } = await this.#serverRenderer.render(pageObject);
+    return this.ctx.view.render(this.config.rootView, {
+      ...viewProps,
+      page: { ssrHead: head, ssrBody: body, ...pageObject }
+    });
+  }
+  /**
+   * Share data for the current request.
+   * This data will override any shared data defined in the config.
+   */
+  share(data) {
+    this.#sharedData = { ...this.#sharedData, ...data };
+  }
+  /**
+   * Render a page using Inertia
+   */
+  async render(component, pageProps, viewProps) {
+    const pageObject = await this.#buildPageObject(component, pageProps);
+    const isInertiaRequest = !!this.ctx.request.header("x-inertia");
+    if (!isInertiaRequest) {
+      const shouldRenderOnServer = await this.#shouldRenderOnServer(component);
+      if (shouldRenderOnServer)
+        return this.#renderOnServer(pageObject, viewProps);
+      return this.ctx.view.render(this.config.rootView, { ...viewProps, page: pageObject });
+    }
+    this.ctx.response.header("x-inertia", "true");
+    return pageObject;
+  }
+  /**
+   * Create a lazy prop
+   *
+   * Lazy props are never resolved on first visit, but only when the client
+   * request a partial reload explicitely with this value.
+   *
+   * See https://inertiajs.com/partial-reloads#lazy-data-evaluation
+   */
+  lazy(callback) {
+    return { [kLazySymbol]: callback };
+  }
+  /**
+   * This method can be used to redirect the user to an external website
+   * or even a non-inertia route of your application.
+   *
+   * See https://inertiajs.com/redirects#external-redirects
+   */
+  async location(url) {
+    this.ctx.response.header("X-Inertia-Location", url);
+    this.ctx.response.status(409);
+  }
+};
+
+// src/inertia_middleware.ts
+var InertiaMiddleware = class {
+  constructor(config, vite) {
+    this.config = config;
+    this.vite = vite;
+  }
+  async handle(ctx, next) {
+    const { response, request } = ctx;
+    ctx.inertia = new Inertia(ctx, this.config, this.vite);
+    await next();
+    const isInertiaRequest = !!request.header("x-inertia");
+    if (!isInertiaRequest)
+      return;
+    response.header("Vary", "Accept");
+    const method = request.method();
+    if (response.getStatus() === 302 && ["PUT", "PATCH", "DELETE"].includes(method)) {
+      response.status(303);
+    }
+    const version = this.config.versionCache.getVersion().toString();
+    if (method === "GET" && request.header("x-inertia-version", "") !== version) {
+      response.header("x-inertia-location", request.url());
+      response.status(409);
+    }
+  }
+};
+
+export {
+  InertiaMiddleware
+};

package/build/{stubs/config.stub → config.stub}

@@ -7,12 +7,20 @@ export default defineConfig({
   /**
    * Path to the Edge view that will be used as the root view for Inertia responses
    */
-  rootView: 'home',
+  rootView: 'inertia_layout',
 
   /**
    * Data that should be shared with all rendered pages
    */
   sharedData: {
-    errors: (ctx) => ctx.session.flashMessages.get('errors'),
+    errors: (ctx) => ctx.session?.flashMessages.get('errors'),
   },
+
+  /**
+   * Options for the server-side rendering
+   */
+  ssr: {
+    enabled: {{ ssr }},
+    entrypoint: '{{ ssrEntrypoint }}'
+  }
 })

package/build/index.d.ts

@@ -8,11 +8,11 @@ import '@adonisjs/core/http';
  */
 declare function configure(command: Configure): Promise<void>;
 
-declare const stubsRoot: string;
-
 /**
  * Define the Inertia configuration
  */
 declare function defineConfig(config: InertiaConfig): ConfigProvider<ResolvedConfig>;
 
+declare const stubsRoot: string;
+
 export { configure, defineConfig, stubsRoot };

package/build/index.js

@@ -1,70 +1,186 @@
 // configure.ts
-var ADAPTERS = ["Vue 3", "React", "Svelte"];
+import string from "@poppinss/utils/string";
+
+// stubs/main.ts
+import { getDirname } from "@poppinss/utils";
+var stubsRoot = getDirname(import.meta.url);
+
+// configure.ts
+var ADAPTERS = ["vue", "react", "svelte", "solid"];
 var ADAPTERS_INFO = {
-  "Vue 3": {
+  vue: {
+    stubFolder: "vue",
+    appExtension: "ts",
+    componentsExtension: "vue",
     dependencies: [
       { name: "@inertiajs/vue3", isDevDependency: false },
       { name: "vue", isDevDependency: false },
       { name: "@vitejs/plugin-vue", isDevDependency: true }
-    ]
+    ],
+    ssrDependencies: [{ name: "@vue/server-renderer", isDevDependency: false }],
+    viteRegister: {
+      pluginCall: "vue()",
+      importDeclarations: [{ isNamed: false, module: "@vitejs/plugin-vue", identifier: "vue" }]
+    },
+    ssrEntrypoint: "inertia/app/ssr.ts"
   },
-  "React": {
+  react: {
+    stubFolder: "react",
+    appExtension: "tsx",
+    componentsExtension: "tsx",
     dependencies: [
-      { name: "@inertiajs/inertia-react", isDevDependency: false },
+      { name: "@inertiajs/react", isDevDependency: false },
       { name: "react", isDevDependency: false },
       { name: "react-dom", isDevDependency: false },
       { name: "@vitejs/plugin-react", isDevDependency: true },
       { name: "@types/react", isDevDependency: true },
       { name: "@types/react-dom", isDevDependency: true }
-    ]
+    ],
+    viteRegister: {
+      pluginCall: "react()",
+      importDeclarations: [{ isNamed: false, module: "@vitejs/plugin-react", identifier: "react" }]
+    },
+    ssrEntrypoint: "inertia/app/ssr.tsx"
   },
-  "Svelte": {
+  svelte: {
+    stubFolder: "svelte",
+    appExtension: "ts",
+    componentsExtension: "svelte",
     dependencies: [
-      { name: "@inertiajs/inertia-svelte", isDevDependency: false },
+      { name: "@inertiajs/svelte", isDevDependency: false },
       { name: "svelte", isDevDependency: false },
       { name: "@sveltejs/vite-plugin-svelte", isDevDependency: true }
-    ]
+    ],
+    viteRegister: {
+      pluginCall: "svelte()",
+      ssrPluginCall: "svelte({ compilerOptions: { hydratable: true } })",
+      importDeclarations: [
+        { isNamed: true, module: "@sveltejs/vite-plugin-svelte", identifier: "svelte" }
+      ]
+    },
+    ssrEntrypoint: "inertia/app/ssr.ts"
+  },
+  solid: {
+    stubFolder: "solid",
+    appExtension: "tsx",
+    componentsExtension: "tsx",
+    dependencies: [
+      { name: "solid-js", isDevDependency: false },
+      { name: "inertia-adapter-solid", isDevDependency: false },
+      { name: "vite-plugin-solid", isDevDependency: true },
+      { name: "@solidjs/meta", isDevDependency: false }
+    ],
+    viteRegister: {
+      pluginCall: "solid()",
+      ssrPluginCall: "solid({ ssr: true })",
+      importDeclarations: [{ isNamed: false, module: "vite-plugin-solid", identifier: "solid" }]
+    },
+    ssrEntrypoint: "inertia/app/ssr.tsx"
   }
 };
+async function defineExampleRoute(command, codemods) {
+  const tsMorph = await codemods.getTsMorphProject();
+  const routesFile = tsMorph?.getSourceFile(command.app.makePath("./start/routes.ts"));
+  if (!routesFile) {
+    return command.logger.warning("Unable to find the routes file");
+  }
+  const isAlreadyDefined = routesFile.getText().includes("/inertia");
+  if (isAlreadyDefined) {
+    command.logger.warning("/inertia route is already defined. Skipping");
+    return;
+  }
+  const action = command.logger.action("update start/routes.ts file");
+  try {
+    routesFile?.addStatements((writer) => {
+      writer.writeLine(`router.on('/inertia').renderInertia('home', { version: 6 })`);
+    });
+    await tsMorph?.save();
+    action.succeeded();
+  } catch (error) {
+    codemods.emit("error", error);
+    action.failed(error.message);
+  }
+}
 async function configure(command) {
-  const adapter = await command.prompt.choice(
-    "Select the Inertia adapter you want to use",
-    ADAPTERS,
-    { name: "adapter" }
-  );
-  const pkgToInstall = ADAPTERS_INFO[adapter].dependencies;
-  const withSsr = await command.prompt.confirm("Do you want to enable server-side rendering?", {
-    name: "ssr"
-  });
-  if (withSsr) {
-    pkgToInstall.push(...ADAPTERS_INFO[adapter].ssrDependencies || []);
+  let adapter = command.parsedFlags.adapter;
+  let ssr = command.parsedFlags.ssr;
+  let shouldInstallPackages = command.parsedFlags.install;
+  if (adapter === void 0) {
+    adapter = await command.prompt.choice(
+      "Select the Inertia adapter you want to use",
+      ADAPTERS.map((adapterName) => string.capitalCase(adapterName)),
+      { name: "adapter", result: (value) => value.toLowerCase() }
+    );
+  }
+  if (ssr === void 0) {
+    ssr = await command.prompt.confirm("Do you want to use server-side rendering?", {
+      name: "ssr"
+    });
   }
+  if (adapter in ADAPTERS_INFO === false) {
+    command.logger.error(
+      `The selected adapter "${adapter}" is invalid. Select one from: ${string.sentence(
+        Object.keys(ADAPTERS_INFO)
+      )}`
+    );
+    command.exitCode = 1;
+    return;
+  }
+  const adapterInfo = ADAPTERS_INFO[adapter];
   const codemods = await command.createCodemods();
   await codemods.updateRcFile((rcFile) => {
     rcFile.addProvider("@adonisjs/inertia/inertia_provider");
   });
-  codemods.registerMiddleware("router", [
+  await codemods.registerMiddleware("server", [
     { path: "@adonisjs/inertia/inertia_middleware", position: "after" }
   ]);
-  await command.publishStub("config.stub");
-  const shouldInstallPackages = await command.prompt.confirm(
-    `Do you want to install dependencies ${pkgToInstall.map((pkg) => pkg.name).join(", ")}?`,
-    { name: "install" }
+  const appExt = adapterInfo.appExtension;
+  const stubFolder = adapterInfo.stubFolder;
+  const compExt = adapterInfo.componentsExtension;
+  await codemods.makeUsingStub(stubsRoot, "config.stub", {
+    ssr,
+    ssrEntrypoint: adapterInfo.ssrEntrypoint
+  });
+  await codemods.makeUsingStub(stubsRoot, `app.css.stub`, {});
+  await codemods.makeUsingStub(stubsRoot, `${stubFolder}/root.edge.stub`, {});
+  await codemods.makeUsingStub(stubsRoot, `${stubFolder}/tsconfig.json.stub`, {});
+  await codemods.makeUsingStub(stubsRoot, `${stubFolder}/app.${appExt}.stub`, { ssr });
+  await codemods.makeUsingStub(stubsRoot, `${stubFolder}/home.${compExt}.stub`, {});
+  await codemods.makeUsingStub(stubsRoot, `${stubFolder}/errors/not_found.${compExt}.stub`, {});
+  await codemods.makeUsingStub(stubsRoot, `${stubFolder}/errors/server_error.${compExt}.stub`, {});
+  if (ssr) {
+    await codemods.makeUsingStub(stubsRoot, `${stubFolder}/ssr.${appExt}.stub`, {});
+  }
+  const inertiaPluginCall = ssr ? `inertia({ ssr: { enabled: true, entrypoint: 'inertia/app/ssr.${appExt}' } })` : `inertia({ ssr: { enabled: false } })`;
+  await codemods.registerVitePlugin(inertiaPluginCall, [
+    { isNamed: false, module: "@adonisjs/inertia/client", identifier: "inertia" }
+  ]);
+  await codemods.registerVitePlugin(
+    ssr && adapterInfo.viteRegister.ssrPluginCall ? adapterInfo.viteRegister.ssrPluginCall : adapterInfo.viteRegister.pluginCall,
+    adapterInfo.viteRegister.importDeclarations
   );
+  const adonisjsPluginCall = `adonisjs({ entrypoints: ['inertia/app/app.${appExt}'], reload: ['resources/views/**/*.edge'] })`;
+  await codemods.registerVitePlugin(adonisjsPluginCall, [
+    { isNamed: false, module: "@adonisjs/vite/client", identifier: "adonisjs" }
+  ]);
+  await defineExampleRoute(command, codemods);
+  const pkgToInstall = adapterInfo.dependencies;
+  if (ssr && adapterInfo.ssrDependencies) {
+    pkgToInstall.push(...adapterInfo.ssrDependencies);
+  }
+  if (shouldInstallPackages === void 0) {
+    shouldInstallPackages = await command.prompt.confirm(
+      `Do you want to install dependencies ${pkgToInstall.map((pkg) => pkg.name).join(", ")}?`,
+      { name: "install" }
+    );
+  }
   if (shouldInstallPackages) {
-    command.installPackages(pkgToInstall);
+    await codemods.installPackages(pkgToInstall);
   } else {
-    command.listPackagesToInstall(pkgToInstall);
+    await codemods.listPackagesToInstall(pkgToInstall);
   }
-  command.logger.success(
-    "Inertia was configured successfully. Please note that you still need to update your vite config, setup your Edge root view and others things. Read the docs for more info."
-  );
 }
 
-// stubs/main.ts
-import { getDirname } from "@poppinss/utils";
-var stubsRoot = getDirname(import.meta.url);
-
 // src/define_config.ts
 import { configProvider } from "@adonisjs/core";
 
@@ -116,15 +232,77 @@ var VersionCache = class {
   }
 };
 
+// src/files_detector.ts
+import { locatePath } from "locate-path";
+var FilesDetector = class {
+  constructor(app) {
+    this.app = app;
+  }
+  /**
+   * Try to locate the entrypoint file based
+   * on the conventional locations
+   */
+  async detectEntrypoint(defaultPath) {
+    const possiblesLocations = [
+      "./inertia/app/app.ts",
+      "./inertia/app/app.tsx",
+      "./resources/app.ts",
+      "./resources/app.tsx",
+      "./resources/app.jsx",
+      "./resources/app.js",
+      "./inertia/app/app.jsx"
+    ];
+    const path = await locatePath(possiblesLocations, { cwd: this.app.appRoot });
+    return this.app.makePath(path || defaultPath);
+  }
+  /**
+   * Try to locate the SSR entrypoint file based
+   * on the conventional locations
+   */
+  async detectSsrEntrypoint(defaultPath) {
+    const possiblesLocations = [
+      "./inertia/app/ssr.ts",
+      "./inertia/app/ssr.tsx",
+      "./resources/ssr.ts",
+      "./resources/ssr.tsx",
+      "./resources/ssr.jsx",
+      "./resources/ssr.js",
+      "./inertia/app/ssr.jsx"
+    ];
+    const path = await locatePath(possiblesLocations, { cwd: this.app.appRoot });
+    return this.app.makePath(path || defaultPath);
+  }
+  /**
+   * Try to locate the SSR bundle file based
+   * on the conventional locations
+   */
+  async detectSsrBundle(defaultPath) {
+    const possiblesLocations = ["./ssr/ssr.js", "./ssr/ssr.mjs"];
+    const path = await locatePath(possiblesLocations, { cwd: this.app.appRoot });
+    return this.app.makePath(path || defaultPath);
+  }
+};
+
 // src/define_config.ts
+import { slash } from "@poppinss/utils";
 function defineConfig(config) {
   return configProvider.create(async (app) => {
+    const detector = new FilesDetector(app);
     const versionCache = new VersionCache(app.appRoot, config.assetsVersion);
     await versionCache.computeVersion();
     return {
-      rootView: config.rootView ?? "root",
+      versionCache,
+      rootView: config.rootView ?? "inertia_layout",
       sharedData: config.sharedData || {},
-      versionCache
+      entrypoint: slash(
+        config.entrypoint ?? await detector.detectEntrypoint("inertia/app/app.ts")
+      ),
+      ssr: {
+        enabled: config.ssr?.enabled ?? false,
+        pages: config.ssr?.pages,
+        entrypoint: config.ssr?.entrypoint ?? await detector.detectSsrEntrypoint("inertia/app/ssr.ts"),
+        bundle: config.ssr?.bundle ?? await detector.detectSsrBundle("ssr/ssr.js")
+      }
     };
   });
 }

package/build/providers/inertia_provider.d.ts

@@ -1,5 +1,14 @@
 import { ApplicationService } from '@adonisjs/core/types';
 
+declare module '@adonisjs/core/http' {
+    interface BriskRoute {
+        /**
+         * Render an inertia page without defining an
+         * explicit route handler
+         */
+        renderInertia(component: string, props?: Record<string, any>, viewProps?: Record<string, any>): void;
+    }
+}
 /**
  * Inertia provider
  */
@@ -11,9 +20,13 @@ declare class InertiaProvider {
      */
     protected registerEdgePlugin(): Promise<void>;
     /**
-     * Register Inertia bindings
+     * Register inertia middleware
      */
     register(): Promise<void>;
+    /**
+     * Register edge plugin and brisk route macro
+     */
+    boot(): Promise<void>;
 }
 
 export { InertiaProvider as default };