@monkeyplus/flow 5.0.0-rc.199 → 5.0.0-rc.2

package/src/core/vite/builder/server.ts

@@ -0,0 +1,164 @@
+import { join, normalize, resolve } from 'pathe';
+import * as vite from 'vite';
+import fse from 'fs-extra';
+import { withoutTrailingSlash } from 'ufo';
+import { logger } from '@monkeyplus/flow-kit';
+import { debounce } from 'perfect-debounce';
+import { cacheDirPlugin } from './plugins/cache-dir';
+import type { ViteBuildContext, ViteOptions } from './types';
+import { wpfs } from './utils/wpfs';
+import { bundleRequest } from './dev-bundler';
+import { writeManifest } from './manifest';
+import { isCSS, isDirectory, readDirRecursively } from './utils';
+
+export const buildServer = async(ctx: ViteBuildContext) => {
+  // const _resolve = (id: string) => resolveModule(id, { paths: ctx.flow.options.modulesDir });
+
+  const serverConfig: vite.InlineConfig = vite.mergeConfig(ctx.config, {
+    configFile: false,
+    define: {
+      'process.server': true,
+      'typeof window': '"undefined"',
+      'typeof document': '"undefined"',
+      'typeof navigator': '"undefined"',
+      'typeof location': '"undefined"',
+      'typeof XMLHttpRequest': '"undefined"',
+    },
+    ssr: {
+      noExternal: [
+        ...ctx.flow.options.build.transpile,
+        // TODO: Use externality for production (rollup) build
+        /\/esm\/.*\.js$/,
+        /\.(es|esm|esm-browser|esm-bundler).js$/,
+        '/__vue-jsx',
+        '#app',
+        /(nuxt|nuxt3)\/(dist|src|app)/,
+        /@monkeyplus\/flow\/(dist|src|app)/,
+        /@nuxt\/nitro\/(dist|src)/,
+      ],
+    },
+    build: {
+      outDir: resolve(ctx.flow.options.buildDir, 'dist/server'),
+      manifest: true,
+      rollupOptions: {
+        external: ['#internal/nitro'],
+        output: {
+          entryFileNames: 'server.mjs',
+          preferConst: true,
+          format: 'module',
+        },
+        onwarn(warning, rollupWarn) {
+          if (!['UNUSED_EXTERNAL_IMPORT'].includes(warning.code))
+            rollupWarn(warning);
+        },
+      },
+    },
+    server: {
+      // https://github.com/vitest-dev/vitest/issues/229#issuecomment-1002685027
+      preTransformRequests: false,
+      cors: true,
+    },
+    plugins: [
+      cacheDirPlugin(ctx.flow.options.rootDir, 'server'),
+    ],
+  } as ViteOptions);
+
+  await ctx.flow.callHook('vite:extendConfig', serverConfig, { isClient: false, isServer: true });
+
+  ctx.flow.hook('nitro:build:before', async() => {
+    if (ctx.flow.options.dev)
+      return;
+
+    const clientDist = resolve(ctx.flow.options.buildDir, 'dist/client');
+
+    // Remove public files that have been duplicated into buildAssetsDir
+    // TODO: Add option to configure this behavior in vite
+    const publicDir = join(ctx.flow.options.srcDir, ctx.flow.options.dir.public);
+    let publicFiles: string[] = [];
+    if (await isDirectory(publicDir)) {
+      publicFiles = readDirRecursively(publicDir).map((r) => r.replace(publicDir, ''));
+      for (const file of publicFiles) {
+        try {
+          fse.rmSync(join(clientDist, file));
+        }
+        catch {}
+      }
+    }
+
+    // Copy doubly-nested /_nuxt/_nuxt files into buildAssetsDir
+    // TODO: Workaround vite issue
+    if (await isDirectory(clientDist)) {
+      const nestedAssetsPath = withoutTrailingSlash(join(clientDist, ctx.flow.options.app.buildAssetsDir));
+
+      if (await isDirectory(nestedAssetsPath)) {
+        await fse.copy(nestedAssetsPath, clientDist, { recursive: true });
+        await fse.remove(nestedAssetsPath);
+      }
+    }
+  });
+
+  const onBuild = () => ctx.flow.callHook('build:resources', wpfs);
+
+  // Production build
+  if (!ctx.flow.options.dev) {
+    const start = Date.now();
+    logger.info('Building server...');
+    await vite.build(serverConfig);
+    await onBuild();
+    logger.success(`Server built in ${Date.now() - start}ms`);
+    return;
+  }
+
+  // if (!ctx.flow.options.ssr) {
+  //   await onBuild();
+  //   return;
+  // }
+  // console.log(serverConfig.plugins);
+
+  // Start development server
+  const viteServer = await vite.createServer(serverConfig);
+  ctx.ssrServer = viteServer;
+
+  await ctx.flow.callHook('vite:serverCreated', viteServer, { isClient: false, isServer: true });
+
+  // Close server on exit
+  ctx.flow.hook('close', () => viteServer.close());
+
+  // Initialize plugins
+  await viteServer.pluginContainer.buildStart({});
+  // console.log(viteServer.1);
+
+  // if (ctx.flow.options.experimental.viteNode) {
+  //   logger.info('Vite server using experimental `vite-node`...');
+  //   await prepareDevServerEntry(ctx);
+  // }
+  // else {
+  // Build and watch
+  const _doBuild = async() => {
+    const start = Date.now();
+    const { code, ids } = await bundleRequest({ viteServer }, resolve(ctx.flow.options.appDir, 'entry'));
+    await fse.ensureFile(resolve(ctx.flow.options.buildDir, 'dist/server/server.mjs'));
+    await fse.writeFile(resolve(ctx.flow.options.buildDir, 'dist/server/server.mjs'), code, 'utf-8');
+    // Have CSS in the manifest to prevent FOUC on dev SSR
+    await writeManifest(ctx, ids.filter(isCSS).map((i) => i.slice(1)));
+    const time = (Date.now() - start);
+    logger.success(`Vite server built in ${time}ms`);
+    await onBuild();
+    ctx.flow.callHook('bundler:change', {} as any);
+  };
+  const doBuild = debounce(_doBuild);
+
+  // Initial build
+  await _doBuild();
+
+  // Watch
+  viteServer.watcher.on('all', (_event, file) => {
+    file = normalize(file); // Fix windows paths
+    if (file.indexOf(ctx.flow.options.buildDir) === 0) return;
+    doBuild();
+  });
+  ctx.flow.hook('app:templatesGenerated', () => doBuild());
+
+  // ctx.nuxt.hook('builder:watch', () => doBuild())
+  // }
+};

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,63 @@
+import { resolve } from 'pathe';
+import type { Flow } from '@monkeyplus/flow-schema';
+import type { ViteDevServer } from 'vite';
+import { build, createServer } from 'vite';
+import { debounce } from 'perfect-debounce';
+
+export const createClient = async(flow: Flow) => {
+  let vite: ViteDevServer;
+  if (globalThis.viteClient) {
+    vite = globalThis.viteClient as ViteDevServer;
+  }
+  else {
+    vite = await createServer({
+      root: resolve(flow.options.rootDir),
+      base: '/_vite/',
+      build: {
+        manifest: true,
+      },
+      server: {
+        watch: {
+          ignored: ['**/.env/**', '**/.env*'],
+        },
+        middlewareMode: 'ssr',
+      //
+      },
+    });
+    globalThis.viteClient = vite;
+  }
+
+  const _doReload = () => {
+    if (vite)
+      vite?.ws?.send({ type: 'full-reload' });
+  };
+
+  const doReload = debounce(_doReload, 60);
+
+  // Use this to refresh page
+  flow.hook('bundler:change', () => {
+    doReload();
+  });
+
+  flow.hook('close', async() => {
+    vite.restart();
+    // 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: page.name },
+      // locale: _locale,
+    };
+  });
+};
+
+export function definePage(page: PageDefinition) {
+  return {
+    pages: [],
+    getPages: buildPages(page),
+  };
+}

package/src/pages/runtime/index.ts

@@ -0,0 +1,9 @@
+import type { DynamicPage, SimplePage } from '@monkeyplus/flow-schema';
+
+export function definePage(page: SimplePage) {
+  return page;
+}
+
+export function defineDinamycPage(page: DynamicPage) {
+  return page;
+}