@reddigital/quickstart/build/index.js

Frontend island architecture for Adonisjs

// stubs/main.ts
import { getDirname } from "@poppinss/utils";
var stubsRoot = getDirname(import.meta.url);

// configure.ts
var adapters = {
  svelte: {
    name: "svelte",
    displayName: "Svelte",
    packages: [
      { name: "svelte", isDevDependency: true },
      { name: "@sveltejs/vite-plugin-svelte", isDevDependency: true }
    ],
    vitePlugins: [
      {
        call: "svelte()",
        imports: [{ isNamed: true, module: "@sveltejs/vite-plugin-svelte", identifier: "svelte" }]
      }
    ],
    stubs: [
      { stub: "config.stub" },
      { stub: "svelte/app.ts.stub" },
      { stub: "svelte/ssr.ts.stub" },
      { stub: "svelte/tsconfig.json.stub" },
      { stub: "svelte/sample-component.svelte.stub" }
    ]
  },
  preact: {
    name: "preact",
    displayName: "Preact",
    packages: [
      { name: "preact", isDevDependency: false },
      { name: "preact-render-to-string", isDevDependency: false },
      { name: "@preact/preset-vite", isDevDependency: true }
    ],
    vitePlugins: [
      {
        call: "preact()",
        imports: [{ isNamed: false, module: "@preact/preset-vite", identifier: "preact" }]
      }
    ],
    stubs: [
      { stub: "config.stub" },
      { stub: "preact/app.ts.stub" },
      { stub: "preact/ssr.ts.stub" },
      { stub: "preact/tsconfig.json.stub" },
      { stub: "preact/sample-component.tsx.stub" }
    ]
  },
  vue: {
    name: "vue",
    displayName: "Vue",
    packages: [
      { name: "vue", isDevDependency: false },
      { name: "@vue/server-renderer", isDevDependency: false },
      { name: "@vitejs/plugin-vue", isDevDependency: true }
    ],
    vitePlugins: [
      {
        call: "vue()",
        imports: [{ isNamed: false, module: "@vitejs/plugin-vue", identifier: "vue" }]
      }
    ],
    stubs: [
      { stub: "config.stub" },
      { stub: "vue/app.ts.stub" },
      { stub: "vue/ssr.ts.stub" },
      { stub: "vue/tsconfig.json.stub" },
      { stub: "vue/sample-component.vue.stub" }
    ]
  }
};
async function selectFramework(command) {
  const frameworkChoices = Object.values(adapters).map((adapter) => ({
    name: adapter.name,
    message: adapter.displayName
  }));
  const selectedFramework = await command.prompt.choice(
    "Which frontend framework would you like to use?",
    frameworkChoices,
    { name: "framework" }
  );
  return adapters[selectedFramework];
}
async function configure(command) {
  let shouldInstallPackages = command.parsedFlags.install;
  const codemods = await command.createCodemods();
  const adapter = await selectFramework(command);
  await codemods.updateRcFile((rcFile) => {
    rcFile.addProvider("@reddigital/quickstart/provider");
  });
  await codemods.registerVitePlugin(`quickStartPlugin({ framework: '${adapter.name}' })`, [
    {
      isNamed: false,
      module: "@reddigital/quickstart/plugins/vite",
      identifier: "quickStartPlugin"
    }
  ]);
  for (const plugin of adapter.vitePlugins) {
    await codemods.registerVitePlugin(plugin.call, plugin.imports);
  }
  for (const stubConfig of adapter.stubs) {
    await codemods.makeUsingStub(stubsRoot, stubConfig.stub, stubConfig.templateData || {});
  }
  if (shouldInstallPackages === void 0) {
    shouldInstallPackages = await command.prompt.confirm(
      `Do you want to install ${adapter.displayName} dependencies (${adapter.packages.map((pkg) => pkg.name).join(", ")})?`,
      { name: "install" }
    );
  }
  if (shouldInstallPackages) {
    await codemods.installPackages(adapter.packages);
  } else {
    await codemods.listPackagesToInstall(adapter.packages);
  }
  command.logger.info("");
  command.logger.info("\u{1F527} Manual step required:");
  command.logger.info(
    "Please update your existing adonisjs() plugin in vite.config.ts to include the client app.ts entrypoint:"
  );
  command.logger.info("");
  command.logger.info("Before:");
  command.logger.info(
    `  adonisjs({ entrypoints: ['resources/css/app.css', 'resources/js/app.js'], ... })`
  );
  command.logger.info("");
  command.logger.info("After:");
  command.logger.info(
    `  adonisjs({ entrypoints: ['resources/css/app.css', 'resources/js/app.ts'], ... })`
  );
  command.logger.info("");
}

// src/define_config.ts
import { configProvider } from "@adonisjs/core";
function defineConfig(config) {
  return configProvider.create(async (_app) => {
    return {
      componentDir: config.componentDir ?? "resources/js/components",
      framework: config.framework || "preact",
      ssr: {
        entryPoint: config.ssr.entryPoint,
        buildDirectory: "ssr",
        manifestFile: "ssr/.vite/manifest.json"
      }
    };
  });
}
export {
  configure,
  defineConfig,
  stubsRoot
};