@monkeyplus/flow 4.0.0-beta.9 → 5.0.0-beta.1

package/src/core/vite/builder/types/index.ts

@@ -0,0 +1,13 @@
+import type { InlineConfig, SSROptions, ViteDevServer } from 'vite';
+import type { Flow, Nuxt } from '@monkeyplus/flow-schema';
+
+export interface ViteOptions extends InlineConfig {
+  ssr?: SSROptions
+}
+export interface ViteBuildContext {
+  flow: Flow
+  nuxt: Nuxt
+  config: ViteOptions
+  // clientServer?: ViteDevServer
+  ssrServer?: ViteDevServer
+}

package/src/core/vite/builder/utils/index.ts

@@ -0,0 +1,53 @@
+import { createHash } from 'node:crypto';
+import { promises as fsp, readdirSync, statSync } from 'node:fs';
+import { join } from 'pathe';
+
+export function uniq<T>(arr: T[]): T[] {
+  return Array.from(new Set(arr));
+}
+
+// Copied from vue-bundle-renderer utils
+const IS_JS_RE = /\.[cm]?js(\?[^.]+)?$/;
+const IS_MODULE_RE = /\.mjs(\?[^.]+)?$/;
+const HAS_EXT_RE = /[^./]+\.[^./]+$/;
+const IS_CSS_RE = /\.(?:css|scss|sass|postcss|less|stylus|styl)(\?[^.]+)?$/;
+
+export function isJS(file: string) {
+  return IS_JS_RE.test(file) || !HAS_EXT_RE.test(file);
+}
+
+export function isModule(file: string) {
+  return IS_MODULE_RE.test(file) || !HAS_EXT_RE.test(file);
+}
+
+export function isCSS(file: string) {
+  return IS_CSS_RE.test(file);
+}
+
+export function hashId(id: string) {
+  return `$id_${hash(id)}`;
+}
+
+export function hash(input: string, length = 8) {
+  return createHash('sha256')
+    .update(input)
+    .digest('hex')
+    .slice(0, length);
+}
+
+export function readDirRecursively(dir: string) {
+  return readdirSync(dir).reduce((files, file) => {
+    const name = join(dir, file);
+    const isDirectory = statSync(name).isDirectory();
+    return isDirectory ? [...files, ...readDirRecursively(name)] : [...files, name];
+  }, []);
+}
+
+export async function isDirectory(path: string) {
+  try {
+    return (await fsp.stat(path)).isDirectory();
+  }
+  catch (_err) {
+    return false;
+  }
+}

package/src/core/vite/builder/utils/warmup.ts

@@ -0,0 +1,27 @@
+import { logger } from '@monkeyplus/flow-kit';
+import type { ViteDevServer } from 'vite';
+
+export async function warmupViteServer(
+  server: ViteDevServer,
+  entries: string[],
+) {
+  const warmedUrls = new Set<String>();
+
+  const warmup = async(url: string) => {
+    if (warmedUrls.has(url))
+      return;
+
+    warmedUrls.add(url);
+    try {
+      await server.transformRequest(url);
+    }
+    catch (e) {
+      logger.debug('Warmup for %s failed with: %s', url, e);
+    }
+    const mod = await server.moduleGraph.getModuleByUrl(url);
+    const deps = Array.from(mod?.importedModules || []);
+    await Promise.all(deps.map((m) => warmup(m.url.replace('/@id/__x00__', '\0'))));
+  };
+
+  await Promise.all(entries.map((entry) => warmup(entry)));
+}

package/src/core/vite/builder/utils/wpfs.ts

@@ -0,0 +1,7 @@
+import { join } from 'pathe';
+import fse from 'fs-extra';
+
+export const wpfs = {
+  ...fse,
+  join,
+} as any;

package/src/core/vite/builder/vite-node.ts

@@ -0,0 +1,110 @@
+// import { createApp, createError, defineEventHandler, defineLazyEventHandler } from 'h3';
+// import { ViteNodeServer } from 'vite-node/server';
+import fse from 'fs-extra';
+import { resolve } from 'pathe';
+import { distDir } from '../../../dirs';
+import type { ViteBuildContext } from './types';
+// import { addServerMiddleware } from '@nuxt/kit';
+// import type { ViteDevServer, Plugin as VitePlugin } from 'vite';
+// import { distDir } from './dirs';
+// import type { ViteBuildContext } from './vite';
+// import { isCSS } from './utils';
+
+// // TODO: Remove this in favor of registerViteNodeMiddleware
+// // after Nitropack or h3 fixed for adding middlewares after setup
+// export function viteNodePlugin(ctx: ViteBuildContext): VitePlugin {
+//   return {
+//     name: 'nuxt:vite-node-server',
+//     enforce: 'pre',
+//     configureServer(server) {
+//       server.middlewares.use('/__nuxt_vite_node__', createViteNodeMiddleware(ctx));
+//     },
+//   };
+// }
+
+// export function registerViteNodeMiddleware(ctx: ViteBuildContext) {
+//   addServerMiddleware({
+//     route: '/__nuxt_vite_node__/',
+//     handler: createViteNodeMiddleware(ctx),
+//   });
+// }
+
+// function getManifest(server: ViteDevServer) {
+//   const ids = Array.from(server.moduleGraph.urlToModuleMap.keys())
+//     .filter((i) => isCSS(i));
+
+//   const entries = [
+//     '@vite/client',
+//     'entry.mjs',
+//     ...ids.map((i) => i.slice(1)),
+//   ];
+
+//   return {
+//     publicPath: '',
+//     all: entries,
+//     initial: entries,
+//     async: [],
+//     modules: {},
+//   };
+// }
+
+// function createViteNodeMiddleware(ctx: ViteBuildContext) {
+//   const app = createApp();
+
+//   app.use('/manifest', defineEventHandler(async() => {
+//     const manifest = await getManifest(ctx.ssrServer);
+//     return manifest;
+//   }));
+
+//   app.use('/module', defineLazyEventHandler(() => {
+//     const node: ViteNodeServer = new ViteNodeServer(ctx.ssrServer, {
+//       deps: {
+//         inline: [
+//           /\/(nuxt|nuxt3)\//,
+//           /^#/,
+//           ...ctx.nuxt.options.build.transpile as string[],
+//         ],
+//       },
+//     });
+//     return async(event) => {
+//       const moduleId = decodeURI(event.req.url).substring(1);
+//       if (moduleId === '/')
+//         throw createError({ statusCode: 400 });
+
+//       const module = await node.fetchModule(moduleId) as any;
+//       return module;
+//     };
+//   }));
+
+//   return app.nodeHandler;
+// }
+
+export async function prepareDevServerEntry(ctx: ViteBuildContext) {
+  let entryPath = resolve(ctx.flow.options.appDir, 'entry.async.mjs');
+  if (!fse.existsSync(entryPath))
+    entryPath = resolve(ctx.flow.options.appDir, 'entry.async');
+
+  // TODO: Update me
+  const host = ctx.flow.options.server.host || 'localhost';
+  const port = ctx.flow.options.server.port || '3000';
+  const protocol = ctx.flow.options.server.https ? 'https' : 'http';
+
+  // Serialize and pass vite-node runtime options
+  const viteNodeServerOptions = {
+    baseURL: `${protocol}://${host}:${port}/__flow_vite_node__`,
+    rootDir: ctx.flow.options.rootDir,
+    entryPath,
+    base: '/_flow/',
+    // base: ctx.ssrServer.config.base || '/_nuxt/',
+  };
+  process.env.FLOW_VITE_NODE_OPTIONS = JSON.stringify(viteNodeServerOptions);
+
+  await fse.writeFile(
+    resolve(ctx.flow.options.buildDir, 'dist/server/server.mjs'),
+    `export { default } from ${JSON.stringify(resolve(distDir, 'runtime/vite-node.mjs'))}`,
+  );
+  await fse.writeFile(
+    resolve(ctx.flow.options.buildDir, 'dist/server/client.manifest.mjs'),
+    `export { default } from ${JSON.stringify(resolve(distDir, 'runtime/client.manifest.mjs'))}`,
+  );
+}

package/src/core/vite/client/index.ts

@@ -0,0 +1,48 @@
+import { resolve } from 'pathe';
+import type { Flow } from '@monkeyplus/flow-schema';
+import { build, createServer } from 'vite';
+import { debounce } from 'perfect-debounce';
+
+export const createClient = async(flow: Flow) => {
+  const vite = await createServer({
+    root: resolve(flow.options.rootDir),
+    base: '/_vite/',
+    build: {
+      manifest: true,
+    },
+    server: {
+      middlewareMode: 'ssr',
+    },
+  });
+  const _doReload = () => {
+    vite.ws.send({ type: 'full-reload' });
+  };
+
+  const doReload = debounce(_doReload, 50);
+
+  // Use this to refresh page
+  flow.hook('bundler:change', () => {
+    doReload();
+  });
+
+  flow.hook('close', async() => {
+    await vite.close();
+  });
+
+  return vite;
+};
+
+export const builClient = async(flow: Flow) => {
+  return await build({
+    root: flow.options.rootDir,
+    mode: 'production',
+    build: {
+      assetsDir: 'scripts',
+      target: 'es2017',
+      outDir: '.vite',
+      manifest: true,
+    },
+  });
+};
+
+// export default await runVite();

package/src/dirs.ts

@@ -0,0 +1,8 @@
+import { fileURLToPath } from 'node:url';
+import { dirname, resolve } from 'pathe';
+
+let _distDir = dirname(fileURLToPath(import.meta.url));
+if (_distDir.endsWith('chunks')) _distDir = dirname(_distDir);
+export const distDir = _distDir;
+export const pkgDir = resolve(distDir, '..');
+export const runtimeDir = resolve(distDir, 'runtime');

package/src/head/module.ts

@@ -0,0 +1,37 @@
+import { addPlugin, defineFlowModule } from '@monkeyplus/flow-kit';
+import { resolve } from 'pathe';
+import type { FlowModule } from '@monkeyplus/flow-schema';
+
+import { distDir } from '../dirs';
+
+export default defineFlowModule({
+  meta: {
+    name: 'meta',
+  },
+  defaults: {
+    charset: 'utf-8',
+    viewport: 'width=device-width, initial-scale=1',
+  },
+  setup(options, flow) {
+    const runtimeDir = flow.options.alias['#head'] || resolve(distDir, 'head/runtime');
+    // Transpile @nuxt/meta and @vueuse/head
+    // flow.options.build.transpile.push('@vueuse/head');
+
+    flow.options.alias['#head'] = runtimeDir;
+
+    // Global meta -for Bridge, this is necessary to repeat here
+    // and in packages/schema/src/config/_app.ts
+    // const globalMeta: any = defu(flow.options.app.head, {
+    //   charset: options.charset,
+    //   viewport: options.viewport,
+    // });
+
+    // // Add global meta configuration
+    // addTemplate({
+    //   filename: 'meta.config.mjs',
+    //   getContents: () => `export default ${JSON.stringify({ globalMeta })}`,
+    // });
+    // Add generic plugin
+    addPlugin({ src: resolve(runtimeDir, 'plugin') });
+  },
+}) as FlowModule<any>;

package/src/head/runtime/composables.ts

@@ -0,0 +1,16 @@
+
+import type { MetaObject } from '@monkeyplus/flow-schema';
+/**
+ * You can pass in a meta object, which has keys corresponding to meta tags:
+ * `title`, `base`, `script`, `style`, `meta` and `link`, as well as `htmlAttrs` and `bodyAttrs`.
+ *
+ * Alternatively, for reactive meta state, you can pass in a function
+ * that returns a meta object.
+ */
+// TODO: fake use Head
+export function useHead(meta: MetaObject) {
+  // console.log('meta', meta);
+
+  // const resolvedMeta = isFunction(meta) ? computed(meta) : meta;
+  // useFlowApp()._useHead(resolvedMeta);
+}

package/src/head/runtime/index.ts

@@ -0,0 +1 @@
+export * from './composables';

package/src/head/runtime/plugin.ts

@@ -0,0 +1,12 @@
+
+import { defineFlowPlugin } from '#app';
+
+export default defineFlowPlugin((flow) => {
+  // console.log('Pages plugin');
+  // flow.hook('page:scripts', (scripts) => {
+  //   scripts.head.push('');
+  // });
+  flow._useHead = (_meta: any) => {
+    console.log(_meta);
+  };
+});

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './core/flow';
+export * from './core/builder';

package/src/pages/module.ts

@@ -0,0 +1,55 @@
+import { addPlugin, addTemplate, defineNuxtModule } from '@monkeyplus/flow-kit';
+import { resolve } from 'pathe';
+import escapeRE from 'escape-string-regexp';
+import type { FlowModule } from '@monkeyplus/flow-schema';
+import { distDir } from '../dirs';
+import type{ Pages } from './utils';
+import { normalizePages, resolvePagesRoutes } from './utils';
+import { pagesTypeTemplate } from './templates';
+export default defineNuxtModule({
+  meta: {
+    name: 'pages',
+  },
+
+  async setup(_options, flow) {
+    const runtimeDir = resolve(distDir, 'pages/runtime');
+    // flow.options.alias['#pages'] = runtimeDir;
+    const pages: Pages[] = [];
+    // Regenerate templates when adding or removing pages
+    flow.hook('builder:watch', async(event, path) => {
+      const dirs = [
+        flow.options.dir.pages,
+        flow.options.dir.layouts,
+        flow.options.dir.middleware,
+      ].filter(Boolean);
+
+      const pathPattern = new RegExp(`^(${dirs.map(escapeRE).join('|')})/`);
+      if (event !== 'change' && path.match(pathPattern))
+        await flow.callHook('builder:generateApp');
+    });
+    const options = { pages, buildDir: flow.options.buildDir };
+    addTemplate({
+      ...pagesTypeTemplate,
+      options,
+    });
+
+    flow.options.alias['#pages'] = resolve(flow.options.buildDir, 'pages.mjs');
+    addTemplate({
+      filename: 'pages.mjs',
+      async getContents({ options }) {
+        const { exports, imports } = normalizePages(options.pages);
+        return [imports, `export default {${exports}}`].join('\n');
+      },
+      options,
+    });
+
+    flow.hook('app:templates', async() => {
+      options.pages = await resolvePagesRoutes();
+    });
+    flow.hook('prepare:types', ({ references }) => {
+      references.push({ path: resolve(flow.options.buildDir, 'pages.d.ts') });
+    });
+    // Add generic plugin
+    addPlugin({ src: resolve(runtimeDir, 'plugin') });
+  },
+}) as FlowModule<any>;

package/src/pages/runtime/helpers/index.ts

@@ -0,0 +1,33 @@
+import type { GetPages, PageDefinition } from '@monkeyplus/flow-schema';
+import { joinURL, withTrailingSlash } from 'ufo';
+
+const buildPages = (page: PageDefinition): GetPages => (location: string, language: string) => {
+  const locales = Object.entries(page.locales);
+  return locales.map(([locale, localePage]) => {
+    const [_language, _location] = locale.split('-');
+    const name = joinURL('/', _location, _language, page.name);
+    const defLocation = _location === location ? '' : _location;
+    const defLanguage = _language === language ? '' : _language;
+    const url = joinURL('/', defLocation, defLanguage, localePage.url);
+    const _locale = {
+      lang: _language,
+      loc: _location,
+      code: locale,
+    };
+
+    const path = localePage.url.endsWith('/') ? withTrailingSlash(url) : url;
+    return {
+      name,
+      url: path,
+      context: { page: localePage, locale: _locale, path, view: page.view, name },
+      // locale: _locale,
+    };
+  });
+};
+
+export function definePage(page: PageDefinition) {
+  return {
+    pages: [],
+    getPages: buildPages(page),
+  };
+}

package/src/pages/runtime/plugin.ts

@@ -0,0 +1,58 @@
+
+import { joinURL } from 'ufo';
+import type { FlowPage } from '@monkeyplus/flow-schema';
+import { definePage } from './helpers';
+import { defineFlowPlugin, useRuntimeConfig } from '#app';
+// @ts-ignore
+import pages from '#pages';
+
+export default defineFlowPlugin(async(flow) => {
+  const { app } = useRuntimeConfig();
+  const allPages: FlowPage['context'] [] = [];
+
+  Object.entries(pages).forEach(([name, page]) => {
+    const { getPages } = definePage({
+      name,
+      // @ts-expect-error
+      ...page,
+    });
+    const _pages = getPages(app.locale.location!, app.locale.language!);
+    _pages.forEach((page) => {
+      flow.router.byUrl.insert(page.url, page.context);
+      flow.router.byName.insert(page.name, page.context);
+      allPages.push(page.context);
+    });
+  });
+
+  function getUrl(namePage: string, localeCode?: string): string {
+    const code: string = localeCode || this?.getLocale()?.code;
+    const [lang, loc] = code.split('-');
+    const name = joinURL('/', loc, lang, namePage);
+    const { path } = flow.router.byName.lookup(name) || {};
+    return path || '/404';
+  }
+
+  async function getUrls() {
+    const urls: string[] = [];
+    for (const page of allPages) {
+      if (!page.path.includes('/**')) { urls.push(page.path); }
+      else {
+        const dPages = await page.page.dynamic.method({
+          locale: page.locale,
+          utils: Object.assign({ getLocale: () => page.locale }, flow.app.utils),
+        });
+        dPages.forEach((dPage) => {
+          urls.push(joinURL(page.path.replace('/**', ''), dPage.url));
+        });
+      }
+    }
+    return urls.sort();
+  }
+  flow.setUtil('getUrl', getUrl);
+  flow.setUtil('getUrls', getUrls);
+  return {
+    provide: {
+      pages: { allPages },
+    },
+  };
+});

package/src/pages/templates.ts

@@ -0,0 +1,20 @@
+import { genDynamicImport } from 'knitwork';
+import { isAbsolute, relative } from 'pathe';
+import { pascalCase } from 'scule';
+import type { Pages } from './utils';
+export interface PagesTemplateOptions {
+  buildDir?: string
+  pages: Pages[]
+}
+// TODO: include localeDefault
+export const pagesTypeTemplate = {
+  filename: 'pages.d.ts',
+  getContents: ({ options }: { options: PagesTemplateOptions }) => `// Generated by pages discovery
+export {}
+declare global {
+
+${options.pages.map((c) => `export type ${pascalCase(c.name)}Context=Awaited<ReturnType<typeof ${genDynamicImport(isAbsolute(c.file) ? relative(options.buildDir, c.file) : c.file, { wrapper: false })}['pages']['locales']['es-ec']['context']>>`).join('\n')}
+}
+export const pagesNames: string[]
+`.replaceAll('.ts', ''),
+};

package/src/pages/utils.ts

@@ -0,0 +1,49 @@
+
+import { resolveFiles, useNuxt } from '@monkeyplus/flow-kit';
+import { extname, relative, resolve } from 'pathe';
+import escapeRE from 'escape-string-regexp';
+import { camelCase } from 'scule';
+import { genImport } from 'knitwork';
+
+// import {} from
+
+export interface Pages{ file: string; name: string }
+export async function resolvePagesRoutes(): Promise<Pages[]> {
+  const nuxt = useNuxt();
+
+  const pagesDirs = [...new Set(nuxt.options._layers.map(
+    (layer) => resolve(layer.config.srcDir, layer.config.dir?.pages || 'pages'),
+  ))];
+
+  const allRoutes: Pages[] = (await Promise.all(
+    pagesDirs.map(async(dir) => {
+      const files = await resolveFiles(dir, `**/*{${nuxt.options.extensions.join(',')}}`);
+
+      // Sort to make sure parent are listed first
+
+      files.sort();
+      return files.map((file) => {
+        const segments = relative(dir, file).replace(new RegExp(`${escapeRE(extname(file))}$`), '')
+          .split('/').join('_');
+
+        return {
+          file,
+          name: camelCase(segments),
+        };
+      });
+    }),
+  )).flat();
+
+  return allRoutes;
+
+  // return uniqueBy(allRoutes, 'path');
+}
+
+export function normalizePages(pages: Pages[]) {
+  const imports = pages.map((page) => genImport(page.file, [{ name: 'pages', as: page.name }])).join('\n');
+  return {
+    imports,
+    exports: pages.reduce((acc, curr) => `${curr.name || ''},${acc}`, ''),
+
+  };
+}

package/src/vite-client/module.ts

@@ -0,0 +1,70 @@
+import { addDevServerHandler, addPlugin, addTemplate, defineFlowModule } from '@monkeyplus/flow-kit';
+import type { FlowModule } from '@monkeyplus/flow-schema';
+import { resolve } from 'pathe';
+// import { genImport } from 'knitwork';
+import fse from 'fs-extra';
+import logger from 'consola';
+import { builClient, createClient } from '../core/vite/client';
+import { distDir } from '../dirs';
+
+interface OptionsViteClient{
+  route: string
+}
+export default defineFlowModule<OptionsViteClient>({
+
+  meta: {
+    name: 'viteClient',
+  },
+  defaults: {
+    route: '/_vite/',
+  },
+  async setup(_options, flow) {
+    const runtimeDir = resolve(distDir, 'vite-client/runtime');
+    flow.options.alias['#viteManifest'] = resolve(flow.options.buildDir, 'viteManifest.mjs');
+
+    if (flow.options.dev) {
+      const _vite = await createClient(flow);
+      addDevServerHandler({
+        handler: _vite.middlewares,
+        route: _options.route,
+      });
+      addTemplate({
+        filename: 'viteManifest.mjs',
+        async getContents() {
+          return ['export default {',
+            'head:()=>`<script type="module" src="/_vite/@vite/client"></script>`',
+            ',',
+            // eslint-disable-next-line no-template-curly-in-string
+            'body: (bundle)=>`<script type="module" src="/_vite/client/pages/${bundle}.ts"></script>`',
+            '}',
+          ].join('\n');
+        },
+      });
+    }
+    else {
+      flow.hook('modules:done', async() => {
+        const start = Date.now();
+        logger.info('Building client...');
+        await builClient(flow);
+
+        const file = resolve(flow.options.rootDir, '.vite/manifest.json');
+        const manifest = await fse.readFile(file, 'utf8');
+        logger.success(`Client build in ${Date.now() - start}ms`);
+
+        addTemplate({
+          filename: 'viteManifest.mjs',
+          async getContents() {
+            return ['export default ()=>(', manifest, ')',
+            ].join('\n');
+          },
+        });
+        // Manifest json
+      });
+      flow.hook('generate:before', async() => {
+        const files = resolve(flow.options.rootDir, '.vite/scripts');
+        await fse.copy(files, resolve(flow.options.generate.dir, 'assets'));
+      });
+    }
+    addPlugin({ src: resolve(runtimeDir, 'plugin') });
+  },
+}) as FlowModule<OptionsViteClient>;