@wallfar/ocd-studio-core-sdk/dist/modules/studio-content-components.mjs

Helper SDK for our OneClick Studio modules

import { defineNuxtModule, createResolver, addTemplate, addPlugin } from '@nuxt/kit';
import fg from 'fast-glob';
import { basename, extname } from 'pathe';

const PKG_IMPORT = "@wallfar/ocd-studio-core-sdk";
const studioContentComponents = defineNuxtModule({
  meta: { name: "studio-content-components", configKey: "studioContentComponents" },
  defaults: { dirs: ["components/content-blocks"], mode: "all" },
  async setup(options, nuxt) {
    const { resolve } = createResolver(nuxt.options.rootDir);
    const roots = (options.dirs ?? []).map((d) => resolve(d).replace(/\\/g, "/"));
    const patterns = roots.map((r) => `${r.replace(/\/+$/, "")}/**/*.{vue,tsx}`);
    const files = await fg(patterns, { onlyFiles: true, absolute: true });
    const items = files.map((abs) => {
      const base = basename(abs, extname(abs));
      const pascal = base.replace(/(^\w|-\w)/g, (m) => m.replace("-", "").toUpperCase());
      const kebab = base.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
      return { pascal, kebab, file: abs.replace(/\\/g, "/") };
    });
    const regTpl = addTemplate({
      filename: "studio-components-registry.mjs",
      getContents: () => [
        `export const studioComponentLoaders = {`,
        ...items.flatMap(({ pascal, kebab, file }) => [
          `  '${pascal}': () => import(/* @vite-ignore */ '${file}'),`,
          `  '${kebab}': () => import(/* @vite-ignore */ '${file}'),`
        ]),
        `}`
      ].join("\n")
    });
    const plgTpl = addTemplate({
      filename: "studio-components-provider.mjs",
      getContents: () => [
        `import { defineNuxtPlugin } from '#app'`,
        `import { defineAsyncComponent } from 'vue'`,
        `import { studioComponentsKey } from '${PKG_IMPORT}'`,
        `import { studioComponentLoaders } from '#build/${regTpl.filename}'`,
        `export default defineNuxtPlugin((nuxtApp) => {`,
        `  const reg = {}`,
        `  for (const [name, loader] of Object.entries(studioComponentLoaders)) {`,
        `    reg[name] = defineAsyncComponent(loader)`,
        `  }`,
        `  nuxtApp.vueApp.provide(studioComponentsKey, reg)`,
        `})`
      ].join("\n")
    });
    addPlugin({ src: plgTpl.dst, mode: options.mode });
    if (nuxt.options.dev) {
      console.log("[studio-content-components] registry size:", items.length);
    }
  }
});

export { studioContentComponents as default };